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

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 на лету и вставка его в DOM была бы довольно неприятной.

В бекенде, написанном на Perl, Python или Ruby, люди сталкивались с теми же самыми проблемами. Решением было создание различных шаблонизаторов. В принципе, шаблон это HTML сниппет с некоторыми плейсхолдерами (ключевыми словами), некая функция получает этот HTML сниппет (шаблон) в качестве параметра, а также несколько пар ключ-значение. Затем функция возвращает новый HTML сниппет, в котором плейсхолдеры заменены полученными значениями подходящих ключей.

Приветствую Вас дорогие читатели! Раз уж Вы открыли данную статью, то наверняка хотите познакомиться поближе с таким языком как JavaScript. Это замечательно!

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

До того как начать изучение языка JavaScript Вы должны хорошо знать HTML и CSS . Если Вы не знаете этих языков, то нет смысла идти дальше. Что касается зыка PHP, то это серверный язык и перед тем как начать изучение JavaScript, знать этого языка вовсе необязательно. Языки JavaScript и PHP совсем разные и между ними нет ничего общего.

Весь код JavaScript нужно писать межу тегом script.

//Код JavaScript

Блок JavaScript кода, можно писать в html файлы или в файлы с расширением.php или же в отдельном файле с расширением.js, который потом подключается в html или php файл таким образом:

Чистый код JavaScript должен находиться перед закрывающим тегом . В других местах он просто не будет работать. Это касается и подключения отдельных js файлов.

Главная страница

Дело в том что JavaScript, сокращенно JS, работает с html тегами, и до того как начать свою работу, html теги должны быть уже загружены. Загрузка страницы идет сверху вниз.

Теперь напишем наш первый традиционный скрипт "Hello World" . Создаем html файл с произвольным названием, и как я уже сказал, перед закрывающим тегом пишем этот код:

document.write("Hello World");

Сохраняем и открываем страницу в браузере. Этот код выведет на страницу строчку "Hello World"

Как Вы уже поняли, в JavaScript текст выводится на экран с помощью метода write() , который применяется к объекту document(текущая страница) .

Учтите что, как и в других языках программирования, строковые значения всегда пишутся внутри двойных или одинарных кавычках . Числа можно писать и без кавычек.

Document.write("Строковое значение"); document.write(1214564);

Внутри кавычек можно использовать различные html теги, такие как p, div, strong и другие.

Document.write("

Параграф

Также часто необходимо к html тегам дописать различные атрибуты. Например, для ссылки необходимо указать обязательный атрибут href. И здесь возникает небольшая проблема с кавычками.

Дело в том, что внутри двойных кавычек мы не можем использовать двойные кавычки. Например, мы не можем вывести значение атрибута href таким образом:

Document.write("my site");

В таком случае мы получим ошибку, потому что текстом для вывода является только тот, который находится внутри кавычек. В данном примере это "