Автор: Кан Марк
Название: Основы программирования на JavaScript
Содержание
Лекция 1. Язык сценариев JavaScript
Лекция 2. Операторы и функции
Лекция 3. Формы и циклы
Лекция 4. Функции и концепция объектов
Лекция 5. Строки, числа и массивы
Лекция 6. Объектная модель документа
Лекция 7. Объект документа и объект окна
Лекция 8. Основы объектно-ориентированного программирования
Лекция 9. Наследование и замыкание
Лекция 10. Основы приложений AJAX
Лекция 11. Обработка ошибок в JavaScript
Лекция 12. Рекурсия
Дополнения
Дополнение. Краткое руководство по AJAX
Дополнение. Учебное руководство по XHTML
Лекция 1. Язык сценариев JavaScript
Введение в язык сценариев JavaScript.JavaScript является языком сценариев (скриптов), который применяют в основном для создания на Web-страницах интерактивных элементов. Его можно использовать для построения меню, проверки правильности заполнения форм, смены изображений или для чего-то еще, что можно сделать на Web-странице. Если взглянуть на Google Maps или службу GMail компании Google, то можно понять, на что способен сегодня язык JavaScript.
Так как JavaScript является в настоящее время единственным языком сценариев, который поддерживают все основные браузеры Web (Internet Explorer, Firefox, Netscape, Safari, Opera, Camino и т.д.), то он используется очень широко.
Код JavaScript обычно выполняется Web-браузером клиента, и в этом случае он называется сценарием на стороне клиента. Но код JavaScript можно выполнять также на Web-сервере для формирования документов HTML, воплощая тем самым сценарий на стороне сервера. Хотя использование JavaScript обычно ограничивается сценариями на стороне клиента, он является также очень мощным серверным языком.
При создании кода JavaScript требуется фактически только текстовый редактор и Web-браузер. Знание HTML и CSS будет играть определенно положительную роль, и если вы захотите использовать навыки JavaScript на Web-сайте, то понадобится также Web-сайт. Если у вас уже есть Web-сайт, то отлично! Если нет, то существует множество бесплатных серверов, которые можно использовать для размещения своих страниц.
Что касается текстового редактора, то в Windows имеется редактор NotePad. Хотя этого будет достаточно для редактирования JavaScript, HTML и CSS, более мощный редактор, такой, например, как EditPlus или другой, может оказаться более удобным.
Ну, а теперь можно перейти к созданию сценария JavaScript!
Прежде всего, необходимо узнать, как добавить сценарий JavaScript на страницу HTML. Это можно сделать одним из двух способов: поместить теги Script на Web-странице и расположить код JavaScript внутри этих тегов, или поместить весь код JavaScript в отдельный файл и связаться с ним с помощью тега Script.
Любой из этих методов вполне допустим, но они имеют разное назначение. Если имеется небольшой код, который будет использоваться только на одной странице, то размещение его между тегами Script будет хорошим решением. Если, однако, имеется большой фрагмент кода, который будет использоваться на нескольких страницах, то, наверно, лучше поместить этот код JavaScript в отдельный файл и соединиться с ним. Это делается для того, чтобы не нужно было загружать этот код всякий раз при посещении различных страниц. Код загружается один раз, и браузер сохраняет его для последующего использования. Это похоже на то, как используются каскадные таблицы стилей (CSS).
Ниже приведены примеры двух способов подключения кода JavaScript:
<script type="text/javascript"></script>
<script type="text/javascript" src="scripts/JavaScriptFile.js"></script>
В первом примере, код JavaScript помещается между символами > и <, прямо перед </script>. Если вы совершенно не знаете, как работает Web-страница, то вот пример того, как устроена страница HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Здесь располагается заголовок страницы </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Имя автора">
<SCRIPT TYPE="text/javascript">
</SCRIPT>
</HEAD>
<BODY>
Здесь располагается основная содержательная часть Web-страницы (тело).
</BODY>
</HTML>
Сохраните этот файл где-нибудь на своем компьютере с расширением .html, так, чтобы полное имя файла было, например, таким: JavaScript_Lecture_1.html. После сохранения файла сделайте на нем двойной щелчок мышью, чтобы открыть в используемом по умолчанию браузере.
Почти любой язык программирования в мире имеет дело с объектами, называемыми "переменными", и JavaScript не является исключением. Переменная является просто элементом данных с присоединенным к нему именем. Она может содержать число, слово или предложение (называемые строками - String) или объект (Object), о которых будет рассказано позже. Если коду необходимо сообщить, что имеется 5 яблок, то можно создать переменную с именем apples и задать ей значение 5. Давайте сейчас это сделаем. В JavaScript для определения переменной используется ключевое слово var. Отметим, что JavaScript различает регистр символов, поэтому var означает не то же самое, что VAR или Var.
var apples = 5;
Необходимо сделать два важных замечания в отношении этого небольшого фрагмента кода. Первое: требуется помнить о том, что JavaScript является "слабо типизированным" языком. Это означает, что при определении переменных не требуется указывать, какого они типа: будут ли они числами, строками, объектами, и т.д. Во многих других языках необходимо делать это различие.
Второе: обратите внимание на точку с запятой (;) в конце строки. Это говорит интерпретатору JavaScript, что вы закончили делать то, что делали в данный момент, - в нашем случае это задание значения 5 переменной apples. Хотя точка с запятой не является обязательной в JavaScript, лучше привыкнуть ее использовать.
Итак, мы определили в коде, что имеется 5 яблок. Что дальше? Информация о яблоках имеется в коде, но никто об этом не знает. Надо сообщить о яблоках! Одним из наиболее распространенных методов вывода простого сообщения пользователю является отправка уведомления (alert):
var apples = 5;
alert('Имеется ' + apples + ' яблок!');
Если протестировать этот сценарий, то на экране появится окно с сообщением " Имеется 5 яблок!" Сейчас подходящее время, чтобы ввести строки (String) и так называемую конкатенацию или соединение строк. Строка является просто небольшим фрагментом текста и может содержать любой текст. В JavaScript мы сообщаем коду, что имеется строка, заключая ее в одиночные или двойные кавычки (" или '). Можно использовать любой тип кавычек. Знаки плюс (+) в примере выше сообщают коду, что мы соединяем строку с предыдущей строкой.
Итак мы имеем строку "Имеется" за которой следует переменная apples (равная 5), за которой следует еще одна строка "яблок!". Соединим их вместе и получим "Имеется 5 яблок!". Команда alert получает то, что ей передается (то, что находится между скобок) и открывает окно с текстом.
Что если мы хотим предложить пользователю съесть яблоко? Можно, например, спросить, сколько яблок он хотел бы съесть:
var apples = 5;
alert('Имеется ' + apples + ' яблок!');
var eat = prompt('Сколько яблок вы хотите съесть?', '1');
prompt является другой встроенной функцией, аналогичной alert. Однако вместо простого вывода информации она также получает ввод от пользователя. В данном случае мы спрашиваем у пользователя, сколько яблок он хотел бы съесть. '1' в коде сообщает функции prompt, что значением по умолчанию для количества яблок будет 1, так как люди обычно едят только одно яблоко за раз. Однако пользователь может изменить это значение на любое другое. Когда пользователь щелкнет на кнопке OK, переменной eat будет задано значение этого ввода. Поэтому если пользователь введет 2, то eat будет равно 2.
Поэтому, если пользователь съел 2 яблока, то останется 3, так? Поэтому выполним несколько простых математических операций и покажем результат.
var apples = 5;
alert('Имеется ' + apples + ' яблок!');
var eat = prompt('Сколько яблок вы хотите съесть?', '1');
apples -= parseInt(eat);
alert('А теперь имеется только' + apples + ' яблок!');
Здесь мы видим два новых элемента. Прежде всего, обращение к функции parseInt, которая получает строку и возвращает число. Так как для выполнения математических операций требуются числа, то это гарантирует, что мы имеем число. Если пользователь введет в поле 2, то parseInt превратит это в число 2.
Затем, оператор -=, который означает вычитание из левой части оператора значения правой части. Поэтому значение переменной eat вычитается из переменной apples. Можно также записать эту строку следующим образом:
apples = apples - parseInt(eat);
Это означает в точности то же самое и может быть немного легче для понимания. Теперь, когда известно, сколько осталось яблок, мы еще раз сообщаем пользователю эту информацию.
Существуют другие операторы, подобные -=, которые делают похожие вещи. Всего имеется 8 обычных арифметических операторов:
+
-
/
*
+=
-=
/=
*=
Вот и все для начала. В следующей лекции мы добавим в код проверку, введем операторы if и else и вкратце познакомимся с функциями.
(обратно) (обратно)Лекция 2. Операторы и функции
Основы проверки сценариев. Операторы if и else. Способы записи комментариев. Краткое знакомство с функциями.При тестировании сценария, написанного в предыдущей лекции, можно заметить, что результат, получаемый из prompt, требует некоторой проверки. Когда сценарий спрашивает, сколько яблок желает съесть пользователь, то пользователь может ввести число больше 5, меньше 0 или что-то, что вообще не является числом. В каждом из таких случаев желательно информировать пользователей, что введено недопустимое значение.
Так как в этом сценарии имеется только 5 яблок, то это максимальное количество яблок, которое может получить пользователь. Поэтому начнем с проверки, что введенное число не больше 5.
var apples = 5;
alert('Имеется ' + apples + ' яблок!');
var eat = prompt('Сколько яблок вы хотите съесть?', '1');
var eaten = parseInt(eat);
if(eaten > 5){
alert('Простите, но имеется только 5 яблок.' + 'Вы не можете съесть ' + eaten + ' яблок!');
} else {
apples -= eaten;
alert('А теперь имеется только ' + apples + ' яблок!');
}
Основными новыми понятиями здесь являются операторы if и else. Операторы if и else достаточно легко понять. Приведенный выше код дает возможность сказать: "Если пользователь выбрал для еды более 5 яблок, то сообщите ему, что такого количества яблок нет. Иначе позвольте ему съесть столько яблок, сколько он попросит.".
Основной синтаксис оператора if / else следующий:
if(условие){
// код, который выполняется, когда справедливо условие if
} else {
// код, который выполняется, когда условие if ложно
}
Необходимо отметить открывающую и закрывающую скобки, { и }, в приведенном выше коде. Открывающая скобка сообщает коду, где начинается блок кода, а закрывающая скобка указывает коду, где блок заканчивается. Поэтому все между { и } выполняется как часть оператора if. Необходимо отметить, что закрывающая скобка оператора if размещается непосредственно перед ключевым словом else. Оператор else имеет свой собственный набор скобок и свой собственный блок для выполнения.
Две косые черты // в приведенном примере говорят коду, что здесь находится комментарий. Комментарий является частью кода, который не выполняется. Они обычно используются для описания функций реального кода, чтобы не требовалось изучать код для выяснения, что он делает. Если, например, имеется очень длинный фрагмент кода, который проверяет входящие данные формы, то будет вполне разумно вставить комментарий, говорящий что-нибудь вроде "Следующий код проверяет ввод пользователя в форму". В этом случае любой, кто будет просматривать код, или сам автор кода несколько месяцев спустя после написания, сразу поймет, что этот код делает.
В JavaScript существует два способа записи комментариев. Первый, который мы уже видели, состоит в использовании //. Все следующее за // до конца строки считается комментарием и поэтому игнорируется при выполнении кода. Другой способ состоит в использовании комбинаций символов /* и */, в этом случае все, что находится между ними, игнорируется.
// это однострочный комментарий
/*
если требуется более длинный комментарий, то
лучше использовать "блочный комментарий".
Этот комментарий является блочным комментарием,
и полностью игнорируется при выполнении кода
*/
Для короткого сценария комментарии не всегда нужны. Но когда код длинный, они становятся необходимостью. Программистам очень часто приходится просматривать тысячи строк кода в попытке найти место для исправления ошибки. Если код имеет хорошие комментарии, то достаточно легко почти точно определить, где находится нужный код.
Вернемся к нашему оператору if,
if(eaten > 5){
alert('Простите, но имеется только 5 яблок.
Вы не можете съесть ' + eaten + ' яблок!');
} else {
apples -= eaten;
alert('А теперь имеется только ' + apples + ' яблок!');
}
Можно видеть, что условием является eaten > 5. Знак > означает "больше чем", так что это условие означает "если eaten больше 5". Аналогично, < означает "меньше чем".
Существует два других аналогичных знака >= и <=, которые означают "больше чем или равно" и "меньше чем или равно" соответственно.
В приведенном выше коде мы сообщаем пользователю о том, что он ввел значение больше 5 яблок. Только если он выбрал меньше 5 яблок, это число вычитается из текущего количества яблок и затем пользователю сообщается, сколько яблок осталось. Однако существует еще два возможных случая. Что, если пользователь введет число меньше 0? Что, если он введет значение, которое не является числом? Первый случай читатель может теперь обработать самостоятельно. Второй случай требует использования другой встроенной функции, isNaN. При попытке преобразовать что-нибудь в число с помощью функции parseInt, возвращается значение NaN, если функция не может выполнить операцию. NaN означает Not a Number (Не число). Если вызвать функцию parseInt, например, со значением apple, то будет получено значение NaN, так как слово apple не является числом.
var apples = 5;
alert('Имеется ' + apples + ' яблок!');
var eat = prompt('Сколько яблок вы хотите съесть?', '1');
var eaten = parseInt(eat);
if(isNaN(eaten)){
alert('Вы должны ввести допустимое число яблок!');
} else if(eaten > apples){
alert('Простите, но имеется только ' + apples + ' яблок.
Вы не можете съесть ' + eaten +
' яблок!');
} else if(eaten < 0){
alert('Простите, но вы не можете съесть
отрицательное количество яблок!');
} else {
apples -= eaten;
alert('А теперь имеется только ' + apples + ' яблок!');
}
Теперь все это должно быть понятно читателю. Прежде всего проверяется, что введено допустимое значение. Если значение недопустимо, выводится соответствующее сообщение. Затем проверяется, что введенное число не превышает количество существующих яблок, а затем - что это число не является отрицательным. Если все эти проверки проходят успешно, пользователь сможет съесть столько яблок, сколько захочет. В коде сделано еще одно изменение, вместо if(eaten > 5) используется if(eaten > apples). Если в последующем количество имеющихся яблок var apples = 5; изменится, то это изменение пришлось бы делать только в одном месте. Старайтесь всегда использовать в коде переменные. Если значения "жестко закодированы", как было сделано ранее в коде if(eaten > 5), то очень часто при внесении изменений придется подолгу искать эти жестко закодированные значения, чтобы убедиться, что внесены все необходимые изменения.
Если пользователь ввел каким-либо образом недопустимое значение, то можно попросить его повторно ввести количество яблок, которое он хочет съесть. Одним из способов сделать это было бы копирование всего кода несколько раз. Однако обычно это не самое лучшее решение. Что, если пользователь вводит недопустимое значение снова и снова? Можно продолжить копирование кода, но легко видеть, что это крайне неэффективно и очень трудно поддерживать код в рабочем состоянии.
В этом случае лучшим решением будет использование так называемой функции. Функция содержит код, который выполняет определенную задачу. Мы уже видели использование функций alert, prompt, parseInt и isNaN, которые встроены в язык JavaScript. Преимущество использования функций состоит в том, что можно выполнять один и тот же блок кода снова и снова, не копируя этот код, Для выполнения функции необходимо написать ее имя, за которым следуют скобки (), а все значения, передаваемые в функцию, записываются между скобками.
var apples = 5;
function eatApples(){
alert('Имеется ' + apples + ' яблок!');
var eat = prompt('Сколько яблок вы хотите съесть?', '1');
var eaten = parseInt(eat);
if(isNaN(eaten)){
alert('Вы должны ввести допустимое число яблок!');
eatApples();
} else if(eaten > apples){
alert('Простите, но имеется только ' + apples + ' яблок.
Вы не можете съесть ' + eaten +
' яблок!');
eatApples();
} else if(eaten < 0){
alert('Простите, но вы не можете съесть
отрицательное количество яблок!');
eatApples();
} else {
apples -= eaten;
alert('А теперь имеется только ' + apples + ' яблок!');
if(apples > 0){
if(confirm('Не хотите съесть еще яблочко?')){
eatApples();
}
} else {
alert('Яблок больше нет!');
}
}
}
Здесь весь наш код записан в виде функции с именем eatApples. Можно видеть, что каждый раз, когда пользователь вводит неверное значение, снова вызывается функция eatApples();, чтобы пользователь мог ввести новое значение. Когда пользователь вводит допустимое значение, то он либо может еще есть яблоки, либо, если все яблоки закончились, он получит соответствующее сообщение. Здесь используется также одна новая функция, confirm. Функция confirm просто выводит пользователю приглашение OK or Cancel ("Да или Отмена"). Если пользователь нажмет кнопку "OK", то функция возвращает значение true (да). Если пользователь нажмет кнопку Cancel или просто закроет окно, то функция confirm возвращает значение false (нет). Поэтому в нашем примере функция eatApples вызывается снова только в том случае, когда пользователь щелкнет на кнопке OK.
В конце этой лекции будет рассмотрена область действия переменной. Как можно видеть, в последнем примере переменная apples находится вне функции eatApples. Это делает переменную apples "глобальной переменной", т.е. она будет доступна из любой функции. Переменная eat, с другой стороны, является локальной переменной и существует только внутри функции eatApples. Кроме того, каждый раз при вызове функции eatApples переменная eat не будет существовать, пока не будет снова определена функцией prompt.
Чтобы увидеть эту концепцию в действии, напишем две простые функции счета:
function counting1(){
var count = 0;
count++;
alert(count);
}
var count = 0;
function counting2(){
count++;
alert(count);
}
Если запустить этот пример в браузере и щелкнуть на каждой кнопке несколько раз, то можно заметить, что counting1 всегда выдает одно и то же значение, 1. counting2, с другой стороны, выдает увеличивающееся число. Почему это происходит? Посмотрим просто сначала на counting1. Можно видеть, что каждый раз при выполнении counting1 прежде всего создается переменная count и ее значение задается равным 0. В следующей строке переменная count увеличивается на 1.
Оператор ++ пока еще не встречался. count++ просто увеличивает count на 1. Другими словами, это в точности то же самое, что написать count += 1 или count = count + 1. Поскольку увеличение на 1 является в программировании очень распространенным действием, то для него существует специальный оператор. Аналогично оператор -- вычитает 1 из переменной: count--.
Каждый раз, когда функция counting1 выполняет alert(count), она сообщает значение новой переменной count , которое только что было определено как 0+1.
Теперь посмотрим на counting2. Можно видеть, что переменная count в этом случае находится вне функции. Даже до вызова этой функции значение count задано как 0. При вызове counting2 прежде всего происходит увеличение переменной count на 1. Так как мы не восстанавливаем значение count в 0, как в случае counting1, то переменная count продолжает сохранять свое значение, и все происходит, как и предполагалось.
Теперь читатель получил общее понимание некоторых фундаментальных понятий программирования и JavaScript, в частности. В следующей лекции будут рассмотрены циклы и формы.
(обратно) (обратно)Лекция 3. Формы и циклы
Основы работы с полями форм и с функциями циклов.В предыдущей лекции были рассмотрены операторы if/else, основы проверки и функций. Если в ходе дальнейшего чтения возникнут какие-то вопросы, то имеет смысл еще раз прочитать предыдущую лекцию.
Мы знаем теперь, как проверять данные, но при создании кода JavaScript обычно требуется проверять не оставшееся количество воображаемых яблок. Одной из наиболее общих областей применения JavaScript являются поля формы. Предположим, например, что имеется простая контактная форма. Иногда требуется убедиться, что пользователь ввел в форму свое имя или что он выбрал как минимум одну радио-кнопку для вопроса. Вот пример такой формы:
Имя: Ваш любимый цвет: Синий Желтый
Красный Черный
Зеленый Другой
Фамилия:
Адрес Email:
Отправить форму Очистить форму Зафиксировать форму на месте
Ниже представлен код этой формы. Он приведен только для иллюстрации.
<form name="tutform" onsubmit="return noform();" class="codesnip"
style="background-color:#FFF;z-index:10;">
<table width="100%">
<tr>
<td>Имя:</td>
<td><input name="firstname"></td>
<td>Ваш любимый цвет:</td>
<td rowspan="3" valign="top">
<input type="radio" name="color" value="blue">Синий<br />
<input type="radio" name="color" value="red">Красный<br />
<input type="radio" name="color" value="green">Зеленый
</td>
<td rowspan="3" valign="top">
<input type="radio" name="color" value="yellow">Желтый<br />
<input type="radio" name="color" value="black">Черный<br />
<input type="radio" name="color" value="other">Другой
</td>
</tr>
<tr>
<td>Фамилия:</td>
<td><input name="lastname"></td>
</tr>
<tr>
<td>Адрес Email:</td>
<td><input name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Отправить форму">
<input type="reset" value="Очистить форму"></td>
<td colspan="3" align="right"><button id="lockbutton"
onclick="swapLock();return false;">Зафиксировать форму на месте</button></td>
</tr>
</table>
</form>
Прежде всего необходимо узнать, как создать объект JavaScript, который ссылается на форму. Любую форму на странице можно указать с помощью конструкции document.forms. Если имеется форма с именем tutform, то к ней можно обратиться следующим образом: document.forms.tutform.
На любые элементы внутри формы (поля ввода, поля выбора, флажки и т.д) можно ссылаться с помощью конструкции elements: document.forms.ИмяФормы.elements. Если на форме имеется поле ввода с именем firstname, то значение этого поля можно вывести следующим образом:
alert('Имя: ' + document.forms.tutform.elements.firstname.value);
Если щелкнуть на этой кнопке, а затем отправить учебную форму, то появится уведомление с тем значением, которое было введено в поле Имя. Как это происходит? Когда форма посылается на сервер, Web-браузер ищет код onsubmit. Если этот код существует, то форма выполняет его перед отправкой:
<SCRIPT TYPE="text/javascript">
function validateForm(){
// код проверки формы находится здесь
}
</SCRIPT>
<FORM ONSUBMIT="return validateForm();">
<!-- элементы формы находятся здесь -->
</FORM>
Теперь, зная, как получить доступ к форме и элементам на этой форме, выполним некоторые основные проверки. Распространенной задачей является проверка, что именно пользователь ввел в поле ввода. Например, надо проверить, что пользователь ввел свое имя.
Как видно из предыдущего фрагмента кода, свойство ".value " объекта формы можно использовать для получения его значения. Это работает для объектов формы любого типа. Попробуем теперь проверить, что пользователь ввел на форме свои имя и фамилию:
function validateForm(){
var form_object = document.forms.tutform;
if(form_object.elements.firstname.value == ''){
alert('Вы должны ввести свое имя!');
return false;
} else if(form_object.elements.lastname.value == ''){
alert('Вы должны ввести свою фамилию!');
return false;
}
return true;
}
Важными моментами, которые необходимо отметить в этой функции, являются строки return false; и return true;. Если функция проверки возвращает значение true, то форма будет отправлена как обычно. Если, однако, функция вернет значение false, то форма отправлена не будет. Необходимо сообщить пользователю, почему форма не была отправлена, поэтому в функцию вставлены уведомления (alert).
Другим важным полем для проверки в демонстрационной форме будет набор радио-кнопок "Любимый цвет ". Если щелкнуть несколько раз на этих кнопках, то можно видеть, что в данный момент времени может быть выбрана только одна из них. Но желательно знать, что пользователь выбрал хотя бы одну из этих кнопок.
Радио-кнопки и флажки на форме представляют специальную ситуацию. Часто имеется несколько радио-кнопок с одним и тем же именем, что почти всегда исключено для полей ввода, полей выбора и т.д.:
<input type="radio" name="color" value="blue">Синий
<input type="radio" name="color" value="red">Красный
<input type="radio" name="color" value="green">Зеленый
В связи с этим существует способ доступа ко всем радио-кнопкам с одним именем. Значение document.forms.имяФормы.elements.имяРадиокнопок будет содержать список со всеми радио-кнопками. Так как необходимо проверить, что хотя бы одна радио-кнопка отмечена, то потребуется просмотреть все эти радио-кнопки. Если хотя бы одна из них отмечена, функция проверки должна вернуть true. Поэтому функция выглядит теперь следующим образом:
function validateForm(){
var radios = document.forms.tutform.elements.color;
for(var i=0; i<radios.length; i++){
if(radios[i].checked) return true;
}
alert('Вы должны выбрать цвет!');
return false;
}
Новым элементом в этом коде является так называемый цикл for. Он выглядит немного более сложно, чем есть в действительности, поэтому разберем его составные элементы:
for(var i=0; i<radios.length; i++){
Внутри скобок имеется три значения, разделенные точкой с запятой. Этими значениями, по отдельности, являются:
var i=0
i<radios.length
i++
Первое значение является просто заданием значения переменной. Это должно быть теперь понятно без проблем. Второе значение является условием проверки. Цикл for будет выполняться, пока это условие проверки возвращет true. Как только оно вернет false, цикл for остановится и выполнение кода продолжится со следующей строки. Поэтому условие i<radios.length говорит, что цикл for должен выполняться, пока переменная i меньше числа имеющихся радио-кнопок.
"length" в данном случае является свойством массива. Мы пока еще не встречались с массивами, но, упрощая, можно сказать, что radios.length возвращает просто число элементов в radios, которое в данном случае равно 6, так как имеется только 6 радио-кнопок. Последнее выражение цикла for, i++ , является кодом, который должен выполняться после каждого шага цикла.
Говоря более простым языком, цикл for делает следующее:
1 задает i равным 0;
2 проверяет, что i меньше radios.length, которое равно 6;
3 если это справедливо (true), выполняет код в цикле for;
4 после выполнения кода в цикле for добавляет 1 к переменной i;
5 переходит к шагу 2, пока выполняется условие i<radios.length . Это условие не выполнится после шестого выполнения цикла, когда i=6.
Существует другой тип цикла, который сейчас будет рассмотрен, - так называемый цикл while. Следующий код делает то же самое, что и предыдущий цикл:
var i=0;
while(i<radios.length){
if(radios[i].checked) return true;
i++;
}
alert('Вы должны выбрать цвет!');
return false;
Можно видеть, что здесь в цикле while присутствуют точно те же 3 фрагмента кода, которые имелись в цикле for: "var i=0 ", "i<radios.length " и "i++ ". Единственное отличие состоит в их размещении. В цикле while только проверка
i<radios.length
чем-то отличается от того, что было написано раньше. Эта проверка происходит в скобках сразу после while. Переменные инициализируются перед циклом while, а увеличение i, i++, происходит внутри цикла.
В этих циклах осталось объяснить еще одну вещь: if(radios[i].checked). Переменная radios содержит массив радио-кнопок с именем color. Массивы будут рассмотрены в следующей лекции, а здесь дадим упрощенное объяснение: radios[0] возвращает первую радио-кнопку, radios[1] возвращает вторую, radios[2] - третью, и т.д. до radios[5], который возвращает шестую кнопку. Если кнопок будет больше, например, 100, то radios[99] будет обращаться к 100-ой радио-кнопке.
Все эти числа могут показаться странными. Почему radios[5] обращается к шестой радио-кнопке? В JavaScript, как и во многих других языках программирования, многие вещи начинаются с числа 0, а не с 1. Это просто один из таких случаев, но это встретится еще не раз. Поэтому 0 является в действительности первым элементом, 1 - вторым, и т.д.
В форме осталось проверить еще ввод адреса e-mail. Это в действительности достаточно сложное для проверки поле, и правильная ее реализация выходит за рамки того, что изучается в этой лекции, но можно выполнить некоторую базовую проверку. Что нужно сделать? Мы знаем, что любой адрес e-mail должен содержать один и только один символ @. Он должен также содержать по крайней мере одну точку после символа @ (точка отделяет имя домена от домена верхнего уровня, например, "intuit.ru ").
function validateForm(){
var email = document.forms.tutform.elements.email.value;
if(email.indexOf('@')<0){
alert('В адресе e-mail должен присутствовать символ @');
return false;
} else if(email.indexOf('@') != email.lastIndexOf('@')){
alert('В адресе e-mail не может быть больше одного символа @');
return false;
} else if(email.indexOf('.')<0){
alert('В адресе e-mail должна присутствовать хотя бы одна точка.');
return false;
} else if(email.lastIndexOf('.')<email.indexOf('@')){
alert('В адресе e-mail должна присутствовать хотя бы одна точка после символа @');
return false;
}
return true;
}
Здесь имеются две новые сходные функции, которые требуют пояснения. Функция indexOf возвращает число, определяющее позицию одной строки в другой строке. 'abcdef'.indexOf('a') вернет 0 (здесь 0 снова означает первую позицию). 'abcdef'.indexOf('cdef') вернет 2, а 'abcdef'.indexOf('aaa') вернет -1. -1 означает, что строка не найдена. Во многих случаях возвращается -1, когда функция не может получить результат.
Аналогично, функция lastIndexOf возвращает позицию последнего вхождения одной строки в другую. 'abcba'.lastIndexOf('a') вернет 4, в то время как 'abcba'.indexOf('a') вернет 0.
Поэтому в нашем коде первый оператор if проверяет, что в адресе e-mail имеется хотя бы один символ '@'. Если такого символа нет, то email.indexOf('@') вернет -1 и оператор if вернет false.
Следующий оператор соединяет indexOf и lastIndexOf. Если в адресе e-mail имеется более одного символа @, то две эти функции вернут различные значения, как в приведенном выше примере с 'abcba'. Если имеется только один символ @, то эти функции вернут одно и то же значение. Поэтому мы проверяем эти значения на неравенство.
Третий оператор по сути идентичен первому, только он проверяет '.', а не '@'.
Наконец, четвертый оператор if проверяет, что в адресе e-mail имеется как минимум одна точка после символа @.
Недостаток этого метода состоит в том, что простая строка "@." пройдет проверку. Должно быть очевидно, что она не является допустимым адресом e-mail. Существует другой метод для проверки адреса e-mail и для проверки множества других вещей. Это делается с помощью так называемых "регулярных выражений". Хотя регулярные выражения здесь рассматриваться не будут, ниже приведен пример проверки адреса e-mail, который остается читателю для анализа в качестве упражнения.
function validateForm(){
var email = document.forms.tutform.elements.email.value;
if(!(/^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.
[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/.test(email))){
alert('Пожалуйста, введите допустимый адрес e-mail');
return false;
}
return true;
}
Как можно видеть, использование регулярного выражения приводит к более короткому (и более надежному) коду проверки, но он является и существенно более сложным!
С помощью примеров этой лекции теперь можно создать одну функцию для проверки всей формы:
function tut7(){
var form_object = document.forms.tutform;
var radios = document.forms.tutform.elements.color;
var email = document.forms.tutform.elements.email.value;
if(form_object.elements.firstname.value == "){
alert('Вы должны ввести свое имя!');
return false();
} else if(form_object.elements.lastname.value == "){
alert('Вы должны ввести свою фамилию!');
return false();
} else if(email.indexOf('@')<0){
alert('В адресе e-mail должен быть символ @');
return false();
} else if(email.indexOf('@') != email.lastIndexOf('@')){
alert('В адресе e-mail не может быть более одного символа @');
return false();
} else if(email.indexOf('.')<0){
alert('В адресе e-mail должна быть как минимум одна точка');
return false();
} else if(email.lastIndexOf('.')<email.indexOf('@')){
alert('В адресе e-mail должна быть как минимум одна точка после символа @');
return false();
}
for(var i=0; i<radios.length; i++){
if(radios[i].checked) return true();
}
alert('Необходимо выбрать цвет!');
return false;
}
(обратно) (обратно)
Лекция 4. Функции и концепция объектов
В этой лекции будут полностью рассмотрены функции и представлена концепция объектов в JavaScript.В предыдущей лекции мы рассмотрели основы работы с полями форм и немного познакомились с функциями. Если какие-то из этих понятий вызывают затруднения, то желательно еще раз прочитать последнюю лекцию.
Как мы уже знаем, функции в JavaScript используются для многократного выполнения одной и той же задачи. До сих пор функции всегда вызывались вручную с помощью скобок: myFunction(). Что, если потребуется вызвать функцию, когда пользователь выполняет определенную задачу? В JavaScript можно соединить функцию практически с любым событием, которое может порождать пользователь. Давайте посмотрим это в действии и напишем функцию, которая подсчитывает, сколько раз пользователь щелкнул на странице.
<script type="text/javascript">
var clickCount = 0;
function documentClick(){
document.getElementById('clicked').value = ++clickCount;
}
document.onclick = documentClick;
</script>
Вы щелкнули на этой странице <input id="clicked" size="3" onfocus="this.blur();" value="0"> раз.
Вы щелкнули на этой странице раз.
В предыдущей лекции оператор ++ был применен только после переменной, как в случае clickCount++. Однако в данном примере оператор ++ используется перед переменной. В первом примере clickCount++, единица добавляется к переменной clickCount после чтения ее значения. В случае ++clickCount единица добавляется к переменной clickCount перед чтением ее значения. Так как в этом примере переменной clickCount в начале присваивается значение 0, то единицу к ней необходимо добавлять до задания значения поля ввода, поэтому использована запись ++clickCount.
Предыдущий пример может показаться достаточно знакомым. Так же, как и раньше, определяется переменная и функция. Изменение состоит в том, что вместо вызова функции documentClick() код содержит указание, что функция должна выполняться всякий раз, когда пользователь щелкает на документе. document.onclick связывает функцию с событием документа onclick ("при щелчке").
Существует множество событий подобных onclick. Мы познакомимся с некоторыми из них, но наиболее распространенными являются: onclick, onload, onblur, onfocus, onchange, onmouseover, onmouseout и onmousemove. Функцию можно связать с событиями любого объекта, такого, как изображение или поле ввода, а не только документа. Например, события onmouseover и onmouseout используются обычно с изображениями для создания эффекта изменения.
Можно также заметить, что ссылка на поле ввода делается другим образом. Ранее говорилось, что для указания поля необходимо использовать document.forms.имяФормы.elements.имяПоляВвода. Хотя этот способ прекрасно работает, это не всегда необходимо. В данном примере поле ввода действует просто как счетчик. Оно не находится внутри формы, и нам это и не нужно. Поэтому мы задаем для поля некоторый ID (идентификатор): id="clicked". ID можно использовать для ссылки на любой объект на странице. ID должен быть уникальным на странице, поэтому если имеется 5 полей ввода с ID, то все ID должны быть различны, даже если они только имеют вид "input1"-->"input5".
Поскольку это поле ввода используется как счетчик, то нежелательно, чтобы пользователи щелкали на нем и изменяли его значение. Здесь на помощь приходит другое связывание, onfocus, которое срабатывает, когда курсор перемещается на объект. Поэтому при щелчке на поле ввода или при перемещении на поле ввода с помощью клавиши Tab вызывается onfocus.
Событие onfocus имеет очень короткий код, но он также очень важен. В нем появляется ключевое слово this, которое важно понимать в JavaScript. Ключевое слово this указывает на тот объект, на котором выполняется код. В данном примере this указывает на поле ввода. Выражение this.blur() "размывает" поле ввода, другими словами, заставляет его терять фокус ввода. Так как это происходит, как только пользователь активизирует поле ввода, то это делает "невозможным" изменение данных.
Если указатель this используется в функции, то он указывает на саму функцию. Если this используется в коде JavaScript вне функции, то он указывает на объект окна. Наиболее часто this используется для изменения свойства текущего объекта, как в примере выше, или для передачи текущего объекта функции.
Давайте посмотрим на другой пример:
<script type="text/javascript">
function showValue(obj){
alert('You Clicked On ' + obj.value);
}
</script>
<input type="radio" name="fruit" onclick="showValue(this);" value="Яблоко" > Яблоко
<input type="radio" name="fruit" onclick="showValue(this);" value="Апельсин" > Апельсин
<input type="radio" name="fruit" onclick="showValue(this);" value="Груша" > Груша
<input type="radio" name="fruit" onclick="showValue(this);" value="Банан"> Банан
Яблоко Апельсин Груша Банан
Можно видеть, что событие onclick для каждой из этих радио-кнопок одинаково. Однако, если щелкнуть на каждой из них, то будут получены разные сообщения. Это связано с использованием this. Так как this указывает на каждую отдельную радио-кнопку, то каждая радио-кнопка передается в функцию showValue по отдельности.
Вернемся к функциям и рассмотрим передачу функции аргументов. В предыдущем примере obj является аргументом. Предполагается, что obj содержит указатель на поле ввода, на котором был произведен щелчок. В функцию можно передавать любое количество аргументов. Если потребуется 10 аргументов, то функция будет выглядеть следующим образом:
function myFunction(arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10){
// здесь располагается код
}
Во многих случаях может понадобиться функция, которой требуется определенное количество аргументов, но не всегда требуются все. В JavaScript не нужно передавать все 10 аргументов в функцию, которая объявлена с 10 аргументами. Если передать только первые 3, то функция будет иметь только 3 определенных аргумента. Это необходимо учитывать при написании функций. Например, можно написать функцию, которой всегда требуются 3 первых аргумента, но следующие 7 являются необязательными:
function myFunction(arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10){
// код с arg1
// код с arg2
// код с arg3
if(arg4){
// код с arg4
}
if(arg5 && arg6 && arg7){
// код с arg5, arg6 и arg7
if(arg8){
// код с arg8
}
}
if(arg9 || arg10){
// код с arg9 или arg10
}
}
Можно видеть, что в коде выполняется простая проверка if(arg). Если аргумент не передается в функцию, то при попытке использовать этот аргумент будет получено значение undefined. При использовании undefined в качестве логического (булевого) значения (true / false), как в операторах if, оно воспринимается как false.
Поэтому, если arg4 не был передан в приведенном выше примере, то он является undefined и тело оператора if не выполняется.
Как быть, когда трудно определить, сколько потребуется аргументов? Можно иметь функцию, которая получает от 1 до n аргументов и выполняет с каждым из них одну и ту же задачу. На этот случай JavaScript имеет в каждой функции объект arguments. Объект arguments содержит все аргументы функции:
function myFunction(){
for(var i=0; i<arguments.length; i++){
alert(arguments[i].value);
}
}
Этот код сообщит значение всех переданных ему объектов. Если передать 100 объектов, то будет получено 100 сообщений. Более полезной функцией было бы, возможно, скрытие/вывод всех переданных функции объектов.
Один из наиболее интересных аспектов JavaScript - идея о том, что функции являются объектами и могут передаваться как поле ввода, изображение или что-то еще, что может быть. Посмотрите, например, следующий код:
<script type="text/javascript">
function multiply(){
var out=1;
for(var i=0; i<arguments.length; i++){
out *= arguments[i];
}
return out;
}
function add(){
var out=0;
for(var i=0; i<arguments.length; i++){
out += arguments[i];
}
return out;
}
function doAction(action){
alert(action(1, 2, 3, 4, 5));
}
</script>
<button onclick="doAction(multiply)">Test Multiply</button>
<button onclick="doAction(add)" >Test Add</button>
Test Multiply Test Add
В этом небольшом фрагменте кода происходит очень многое. Вначале просто определяют две функции: multiply и add. Функция multiply просто перемножает все переданные ей числа. Аналогично, функция add складывает все переданные ей числа. Тонкости начинаются при использовании действий onclick двух созданных кнопок. Можно видеть, что при щелчке на любой из двух кнопок в функцию doAction передается объект. Ранее мы всегда передавали переменные или объекты HTML (такие, как поля ввода в предыдущем примере). В этом примере передаются функции. Функции можно передавать таким же способом, как и любой другой объект, и когда они передаются, их можно вызывать таким же способом, как и любую другую функцию. Изменяется только ее имя.
Таким образом функция doAction получает другую функцию в качестве аргумента! Если передается функция multiply, то функция doAction передает ей значения от 1 до 5, и мы получаем в результате 120. Если в doAction передается функция add, то ей также передаются значения от 1 до 5, и в результате мы получаем значение 15.
Это в действительности одно из наиболее мощных свойств JavaScript, и оно будет более подробно рассмотрено в следующих лекциях. Пока достаточно понять общий принцип.
Другим важным свойством функций является возможность вложения их друг в друга. JavaScript не поддерживает истинный объектно-ориентированный подход к проектированию, но это свойство обеспечивает очень похожие возможности.
Кроме вложения функций, важно отметить, что имеется несколько различных способов объявления функций:
function myFunction(){
function nestedFunction1(arg1, arg2, arg3){
alert(arg1+arg2+arg3);
}
var nestedFunction2 = function(arg1, arg2, arg3){
alert(arg1+arg2+arg3);
}
var nestedFunction3 = new Function('arg1, arg2, arg3', 'alert(arg1+arg2+arg3);');
}
В этом примере функции nestedFunction1, nestedFunction2 и nestedFunction3 являются одинаковыми по своим возможностям. Единственное различие состоит в том, как они определяются. nestedFunction1 объявлена, как это делалось раньше. Синтаксис для nestedFunction2 немного отличается. Мы задаем для функции переменную this.nestedFunction2. Синтаксис этого объявления будет следующий имяПеременной= function(аргументы){. Аналогично для функции nestedFunction3 задается переменная для новой функции. Однако это объявление существенно отличается, так как мы определяем функцию с помощью строк. Третий вариант используется редко, но является очень полезным, когда используется. Он позволяет создать строку, содержащую код выполняемой функции, а затем определить функцию с помощью этой строки.
В следующей лекции будут рассмотрены массивы.
(обратно) (обратно)Лекция 5. Строки, числа и массивы
Внутренняя работа присущих JavaScript объектов: строк, чисел и массивов.До сих пор мы рассматривали языковые конструкции JavaScript: операторы if, циклы, функции и т.д. В этой лекции будет рассмотрена внутренняя работа некоторых присущих JavaScript объектов: строк, чисел и массивов.
В JavaScript строка является любым фрагментом текста. Как и многие другие объекты в JavaScript, строки можно определять несколькими различными способами:
var myString = 'Hello, World!';
var myString = new String('Hello, World!');
Первый метод используется наиболее часто. Второй метод применяется редко и только для гарантии, что получаемый объект является строкой. Например:
var n = 5;
var s = new String(n*20);
В этом примере s будет строкой "100". Если просто задать s как n*20, то s будет содержать число 100. Однако поскольку JavaScript является слабо типизированным языком, то эти различия не будут существенно влиять на то, что вы делаете.
Строковые объекты (var n = new String('Hello World')) технически являются в Internet Explorer более медленными при некоторых операциях, чем строковые литералы (var n = 'Hello World'). Однако это поведение совершенно противоположно в других браузерах. В любом браузере различие редко бывает настолько заметно, чтобы об этом беспокоиться.
Единственное важное различие состоит в том, что eval() не работает со строковыми объектами.
Что, если в строке имеется апостроф? Следующий код работать не будет:
var n = 'The dog took it's bone outside';
Легко видеть, что апостроф в "it's " заканчивает строку. Поэтому мы получаем строку "The dog took it ", за которой следует " s bone outside' ". Это продолжение само по себе не является допустимым кодом JavaScript (или правильным грамматически, если на то пошло), поэтому будет получена ошибка.
Здесь можно сделать две вещи. Так как строка определяется с помощью одиночных или двойных кавычек, то можно задать строку с помощью двойных кавычек. Другая возможность состоит в экранировании апострофа. Чтобы экранировать символ, необходимо просто подставить перед ним символ \. Символ \ в этом контексте сообщает JavaScript, что следующий символ необходимо воспринимать в точности так, как он есть, в номинальном значении, а не как специальный символ.
var n = "The dog took it's bone outside";
var n = 'The dog took it\'s bone outside';
Если в строке должен присутствовать символ \, то он экранируется таким же образом: '\\'.
В предыдущей лекции мы встречались с функциями indexOf и lastIndexOf. Напомним, что они делают. Функция indexOf возвращает число, определяющее первую позицию одной строки в другой. Если разыскиваемая строка не существует, то indexOf возвращает -1. Функция lastIndexOf идентична indexOf, но возвращает не первую позицию вхождения строки, а последнюю.
Тот факт, что функции indexOf и lastIndexOf возвращают -1, если строка не существует, является очень полезным и позволяет использовать эти функции для достаточно распространенной задачи - проверки того, что одна строка существует внутри другой.
Существует несколько других полезных функций для работы со строками, которые мы перечислим и кратко поясним.
[x]. charAt() сообщает, какой символ находится в определенной позиции строки. Поэтому 'Test'.charAt(1) = 'e'.
[x]. length сообщает длину строки . 'Test'.length = 4.
[x]. substring() выдает строку между двумя индексами. 'Test'.substring(1, 2) = 'e'.
[x]. substr() аналогична substring(), только второе число является не индексом, а длиной возвращаемой строки. Если это число указывает на позицию за пределами строки, то substr() вернет существующую часть строки. 'Test'.substr(1, 2) = 'es';
[x]. toLowerCase() и toUpperCase() делают то, что обозначают: преобразуют строку в нижний или верхний регистр символов соответственно. 'Test'.toUpperCase() = 'TEST';
Примеры всех приведенных выше функций:
alert('This is a Test'.indexOf('T')); // 0
alert('This is a Test'.lastIndexOf('T')); // 10
alert('This is a Test'.charAt(5)); // i
alert('This is a Test'.length); // 14
alert('This is a Test'.substring(5, 9)); // is a
alert('This is a Test'.substr(5, 9)); // is a Test
alert('This is a Test'.toUpperCase()); // THIS IS A TEST
alert('This is a Test'.toLowerCase()); // this is a test
Последней строковой функцией, которая будет рассмотрена, является eval(). eval() получает строку и выполняет строку, как если бы это был код JavaScript.
eval("alert('Hello, World!')");
В этом примере будет выведено сообщение "Hello, World!", как если бы функция alert была написана обычным образом. Это может быть очень полезно, так как позволяет создать содержащую код строку, а затем ее выполнить.
(обратно)Работа с числами в JavaScript происходит достаточно просто. В лекциях 1 и 2 было показано, как выполняются базовые арифметические операции, операторы ++ , --, а также *=, +=, /= и -=. Мы узнали, что NaN означает "Не число" и что делает функция isNaN(). Осталось рассмотреть еще только несколько вещей.
Объект Math в JavaScript содержит функции, позволяющие сделать почти все, что можно сделать с числами помимо обычной арифметики. Math.PI, например, содержит просто число 3.141592653589793. В нем содержатся тригонометрические функции (sin, cos, tan, и т.д.), функции для округления чисел (Math.floor возвращает число, округленное с недостатком, Math.ceil возвращает число, округленное с избытком, а Math.round округляет число "нормально") и многие другие. Существует очень много функций, объяснять которые здесь не имеет смысла. Их всегда можно найти в подходящем справочнике. (Например, )
Двумя наиболее распространенными задачами, связанными с числами, являются преобразование числа в строку и строки в число. Как уже говорилось, JavaScript является слабо типизированным языком, а это означает, что типы данных не имеют большого значения, но существуют некоторые случаи, когда надо быть уверенным, что имеется число или строка. Если надо сложить, например, 5 и число, которое вводит пользователь, то надо быть уверенным, что введено число, а не слово "Привет ".
var n = parseInt("3.14"); // 3
var n = parseFloat("3.14") // 3.14
Функция parseInt возвращает целое значение своего аргумента. Аргументы "3.14", "3", "3.00001" и "3.9999" превратятся в значение 3. Функция parseFloat, с другой стороны, возвращает также любое десятичное значение. Обе эти функции пытаются "очистить" данные перед возвращением числа. Например, parseInt("3a") вернет значение 3.
Существует также несколько методов, которые можно использовать, когда надо преобразовать число в строку:
var n = 5;
var m = n.toString();
var m = n+'';
var m = new String(n);
Как говорилось ранее, последний метод может быть немного непривычным, поэтому предполагается, что пользователь будет держаться от него в стороне, если только не понадобится использовать объект String для специальных целей. Предпочтительным методом является n.toString(), но необходимо отметить, что часто используется второй метод. Например, если имеется уведомление alert('Имеется ' + apples + ' яблок'), то число apples автоматически преобразуется в строку.
Если необходимо выполнить строковую операцию с переменной, то необходимо быть уверенным, что имеется строка. Если, например, имеется запись года из 4 цифр и ее надо преобразовать в 2 цифры:
var year = 2000;
var sYear = year.toString();
var year2 = sYear.substr(sYear.length-2);
Можно было бы также легко вычесть 2000 из этой даты, но что, если датой является 1995? или 1800? или 2700 или просто 5? В результате могли бы получиться совершенно неправильные даты, если вычесть 2000 из каждой такой даты. Используемый метод всегда даст правильные две цифры года.
(обратно)Массив является по сути списком элементов. Каждый элемент массива может быть чем угодно, но обычно они связаны друг с другом. Если, например, необходимо отследить 30 студентов класса, то можно создать массив студентов:
var students = new Array();
students[0] = 'Sam';
students[1] = 'Joe';
students[2] = 'Sue';
students[3] = 'Beth';
Как можно видеть, определить массив очень просто, так же, как и присвоить значения его элементам. Однако пример выше имеет слишком много кода для относительно небольшого результата. Нет ничего удивительного в том, что существует несколько методов для создания массива. Значительно более компактным будет следующий пример:
var students = ['Sam', 'Joe', 'Sue', 'Beth'];
Это код создает точно такой же массив, что и предыдущий пример, но, как можно видеть, он значительно более компактный и ничуть не сложнее для понимания. Скобки ([ и ]) в этом примере сообщают коду, что будет создан массив. Простая запись var students = []; является тем же самым, что и запись var students = new Array();. Правда, некоторые люди считают, что использование слова Array более наглядно, чем запись [], поэтому можно использовать любой метод записи.
Что можно теперь сделать с этим массивом студентов? Чтобы обратиться к любому элементу массива, необходимо знать его индекс. В первом примере можно видеть, что в скобках находятся числа (0-3). Это индексы. Если требуется узнать имя третьего студента, то надо будет написать alert(students[2]);. Почему 2, а не 3? Массивы в JavaScript начинают индексацию с 0, а не с 1. Поэтому первым элементом в нашем массиве будет students[0], вторым - students[1], сотым - students[99], и т.д. Для этого не существует никакой реальной причины, просто так устроен JavaScript и многие другие языки программирования. Некоторые другие языки используют в качестве первого индекса 1.
Наиболее распространенной задачей при работе с массивами, помимо изменения его данных, является проверка его длины, обычно для того, чтобы можно было перебрать весь массив и выполнить некоторую задачу с каждым элементом.
var students = ['Sam', 'Joe', 'Sue', 'Beth'];
var suffixes = ['1st', '2nd', '3rd', '4th'];
for(var i=0; i<students.length; i++){
alert(suffixes[i]+' студент -- '+students[i]);
}
Важный момент, который необходимо знать о массивах, состоит в том, что каждый элемент массива может содержать любой произвольный объект. В этих примерах каждый элемент массива является строкой, но они могут быть также числами, объектами, функциями, даже другими массивами. Электронная таблица (такая, как Excel) является хорошим примером массива, содержащего другие массивы. Прежде всего имеется массив столбцов. Каждый столбец будет в свою очередь содержать в себе массив строк. Этот массив создается точно таким же образом, как и массив students:
var spreadsheet = [
['A1', 'B1', 'C1', 'D1'],
['A2', 'B2', 'C2', 'D2'],
['A3', 'B3', 'C3', 'D3'],
['A4', 'B4', 'C4', 'D4']
];
Переносы строк в JavaScript обычно не имеют значения. В этом примере переносы строк используются для придания коду большей наглядности и не влияют на код никаким образом.
Можно видеть, что здесь имеется 5 массивов. Четыре внутренних массива (или вложенных массива) содержатся в одном большом массиве, spreadsheet. Если потребуется узнать значение на пересечении второго столбца и третьей строки, то можно написать:
var col2 = spreadsheet[1];
alert(col2[2]);
// или
alert(spreadsheet[1][2]);
Оба фрагмента кода делают одно и то же, выводят значение "C2 ".
Существует несколько распространенных операций, которые выполняются с массивами. Первой является добавление элемента в конец массива. Вернемся к массиву students, который содержит в данный момент 4 элемента. Чтобы добавить новый элемент, надо просто задать значение для 5-го элемента:
var students = ['Sam', 'Joe', 'Sue', 'Beth'];
students[4] = 'Mike';
students[students.length] = 'Sarah';
students.push('Steve');
// теперь массив содержит 7 элементов: ['Sam', 'Joe', 'Sue', 'Beth', 'Mike', 'Sarah', 'Steve']
Здесь также существует несколько способов для выполнения этой задачи. Первый метод, students[4], используется редко, так как обычно неизвестно заранее в точности, сколько будет элементов. Поэтому применяется один из двух оставшихся методов. push является функцией, которая просто добавляет то, что получает, в конец массива, как и предыдущий метод, использующий свойство .length.
Не так часто, но иногда необходимо также удалить объект из массива. В этом случае задействуется функция splice, которая позволяет добавить или удалить любое количество элементов массива, но в данный момент мы собираемся использовать ее для удаления одного студента, Mike, который переехал в другой город:
var students = ['Sam', 'Joe', 'Sue', 'Beth', 'Mike', 'Sarah', 'Steve'];
students.splice(4, 1);
Splice в этом примере получает два аргумента: начальный индекс и число элементов для удаления. Так как Mike является пятым студентом, то его индекс будет 4. Будет удален только 1 студент, поэтому здесь используется 1. В результате имеем массив с удаленным Mike:
['Sam', 'Joe', 'Sue', 'Beth', 'Sarah', 'Steve'];
Чаще всего точно неизвестно, где в массиве находится элемент. К сожалению, единственным способом выяснить это является перебор всех элементов массива. Можно написать небольшой простой сценарий, который позволит легко добавлять или удалять студентов:
var students = ['Sam', 'Joe', 'Sue', 'Beth'];
function addStudent(name){
students.push(name);
}
function removeStudent(name){
for(var i=0; i<students.length; i++){
if(students[i].toLowerCase() == toLowerCase(name)){
students.splice(i, 1);
break;
}
}
}
Имя студента:
Добавить этого студента
Удалить этого студента
Студенты:
Единственным новым моментом здесь является слово break. break останавливает выполнение кода любого цикла, в котором находится: цикла for, цикла do или switch. Поэтому в данном случае, когда удаляемый студент найден, мы прерываем цикл for, так как выполнили свою задачу.
Часто бывает необходимо преобразовать массив в строку или строку в массив. Имеется две функции, которые могут легко это сделать: join и split. Функция join получает массив и преобразует его в строку с помощью разделителя, заданного в join. Функция split действует в обратном направлении и делает массив из строки, определяя новый элемент c помощью разделителя, заданного в split:
var myString = 'apples are good for your health';
var myArray = myString.split('a');
// строка myString разбивается на элементы на каждом найденном символе 'a'.
alert(myArray.join(', '));
// преобразуем myArray снова в строку с помощью запятой,
// так что можно видеть каждый элемент
alert(myArray.join('a'));
// теперь преобразуем myArray снова в строку с помощью символа 'a',
// так что снова получается исходная строка
Еще две полезные функции для работы с массивами - pop и shift. Функция pop удаляет последний элемент из массива и возвращает его. Функция shift удаляет первый элемент из массива и возвращает его.
var students = ['Sam', 'Joe', 'Sue', 'Beth'];
while(students.length>0){
alert(students.pop());
}
К сожалению, при этом массив был уничтожен: он теперь пуст. Иногда именно это и надо сделать. Если требуется просто очистить массив, то проще всего задать его длину (length) равной 0:
students.length = 0
Теперь массив пуст. Даже если снова задать длину массива больше 0, все данные в массиве уже будут уничтожены.
Все использованные до сих пор массивы называются "индексными массивами", так как каждый элемент массива имеет индекс, который необходимо использовать для доступа к элементу. Существуют также "ассоциативные массивы", в которых каждый элемент массива ассоциирован с именем в противоположность индексу:
var grades = [];
grades['Sam'] = 90;
grades['Joe'] = 85;
grades['Sue'] = 94;
grades['Beth'] = 82;
Ассоциативные массивы действуют немного иначе, чем индексные. Прежде всего, длина массива в этом примере будет равна 0. Как же узнать, какие элементы находятся в массиве? Единственный способ сделать это - использовать цикл "for-in ":
for(student in grades){
alert("Оценка " + student + "будет: " + grades[student]);
}
Синтаксис цикла for-in следующий: " for(item in object){ ". Цикл пройдет через все элементы в объекте, и элемент будет именем элемента. В данном случае элементом является "Sam", затем " Joe", " Sue" и " Beth".
Последнее замечание о массивах состоит в том, что в действительности можно объединять ассоциативные и индексные массивы, хотя это обычно не рекомендуется, так как может вызывать некоторые проблемы. При правильном использовании, однако, можно с успехом это применять.
var students = ['Sam', 'Joe', 'Sue', 'Beth'];
students['Sam'] = 90;
students['Joe'] = 85;
students['Sue'] = 94;
students['Beth'] = 82;
alert('Всего имеется '+(students.length)+' студентов: '+students.join(', '));
for(var i=0; i<students.length; i++){
alert("Оценка " +students[i]+"будет: "+students[students[i]]);
}
Хотя это может показаться немного сложным, здесь нет ничего такого, о чем не говорилось в этой лекции.
Теперь читатель должен достаточно хорошо понимать основные типы данных JavaScript: строки, числа и массивы. В следующей лекции будет рассмотрена Объектная модель документа, или DOM (Document Object Model).
(обратно) (обратно) (обратно)Лекция 6. Объектная модель документа
Объектная модель документа или коротко DOM (Document Object Model). Функции document.forms, document.getElementById, document.createElement и некоторые другие, которые встроены в объект document.Эта лекция посвящена Объектной модели документа, или коротко DOM (Document Object Model). DOM является просто специальным термином для "всего на Web-странице". Объектная модель включает каждую таблицу, изображение, ссылку, поле формы и т.д. на Web-странице. JavaScript позволяет манипулировать с любым элементом на странице в реальном времени. Можно скрывать или полностью удалять любой элемент, добавлять элементы, копировать их, изменять такие свойства, как цвет, ширина, высота, и т.д., а при некотором воображении можно даже реализовать функции перетаскивания, анимации и почти все остальное, что можно придумать.
Прежде всего, необходимо понять, что с точки зрения браузера страница HTML является точно тем же, что и документ XML. Если читатель имеет опыт работы с XML, то сможет понять обработку DOM достаточно легко. Но в любом случае это в действительности не сложно. Существует прекрасный справочник по адресу (), который подробно описывает каждый метод обработки DOM, но к концу этой лекции читатель в основном поймет, как это работает.
(обратно)Те, кто знает, что такое документ XML, могут пропустить этот раздел. Остальным необходимо его прочитать.
Будем надеяться, что читатель в какой-то степени знаком с HTML. Это то, из чего состоит (почти) каждая Web-страница. Каждое изображение, ссылка, таблица, поле формы и т.д. имеют свой собственный тег. Ниже приведен пример простой страницы HTML:
<HTML>
<BODY>
<table border="0" cellspacing="2" cellpadding="5">
<tr>
<td colspan="2"><img src="Greetings.jpg" id="greetingImg" /></td>
</tr>
<tr>
<td>
Добро пожаловать на мою страницу HTML!
<br />
<a href="somelink.html" id="myLink" >Щелкните здесь!</a>
</td>
<td><img src="hello.jpg" id="helloImg" /></td>
</tr>
</table>
</BODY>
</HTML>
Это просто обычная страница HTML. Возможно, вы не знаете о том, что это также пример документа XML. Здесь нас интересует то, что каждый элемент является потомком и/или предком другого элемента. Первое изображение находится внутри тега TD, который находится внутри тегов TR, TABLE, BODY и HTML. Двигаясь в другом направлении, можно видеть, что тег BODY имеет одного "потомка" - тег TABLE. Этот тег TABLE имеет в качестве потомков два тега TR и т.д. По сути именно так мы перемещаемся в документе XML или HTML DOM - двигаясь от потомка к предку или от предка к потомку.
Изображение может помочь лучше понять отношения предок-потомок в этом коде.
Блок-схема документа
Необходимо также отметить атрибуты в некоторых из этих тегов. Например, тег TABLE (<table border="0" cellspacing="2" cellpadding="5">) имеет 3 заданых атрибута: border, cellspacing и cellpadding. При изменении DOM часто бывает необходимо изменить эти атрибуты. Можно, например, изменить атрибут SRC тега IMG, чтобы изменить выводимое изображение. Это часто делают, например, для создания эффекта изменения изображения, на которое направлен указатель (rollover).
(обратно)Теперь, имея общее представление о компоновке страницы, можно начинать ее модификацию. Начнем с создания простого эффекта изменения изображения:
<img src="button_off.gif"
onmouseover="this.src='button_over.gif';"
onmousedown="this.src='button_down.gif';"
onmouseout ="this.src='button_off.gif';"
onmouseup ="this.src='button_over.gif';">
В этом коде присутствуют 4 события изображения: onmouseover, onmousedown, onmouseout и onmouseup. Каждое из этих событий имеет присоединенный простой фрагмент кода JavaScript, который изменяет атрибут src изображения. Создавая три разных изображения, можно легко и быстро создать изображение с тремя сменяющими друг друга состояниями.
(обратно)Одной из задач, которая становится все более распространенной в современных приложениях JavaScript, является возможность добавления или удаления элементов страницы. Предположим, что имеется форма, которая позволяет послать кому-нибудь ссылку. Обычно используется одно поле ввода для адреса e-mail и второе - для имени получателя. Если требуется послать ссылку нескольким адресатам, то либо придется посылать форму несколько раз, либо можно было бы разместить на странице более одного набора полей имя/e-mail. Но в этом случае мы все еще ограничены заданным числом контактов. Если имеется пространство для 5 контактов и необходимо послать ссылку 20 людям, то форму придется заполнять 4 раза.
JavaScript позволяет обойти эту проблему, делая возможным динамическое дополнение и удаление содержимого страницы:
1 var inputs = 0;
2 function addContact(){
3 var table = document.getElementById('contacts');
4
5 var tr = document.createElement('TR');
6 var td1 = document.createElement('TD');
7 var td2 = document.createElement('TD');
8 var td3 = document.createElement('TD');
9 var inp1 = document.createElement('INPUT');
10 var inp2 = document.createElement('INPUT');
11
12 if(inputs>0){
13 var img = document.createElement('IMG');
14 img.setAttribute('src', 'delete.gif');
15 img.onclick = function(){
16 removeContact(tr);
17 }
18 td1.appendChild(img);
19 }
20
21 inp1.setAttribute("Name", "Name" +inputs);
22 inp2.setAttribute("Email", "Email"+inputs);
23
24 table.appendChild(tr);
25 tr.appendChild(td1);
26 tr.appendChild(td2);
27 tr.appendChild(td3);
28 td2.appendChild(inp1);
29 td3.appendChild(inp2);
30
31 inputs++;
32 }
33 function removeContact(tr){
34 tr.parentNode.removeChild(tr);
35 }
36 <table>
37 <tbody id="contacts">
38 <tr>
39 <td colspan="3"><a href="javascript:addContact();">Добавьте контакт</a></td>
40 </tr>
41 <tr>
42 <td></td>
43 <td>Name </td>
44 <td>Email</td>
45 </tr>
46 </tbody>
47 </table>
Демонстрация
Добавьте контакт
Name Email
Возможно вам не приходилось ранее использовать тег TBODY. Многие браузеры автоматически добавляют этот тег в DOM, не сообщая об этом. Если необходимо изменить содержимое таблицы, то в действительности необходимо изменить содержимое TBODY. Во избежание возможных недоразумений мы просто добавили тег TBODY, чтобы каждый мог бы его видеть. Все это может показаться достаточно сложным, но здесь очень мало нового материала.
Прежде всего здесь имеется новая функция: document.createElement. Функция createElement создает задаваемый аргументом элемент. Можно видеть, что в строках сценария с 5 по 10 создается несколько элементов. В действительности создается новая строка TR, которая вставляется в таблицу в строках 37-46. В результате новая строка TR будет выглядеть следующим образом:
<tr>
<td>
<img src="delete.gif">
</td>
<td>
<input name="Name1">
</td>
<td>
<input name="Email1">
</td>
</tr>
Другими словами, мы создали 7 элементов: 1 TR, 3 TD, 2 INPUT и 1 IMG. Тег IMG будет использоваться как изображение кнопки "Удалить ". Так как пользователь должен всегда видеть по крайней мере 1 строку ввода, то первую строку удалить невозможно. Поэтому в 12 строке сценария проверяется, что создается первая строка. Если строка не первая, то добавляется изображение.
После создания всех этих элементов остается в действительности поместить их в документ. Каждый элемент на странице имеет встроенную функцию appendChild, которую можно использовать для добавления к этому элементу потомка. Когда добавляется потомок, то он добавляется как последний элемент, поэтому если таблица уже имеет в качестве потомков 10 тегов TR и добавляется еще один, то он будет добавлен как 11-ый тег TR. Мы начинаем с получения ссылки на таблицу (строка 3). Затем мы добавляем TR к этой таблице (строка 24) и добавляем затем 3 TD (строки 25-27). Второй и третий TD содержат поле ввода, поэтому мы добавляем эти поля ввода (28-29).
Вот и все! Теперь у нас есть новый элемент TR, и он находится на странице. Осталось пояснить еще пару моментов. Чтобы форма была обработана правильно, все поля ввода должны иметь различные имена. Поэтому мы задаем имя двух полей ввода на основе счетчика (21-22), а затем увеличиваем счетчик (31). Это делается с помощью еще одной новой функции setAttribute, которая имеет два параметра: имя атрибута и значение атрибута. Для нее существует дополнительная функция getAttribute, которая имеет только один аргумент: имя атрибута, значение которого надо получить.
element.setAttribute("name", "elementName")
по сути то же самое, что
element.name="elementName"
Однако задание атрибута непосредственно, как в предыдущем примере, может иногда вызывать некоторые проблемы для различных браузеров или для некоторых специфических атрибутов. Поэтому хотя любой метод обычно будет работать, предпочтительным является первый метод, использующий setAttribute.
Необходимо также позаботиться о кнопке удаления. Мы уже знаем, что кнопка удаления для первой строки полей не создается, но необходимо заставить ее работать для всех остальных. Это делается в строках кода 15-16. Здесь к изображению добавлена функция onclick, которая вызывает функцию removeContact, передавая элемент TR в качестве единственного аргумента.
Взглянув на функцию removeContact, можно видеть, что сначала происходит обращение tr.parentNode к функции parentNode, которая является еще одной функцией для работы с DOM. Она просто возвращает порождающий элемент для текущего элемента. Если посмотреть на изображенное ранее дерево документа, то видно, что parentNode вернет элемент непосредственно над элементом, на котором он вызван. Поэтому, если вызвать parentNode на одиночном элементе A в этом дереве, то будет получена ссылка на элемент TD над ним.
Поэтому tr.parentNode возвращает ссылку на элемент TABLE над TR. Затем вызывается функция removeChild на этом элементе TABLE, которая просто удаляет у предка указанного потомка.
Взглянув еще раз на строку 34, можно теперь увидеть, что она просто говорит: "Удалить элемент TR у его предка " или еще проще "Удалить элемент TR".
(обратно)Ко всем потомкам элемента можно обратиться с помощью атрибута childNodes, который возвращает массив, содержащий все узлы потомки текущего элемента. Можно также использовать атрибуты firstChild и lastChild на любом элементе, чтобы получить ссылки на первый или на последний элемент.
Чтобы увидеть, как это работает, давайте напишем сценарий для раскраски чередующихся строк TR в таблице:
function setColors(tbody, color1, color2){
var colors = [color1, color2];
var counter = 0;
var tr = tbody.firstChild;
while(tr){
tr.style.backgroundColor = colors[counter++ % 2];
tr = tr.nextSibling;
}
}
Демонстрация
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Color #1: Color #2: Раскрасьте таблицу
При рассмотрении этого небольшого фрагмента кода мало что нужно пояснять в том, как можно получить этот интересный небольшой эффект. Код начинается с получения ссылки на первый элемент TR в таблице с помощью метода firstChild. Затем каждый TR раскрашивается по очереди двумя разными цветами, используя tr.style. Цвет фона задается одним из двух цветов из массива colors. Если counter имеет четное значение, то цвет фона задается как color1. Иначе он задается как color2. Это реализуется с помощью оператора деления по модулю (%). Для тех, кто забыл, напомним, что операция вычисляет остаток при делении. 5/2 = 2 с остатком 1. Поэтому 5 % 2 (5 по модулю 2) = 1.
Здесь не будет обсуждаться в данный момент изменение стилей, но достаточно сказать, что element.style предоставляет доступ ко всему, что можно задать с помощью таблицы стилей. Если нужно, например, задать стиль элемента, то можно прочитать/записать весь стиль с помощью element.style.cssText.
После задания цвета фона берется следующий элемент TR в таблице. Это делается с помощью функции nextSibling, которая возвращает следующий элемент в DOM, с тем же предком, что и текущий элемент. Если посмотреть на тег TABLE, то все его потомки являются элементами TR, поэтому nextSibling будет в цикле перебирать все элементы TR. Если отыскивается элемент TR с потомками, состоящими из элементов TD, то nextSibling будет циклически перебирать все элементы TD. Когда элементов TR больше не останется, цикл автоматически закончится, так как TR будет неопределенным, что в JavaScript оценивается как false.
С целью рассмотрения оператора childNodes и функции getElementsByTagName перепишем приведенный пример немного по-другому:
function setColors(tbody, color1, color2){
var colors = [color1, color2];
for(var i=0; i<tbody.childNodes.length; i++){
tbody.childNodes[i].style.backgroundColor = colors[i % 2];
}
}
function setColors(tbody, color1, color2){
var colors = [color1, color2];
var trs = tbody.getElementsByTagName('TR');
for(var i=0; i<trs.length; i++){
trs[i].style.backgroundColor = colors[i % 2];
}
}
Обе эти функции делают то же самое, что и первая функция setColors, но написано это немного по-другому. Первая функция использует атрибут childNodes. Как ранее говорилось, childNodes содержит массив, элементами которого являются потомки. Поэтому мы циклически перебираем tbody.childNodes и изменяем цвет каждого потомка, которые все должны быть элементами TR.
Другая функция использует новую функцию getElementsByTagName, которая выдает массив всех элементов с указанным именем тега. Так как нам требуются все элементы TR, то мы просто передаем в функцию 'TR' и получаем список всех элементов TR в таблице. После этого код почти идентичен предыдущей функции.
(обратно)Работа с текстом немного отличается от работы с другими элементами DOM. Первое: каждый фрагмент текста на странице помещен в невидимый узел #TEXT. Поэтому следующий код HTML
<div id="ourTest">this is <a href="link.html">a link</a> and an image: <img src="img.jpg"></div>
имеет четыре корневых элемента: текстовый узел со значением "this is ", элемент A, еще один текстовый узел со значением " and an image: " и, наконец, элемент IMG. Элемент A имеет конечный текстовый узел в качестве потомка со значением " a link ". Когда необходимо изменить текст, то прежде всего необходимо получить этот "невидимый" узел. Если мы хотим изменить текст " and an image: ", то необходимо написать:
document.getElementById('ourTest').childNodes[2].nodeValue = 'our new text';
document.getElementById('ourTest') дает нам тег div. childNodes[2] дает узел текста " and an image: " и наконец nodeValue изменяет значение этого узла текста.
Что, если требуется добавить к этому еще текст, но не в конце, а перед " a link "?
var newText = document.createTextNode('our new text');
var ourDiv = document.getElementById('ourTest');
ourDiv.insertBefore(newText, ourDiv.childNodes[1]);
Первая строка показывает, как создать текст с помощью document.createTextNode. Это аналогично функции использованной ранее функции document.createElement. Третья строка содержит еще одну новую функцию insertBefore, которая аналогична appendChild, за исключением того, что имеет два аргумента: добавляемый элемент и существующий элемент, перед которым надо сделать вставку. Так как мы хотим добавить новый текст перед элементом A и знаем, что элемент A является вторым элементом в div, то мы используем ourDiv.childNodes[1] в качестве второго аргумента для insertBefore.
По большей части это все манипуляции с DOM. Если требуется создать, например, поле с изменяемым размером, то для изменения ширины и высоты поля будут использоваться те же функции мыши и функции getAttribute и setAttribute. Очень похожим образом, если изменять верхнюю и левую позицию стиля элемента, то можно перемещать элементы по странице, либо в ответ на ввод мыши (перетаскивание), либо по таймеру (анимация).
В качестве последнего замечания к этой лекции: одним из наиболее полезных средств при попытке протестировать или отладить код JavaScript, который изменяет DOM, является сценарий обхода дерева DOM. Проще говоря - это сценарий, который показывает каждый элемент и каждый атрибут объекта DOM. Описание этого кода выходит за рамки этой лекции, но он мог бы, например, показывать все атрибуты и объекты-потомки любого получаемого в качестве аргумента объекта.
Теперь можно включить свое воображение и экспериментировать, так как почти нет ничего такого, чего нельзя сделать со страницей HTML, когда вы знаете, как обращаться с DOM. В следующей лекции будут рассмотрены объекты окна и документа.
(обратно) (обратно) (обратно)Лекция 7. Объект документа и объект окна
Объект документа (document) и объект окна (window). Функции setTimeout и setInterval, window.opener, document.body и document.documentElement. Cвойства документа title, referer и cookies.В предыдущей лекции рассматривалось использование объекта документа. Были показаны функции document.forms, document.getElementById, document.createElement и некоторые другие, которые встроены в объект document. В этой лекции будут подробно рассмотрены объект документа (document) и объект окна (window), которые обладают многими полезными функциями.
Объект document представляет реальное содержимое страницы и поэтому имеет функции, которые помогают изменить саму страницу. Например, запись на странице происходит с помощью document.write, а обращение к форме - с помощью document.forms.
Как упоминалось в шестой лекции, каждый объект на странице является потомком или предком какого-то другого объекта. Все это представляет большое дерево. Объект window находится в вершине этого дерева, а все остальное содержится в нем. Объект window указывает на реальное окно браузера. Если требуется, например, открыть новое окно или изменить размер текущего, то для этого используются функции объекта window.
Объект window, кроме того, что находится в вершине DOM, является также глобальным объектом. Во второй лекции мы говорили о том, что любая переменная обладает глобальной или локальной областью действия. Если она имеет глобальную область действия, то она доступна в любом месте сценария JavaScript. Обладание глобальной областью действия означает также, что переменная соединена непосредственно с объектом window. Любой код JavaScript, который не находится внутри какой-то функции, находится в глобальном объекте window.
В связи с этим не требуется писать window при обращении к функциям или переменным объекта window, как в случае использования некоторых других функций, таких, как document.getElementById. alert() является примером функции, которую можно вызвать либо как window.alert(), либо просто alert().
Прежде всего объект window предоставляет доступ к информации об окне:
Свойство Описание window.location возвращает текущий URL окна window.opener Если окно было открыто другим окном (с помощью window.open), то возвращается ссылка на открывающее окно, иначе null MSIE: window.screenTop Другие: window.screenY Возвращает верхнюю позицию окна. Отметим, что эти значения в MSIE существенно отличаются от других браузеров. MSIE возвращает верхнюю позицию области содержимого (ниже адресной строки, кнопок, и т.д.). Другие браузеры возвращают верхнюю позицию реального окна (выше кнопки закрытия) MSIE: window.screenLeft Другие: window.screenX Возвращает левую позицию окна с такими же различиями, как и для screenTop и screenY
Положение окна на экране пользователя редко бывает необходимо, но два других свойства, location и opener, будут очень полезны. Свойство window.location выполняет две функции. Если изменить его с помощью JavaScript, например, window.location='', то браузер будет перенаправлен на эту страницу. Чтение window.location выдает адрес текущего документа. Зачем это нужно знать? Обычно адрес страницы не нужен, но может потребоваться строка запроса или анкер. Возьмем, например, следующий URL:
#someAnchor. Этот URL можно разбить на три части:
URL: Строка запроса: action=browse&id=5 Анкер: someAnchor
Так как window.location содержит всю эту информацию, то можно написать функцию, которая будет возвращать переменную querystring (строку запроса). Это аналогично request.querystring в ASP или $_GET в PHP, если вы знакомы с каким-либо из этих языков:
function queryString(val){
var q = unescape(location.search.substr(1)).split('&');
for(var i=0; i<q.length; i++){
var t=q[i].split('=');
if(t[0].toLowerCase()==val.toLowerCase()) return t[1];
}
return '';
}
Для предыдущего URL функция queryString('action') вернет 'browse'. Мы видим здесь новую функцию window.unescape. Функция unescape, а также ее дополнительная функция escape, используются в соединении с window.location. При передаче данных в строке запроса она должна быть экранирована (escaped), чтобы она не влияла на саму строку запроса. Если, например, среди данных имеется знак амперсанд (&), то необходимо его экранировать, чтобы можно было различить этот знак в данных и тот &, который разделяет два различных значения. Функция escape подготавливает посылаемые данные для использования в качестве значения querystring, поэтому она используется при задании window.location. Например:
window.location='/page.asp?name='+escape(SomeInputBox.value);
Функция unescape делает обратное и позволяет получить "нормальный" текст из window.location.
Вернемся к свойствам window, где имеется свойство opener. Это свойство используется в соединении с обычно используемой функцией window.open, которая позволяет открывать новое окно браузера и, для некоторых свойств управлять его выводом. Блокировщики всплывающих окон очень часто будут препятствовать открытию окна с помощью window.open, если в этот процесс не вовлечен щелчок мышью. Поэтому, если в коде имеется вызов window.open и при этом пользователь не щелкает на ссылке или чем-то подобном, то скорее всего это не будет работать.
Функция window.open получает до 3 аргументов: URL окна, которое надо открыть, имя окна и свойства окна.
var newWindow=window.open('', 'newWindow', 'width=200,height=200');
newWindow.document.write('Это окно будет закрыто через 2 секунды');
setTimeout(function(){ newWindow.close(); }, 2000);
Третий аргумент window.open получает строку аргументов. Обычно используются следующие:
[x]. width, height - задают размеры окна;
[x]. left, top - задают положение окна на экране;
[x]. location, menubar, toolbar, status, titlebar, scrollbars - эти параметры выводят/скрывают свои соответствующие "панели" на окне. Задайте yes, чтобы вывести соответствующую "панель";
[x]. resizable - если задан как yes, то размер окна можно изменять.
Полное описание window.open можно увидеть в документации Mozilla.
Так как мы открываем пустое окно, то первый аргумент будет пустым. Для открытия страницы 'test.html' вызов выглядел бы следующим образом: window.open ('test.html', 'TestWindow', 'width=200,height=200').
В этом примере для объекта window, открываемого окна, задается переменная newWindow. В связи с этим для вывода содержимого в окне необходимо использовать newWindow.document.write.
Функция window.open также имеет свою противоположность, функцию window.close. Однако эта функция может успешно вызываться только на окнах, созданных JavaScript. Если попробовать закрыть окно, созданное не JavaScript, то возможны два варианта: либо появится сообщение, говорящее, что сценарий пытается закрыть окно, либо браузер просто это проигнорирует.
(обратно)Можно видеть, что в этом примере используется еще одна новая функция setTimeout. Функции setTimeout и setInterval применяются для выполнения кода после указанного интервала времени и обе получают два аргумента: функцию или строку кода и период ожидания в мс. 1 мс = 1/1000 секунды, поэтому для задания выполнения кода через 5 секунд необходимо определить в этом случае для второго аргумента значение 5000.
setTimeout выполнит код один раз после завершения заданного интервала времени. setInterval будет продолжать выполнять код после завершения каждого интервала. При заданном интервале 5000 setInterval будет выполнять код каждые 5 секунд.
Существуют еще две другие функции: clearTimeout и clearInterval, которые отменяют выполнение, через заданные интервалы. Однако для этого необходимо иметь ссылку на вызов setTimeout или setInterval, например:
var myTimeout = setTimeout("alert('Hi!');", 500);
clearTimeout(myTimeout);
Если не сохранить ссылку в переменной myTimeout, то не существует способа отменить заданное выполнение. Давайте посмотрим на пример этого в действии:
function createTimeout(text, time){
setTimeout("alert('"+text+"');", time);
}
var intervals = [];
function createInterval(text, time){
// сохраняет интервал в массиве intervals
intervals.push(setInterval("alert('"+text+"');", time));
}
function tut5(){
if(intervals.length==0) return;
// удаляет последний интервал выполнения в массиве intervals
clearInterval(intervals.pop());
}
Демонстрация в действии
Текст для вывода:
Время ожидания(в мс):
setTimeout
setInterval
clearInterval
Существует также функция clearTimeout, которая идентична по синтаксису clearInterval.
Важно отметить, что во время ожидания выполнения заданного кода функциями setTimeout или setInterval весь остальной код JavaScript продолжает выполняться. Когда функция setTimeout или setInterval будет готова, она выполнит заданный код, но только после того, как другой код закончит выполнение. Другими словами, setTimeout и setInterval никогда не прерывают для выполнения другой код.
(обратно)Как говорилось ранее, свойство окна 'opener' можно использовать для доступа к окну, которое открыло текущее окно, а также к любым свойствам, функциям и т.д. этого окна. Например:
<!--page1.html-->
<HTML>
<HEAD>
<script type="text/javascript">
window.open('page2.html', 'TestWindow', 'width=500,height=200,resizable=yes');
</script>
</HEAD>
</HTML>
<!--page2.html-->
<HTML>
<HEAD>
<script type="text/javascript">
document.write('URL окна предка будет : '+window.opener.location);
</script>
</HEAD>
</HTML>
Отметим, что это работает, только если URL открываемого окна находится на том же сервере, что и текущая страница. Если необходимо открыть, например, окно на , то мы не получим доступ к свойствам этого окна. Это поддерживается всеми основными браузерами по соображениям безопасности.
(обратно) (обратно)Одной из наиболее часто используемых функций в JavaScript является document.write. Можно сказать, что document.write получает строку и выводит ее на странице. Здесь необходимо только следить за одной вещью. Если страница полностью загрузилась и вызывается document.write, то вся страница будет очищена и на экране будет только результат работы document.write.
Мы уже видели различные свойства объекта document в действии. Например, document.forms возвращает массив всех форм на странице. Здесь также существует несколько свойств, подобных этому.
[x]. document.forms - массив, содержащий все формы на текущей странице;
[x]. document.images - массив, содержащий все изображения на текущей странице;
[x]. document.links - массив, содержащий все ссылки на текущей странице;
[x]. document.anchors - массив, содержащий все анкеры на текущей странице;
[x]. document.applets - массив, содержащий все апплеты на текущей странице;
[x]. document.styleSheets - массив, содержащий все таблицы стилей на текущей странице;
[x]. window.frames - массив, содержащий все фреймы на текущей странице.
Как мы видели в предыдущей лекции, почти все эти свойства можно продублировать с помощью document.getElementsByTagName. Чтобы получить все изображения на странице, можно воспользоваться, например, document.getElementsByTagName('IMG');. Существует три подобные функции:
[x]. document.getElementById - возвращает один элемент на основе его ID;
[x]. document.getElementsByName - возвращает массив элементов, определенных по имени. В отличие от ID многие элементы могут иметь на странице одинаковые имена;
[x]. document.getElementsByTagName - возвращает массив элементов, определенных по имени тега. Имя тега является просто именем тега HTML, т.е. 'DIV', 'IMG', 'TABLE', 'A 'и т.д.
Существует еще одно свойство, document.all, которое выдает массив всех элементов на странице. Однако document.all поддерживается не всеми браузерами, поэтому предполагается, что вместо этого используется функция document.getElementsByTagName('*'), которая также вернет все элементы на странице.
document.body ссылается на тег <BODY>, где должен предположительно находится весь контент. Весь DOM сайта вложен в document.body. Кроме этого, необходимо использовать document.body для определения, что документ был прокручен, и для получения размера окна. К сожалению, это является одной из наиболее сложных вещей, применяемых сегодня в Web-браузерах.
Существует концепция, называемая "Тип документа", которая задает для Web-браузера определенный набор правил. Изменение типа документа заставляет некоторые свойства переместиться из document.body в document.documentElement, но только некоторые свойства и только для некоторых браузеров.
Проще говоря, это является полным беспорядком, поэтому две следующие функции (будем надеятся) выдадут позицию прокручивания и размеры окна независимо от браузера.
function getScrollPos(){
if (window.pageYOffset){
return {y:window.pageYOffset, x:window.pageXOffset};
}
if(document.documentElement && document.documentElement.scrollTop){
return {y:document.documentElement.scrollTop, x:document.documentElement.scrollLeft};
}
if(document.body){
return {y:document.body.scrollTop, x:document.body.scrollLeft};
}
return {x:0, y:0};
}
function getWindowDims(){
if (window.innerWidth){
return {w:window.innerWidth, h:window.innerHeight};
}
if (document.documentElement && document.documentElement.clientWidth){
return {w:document.documentElement.clientWidth, h:document.documentElement.cliendHeight};
}
if (document.body){
return {w:document.body.clientWidth, h:document.body.clientHeight};
}
return {w:0, h:0}
}
(обратно)
Тремя последними свойствами документа являются title, referer и cookies. document.title и document.referer достаточно понятны. document.title содержит заголовок страницы. Его можно прочитать и изменить после полной загрузки документа. document.referer содержит просто URL страницы, которая привела пользователя на текущую страницу.
Поэтому, если вы щелкнули на ссылке, чтобы попасть на эту страницу, то document.referer будет содержать URL страницы, на которой находится ссылка. Если вы пришли на эту страницу сразу, задавая ее в поле адреса браузера, то document.referer будет неопределен.
(обратно)Последняя тема этой лекции, переменная cookie, отличается от всего остального в JavaScript. cookie является строкой текста, которую можно сохранить с одной страницы на другой, если вы находитесь на одном и том же сервере. В отличие от других переменных в JavaScript, cookie не стирается при перезагрузке страницы. cookie стираются только через определенный период времени или когда все cookie удаляются в браузере.
cookie читают и записывают через document.cookie. В отличие от других свойств изменение document.cookie в действительности не перезаписывает, а добавляет к cookie. Поэтому, если требуется задать 5 cookie, то каждое из них задается с помощью document.cookie= "...";. Формат cookie имеет свои особенности, поэтому мы рассмотрим несколько функций для выполнения этой задачи:
function writeCookie(name, value, days){
if(days){
(time = new Date()).setTime(new Date().getTime()+days*24*60*60*1000);
var exp = '; expires='+time.toGMTString();
}else{
var exp='';
}
document.cookie=name+"="+value+exp+"; path=/";
}
function readCookie(name){
var cookies = document.cookie.split(';');
for(var i=0; i<cookies.length; i++){
var cookie=cookies[i].replace(/^\s+/, '');
if (cookie.indexOf(name+'=')==0) return cookie.substring(name.length+1);
}
return null;
}
function eraseCookie(name){
writeCookie(name, "", -1);
}
Три эти функции выполняют запись, чтение и стирание cookie на текущей странице. Их можно протестировать с помощью следующего кода:
function addToCounter(){
var counter = readCookie('myCounter');
if(counter){
counter = parseInt(counter);
} else {
counter = 0;
}
writeCookie('myCounter', counter+1, 1);
}
function showCounter(){
alert(readCookie('myCounter'));
}
Если увеличить счетчик cookie несколько раз, обновить страницу, а затем проверить счетчик, то можно увидеть, что он остался таким же, как был до обновления страницы. Эти cookie будут сохранятся до тех пор, пока они не будут удалены из браузера или пока не пройдет 24 часа - cookie заданы на период одни сутки.
Это почти все об объектах окна и документа. В следующей лекции речь пойдет об объектно-ориентированном коде.
(обратно) (обратно) (обратно)Лекция 8. Основы объектно-ориентированного программирования
Основы объектно-ориентированного программирования (ООП) в JavaScript. new Object и объектные литералы. Прототипирование. Переменные Private, Public и Static.Почти каждый современный язык программирования имеет некоторый метод записи объектно-ориентированного (ОО) кода. Если вы знакомы с такими языками, как C++, Java, VB, php или подобными, то должны быть знакомы и со структурой Class этих языков.
Классы в этих языках позволяют быстро создавать объекты с одинаковыми свойствами и методами, не требуя при этом заново определять все эти свойства и методы. В терминах структур мы имеем классы, а внутри этих классов - функции и переменные, а внутри каждой из этих функций - дополнительные переменные. Каждая функция в классе идеально работает с переменными и другими функциями, внутренними для этого класса.
Структура Class и объекты в целом хорошо работают потому, что они действуют как реальные объекты. Например, мы можем иметь класс Телевизор. Так как все телевизоры в целом работают одинаково, то нет необходимости переопределять множество атрибутов телевизора, чтобы сделать еще один новый. Этот класс будет определять методы и свойства телевизора. Мы будем иметь такие свойства, как марка, размер экрана, и т.д., и методы, такие, как включить/выключить, сменить канал, и т.д.
JavaScript слегка отличается от стандартной объектно-ориентированной структуры Class. Вместо использования классов для создания объектов, каждая функция в JavaScript может эффективно действовать как класс. Мы используем концепцию вложенных функций, называемую прототипированием (Prototyping), для выполнения таких же вещей, как и языки со структурами Class. Если вы знакомы с ОО-языком на основе классов, то прототипирование может показаться сначала непривычной концепцией, но она предлагает большие возможности и часто является значительно более гибкой с точки зрения программирования, чем другие методы.
Для начала необходимо объяснить, как объекты действуют в JavaScript. Объекты позволяют определить переменную и задать затем для этой переменной любое число свойств. Чтобы понять это, давайте посмотрим на простой пример:
var myObj = new Object;
myObj.a = 5;
myObj['b'] = 10;
myObj.c = 20;
myObj.getTotal = function(){
alert(this.a+this.b+this.c);
};
// или
var myObj = {a:5, b:10, c:20,
getTotal:function() { alert(this.a+this.b+this.c); }};
Оба эти фрагмента кода создают одну и ту же переменную myObj. Первый пример использует синтаксис new Object(), а затем определяет все свойства одно за другим. Второй фрагмент кода является сокращенной нотацией, которая делает в точности то же самое. Мы имеем теперь переменную myObj. myObj содержит три переменные для целых чисел: a, b и c. Для доступа к любой из них мы просто используем myObj.a или myObj['a']. Можно видеть, что myObj имеет также в качестве свойства функцию getTotal. Мы обращаемся к getTotal таким же образом, как и к свойствам a, b и c: myObj.getTotal(). Функция getTotal() обращается к переменным в переменной myObj с помощью this. При выполнении кода внутри функции в объекте this ссылается на объект. В данном случае this ссылается на сам объект myObj.
Как можно видеть, объекты в JavaScript являются чрезвычайно полезными. К сожалению, часто приходится объявлять слишком много информации каждый раз, когда мы хотим создать объект. Например, давайте создадим объект Animal:
var myAnimal = {
name: 'felix',
species: 'cat',
talk: function(){ alert('Meow!'); },
callOver: function(){ alert(this.name+' ignores you'); },
pet: function(){ alert('Purr!'); }
}
Мы имеем переменную myAnimal, которая представляет кота (cat) с именем Феликс (felix). Однако, если потребуется создать другого кота, нам понадобиться ввести все это снова. Здесь на помощь приходит объектно-ориентированный подход. Вместо перепечатки всякий раз всего объекта можно определить функцию, которая создает для нас аналогичный объект:
function Cat(name){
this.name = name;
this.species = 'Cat';
this.talk = function(){ alert('Meow!'); }
this.callOver = function(){ alert(this.name+' ignores you'); },
this.pet = function(){ alert('Purr!'); }
}
var felix = new Cat('Felix');
var sam = new Cat('Sam');
var patty = new Cat('Patty');
felix.pet(); // выводит 'Purr!'
sam.callOver(); // выводит 'Sam ignores you'. Просто, как кот!
alert(patty.species); // выводит 'Cat'
В этом примере создана одна функция Cat, а затем создаются три новых кота с помощью этой функции: Felix, Sam и Patty. Каждый из этих котов имеет одинаковые функции: talk, callOver и pet, и каждая из них имеет свойство species, заданное как 'cat'. И подобно всем котам, они в равной степени своенравны.
Обычно говорят, что felix, sam и patty являются экземплярами одного объекта: Cat. Код самой функции Cat называется конструктором. Мы передаем ей переменную name и используем ее для задания this.name. К сожалению, при объявлении каждой функции Cat в конструкторе в действительности создается новая копия каждой функции всякий раз при создании нового Cat. Так как функции talk, callOver и pet являются идентичными, то нам в действительности требуется только одна копия каждой функции. Здесь на помощь приходит прототипирование.
(обратно)Можно переписать функцию Cat таким образом, чтобы каждая функция объявлялась только один раз:
function Cat(name){
this.name = name;
}
Cat.prototype.species = 'Cat';
Cat.prototype.talk = function(){ alert('Meow!'); };
Cat.prototype.callOver = function(){ alert(this.name+' ignores you'); };
Cat.prototype.pet = function(){ alert('Purr!'); };
Синтаксис этого метода немного отличается от предыдущего. Вместо объявления всех свойств и методов внутри функции Cat, они теперь объявляются с помощью Cat.prototype. Это может показаться более сложным, но предлагает много преимуществ. Предположим, например, что надо добавить новую функцию sleep для каждого имеющегося cat. Это можно сделать двумя способами. Первый: можно добавить функцию sleep в felix, sam и patty. Это, однако, не только трудоемко, но также и неэффективно. Если бы имелось 500 cat, то потребовалось бы сначала отследить всех этих 500 котов, а затем добавить функцию каждому cat.
Однако с помощью прототипов можно добавить функцию sleep всем cat одновременно:
Cat.prototype.sleep = function(){ alert(this.name+' falls asleep'); };
Этот способ не только быстрее, но к тому же нам больше не требуется отслеживать каждого cat, чтобы добавить функцию sleep.
Существует более быстрый способ добавления прототипов. С помощью объектного литерала можно одновременно задать любое количество прототипов свойств или методов.
function Cat(name){
this.name = name;
}
Cat.prototype = {
species: 'Cat',
talk: function(){ alert('Meow!'); },
callOver: function(){ alert(this.name+' ignores you'); },
pet: function(){ alert('Pet!'); }
}
Важно отметить, что с помощью этого метода можно задать свойства функции только один раз. После этого необходимо использовать предыдущий метод.
Object.prototype.method = function(){ ... }.
Если попробовать теперь добавить в cat метод sleep с помощью этого метода:
Cat.prototype = {
sleep: function(){ alert(this.name+' falls asleep'); }
}
то предыдущие прототипы, species, talk, callOver и pet, будут все удалены. Единственным имеющимся прототипом для cat будет sleep.
Прототипы можно также использовать для расширения встроенных объектов JavaScript. Можно реализовать, например, функцию String.prototype.reverse, которая будет возвращать любую созданную строку в обратном порядке:
String.prototype.reverse = function(){
var out = '';
for(var i=this.length-1; i>=0; i--){
out+=this.substr(i, 1);
}
return out;
}
alert('asdf'.reverse());
Это может быть очень полезным инструментом при правильном использовании. Можно реализовать String.prototype.trim() для удаления из строки всех пробелов, Date.prototype.dayName - для получения названия дня недели из объекта Date и т.д. Однако настоятельно рекомендуется воздержаться от добавления каких-либо прототипов в Array или Object, так как в этом случае циклы for-in для двух этих типов данных будут работать неправильно. Рассмотрим следующий пример:
var myArray = [1, 2, 3];
for(n in myArray) alert(n); // выводит 0, 1 и 2 - индексы массива.
Array.prototype.something = function(){ };
for(n in myArray) alert(n); // выводит 'something', 0, 1 и 2.
Как можно видеть, здесь выполнено прототипирование Array и добавлена функция something. Однако теперь эта функция something видна как элемент массива, результат, который определенно не ожидался и не требовался. То же самое происходит с объектами и объектными литералами, если выполнить прототипирование Object. Если можно быть абсолютно уверенным, что цикл for-in никогда не будет использоваться и никакой другой разработчик не будет использовать этот код JavaScript, то можно применять прототипирование для Array или Object, но надо помнить о связанных с этим проблемах. Однако существуют другие методы для достижения тех же результатов. Например, для расширения Array можно задействовать следующий метод без прототипирования:
Array.find = function(ary, element){
for(var i=0; i<ary.length; i++){
if(ary[i] == element){
return i;
}
}
return -1;
}
alert(Array.find(['a', 'b', 'c', 'd', 'e'], 'b')); // выводит 1
Как можно видеть, теперь необходимо печатать Array.find(ary, e) вместо ary.find(e), что пришлось бы делать, если прототипировать объект Array, но стоит напечатать эти несколько дополнительных символов, чтобы избежать потери существующей функциональности JavaScript.
(обратно)Способ определения переменных в объекте определяет, какие методы этого объекта можно использовать для доступа к этим переменным. В JavaScript при работе с объектно-ориентированным кодом используется пять уровней методов и свойств.
1 Скрытая (Private) - объявляется с помощью var variableName или function functionName внутри объекта. Могут быть доступны только другим скрытым или привилегированным функциям.
2 Открытая (Public) - объявляется с помощью this.variableName внутри объекта. Может изменяться любой функцией или методом.
3 Привилегированная (Privileged) - объявляется с помощью this.functionName = function(){ ... } внутри объекта. Доступна для любой функции или метода и может обращаться или изменять любую скрытую переменную.
4 Прототипированная (Prototype) - объявляется с помощью Class.prototype.variableName или Class.prototype.functionName. Объявленные таким образом функции будут иметь доступ к любой открытой или прототипированной функции. Попытки изменить созданную таким образом переменную будут вместо этого создавать новую открытую переменную на объекте, а прототипированная переменная будет недоступна.
5 Статическая (Static) - объявляется с помощью Class.variableName или Class.functionName. Может изменяться любой функцией или методом. Такой метод используется редко.
Чтобы понять различия между уровнями, давайте рассмотрим пример:
function Cat(name, color){
/*
Конструктор: при создании объекта выполняется любой находящийся здесь код
*/
Cat.cats++;
/* Скрытые переменные и функции доступны только скрытым или привилегированным
функциям. Отметим, что 'name' и 'color', переданные в Class, уже являются
скрытыми переменными.
*/
var age = 0;
var legs = 4;
function growOlder(){
age++;
}
/*
Открытые переменные доступны открыто или скрыто
*/
this.weight = 1;
this.length = 5;
/*
Привилегированные функции доступны открыто или скрыто.
Могут обращаться к скрытым переменным.
Невозможно изменить, можно только заменить открытой версией
*/
this.age = function(){
if(age==0) this.length+=20;
growOlder();
this.weight++;
}
}
/*
Прототипированные функции доступны открыто
*/
Cat.prototype = {
talk: function(){ alert('Meow!'); },
callOver: function(){ alert(this.name+' ignores you'); },
pet: function(){ alert('Pet!'); }
}
/*
Прототипированные переменные доступны открыто.
Нельзя перезаписать, только заменить открытой версией
*/
Cat.prototype.species = 'Cat';
/*
Статические переменные и функции доступны открыто
*/
Cat.cats = 0;
Мы видим, что существует несколько уровней доступа. Как было сказано ранее, все скрытые, привилегированные и открытые функции и переменные копируются всякий раз, когда создается новый экземпляр объекта. Обычно почти все, что нужно сделать, можно реализовать с помощью прототипированных и открытых переменных. В связи с этим обычно лучше избегать использования скрытых, привилегированных и статических переменных, если это не требуется специально.
(обратно) (обратно) (обратно)Лекция 9. Наследование и замыкание
Метод наследования. Полезные (и опасные) свойства замыкания.В восьмой лекции были рассмотрены основы объектно-ориентированного программирования в JavaScript. В данной лекции эта тема будет продолжена рассмотрением методов наследования, а также полезных (и опасных) свойств замыкания.
В предыдущей лекции была создана функция 'Cat' :
function Cat(name){
this.name = name;
}
Cat.prototype = {
species: 'Cat',
talk: function(){ alert('Meow!'); },
callOver: function(){ alert(this.name+' ignores you'); },
pet: function(){ alert('Pet!'); }
}
Теперь можно создать любое количество котов, но как быть, если мы захотим создать объект другого типа, например, собаку? В этом случае понадобится создать совершенно новую функцию, со своими собственными прототипами. Если два объекта используют одни и те же функции (например, можно было бы добавить функции sleep (спать), eat (есть), и play (играть)), то в результате мы бы имели чрезмерное дублирование кода. Решением является концепция наследования.
По сути наследование позволяет определить объекты "предки" и "потомки". Потомок наследует все свойства своего предка. Можно было создать, например, функцию Animal, Pet или Mammal. Обе функции Cat и Dog обладали бы многими свойствами функции предка Animal, и нам пришлось бы писать этот код один раз.
Проблема в том, что JavaScript не имеет в действительности встроенного механизма наследования, поэтому эту функциональность необходимо создавать самостоятельно. Для этого существует несколько различных способов. Один из них состоит в использовании функции call. Эта функция позволяет вызывать одну функцию из контекста другой, т.е. мы можем определить, как действует ключевое слово this. С помощью call можно написать класс Animal (Животное), а затем вызвать его из класса Cat или Dog.
function Animal(name){
this.name = name;
this.species = 'Animal';
this.sleep = function(){ alert(this.name+' спит: Хрррр'); }
}
function Cat(name){
Animal.call(this, name);
this.talk = function(){ alert('Мяу!'); }
}
function Dog(name){
Animal.call(this, name);
this.talk = function(){ alert('Гав!'); }
}
var sam = new Cat('Sam');
var joe = new Dog('Joe');
sam.sleep(); // Sam спит: Хрррр
joe.sleep(); // Joe спит: Хрррр
sam.talk(); // Мяу!
joe.talk(); // Гав!
Хотя это работает, мы немного ограничены в своих возможностях. Например, прототипирование не действует при использовании этого метода: все прототипы, заданные на Animal, не будут переноситься в функции Cat или Dog. Как мы знаем из предыдущей лекции, определенные внутренне с помощью "this." функции создают новый экземпляр всякий раз при создании новой копии предка. В этом случае всякий раз при создании функции Animal, Cat или Dog появляется новая копия функций species и sleep. Как можно догадаться, это не самый эффективный способ.
Лучшим подходом является прототипирование всего родительского класса на классе-потомке. Это предоставляет доступ ко всем свойствам и методам класса предка:
function Animal(name){
this.name = name;
}
Animal.prototype = {
species: 'Animal',
sleep : function(){ alert(this.name+' спит: Хрррр'); }
}
function Cat(name){
Animal.apply(this, arguments);
}
Cat.prototype = new Animal;
Cat.prototype.species = 'Cat';
Cat.prototype.talk = function(){ alert('Мяу!'); }
function Dog(name){
Animal.apply(this, arguments);
}
Dog.prototype = new Animal;
Dog.prototype.talk = function(){ alert('Гав!'); }
var sam = new Cat('Sam');
var joe = new Dog('Joe');
sam.sleep(); // Sam спит : Хрррр
joe.sleep(); // Joe спит: Хрррр
alert(sam.species); // Cat
alert(joe.species); // Animal - для Dog функция species не определена
Можно продолжить это дальше и создать отдельные функции для различных пород собак или кошек и т.д.
(обратно)Замыкание (сlosure) является одним из наиболее мощных средств JavaScript. Если воспользоваться простым объяснением, то замыкание связывает внутренние и внешние переменные в функции. Почему это так важно? Потому что замыкание позволяет эмулировать почти любое свойство любого языка программирования, даже если оно не существует в JavaScript. Это звучит немного непонятно, поэтому лучше начать с более простого примера:
function beginAdding(a){
a *= 5;
return function finishAdding(b){ alert(a+b); }
}
var add = beginAdding(10);
add(20); // 70
Можно видеть, что в приведенном коде переменной 'a' присваивается значение 10 и передается в функцию beginAdding, в то время как переменной 'b' присваивается значение 20 и передается в функцию finishAdding.
А что содержится в переменной 'add'? Она содержит функцию finishAdding с копией связанной с ней всей функции beginAdding. Копия переменной 'a' из beginAdding сохраняется в памяти для дальнейшего использования.
Теперь, имея представление о замыкании, прежде чем продолжать, необходимо обсудить проблему утечки памяти. Internet Explorer, в частности, подвержен достаточно неприятным утечкам памяти при использовании замыкания. Чтобы понять, почему необходимо знать о сборке мусора в Internet Explorer, посмотрим, как в этом браузере выполняется очистка памяти от ненужных объектов.
Internet Explorer имеет два отдельных сборщика мусора: один для JavaScript и другой для объектов DOM. При выгрузке страницы браузер просматривает и удаляет весь код JavaScript и все объекты DOM со страницы. Утечка происходит, когда имеются циклические ссылки из объекта DOM в JavaScript и снова на объект DOM или из JavaScript-->Dom-->Javascript. Internet Explorer запутывается и не удаляет объекты при циклической ссылке.
var someInput = document.getElementById('inputbox');
var someFunction = function(){
alert(someInput.value);
}
someInput.onclick = someFunction;
Здесь представлен бесконечный цикл в терминах замыканий. Объект DOM someInput вовлечен в замыкание с функцией someFunction и наоборот. Браузер не может определить, что удалить в первую очередь, поэтому в результате имеем утечку памяти.
Замыкания создают, часто даже не осознавая этого. Возьмем, например, простую функцию:
function Animal(name){
this.sleep = function(){ alert(name+' спит: Хрррр'); }
}
Можно не заметить этого, но переменная 'name' в функции sleep приходит из родительской функции Animal. Это создает замыкание.
Даже определение простейшей функции может создавать замыкание:
var x = 5;
var n = function(){
y=10;
return y;
}
Здесь также создается замыкание, хотя на первый взгляд это не так. Почему? Когда мы создаем функцию, она получает доступ ко всем переменным в своей текущей области действия, поэтому мы создаем новую ссылку на переменную х.
Теперь мы подошли к понятию области действия. Каждая функция имеет свою область действия, в которой она выполняется. Все области действия кода сохраняются во внутреннем стеке памяти. Когда создается замыкание, оно получает доступ к одной из этих областей действия. Если создается несколько замыканий в одной и той же области действия, то каждое замыкание будет в действительности указывать на одинаковые копии каждой переменной области действия. Например:
var x = 5;
var alertX1 = function(){ alert(x); }
x = 10;
var alertX2 = function(){ alert(x); }
alertX1();
alertX2();
Обе функции в этом случае выведут 10. Почему? Потому что они обе указывают на одну и ту же копию х.
Если изменить x в любой точке, то обе функции отразят это. Как это исправить? Проще всего изменить область действия замыкания:
function makeClosure(x){
return function(){ alert(x); }
}
var x = 5;
var alertX1 = makeClosure(x);
x = 10;
var alertX2 = makeClosure(x);
alertX1(); // 5
alertX2(); // 10
Это решает проблему. Если, однако, этот код создавал утечку памяти, то утечка будет существенно больше, чем в предыдущем примере; и также используется больший объем памяти. Оказывается, что в действительности имеется три различных области действия в этом простом примере:
Можно видеть, что переменная х копируется в каждую из двух областей действия. Это связано с тем, что x является строкой или числом. JavaScript всегда передает строки и числа по значению - то есть всегда делается копия переменной. С объектами все происходит иначе. Если х является функцией, массивом или базовым объектом, то в этом случае ссылка в двух наших функциях происходит на одну и ту же копию x и поэтому в результате выводимое сообщение будет одинаковым:
function makeClosure(x){
return function(){ alert(x.val); }
}
var x = {val:5};
var alertX1 = makeClosure(x);
x.val = 10;
var alertX2 = makeClosure(x);
alertX1(); // 10
alertX2(); // 10
Отличие состоит в том, что x теперь является объектом. Каждая из дополнительных областей действия указывает на одну и ту же копию x. При изменении значения x оно изменяется в каждой области действия, в которой х упоминается.
Как избежать утечки памяти при использовании замыканий? Необходимо избегать использования циклических ссылок. Наиболее распространенной причиной утечки памяти является присоединение событий, таких, как событие onclick, к объектам DOM.
Часто совершенно невинный с виду код будет создавать утечку и ее бывает крайне сложно обнаружить. К счастью, протестировать наличие утечки памяти достаточно легко. Если при каждом обновлении страницы используемая память увеличивается, то приложение имеет утечку. Отследить, где это происходит, совершенно другая задача, но по крайней мере теперь известно о наличии проблемы!
Следующая лекция будет посвящен основам приложений AJAX!
(обратно) (обратно) (обратно)Лекция 10. Основы приложений AJAX
Основы приложений AJAX. Создание объекта XMLHttp. Варианты получения данных: XML, JSON или обычный текст. Пример со списком контактов.В последнее время термин AJAX получил широкое распространение. По сути, это необычное название технологии, которая уже давно существует. Однако за последний год JavaScript в стиле AJAX стал очень популярным у многих разработчиков, и мы начинаем видеть, как с его помощью стали создавать различные интересные вещи. Google Maps и GMail являются двумя наиболее широко известными приложениями AJAX, но в последнее время и другие компании по всему миру начали использовать ее на своих сайтах.
AJAX означает "Asynchronous JavaScript and XML", т.е. Асинхронный JavaScript и XML. В действительности AJAX состоит из JavaScript, как и любое другое приложение, и соединения XMLHTTP с Web-сервером. Вот и все! Общая идея заключается в том, что можно извлекать с сервера данные просто по мере необходимости, не обновляя всю страницу.
Прежде всего AJAX почти всегда опирается на серверный язык, такой, как PHP или ASP. Когда пользователю необходимо получить новые данные, JavaScript запрашивает их, а сервер, вероятно, запросит базу данных и затем вернет данные. Эти данные можно вернуть в различной форме. Если они структурированы, то это будут обычно данные XML или JSON. Если это очень простые данные (такие, как получение описания какого-то объекта), то можно часто увидеть людей, которые просто записывают эти данные непосредственно в ответ AJAX.
При создании запроса AJAX прежде всего необходимо создать объект XMLHTTP. Netscape/Firefox, Opera и другие браузеры имеют этот объект встроенным. Internet Explorer использует ActiveXObject. Поэтому мы создадим одну функцию для работы со всеми этими браузерами:
if(typeof(XMLHttpRequest)!='undefined'){
var getXMLHttpObj = function(){ return new XMLHttpRequest(); }
} else {
var getXMLHttpObj = function(){
var activeXObjects = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'];
for(var i=0; i<activeXObjects.length; i++){
try{
return new ActiveXObject(activeXObjects[i]);
}catch(err){}
}
}
}
Любой браузер, который поддерживает объект XMLHttpRequest, будет использовать этот встроенный объект. Internet Explorer 6 и более ранние версии будут использовать объект ActiveX XMLHttp компании Microsoft. Существует много различных версий этого объекта, поэтому мы попробуем их все, начиная с самого нового.
Теперь, когда мы имеем объект XMLHttp, можно разместить запрос на сервере:
var oXml = getXMLHttpObj();
oXml.open('GET', 'getData.php', true);
oXml.onreadystatechange = processingFunction;
oXml.send();
function processingFunction(){
if(oXml.readyState!=4) return; // запрос не выполнен
// Результаты обрабатываются здесь. Подробнее дальше!
}
После создания объекта XMLHttp остается еще 4 дополнительных шага. Сначала определяются параметры соединения с помощью функции .open. Функция .open получает 3 аргумента: тип запроса, URL и флаг, который сообщает объекту, выполняться или нет асинхронно.
Первый аргумент, тип запроса, почти всегда будет GET или POST. Если извлекаются данные, то это будет обычно GET, а если отправляется форма с AJAX, то это часто будет POST.
Флаг асинхронности немного отличается почти от всего остального в JavaScript. Если этот флаг задан как false, то код продолжает выполняться, как и любой другой фрагмент кода, то есть он ожидает, пока объект XMLHttp завершит свою работу, прежде чем двигаться дальше. Однако, если этот флаг задан как true, то код продолжает делать то, что следует в коде после запроса. Когда состояние запроса изменяется, вызывается функция, которая определена в onreadystatechange.
В чем различие? Если флаг асинхронности задан как false, то браузер будет полностью заблокирован, пока обрабатывается запрос. Если запрошенные данные нужны в обязательном порядке для продолжения работы, то используйте это значение флага. Если флаг задан как true, то пользователь может продолжать использовать Web-страницу, но ничего не известно о том, когда вернется ответ на запрос. Может потребоваться 1/2 секунды или 1 минута. Все зависит от нагрузки на сервер и соединения конечного пользователя.
Когда все готово, посылается запрос. Затем мы ожидаем. Если запрос выполняется синхронно с функцией обработки, определенной с помощью onreadystatechange, то она будет вызываться несколько раз. На самом деле она вызывается всякий раз при изменении состояния запроса. Существуют различные состояния, такие, как отправка и загрузка данных, но нас интересует только завершение загрузки данных. Если readyState == 4, то запрос выполнен, поэтому в любом другом случае мы просто выходим из функции.
Теперь мы получили данные, но что это за данные?
(обратно)Существует три возможных варианта получения данных: XML, JSON или обычный текст. При извлечении данных из базы данных, скорее всего, будет использоваться XML или JSON. Ни один из этих вариантов не имеет явных преимуществ. XML - широко распространенный стандарт, и поэтому существует много приложений, которые работают с файлами XML. JSON является более новой идеей, но быстро становится популярным. Его обычно легче прочитать (для человека), и он требует немного меньшую полосу пропускания для пересылки.
Предположим, что создается приложение для управления контактами. Cервер может возвращать информацию о людях. Одни и те же данные можно выразить в форме XML или JSON:
XML:
<xml>
<contacts>
<person firstname="Joe" lastname="Smith" phone="555-1212" />
<person firstname="Sam" lastname="Stevens" phone="123-4567" />
</contacts>
</xml>
JSON:
{contacts:[
{"firstname":"Joe", "lastname":"Smith", "phone":"555-1212"},
{"firstname":"Sam", "lastname":"Stevens", "phone":"123-4567"}
]}
Можно видеть, что нотация XML выглядит очень похоже на HTML. По большей части это так и есть. HTML и XML оба являются основанными на тегах языками и могут даже анализироваться одинаковым образом (см. Лекция 6).
Нотация JSON выглядит очень похоже на простой JavaScript. JSON означает JavaScript Object Notation и поэтому действительно является обычным JavaScript.
Данные в любой нотации можно посылать с Web-сервера просто как обычный текст. Никакие пробелы, имеющиеся в этих примерах, не нужны, за исключением одиночных пробелов между именами атрибутов в тегах person (в версии XML).
Формат XML является совокупностью тегов, очень похожих на HTML. Можно иметь любое количество тегов, вложенных друг в друга, и каждый тег может иметь любое количество атрибутов: например, firstname, lastname и phone в примере выше. Однако имеется несколько вещей, за которыми необходимо следить.
[x]. Каждый тег должен иметь закрывающий тег. Например, <contacts> закрывается с помощью расположенного ниже </contacts>. Теги person являются замкнутыми. /> в конце действует по сути как дополнительный закрывающий тег. Можно было так же легко написать один из них как <person ... ></person>.
[x]. XML имеет ограниченный набор символов, которые можно использовать. В частности следующие символы являются недопустимыми в узлах и атрибутах и должны заменяться специальными комбинациями:
& --> & < --> < > --> > " --> " ' --> '
Например, узел <group name="Bill & Paul" /> является недопустимым и должен быть заменен на <group name="Bill & Paul" />.
[x]. Приходящие с сервера данные должны посылаться с content-type, заданным как text/xml. Если извлекается файл с расширением .xml, то это должно происходить автоматически. Если данные извлекаются из сценария, необходимо задавать это вручную.
Для PHP добавьте следующее:
<?php header('Content-type: text/xml'); ?>
Для ASP добавьте:
<% response.contentType = "text/xml" %>
[x]. Для всех других языков добавьте эквивалентный заголовок content-type.
Если этот заголовок не задан, свойство responseXML объекта XMLHttp будет пустым (это свойство будет описано далее).
JSON имеет аналогичный набор правил, и всю документацию по способам записи можно увидеть на /. Однако упрощенно можно сказать, что:
[x]. объекты начинаются и заканчиваются с помощью символов { и } соответственно;
[x]. массивы начинаются и заканчиваются с помощью символов [ и ] соответственно;
[x]. все строки заключаются в двойные кавычки ";
[x]. символы " в строке должны экранироваться: \".
Проще говоря, строка JSON должна представлять допустимый объект JavaScript.
Теперь посмотрим на то, как можно выполнить синтаксический разбор этих данных. В данный момент мы создадим просто сценарий, который сообщит, сколько имеется контактов, и выведет о них информацию. Начнем с версии XML, возвращаясь к предыдущему незаконченному фрагменту кода:
function processingFunction(){
if(oXml.readyState!=4) return; // запрос не выполнен
// Результаты обрабатываются здесь. Подробнее дальше!
}
Когда скрипт попадает в тело функции, запрос XMLHttp будет выполнен. Объект XMLHttp имеет два метода для возврата данных: responseXML и responseText. Так как в данный момент мы работаем с файлом XML, то будем использовать responseXML:
function processingFunction(){
if(oXml.readyState!=4) return;
var xmlDoc = oXml.responseXML;
var contacts = xmlDoc.selectNodes('/xml/contacts/person');
alert('There are '+contacts.length+' contacts!');
for(var i=0; i<contacts.length; i++){
alert('Contact #'+(i+1)+':\n\n'+
'First Name: '+contacts[i].getAttribute('firstname')+'\n'+
'Last Name: '+contacts[i].getAttribute('lastname') +'\n'+
'Phone #: '+contacts[i].getAttribute('phone') +'\n');
}
}
Здесь имеется 3 функции вывода (alert). Одна сообщает, что имеется два контакта, а еще две выводят контактную информацию для каждого человека.
Посмотрим на тот же сценарий, использующий текст JSON:
function processingFunction(){
if(oXml.readyState!=4) return;
var json = eval('('+oXml.responseText+')');
alert('There are '+json.contacts.length+' contacts!');
for(var i=0; i<json.contacts.length; i++){
alert('Contact #'+(i+1)+':\n\n'+
'First Name: '+json.contacts[i].firstname+'\n'+
'Last Name: '+json.contacts[i].lastname +'\n'+
'Phone #: '+json.contacts[i].phone +'\n');
}
}
Как можно видеть, строки JSON можно преобразовать в JavaScript, используя просто встроенную в JavaScript команду eval(). Однако это можно делать, только если вы полностью доверяете источнику данных. Если это не так (если данные поступают из не вполне известного источника данных), то необходимо пропустить их в целях безопасности через JSON Parser (Анализатор JSON).
Наконец можно выбрать получение данных в любом другом простом текстовом формате вместо XML или JSON. Однако в этом случае необходимо решить, как выполнить синтаксический анализ данных. Если имеется только один фрагмент данных, такой, как комментарий, то это может быть практичным решением.
Что использовать: XML или JSON? Здесь нет больших различий. XML имеет более широко распространенный формат и переносим почти на любую систему. Если создаваемый проект будет работать с внешними источниками, то, вероятно, лучше использовать XML. Однако JSON немного легче для понимания и в общем он быстрее для разработки кода, чем XML. Если эта технология применяется для персонального проекта или в начале нового проекта, которому не нужно взаимодействовать с другими приложениям, то JSON определенно заслуживает рассмотрения.
(обратно)В действительности уже есть все, что нужно для создания приложений AJAX, но мы рассмотрим достаточно простой пример. Мы собираемся написать небольшую таблицу данных (data grid), которая извлекает данные из трех различных файлов JSON. Для простоты эти файлы уже были сгенерированы. На практике эти файлы будут скорее всего генерироваться оперативно с помощью серверного сценария.
Файл 1
{contacts:[
{"firstname":"Steve" ,"lastname":"Smith", "phone":"555-1212"},
{"firstname":"Joe" ,"lastname":"Stevens", "phone":"555-0193"},
{"firstname":"Sam" ,"lastname":"Smith", "phone":"555-5120"},
{"firstname":"Dave" ,"lastname":"Stevens", "phone":"555-0521"},
{"firstname":"Suzy" ,"lastname":"Smith", "phone":"555-9410"},
{"firstname":"Jessica" ,"lastname":"Stevens", "phone":"555-8521"},
{"firstname":"James" ,"lastname":"Smith", "phone":"555-4781"},
{"firstname":"Jacob" ,"lastname":"Stevens", "phone":"555-9281"},
{"firstname":"Alex" ,"lastname":"Smith", "phone":"555-7261"},
{"firstname":"Tam" ,"lastname":"Stevens", "phone":"555-1820"}
]}
Файл 2
{contacts:[
{"firstname":"Nancy" ,"lastname":"Smith", "phone":"555-9583"},
{"firstname":"Elane" ,"lastname":"Stevens", "phone":"555-7281"},
{"firstname":"Shawn" ,"lastname":"Smith", "phone":"555-5782"},
{"firstname":"Jessie" ,"lastname":"Stevens", "phone":"555-7312"},
{"firstname":"Matt" ,"lastname":"Smith", "phone":"555-4928"},
{"firstname":"Jason" ,"lastname":"Stevens", "phone":"555-3917"},
{"firstname":"Daniel" ,"lastname":"Smith", "phone":"555-8711"},
{"firstname":"Shannon" ,"lastname":"Stevens", "phone":"555-0912"},
{"firstname":"Diana" ,"lastname":"Smith", "phone":"555-6172"},
{"firstname":"Mark" ,"lastname":"Stevens", "phone":"555-8831"}
]}
Файл 3
{contacts:[
{"firstname":"Laura" ,"lastname":"Stevens", "phone":"555-3915"},
{"firstname":"Jeff" ,"lastname":"Smith", "phone":"555-8614"},
{"firstname":"Frank" ,"lastname":"Stevens", "phone":"555-0213"},
{"firstname":"Elizabeth" ,"lastname":"Smith", "phone":"555-7531"},
{"firstname":"Jim" ,"lastname":"Stevens", "phone":"555-3951"}
]}
Эти файлы будут обеспечивать все данные для нашего списка контактов на AJAX. Построение списка контактов является в действительности вполне простым: создается таблица TABLE для хранения всех контактов и функция для очищения и повторного заполнения этой таблицы. Вот и все.
<table cellspacing="1" cellpadding="3" bgcolor="#000000" style="font-family:tahoma;font-size:10px;">
<tbody id="contactListTable">
<tr style="background-color:#CCF;">
<th>First Name</th>
<th>Last Name</th>
<th>Phone #</th>
</tr>
</tbody>
</table>
function loadContactListPage(n){
var oXML = getXMLHttpObj();
oXML.open('GET', '/img/10_json_file'+n+'.txt', true);
oXML.onreadystatechange = function(){ doneLoading(oXML); }
oXML.send('');
}
function doneLoading(oXML){
if(oXML.readyState!=4) return;
var json = eval('('+oXML.responseText+')');
var table = document.getElementById('contactListTable');
for(var i=table.childNodes.length-1; i>0; i--){
table.removeChild(table.childNodes[i]);
}
for(var i=0; i<json.contacts.length; i++){
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
var td2 = document.createElement('TD');
var td3 = document.createElement('TD');
tr.style.backgroundColor = i%2?'#FFF':'#E6E6E6';
table.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td1.appendChild(document.createTextNode(json.contacts[i].firstname));
td2.appendChild(document.createTextNode(json.contacts[i].lastname));
td3.appendChild(document.createTextNode(json.contacts[i].phone));
}
}
Демонстрационный пример
First Name Last Name Phone #
Steve Smith 555-1212
Joe Stevens 555-0193
Sam Smith 555-5120
Dave Stevens 555-0521
Suzy Smith 555-9410
Jessica Stevens 555-8521
James Smith 555-4781
Jacob Stevens 555-9281
Alex Smith 555-7261
Tam Stevens 555-1820
Page 1 | Page 2 | Page 3
Как можно видеть из примера выше, это все достаточно просто. Большая часть кода нужна в действительности просто для создания новых строк в таблице.
AJAX может быть удивительно полезным инструментом. Его можно использовать для проверки форм перед их отправкой, для извлечения данных, как в этом примере, или для чего-то еще, что можно будет придумать. Однако в нормальной ситуации он не должен быть основным элементом Web-сайта. Обычно надо быть уверенным, что сайт будет доступен, даже если JavaScript будет отключен, но всегда существуют некоторые исключения для этого правила.
Следующая лекция будет посвящена обработке ошибок в JavaScript.
(обратно) (обратно) (обратно)Лекция 11. Обработка ошибок в JavaScript
Обработка ошибок в JavaScript: Синтаксические ошибки. Ошибки времени выполнения. Window.onerror. Try/Catch/Finally и Throw. Обработка ошибок в AJAXВы написали приложение JavaScript, и оно работает отлично - пока вы не получите сообщение об ошибке. Это нечто неприглядное, выскакивающее на экране, что-нибудь вроде 'myObject.fields is null or not an object'. Что это значит? В этом уроке мы рассмотрим, как избавиться от ошибок, и покажем несколько различных методов для общей обработки ошибок.
JavaScript имеет два основных уровня обработки ошибок: синтаксические ошибки и ошибки времени выполнения. Синтаксические ошибки возникают до выполнения кода JavaScript, означая в основном, что код невозможно компилировать. Возьмем, например, следующий код:
for(var i=0; i<10; i++)
// рабочий код здесь
}
Обратите внимание, что здесь пропущена открывающая скобка {. Если попробовать выполнить этот код, то немедленно появится сообщение об ошибке, даже если код находится в функции, которая не выполняется сразу. Такие ошибки почти всегда легко находятся и исправляются. В этом случае будет получено сообщение, говорящее что-нибудь подобное " Ожидалась ')', строка 10, позиция 18". Если перейти к строке 10, то там обычно будет находиться достаточно очевидная ошибка, такая, как пропущенная ), дополнительный знак <или какая-то другая опечатка. С такими ошибками ничего нельзя сделать, кроме как просто исправить и двигаться дальше. Ниже представлен список некоторых наиболее распространенных синтаксических ошибок:
[x]. Пропущенные или непарные фигурные, круглые или квадратные скобки
Каждая фигурная {, круглая (, или квадратная [ скобка должна иметь свою закрывающую парную скобку. Если имеются вложенные скобки, то внутренние должны быть закрыты прежде, чем внешние. Например, набор скобок {[}] является недопустимым.
Условия операторов if, for и while должны помещаться в круглые скобки. Выражнение "if x=5{" является недопустимым, так как "x=5" должно быть заключено в круглые скобки. Если с этим возникнут проблемы, то существуют редакторы, такие, как EditPlus, которые могут выделять соответствующие пары скобок, и т.д.
[x]. Пропущенные или непарные кавычки
Это очень распространенная проблема. Строки в JavaScript начинаются символом 'или " и должны заканчиваться таким же символом. Если этот символ существует в строке, то он должен быть экранирован. Например, код
var x = 'It's a beautiful day';
является недопустимым, потому что ' в It's не экранировано. Этот код должен выглядеть следующим образом:
var x = 'It\'s a beautiful day';
// или
var x = "It's a beautiful day";
Еще одной достаточно распространенной ошибкой является завершение строки другим символом, т.е.:
var x = "It's a beautiful day';
Эта строка начинается с символа ", поэтому должна закончиться также символом ".
[x]. Пропущенная точка с запятой
Хотя точки с запятой обычно не нужны в JavaScript, но лучше все же их использовать. Например, если нужно сократить файл JavaScript, то обычно удаляют все переносы строк. Возьмем следующий код:
var x=5
var y=10
Если удалить переносы строк, то получим код
var x=5 var y=10
который вызовет ошибку. Если бы использовались точки с запятой, то проблемы не было бы.
(обратно)Перейдем к ошибкам времени выполнения. После запуска кода на исполнение начинают появляться ошибки времени выполнения. Эти ошибки могут возникать в связи с множеством причин. Каждый из следующих далее блоков кода будет порождать ошибку:
alert(x); // 'x' не определено
var x;
x[5] = 'test'; // 'x' будет null или не является объектом
window.frames = 5; // Не реализовано
var for; // ожидается идентификатор
document.doesNotExist(5);
// объект не поддерживает это свойство или метод
alert(parseInt('5')); // ожидается объект
Многие из этих проблем вызываются более общими ошибками, которые приходится разыскивать.
[x]. Неправильное использование прописных букв
Все встроенные функции JavaScript используют специальную форму записи имен функций, предполагающую, что имя функции начинается со строчной буквы, а в начале каждого следующего слова будет использоваться прописная буква: parseInt, getElementById, createElement, appendChild, и т.д.
Так как JavaScript учитывает регистр символов, то неправильный ввод имени одной из этих функций часто будет приводить к ошибке во время выполнения.
[x]. Ссылка на несуществующий код, функции или объекты DOM
Эта проблема возникает обычно в отношении объектов DOM. Предположим, что имеется код, который изменяет некоторые элементы формы на странице. Если делается попытка выполнить этот код до появления элементов формы, например, если поместить его в тег <HEAD>, то будет получена ошибка JavaScript.
Обычно эта проблема легко решается. Лучшим решением будет выполнение кода по событию onload, например:
<BODY onload="loadFunction();">
или еще лучше, присоединение события к загрузке тела:
document.captureEvents(Event.LOAD);
document.onLoad=loadFunction;
[x]. Использование зарезервированного слова
Существует длинный список зарезервированных ключевых слов JavaScript. Если делается попытка использовать многие из них вне их специального контекста, как, например, запись
var for = 5;
то будет возникать ошибка.
[x]. Использование пропущенного параметра
При определении функции обычно используется некоторое количество аргументов. Если некоторые из этих аргументов пропущены и делается попытка их использовать, то возникнут ошибки.
Большинство из этих проблем попадают в категорию опечаток и просто обычных ошибок, которые можно исправить, но необходимо о них знать, чтобы случайно не сделать.
Однако последний тип ошибки из этого списка с пропущенными параметрами можно проверить достаточно легко:
function myFunction(a, b, c){
if(a){
// выполняется работа с a
}
if(b && c){
// выполняется работа с b и c
}
}
Если функция вызывается только с одной переменной, то проблемы не возникает. Однако надо помнить об одной вещи: если входящая по значению переменная может быть определена как false (0 или false), то код не будет работать. В связи с этим лучше проверять, что переменная не была определена:
function myFunction(a, b, c){
if(typeof(a)!='undefined'){
// выполнение кода с a
}
if((typeof(b)!='undefined') && (typeof(c)!='undefined')){
// выполнение кода с b и c
}
}
В этом случае, даже если одна из переменных будет передана как 0, false или null, код все равно будет работать.
Сейчас мы перейдем к изучению механизмов обработок ошибок - с помощью операторов Try/Catch и функции window.onerror.
(обратно)Откровенно говоря, функция window.onerror имеет небольшую практическую пользу. Ее чаще всего используют для полного отключения всех сообщений об ошибках во время выполнения:
window.onerror = function(){
return true;
}
С этим кодом сообщение об ошибке никогда не будет выводиться. Однако в связи с этим приложение может не работать. Например, если бы переменная была null и с ней была выполнена какая-то операция, то в обычной ситуации должно появиться сообщение об ошибке. При использовании этого кода функция или сценарий в случае возникновения ошибки будет просто молча останавливаться.
Функцию window.onerror можно также использовать для вывода пользователям несколько более дружественных сообщений об ошибках. Можно просто вывести, например, сообщение 'Произошла ошибка, свяжитесь, пожалуйста, с Web-мастером', вместо вывода пользователю всех технических деталей ошибки (что большинство браузеров делает по умолчанию).
Еще одно использование window.onerror состоит в отправке разработчику списка всех ошибок, произошедших на сайте. Можно использовать AJAX для отправки сообщений об ошибках в форме, чтобы можно было позже их исправить. Все это возможно сделать неявно, без взаимодействия с пользователем.
(обратно)Операторы Try/Catch являются несомненно наиболее распространенным и обычно лучшим способом реализовать обработку ошибок в JavaScript. Но не только это - операторы Try/Catch могут иногда быть единственным способом реализовать некоторые задачи, такие, как обнаружение объекта. Возьмем, например, простую функцию для создания в Internet Explorer объекта XMLHttp:
var activeXObjects = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'];
for(var i=0; i<activeXObjects.length; i++){
try{
return new ActiveXObject(activeXObjects[i]);
}catch(err){}
}
Заранее неизвестно, какие объекты установил пользователь, и, к сожалению, браузер не предоставляет никакого механизма это определить. Поэтому остается создавать каждый из 6 возможных объектов, пока один из них (будем надеяться) не заработает.
Операторы Try/Catch можно использовать для перехвата ошибок двух типов: ошибок времени выполнения и ошибок пользователя. Ошибки времени выполнения, как говорилось ранее, возникают, когда у компилятора JavaScript существует проблема с созданным кодом. Ошибки пользователя, с другой стороны, будут технически проходить без проблем, но возникают в связи с контекстом приложения. Если имеется поле, в которое пользователь, например, должен ввести свой возраст, и пользователь вводит -2, то это приводит к появлению ошибки.
Блок Try/Catch имеет достаточно простой синтаксис:
try{
// код
}catch(err){
// код обработки ошибки
}
Если код в блоке try приводит к ошибке, то сценарий немедленно переходит в блок catch. Объект ошибки err в JavaScript имеет ряд полезных свойств - описание, сообщение, имя и номер, которые можно использовать для вывода информации о том, что произошло:
try{
var x;
x[5] = 5;
}catch(err){
alert('An error occured: '+err.description);
}
Если в операторе catch окажется ошибка, то JavaScript сможет обратиться в дальнейшем к ее описанию.
Такой блок кода Try/Catch можно применять в любом месте. Однако, обычно, код должен быть написан таким образом, чтобы это не нужно было использовать, - в частности, весь ввод должен проверяться.
Блок Try/Catch можно применять также для создания своих собственных ошибок:
function setAge(x){
if(typeof(x)=='undefined') throw('Вы должны ввести возраст');
if(typeof(x)!='number') throw('Возраст должен быть числом');
if(x<0) throw('Возраст не может быть меньше 0');
if(x>120) throw('Возраст не может быть больше 120');
var myAge = x;
// еще код
}
try{
setAge(userInput);
}catch(err){
alert(err);
}
В этом случае выполняется проверка того, что пользователь вводит возраст. Если он вводит недопустимые данные, сценарий немедленно завершается, а пользователь получает сообщение об ошибке.
Блок try/catch имеет еще одну часть, оператор finally:
try{
// код
}catch(err){
// код
}finally{
// код
}
Код в "завершающем блоке" будет выполняться независимо от того, что происходит с операторами Try/Catch. В чем же разница между завершающим блоком и простым размещением кода после блока try/catch? В большинстве случаев никакой разницы не будет. Однако, если блок try/catch находится в функции и происходит выход из функции в блоке try или catch, то возникнет существенное различие:
function myFunction(){
try{
return someValue;
}catch(err){
return defaultValue;
}finally{
alert('finally!');
}
alert('End!');
}
В этом случае оба блока try и catch возвращают значение. Мы получим сообщение "finally!", но не получим сообщение "End!", потому что произойдет выход из функции до сообщения alert('End!'). То же самое остается справедливым для операторов Try/Catch, которые осуществляют выход из тела цикла for или while, например:
for(var i=0; i<10; i++){
try{
if(i==5) continue;
}catch(err){
// обработка ошибки
}finally{
// код
}
// еще код
}
(обратно) (обратно)
Запросы XMLHttp, рассмотренные в предыдущей лекции, могут иметь совершенно другой тип ошибки: данные просто не проходят. Это можно проверить через статус объекта XMLHttp:
function processingFunction(){
if(oXml.readyState!=4) return; // запрос не выполнен
switch(oXml.status){
case 0: case 200: // запрос выполнен
break;
case 408: case 504: // запрос превысил время ожидания
// код
break;
default: // ошибка запроса
// код
return; // возможно, вы захотите выйти
break;
}
// продолжение обработки запроса
}
oXml в этом примере является объектом XMLHttp, а функция processingFunction была присоединена к свойству onreadystatechange этого объекта.
Проверяя код статуса, мы узнаем, был ли запрос обработан успешно. Код 200 является в HTTP стандартным кодом статуса "Все прошло нормально" . Код 0 возникает при загрузке файлов из локальной файловой системы (если для этого есть соответствующие полномочия). Статус код 0 часто возникает при локальном тестировании приложения.
Коды статуса 408 и 504 представляют ситуацию с превышением времени ожидания. Очень часто это указывает на сетевые проблемы, и простое повторение запроса может разрешить проблему. Однако отметим, что эти коды представляют также слишком длительную работу сервера над ответом. Например, если существует ошибка сценария на сервере, которая приводит к бесконечному циклу, то может возникнуть код ошибки 408 или 504. В этом случае повторная попытка будет вредоносной, поэтому надо быть осторожным. Самым безопасным является уведомление пользователя и выход из функции, но это не очень корректно по отношению к пользователю.
Все другие коды ошибок имеют свои собственные значения, но в данной ситуации это не важно. Нас интересует только то, что мы не получили нужные данные. Поэтому если код попадает в область "default", то мы имеем проблему. Наверно в этой ситуации лучше всего сообщить пользователю о проблеме и выйти из функции.
Это почти все об обработке ошибок в JavaScript. Имеет смысл включать в функции обработку ошибок, но, возможно, что это не требуется для каждой функции или каждого фрагмента кода. В большинстве ситуаций достаточно проверки ввода пользователей. Для реализации проверки пользователя наиболее полезным средством является использование блоков Try/Catch/Throw.
В следующей лекции будет рассмотрена рекурсия:
"Чтобы понять рекурсию, сначала необходимо понять рекурсию". (обратно) (обратно)Лекция 12. Рекурсия
Рекурсия. Стек. Создание собственного стека. Применение рекурсии."Чтобы понять рекурсию, сначала необходимо понять рекурсию".Данное высказывание очень четко выражает суть рекурсии. Рекурсия является базовой концепцией программирования вообще, а не только JavaScript, понимание которой очень полезно. Она включает вызов функции из той же самой функции. Почему это может понадобиться? Предположим, что имеется массив массивов. Каждый из этих массивов может иметь в себе массивы, которые могут иметь массивы, которые могут иметь ... собственно, в этом и состоит идея. Таким образом мы имеем множество массивов в других массивах. Как выполнить одну и ту же операцию на всех элементах во всех этих массивах? Можно попробовать использовать простой цикл for, но неизвестно, сколько имеется массивов, и неизвестно, как глубоко распространяется вложение массивов. Поэтому остается только концепция рекурсии.
В этом примере мы циклически перебираем все элементы массива первого уровня. Если какой-либо из этих элементов в массиве сам будет массивом, мы снова вызываем функцию, передавая этот элемент как первичный массив. Затем функция будет перебирать этот массив и снова вызывать себя, пока не останется ни одного массива.
Другим хорошим примером рекурсии будет написание синтаксического анализатора документа XML. Каждый узел документа XML можно анализировать совершенно одинаково, поэтому мы можем разбить всю задачу на множество более мелких одинаковых шагов.
Самым трудным в рекурсии является ее понимание. Такие концепции, как циклы, воспринимаются достаточно естественно, в то время как рекурсия трудна для большинства людей. Рекурсивные функции также очень часто требуют больше памяти, чем нерекурсивные функции. Если имеется функция, которая вызывает себя на 20 уровней вглубь, потребуется как минимум в 20 раз больше памяти.
Простым примером будет написание рекурсивной функции факториала. Факториал N, записываемый как N!, определяется как произведение всех чисел от N до 1. Поэтому 5! будет равен 5*4*3*2*1 = 120.
function factorial(N){
return N<=1?1:N*factorial(N-1);
}
Демонстрационный пример
Факториал
Очень элегантное решение, не правда ли? В результате мы вызываем функцию факториала 5 раз для N = 5. Можно в действительности развернуть всю рекурсивную функцию и получить (5*(4*(3*(2*(1))))). Каждая пара скобок представляет новый вызов функции факториала. Можно также видеть, что если пользователь вводит число <=1, то всегда получит в качестве результата 1.
Давайте рассмотрим другой пример. При работе с программами рисования, такими, как Photoshop или MS Paint, иногда используется инструмент заливки (flood fill). Этот инструмент заливает выбранный цвет другим, указанным цветом. Это делается рекурсивно, и алгоритм заливки достаточно прямолинеен:
/*
это - псевдо-код, быстро написанный и нефункциональный,
который должен просто дать общую идею о том, как действует
реальный код
*/
function floodFill(x, y){
if(alreadyFilled(x, y)) return;
fill(x, y);
floodFill(x, y-1);
floodFill(x+1, y );
floodFill(x, y+1);
floodFill(x-1, y );
}
function fill(x, y){
// эта функция будет фактически изменять цвет поля
}
function alreadyFilled(x, y){
// эта функция проверяет, что поле уже было закрашено
}
Идея этого кода состоит в том, чтобы закрасить текущий квадрат или пиксель. Затем он пытается закрасить квадрат выше, справа, ниже и слева от себя. При таком алгоритме каждый квадрат будет закрашен достаточно быстро. Однако здесь возникает небольшая проблема - размер стека.
(обратно)При вызове функции копия множества переменных, которые нужны ей для работы, сохраняется в памяти. Если функция вызывается рекурсивно, то другая копия всех этих переменных сохраняется в памяти, затем еще одна и т.д. Эти копии переменных сохраняются в так называемом стеке. Первая копия находится внизу, следующая поверх нее, и т.д. К сожалению, существует ограничение на размер стека. В большинстве браузеров этот предел определен где-то в районе 1000. Это означает, что для функции заливки сетка могла бы содержать до 1000 квадратов. Некоторые браузеры имееют меньший размер стека. Web-браузер Safari, например, имеет максимальный размер стека, равный примерно 100, поэтому даже небольшая сетка 10 х 10 исчерпает возможности браузера.
Таким образом мы имеем ограничение в самом браузере, которое определяет, что при использовании рекурсии можно углубиться только на 1000 уровней. К сожалению, наш алгоритм floodFill (заливки) будет в худшем случае углубляться на 1000 уровней на сетке, содержащей только 1000 полей. Если имеется что-то более сложное, то существует вероятность, что произойдет переполнение стека и просто остановка выполнения кода. Очевидно, что существуют ситуации, когда необходимо закрасить область, содержащую более 1000 пикселей. Что делать в таком случае? Попробуем изменить подход.
Прежде всего попробуем изменить алгоритм. Существует много различных алгоритмов закраски - мы использовали один из самых простых. Он проверяет все направления и затем закрашивает каждый просмотренный квадрат, если это будет необходимо. С помощью небольшого изменения можно существенно улучшить этот алгоритм, с точки зрения необходимого пространства стека. Вместо просмотра влево и вправо на 1 квадрат, можно просматривать влево и вправо на максимально возможное количество позиций и закрашивать каждый пиксель в этом направлении. Это называется алгоритмом закрашивания со сканированием по линиям, который оказывается одним из наиболее эффективных существующих алгоритмов закрашивания. К сожалению, он все еще имеет свои ограничения, и для достаточно большой области закрашивания он также может переполнять стек.
Если это произойдет, то остается единственный вариант: не использовать рекурсию. Вместо использования стека JavaScript можно создать свой собственный с помощью простого массива JavaScript. Так как массив не имеет ограничений на количество элементов массива, то можно получить "бесконечно" большой стек, которым мы управляем самостоятельно.
(обратно)Чтобы создать свой собственный стек, необходимо удалить рекурсивную часть нашей функции. Мы все равно собираемся многократно вызывать функцию, но собираемся вызывать ее из другой функции, а не из себя самой.
var Stack = [];
function floodFill(x, y){
fillPixel(x, y);
while(Stack.length>0){
toFill = Stack.pop();
fillPixel(toFill[0], toFill[1]);
}
}
function fillPixel(x, y){
if(!alreadyFilled(x, y)) fill(x, y);
if(!alreadyFilled(x, y-1)) Stack.push([x, y-1]);
if(!alreadyFilled(x+1, y )) Stack.push([x+1, y ]);
if(!alreadyFilled(x, y+1)) Stack.push([x, y+1]);
if(!alreadyFilled(x-1, y )) Stack.push([x-1, y ]);
}
function fill(x, y){
// эта функция будет фактически изменять цвет поля
}
function alreadyFilled(x, y){
// эта функция проверяет, что квадрат еще не был закрашен
}
Как можно видеть, процесс не намного сложнее, но требует немного больше микроуправления, чем написанный ранее рекурсивный код. Вместо рекурсивного вызова функции floodFill создается переменная Stack, содержащая список квадратов, которые необходимо закрасить. Затем функция fillPixel заполняет этот массив, а функция floodFill извлекает последний элемент и закрашивает его. Когда все будет сделано, результат будет таким же, как и у первой функции, которая была написана, с одним исключением: эта функция не имеет никаких ограничений в отношении величины сетки.
Отметим, что существует очень немного рекурсивных функций, которые будут реально переполнять стек JavaScript. В действительности это не совсем верно. Почти любая рекурсивная функция может переполнить стек, но чаще всего данные, которые функция получает от пользователя, делают это крайне маловероятным событием. Когда, например, вы встретите документ XML с глубиной вложения узлов, равной 1000? Почти наверняка - никогда.
(обратно)Теперь, имея некоторое представление о рекурсии, надо попытаться понять, что с ней можно делать, кроме закрашивания изображений. Одним из наиболее распространенных рекурсивных алгоритмов будет так называемый двоичный поиск. Это можно представить себе как игру на больше-меньше. Если кто-то предлагает угадать число от 1 до 100, то, скорее всего, начать лучше с 50. Если партнер скажет, что больше, то можно предположить 75 и т.д. Это можно продолжать, пока число не будет найдено.
Как оказывается, это один из самых быстрых способов поиска данных, когда известно, что все данные уже отсортированы. Если имеется список из 1000000 позиций и требуется найти одну из них, то можно начать с 500000 и использовать тот же процесс, что и в игре "больше-меньше".
Для сортировки применяются специальные алгоритмы. Многие алгоритмы сортировки, включая один из самых быстрых, QuickSort, используют рекурсию. Алгоритм QuickSort разбивает данные на фрагменты, сортирует каждый фрагмент по отдельности, рекурсивно разбивает фрагменты на меньшие фрагменты и сортирует их.
Другим широко распространенным использованием рекурсии является проверка или синтаксический анализ некоторых данных. Ранее в качестве примера упоминался файл XML, но с помощью рекурсии можно эффективно выполнять многие другие формы синтаксического анализа, такие, как подсчет количества вхождений слова или фразы в предложении или книге.
Рекурсия является крайне полезной концепцией. Рекурсия может использоваться не так часто, но когда она находит применение, она существенно облегчает жизнь программиста.
(обратно) (обратно)Дополнения
Дополнение. Краткое руководство по AJAX
Технология AJAX является не новым языком программирования, а просто новым способом использования существующих стандартов.
С помощью AJAX можно создавать Web-приложения, которые будут лучше, быстрее и удобнее для пользователей, чем существующие.
AJAX основывается на JavaScript и запросах HTTP.
AJAX является сокращением от "Asynchronous JavaScript And XML" (Асинхронный JavaScript и XML).
AJAX является не новым языком программирования, а просто новым способом создания Web-приложений, которые будут лучше, быстрее, и более интерактивными.
AJAX использует JavaScript для отправки и получения данных при взаимодействии Web-браузера и Web-сервера.
Технология AJAX делает Web-страницы более гибкими и быстро реагирующими, осуществляя обмен данными с Web-сервером в фоновом режиме, а не перезагружая всю Web-страницу всякий раз, когда пользователь делает изменение.
(обратно)AJAX является технологией, которая выполняется в браузере клиента. Она использует асинхронную передачу данных (запросы HTTP) между браузером и Web-сервером, позволяя Web-страницам запрашивать с сервера небольшие объемы данных вместо целых страниц.
Эта технология позволяет уменьшить объем приложений Интернет, сделать их более быстрыми и более удобными для пользователей.
AJAX является технологией Web-браузера, которая не зависит от программного обеспечения Web-сервера.
(обратно)AJAX использует следующие открытые стандарты:
JavaScript
XML
HTML
CSS
Используемые в AJAX открытые стандарты строго определены и поддерживаются всеми основными браузерами. Приложения AJAX не зависят от используемых браузеров и платформ.
(обратно)Web-приложения имеют множество преимуществ при сравнении с традиционными приложениями настольных компьютеров. Они имеют более обширную аудиторию, их легче устанавливать и поддерживать, и их легче разрабатывать.
Однако приложения Интернет не всегда бывают достаточно "богаты" свойствами и удобны для использования по сравнению с традиционными приложениями.
С помощью AJAX приложения Интернет можно сделать богаче (меньше, быстрее, и легче в использовании).
(обратно)Нет ничего нового, что требует изучения.
Технология AJAX основывается на открытых стандартах. Эти стандарты использовались множеством разработчиков многие годы.
Большинство существующих Web-приложений можно легко переписать с помощью технологии AJAX вместо традиционных форм HTML.
(обратно)Традиционное Web-приложение посылает введенные данные на Web-сервер (используя форму HTML). После обработки данных Web-сервер возвращает пользователю совершенно новую Web-страницу.
Так как сервер возвращает новую Web-страницу всякий раз, когда пользователь посылает данные на сервер, то традиционное Web-приложение часто выполняется медленно и оказывается менее удобным для пользователя.
С помощью AJAX Web-приложения могут посылать и получать данные без перезагрузки всей Web-страницы. Это делается с помощью запросов HTTP, посылаемых на сервер (в фоновом режиме), и модификации только отдельных частей Web-страницы с помощью JavaScript, когда сервер возвращает данные.
XML используется обычно в качестве формата для получения данных сервера, хотя можно использовать любой формат, включая обычный текст.
Как это делается, будет показано далее в этом кратком руководстве.
(обратно) (обратно)Технологию AJAX можно использовать для создания приложений с большими интерактивными возможностями.
В следующем примере приложения AJAX показано, как Web-страница может оперативно общаться с Web-сервером, когда пользователь вводит данные в Web-форму.
На странице выводится поле ввода с предложением ввести имя. Когда пользователь начинает вводить в этом поле имя, ниже появляются возможные варианты имен.
(обратно)Пусть на Web-странице имеется форма HTML со следующим кодом:
<form>
Имя:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Советуем: <span id="txtHint"></span></p>
Как можно видеть, это простая форма HTML с полем ввода с именем "txt1".
Атрибут события этого поля ввода определяет функцию, которая будет запускаться при возникновении события onkeyup.
Параграф ниже формы содержит тег span с именем "txtHint". Тег span используется в качестве поля для подстановки данных, получаемых с Web-сервера.
Когда пользователь вводит данные, выполняется функция с именем "showHint()". Выполнение функции запускается событием "onkeyup". Другими словами, всякий раз, когда пользователь убирает свой палец с клавиатуры внутри поля ввода (отпускает нажатую клавишу), вызывается функция showHint.
(обратно)Функция showHint() является очень простой функцией JavaScript, помещенной в раздел заголовка <head> страницы HTML.
Функция имеет следующий код:
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Браузер не поддерживает запросы HTTP")
return
}
var url="gethint.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
Функция выполняется всякий раз, когда в поле ввода вводится символ.
Если имеется какой-то ввод в текстовое поле (str.length > 0), то функция выполняет следующее:
[x]. Определяет url (имя файла) для отправки на сервер
[x]. Добавляет к url параметр (q) с содержимым поля ввода
[x]. Добавляет случайное число, чтобы сервер не использовал кэшированный файл
[x]. Создает объект XMLHTTP, и приказывает объекту выполнить функцию с именем stateChanged, когда произойдет изменение.
[x]. Открывает объект XMLHTTP с заданным url.
[x]. Посылает запрос HTTP на сервер
Если поле ввода будет пустым, то функция просто очищает содержимое поля для подстановки txtHint.
(обратно)Функция stateChanged() содержит следующий код:
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
Функция stateChanged() выполняется всякий раз, когда изменяется состояние объекта XMLHTTP.
Когда состояние будет равно 4 (или "complete"), поле для подстановки txtHint получает содержимое текста пришедшего ответа.
(обратно) (обратно) (обратно)Приложения AJAX могут выполняться только в Web-браузерах с поддержкой XML.
Приложения AJAX могут выполняться только в Web-браузерах с полной поддержкой XML, т.е. всеми основными современными браузерами.
Предыдущий пример вызывает функцию с именем GetXmlHttpObject.
Эта функция предназначена для решения проблемы создания различных объектов XMLHTTP для различных браузеров.
Функция имеет следующий код:
function GetXmlHttpObject(handler)
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
(обратно) (обратно)Далее показан полный исходный код рассмотренного выше примера AJAX.
Эта страница HTML содержит простую форму HTML и ссылку на файл JavaScript.
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
Имя:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Советуем: <span id="txtHint"></span></p>
</body>
</html>
(обратно)Это код JavaScript, который находится в файле "clienthint.js":
var xmlHttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Браузер не поддерживает запросы HTTP")
return
}
var url="gethint.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
Далее речь пойдет о серверной странице AJAX.
(обратно)Сервера AJAX не существует.
Страницы AJAX может обрабатывать любой сервер Интернет.
Серверная страница, вызываемая сценарием JavaScript в рассматриваемом примере, является простым файлом ASP с именем "gethint.asp".
Ниже представлены два примера кода серверной страницы, один, написанный на ASP, а другой – на PHP.
(обратно)Код на странице "gethint.asp" написан на VBScript для Информационного сервера Интернет (IIS). Он просто проверяет массив имен и возвращает клиенту подходящие имена:
<%
dim a(30)
'Заполнение массива именами
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'извлечение параметра q из URL
q=ucase(request.querystring("q"))
'поиск всех рекомендаций из массива, если длина q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
'Вывод "нет предложений" если рекомендуемого имени не найдено
'или вывод подходящих значений
if hint="" then
response.write("нет предложений")
else
response.write(hint)
end if
%>
(обратно)Приведенный выше код переписан на PHP.
Примечание: Чтобы выполнить весь пример на PHP, не забудьте изменить значение переменной url в "clienthint.js" с "gethint.asp" на "gethint.php".
(обратно)<?php
// Заполняем массив именами
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//извлечение параметра q из URL
$q=$_GET["q"];
//поиск всех рекомендаций в массиве, если длина q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Вывод "нет предложений", если рекомендаций не найдено
// или вывод подходящих значений
if ($hint == "")
{
$response="нет предложений";
}
else
{
$response=$hint;
}
//вывод ответа
echo $response;
?>
(обратно) (обратно) (обратно)AJAX можно использовать для интерактивного взаимодействия с базой данных.
В следующем примере приложения AJAX будет показано, как Web-страница может извлекать информацию из базы данных с помощью технологии AJAX.
На Web-странице выводится список выбора с именами клиентов.
При выборе любого клиента на странице выводится связанная с ним информация из базы данных
(обратно) (обратно)Описанный выше пример страницы содержит простую форму HTML и ссылку на сценарий JavaScript:
<html>
<head>
<script src="selectcustomer.js"></script>
</head>
<body>
<form>
Выберите заказчика:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd
</select>
</form>
<p>
<div id="txtHint"><b>Информация о заказчике будет выводиться здесь.</b></div>
</p>
</body>
</html>
Как можно видеть, это просто форма HTML с раскрывающимся списком с названием "customers".
Параграф ниже формы содержит тег div с именем "txtHint". Тег div используется в качестве поля для заполнения получаемой с Web-сервера информацией.
Когда пользователь выбирает данные (имя заказчика), выполняется функция "showCustomer()". Выполнение функции запускается событием "onchange". Другими словами, каждый раз, когда пользователь изменяет значение в поле раскрывающегося списка, вызывается функция showCustomer.
Код JavaScript показан далее.
(обратно)Следующий далее код JavaScript находится в файле "selectcustomer.js":
var xmlHttp
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Браузер не поддерживает запросы HTTP")
return
}
var url="getcustomer.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
(обратно)Серверная страница, вызываемая сценарием JavaScript, является просто файлом ASP file с именем "getcustomer.asp".
Страница написана на VBScript для Информационного сервера Интернет (IIS). Ее можно легко переписать на PHP, или любой другой серверный язык.
Код выполняет команды SQL на базе данных и возвращает результат в виде таблицы HTML:
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & request.querystring("q")
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
(обратно) (обратно)AJAX можно использовать для интерактивного взаимодействия с файлом XML.
В следующем далее примере приложения AJAX показано, как Web-страница может извлекать информацию из файла XML с помощью технологии AJAX.
На Web-странице выводится список выбора с именами исполнителей музыкальных произведений. При выборе исполнителя на странице появляется информация с описанием компакт-диска с записями этого музыканта.
(обратно) (обратно)Рассматриваемый пример содержит простую форму HTML и ссылку на код JavaScript:
<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form>
Выберите компакт-диск:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<p>
<div id="txtHint"><b>Здесь выводится информация о компакт-диске.</b></div>
</p>
</body>
</html>
Как можно видеть, это простая форма HTML с простым раскрывающимся списком выбора с именем "cds".
Параграф ниже формы содержит тег div с именем "txtHint". Тег div используется в качестве поля для заполнения информацией, получаемой с Web-сервера.
Когда пользователь делает свой выбор, выполняется функция с именем "showCD". Выполнение функции запускается событием "onchange". Другими словами, каждый раз, когда пользователь изменяет значение в поле раскрывающегося списка, вызывается функция showCD.
Код JavaScript показан далее.
(обратно)Следующий далее код JavaScript находится в файле "selectcd.js":
var xmlHttp
function showCD(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Браузер не поддерживает запросы HTTP")
return
}
var url="getcd.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
(обратно)Серверная страница, вызываемая кодом JavaScript, будет простым файлом ASP с именем "getcd.asp".
Страница написана на VBScript для Информационного сервера Интернет (IIS). Ее можно легко переписать на PHP, или любом другом серверном языке.
Код выполняет запрос на файле XML и возвращает результат в виде HTML.
q=request.querystring("q")
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))
set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")
for each x in nodes
for each y in x.childnodes
response.write("<b>" & y.nodename & ":</b> ")
response.write(y.text)
response.write("<br />")
next
next
(обратно) (обратно)Объект XMLHttpRequest делает возможной технологию AJAX.
Чтобы создавать Web-приложения AJAX, необходимо хорошо знать объект JavaScript, называемый XMLHttpRequest.
Объект XMLHttpRequest является ключевым понятием технологии AJAX. Он был доступен с момента появления в июле 2000 браузера Internet Explorer 5.5, но не был полностью понят до 2005 года, когда начались разговоры об AJAX и Web 2.0.
Ниже представлены некоторые методы и свойства этого объекта, с которыми необходимо быть знакомым.
(обратно)Различные браузеры используют для создания объекта XMLHttpRequest различные методы.
Internet Explorer использует ActiveXObject.
Другие браузеры используют встроенный в JavaScript объект, называемый XMLHttpRequest.
Вот простейший код, который можно использовать, чтобы обойти эту проблему.
var XMLHttp=null
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
Сначала создается переменная XMLHttp для использования в качестве объекта XMLHttpRequest. Ее значение задается как null.
Затем проверяется, доступен ли объект window.XMLHttpRequest. Этот объект доступен в более новых версиях браузеров, таких как Firefox, Mozilla, и Opera.
Если объект доступен, то он используется для создания нового объекта.
XMLHttp=new XMLHttpRequest().
Если он не доступен, то проверяется, доступен ли объект window.ActiveXObject. Этот объект будет доступен в браузере Internet Explorer версии 5.5 и выше.
Если этот объект доступен, то он используется для создания нового объекта:
XMLHttp=new ActiveXObject().
(обратно) (обратно)Некоторые программисты предпочтут использовать самую новую и быструю версию объекта XMLHttpRequest.
Следующий пример пытается использовать самую последнюю версию объекта "Msxml2.XMLHTTP" компании Microsoft, доступную в Internet Explorer 6, прежде чем обратиться к объекту "Microsoft.XMLHTTP", доступному в Internet Explorer 5.5 и выше.
var XMLHttp=null
try
{
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
}
catch(e)
{
try
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
}
if (XMLHttp==null)
{
XMLHttp=new XMLHttpRequest()
}
Сначала создается переменная XMLHttp для использования в качестве объекта XMLHttpRequest. Ее значение задается как null.
Затем делается попытка создания объекта способом компании Microsoft, доступным в Internet Explorer 6 и более поздних версиях:
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
Если это порождает ошибку, то используется старый способ (Internet Explorer 5.5):
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
Если XMLHttp по прежнему имеет значение null, то делается попытка создания объекта "стандартным" способом:
XMLHttp=new XMLHttpRequest()
(обратно) (обратно)Метод open()
Метод open() создает запрос для Web-сервера.
Метод send()
Метод send() посылает запрос серверу.
Метод abort()
Метод abort() отменяет текущий запрос к серверу.
(обратно)Свойство readyState определяет текущее состояние объекта XMLHttpRequest.
В таблице показаны возможные значения свойства readyState:
Состояние Описание 0 Запрос не инициализирован 1 Запрос создан 2 Запрос послан 3 Запрос обрабатывается 4 Запрос завершен
readyState=0 после создания объекта XMLHttpRequest, но до вызова метода open().
readyState=1 после вызова метода open(), но до вызова метода send().
readyState=2 после вызова метода send().
readyState=3 после того, как браузер соединится с сервером, но до завершения сервером ответа.
readyState=4 после завершения запроса и полного получения всех данных ответа с сервера.
Различные браузеры используют свойство состояния готовности по-разному. Не стоит рассчитывать, что все браузеры будут сообщать обо всех состояниях. Некоторые не сообщают о состоянии 0 и 1.
Для приложений AJAX представляет интерес фактически только состояние 4. Те есть, когда запрос завершен, и можно использовать полученные данные.
(обратно)Свойство responseText содержит присланный сервером текст.
(обратно) (обратно) (обратно)Дополнение. Учебное руководство по XHTML
Язык XHTML является более строгой и четкой версией языка разметки HTML.
В данном руководстве рассмотрены различия между HTML и XHTML, а также показано, как преобразовать Web-сайт на использование XHTML.
(обратно)Язык XHTML является более строгой и четкой версией языка HTML.
Для понимания изложенного материала необходимо знать язык HTML и основы создания Web-страниц.
(обратно)XHTML является сокращением от английского EXtensible HyperText Markup Language, что означает "Расширяемый язык разметки гипертекста".
XHTML предназначен для замены HTML.
XHTML почти совпадает с HTML 4.01.
XHTML является более строгой и четкой версией языка HTML.
XHTML является языком HTML, определенным как приложение XML.
XHTML одобрен в качестве Рекомендации консорциумом W3C.
(обратно)XHTML 1.0 был одобрен как Рекомендация W3C 26 января 2000 г..
W3C определяет XHTML как последнюю версию HTML. XHTML будет постепенно заменять HTML.
(обратно)Язык XHTML совместим с HTML 4.01.
Все новые браузеры поддерживают XHTML.
(обратно)XHTML является переработкой HTML 4.01 в соответствии с XML, и может сразу использоваться существующими браузерами при соблюдении нескольких простых правил.
(обратно)Данное руководство рассматривает:
[x]. Почему необходимо использовать XHTML
[x]. Синтаксис XHTML
[x]. Как преобразовать сайт на XHTML
[x]. Проверка XHTML
[x]. Модуляризация XHTML
(обратно) (обратно)XHTML является объединением HTML и XML (EXtensible Markup Language – Расширяемого языка разметки).
XHTML состоит из всех элементов HTML 4.01, объединенных с синтаксисом XML.
В настоящее время многие страницы в Интернет содержат "плохой" код HTML.
Следующий код HTML будет нормально работать при просмотре в браузере, даже хотя он не полностью следует правилам HTML:
<html>
<head>
<title>Это плохой код HTML</title>
<body>
<h1>Плохой код HTML
</body>
XML является языком разметки, в котором каждый элемент должен быть правильно размечен, что приводит к "грамматически-правильным" ("well-formed") документам.
Язык XML предназначен для описания данных, а язык HTML создан для представления данных.
На современном рынке представлены различные технологии браузеров, одни браузеры предназначены для использования Интернет на компьютерах, другие для использования Интернет на мобильных телефонах и c помощью карманных коммуникаторов. Последние устройства имеют недостаточно ресурсов или мощности для интерпретации "плохого" языка разметки.
Объединяя сильные стороны HTML и XML, мы получаем язык разметки, который будет полезен сегодня и в будущем -- XHTML.
Страницы XHTML можно читать с помощью любых устройств, которые поддерживают XML. Пока весь мир не перейдет на использование поддерживающих XML браузеров, XHTML предоставляет возможность сейчас писать "синтаксически-правильные" документы, которые можно использовать во всех браузерах.
(обратно) (обратно)XHTML можно начать использовать просто строго следуя правилам HTML.
XHTML не очень существенно отличается от стандарта HTML 4.01.
Поэтому хорошим началом будет приведение кода к стандарту 4.01.
Кроме того, необходимо писать код HTML символами нижнего регистра, и никогда не пропускать завершающие теги (такие как </p>).
Вот собственно и все. Удачного кодирования!
(обратно)Элементы XHTML должны быть правильно вложены
Элементы XHTML всегда должны быть замкнутыми
Элементы XHTML должны записываться в нижнем регистре
Документы XHTML должны иметь один корневой элемент
(обратно)В HTML некоторые элементы могут вкладываться друг в друга некорректно, например как в случае: <b><i>Этот текст жирный и наклонный</b></i>
В XHTML все элементы должны правильно вкладываться друг в друга, например: <b><i>Этот текст жирный и наклонный</i></b>
Примечание: Достаточно часто при создании вложенных списков забывают о том, что внутренний список должен находится между тегами <li> и </li>.
Неправильно:
<ul>
<li>Кофе</li>
<li>Чай
<ul>
<li>Черный чай</li>
<li>Зеленый чай</li>
</ul>
<li>Молоко</li>
</ul>
Правильно:
<ul>
<li>Кофе</li>
<li>Чай
<ul>
<li>Черный чай</li>
<li>Зеленый чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
Обратите внимание, что в примере "правильного" кода вставлен тег </li> после тега </ul>.
(обратно)Непустые элементы должны иметь замыкающий тег.
Неправильно:
<p>Это -- параграф
<p>Это -- еще один параграф
Правильно:
<p>Это -- параграф </p>
<p>Это -- еще один параграф </p>
(обратно)Пустые элементы должны иметь замыкающий тег или начальный тег должен заканчиваться символами />.
Неправильно:
Разрыв строки: <br>
Горизонтальная линия: <hr>
Изображение: <img src="happy.gif" alt="Веселое лицо ">
Правильно:
Разрыв строки: <br />
Горизонтальная линия: <hr />
Изображение: <img src="happy.gif" alt="Веселое лицо " />
(обратно)Спецификация XHTML определяет, что имена и атрибуты тегов должны записываться в нижнем регистре.
Неправильно:
<BODY>
<P>Параграф </P>
</BODY>
Правильно:
<body>
<p>Параграф </p>
</body>
(обратно)Все элементы XHTML должны быть вложены в корневой элемент <html>. Все другие элементы могут иметь вложенные элементы (потомков). Вложенные элементы должны быть парными и правильно вкладываться в свой родительский элемент. Общая структура документа имеет следующий вид:
<html>
<head> ... </head>
<body> ... </body>
</html>
(обратно) (обратно)При записи документа XHTML требуется использовать четкий синтаксис HTML.
[x]. Имена атрибутов должны записываться в нижнем регистре
[x]. Значения атрибутов должны заключаться в кавычки
[x]. Минимизация атрибутов запрещена
[x]. Атрибут id заменяет атрибут name
[x]. DTD XHTML определяет обязательные элементы
(обратно)Неправильно:
<table WIDTH="100%">
Правильно:
<table width="100%">
(обратно)Неправильно:
<table width=100%>
Правильно:
<table width="100%">
(обратно)Неправильно:
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
Правильно:
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
Ниже представлен список минимизированных атрибутов HTML и их запись в XHTML.
HTML XHTML compact compact="compact"
checked
declare
checked="checked"
declare="declare"
readonly readonly="readonly" disabled disabled="disabled" selected selected="selected" defer defer="defer" ismap ismap="ismap" nohref nohref="nohref" noshade noshade="noshade" nowrap nowrap="nowrap" multiple multiple="multiple" noresize noresize="noresize" (обратно)HTML 4.01 определяет атрибут name для элементов a, applet, frame, iframe, img, и map. В XHTML атрибут name исключен. Вместо него используется атрибут id.
Неправильно:
<img src="picture.gif" name="рис. 1" />
Правильно:
<img src="picture.gif" id="рис. 1" />
Примечание: Для взаимодействия со старыми браузерами в течение некоторого времени необходимо будет использовать оба атрибута name и id, с одинаковыми значениями атрибутов, например: <img src="picture.gif" id="рис. 1" name="рис. 1" />.
(обратно)Для совместимости XHTML с современными браузерами, необходимо добавить дополнительный пробел перед символом "/".
(обратно)Атрибут lang применим почти к любому элементу XHTML. Он определяет язык содержимого внутри элемента.
Если в каком-то элементе используется атрибут lang, то необходимо добавить атрибут xml:lang, например: <div lang="fr" xml:lang="fr">Bonjour, madam!</div>.
(обратно)Все документы XHTML должны иметь объявление DOCTYPE. Также должны присутствовать элементы html, head и body, а внутри элемента head должен присутствовать элемент title.
Шаблон минимального документа XHTML имеет следующий вид:
<!DOCTYPE Здесь определяется тип документа>
<html xmlns="">
<head>
<title>Здесь задается заголовок </title>
</head>
<body>
</body>
</html>
Примечание: Объявление DOCTYPE не является частью самого документа XHTML. Это объявление не является элементом XHTML и не должно иметь закрывающий тег.
Примечание: Атрибут xmlns в теге <html> является в XHTML обязательным. Однако программа проверки (валидатор) на сайте w3.org не высказывает претензий, когда этот атрибут отсутствует в документе XHTML. Это обусловлено тем, что атрибут "xmlns=" имеет фиксированное значение и будет добавлен в тег <html>, даже если он не был включен.
В следующем разделе представлена дополнительная информация об определении типа документа XHTML.
(обратно) (обратно)Стандарт XHTML определяет три определения типа документа (Document Type Definitions – DTD).
Наиболее распространенным является XHTML Transitional (Переходный).
Документ XHTML состоит из трех основных частей:
Тип документа DOCTYPE
Заголовок (Head)
Тело (Body)
Базовая структура документа имеет следующий вид:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
Объявление DOCTYPE всегда должно присутствовать в первой строке документа XHTML.
(обратно)Это простой (минимальный) документ XHTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"-strict.dtd">
<html>
<head>
<title>простой документ </title>
</head>
<body>
<p>простой параграф </p>
</body>
</html>
Объявление DOCTYPE определяет тип документа:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"-strict.dtd">
Оставшаяся часть документа выглядит как HTML:
<html>
<head>
<title>простой документ </title>
</head>
<body>
<p> простой параграф </p>
</body>
</html>
(обратно)[x]. DTD определяет синтаксис Web-страницы на SGML.
[x]. DTD используется приложениями SGML, такими как HTML, для определения правил, которые применяют при разметке документов определенного типа, включая множество объявлений элементов и сущностей.
[x]. XHTML задан в определении типа документа SGML или 'DTD'.
[x]. DTD XHTML описывает точным, понятным для компьютера языком допустимый синтаксис и грамматику разметки XHTML.
В настоящее время имеется три типа документов XHTML:
[x]. STRICT
[x]. TRANSITIONAL
[x]. FRAMESET
XHTML 1.0 определяет три типа документов XML, которые соответствуют трем DTD: Strict, Transitional, и Frameset.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"-strict.dtd">
Это определение DTD используется, когда требуется получить действительно четкую разметку, не имеющую в представлении никакого беспорядка. Оно используется вместе с каскадными таблицами стилей.
(обратно)<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"-transitional.dtd">
Используйте это определение, когда надо воспользоваться средствами представления HTML, и когда необходимо обеспечить поддержку для браузеров, которые не понимают каскадные таблицы стилей.
(обратно)<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"-frameset.dtd">
Укажите это определение, когда будут использоваться фреймы HTML, чтобы разделить окно браузера на два или большее количество фреймов.
(обратно) (обратно) (обратно)Чтобы преобразовать Web-сайт с языка HTML на XHTML, необходимо знать правила синтаксиса XHTML, которые были рассмотрены выше. Затем необходимо выполнить следующие действия (в указанном порядке):
(обратно)В качестве первой строки каждой страницы добавляют следующее объявление DOCTYPE:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"-transitional.dtd">
Лучше использовать сначала переходное определение DTD (Transitional). Можно выбрать и строгое определение DTD (Strict), но оно немного слишком "строгое" на начальном этапе, и ему труднее соответствовать.
(обратно)Web-cтраницы должны иметь объявление DOCTYPE, если желательно, чтобы они были определены как правильные согласно XHTML.
Надо помнить, однако, что более новые браузеры (такие как Internet Explorer 6) могут обрабатывать документ по-разному, в зависимости от объявления <!DOCTYPE>. Если браузер читает документ с DOCTYPE, то он может интерпретировать документ как "правильный". Плохо сформированный XHTML может выводиться иначе, чем при отсутствии DOCTYPE.
(обратно)Так как XHTML различает регистр символов, и поскольку XHTML допускает имена тегов и атрибутов HTML только в нижнем регистре, то необходимо выполнить глобальный поиск и замену всех тегов в верхнем регистре тегами, записанными в нижнем регистре. Аналогичную процедуру необходимо выполнить также для имен атрибутов.
(обратно)Так как рекомендация W3C для XTML 1.0 говорит, что значения всех атрибутов должны быть заключены в кавычки, то необходимо проверить все Web-страницы, чтобы значения всех атрибутов были правильно заключены в кавычки. Это трудоемкая работа, поэтому рекомендуется в будущем никогда не забывать использовать кавычки для значений атрибутов.
(обратно)В XHTML пустые теги не разрешены. Теги <hr> и <br> должны быть заменены соответственно на <hr /> и <br />.
Это создает проблему с браузером Netscape, который неправильно интерпретирует тег <br/>. Но к счастью, по неизвестной причине, замена его на <br /> прекрасно работает. В этом случае также необходимо выполнить глобальный поиск и замену соответствующих тегов.
Некоторые другие теги (такие как тег <img>) страдают от такой же проблемы. В данном случае можно не использовать тег замыкания </img>, а добавить /> в конце тега.
(обратно)После выполнения всех преобразований все имеющиеся страницы проверяются согласно официальному DTD W3C с помощью следующей ссылки на XHTML Validator (). Возможные не выявленные на начальном этапе ошибки надо будет отредактировать вручную. Наиболее распространенной ошибкой бывает отсутствие в списках тегов замыкающего </li>.
Имеются ли какие-либо специальные инструментальные средства для преобразования? Да, можно использовать утилиту TIDY.
Бесплатная утилита Дейва Рагетта HTML TIDY (/) предназначена для проверки кода HTML. Она также отлично справляется с трудночитаемыми разметками документов, созданными специальными редакторами HTML и инструментальными средствами конвертации, и может помочь определить места кода, требующие дополнительного внимания, чтобы сделать Web-страницы более доступными для людей с физическими недостатками.
(обратно) (обратно)Документ XHTML проверяется согласно Определению типа документа.
Документ XHTML проверяют на соответствие определению типа документа (DTD). Прежде чем можно будет проверить файл XHTML, необходимо добавить в качестве первой строки правильный DTD.
Strict DTD содержит элементы и атрибуты, которые не были исключены и не связаны с фреймами:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"-strict.dtd"
Transitional DTD содержит все из Strict DTD плюс исключенные элементы и атрибуты:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"-transitional.dtd"
Frameset DTD содержит все из Transitional DTD плюс фреймы:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"-frameset.dtd"
Простой документ XHTML имеет следующий вид:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"-strict.dtd">
<html>
<head>
<title>простой документ </title>
</head>
<body>
<p>простой параграф </p>
</body>
</html>
(обратно) (обратно)Модель модуляризации XHTML определяет модули XHTML.
XHTML является простым, но большим языком. XHTML содержит большинство функций, которые могут понадобиться Web-разработчику.
Для некоторых целей XHTML является слишком большим и сложным, а для других целей он слишком прост.
Разделяя XHTML на модули, консорциум W3C создал небольшие и строго определенные множества элементов XHTML, которые можно использовать отдельно для простых устройств, а также в соединении с другими стандартами XML в больших и более сложных приложениях.
Используя модульность XHTML, разработчики приложений могут:
[x]. Выбирать элементы, которые будут поддерживаться устройством, используя стандартные строительные блоки XHTML.
[x]. Добавлять в XHTML расширения, используя XML, и не нарушая стандарт XHTML.
[x]. Упрощать XHTML для таких устройств, как карманные компьютеры-коммуникаторы, мобильные телефоны, ТВ устройства, и устройства бытовой техники.
[x]. Расширять XHTML для сложных приложений, добавляя новые функции XML (такие как MathML, SVG, Voice and Multimedia).
[x]. Определять профили XHTML, такие как XHTML Basic (подмножество XHTML для мобильных устройств).
(обратно)Консорциум W3C разделил определение XHTML на 28 модулей:
Имя модуля Описание модуль Applet Определяет исключенный элемент applet модуль Base Определяет элемент base модуль Basic Forms Определяет базовые элементы форм модуль Basic Tables Определяет базовые элементы таблиц модуль Bi-directional Text Определяет элемент bdo модуль Client Image Map Определяет элементы карт-изображений на стороне браузера модуль Edit Определяет элементы редактирования del и ins модуль Forms Определяет все элементы, используемые в формах модуль Frames Определяет элементы, связанные с фреймами модуль Hypertext Определяет элемент a модуль Iframe Определяет элемент iframe модуль Image Определяет элемент img модуль Intrinsic Events Определяет атрибуты событий, такие как onblur и onchange модуль Legacy Определяет исключенные элементы и атрибуты модуль Link Определяет элемент link модуль List Определяет элементы списка li, ul, dd, dt, и dl модуль Metainformation Определяет элемент meta модуль Name Identification Определяет исключенный атрибут name модуль Object Определяет элементы object и param модуль Presentation Определяет элементы представления, такие как b и i модуль Scripting Определяет элементы script и noscript модуль Server Image Map Определяет элементы карт-изображений на сервере модуль Structure Определяет элементы html, head, title и body модуль Style Attribute Определяет атрибут style модуль Style Sheet Определяет элемент style модуль Tables Определяет элементы, используемые в таблицах модуль Target Определяет атрибут target модуль Text Определяет элементы контейнера текста, такие как p и h1
Исключенные элементы не должны использоваться в XHTML.
(обратно) (обратно)Теги XHTML могут иметь атрибуты. Атрибуты каждого тега перечислены в описании тега. Здесь представлены базовые атрибуты и атрибуты языка, которые являются стандартными для всех тегов (с небольшими исключениями).
Недействительны в элементах base, head, html, meta, param, script, style и title.
Атрибут Значение Описание class правило_класса или правило_стиля Класс элемента id имя_id Уникальный id элемента style определение_стиля Встроенное определение стиля title текст_подсказки Текст для вывода подсказки
(обратно)Недействительны в элементах base, br, frame, frameset, hr, iframe, param, и script.
Атрибут Значение Описание dir ltr | rtl Задает направление текста lang код_языка Задает код языка
(обратно)Атрибут Значение Описание accesskey символ Задает клавиатурное сокращение для доступа к элементу tabindex число Задает порядок элемента при переходе по клавише табуляции
(обратно) (обратно)Новым в HTML 4.0 была возможность для событий HTML запускать в браузере действия, такие как запуск сценария JavaScript, когда пользователь щелкал на элементе HTML. Ниже представлен список атрибутов, которые можно вставлять в теги HTML для определения действий событий.
Более подробно об использовании этих событий в программировании можно узнать в руководстве по JavaScript и руководстве по DHTML.
Действительны только в элементах body и frameset
Атрибут Значение Описание onload сценарий Сценарий, который выполняется при загрузке документа onunload сценарий Сценарий, который выполняется при выгрузке документа
(обратно)Действительны только в элементах форм.
Атрибут Значение Описание onchange сценарий Сценарий, который выполняется при изменении элемента onsubmit сценарий Сценарий, который выполняется при отправке формы onreset сценарий Сценарий, который выполняется при сбросе формы onselect сценарий Сценарий, который выполняется при выборе элемента onblur сценарий Сценарий, который выполняется, когда элемент теряет фокус onfocus сценарий Сценарий, который выполняется, когда элемент получает фокус
(обратно)Недействительны в элементах base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style и title.
Атрибут Значение Описание onkeydown сценарий Действие после нажатия клавиши onkeypress сценарий Действие после нажатия и отпускания клавиши onkeyup сценарий Действие после отпускания клавиши
(обратно)Недействительны в элементах base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style и title.
Атрибут Значение Описание onclick сценарий Что делать при щелчке мыши ondblclick сценарий Что делать при двойном щелчке мыши onmousedown сценарий Что делать при нажатии кнопки мыши onmousemove сценарий Что делать при перемещении указателя мыши onmouseover сценарий Что делать при перемещении указателя мыши над элементом onmouseout сценарий Что делать при смещении указателя мыши с элемента onmouseup сценарий Что делать при отпукании нажатой кнопки мыши
(обратно) (обратно)В данном руководстве было показано, как создавать более строгие и четкие страницы HTML.
Главное заключается в том, что все элементы XHTML должны быть правильно вложены, документы XHTML должны быть синтаксически правильными, все имена тегов должны быть записаны в нижнем регистре, и все элементы XHTML должны быть закрыты.
Важно также то, что все документы XHTML должны иметь объявление DOCTYPE, и что должны присутствовать элементы html, head, title, и body.
Дополнительную информацию о XHTML можно найти в любом справочном руководстве по XHTML.
(обратно)Следующий шаг состоит в изучении CSS и JavaScript.
CSS используется для управления стилем и компоновкой Web-страниц.
При использовании CSS все форматирование можно вынести из документа HTML и сохранить в отдельном файле.
CSS предоставляет полный контроль над компоновкой, не создавая путаницу в содержимом документа.
Познакомиться с каскадными таблицами стилей можно в любом руководстве по CSS.
(обратно)Язык JavaScript может сделать Web-сайт более динамичным.
Статичный Web-сайт вполне подходит для вывода простого содержимого, но динамичный Web-сайт может реагировать на события и позволяет организовать взаимодействие с пользователем.
JavaScript является наиболее популярным языком сценариев в Интернет, и он работает со всеми основными браузерами.
Более подробно познакомиться с JavaScript можно с помощью любого руководства по JavaScript.
(обратно) (обратно) (обратно) (обратно) (обратно)
Комментарии к книге «Основы программирования на JavaScript», Марк Кан
Всего 0 комментариев