- •1. Основные понятия
- •3.4.2. Окно с сообщением и кнопками ok и Cancel
- •3.4.3. Окно с полем ввода и кнопками ok и Cancel
- •3.6. Типы данных и инициализация переменных. Определение типа данных переменной
- •3.7. Операторы JavaScript
- •3.7.1. Математические операторы
- •3.7.2. Операторы присваивания
- •3.7.3. Двоичные операторы
- •3.7.4. Оператор обработки строк
- •3.8. Преобразование типов данных
- •3.9. Специальные символы. Разбиение сообщения в диалоговом окне на несколько строк
- •3.10. Массивы
- •3.11. Функции. Разделение программы на фрагменты
- •3.11.1. Основные понятия
- •3.11.2. Расположение функций внутри html-документа
- •3.11.3. Рекурсия. Вычисление факториала
- •3.11.4. Глобальные и локальные переменные
- •3.12. Условные операторы. Выполнение блоков кода только при соответствии условию
- •3.12.1. Операторы сравнения
- •3.12.2. Оператор ветвления if...Else. Проверка ввода пользователя
- •3.12.3. Оператор ? Проверка числа на четность
- •3.12.4. Оператор выбора switch
- •3.13. Операторы циклов. Многократное выполнение блока кода
- •3.13.1. Цикл for
- •3.13.2. Цикл while
- •3.13.3. Цикл do...While
- •3.13.4. Оператор continue.
- •3.13.5. Оператор break. Прерывание цикла
- •3.14. Ошибки в программе
- •3.14.1. Синтаксические ошибки
- •3.14.2. Логические ошибки
- •3.14.3. Ошибки времени выполнения
- •3.15. Встроенные классы JavaScript
- •3.15.1. Основные понятия
- •3.15.2. Класс Global
- •3.15.3. Класс Number. Работа с числами
- •3.15.4. Класс String. Обработка строк
- •3.15.5. Класс Array. Работа с массивами и их сортировка
- •Многомерные массивы
- •Ассоциативные массивы. Перебор ассоциативных массивов
- •3.15.6. Класс Math. Использование математических функций
- •3.15.7. Класс Date. Получение текущей даты и времени. Вывод даты и времени в окне Web-браузера
Основы JavaScript.
1. Основные понятия
JavaScript — это язык программирования, позволяющий сделать Web-страницу интерактивной, то есть реагирующей на действия пользователя.
Последовательность инструкций (называемая программой, скриптом или сценарием) выполняется интерпретатором, встроенным в обычный Web-браузер. Иными словами, код программы внедряется в HTML-документ и выполняется на стороне клиента. Для выполнения программы даже не нужно перезагружать Web-страницу. Все программы выполняются в результате возникновения какого-то события. Например, перед отправкой данных формы можно проверить их на допустимые значения и, если значения не соответствуют ожидаемым, запретить отправку данных.
3.2. Первая программа на JavaScript
При изучении языков программирования принято начинать с программы, выводящей надпись "Hello, world" He будем нарушать традицию и продемонстрируем, как это будет выглядеть на JavaScript (листинг 3.1).
Листинг 3.1. Первая программа
<HTML>
<HEAD>
<TITLE>Первая программа</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
document.write("Hello, world");
//-->
</SCRIPT>
<NOSCRIPT>
Ваш Web-браузер не поддерживает JavaScript. </NOSCRIPT>
</BODY>
</HTML>
Набираем код в Блокноте и сохраняем в формате HTML, например, под именем test.html. Запускаем Web-браузер и открываем сохраненный файл.
Возможны следующие варианты:
-
в окне Web-браузера отображена надпись "Hello, world" — значит, все нормально;
-
отобразилась надпись "Ваш Web-браузер не поддерживает JavaScript" и Web-браузер задает вопрос "Запустить скрипты?" — значит, в настройках Web-браузера установлен флажок напротив пункта Подтверждать запуск скриптов. Можно либо установить флажок напротив пункта Разрешить запуск сприптов, либо каждый раз отвечать "Да" на этот вопрос;
-
отобразилась надпись "Ваш Web-браузер не поддерживает JavaScript" и Web-браузер не задает никаких вопросов — значит, в настройках Web браузера установлен флажок напротив пункта Запретить запуск скриптов. Надо установить флажок напротив пункта Разрешить запуск сприптов;
-
в окне Web-браузера нет никаких надписей — значит, допущена опечатка в коде программы. Следует иметь в виду, что в JavaScript регистр имеет важное значение. Строчные и прописные буквы считаются разными. Более того, каждая буква, каждая кавычка имеет значение. Достаточно ошибиться в одной букве, и вся программа работать не будет.
Итак, мы столкнулись с первой проблемой при использовании JavaScript — любой пользователь может отключить запуск скриптов в настройках Web-браузера. Но эта проблема не единственная. Разные Web-браузеры могут по-разному выполнять код программы. По этой причине приходится писать персональный код под каждый Web-браузер. Все примеры скриптов в этой книге написаны под Microsoft Internet Explorer и могут не работать в других Web-браузерах. Это следует помнить.
Вернемся к нашему примеру. Программа внедряется в HTML-документ с помощью парного тега <script>. В качестве значения параметра language указывается название языка программирования, на котором написана программа нашем случае — JavaScript).
Если Web-браузер не поддерживает JavaScript или выполнение скриптов запрещено в настройках Web-браузера, то будет выведен текст между тегами <noscript > и </noscript>. По этой же причине код программы между тегами <script> и </script> заключается в теги HTML-комментария <!-- и -->,
иначе Web-браузеры, не поддерживающие JavaScript, выведут код скрипта в виде обычного текста:
<!--
document.write("Hello, world");
//-->
Интерпретатор JavaScript игнорирует открывающий тег HTML-комментария <!--. так как никакая строка программы JavaScript не может начинаться с “<”. Но закрывающий тег HTML-комментария -->, начинающийся с двух минусов (--), распознается интерпретатором как ошибка, так как в JavaScript имеется предопределенный оператор --.По этой причине перед закрывающим тегом необходимо поставить символы комментария языка JavaScript ):
(//):
//-->
строка
document.write ("Hello, world");
содержащая инструкцию отобразить надпись "Hello, world" в окне Web-браузера, называется выражением. Каждое выражение в JavaScript заканчивается точкой с запятой.
3.3. Комментарии в JavaScript
Все, что расположено после "//" до конца строки, в JavaScript считается однострочным комментарием:
// Однострочный комментарий
Однострочный комментарий можно записать после выражения:
document.write("Hello, world"); // Однострочный комментарий
Кроме того, существует многострочный комментарий. Он начинается с символов /* и заканчивается символами */:
/*
Многострочный комментарий */
3.4. Вывод результатов работы программы и ввод данных
Прежде чем начинать изучение языка JavaScript, рассмотрим встроенные диалоговые окна, которые позволят нам выводить результаты работы программы или значения переменных, а также вводить данные.
3.4.1. Окно с сообщением и кнопкой ОК
Метод alert() отображает диалоговое окно с сообщением и кнопкой ОК В листинге 3.2 демонстрируется вывод приветствия с помощью метода alert().
Листинг 3.2. Метод alert()
<HTML>
<HEAD>
<TITLE>Первая программа</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
window.alert("Hello, world");
//-->
</SCRIPT>
</BODY>
</HTML>
Сообщение можно разбить на строки с помощью последовательности символов \n (листинг 3.3).
Листинг 3.3. Разбиение сообщения на строки
<HTML>
<HEAD>
<TITLE>Первая программа</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
window.alert("Строка1\nСтрока2\n\nСтрока4");
//-->
</SCRIPT>
</BODY>
</HTML>