Игорь Квинт - HTML, XHTML и CSS на 100%
Изначально на странице отображается картинка d.jpg. Это определено в строке <IMG SRC="d.jpg">. При щелчке кнопкой мыши на ссылке с названием картинки запускается сценарий: <A HREF="javascript: myimage ('a.jpg')">. Фотографии сменяют друг друга благодаря тому, что название изображения из скобок передается в строку document.images [0].src=pic. Значение pic заменяется названием фотографии из выбранной ссылки, например 'a.jpg'. При выборе следующей ссылки значение pic опять заменяется названием фотографии, а точнее именем файла с изображением.
С помощью данного сценария можно организовать удобный просмотр фотографий в одном окне браузера на одной веб-странице. Этот прием довольно часто используется в фотогалереях и интернет-магазинах.
Итак, мы рассмотрели объекты HTML-документа. Это сама веб-страница и расположенные на ней элементы. Все они обладают своими свойствами. К каждому из них можно применить определенные действия, или методы. Эти методы позволяют управлять содержимым веб-страницы и динамически его изменять.
Резюме
В этой главе вы познакомились с фундаментальными понятиями языка JavaScript – объектами, свойствами и методами. Теперь вы сможете использовать в сценариях различные элементы окна браузера и веб-страницы, изменять их свойства и управлять ими с помощью JavaScript. Помните, что все эти элементы являются объектами. Правильное применение их свойств и методов позволит вам стать профессиональным веб-разработчиком.
Глава 11
Основы языка JavaScript
11.1. Работа с информацией
11.2. Переменные и типы данных
11.3. Выражения
11.4. Условия и циклы
11.5. Функции и события
11.6. Встроенные объекты JavaScript
Эта глава является незаменимой для новичков, так как в ней разъясняются основные элементы языка JavaScript: переменные, типы данных, выражения, различные операторы, функции и т. д. Эти знания являются базовыми – без них невозможно понимание остального материала книги.
11.1. Работа с информацией
Любая программа или сценарий работают с информацией, то есть получают некие данные, обрабатывают их согласно своему алгоритму, а затем обычно возвращают результат в виде изображения на экране или бумаге, звука, файла, сигнала другой программе и т. д.
Серверные программы получают данные либо от пользователя, например через формы, либо из баз данных. При этом в качестве обрабатываемой информации могут выступать абсолютно любые данные: опросы, регистрационные данные, фотографии, почта, статистические данные.
Клиентские сценарии часто выступают буфером между пользователем и серверной программой, осуществляя предварительную обработку и верификацию данных. Следовательно, они работают с теми же данными.
Клиентские сценарии могут получать информацию различными способами, которые описаны ниже.
• Информация может быть заложена в сценарий разработчиком. Обычно это некие начальные значения.
• Информация может передаваться от пользователя с помощью форм.
• Передача через URL.
• Получение информации обработкой событий, например после перемещения указателя мыши, щелчка кнопкой мыши, нажатия клавиш.
• Получение данных с других сайтов или передача серверной программой.
Для знакомства с вводом/выводом информации в JavaScript понадобятся три метода: alert(), prompt() и confirm().
Эти методы генерируют различные окна сообщений.
Примечание
В действительности методы alert(), prompt() и confirm() являются методами объекта Window в браузере.
Метод alert()
Метод alert() отображает окно предупреждения с соответствующим сообщением. После прочтения сообщения пользователю необходимо нажать кнопку OK, чтобы закрыть окно. Аргументом данного метода является строка.
Примечание
О типах данных в JavaScript, в том числе и о строках, будет рассказано далее в этой главе.
В простейшем случае текст предупреждения, заключенный в кавычки, вводится внутри круглых скобок (листинг 11.1).
Листинг 11.1. Работа с предупреждением<html>
<head>
<title>Работа с предупреждением</title>
</head>
<script>
alert("Это мое предупреждение");
</script>
<body>
</body>
</html>
Окно предупреждения генерируется самим браузером, поэтому внешний вид окна в разных браузерах может различаться. На рис. 11.1, 11.2 и 11.3 представлен вид окна, сгенерированного в трех популярных браузерах с помощью описанного кода.
Рис. 11.1. Окно предупреждений в браузере Internet Explorer
Рис. 11.2. Окно предупреждений в браузере Mozilla Firefox
Рис. 11.3. Окно предупреждений в браузере Opera
Метод prompt()
Метод prompt() имеет противоположное предназначение. Он служит для получения данных от пользователя (листинг 11.2). При его вызове отображается окно приглашения с текстовым полем. Метод может содержать два аргумента. Оба этих аргумента должны быть строками. Первый аргумент – сообщение, которое отображается в окне. Второй аргумент – это текст по умолчанию, который должен появиться в соответствующем поле. Кроме того, этот метод, в свою очередь, возвращает значение, которое также является строкой, – это текст, который ввел пользователь.
Листинг 11.2. Работа с запросом<html>
<head>
<title>Работа с запросом</title>
</head>
<script>
//Объявляем переменную
var nameUser;
//Введенное пользователем значение присваивается переменной nameUser
nameUser=prompt("Здравствуйте, как вас зовут?", "аноним");
//Используем метод alert() для вывода введенного имени
alert("Рад вас видеть, "+ nameUser);
</script>
<body>
</body>
</html>
После запуска страницы с вышеприведенным кодом появится запрос (рис. 11.4), вслед за которым отобразится предупреждение.
Рис. 11.4. Работа с запросом
В этом примере для демонстрации работы метода prompt() использована переменная, а в методе alert() в качестве аргумента выступает выражение. Данные понятия будут введены далее в этой главе.
Примечание
В методе prompt() можно опустить второй аргумент, то есть указывать только одну строку. В этом случае различные браузеры по-разному реагируют: строка запроса может быть пустой, а может отображать ключевое слово undefined (не определено).
Метод confirm()
Метод confirm() отображает окно подтверждения, которое сходно с окном предупреждения, генерируемым методом alert(), но содержит две кнопки: OK и Cancel. В листинге 11.3 демонстрируется создание окна подтверждения, но в этом сценарии не делается разницы между кнопками OK и Cancel. Нажатие любой из кнопок просто закроет окно (рис. 11.5).
Рис. 11.5. Работа с подтверждением
Листинг 11.3. Работа с подтверждением<html>
<head>
<title>Работа с подтверждением</title>
</head>
<script>
confirm("Это мое подтверждение");
</script>
<body>
</body>
</html>
После прочтения данной главы вы научитесь использовать этот метод, чтобы сценарий по-разному реагировал на нажатие кнопок OK и Cancel.
11.2. Переменные и типы данных
Во время интерпретации сценария браузер разбивает код на отдельные слова, фразы или символы, которые умеет распознавать. Эти элементы называются лексемами. В языке JavaScript лексемы делятся на четыре типа: идентификаторы, ключевые слова, литералы и операции.
Идентификаторы
Идентификаторами называются имена, которые обозначают переменные, функции и объекты. Некоторые имена являются ключевыми или зарезервированными и не могут использоваться в качестве идентификатора, так как имеют особый смысл. О них будет рассказано далее.
Идентификаторы образуются с помощью комбинации различных символов, однако при этом накладываются некоторые ограничения.
• Все идентификаторы должны начинаться с буквы.
• После первой буквы остальными символами могут быть буквы и цифры.
• Буквами считаются заглавные и строчные буквы латинского алфавита: от A до Z и от a до z.
• Символ подчеркивания (_) выступает в качестве буквы и часто используется вместо пробела, который нельзя применять в идентификаторах.
• Символ доллара ($) выступает в качестве буквы и обычно используется при автоматической генерации кода.
• Можно использовать в качестве букв символы Unicode, однако старые версии браузеров не умеют работать с Unicode.
• Цифрами считаются символы от 0 до 9.
Совет
Не следует использовать в одном сценарии идентификаторы, отличающиеся только символами верхнего и нижнего регистра, например flagld и FlagID, так как это будут различные идентификаторы, которые могут вызвать трудноуловимые ошибки.
В табл. 11.1 приведены примеры допустимых и недопустимых идентификаторов.
Таблица 11.1. Примеры идентификаторов JavaScriptОбратите внимание, что идентификатор new хотя и содержит разрешенные символы, но относится к числу ключевых слов, поэтому не может выступать в качестве пользовательского идентификатора.
