Категории
Меню
Лучшие книги » Компьютеры и Интернет » Интернет » HTML, XHTML и CSS на 100% - Игорь Квинт

HTML, XHTML и CSS на 100% - Игорь Квинт

Читать онлайн HTML, XHTML и CSS на 100% - Игорь Квинт

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 44 45 46 47 48 49 50 51 52 ... 59
Перейти на страницу:

Изначально на странице отображается картинка 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 хотя и содержит разрешенные символы, но относится к числу ключевых слов, поэтому не может выступать в качестве пользовательского идентификатора.

1 ... 44 45 46 47 48 49 50 51 52 ... 59
Перейти на страницу:
Пожаловаться на ошибку
Похожие материалы
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов
27.12.2023 - 21:25
Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий
26.05.2024 - 09:00
Комментарии

Copyright @ bibliotekaonline.com 2024 - 2025. Все права защищены.


Почта для связи: [email protected]