На главную

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

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Web-программирование

JavaScript 1.5: учебный курс. JavaScript в действии

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

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

Ввод/вывод информации с помощью 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.
    Все эти окна созданы на языке JavaScript:


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

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

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

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

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

Рис. 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-страницы в текстовом редакторе и сохраните его под новым именем в любой удобной для вас папке.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>

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

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
alert();
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>

Примечание Точка с запятой после метода alert() называется разделителем строки и нужна для того, чтобы сделать сценарий совместимым со стандартом ECMA (хотя и без точки с запятой ошибки не будет). Этот символ будет очень часто встречаться в следующих главах. В главе 4 вы узнаете, где и когда он используется.

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

<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 в первом окне, на экране появится второе.


Рекомендация Не забывайте сохранять файл, прежде чем смотреть на результат его изменений. Трудно поверить, но большинство пользователей забывают об этом, а потом понимают, что сделали что-то не так.

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

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

    Профессионалы, работающие с 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()

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


Примечание Чтобы кнопка Cancel начала работать, вам требуются более глубокие знания JavaScript, чем вы успели получить.

    Пример. Выполняя ту же последовательность действий, что и при применении метода 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().


Упражнение Попробуйте использовать на Web-странице метод confirm(). Введите свое собственное сообщение. Добавьте в Web-страницу метод confirm() несколько раз и посмотрите, каким будет результат.

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

    Метод 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

Упражнение Попробуйте помещать вызов метода prompt() на Web-страницу. Введите ваши собственные сообщения и текст поля ввода по умолчанию. Дважды на одной странице используйте метод prompt() и взгляните на результат. Добавьте в вашу Web-страницу комментарии (одно- и многострочные).

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

JavaScript 1.5 by exmple

Книга посвящена разработке 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
Усовершенствование сценария
Предметный указатель

Авторы: Кингсли-Хью К., Кингсли-Хью Э.
Издательский дом "Питер"

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100