JavaScript — вывод информации. Основы языка JavaScript Как вывести переменную из java в html

В этой главе будет рассказано о методах вывода информации силами ActionScript. По традиции в качестве выводимых данных используется строка “Hello World”. В данной же статье мы выведем на экран эту строку тремя разными способами.

Первый вариант вывода информации (функция writeln).

Самый простой и популярный способ вывести информацию на экран - это функция document.writeln(string). Нижу приведен пример:

< html> < head> < body> < script type= "text/javascript" > document.writeln ("Hello World!" ) ;

После вызова этой функции все прежде существующее содержимое страницы будет заменено на новое. В данном случае на строку “Hello World”. Поэтому рекомендуется использовать эту функцию только при загрузке страницы, если все содержимое создается усилиями JavaScript. Также эта функция очень полезная в ситуациях, когда необходимо сократить количество обращений к серверу. Один раз скачанный файл с исходным кодом может порождать несколько различных страниц в полностью автономном режиме.

Второй вариант вывода информации (функция alert).

Функция alert(string) очень хорошо подходит для отладки кода, но не для конечного использования. После ее вызова перед пользователем появится окошко с надписью и кнопкой “Ok”. Рекомендуется не использовать подобные всплывающие окна в реальных веб-сайтах, так как они очень сильно раздражают посетителей и часто блокируются различными плагинами браузера. Пример использования функции для отладки:

< html> < head> < body> < script type= "text/javascript" > alert ("Hello World!" ) ;

После выполнения этого когда перед вами появится стандартное окно Windows (или Linux, или Mac OS) всего лишь с одним вариантом ответа. Никакие взаимодействия со страницей до нажатия на кнопку “Ok” невозможны.

Третий вариант вывода информации (функция getElementById).

Самый мощный и часто используемый способ - это использование функции getElementById(tagId).

Все в HTML коде может иметь параметр ID. Любой тэг имеет вложенную в него строку (строка может быть и пустой). Через ID тэга можно обратиться к его содержимому и, соответственно, изменить. При этом другие тэги затронуты не будут. Пример:

< html> < head> < body> < div id= "placeForText" > < script type= "text/javascript" > document.getElementById ("placeForText" ) .innerHTML = "Hello World!" ;

В этом коде первым делом будет сделано обращение к документу (document), затем взят указатель на элемент-тэг, имеющий id равный “placeForText” (getElementById(“placeForText”)), а после, с помощью функции innerHTML, взят указатель на содержимое этого элемента-тэга. Используя равенство мы присваиваем содержимому элемента новое значение.

Такой подход намного лучше двух предыдущих по двум причинам: отсутствие назойливых всплывающих сообщений, возможность редактировать только часть HTML страницы. Естественно, при использовании такой функции возможен и следующий вариант:

< html> < head> < body> < div id= "feedback" > < script type= "text/javascript" > document.getElementById ("feedback" ) .innerHTML = "

Hello World!" ;

При выполнении этого кода внутрь элемента будет вставлен отформатированный текст с использованием HTML тэгов. То есть мы вставляем HTML внутрь HTML. На экране появится уже привычный нам текст “Hello World!”, однако написан он будет красным цветом.

Такой же механизм использован на страницах с регистрацией новых пользователей. На странице расположены две ключевых области: одна пустая, вторая с формой, которую необходимо заполнить. Если пользователь пропускает какое-нибудь поле или вводит неправильную информацию и пытается отправить форму на сервер, то скрипт, ответственный за валидацию введенных данных, обнаруживает ошибку и выводит красную надпись в пустую область, не модифицируя остальную страницу.

Итог.

В этой статье были разобраны все основные варианты вывода текста (чисел и других переменных, представимых в текстовом виде) на экран. В следующей статье “Шпаргалка по JavaScript №3 - Ввод информации” будет рассказано об обратном процессе.

Здравствуйте, в прошлой статье мы рассматривали синтаксис языка JavaScript. Мы узнали что такое циклы, переменные, массивы, логические операторы, функции и так далее.

Все эти операции проходят внутри страницы и никак не отображаются. Сегодня же мы научимся выводить необходимые данные на экран. Выводить будем обычную числовую переменную с помощью ActionScript, самыми разными способами.

Для того чтобы использовать все способы, которые будут указаны ниже, нам необходимо обращаться к объекту document. Это отдельный элемент языка JavaScript, который предназначен для работы с веб-сайтами.

Первый способ: функция writeln

Для вывода переменной таким образом нам необходимо её создать. Напишем такую строку: var message = «Hello World!».

Теперь поговорим о функции writeln. Её лучше всего использовать только при загрузке исходного варианта страницы, так внутренний контент будет изменен.

С помощью таких функций как writeln можно создать страницу, полностью написанную на JavaScript. Кроме этого, данная функция может быть полезна в том случае, когда необходимо уменьшить количество запросов с сервера.

Для того чтобы воспользоваться данной функцией, записываем команду document.writeln, в скобках записываем название нашей переменной, которое затем будет показано на экране.

Обратите внимание! Большинство инструкций для работы с веб-страницей являются составляющими пространства имен document, поэтому его необходимо вписывать перед самой функцией, через точку.

Второй способ: функция alert

Она не входит в пространство имен document, как writeln, поэтому его вписывать не нужно. Alert может отлично подойти для отладки кода веб-страницы. Его можно использовать и для взаимодействия с пользователем, но делать это не рекомендуется.

Alert имеет стандартный синтаксис любой JavaScript функции. Сначала записываем команду alert, в скобках записываем значение или переменной.

После этого в верхней части страницы всплывет окно с сообщением для пользователя, которое содержит кнопку «OK».

Данная функция может иметь множество применений, но не стоит злоупотреблять ей при работе с веб-сайтом, так как всплывающие окна могут вывести пользователя из себя. Кроме того, некоторые плагины блокируют функции типа alert.

JAVA

var message = «Hello World!»; document.writeln(«message»); alert(«message»); document.getElementById(«hl»).innerHTML = «message»

Скопировать

Третий способ: функция getElementById

Это самый сложный и наиболее популярный способ вывода информации на экран. С его помощью вы сможете изменять текстовый контент вашей HTML страницы.

Как мы знаем — все HTML теги могут иметь идентификаторы. Именно к ним и обращается наша функция. GetElementById находит элемент по его ID, изменяет содержимое тега по желанию, при этом остальной контент остается без изменений.

Данная функция входит в пространство имен document, что требует указывать его перед самой функцией.

Как вы могли заметить, кроме getElementById присутствует непонятная команда innerHTML, после него идет знак равенства и текстовая строка. Так вот, эта команда, вместе со знаком равенства, находит определенный тег и «приравнивает» его содержимое строке в кавычках.

Данный метод лучше всего подходит для вставки текста через JavaScript, поскольку он имеет целый ряд преимуществ:

Отсутствие всплывающих окон при работе функции.

Функция работает только с HTML-элементами.

Текст в кавычках может быть обернут в теги. Таким образом можно написать страницу на JavaScript с нуля.

Заключение

В этой статье мы поговорили с вами о том, как выводить информацию на экран. Это можно сделать с помощью сообщений, а также меняя внутренний контент веб-страницы. Мы лишь немного затронули пространство имен document, которое имеет целый ряд функция для работы с веб-страницей. В следующих уроках мы ознакомимся с ними детально.

Можете самостоятельно экспериментировать с вышеописанными функциями, либо же скачивайте наши исходники. Удачи в изучении!

А затем мы посмотрели как обрабатывать события пользователя . В этот раз мы собираемся рассмотреть, как получить одни данные, введенные пользователем, и соединить их другими, чтобы сделать простую страницу, приветствующую вас.

examples/js/pure_js_greating.html

Hello World First name: Last name: Say hi! function say_hi() { var fname = document.getElementById("first_name").value; var lname = document.getElementById("last_name").value; var html = "Hello " + fname + " " + lname; document.getElementById("result").innerHTML = html; } document.getElementById("say").addEventListener("click", say_hi); Try!

В этом примере у нас немного больше HTML, чем раньше. Кроме button и div , где мы будем показывать наши результаты, у нас также есть два элемента input . Каждый со своим ID.

В коде JavaScript у нас есть функция say_hi . Она использует метод getElementById , который мы рассмотрели ранее, чтобы получить DOM элемент, представляющий input с id first_name . Возвращенный объект имеет метод value , который вернет текст, введенный пользователем в это поле.

Мы применяем этот способ для получения содержимого обоих элементов input и присваиваем полученные значения двум переменным: fname и lname .

Затем, используя эти переменные, мы создаем HTML-сниппет и присваиваем его новой переменной html .

Потом мы устанавливаем атрибут innerHTML (как мы делали это ранее) чтобы показать сгенерированный HTML. Результат может выглядеть вот так:

Громоздкое создание HTML

Даже в таком простом HTML мы должны использовать + несколько раз, и код получается достаточно нечитаемый. Представьте, что бы произошло, если бы мы захотели создать более сложное приложение, где мы бы хотели генерировать списки элементов или даже таблицы. Генерация HTML на лету и вставка его в DOM была бы довольно неприятной.

В бекенде, написанном на Perl, Python или Ruby, люди сталкивались с теми же самыми проблемами. Решением было создание различных шаблонизаторов. В принципе, шаблон это HTML сниппет с некоторыми плейсхолдерами (ключевыми словами), некая функция получает этот HTML сниппет (шаблон) в качестве параметра, а также несколько пар ключ-значение. Затем функция возвращает новый HTML сниппет, в котором плейсхолдеры заменены полученными значениями подходящих ключей.

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

Передача значений переменных из JavaScript в PHP и обратно

В этой небольшой статье мы рассмотрим с вами один интересный момент, касающийся передачи значений переменных.

Иногда возникает необходимость использовать значение PHP-переменной в JavaScript-сценарии , либо наоборот: есть JavaScript-переменная, значение которой нам нужно использовать в PHP-скрипте .

В этом уроке мы рассмотрим простые примеры, которые позволят вам понять общий механизм того, как это можно реализовать.

Для определенности, предлагаю вам создать на локальном компьютере хост с именем php_js и разместить там файл index.php , в котором мы и будем рассматривать наши примеры.

Каркасом файла index.php будет простая HTML-разметка:

Передача значений переменных

Для большей наглядности весь код (включая JavaScript) мы будем писать внутри тэгов body .

1. Передача значения PHP-переменной в JavaScript

Давайте напишем такой код в тэге body :

1. Из PHP в JavaScript:

var userName = ""; document.write("Значение PHP-переменной: " + userName);

Итак, у нас есть PHP-переменная с именем name и значением Юрий , и наша задача состоит в том, чтобы это значение вывести на экран, но не средствами PHP, а с помощью JavaScript.

Для этого мы открываем как обычно блок JavaScript-кода и внутри него объявляем переменную с произвольным именем (в нашем случае - userName ). Теперь мы этой переменной присваиваем в качестве значения результат работы оператора echo применительно к переменной name .

Как вы видите, мы делаем это в блоке PHP-кода, который открываем и закрываем в пределах одинарных кавычек, обрамляющих строковое значение переменной userName в JavaScript-сценарии.

Таким образом, мы с помощью языка PHP формируем синтаксически верный код JavaScript, который будет корректно выполнен.

В результате выполнения этой строки в переменную userName попадет значение Юрий .

Вот и все. Значение PHP-переменной name было передано в JavaScript-переменную userName .

Теперь нам нужно только убедиться, что в нашей JavaScript-переменной userName хранится ожидаемое значение. Для этого мы выводим значение данной переменной на экран с помощью document.write .

2. Передача значения JavaScript-переменной в PHP (метод GET)

Здесь, как вы понимаете, ситуация у нас обратная. В наличии есть JavaScript-переменная, и ее значение нужно каким-то образом передать в PHP-сценарий.

Понятно, что эта задача несколько сложнее, ведь если в первом случае (передача значения PHP-переменной в JavaScript) у нас уже была PHP-переменная, значение которой мы просто вывели внутри JavaScript-кода, то здесь такой вариант не пройдет.

Ведь PHP-скрипт ничего не знает о том, что у нас создана некая JavaScript-переменная. И не узнает он об этом до тех пор, пока мы не отправим серверу GET или POST-запрос, в котором будет фигурировать значение JavaScript-переменной.

Вот тогда, уже на следующем запросе, мы сможем получить доступ к значению этой JavaScript-переменной из PHP-сценария.

Под уже существующим кодом допишем следующее:

2. Из JavaScript в PHP (метод GET):

var userName2 = "Дмитрий";

Внутри блока JavaScript-кода мы создаем переменную userName2 со значением Дмитрий .

Здесь наша задача состоит в том, чтобы средствами PHP создать корректный JavaScript-сценарий, который перезагрузит текущую страницу и одновременно с этим передаст файлу index.php через адресную строку (т.е. методом GET) значение, содержащееся в JavaScript-переменной userName2 .

Для этого мы выводим на страницу открывающий блок JavaScript-кода с помощью опрератора echo , внутри которого задаем средствами JavaScript перезагрузку текущей страницы (document.location.href ).

В качестве адреса страницы мы используем значение элемента REQUEST_URI из глобального массива $_SERVER и добавляем к нему параметр с именем u_name и значением, равным значению переменной userName2 .

В итоге наша условная конструкция if-else работает следующим образом:

1. Если при обращении к странице index.php в глобальном массиве $_GET есть элемент с индексом u_name (т.е. успешно сработала переадресация средствами JavaScript), то мы выводим на экран значение переданной JavaScript-переменной.

2. Если же при обращении к странице index.php в глобальном массиве $_GET нет элемента с индексом u_name , то запускается JavaScript-сценарий, выведенный средствами PHP и производит переадресацию на эту же страницу, но уже с параметром u_name , имеющим значение переменной userName2 (об этом мы говорили чуть выше).

Теперь, при обращении к index.php мы получим вот такой результат:

Как видите, в адресну строку средствами JavaScript мы передали значение переменной userName2 . Вследствие этого в массиве $_GET появился элемент с индексом u_name и значением Дмитрий .

Задача решена, и теперь мы можем как угодно манипулировать полученным значением в рамках PHP-сценария, что мы и сделали, воспользовашись выводом на экран значения элемента u_name из массива $_GET .

В исходном коде сформированной страницы мы увидим при этом следующую картину:

С этим моментом мы также разобрались, и остался еще один вариант.

3. Передача значения JavaScript-переменной в PHP (метод POST)

В предыдущем примере мы рассмотрели способ передачи значения с использованием адресной строки браузера (методом GET ).

Сейчас же мы рассмотрим вариант с передачей значения без использования адресной строки, т.е. методом POST .

В этом примере мы будем использовать форму для того, чтобы отправить данные на сервер методом POST .

Под уже существующим кодом напишем:

3. Из JavaScript в PHP (метод POST):

var userName3 = "Александр";

Значение JavaScript-переменной:

Начало у нас похожее: в блоке JavaScript-кода мы объявляем переменную с именем userName3 и значением Александр .

После этого переходим к PHP-коду. Мы видим, что в ветке if проверяется существование в глобальном массиве $_POST элемента с индексом u_name .

Если данный элемент будет найден, то он будет выведен на экран и будет закрыт тэг параграфа для всего предложения.

В случае отстутствия данного элемента в массиве $_POST управление передается ветке else .

Для этого мы выводим на страницу открывающий и закрывающий блоки JavaScript-кода с помощью опрератора echo , и внутри них формируем синтаксически верный JavaScript-код.

Наша задача сводится к тому, чтобы, используя команду вывода document.write в JavaScript, вывести на страницу обычную HTML-форму и подставить в единственное ее текстовое поле с именем u_name значение, которое хранится в переменной userName3 (Александр).

Самое сложное здесь - не запутаться в кавычках и их экранировании.

Именно поэтому перед написанием подобных скриптов я рекомендую вам сперва создать отдельный файл и написать в нем чистый JavaScript-код , который бы выводил форму и подставлял в поле значение переменной userName3 .

Когда вы с этим справитесь, то можете возвращаться к исходному файлу и задача ваша будет заключаться в том, чтобы в точности вывести тот код, который вы написали чуть раньше. На этот раз - уже средствами PHP.

Именно это мы и делаем в ветке else . Обратите внимание, что текст для вывода (предназначенный для оператора echo ) заключен в двойные кавычки. Соответственно, для конструкции document.write мы используем одинарные кавычки.

Это обстоятельство приводит к тому, что нам нужно проэкранировать все символы одинарных кавычек, которые находятся между открывающими и закрывающими одинарными кавычками, ограничивающими вывод строки для конструкции document.write .

Если сейчас обратиться к странице index.php , то результат будет следующий:

Как вы видите, после фразы "Значение JavaScript-переменной:" идет пустота, т.е. пока еще PHP-сценарий не получил значение JavaScript-переменной userName3 . И это понятно - ведь еще не было запроса к серверу, в котором могла быть передана эта информация.

При этом ниже в форме у нас находится слово Александр - как раз значение JavaScript-переменной userName3 .

Мы вставили его сюда как раз для того, чтобы отправлить форму и передать значение этой переменной методом POST нашему текущему скрипту index.php (если атрибут action отсутствует, то данные будут переданы текущему скрипту).

После нажатия на кнопку отправки мы увидим такую картину:

Теперь форма у нас исчезла, т.к. уже отрабатывает ветка if , и вместо нее выводится значение переменной.

Ну что ж, с этой задачей мы тоже справились - значение JavaScript-переменной userName3 мы передали в PHP-скрипт и вывели его на экран из массива $_POST .

На этом данную небольшую статью я завершаю. Очень надеюсь, что она поможет вам понять базовые принципы передачи значений переменных из JavaScript в PHP и обратно.

Вывод текста, данных на экран в JavaScript осуществляется при помощи двух операторов: Alert и Write.

Оператор Alert в JavaScript

Этот способ вывода текста (информации) в JavaScript характерен тем, что на экране браузера появляется небольшое окно с сообщением – его еще называют диалоговой панелью. Характерные черты панели – наличие кнопки Ok и текстовой информации.

Давайте рассмотрим пример вывода сообщения в JavaScript: Alert("Привет! Как дела?") // в диалоговой панели появится соответствующая надпись

Вот так просто с помощью оператора Alert в JavaScript мы можем производить вывод данных на экран (текста, картинки, сообщения).

Данный способ вывода сообщений удобен в том случае, когда текстовое сообщение небольшое и не нуждающееся в форматировании. В противном случае стоит использовать оператор write.

Оператор Write в JavaScript

Данный метод предоставляется объектом document. Поэтому оператор вывода сообщений будет выглядеть так: document.write(‘Текстовая информация’) . Текст будет отображаться не в диалоговой панели, а в окне браузера.

В отличие от первого способа мы можем форматировать наш документ при помощи тегов HTML языка. Строка с сообщением будет выглядеть в этом случае так, как если бы она являлась частью HTML странички.

Пример форматирования: document.write("Вот так форматируется текст")

Если сообщение большое, то его можно разделять на несколько подстрок при помощи символа +. document.write("Разделяем сообщение " + " символом +")

Ввод данных в JavaScript

Для ввода данных в JavaScript можно использовать также два способа: вызов confirm или prompt. Оба метода, как и alert, работают с диалоговой панелью, но имеют различные задачи. Первый требует от пользователя лишь выбора одного из двух вариантов, а второй – в заполнении формы.

1. Оператор confirm в JavaScript

При использовании данного оператора пользователь увидит на экране диалоговую панель, содержащую какое-то сообщение, а чуть ниже – две кнопки – Ok и Cancel. Такой способ необходим в том случае, если программа нуждается в действии от пользователя – подтверждения или опровержения какой-то информации.

Давайте рассмотрим пример использования оператора confirm:

document.write("Переходим…")

Скрипт работает так:

Выводит пользователю сообщение «Вы готовы перейти по ссылке?» и ждет его действий.

Если пользователь нажимает да (Ok), то программа выводит на экран сообщение «Переходим…».

Если пользователь нажимает отмена (cancel), то на экран выводится «Переход по ссылке отменен».

2. Оператор prompt в JavaScript

Этот оператор ждет от пользователя не только нажатия Ok или Cancel, а заполнения какой-либо формы. Пользователь увидит сообщение и строку, в которую он должен произойти ввод данных (даты, цифр, сообщения). Если он вводит данные и нажимает Ok, то метод prompt считывает содержимое строки и отдает переменной. В противном случае (при нажатии cancel) – переменная получает значение null.

Таким образом, данный метод имеет 2 параметра. Первый – это текст, объясняющий пользователю, что от него требуется. А второй – это значение, которое получит переменная, если пользователь нажмет (cancel).

Давайте разберем пример: var s // объявляем переменную с примитивом undefined

s=prompt("Введите свое имя", "Имя не введено") // два параметра оператора prompt

document.write(s) //вывод на экран значения переменной