Курс посвящен изучению языка программирования JavaScript.
JavaScript является языком сценариев (скриптов), который применяют в основном для создания на Web-страницах интерактивных элементов. Его можно использовать для построения меню, проверки правильности заполнения форм, смены изображений или для чего-то еще, что можно сделать на Web-странице.
Автор: Кан Марк
Название: Основы программирования на JavaScript
Лекция 1. Язык сценариев JavaScript
Лекция 4. Функции и концепция объектов
Лекция 5. Строки, числа и массивы
Лекция 6. Объектная модель документа
Лекция 7. Объект документа и объект окна
Лекция 8. Основы объектно-ориентированного программирования
Лекция 9. Наследование и замыкание
Лекция 10. Основы приложений AJAX
Лекция 11. Обработка ошибок в JavaScript
Так как
Код
При создании кода
Что касается текстового редактора, то в Windows имеется редактор NotePad. Хотя этого будет достаточно для редактирования
Ну, а теперь можно перейти к созданию сценария
Прежде всего, необходимо узнать, как добавить сценарий
Любой из этих методов вполне допустим, но они имеют разное назначение. Если имеется небольшой код, который будет использоваться только на одной странице, то размещение его между тегами
Ниже приведены примеры двух способов подключения кода
<script type="text/javascript"></script>
<script type="text/javascript" src="scripts/JavaScriptFile.js"></script>
В первом примере, код
<!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>
Сохраните этот файл где-нибудь на своем компьютере с расширением
Почти любой язык программирования в мире имеет дело с объектами, называемыми "переменными", и
var apples = 5;
Необходимо сделать два важных замечания в отношении этого небольшого фрагмента кода. Первое: требуется помнить о том, что
Второе: обратите внимание на точку с запятой (
Итак, мы определили в коде, что имеется
var apples = 5;
alert('Имеется ' + apples + ' яблок!');
Если протестировать этот сценарий, то на экране появится окно с сообщением "
Итак мы имеем строку "
Что если мы хотим предложить пользователю съесть яблоко? Можно, например, спросить, сколько яблок он хотел бы съесть:
var apples = 5;
alert('Имеется ' + apples + ' яблок!');
var eat = prompt('Сколько яблок вы хотите съесть?', '1');
Поэтому, если пользователь съел
var apples = 5;
alert('Имеется ' + apples + ' яблок!');
var eat = prompt('Сколько яблок вы хотите съесть?', '1');
apples -= parseInt(eat);
alert('А теперь имеется только' + apples + ' яблок!');
Здесь мы видим два новых элемента. Прежде всего, обращение к функции
Затем, оператор
apples = apples - parseInt(eat);
Это означает в точности то же самое и может быть немного легче для понимания. Теперь, когда известно, сколько осталось яблок, мы еще раз сообщаем пользователю эту информацию.
Существуют другие операторы, подобные
+
-
/
*
+=
-=
/=
*=
Вот и все для начала. В следующей лекции мы добавим в код проверку, введем операторы
При тестировании сценария, написанного в предыдущей лекции, можно заметить, что результат, получаемый из
Так как в этом сценарии имеется только
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(условие){
// код, который выполняется, когда справедливо условие if
} else {
// код, который выполняется, когда условие if ложно
}
Необходимо отметить открывающую и закрывающую скобки,
Две косые черты
В
// это однострочный комментарий
/*
если требуется более длинный комментарий, то
лучше использовать "блочный комментарий".
Этот комментарий является блочным комментарием,
и полностью игнорируется при выполнении кода
*/
Для короткого сценария комментарии не всегда нужны. Но когда код длинный, они становятся необходимостью. Программистам очень часто приходится просматривать тысячи строк кода в попытке найти место для исправления ошибки. Если код имеет хорошие комментарии, то достаточно легко почти точно определить, где находится нужный код.
Вернемся к нашему оператору
if(eaten > 5){
alert('Простите, но имеется только 5 яблок.
Вы не можете съесть ' + eaten + ' яблок!');
} else {
apples -= eaten;
alert('А теперь имеется только ' + apples + ' яблок!');
}
Можно видеть, что условием является
Существует два других аналогичных знака
В приведенном выше коде мы сообщаем пользователю о том, что он ввел значение больше
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 + ' яблок!');
}
Теперь все это должно быть понятно читателю. Прежде всего проверяется, что введено допустимое значение. Если значение недопустимо, выводится соответствующее сообщение. Затем проверяется, что введенное число не превышает количество существующих яблок, а затем - что это число не является отрицательным. Если все эти проверки проходят успешно, пользователь сможет съесть столько яблок, сколько захочет. В коде сделано еще одно изменение, вместо
Если пользователь ввел каким-либо образом недопустимое значение, то можно попросить его повторно ввести количество яблок, которое он хочет съесть. Одним из способов сделать это было бы копирование всего кода несколько раз. Однако обычно это не самое лучшее решение. Что, если пользователь вводит недопустимое значение снова и снова? Можно продолжить копирование кода, но легко видеть, что это крайне неэффективно и очень трудно поддерживать код в рабочем состоянии.
В этом случае лучшим решением будет использование так называемой функции. Функция содержит код, который выполняет определенную задачу. Мы уже видели использование функций
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('Яблок больше нет!');
}
}
}
Здесь весь наш код записан в виде функции с именем
В конце этой лекции будет рассмотрена область действия переменной. Как можно видеть, в последнем примере переменная
Чтобы увидеть эту концепцию в действии, напишем две простые функции счета:
function counting1(){
var count = 0;
count++;
alert(count);
}
var count = 0;
function counting2(){
count++;
alert(count);
}
Если запустить этот пример в браузере и щелкнуть на каждой кнопке несколько раз, то можно заметить, что
Оператор
Каждый раз, когда функция
Теперь посмотрим на
Теперь читатель получил общее понимание некоторых фундаментальных понятий программирования и
В предыдущей лекции были рассмотрены операторы
Мы знаем теперь, как проверять данные, но при создании кода
Имя: Ваш любимый цвет: Синий Желтый
Красный Черный
Зеленый Другой
Фамилия:
Адрес 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>
Прежде всего необходимо узнать, как создать объект
На любые элементы внутри формы (поля ввода, поля выбора, флажки и т.д) можно ссылаться с помощью конструкции
alert('Имя: ' + document.forms.tutform.elements.firstname.value);
Если щелкнуть на этой кнопке, а затем отправить учебную форму, то появится уведомление с тем значением, которое было введено в поле
<SCRIPT TYPE="text/javascript">
function validateForm(){
// код проверки формы находится здесь
}
</SCRIPT>
<FORM ONSUBMIT="return validateForm();">
<!-- элементы формы находятся здесь -->
</FORM>
Теперь, зная, как получить доступ к форме и элементам на этой форме, выполним некоторые основные проверки. Распространенной задачей является проверка, что именно пользователь ввел в поле ввода. Например, надо проверить, что пользователь ввел свое имя.
Как видно из предыдущего фрагмента кода, свойство "
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;
}
Важными моментами, которые необходимо отметить в этой функции, являются строки
Другим важным полем для проверки в демонстрационной форме будет набор радио-кнопок "
Радио-кнопки и флажки на форме представляют специальную ситуацию. Часто имеется несколько радио-кнопок с одним и тем же именем, что почти всегда исключено для полей ввода, полей выбора и т.д.:
<input type="radio" name="color" value="blue">Синий
<input type="radio" name="color" value="red">Красный
<input type="radio" name="color" value="green">Зеленый
В связи с этим существует способ доступа ко всем радио-кнопкам с одним именем. Значение
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(var i=0; i<radios.length; i++){
Внутри скобок имеется три значения, разделенные точкой с запятой. Этими значениями, по отдельности, являются:
var i=0
i<radios.length
i++
Первое значение является просто заданием значения переменной. Это должно быть теперь
понятно без проблем. Второе значение является условием проверки. Цикл
"
Говоря более простым языком, цикл
1 задает
2 проверяет, что
3 если это справедливо (
4 после выполнения кода в цикле
5 переходит к шагу 2, пока выполняется условие
Существует другой тип цикла, который сейчас будет рассмотрен, - так называемый цикл
var i=0;
while(i<radios.length){
if(radios[i].checked) return true;
i++;
}
alert('Вы должны выбрать цвет!');
return false;
Можно видеть, что здесь в цикле
i<radios.length
чем-то отличается от того, что было написано раньше. Эта проверка происходит в скобках сразу после
В этих циклах осталось объяснить еще одну вещь:
Все эти числа могут показаться странными. Почему
В форме осталось проверить еще ввод адреса e-mail. Это в действительности достаточно сложное для проверки поле, и правильная ее реализация выходит за рамки того, что изучается в этой лекции, но можно выполнить некоторую базовую проверку. Что нужно сделать? Мы знаем, что любой адрес e-mail должен содержать один и только один символ
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;
}
Здесь имеются две новые сходные функции, которые требуют пояснения. Функция
Аналогично, функция
Поэтому в нашем коде первый оператор
Следующий оператор соединяет
Третий оператор по сути идентичен первому, только он проверяет
Наконец, четвертый оператор
Недостаток этого метода состоит в том, что простая строка "
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;
}
В предыдущей лекции мы рассмотрели основы работы с полями форм и немного познакомились с функциями. Если какие-то из этих понятий вызывают затруднения, то желательно еще раз прочитать последнюю лекцию.
Как мы уже знаем, функции в
<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"> раз.
Вы щелкнули на этой странице раз.
В предыдущей лекции оператор
Предыдущий пример может показаться достаточно знакомым. Так же, как и раньше, определяется переменная и функция. Изменение состоит в том, что вместо вызова функции
Существует множество событий подобных
Можно также заметить, что ссылка на поле ввода делается другим образом. Ранее говорилось, что для указания поля необходимо использовать
Поскольку это поле ввода используется как счетчик, то нежелательно, чтобы пользователи щелкали на нем и изменяли его значение. Здесь на помощь приходит другое связывание,
Событие
Если указатель
Давайте посмотрим на другой пример:
<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="Банан"> Банан
Яблоко Апельсин Груша Банан
Можно видеть, что событие
Вернемся к функциям и рассмотрим передачу функции аргументов. В предыдущем примере
function myFunction(arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10){
// здесь располагается код
}
Во многих случаях может понадобиться функция, которой требуется определенное количество аргументов, но не всегда требуются все. В
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
}
}
Можно видеть, что в коде выполняется простая проверка
Поэтому, если
Как быть, когда трудно определить, сколько потребуется аргументов? Можно иметь функцию, которая получает от
function myFunction(){
for(var i=0; i<arguments.length; i++){
alert(arguments[i].value);
}
}
Этот код сообщит значение всех переданных ему объектов. Если передать
Один из наиболее интересных аспектов
<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
В этом небольшом фрагменте кода происходит очень многое. Вначале просто определяют две функции:
Таким образом функция
Это в действительности одно из наиболее мощных свойств
Другим важным свойством функций является возможность вложения их друг в друга.
Кроме вложения функций, важно отметить, что имеется несколько различных способов объявления функций:
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);');
}
В этом примере функции
В следующей лекции будут рассмотрены массивы.
До сих пор мы рассматривали языковые конструкции
В
var myString = 'Hello, World!';
var myString = new String('Hello, World!');
Первый метод используется наиболее часто. Второй метод применяется редко и только для гарантии, что получаемый объект является строкой. Например:
var n = 5;
var s = new String(n*20);
В этом примере s будет строкой "
Строковые объекты (
Единственное важное различие состоит в том, что
Что, если в строке имеется апостроф? Следующий код работать не будет:
var n = 'The dog took it's bone outside';
Легко видеть, что апостроф в "
Здесь можно сделать две вещи. Так как строка определяется с помощью одиночных или двойных кавычек, то можно задать строку с помощью двойных кавычек. Другая возможность состоит в экранировании апострофа. Чтобы экранировать символ, необходимо просто подставить перед ним символ
var n = "The dog took it's bone outside";
var n = 'The dog took it\'s bone outside';
Если в строке должен присутствовать символ
В предыдущей лекции мы встречались с функциями
Тот факт, что функции
Существует несколько других полезных функций для работы со строками, которые мы перечислим и кратко поясним.
[x].
[x].
[x].
[x].
[x].
Примеры всех приведенных выше функций:
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("alert('Hello, World!')");
В этом примере будет выведено сообщение
Работа с числами в
Объект
Двумя наиболее распространенными задачами, связанными с числами, являются преобразование числа в строку и строки в число. Как уже говорилось,
var n = parseInt("3.14"); // 3
var n = parseFloat("3.14") // 3.14
Функция
Существует также несколько методов, которые можно использовать, когда надо преобразовать число в строку:
var n = 5;
var m = n.toString();
var m = n+'';
var m = new String(n);
Как говорилось ранее, последний метод может быть немного непривычным, поэтому предполагается, что пользователь будет держаться от него в стороне, если только не понадобится использовать объект
Если необходимо выполнить строковую операцию с переменной, то необходимо быть уверенным, что имеется строка. Если, например, имеется запись года из 4 цифр и ее надо преобразовать в 2 цифры:
var year = 2000;
var sYear = year.toString();
var year2 = sYear.substr(sYear.length-2);
Можно было бы также легко вычесть
Массив является по сути списком элементов. Каждый элемент массива может быть чем угодно, но обычно они связаны друг с другом. Если, например, необходимо отследить
var students = new Array();
students[0] = 'Sam';
students[1] = 'Joe';
students[2] = 'Sue';
students[3] = 'Beth';
Как можно видеть, определить массив очень просто, так же, как и присвоить значения его элементам. Однако пример выше имеет слишком много кода для относительно небольшого результата. Нет ничего удивительного в том, что существует несколько методов для создания массива. Значительно более компактным будет следующий пример:
var students = ['Sam', 'Joe', 'Sue', 'Beth'];
Это код создает точно такой же массив, что и предыдущий пример, но, как можно видеть, он значительно более компактный и ничуть не сложнее для понимания. Скобки (
Что можно теперь сделать с этим массивом студентов? Чтобы обратиться к любому элементу массива, необходимо знать его индекс. В первом примере можно видеть, что в скобках находятся числа
Наиболее распространенной задачей при работе с массивами, помимо изменения его данных, является проверка его длины, обычно для того, чтобы можно было перебрать весь массив и выполнить некоторую задачу с каждым элементом.
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]);
}
Важный момент, который необходимо знать о массивах, состоит в том, что каждый элемент массива может содержать любой произвольный объект. В этих примерах каждый элемент массива является строкой, но они могут быть также числами, объектами, функциями, даже другими массивами. Электронная таблица (такая, как
var spreadsheet = [
['A1', 'B1', 'C1', 'D1'],
['A2', 'B2', 'C2', 'D2'],
['A3', 'B3', 'C3', 'D3'],
['A4', 'B4', 'C4', 'D4']
];
Переносы строк в
Можно видеть, что здесь имеется
var col2 = spreadsheet[1];
alert(col2[2]);
// или
alert(spreadsheet[1][2]);
Оба фрагмента кода делают одно и то же, выводят значение "
Существует несколько распространенных операций, которые выполняются с массивами. Первой является добавление элемента в конец массива. Вернемся к массиву
var students = ['Sam', 'Joe', 'Sue', 'Beth'];
students[4] = 'Mike';
students[students.length] = 'Sarah';
students.push('Steve');
// теперь массив содержит 7 элементов: ['Sam', 'Joe', 'Sue', 'Beth', 'Mike', 'Sarah', 'Steve']
Здесь также существует несколько способов для выполнения этой задачи. Первый метод,
Не так часто, но иногда необходимо также удалить объект из массива. В этом случае задействуется функция
var students = ['Sam', 'Joe', 'Sue', 'Beth', 'Mike', 'Sarah', 'Steve'];
students.splice(4, 1);
['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;
}
}
}
Имя студента:
Добавить этого студента
Удалить этого студента
Студенты:
Единственным новым моментом здесь является слово
Часто бывает необходимо преобразовать массив в строку или строку в массив. Имеется две функции, которые могут легко это сделать:
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',
// так что снова получается исходная строка
Еще две полезные функции для работы с массивами -
var students = ['Sam', 'Joe', 'Sue', 'Beth'];
while(students.length>0){
alert(students.pop());
}
К сожалению, при этом массив был уничтожен: он теперь пуст. Иногда именно это и надо сделать. Если требуется просто очистить массив, то проще всего задать его длину (
students.length = 0
Теперь массив пуст. Даже если снова задать длину массива больше
Все использованные до сих пор массивы называются "индексными массивами", так как каждый элемент массива имеет индекс, который необходимо использовать для доступа к элементу. Существуют также "ассоциативные массивы", в которых каждый элемент массива ассоциирован с именем в противоположность индексу:
var grades = [];
grades['Sam'] = 90;
grades['Joe'] = 85;
grades['Sue'] = 94;
grades['Beth'] = 82;
Ассоциативные массивы действуют немного иначе, чем индексные. Прежде всего, длина массива в этом примере будет равна
for(student in grades){
alert("Оценка " + student + "будет: " + grades[student]);
}
Синтаксис цикла
Последнее замечание о массивах состоит в том, что в действительности можно объединять ассоциативные и индексные массивы, хотя это обычно не рекомендуется, так как может вызывать некоторые проблемы. При правильном использовании, однако, можно с успехом это применять.
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]]);
}
Хотя это может показаться немного сложным, здесь нет ничего такого, о чем не говорилось в этой лекции.
Теперь читатель должен достаточно хорошо понимать основные типы данных
Эта лекция посвящена Объектной модели документа, или коротко
Прежде всего, необходимо понять, что с точки зрения браузера страница
Те, кто знает, что такое документ
Будем надеяться, что читатель в какой-то степени знаком с
<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>
Это просто обычная страница
Изображение может помочь лучше понять отношения предок-потомок в этом коде.
Блок-схема документа
Необходимо также отметить атрибуты в некоторых из этих тегов. Например, тег
Теперь, имея общее представление о компоновке страницы, можно начинать ее модификацию. Начнем с создания простого эффекта изменения изображения:
<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 события изображения:
Одной из задач, которая становится все более распространенной в современных приложениях
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
Возможно вам не приходилось ранее использовать тег
Прежде всего здесь имеется новая функция:
<tr>
<td>
<img src="delete.gif">
</td>
<td>
<input name="Name1">
</td>
<td>
<input name="Email1">
</td>
</tr>
Другими словами, мы создали 7 элементов: 1
После создания всех этих элементов остается в действительности поместить их в документ. Каждый элемент на странице имеет встроенную функцию
Вот и все! Теперь у нас есть новый элемент
element.setAttribute("name", "elementName")
по сути то же самое, что
element.name="elementName"
Однако задание атрибута непосредственно, как в предыдущем примере, может иногда вызывать некоторые проблемы для различных браузеров или для некоторых специфических атрибутов. Поэтому хотя любой метод обычно будет работать, предпочтительным является первый метод, использующий
Необходимо также позаботиться о кнопке удаления. Мы уже знаем, что кнопка удаления для первой строки полей не создается, но необходимо заставить ее работать для всех остальных. Это делается в строках кода 15-16. Здесь к изображению добавлена функция
Взглянув на функцию
Поэтому
Взглянув еще раз на строку 34, можно теперь увидеть, что она просто говорит: "
Ко всем потомкам элемента можно обратиться с помощью атрибута
Чтобы увидеть, как это работает, давайте напишем сценарий для раскраски чередующихся строк
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: Раскрасьте таблицу
При рассмотрении этого небольшого фрагмента кода мало что нужно пояснять в том, как можно получить этот интересный небольшой эффект. Код начинается с получения ссылки на первый элемент
Здесь не будет обсуждаться в данный момент изменение стилей, но достаточно сказать, что
После задания цвета фона берется следующий элемент
С целью рассмотрения оператора
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];
}
}
Обе эти функции делают то же самое, что и первая функция
Другая функция использует новую функцию
Работа с текстом немного отличается от работы с другими элементами
<div id="ourTest">this is <a href="link.html">a link</a> and an image: <img src="img.jpg"></div>
имеет четыре корневых элемента: текстовый узел со значением "
document.getElementById('ourTest').childNodes[2].nodeValue = 'our new text';
Что, если требуется добавить к этому еще текст, но не в конце, а перед "
var newText = document.createTextNode('our new text');
var ourDiv = document.getElementById('ourTest');
ourDiv.insertBefore(newText, ourDiv.childNodes[1]);
Первая строка показывает, как создать текст с помощью
По большей части это все манипуляции с
В качестве последнего замечания к этой лекции: одним из наиболее полезных средств при попытке протестировать или отладить код
Теперь можно включить свое воображение и экспериментировать, так как почти нет ничего такого, чего нельзя сделать со страницей
В предыдущей лекции рассматривалось использование объекта документа. Были показаны функции
Объект
Как упоминалось в шестой лекции, каждый объект на странице является потомком или предком какого-то другого объекта. Все это представляет большое дерево. Объект
Объект
В связи с этим не требуется писать
Прежде всего объект
| Свойство | Описание |
|---|---|
| возвращает текущий | |
| Если окно было открыто другим окном (с помощью | |
| Возвращает верхнюю позицию окна. Отметим, что эти значения в | |
| Возвращает левую позицию окна с такими же различиями, как и для |
Положение окна на экране пользователя редко бывает необходимо, но два других свойства,
http://www.somesite.com/page.asp?action=browse&id=5#someAnchor. Этот
| http://www.somesite.com/page.asp | |
| Строка запроса: | action=browse&id=5 |
| Анкер: | someAnchor |
Так как
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 '';
}
Для предыдущего
window.location='/page.asp?name='+escape(SomeInputBox.value);
Функция
Вернемся к свойствам
Функция
var newWindow=window.open('', 'newWindow', 'width=200,height=200');
newWindow.document.write('Это окно будет закрыто через 2 секунды');
setTimeout(function(){ newWindow.close(); }, 2000);
Третий аргумент
[x].
[x].
[x].
[x].
Полное описание
Так как мы открываем пустое окно, то первый аргумент будет пустым. Для открытия страницы
В этом примере для объекта
Функция
Можно видеть, что в этом примере используется еще одна новая функция
Существуют еще две другие функции:
var myTimeout = setTimeout("alert('Hi!');", 500);
clearTimeout(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
Существует также функция
Важно отметить, что во время ожидания выполнения заданного кода функциями
Как говорилось ранее, свойство окна
<!--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>
Отметим, что это работает, только если
Одной из наиболее часто используемых функций в
Мы уже видели различные свойства объекта
[x].
[x].
[x].
[x].
[x].
[x].
[x].
Как мы видели в предыдущей лекции, почти все эти свойства можно продублировать с помощью
[x].
[x].
[x].
Существует еще одно свойство,
Существует концепция, называемая "Тип документа", которая задает для Web-браузера определенный набор правил. Изменение типа документа заставляет некоторые свойства переместиться из
Проще говоря, это является полным беспорядком, поэтому две следующие функции (будем надеятся) выдадут позицию прокручивания и размеры окна независимо от браузера.
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}
}
Тремя последними свойствами документа являются
Поэтому, если вы щелкнули на ссылке, чтобы попасть на эту страницу, то
Последняя тема этой лекции, переменная
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);
}
Три эти функции выполняют запись, чтение и стирание
function addToCounter(){
var counter = readCookie('myCounter');
if(counter){
counter = parseInt(counter);
} else {
counter = 0;
}
writeCookie('myCounter', counter+1, 1);
}
function showCounter(){
alert(readCookie('myCounter'));
}
Если увеличить счетчик
Это почти все об объектах окна и документа. В следующей лекции речь пойдет об объектно-ориентированном коде.
Почти каждый современный язык программирования имеет некоторый метод записи объектно-ориентированного (ОО) кода. Если вы знакомы с такими языками, как
Классы в этих языках позволяют быстро создавать объекты с одинаковыми свойствами и методами, не требуя при этом заново определять все эти свойства и методы. В терминах структур мы имеем классы, а внутри этих классов - функции и переменные, а внутри каждой из этих функций - дополнительные переменные. Каждая функция в классе идеально работает с переменными и другими функциями, внутренними для этого класса.
Структура
Для начала необходимо объяснить, как объекты действуют в
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); }};
Оба эти фрагмента кода создают одну и ту же переменную
Как можно видеть, объекты в
var myAnimal = {
name: 'felix',
species: 'cat',
talk: function(){ alert('Meow!'); },
callOver: function(){ alert(this.name+' ignores you'); },
pet: function(){ alert('Purr!'); }
}
Мы имеем переменную
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'
В этом примере создана одна функция
Обычно говорят, что
Можно переписать функцию
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.prototype.sleep = function(){ alert(this.name+' falls asleep'); };
Этот способ не только быстрее, но к тому же нам больше не требуется отслеживать каждого
Существует более быстрый способ добавления прототипов. С помощью объектного литерала можно одновременно задать любое количество прототипов свойств или методов.
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.prototype = {
sleep: function(){ alert(this.name+' falls asleep'); }
}
то предыдущие прототипы,
Прототипы можно также использовать для расширения встроенных объектов
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());
Это может быть очень полезным инструментом при правильном использовании. Можно реализовать
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.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
Как можно видеть, теперь необходимо печатать
Способ определения переменных в объекте определяет, какие методы этого объекта можно использовать для доступа к этим переменным. В
1 Скрытая (
2 Открытая (
3 Привилегированная (
4 Прототипированная (
5 Статическая (
Чтобы понять различия между уровнями, давайте рассмотрим пример:
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;
Мы видим, что существует несколько уровней доступа. Как было сказано ранее, все скрытые, привилегированные и открытые функции и переменные копируются всякий раз, когда создается новый экземпляр объекта. Обычно почти все, что нужно сделать, можно реализовать с помощью прототипированных и открытых переменных. В связи с этим обычно лучше избегать использования скрытых, привилегированных и статических переменных, если это не требуется специально.
В восьмой лекции были рассмотрены основы объектно-ориентированного программирования в
В предыдущей лекции была создана функция
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!'); }
}
Теперь можно создать любое количество котов, но как быть, если мы захотим создать объект другого типа, например, собаку? В этом случае понадобится создать совершенно новую функцию, со своими собственными прототипами. Если два объекта
используют одни и те же функции (например, можно было бы добавить функции
По сути наследование позволяет определить объекты "предки" и "потомки". Потомок наследует все свойства своего предка. Можно было создать, например, функцию
Проблема в том, что
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(); // Гав!
Хотя это работает, мы немного ограничены в своих возможностях. Например, прототипирование не действует при использовании этого метода: все прототипы, заданные на
Лучшим подходом является прототипирование всего родительского класса на классе-потомке. Это предоставляет доступ ко всем свойствам и методам класса предка:
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 не определена
Можно продолжить это дальше и создать отдельные функции для различных пород собак или кошек и т.д.
Замыкание (
function beginAdding(a){
a *= 5;
return function finishAdding(b){ alert(a+b); }
}
var add = beginAdding(10);
add(20); // 70
Можно видеть, что в приведенном коде переменной
А что содержится в переменной
Теперь, имея представление о замыкании, прежде чем продолжать, необходимо обсудить проблему утечки памяти.
var someInput = document.getElementById('inputbox');
var someFunction = function(){
alert(someInput.value);
}
someInput.onclick = someFunction;
Здесь представлен бесконечный цикл в терминах замыканий. Объект
Замыкания создают, часто даже не осознавая этого. Возьмем, например, простую функцию:
function Animal(name){
this.sleep = function(){ alert(name+' спит: Хрррр'); }
}
Можно не заметить этого, но переменная
Даже определение простейшей функции может создавать замыкание:
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();
Обе функции в этом случае выведут
Если изменить
function makeClosure(x){
return function(){ alert(x); }
}
var x = 5;
var alertX1 = makeClosure(x);
x = 10;
var alertX2 = makeClosure(x);
alertX1(); // 5
alertX2(); // 10
Это решает проблему. Если, однако, этот код создавал утечку памяти, то утечка будет существенно больше, чем в предыдущем примере; и также используется больший объем памяти. Оказывается, что в действительности имеется три различных области действия в этом простом примере:
Можно видеть, что переменная
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
Отличие состоит в том, что
Как избежать утечки памяти при использовании замыканий? Необходимо избегать использования циклических ссылок. Наиболее распространенной причиной утечки памяти является присоединение событий, таких, как событие
Часто совершенно невинный с виду код будет создавать утечку и ее бывает крайне сложно обнаружить. К счастью, протестировать наличие утечки памяти достаточно легко. Если при каждом обновлении страницы используемая память увеличивается, то приложение имеет утечку. Отследить, где это происходит, совершенно другая задача, но по крайней мере теперь известно о наличии проблемы!
Следующая лекция будет посвящен основам приложений
В последнее время термин
Прежде всего
При создании запроса
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){}
}
}
}
Любой браузер, который поддерживает объект
Теперь, когда мы имеем объект
var oXml = getXMLHttpObj();
oXml.open('GET', 'getData.php', true);
oXml.onreadystatechange = processingFunction;
oXml.send();
function processingFunction(){
if(oXml.readyState!=4) return; // запрос не выполнен
// Результаты обрабатываются здесь. Подробнее дальше!
}
После создания объекта
Первый аргумент, тип запроса, почти всегда будет
Флаг асинхронности немного отличается почти от всего остального в
В чем различие? Если флаг асинхронности задан как
Когда все готово, посылается запрос. Затем мы ожидаем. Если запрос выполняется синхронно с функцией обработки, определенной с помощью
Теперь мы получили данные, но что это за данные?
Существует три возможных варианта получения данных:
Предположим, что создается приложение для управления контактами. Cервер может возвращать информацию о людях. Одни и те же данные можно выразить в форме
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"}
]}
Можно видеть, что нотация
Нотация
Данные в любой нотации можно посылать с Web-сервера просто как обычный текст. Никакие пробелы, имеющиеся в этих примерах, не нужны, за исключением одиночных пробелов между именами атрибутов в тегах
Формат
[x].
Каждый тег должен иметь закрывающий тег. Например,
[x].
| & | --> | & |
| < | --> | < |
| > | --> | > |
| " | --> | " |
| ' | --> | ' |
Например, узел
[x].
Приходящие с сервера данные должны посылаться с
Для
<?php header('Content-type: text/xml'); ?>
Для
<% response.contentType = "text/xml" %>
[x].
Для всех других языков добавьте эквивалентный заголовок
Если этот заголовок не задан, свойство
[x].
объекты начинаются и заканчиваются с помощью символов
[x].
массивы начинаются и заканчиваются с помощью символов
[x].
все строки заключаются в двойные кавычки
[x].
символы
Проще говоря, строка
Теперь посмотрим на то, как можно выполнить синтаксический разбор этих данных.
В данный момент мы создадим просто сценарий, который сообщит, сколько имеется контактов, и выведет о них информацию. Начнем с версии
function processingFunction(){
if(oXml.readyState!=4) return; // запрос не выполнен
// Результаты обрабатываются здесь. Подробнее дальше!
}
Когда скрипт попадает в тело функции, запрос
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');
}
}
Здесь имеется
Посмотрим на тот же сценарий, использующий текст
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');
}
}
Как можно видеть, строки
Наконец можно выбрать получение данных в любом другом простом текстовом формате вместо
Что использовать:
В действительности уже есть все, что нужно для создания приложений
Файл 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"}
]}
Эти файлы будут обеспечивать все данные для нашего списка контактов на
<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
Как можно видеть из примера выше, это все достаточно просто. Большая часть кода нужна в действительности просто для создания новых строк в таблице.
Следующая лекция будет посвящена обработке ошибок в
Вы написали приложение
for(var i=0; i<10; i++)
// рабочий код здесь
}
Обратите внимание, что здесь пропущена открывающая скобка
[x]. Пропущенные или непарные фигурные, круглые или квадратные скобки
Каждая фигурная
Условия операторов
[x]. Пропущенные или непарные кавычки
Это очень распространенная проблема. Строки в
var x = 'It's a beautiful day';
является недопустимым, потому что
var x = 'It\'s a beautiful day';
// или
var x = "It's a beautiful day";
Еще одной достаточно распространенной ошибкой является завершение строки другим символом, т.е.:
var x = "It's a beautiful day';
Эта строка начинается с символа
[x]. Пропущенная точка с запятой
Хотя точки с запятой обычно не нужны в
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]. Неправильное использование прописных букв
Все встроенные функции
Так как
[x].
Ссылка на несуществующий код, функции или объекты
Эта проблема возникает обычно в отношении объектов
Обычно эта проблема легко решается. Лучшим решением будет выполнение кода по событию
<BODY onload="loadFunction();">
или еще лучше, присоединение события к загрузке тела:
document.captureEvents(Event.LOAD);
document.onLoad=loadFunction;
[x]. Использование зарезервированного слова
Существует длинный список зарезервированных ключевых слов
var for = 5;
то будет возникать ошибка.
[x]. Использование пропущенного параметра
При определении функции обычно используется некоторое количество аргументов. Если некоторые из этих аргументов пропущены и делается попытка их использовать, то возникнут ошибки.
Большинство из этих проблем попадают в категорию опечаток и просто обычных ошибок, которые можно исправить, но необходимо о них знать, чтобы случайно не сделать.
Однако последний тип ошибки из этого списка с пропущенными параметрами можно проверить достаточно легко:
function myFunction(a, b, c){
if(a){
// выполняется работа с a
}
if(b && c){
// выполняется работа с b и c
}
}
Если функция вызывается только с одной переменной, то проблемы не возникает. Однако надо помнить об одной вещи: если входящая по значению переменная может быть определена как
function myFunction(a, b, c){
if(typeof(a)!='undefined'){
// выполнение кода с a
}
if((typeof(b)!='undefined') && (typeof(c)!='undefined')){
// выполнение кода с b и c
}
}
В этом случае, даже если одна из переменных будет передана как
Сейчас мы перейдем к изучению механизмов обработок ошибок - с помощью операторов Try/Catch и функции window.onerror.
Откровенно говоря, функция
window.onerror = function(){
return true;
}
С этим кодом сообщение об ошибке никогда не будет выводиться. Однако в связи с этим приложение может не работать. Например, если бы переменная была
Функцию
Еще одно использование
Операторы
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(err){
// код обработки ошибки
}
Если код в блоке
try{
var x;
x[5] = 5;
}catch(err){
alert('An error occured: '+err.description);
}
Если в операторе
Такой блок кода
Блок
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(err){
// код
}finally{
// код
}
Код в "завершающем блоке" будет выполняться независимо от того, что происходит с операторами
function myFunction(){
try{
return someValue;
}catch(err){
return defaultValue;
}finally{
alert('finally!');
}
alert('End!');
}
В этом случае оба блока
for(var i=0; i<10; i++){
try{
if(i==5) continue;
}catch(err){
// обработка ошибки
}finally{
// код
}
// еще код
}
Запросы
function processingFunction(){
if(oXml.readyState!=4) return; // запрос не выполнен
switch(oXml.status){
case 0: case 200: // запрос выполнен
break;
case 408: case 504: // запрос превысил время ожидания
// код
break;
default: // ошибка запроса
// код
return; // возможно, вы захотите выйти
break;
}
// продолжение обработки запроса
}
Проверяя код статуса, мы узнаем, был ли запрос обработан успешно. Код
Коды статуса
Все другие коды ошибок имеют свои собственные значения, но в данной ситуации это не важно. Нас интересует только то, что мы не получили нужные данные. Поэтому если код попадает в область "
Это почти все об обработке ошибок в
В следующей лекции будет рассмотрена рекурсия:
"Чтобы понять рекурсию, сначала необходимо понять рекурсию".Данное высказывание очень четко выражает суть рекурсии. Рекурсия является базовой концепцией программирования вообще, а не только
В этом примере мы циклически перебираем все элементы массива первого уровня. Если какой-либо из этих элементов в массиве сам будет массивом, мы снова вызываем функцию, передавая этот элемент как первичный массив. Затем функция будет перебирать этот массив и снова вызывать себя, пока не останется ни одного массива.
Другим хорошим примером рекурсии будет написание синтаксического анализатора документа
Самым трудным в рекурсии является ее понимание. Такие концепции, как циклы, воспринимаются достаточно естественно, в то время как рекурсия трудна для большинства людей. Рекурсивные функции также очень часто требуют больше памяти, чем нерекурсивные функции. Если имеется функция, которая вызывает себя на
Простым примером будет написание рекурсивной функции факториала. Факториал
function factorial(N){
return N<=1?1:N*factorial(N-1);
}
Демонстрационный пример
Факториал
Очень элегантное решение, не правда ли? В результате мы вызываем функцию факториала
Давайте рассмотрим другой пример. При работе с программами рисования, такими, как
/*
это - псевдо-код, быстро написанный и нефункциональный,
который должен просто дать общую идею о том, как действует
реальный код
*/
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){
// эта функция проверяет, что поле уже было закрашено
}
Идея этого кода состоит в том, чтобы закрасить текущий квадрат или пиксель. Затем он пытается закрасить квадрат выше, справа, ниже и слева от себя. При таком алгоритме каждый квадрат будет закрашен достаточно быстро. Однако здесь возникает небольшая проблема - размер стека.
При вызове функции копия множества переменных, которые нужны ей для работы, сохраняется в памяти. Если функция вызывается рекурсивно, то другая копия всех этих переменных сохраняется в памяти, затем еще одна и т.д. Эти копии переменных сохраняются в так называемом стеке. Первая копия находится внизу, следующая поверх нее, и т.д. К сожалению, существует ограничение на размер стека. В большинстве браузеров этот предел определен где-то в районе
Таким образом мы имеем ограничение в самом браузере, которое определяет, что при использовании рекурсии можно углубиться только на
Прежде всего попробуем изменить алгоритм. Существует много различных алгоритмов закраски - мы использовали один из самых простых. Он проверяет все направления и затем закрашивает каждый просмотренный квадрат, если это будет необходимо. С помощью небольшого изменения можно существенно улучшить этот алгоритм, с точки зрения необходимого пространства стека. Вместо просмотра влево и вправо на
Если это произойдет, то остается единственный вариант: не использовать рекурсию. Вместо использования стека
Чтобы создать свой собственный стек, необходимо удалить рекурсивную часть нашей функции. Мы все равно собираемся многократно вызывать функцию, но собираемся вызывать ее из другой функции, а не из себя самой.
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){
// эта функция проверяет, что квадрат еще не был закрашен
}
Как можно видеть, процесс не намного сложнее, но требует немного больше микроуправления, чем написанный ранее рекурсивный код. Вместо рекурсивного вызова функции
Отметим, что существует очень немного рекурсивных функций, которые будут реально переполнять стек
Теперь, имея некоторое представление о рекурсии, надо попытаться понять, что с ней можно делать, кроме закрашивания изображений. Одним из наиболее распространенных рекурсивных алгоритмов будет так называемый двоичный поиск. Это можно представить себе как игру на больше-меньше. Если кто-то предлагает угадать число от
Как оказывается, это один из самых быстрых способов поиска данных, когда известно, что все данные уже отсортированы. Если имеется список из
Для сортировки применяются специальные алгоритмы. Многие алгоритмы сортировки, включая один из самых быстрых,
Другим широко распространенным использованием рекурсии является проверка или синтаксический анализ некоторых данных. Ранее в качестве примера упоминался файл
Рекурсия является крайне полезной концепцией. Рекурсия может использоваться не так часто, но когда она находит применение, она существенно облегчает жизнь программиста.
Технология 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.
Параграф ниже формы содержит тег
Когда пользователь вводит данные, выполняется функция с именем "showHint()". Выполнение функции запускается событием "onkeyup". Другими словами, всякий раз, когда пользователь убирает свой палец с клавиатуры внутри поля ввода (отпускает нажатую клавишу), вызывается функция
Функция
Функция имеет следующий код:
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)
}
Функция выполняется всякий раз, когда в поле ввода вводится символ.
Если имеется какой-то ввод в текстовое поле (
[x]. Определяет url (имя файла) для отправки на сервер
[x].
Добавляет к url параметр (
[x]. Добавляет случайное число, чтобы сервер не использовал кэшированный файл
[x].
Создает объект XMLHTTP, и приказывает объекту выполнить функцию с именем
[x].
Открывает объект
[x]. Посылает запрос HTTP на сервер
Если поле ввода будет пустым, то функция просто очищает содержимое поля для подстановки
Функция
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
Функция
Когда состояние будет равно 4 (или "complete"), поле для подстановки
Приложения AJAX могут выполняться только в Web-браузерах с поддержкой XML.
Приложения AJAX могут выполняться только в Web-браузерах с полной поддержкой XML, т.е. всеми основными современными браузерами.
Предыдущий пример вызывает функцию с именем
Эта функция предназначена для решения проблемы создания различных объектов
Функция имеет следующий код:
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".
Параграф ниже формы содержит тег
Когда пользователь выбирает данные (имя заказчика), выполняется функция "showCustomer()". Выполнение функции запускается событием "onchange". Другими словами, каждый раз, когда пользователь изменяет значение в поле раскрывающегося списка, вызывается функция
Код 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".
Параграф ниже формы содержит тег
Когда пользователь делает свой выбор, выполняется функция с именем "showCD". Выполнение функции запускается событием "onchange". Другими словами, каждый раз, когда пользователь изменяет значение в поле раскрывающегося списка, вызывается функция
Код 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
Объект
Чтобы создавать Web-приложения AJAX, необходимо хорошо знать объект JavaScript, называемый
Объект
Ниже представлены некоторые методы и свойства этого объекта, с которыми необходимо быть знакомым.
Различные браузеры используют для создания объекта
Internet Explorer использует ActiveXObject.
Другие браузеры используют встроенный в JavaScript объект, называемый
Вот простейший код, который можно использовать, чтобы обойти эту проблему.
var XMLHttp=null
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
Сначала создается переменная
Затем проверяется, доступен ли объект
Если объект доступен, то он используется для создания нового объекта.
XMLHttp=new XMLHttpRequest().
Если он не доступен, то проверяется, доступен ли объект
Если этот объект доступен, то он используется для создания нового объекта:
XMLHttp=new ActiveXObject().
Некоторые программисты предпочтут использовать самую новую и быструю версию объекта
Следующий пример пытается использовать самую последнюю версию объекта "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()
}
Сначала создается переменная
Затем делается попытка создания объекта способом компании Microsoft, доступным в Internet Explorer 6 и более поздних версиях:
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
Если это порождает ошибку, то используется старый способ (Internet Explorer 5.5):
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
Если
XMLHttp=new XMLHttpRequest()
Метод open()
Метод
Метод send()
Метод
Метод abort()
Метод
Свойство
В таблице показаны возможные значения свойства
| Состояние | Описание |
|---|---|
| 0 | Запрос не инициализирован |
| 1 | Запрос создан |
| 2 | Запрос послан |
| 3 | Запрос обрабатывается |
| 4 | Запрос завершен |
Различные браузеры используют свойство состояния готовности по-разному. Не стоит рассчитывать, что все браузеры будут сообщать обо всех состояниях. Некоторые не сообщают о состоянии 0 и 1.
Для приложений AJAX представляет интерес фактически только состояние 4. Те есть, когда запрос завершен, и можно использовать полученные данные.
Свойство
Язык 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 символами нижнего регистра, и никогда не пропускать завершающие теги (такие как
Вот собственно и все. Удачного кодирования!
Элементы XHTML должны быть правильно вложены
Элементы XHTML всегда должны быть замкнутыми
Элементы XHTML должны записываться в нижнем регистре
Документы XHTML должны иметь один корневой элемент
В HTML некоторые элементы могут вкладываться друг в друга некорректно, например как в случае:
В XHTML все элементы должны правильно вкладываться друг в друга, например:
Примечание: Достаточно часто при создании вложенных списков забывают о том, что внутренний список должен находится между тегами
Неправильно:
<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>
Обратите внимание, что в примере "правильного" кода вставлен тег
Непустые элементы должны иметь замыкающий тег.
Неправильно:
<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>
<head> ... </head>
<body> ... </body>
</html>
При записи документа XHTML требуется использовать четкий синтаксис HTML.
[x]. Имена атрибутов должны записываться в нижнем регистре
[x]. Значения атрибутов должны заключаться в кавычки
[x]. Минимизация атрибутов запрещена
[x].
Атрибут
[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 |
|---|---|
HTML 4.01 определяет атрибут
Неправильно:
<img src="picture.gif" name="рис. 1" />
Правильно:
<img src="picture.gif" id="рис. 1" />
Примечание: Для взаимодействия со старыми браузерами в течение некоторого времени необходимо будет использовать оба атрибута
Для совместимости XHTML с современными браузерами, необходимо добавить дополнительный пробел перед символом "/".
Атрибут
Если в каком-то элементе используется атрибут
Все документы XHTML должны иметь объявление DOCTYPE. Также должны присутствовать элементы
Шаблон минимального документа XHTML имеет следующий вид:
<!DOCTYPE Здесь определяется тип документа>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Здесь задается заголовок </title>
</head>
<body>
</body>
</html>
Примечание: Объявление DOCTYPE не является частью самого документа XHTML. Это объявление не является элементом XHTML и не должно иметь закрывающий тег.
Примечание: Атрибут xmlns в теге
В следующем разделе представлена дополнительная информация об определении типа документа 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>простой документ </title>
</head>
<body>
<p>простой параграф </p>
</body>
</html>
Объявление DOCTYPE определяет тип документа:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Это определение DTD используется, когда требуется получить действительно четкую разметку, не имеющую в представлении никакого беспорядка. Оно используется вместе с каскадными таблицами стилей.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Используйте это определение, когда надо воспользоваться средствами представления HTML, и когда необходимо обеспечить поддержку для браузеров, которые не понимают каскадные таблицы стилей.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Укажите это определение, когда будут использоваться фреймы HTML, чтобы разделить окно браузера на два или большее количество фреймов.
Чтобы преобразовать Web-сайт с языка HTML на XHTML, необходимо знать правила синтаксиса XHTML, которые были рассмотрены выше. Затем необходимо выполнить следующие действия (в указанном порядке):
В качестве первой строки каждой страницы добавляют следующее объявление DOCTYPE:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Лучше использовать сначала переходное определение DTD (Transitional). Можно выбрать и строгое определение DTD (Strict), но оно немного слишком "строгое" на начальном этапе, и ему труднее соответствовать.
Web-cтраницы должны иметь объявление DOCTYPE, если желательно, чтобы они были определены как правильные согласно XHTML.
Надо помнить, однако, что более новые браузеры (такие как Internet Explorer 6) могут обрабатывать документ по-разному, в зависимости от объявления
Так как XHTML различает регистр символов, и поскольку XHTML допускает имена тегов и атрибутов HTML только в нижнем регистре, то необходимо выполнить глобальный поиск и замену всех тегов в верхнем регистре тегами, записанными в нижнем регистре. Аналогичную процедуру необходимо выполнить также для имен атрибутов.
Так как рекомендация W3C для XTML 1.0 говорит, что значения всех атрибутов должны быть заключены в кавычки, то необходимо проверить все Web-страницы, чтобы значения всех атрибутов были правильно заключены в кавычки. Это трудоемкая работа, поэтому рекомендуется в будущем никогда не забывать использовать кавычки для значений атрибутов.
В XHTML пустые теги не разрешены. Теги
Это создает проблему с браузером Netscape, который неправильно интерпретирует тег
Некоторые другие теги (такие как тег
После выполнения всех преобразований все имеющиеся страницы проверяются согласно официальному DTD W3C с помощью следующей ссылки на XHTML Validator (http://validator.w3.org/check/referer). Возможные не выявленные на начальном этапе ошибки надо будет отредактировать вручную. Наиболее распространенной ошибкой бывает отсутствие в списках тегов замыкающего
Имеются ли какие-либо специальные инструментальные средства для преобразования? Да, можно использовать утилиту TIDY.
Бесплатная утилита Дейва Рагетта HTML TIDY (http://www.w3.org/People/Raggett/tidy/) предназначена для проверки кода HTML. Она также отлично справляется с трудночитаемыми разметками документов, созданными специальными редакторами HTML и инструментальными средствами конвертации, и может помочь определить места кода, требующие дополнительного внимания, чтобы сделать Web-страницы более доступными для людей с физическими недостатками.
Документ XHTML проверяется согласно Определению типа документа.
Документ XHTML проверяют на соответствие определению типа документа (DTD). Прежде чем можно будет проверить файл XHTML, необходимо добавить в качестве первой строки правильный DTD.
Strict DTD содержит элементы и атрибуты, которые не были исключены и не связаны с фреймами:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
Transitional DTD содержит все из Strict DTD плюс исключенные элементы и атрибуты:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
Frameset DTD содержит все из Transitional DTD плюс фреймы:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
Простой документ XHTML имеет следующий вид:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-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 модулей:
| Имя модуля | Описание |
|---|---|
| модуль | Определяет исключенный элемент |
| модуль | Определяет элемент |
| модуль | Определяет базовые элементы форм |
| модуль | Определяет базовые элементы таблиц |
| модуль | Определяет элемент |
| модуль | Определяет элементы карт-изображений на стороне браузера |
| модуль | Определяет элементы редактирования |
| модуль | Определяет все элементы, используемые в формах |
| модуль | Определяет элементы, связанные с фреймами |
| модуль | Определяет элемент |
| модуль | Определяет элемент |
| модуль | Определяет элемент |
| модуль | Определяет атрибуты событий, такие как |
| модуль | Определяет исключенные элементы и атрибуты |
| модуль | Определяет элемент |
| модуль | Определяет элементы списка |
| модуль | Определяет элемент |
| модуль | Определяет исключенный атрибут |
| модуль | Определяет элементы |
| модуль | Определяет элементы представления, такие как |
| модуль | Определяет элементы |
| модуль | Определяет элементы карт-изображений на сервере |
| модуль | Определяет элементы |
| модуль | Определяет атрибут |
| модуль | Определяет элемент |
| модуль | Определяет элементы, используемые в таблицах |
| модуль | Определяет атрибут |
| модуль | Определяет элементы контейнера текста, такие как |
Исключенные элементы не должны использоваться в XHTML.
Теги XHTML могут иметь атрибуты. Атрибуты каждого тега перечислены в описании тега. Здесь представлены базовые атрибуты и атрибуты языка, которые являются стандартными для всех тегов (с небольшими исключениями).
Недействительны в элементах
| Атрибут | Значение | Описание |
|---|---|---|
| Класс элемента | ||
| Уникальный id элемента | ||
| Встроенное определение стиля | ||
| Текст для вывода подсказки |
Недействительны в элементах
| Атрибут | Значение | Описание |
|---|---|---|
| Задает направление текста | ||
| Задает код языка |
| Атрибут | Значение | Описание |
|---|---|---|
| символ | Задает клавиатурное сокращение для доступа к элементу | |
| число | Задает порядок элемента при переходе по клавише табуляции |
Новым в HTML 4.0 была возможность для событий HTML запускать в браузере действия, такие как запуск сценария JavaScript, когда пользователь щелкал на элементе HTML. Ниже представлен список атрибутов, которые можно вставлять в теги HTML для определения действий событий.
Более подробно об использовании этих событий в программировании можно узнать в руководстве по JavaScript и руководстве по DHTML.
Действительны только в элементах
| Атрибут | Значение | Описание |
|---|---|---|
| сценарий | Сценарий, который выполняется при загрузке документа | |
| сценарий | Сценарий, который выполняется при выгрузке документа |
Действительны только в элементах форм.
| Атрибут | Значение | Описание |
|---|---|---|
| сценарий | Сценарий, который выполняется при изменении элемента | |
| сценарий | Сценарий, который выполняется при отправке формы | |
| сценарий | Сценарий, который выполняется при сбросе формы | |
| сценарий | Сценарий, который выполняется при выборе элемента | |
| сценарий | Сценарий, который выполняется, когда элемент теряет фокус | |
| сценарий | Сценарий, который выполняется, когда элемент получает фокус |
Недействительны в элементах
| Атрибут | Значение | Описание |
|---|---|---|
| сценарий | Действие после нажатия клавиши | |
| сценарий | Действие после нажатия и отпускания клавиши | |
| сценарий | Действие после отпускания клавиши |
Недействительны в элементах
| Атрибут | Значение | Описание |
|---|---|---|
| сценарий | Что делать при щелчке мыши | |
| сценарий | Что делать при двойном щелчке мыши | |
| сценарий | Что делать при нажатии кнопки мыши | |
| сценарий | Что делать при перемещении указателя мыши | |
| сценарий | Что делать при перемещении указателя мыши над элементом | |
| сценарий | Что делать при смещении указателя мыши с элемента | |
| сценарий | Что делать при отпукании нажатой кнопки мыши |
В данном руководстве было показано, как создавать более строгие и четкие страницы HTML.
Главное заключается в том, что все элементы XHTML должны быть правильно вложены, документы XHTML должны быть синтаксически правильными, все имена тегов должны быть записаны в нижнем регистре, и все элементы XHTML должны быть закрыты.
Важно также то, что все документы XHTML должны иметь объявление DOCTYPE, и что должны присутствовать элементы
Дополнительную информацию о XHTML можно найти в любом справочном руководстве по XHTML.
Следующий шаг состоит в изучении CSS и JavaScript.
CSS используется для управления стилем и компоновкой Web-страниц.
При использовании CSS все форматирование можно вынести из документа HTML и сохранить в отдельном файле.
CSS предоставляет полный контроль над компоновкой, не создавая путаницу в содержимом документа.
Познакомиться с каскадными таблицами стилей можно в любом руководстве по CSS.
Язык JavaScript может сделать Web-сайт более динамичным.
Статичный Web-сайт вполне подходит для вывода простого содержимого, но динамичный Web-сайт может реагировать на события и позволяет организовать взаимодействие с пользователем.
JavaScript является наиболее популярным языком сценариев в Интернет, и он работает со всеми основными браузерами.
Более подробно познакомиться с JavaScript можно с помощью любого руководства по JavaScript.