2015-10-22
416
Разбор сценария
Что такое /* */?
Эти символы применяются для создания комментариев внутри сценария. В одном из предыдущих уроков мы узнали, что можно использовать двойную косую черту // для создания строки комментария. Двойную косую черту необходимо ставить в начале каждой новой строки комментария. Эти же команды позволяют создавать многострочные комментарии. Нужно поставить /* в начале, а */ в конце, и все, что окажется между этими знаками будет комментарием.
Создание переменной
Переменные имеют первостепенное значение в JavaScript. Необходимо знать, как их создавать. В двух словах: для вывода функции JavaScript задается имя, состоящее из одного слова. Вспомните, как мы помещали дату на страницу с помощью метода getDate()? В строке document.write мы написали метод getDate() целиком. Сделать это один раз было не так уж трудно. Но что, если нужно было бы написать это десять раз на одной и той же странице? Писать одно и то же порядком надоедает. Потому мы задаем переменную, которая должна представлять окончательный результат метода. Возьмем, к примеру, переменную d. Тогда нужно будет только один раз написать getDate() и назначить результату метода переменную d. И на протяжении всего оставшегося сценария будем просто писать d там, где нужно поставить дату. Вернемся к примеру.
Вот строка из скрипта, которая задает переменную:
var user_name = prompt ("Введите свое имя в поле ниже","Здесь")Переменная была создана по следующей схеме.
· var (от variable, переменная) объявляет, что следующим словом будет имя переменной.
· user_name (имя_пользователя) — имя переменной. Произвольное. Оно не обязательно должно быть таким длинным. Можно было бы использовать при желании просто N. Но удобнее называть переменные так, чтобы легко было вспомнить, о чем идет речь.
· Помните, что регистр имеет значение для JavaScript, следовательно, если переменная обозначена Dog, то буква D каждый раз должна быть заглавной, иначе браузер посчитает их за два разных слова.
· Здесь нет никаких кавычек, просто ставьте одно слово за другим, как показано выше.
· Знак равенства = указывает на то, что переменная будет равна результату следующей команды.
· В данном случае переменная будет представлять результат, полученный с помощью окна запроса
Команда Prompt
В данном примере используется новая команда prompt (запрос). Этот метод выводит окно с сообщением и полем ввода. Вот формат запроса:
var variable_name = prompt("Текст окна","Текст в поле ввода")Можно видеть, что var и присваиваемое имя переменной включены в формат. Иначе получился бы запрос, но ничего нельзя было сделать с данными, которые вводит пользователь.
На всякий случай...
· Чтобы строка ввода оставалась пустой, ничего не пишите между второй парой кавычек.
· Если не указать в скобках второй пары кавычек, в строке ввода появится слово "undefined".
· Если в строке ввода что-то написано и пользователь выберет ОК, ничего не меняя, то в качестве вывода на странице появится то, что написано в строке ввода.
· Если в строке ввода ничего нет и пользователь выберет OK, ничего не вводя, то на странице появится слово null.
Вернемся к разбору
Теперь, зная все составляющие блоки, вернемся снова к сценарию:
var user_name = prompt ("Введите свое имя в поле ниже","Здесь"); document.write("Привет, " + user_name + "! Добро пожаловать на мою страницу!");Вот весь процесс.
1. Имя переменной user_name присвоено результату запроса.
2. prompt просит пользователя написать свое имя в поле ввода.
3. В поле ввода записано: "Здесь."
4. Точка с запятой в конце строки.
5. document.write вызывает текст "Привет, ".
6. Знак плюс + указывает, что все элементы идут друг за другом.
7. user_name содержит результат запроса. Никаких кавычек — нам на странице нужен результат запроса, а не эти слова.
8. Еще плюс.
9. "! Милости просим!" завершает текст.
10. Точка с запятой.
Пожалуйста, постарайтесь хорошо понять концепцию переменных. В JavaScript они используются постоянно. Без них не обойтись.
Задание
...повторение пройденного.
Мы изучили шесть уроков. Пора приниматься за более сложные сценарии. Мы имеем уже достаточно знаний для создания сложных эффектов с помощью команд JavaScript.
В качестве сегодняшнего задания необходимо выполнить анализ показанного ниже сценария, объяснив, как работает каждая его часть. Может показаться удивительным, но любой сценарий без труда раскладывается на легко понятные части, как только станет понятно, что происходит в сценарии.
Задание 6. Самостоятельный разбор сценария
Вот сценарий. Разберите его на составляющие элементы, как мы делали в ходе урока.
<SCRIPT type="text/javascript"> var name = prompt("Пожалуйста, напишите свое имя","") var d = new Date(); var y = d.getFullYear(); var m = d.getMonth() + 1; var d = d.getDate(); var t = m + '/' + d + '/' + y + ' '; document.write("<TITLE>")document.write("Привет "+name+ ". Сегодня " +t+ ". Спасибо, что зашли.");document.write("</TITLE>") </SCRIPT>Разбор задания
· Начинаем со строки <SCRIPT LANGUAGE="javascript">.
· Создается переменная name. Имя пользователь вводит по запросу prompt.
· Нам нужна дата, поэтому для даты создается переменная d.
· Мы знаем, что год, месяц и число определяются с помощью d.getЧто-либо(), поэтому создаем переменные для каждого из этих элементов: y, m и d.
· Видите + 1 после переменной m? Так мы получаем правильный месяц.
· Для полностью записанной даты, состоящей из числа, месяца и года, также задается переменная с именем t.
· Команда TITLE создается с помощью трех команд document.write. Таким образом легче всего отделить команды HTML и код JavaScript.
· Первая команда из трех начинает команду <TITLE>.
· Второй оператор создает строку текста. Обратите внимание, что выводимый текст помещен в двойные кавычки и отделен от команд, отвечающих за дату, знаками плюс. Не забудьте о пробелах в тексте.
· Третья команда document.write завершает команду <TITLE>.
· И все завершает </SCRIPT>.
· Важно также помнить, что этот сценарий должен идти в документе HTML перед командой BODY, так как TITLE располагается в этом месте.
7. Урок: Концепция свойств
Объектная модель документа. Основные объекты и их свойства.
Концепция
Иерархия объектов JavaScript играет настолько важную роль, что мы посвятим ей отдельный урок, но мы уже и так начинаем понемногу ее осваивать.
Нам известно, что существуют объекты, например, document, и методы, например, write, которые воздействуют на объекты. В Уроке 6 мы немного имели дело с созданием объектов или созданием переменных. Теперь рассмотрим концепцию свойств. Мы уже слегка касались этой темы. Свойства представляют собой часть или качество объекта. В Уроке 4 мы работали со свойством документа bgColor.
Было бы трудно описать все возможные свойства в одном уроке. Поэтому здесь будут рассмотрены только наиболее популярные из них и указано, какую пользу они могут принести.
Сценарий
Ниже вы увидите несколько сценариев, но все они составлены по одной схеме: для каждой команды объект.свойство (object.property) создается переменная, затем переменные помещаются в команду document.write() для вывода.
Свойства объекта "navigator" (браузер)
<SCRIPT LANGUAGE="javascript">var an = navigator.appName;var av = navigator.appVersion;var acn = navigator.appCodeName;var ua = navigator.userAgent;document.write("Вы пользуетесь <B>" +an+ "</B>, версия " +av+ ".<BR>Кодовое название " +acn+ ", заголовок " +ua+ ".");</SCRIPT>Приведенный выше текст в скобках должен располагаться на одной строке.
Свойства объекта "document"
<SCRIPT LANGUAGE="javascript">var bgc = document.bgColor;var fgc = document.fgColor;var lc = document.linkColor;var al = document.alinkColor;var vlc = document.vlinkColor;var url = document.location;var ref = document.referrer;var t = document.title;var lm = document.lastModified; document.write("Цвет фона этой страницы <B>" +bgc+ "</B>.")document.write("<BR>Цвет текста этой страницы <B>" +fgc+ "</B>.")document.write("<BR>Цвет ссылок этой страницы <B>" +lc+ "</B>.")document.write("<BR>Цвет активной ссылки этой страницы <B>" +al+ "</B>.")document.write("<BR>Цвет посещенной ссылки этой страницы <B>" +vlc+ "</B>.")document.write("<BR>URL этой страницы <B>" +url+ "</B>.")document.write("<BR>До этого вы были на странице <B>" +ref+ "</B>.")document.write("<BR>Заголовок этой страницы (TITLE) <B>" +t+ "</B>.")document.write("<BR>Последние изменения в документ внесены: <B>" +lm+ "</B>.")</SCRIPT>Свойства объекта "history"
<SCRIPT LANGUAGE="javascript">var h = history.length;document.write("До этой страницы вы посетили" +h+ " страниц.")</SCRIPT>Два свойства объекта "location" (адрес)
<SCRIPT LANGUAGE="javascript">var hst = location.hostdocument.write("Страница находится на <B>" + hst + "</B>.")</SCRIPT> <SCRIPT LANGUAGE="javascript">var hstn = location.hostnamedocument.write("Страница находится на <B>" + hstn + "</B>.")</SCRIPT>
