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

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 являются контейнерами для хранения различной информации.

Переменные JavaScript

JavaScript переменные являются "контейнерами", в которые Вы можете загружать различную информацию, а позднее извлекать ее обратно.

Каждая 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 осуществляется при помощи двух операторов: 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) //вывод на экран значения переменной

В этой главе будет рассказано о методах вывода информации силами ActionScript. По традиции в качестве выводимых данных используется строка “Hello World”. В данной же статье мы выведем на экран эту строку тремя разными способами.

Первый вариант вывода информации (функция writeln).

Самый простой и популярный способ вывести информацию на экран - это функция document.writeln(string). Нижу приведен пример:

< html> < head> < body> < script type= "text/javascript" > document.writeln ("Hello World!" ) ;

После вызова этой функции все прежде существующее содержимое страницы будет заменено на новое. В данном случае на строку “Hello World”. Поэтому рекомендуется использовать эту функцию только при загрузке страницы, если все содержимое создается усилиями JavaScript. Также эта функция очень полезная в ситуациях, когда необходимо сократить количество обращений к серверу. Один раз скачанный файл с исходным кодом может порождать несколько различных страниц в полностью автономном режиме.

Второй вариант вывода информации (функция alert).

Функция alert(string) очень хорошо подходит для отладки кода, но не для конечного использования. После ее вызова перед пользователем появится окошко с надписью и кнопкой “Ok”. Рекомендуется не использовать подобные всплывающие окна в реальных веб-сайтах, так как они очень сильно раздражают посетителей и часто блокируются различными плагинами браузера. Пример использования функции для отладки:

< html> < head> < body> < script type= "text/javascript" > alert ("Hello World!" ) ;

После выполнения этого когда перед вами появится стандартное окно Windows (или Linux, или Mac OS) всего лишь с одним вариантом ответа. Никакие взаимодействия со страницей до нажатия на кнопку “Ok” невозможны.

Третий вариант вывода информации (функция getElementById).

Самый мощный и часто используемый способ - это использование функции getElementById(tagId).

Все в HTML коде может иметь параметр ID. Любой тэг имеет вложенную в него строку (строка может быть и пустой). Через ID тэга можно обратиться к его содержимому и, соответственно, изменить. При этом другие тэги затронуты не будут. Пример:

< html> < head> < body> < div id= "placeForText" > < script type= "text/javascript" > document.getElementById ("placeForText" ) .innerHTML = "Hello World!" ;

В этом коде первым делом будет сделано обращение к документу (document), затем взят указатель на элемент-тэг, имеющий id равный “placeForText” (getElementById(“placeForText”)), а после, с помощью функции innerHTML, взят указатель на содержимое этого элемента-тэга. Используя равенство мы присваиваем содержимому элемента новое значение.

Такой подход намного лучше двух предыдущих по двум причинам: отсутствие назойливых всплывающих сообщений, возможность редактировать только часть HTML страницы. Естественно, при использовании такой функции возможен и следующий вариант:

< html> < head> < body> < div id= "feedback" > < script type= "text/javascript" > document.getElementById ("feedback" ) .innerHTML = "

Hello World!" ;

При выполнении этого кода внутрь элемента будет вставлен отформатированный текст с использованием HTML тэгов. То есть мы вставляем HTML внутрь HTML. На экране появится уже привычный нам текст “Hello World!”, однако написан он будет красным цветом.

Такой же механизм использован на страницах с регистрацией новых пользователей. На странице расположены две ключевых области: одна пустая, вторая с формой, которую необходимо заполнить. Если пользователь пропускает какое-нибудь поле или вводит неправильную информацию и пытается отправить форму на сервер, то скрипт, ответственный за валидацию введенных данных, обнаруживает ошибку и выводит красную надпись в пустую область, не модифицируя остальную страницу.

Итог.

В этой статье были разобраны все основные варианты вывода текста (чисел и других переменных, представимых в текстовом виде) на экран. В следующей статье “Шпаргалка по JavaScript №3 - Ввод информации” будет рассказано об обратном процессе.

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

С помощью данного языка Вы сможете сделать Вашу страницу красивее, динамичнее и привлекательнее. О более конкретных возможностях языка 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");

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