Передача значений переменных из JavaScript в PHP и обратно. Как использовать переменные PHP в JavaScript Как вывести переменную из js в 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 можно модифицировать: