А затем мы посмотрели как обрабатывать события пользователя . В этот раз мы собираемся рассмотреть, как получить одни данные, введенные пользователем, и соединить их другими, чтобы сделать простую страницу, приветствующую вас.
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. Мы узнали что такое циклы, переменные, массивы, логические операторы, функции и так далее.
Все эти операции проходят внутри страницы и никак не отображаются. Сегодня же мы научимся выводить необходимые данные на экран. Выводить будем обычную числовую переменную с помощью 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, которое имеет целый ряд функция для работы с веб-страницей. В следующих уроках мы ознакомимся с ними детально.
Можете самостоятельно экспериментировать с вышеописанными функциями, либо же скачивайте наши исходники. Удачи в изучении!
Вывод текста, данных на экран в 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) //вывод на экран значения переменной
В процессе разработке сайтов часто появляется потребность передать какое-либо значение (переменную, массив) в 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 можно модифицировать: