HTML, XHTML и CSS на 100%
Шрифт:
Изначально на странице отображается картинка d.jpg. Это определено в строке <IMG SRC="d.jpg">. При щелчке кнопкой мыши на ссылке с названием картинки запускается сценарий: <A href="#">. Фотографии сменяют друг друга благодаря тому, что название изображения из скобок передается в строку 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).
<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). При его вызове отображается окно приглашения с текстовым полем. Метод может содержать два аргумента. Оба этих аргумента должны быть строками. Первый аргумент – сообщение, которое отображается в окне. Второй аргумент – это текст по умолчанию, который должен появиться в соответствующем поле. Кроме того, этот метод, в свою очередь, возвращает значение, которое также является строкой, – это текст, который ввел пользователь.
<html>
<head>
<title>Работа с запросом</title>
</head>
<script>
//Объявляем переменную
var nameUser;
//Введенное пользователем значение присваивается переменной nameUser
nameUser=prompt("Здравствуйте, как вас зовут?", "аноним");
//Используем метод alert для вывода введенного имени
alert("Рад вас видеть, "+ nameUser);
</script>
<body>
</body>
</html>
После запуска страницы с вышеприведенным кодом появится запрос (рис. 11.4), вслед за которым отобразится предупреждение.
Рис. 11.4. Работа с запросом
В этом примере для демонстрации работы метода prompt использована переменная, а в методе alert в качестве аргумента выступает выражение. Данные понятия будут введены далее в этой главе.