Передача переменной из html в javascript

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

<script>
var variable = <?php $variable ;?>
alert(variable);
<script>

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

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

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

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

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

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

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

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

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

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

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

<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCdrLjcwRWoPkHw8bTvGD2gtNCn_6brs0w&amp;sensor=true&amp;language=ru'></script>

инициализируем начало отрисовки карт сразу после загрузки 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[0], place[1]);
            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

<div id="map-canvas" data-place="[61.784625, 34.350755]"></div>

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

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

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

здесь

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

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

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

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

<div id="map-canvas" data-place="<?php echo '[61.784625, 34.350755]' ;?>"></div>

с использованием php , так простыми средствами можно передавать целые массивы переменных из php в js не используя инлайнового написания : )