Здравствуйте, в прошлой статье мы рассматривали синтаксис языка 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, поскольку он имеет целый ряд преимуществ:
В этой статье мы поговорили с вами о том, как выводить информацию на экран. Это можно сделать с помощью сообщений, а также меняя внутренний контент веб-страницы. Мы лишь немного затронули пространство имен document, которое имеет целый ряд функция для работы с веб-страницей. В следующих уроках мы ознакомимся с ними детально.
Можете самостоятельно экспериментировать с вышеописанными функциями, либо же скачивайте наши исходники. Удачи в изучении!
В некоторых случаях может потребоваться передать 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 «, и код работать не будет.
А затем мы посмотрели как обрабатывать события пользователя . В этот раз мы собираемся рассмотреть, как получить одни данные, введенные пользователем, и соединить их другими, чтобы сделать простую страницу, приветствующую вас.
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 являются контейнерами для хранения различной информации.
Переменные JavaScriptJavaScript переменные являются "контейнерами", в которые Вы можете загружать различную информацию, а позднее извлекать ее обратно.
Каждая JavaScript переменная должна иметь собственное уникальное имя, которое может начинаться с латинской буквы или символа "_".
Обратите внимание: имя переменных в JavaScript не может начинаться с цифр.
Обратите внимание: так как JavaScript чувствителен к регистру, переменные с одинаковыми именами написанными в разном регистре (например var и VAR), будут являться разными переменными.
Создание переменныхСоздание переменных в JavaScript часто называют "объявлением" переменных.
Переменные в JavaScript объявляются с помощью команды var .
//Создаем переменную с именем ex1 var ex1; //Создаем переменную с именем ex2 var ex2;
Созданные выше переменные будут пустыми то есть мы создали контейнеры, но не загрузили в них никакие значения.
Значения могут загружаться в контейнеры также прямо в момент создания как в примере ниже:
//Создаем переменную с именем ex1 содержащую значение 4 var ex1=4; //Создаем переменную с именем ex2 содержащую значение 5 var ex2=5;
Для того, чтобы извлечь значение из созданной ранее переменной, необходимо обратится к ее имени.
В следующем примере мы будем извлекать содержимое переменных и сразу выводить его на страницу с помощью команды document.write.
//Запишем число 4 в переменную ex1
var ex1=4;
//Запишем число 5 в переменную ex2
var ex2=5;
//Выведем содержимое переменной ex1 на страницу
document.write(ex1+"
");
//Выведем содержимое переменной ex2
document.write(ex2+"
");
//Изменим содержимое переменной ex2
ex2=200;
//Выведем новое содержимое переменной ex2
document.write(ex2);
Быстрый просмотр
Строковые переменныеПомимо чисел Вы можете хранить в переменных произвольный текст. Переменные, которые хранят текст, называются строковыми переменными .
При записи текста в переменную обязательно заключайте его в двойные (") или одинарные кавычки (").
//Запишем в переменную ex строку "Привет всем!" var ex="Привет всем!"; //Выведем значение переменной ex на страницу document.write(ex);
Быстрый просмотр
Определение переменных с var и без негоВ JavaScript Вы можете определять переменные с var и без него.
//Создадим новую переменную с var var ex=123; //Создадим новую переменную без var ex2=20;
Вам может показаться, что объявление переменных с var и без него всегда приводят к одинаковому результату, но это действительно так только, когда когда объявление происходит в глобальном контексте (т.е. за пределами всех функций).
Если же объявление происходит в локальном контексте (т.е. в теле какой-либо функции) объявление с var создает локальную переменную (т.е. переменную, которая будет доступна только в теле данной функции и после выполнения функции будет уничтожена), объявление без var создает глобальную переменную (т.е. переменную, которая будет доступна другим функциям внутри данного скрипта).
Обратите внимание: мы подробнее поговорим о локальных и глобальных переменных далее в этом учебнике.
Об удалении и переопределении переменныхПереопределяя переменные Вы не стираете значение, которое хранятся в них.
Var ex=123; var ex; document.write(ex); // Выведет 123
Если Вы хотите удалить переменную в JavaScript и она не была объявлена с помощью var Вы можете использовать оператор delete .
Ex=123; delete ex;
Оператор delete не может удалить переменные объявленные с помощью var, поэтому если переменная была объявлена с помощью var, то единственный способ удалить ее - присвоить ей значение null или undefined.
Var ex=123; ex=null; // или ex=undefined
Сделайте самиЗадание 1 . Исправьте ошибки в коде ниже:
Задание 1
var 33var=33;
document.write(33var);
document.write("
");
var str1=Привет всем!;
document.write(str1);
document.write("
");
var vaR = 288;
document.write(var);
document.write("
");
Задание 2 . Во внешнем файле secred1.js содержится переменные sec1, sec2, sec3 и sec4, которые содержат буквы кодового слова (не по порядку). Подключите внешний файл и узнайте кодовое слово путем вывода значений переменных на страницу.
В процессе разработке сайтов часто появляется потребность передать какое-либо значение (переменную, массив) в 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 можно модифицировать: