Как вывести значение переменной javascript в html. Переменные JavaScript. Как передать переменные PHP во внешний JavaScript

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

Переменные PHP в JavaScript

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

После того, как загрузка страницы завершена, вы больше не контролируете ее (за исключением случая, когда у вас есть сервер на основе временных операций ). Но если во время загрузки страницы вы передаете переменные PHP в код JavaScript , то можно продолжать использовать их внутри скриптов JS и управлять отображением страницы и ее динамическим поведением.

Теперь рассмотрим, как можно передать переменные из JavaScript в PHP или наоборот.

Как передать переменные PHP во встроенный JavaScript

Существует два основных метода включения кода JavaScript на странице HTML . Первый — мы располагаем код на той же странице, в разделе или в . Предположим, у нас есть встроенный код JS в разделе , и мы хотим передать переменную PHP username в JavaScript . В этом случае мы нужно использовать следующий код:

var username = ""; alert(username); ...

Мы определили в JS новую переменную и назвали ее username . Затем присвоили этой переменной JS PHP переменную $username , повторив ее. Естественно, переменная $username должна быть определена ранее на странице выше данной строки.

Обратите внимание, что вокруг кода PHP , который выводит $username , мы использовали двойные кавычки (« ) как при объявлении переменной в JS . Если переменная PHP является числом, то кавычки использовать не нужно. Но убедитесь, что вы правильно использовали кавычки, потому что строка вывода также может содержать кавычки, и это разобьет код JS .

Как передать переменные PHP во внешний JavaScript

Также JS код может храниться во внешнем файле (например, script.js ), связанном со страницей HTML . Например, если вы хотите передать значение переменной времени (в секундах ) в таймер JS , можно использовать следующий код:

var seconds = ; ...

Код во внешнем файле JS (script.js ):

setTimeout(function() { window.location.href = "/"; }, seconds * 1000);

В приведенном выше коде мы сначала инициализируем значение PHP переменной $seconds переменной JS seconds . После этого переменная становится доступной в DOM , и подключаемый скрипт (script.js ) может использовать ее. В приведенном выше примере пользователь перенаправляется на главную страницу после установленного промежутка времени.

Совет : Убедитесь, что в PHP и JavaScript вы определили переменные до того, как используете их в коде. Иначе вы получите сообщение об ошибке «undefined variable «, и код работать не будет.

В этой главе будет рассказано о методах вывода информации силами 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 - Ввод информации” будет рассказано об обратном процессе.

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

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 сниппет, в котором плейсхолдеры заменены полученными значениями подходящих ключей.

В процессе разработке сайтов часто появляется потребность передать какое-либо значение (переменную, массив) в javascript,в таких случаях обычно советуют что то вроде

var variable = alert(variable);

Javascript записанный инлайном вызывает смешанные чувства.

Во первых это почти всегда не по кодстайлу.

Во вторых трудно отлаживать.

В третьих Такой код не кушируется браузером.

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

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

Я убежден что javascript должен храниться исключительно в файлах,
html дабы обеспечить нормальное кеширование браузерами, и облегчить поиск этого самого скрипта в своем проекте.

Но как же передать значение из php и при этом сохранить красивый код?

Ответ использовать eval() в Javascript.

Рассмотрим пример с подключенимм google maps.

Для начала подключим google maps (библиотеку)

инициализируем начало отрисовки карт сразу после загрузки DOM

Var $ = jQuery.noConflict(); $(document).ready(function () { if ($("#map-canvas").length) { function initialize() { var place = eval($("#map-canvas").attr("data-place")); var pos = new google.maps.LatLng(place, place); var mapOptions = { center: pos, zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, scrollwheel: false, rotateControl: true }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); map.setTilt(45); var marker = new google.maps.Marker({ position: pos, map: map }); } google.maps.event.addDomListener(window, "load", initialize); } });

Создадим необходимые элементы html

Объяснение этой уличной магии

в js нас интересует строка:

Var place = eval($("#map-canvas").attr("data-place"));

$("#map-canvas").attr("data-place")

Получает атрибут data-place элемента с id map-canvas после чего eval() преобразует строку в js код, конкретней в массив т.к. присутствуют квадратные скобки.

По спецификации HTML5 ,браузеры пропускают атрибуты тегов начинающихся с data- влиять на отрисовку этот атрибут не будет, но его значение можно использовать в javascript.

Код html можно модифицировать: