Библиотека Интернет Индустрии I2R.ru

JavaScript 1.5 by exmple, Adrian Kingsley-Hughes, Kathie Kingsley-Hughes

Авторы: Кингсли-Хью К., Кингсли-Хью Э.

Ввод/вывод информации с помощью JavaScript

Объекты, методы и свойства

Объекты

Методы

Свойства

Использование метода alert()

Добавление комментариев в сценарий JavaScript

Однострочный комментарий

Многострочный комментарий

Использование метода confirm()

Использование метода prompt()

    Ознакомившись с этим материалом, вы сможете наконец создать свой первый сценарий. Вы начнете осваивать азы JavaScript на конкретных примерах. На ваше рассмотрение предлагается следующее:

• основные понятия JavaScript, такие как синтаксис, разметка, комментарии и др.;
• некоторые термины языка JavaScript и причины, по которым он относится к объектно-ориентированным языкам программирования;
• создание и чтение сценария JavaScript;
• использование JavaScript для вывода и ввода информации.

    Исследование возможностей ввода и вывода информации - это не только замечательный повод научиться создавать сценарии JavaScript, обеспечивающие двустороннюю связь с пользователем, но и прекрасное начало вашего профессионального пути.
    В вычислительной технике все основано на вводе и выводе данных. Без этого ничего не происходит. Текстовый процессор не выполняет никаких действий, пока пользователь не введет какую-либо информацию (символы, набираемые на клавиатуре), и лишь затем эта информация отображается на экране, распечатывается или сохраняется на жестком диске.
    Теперь вы научитесь как вводить информацию с помощью JavaScript, так и выводить ее в виде разнообразных окон сообщений. (Если вам приходилось блуждать по сети дольше нескольких минут, то вам они уже встречались.)
    На рис. 3.1, 3.3 и 3.5 показаны окна сообщений трех типов в браузере Internet Explorer, а на рис. 3.2, 3.4 и 3.6 - в браузере Netscape Navigator.
    Все эти окна созданы на языке JavaScript:

Рис. 1. Окно предупредительных сообщений в браузере Internet Explorer

Рис. 2. Окно предупредительных сообщений в браузере Netscape Navigator

Рис. 3. Окно подтверждения в браузере Internet Explorer

Рис. 4. Окно подтверждения в браузере Netscape Navigator

Рис. 5. Окно запросов в браузере Internet Explorer

Рис. 6. Окно запросов в браузере Netscape Navigator

• Alert (Предупреждение) - служит для вывода информации;
• Confirm (Подтверждение) - предназначено для вывода информации и позволяет пользователю сделать выбор в форме ответа Да/Нет на вопрос;
• Prompt (Запрос) - служит для вывода информации и позволяет пользователю ввести ответ с клавиатуры.

    Вы, вероятно, слышали о том, что JavaScript - объектно-ориентированный язык. Но что это означает? Чтобы это понять, вам следует ознакомиться с тремя терминами:

• объекты;
• методы;
• свойства.

    Сначала рассмотрим их в общих чертах. Чем дальше вы продвинетесь в изучении JavaScript, тем чаще вам придется ими пользоваться, так что более близкое знакомство оставим на будущее.

    Говоря простым языком, объект (object) - это какой-либо предмет. Подобно тому, как в реальном мире все одушевленные и неодушевленные предметы являются объектами (машины, собаки и пр.), объектами считаются и составляющие компьютерного мира.
    Что касается JavaScript, его объекты находятся внутри браузера. Это, в частности, окно браузера, формы и их части, например кнопки и текстовые окна. В JavaScript также имеется собственная группа встроенных объектов, к которым относятся массивы, данные и т.д. Сейчас вам не обязательно фиксировать на этом внимание, поскольку все эти объекты будут рассмотрены позже. Пока вы должны усвоить лишь необходимые определения.
    Именно благодаря наличию объектов язык JavaScript считается объектно-ориентированным. Язык организован вокруг объектов, а не действий, или, иначе говоря, ориентирован на данные, а не на логику. При объектно-ориентированном программировании первоочередное внимание уделяется объектам, с которыми производятся некоторые манипуляции, а не логическим правилам, необходимым для таких манипуляций. Преимуществом такого подхода является не только облегчение программирования (или написания сценария), но и в то, что каждое действие можно выполнить разными способами.

    Метод (method) - это действия, которые может выполнять объект. В реальном мире у объектов тоже имеются какие-либо методы. Машины ездят, собаки лают, доллар покупается и т.д. В нашем случае alert() является методом объекта Window, то есть объект Window может выдавать пользователю какое-либо предупреждение в окне сообщений. Примерами других методов являются открытие и закрытие окон, нажатие кнопок. Здесь речь идет о трех методах: open(), close() и click(). Обратите внимание на круглые скобки. Они означают, что методы, в отличие от свойств, используются.

    У всех объектов имеются свойства (properties). Если вы и далее будете следовать аналогии с объектами реального мира, то обнаружите, что все предметы обладают какими-то свойствами: у машин есть колеса, а у собаки - шерсть. Что касается JavaScript, то у такого объекта, как браузер, имеется название и номер версии.

    Пользоваться методом alert() проще всего. Он применяется для вывода на экран текстовой информации в краткой форме. После прочтения сообщения пользователь щелкает по кнопке OK и окно исчезает.
    Прежде всего, откройте шаблон HTML-страницы в текстовом редакторе и сохраните его под новым именем в любой удобной для вас папке.

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    Пример. Чтобы вызвать на экран окно предупредительных сообщений, измените шаблон в соответствии со следующим листингом:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

alert();

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    Теперь о предупреждении. Его текст, заключенный в кавычки, вводится внутри круглых скобок:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

alert("Окно сообщения, вызванное с помощью JavaScript.");

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    Сохраните файл, откройте его в браузере и взгляните на появившееся сообщение (см. рис. 3.7).

Рис. 7. Окно предупредительных сообщений с созданным вами сообщением в браузере Internet Explorer

    Пример. Вывести на экран второе предупреждение так же просто, как и первое. Добавьте еще один вызов alert() в блоке SCRIPT в следующей строке за первым предупреждением и введите в кавычках сообщение:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

alert("Предупреждение, вызванное с помощью JavaScript.");

alert("А вот и второе сообщение!");

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    Сохраните файл и обновите экран в браузере. На этот раз появятся два сообщения. Обратите внимание, что они выводятся на дисплей раздельно, а не одно над другим. То есть JavaScript выполняет команды сценария поочередно, а не все подряд, без остановки. Только если пользователь щелкнет по кнопке OK в первом окне, на экране появится второе.

    Профессионалы, работающие с JavaScript, используют любую возможность, чтобы облегчить чтение собственного кода при повторном к нему обращении (быть может, через несколько месяцев). Одним из таких вспомогательных приемов является использование комментариев JavaScript, один из которых вы уже встречали в предыдущей главе - комментарий в одну строку.

    Пример. Ниже приводится пример использования однострочных комментариев:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

// Ниже приводится вызов первого предупреждения.

alert("Предупреждение, вызванное с помощью JavaScript.");

// Это вызов второго предупреждения.

alert("А вот и второе сообщение!");

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    Запустив на выполнение этот сценарий, вы не заметите в итоге никаких изменений. Причина в том, что комментарии сделали свое дело и "спрятали" от браузера ваши примечания.

    Иногда в сценарий приходится добавлять комментарии в несколько строк. В этом случае вы можете по-прежнему вставлять // в начале каждой строки, но это не слишком удобно. Лучше использовать специальные последовательности символов для обозначения многострочных комментариев.
    Многострочный комментарий открывается комбинацией /*, за которой следует собственно комментарий, и закрывается комбинацией */.

    Пример. Ниже приводится пример многострочного комментария:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

/*

Ниже дважды используется метод alert() для вызова

двух окон сообщений - обратите внимание, что

второе окно появляется только после нажатия кнопки OK

в первом окне.

*/

alert("Предупреждение, вызванное с помощью JavaScript");

alert("А вот и второе сообщение!");

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    Со временем вы научитесь добавлять в сценарий действительно полезные комментарии. Поначалу это может показаться нудным или необязательным, но затем, используя их, вы облегчите последующее прочтение вашего сценария и будете полнее представлять, как он работает. Вводите комментарии при каждой возможности.

    Метод confirm() подобен методу alert(), но в появляющемся на экране окне пользователь может сделать выбор между кнопками OK и Cancel. Окно сообщения выводится тем же способом, с той разницей, что вместо метода alert() указывается метод confirm().

    Пример. Выполняя ту же последовательность действий, что и при применении метода alert(), вы добавляете в блок сценария метод confirm(), как указано ниже:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

confirm();

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    И снова сообщение, которое вы хотите вывести на экран, набирается в кавычках внутри круглых скобок:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

confirm("Что вы выбираете?");

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    Сохраните файл (под другим именем, чем файл шаблона, с расширением HTM или HTML), и откройте его в браузере (см. рис. 3.8).

Рис. 8. Окно подтверждения с созданным вами сообщением в браузере Internet Explorer

    Обратите внимание, что в диалоговом окне имеются две кнопки - OK и Cancel. По какой бы вы сейчас ни щелкнули, результат будет один - окно исчезнет. Прежде чем вы сможете пользоваться кнопками в окне подтверждения, вам предстоит приобрести некоторые навыки работы с JavaScript, после чего снова вернемся к методу confirm().

    Метод prompt() несколько отличается от предыдущих двух методов, которые вы изучили в данной главе. Он дает возможность пользователю вписать собственный ответ на вопрос, вместо того чтобы просто выводить на экран информацию (как в методе alert()) или делать выбор между кнопками OK и Cancel (как в методе confirm()).

    Пример. Метод prompt() вводят в сценарий так же, как и два ранее рассмотренных метода. Сначала добавьте prompt() в блок SCRIPT:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

prompt();

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    С этого момента ввод метода prompt()начинает отличаться от ввода предыдущих двух методов, поскольку в круглые скобки требуется добавить две фразы. Первая из них - сообщение, которое должно быть выведено на экран.

    Пример. Делается это так же, как и в двух предыдущих случаях. Текст в кавычках помещается внутри круглых скобок:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

prompt("Как вас зовут?");

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    Сохраните вашу страницу и просмотрите ее в браузере. Обратите внимание на появившийся запрос об имени пользователя (см. рис. 3.9). Вы можете ввести имя и щелкнуть по одной из кнопок выбора.

Рис. 9. Окно запросов с созданным вами сообщением в браузере Internet Explorer

    Обратите внимание на слово undefined (не определено) в поле ввода. Это особенность Internet Explorer. В браузере Netscape Navigator поле ввода остается пустым (см. рис. 3.10).

Рис. 10. Окно запросов с созданным вами сообщением в браузере Netscape Navigator

    В настоящий момент еще ничего происходит, что бы вы ни делали, но к концу этой главы вы сумеете заставить программу работать.
    Следующая единица ввода - это текст по умолчанию, который должен появиться в соответствующем поле. Добавить его очень просто, а заодно это позволит избавиться от появления undefined в браузере Internet Explorer.

    Пример. После первой фразы в круглых скобках поставьте запятую за пределами кавычек, а после нее впишите вторую фразу (тоже в кавычках). Это делается таким образом:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

prompt("Как вас зовут?", "Введите здесь ваше имя");

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

    Сохраните вашу страницу и еще раз обновите вид в браузере. Обратите внимание, что поле ввода больше не является пустым, а содержит текст, указанный во второй паре кавычек (см. рис. 3.11).

Рис. 11. Окно запросов с созданным вами сообщением и текстом поля ввода по умолчанию в браузере Internet Explorer

Полный текст вы получите, заказав книгу в Издательском Доме "Питер" - http://shop.piter.com/book/978531800480/?refer=10000

Книга посвящена разработке 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-последовательности

Подпишитесь на рассылку Все о WEBСтроительстве

Подписка на Subscribe.Ru

Дискуссионная рассылка для веб-мастеров

Подписка на MailList.Ru

Подписка на Content.Mail.Ru

Как пользоваться массивами

Быстрое создание массива

Размер массива

Вывод на экран всех элементов массива

Интерактивное творчество

Оптимизация

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. Расширение кругозора

Выход за пределы тэга <head>

Связь, связь и еще раз связь

Встроенный сценарий JavaScript

Использование тэга <head>

Часть 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

Усовершенствование сценария

Предметный указатель