А. А. Дуванов Заметки А. А. Дуванова «Продвинутый JavaScript» написаны в течение 2009/2010 учебного года для студентов дистанционного курса 42 «Web-конструирование» Роботландского университета. Заметки были опубликованы в июльских номерах (№№ 13, 14) газеты «Информатика» в 2010 году.

Содержание заметок состоит из трёх частей:

I. Базовый JavaScript (заметки 01–09)

Концептуальные основы базового JavaScript.

II. Клиентский JavaScript (заметки 10–14)

Работа с объектной моделью документа.

III. Библиотека jQuery (заметка 15)

Управление документом при помощи библиотеки jQuery.

Программирование на языке JavaScript

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

if (d > 0)
{
  x1 = (b+Math.sqrt(d))/(2*a);
  x2 = (b-Math.sqrt(d))/(2*a);
  mes = "два корня";              
}
else if (d == 0)
{
  x1 = -b/(2*a);
  mes = "один корень";
}
else mes = "нет корней";

Мы поговорим о более сложных базовых вещах, таких как: функции, массивы, объекты, обёртки, классы, конструкторы, прототипы.

Обязательно поговорим об объекте вызова функции, о замыканиях.

Научимся понимать конструкции вида: 


a.sort(function(a,b){return a-b;});

и более сложные: 


var fID = (function(id0)
 {
    var id=id0;
    return function(){return id++;};
 })(0);

Научимся работать с объектной моделью документа и воздействовать на поведение гипертекстовых страниц средствами библиотеки jQuery.

Инструментарий

Изложение будет сдабриваться большим количеством примеров. Желательно эти примеры не просто просматривать, а проверять их работу в браузере. Кроме того, полезно по ходу чтения тестировать работу собственных конструкций. И, несомненно, необходимо проверять в браузере ответы на контрольные вопросы и задания.

Иными словами, для работы с заметками необходим испытательный стенд.

Сам я такой стенд держу под рукой в редакторе PSPad. Вот его код (файл test.htm в каталоге test): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="content-type" 
          content="text/html; charset=windows-1251">
    <TITLE>Испытатель</TITLE>
    <SCRIPT>

// Здесь располагается код JavaScript, который завершается  
// вызовом функции alert (она покажет результат). 

var x = "Испытатель";
var y = "JavaScript";
alert(x+" "+y);

    </SCRIPT>
  </HEAD>
  
  <BODY>
    <H1>Испытатель JavaScript</H1>
  </BODY>
</HTML>

Записываю код, нажимаю клавишу F10, и вижу результат. Дополнительно держу открытыми реальные браузеры (Firefox, Opera, IE) с этой страничкой. Клавиша F5 в браузере позволяет обновить содержимое и увидеть результат.

План работы с испытателем

Такой значок будет означать рекомендацию к тестированию кода в браузере. Щелчок на нём загрузит испытательный стенд (файл test.htm из каталога test.htm) в отдельное окно (или вкладку) браузера. Далее можно работать по следующему плану:

  1. Открыть HTML-код (Вид/Просмотр HTML-кода).
  2. Через буфер обмена перенести внутрь элемента <SCRIPT> испытуемый код.
  3. Сохранить изменения кода.
  4. Обновить страницу с Испытателем и проанализировать результат.

Тестирование и анализ кода

Уважаемые коллеги! Надеюсь, на Ваших компьютерах установлены браузеры Opera и Firefox и IE и в их настройках включена опция показа ошибок в сценариях (скриптах).

Для проведения серьёзного тестирования и анализа кода необходимо установить расширение браузера Firefox под названием Firebug. Это замечательное (бесплатное) расширение полезно не только для отладки JavaScript-кода, но и для отладки кодов HTML и CSS. Сделайте это обязательно.

Прочитать о возможностях расширения, загрузить и установить Firebug, можно на сайте http://firebug.ru (здесь же и документация на русском языке).