Книга посвящена разработке Web-страниц. В ней излагаются основы языка JavaScript, в том числе новейшие достижения версии 1.5, поддерживаемой последними версиями браузеров компаний Netscape и Microsoft. Здесь описываются все необходимые для подготовки сценариев методы и технические приемы, начиная с азов и заканчивая такими передовыми технологиями, как динамический HTML. Опыта работы с JavaScript не требуется (хотя предполагается знание языка HTML). Книга снабжена многочисленными иллюстрациями и упражнениями, позволяющими быстрее и глубже освоить JavaScript. Все примеры полностью документированы. Данная книга предназначена для начинающих программистов. Ее можно использовать в качестве учебного пособия.
Предисловие
Введение
Часть I. Знакомство с JavaScript
Глава 1. Введение в JavaScript
Использование JavaScript
Важность изучения JavaScript
История JavaScript
JavaScript сегодня
Будущее JavaScript
В чем разница между сценарием и программой
Различие между языком подготовки сценариев и языком программирования
Инструменты написания сценариев JavaScript
Простой текстовый редактор
Использование средств визуального проектирования
Последняя версия браузера
Прочие инструменты
Создание шаблона HTML
Библиотека сценариев
Глава 2. Внедрение JavaScript в HTML-документ
Соприкосновение миров: HTML и JavaScript
Каркас HTML
Блок SCRIPT
И вновь об атрибуте language
Сокрытие JavaScript от старых версий браузеров
Часть II. Уроки языка
Глава 3. JavaScript в действии
Ввод/вывод информации с помощью JavaScript
Объекты, методы и свойства
Объекты
Методы
Свойства
Использование метода alert()
Добавление комментариев в сценарий JavaScript
Однострочный комментарий
Многострочный комментарий
Использование метода confirm()
Использование метода prompt()
Глава 4. Управление данными с помощью переменных
Значения в языке JavaScript
Строки
Числа
Большие и маленькие числа
Булевы выражения
Особые типы данных: числа, неопределенные и неопределяемые выражения
Переменные в языке JavaScript
Создание переменных
Объявление нескольких переменных
Вывод на экран значений переменных
Отладка
Использование метода prompt() для присвоения значения переменной
Присвоение одной переменной значения другой
Глава 5. Массивы JavaScript и Escape-последовательности
Как пользоваться массивами
Быстрое создание массива
Размер массива
Вывод на экран всех элементов массива
Интерактивное творчество
Оптимизация
Escape-последовательности
Глава 6. Выражения, условия, операции, cтроки и числа
Что такое выражения и условия
Выражения и условия
Знакомство с операциями
Арифметические операции
Операции сравнения
Логические операции
Операции с одним операндом
Операция присвоения
Прочие операции
Снова о строках и числах
Калькулятор JavaScript
Глава 7. Использование операторов в языке JavaScript
Что такое операторы
Оператор variable
Оператор if
Операторы организации цикла
Оператор do ... while
Оператор while
Оператор for
Оператор for ... in
Оператор continue
Оператор break
Оператор switch
Глава 8. Создание сценариев с помощью функций и событий
Что такое функция
Ваша первая функция
События
Событие onLoad
Событие onClick
Событие onMouseover
Событие onMouseout
Использование событий
Использование события onLoad
Использование события onClick
Использование события onMouseover
Создание полезных функций
Как запустить функцию на выполнение с помощью другой функции
Назначение круглых скобок
Возвращаемое значение функции
Оператор return
Перевод температуры из одних единиц в другие
Глава 9. Наилучшее использование объектов
Что такое объекты
Объекты и браузеры
Более близкое знакомство с объектами JavaScript
Объект Math
Использование свойства PI
Использование методов max и min
Использование метода round
Использование метода random
Объект Date
Использование метода getFullYear
Использование метода getMonth
Использование метода getDay
Часы, минуты, секунды... и даже миллисекунды
Объект String
Методы toUpperCase и toLowerCase
Метод substring
Оператор with
Методы и свойства объектов
Объект Array
Объект Boolean
Объект Date
Объект Function
Объект Global
Объект Math
Объект Number
Объект Object
Объект RegExp
Объект String
Глава 10. Выявление и исправление ошибок
Что такое ошибки
Типы ошибок
Синтаксические ошибки
Ошибки времени выполнения
Логические ошибки
Ошибки приоритета операций
Как найти ошибку
Обнаружение ошибок
Программа Microsoft Script Debugger
Наиболее распространенные ошибки
Опечатки
Часть III. Варианты размещения сценария
Глава 11. Расширение кругозора
Выход за пределы тэга
Связь, связь и еще раз связь
Встроенный сценарий JavaScript
Использование тэга
Часть IV. JavaScript и динамический HTML
Глава 12. Динамический HTML
Что такое динамический HTML
Основные принципы функционирования DHTML
Объектно-ориентированное представление элементов страницы
Таблицы стилей и разбиение на слои
Сценарии
Различия между браузерами
Что можно сделать с помощью DHTML
Глава 13. Каскадные таблицы стилей
Краткая история каскадных таблиц
Введение в CSS
Пример 1. Изменение цвета надписи
Пример 2. Форматирование текста
Пример 3. Форматирование гиперссылок
Пример 4. Позиционирование
Пример 5. Работа в трехмерном пространстве - 2.5D
JavaScript и CSS
Создание анимационных объектов
Что такое анимация
Анимация в браузере Internet Explorer 5
Анимация в браузере Netscape Navigator 4
Как сделать сценарий совместимым с обоими браузерами
Перемещение по вертикали
Перемещение по диагонали
И снова о JavaScript
Глава 14. Объектная модель документа
Знакомство с объектной моделью документа
Возможности объектной модели документа
Доступ к элементам страницы
Пример доступа к элементам страницы
Элементы страницы
Использование srcElement
Добавление идентификаторов
Родительские и дочерние элементы
Пример разворачивания и сворачивания текста
Пример использования ячеек таблицы
Модель событий
Событие onClick
Событие onContextmenu
Событие onDblclick
Событие onHelp
Событие onKeydown
Событие onKeypress
Событие onKeyup
Событие onMousedown
Событие onMousemove
Событие onMouseout
Событие onMouseover
Событие onMouseup
Событие onStop
Возможности JavaScript
Глава 15. Примеры, примеры, примеры...
Пример 1. Дата последнего изменения Web-страницы
Усовершенствование сценария
Пример 2. Часы
Усовершенствование сценария
Пример 3. Обратный счетчик
Усовершенствование сценария
Пример 4. Проверка формы
Усовершенствование сценария
Пример 5. Прокрутка
Усовершенствование сценария
Пример 6. Сообщение в строке состояния
Усовершенствование сценария
Дальнейшее усовершенствование сценария
Пример 7. Управление cookies
Усовершенствование сценария
Предметный указатель
ОТРЫВОК
Глава 3. JavaScript в действии
Ввод/вывод информации с помощью JavaScript
Объекты, методы и свойства
Объекты
Методы
Свойства
Использование метода alert()
Добавление комментариев в сценарий JavaScript
Однострочный комментарий
Многострочный комментарий
Использование метода confirm()
Использование метода prompt()
Ознакомившись с этой главой, вы сможете наконец создать свой первый сценарий. Вы начнете осваивать азы JavaScript на конкретных примерах. На ваше рассмотрение предлагается следующее:
основные понятия JavaScript, такие как синтаксис, разметка, комментарии и др.;
некоторые термины языка JavaScript и причины, по которым он относится к объектно-ориентированным языкам программирования;
создание и чтение сценария JavaScript;
использование JavaScript для вывода и ввода информации.
Ввод/вывод информации с помощью JavaScript
Примечание В этой главе приводятся образцы сценариев JavaScript. Тщательно проработайте каждый из них, вводя код с клавиатуры. Следует потренироваться на элементарных примерах, прежде чем переходить к более сложным.
Исследование возможностей ввода и вывода информации - это не только замечательный повод научиться создавать сценарии JavaScript, обеспечивающие двустороннюю связь с пользователем, но и прекрасное начало вашего профессионального пути.
В вычислительной технике все основано на вводе и выводе данных. Без этого ничего не происходит. Текстовый процессор не выполняет никаких действий, пока пользователь не введет какую-либо информацию (символы, набираемые на клавиатуре), и лишь затем эта информация отображается на экране, распечатывается или сохраняется на жестком диске.
Теперь вы научитесь как вводить информацию с помощью JavaScript, так и выводить ее в виде разнообразных окон сообщений. (Если вам приходилось блуждать по сети дольше нескольких минут, то вам они уже встречались.)
На рис. 3.1, 3.3 и 3.5 показаны окна сообщений трех типов в браузере Internet Explorer, а на рис. 3.2, 3.4 и 3.6 - в браузере Netscape Navigator.
Alert (Предупреждение) - служит для вывода информации;
Confirm (Подтверждение) - предназначено для вывода информации и позволяет пользователю сделать выбор в форме ответа Да/Нет на вопрос;
Prompt (Запрос) - служит для вывода информации и позволяет пользователю ввести ответ с клавиатуры.
Примечание Окна сообщений в браузере Internet Explorer выглядят иначе, чем в браузере Netscape Navigator. Это происходит потому, что окна предупредительных сообщений, подтверждений и запросов генерируются в браузере. Они только вызываются с помощью JavaScript. Поэтому в разных браузерах они выглядят по-разному. Методы alert(), confirm() и prompt() в действительности являются методами объекта Window (окно) в браузере.
Объекты, методы и свойства
Вы, вероятно, слышали о том, что JavaScript - объектно-ориентированный язык. Но что это означает? Чтобы это понять, вам следует ознакомиться с тремя терминами:
объекты;
методы;
свойства.
Сначала рассмотрим их в общих чертах. Чем дальше вы продвинетесь в изучении JavaScript, тем чаще вам придется ими пользоваться, так что более близкое знакомство оставим на будущее.
Объекты
Говоря простым языком, объект (object) - это какой-либо предмет. Подобно тому, как в реальном мире все одушевленные и неодушевленные предметы являются объектами (машины, собаки и пр.), объектами считаются и составляющие компьютерного мира.
Что касается JavaScript, его объекты находятся внутри браузера. Это, в частности, окно браузера, формы и их части, например кнопки и текстовые окна. В JavaScript также имеется собственная группа встроенных объектов, к которым относятся массивы, данные и т.д. Сейчас вам не обязательно фиксировать на этом внимание, поскольку все эти объекты будут рассмотрены позже. Пока вы должны усвоить лишь необходимые определения.
Именно благодаря наличию объектов язык JavaScript считается объектно-ориентированным. Язык организован вокруг объектов, а не действий, или, иначе говоря, ориентирован на данные, а не на логику. При объектно-ориентированном программировании первоочередное внимание уделяется объектам, с которыми производятся некоторые манипуляции, а не логическим правилам, необходимым для таких манипуляций. Преимуществом такого подхода является не только облегчение программирования (или написания сценария), но и в то, что каждое действие можно выполнить разными способам
и.
Методы
Метод (method) - это действия, которые может выполнять объект. В реальном мире у объектов тоже имеются какие-либо методы. Машины ездят, собаки лают, доллар покупается и т.д. В нашем случае alert() является методом объекта Window, то есть объект Window может выдавать пользователю какое-либо предупреждение в окне сообщений. Примерами других методов являются открытие и закрытие окон, нажатие кнопок. Здесь речь идет о трех методах: open(), close() и click(). Обратите внимание на круглые скобки. Они означают, что методы, в отличие от свойств, используются.
Свойства
У всех объектов имеются свойства (properties). Если вы и далее будете следовать аналогии с объектами реального мира, то обнаружите, что все предметы обладают какими-то свойствами: у машин есть колеса, а у собаки - шерсть. Что касается JavaScript, то у такого объекта, как браузер, имеется название и номер версии.
Рекомендация Все будет понятнее, если объекты ассоциировать с вещами, а методы - с действиями.
Использование метода alert()
Пользоваться методом alert() проще всего. Он применяется для вывода на экран текстовой информации в краткой форме. После прочтения сообщения пользователь щелкает по кнопке OK и окно исчезает.
Прежде всего, откройте шаблон HTML-страницы в текстовом редакторе и сохраните его под новым именем в любой удобной для вас папке.
Простая страница
Примечание Не забудьте сохранить файл с расширением HTM или HTML, в обратном случае могут возникнуть проблемы. В языке JavaScript обязательно учитывается регистр символов. В последующих главах этот вопрос будет рассмотрен в мельчайших подробностях, а пока используйте прописные буквы точно так же, как они применяются в указанных здесь сценариях, за исключением вводимых вами текстовых комментариев.
Пример. Чтобы вызвать на экран окно предупредительных сообщений, измените шаблон в соответствии со следующим листингом:
Простая страница
Примечание Точка с запятой после метода alert() называется разделителем строки и нужна для того, чтобы сделать сценарий совместимым со стандартом ECMA (хотя и без точки с запятой ошибки не будет). Этот символ будет очень часто встречаться в следующих главах. В главе 4 вы узнаете, где и когда он используется.
Теперь о предупреждении. Его текст, заключенный в кавычки, вводится внутри круглых скобок:
Простая страница
Сохраните файл, откройте его в браузере и взгляните на появившееся сообщение (см. рис. 3.7).
JavaScript 1.5: учебный курс. / Э. Кингсли-Хью, К. Кингсли-Хью - СПб: Питер, 2002. - 272 с.
|