Организация начала занятия.(5)
Подготовка к основному этапу занятия. (3)
Проверка домашнего задания. (10)
Демонстрация учащихся разработанной структуры сайта на тему «Самоучитель по Html».
4. Усвоение новых знаний и способов действий (согласно плану урока). (55)
1. Основные особенности JavaScript
JavaScript — это относительно простой объектно-ориентированный язык, предназначенный для создания небольших клиентских и серверных приложений для Internet. Программы, написанные на языке JavaScript, включаются в состав HTML-документов и распространяются вместе с ними. Программы просмотра (браузеры – от англ. browser) типа Netscape Navigator и Microsoft Internet Explorer распознают встроенные в текст документа программы-вставки (script-коды) и выполняют их. Таким образом, JavaScript — интерпретируемый язык программирования. Примерами программ на JavaScript могут служить программы, проверяющие введенные пользователем данные или выполняющие какие-то действия при открытии или закрытии документа. Такие программы могут реагировать на действия пользователя — нажатие кнопок "мыши", ввод данных в экранной форме или перемещение "мыши" по странице. Более того, JavaScript-программы могут управлять самим браузером и атрибутами документа.
Язык JavaScript, будучи схожим по синтаксису с языком Java, за исключением объектной модели, в то же время не обладает такими свойствами, как статические типы данных и строгой типизацией. В JavaScript, в отличие от Java, понятие классов не является основой синтаксических конструкций языка. Такой основой является небольшой набор предопределенных типов данных, поддерживаемых исполняемой системой: числовые, булевские и строковые; функции, которые могут быть как самостоятельными, так и методами объектов (метод в терминологии JavaScript — не что иное, как функция/подпрограмма); объектная модель с большим набором предопределенных объектов со своими свойствами и методами, а также правилами задания в программе пользователя новых объектов.
Для создания программ на JavaScript не требуется никаких дополнительных средств— необходим лишь браузер, поддерживающий язык JavaScript соответствующей версии и текстовый редактор, позволяющий создавать HTML-документы. Так как программа на JavaScript встраивается непосредственно в текст HTML-документа, вы можете немедленно увидеть результаты своей работы во время просмотра документа браузером и при необходимости внести изменения.
2. Возможности языка JavaScript
С его помощью можно динамически управлять отображением и содержимым HTML-документов. Можно записывать в отображаемый на экран документ произвольный HTML-код в процессе синтаксического анализа загруженного браузером документа. С помощью объекта Document можно генерировать документы "с нуля" в зависимости от предыдущих действий пользователя или каких-либо иных факторов.
JavaScript позволяет контролировать работу браузера. Например, объект WINDOW 
поддерживает методы, позволяющие выводить на экран всплывающие диалоговые окна, создавать, открывать и закрывать новые окна браузера, задавать режимы прокрутки и размеры окон и т.д.
JavaScript позволяет взаимодействовать с содержимым документов. Объект Document и содержащиеся в нем объекты позволяют программам читать части HTML-документа и иногда взаимодействовать с ними. Сам текст прочитать невозможно, но можно, например, получить список гипертекстовых ссылок, имеющихся в данном документе. На текущий момент широкие возможности взаимодействия с содержимым документов обеспечивает объект Form и объекты, которые он может содержать: Button, Checkbox, Hidden, Password, Radio, Reset, Select, Submit, Text и Textarea.
JavaScript обеспечивает взаимодействие с пользователем. Важной особенностью этого языка является реализованная в нем возможность определять обработчики событий — произвольные порции кода, которые выполняются при наступлении конкретных событий (обычно действий пользователя). JavaScript позволяет использовать в качестве обработчиков событий любые новые предварительно заданные функции. Например, можно написать программу, которая выведет в строке состояния специальное сообщение, если пользователь установит указатель "мыши" на гипертекстовую ссылку, или выведет на экран диалоговое окно с запросом на подтверждение выполнения некоторого действия, или осуществит проверку введенного пользователем значения и в случае ошибки ввода выдаст соответствующую диагностику и заставит ввести правильное значение.
JavaScript дает возможность выполнять произвольные математические вычисления. Кроме того, этот язык имеет развитые средства работы со значениями даты и времени. JavaScript был создан в качестве альтернативы CGI-программам и языку сценариев Perl, а также в качестве дополнения м в ряде случаев альтернативы языку Java.
Ниже приведена таблица, в которой проводится сравнение Java и JavaScript:
| JavaScript | Java |
| Исходный код программ встраивается непосредственно в HTML-документ либо загружается из независимых файлов. | Исходный код программ не распространяется с приложением -апплетом. Апплеты загружаются с сервера из независимых файлов. |
| Программа выкладывается на сервер в виде исходного кода в текстовой форме и в дальнейшем интерпретируется (без предварительной компиляции) браузером после загрузки ее с сервера. | Программа компилируется в машинно-независимый байтовый код Java-код, после чего выкладыватся на сервер. Браузер (виртуальная Java-машина) исполняет Java-код. |
| Объектный. Можно программировать как без использования объектного программирования, так и используя предопределенные встроенные классы. Имеется теоретическая возможность расширения этих классов, но реально она никогда не используется. | Объектно-ориентированный. Программировать без использования объектного программирования нельзя. Апплеты состоят из классов с возможностью иерархического наследования по традиционной схеме наследования. Использование наследования и полиморфизма – основа программирования в Java. |
| В отличие от подавляющего большинства языков объектного программирования в JavaScript структура объектов не задается однозначно устройством класса, а является динамической и может меняться на этапе выполнения программы. Объекты могут динамически получать новые поля и методы или изменять любые параметры старых. | Структура объектов полностью задается на этапе компиляции их классов. |
| Свободная типизация: элементарные типы данных переменных не описываются, при присваивании тип левой части всегда определяется по результату присваивания (т.е. по правой части) | Строгая типизация: типы данных любых переменных должны быть описаны перед использованием, тип левой части должен совпадать с типом правой (за редкими исключениями, когда работает автоматическое приведение типа результата к типу левой части) |
| Динамическое связывание кода с объектами: ссылки на объекты проверяются во время выполнения программы. | Статическое связывание кода с объектами: ссылки на объекты должны существовать на момент компиляции |
3. Основные типы данных
Значения переменных, функций и выражений бывают следующих типов:
1. целые численные:
в десятичной системе единиц: 0, 29, 70, -147 и т.п.;
в 16-ричной: 0х70 или 0х70, 0XFA7D0 и т.п.;
в 8-ричной: 070, 0710 ( Внимание!!! Ведущий ноль воспринимается как символ 8-ричного числа) и т.п.
2. вещественные численные:
0.0, -2.9, 0.7E1, 14.7e-2, 1e+308 (максимальное вещественное число), 1.001e-305 (минимальное по модулю вещественное число, отличное от нуля) и т.п.;
3. логические (булевские): true и false;
4. строковые: "Привет, все!", "ОК", 'Слово "Привет!" с кавычками внутри строки', "Другой вариант 'Привет' с кавычками внутри строки" и т.п. (допускаются оба типа кавычек и многократное использование таких пар внутри друг друга). Специальные символы обозначаются комбинацией символа \ и буквы (или последовательности цифр), например: \b — "забой", \n — перевод на новую строку, \" — "кавычка".
5. null — специальное значение для обозначения “пустого множества” значений.
1. Переменные. Приведение типов
Глобальные переменные можно вводить в любом месте текста программы путем простого присваивания значения. Но необходимо, чтобы переменная была определена до того момента, когда вызывается при исполнении:
var myVariable=0.1
var B=false
и т.п. При этом тип переменной приводится к типу присваиваемого значения, причем в последующем этой же переменной можно присвоить значение другого типа:
myVariable="Теперь это текстовая переменная"
При задании переменной использование зарезервированного слова var не обязательно, но желательно, т.к. помогает при использовании отладчика фирмы Microsoft и делает текст программы более структурированным. На деле вместо переменной в текущем объекте WINDOW создается новое поле с таким именем. В функциях при задании локальных переменных использование var обязательно (иначе будет создана глобальная переменная).
При наличии численных и строковых значений в одном выражении идет приведение к строковому типу. Значением переменной
a=7+"раз отмерь,"+1+"раз присвой"
будет строка "7 раз отмерь, 1 раз присвой".
Стоит отметить, что существуют также функции parseFloat и parseInt, которые осуществляют преобразование из строкового значения в численное.
Идентификатором переменной может быть последовательность символов из набора букв от "A" до "Z", от "a" до "z", цифр от "0" до "9", а также символ подчеркивания "_". При этом первым символом имени не может быть цифра, а заглавные и строчные буквы отличаются (т. е. имена MyVariable и myvariable относятся к разным переменным).
Кроме глобальных переменных в функции или другом блоке кода можно определить локальные, для них областью видимости будет только функция (без кода), в которой они определены:
var myLocalVariable=0.
2. SCRIPT-вставки в HTML-документе
Для встраивания программы на JavaScript в HTML — файл используются теги <script> и </script>. При этом результат работы можно увидеть сразу и при необходимости внести изменения.
<html>
<head>
<script language="JavaScript">
document.write("Hello,world!<p>")
</script>
</head>
<body>
It was dynamically created text.
</body>
</html>
Будет сформирован текст:
Hello, world!
It was dynamically crested text.
Заметим, что внутри тегов <script> и </script> может содержаться любое число конструкций языка JavaScript.
Некоторые старые браузеры не поддерживают язык JavaScript и поэтому, чтобы скрыть от них вставки JavaScript, в программу добавляют следующий комментарий:
<!-- скрываемый текст -->
Пример:
<html>
<head>
<script language="JavaScript">
<!-- hidden text
document.write("Hello from JavaScript")
//end of hidden text -->
</script>
</head>
<body>
The end
</body>
</html>
Вставки могут быть и внутри <body>.
1. Операторы, выражения, функции
1. Операторы: арифметических действий, присваивания, инкрементные, декрементные. Условные выражения
Операторы арифметических действий в JavaScript те же, что и в С и Java:
Сложение "+", вычитание "-", умножение "*", деление "/", остаток от целочисленного деления "%".
Эти операторы могут встречаться в любом численном выражении. (Внимание! Они также могут встречаться в строковых выражениях в случаях, когда используется автоматическое приведения чисел в строки).
Операторы присваивания в JavaScript те же, что и в С и Java:
"=", "+=", "-=", "*=", "/=", "%="
x=y, как и в большинстве других языков, значит присвоить переменной "х" значение переменной "y".
Следующие операторы имеют синтаксис, сходный с синтаксисом соответствующих операторов языка С:
y+=x эквивалентно y=y+x
y-=x эквивалентно y=y-x
y*=x эквивалентно y=y*x
y/=x эквивалентно y=y/x
y%=x эквивалентно y=y%x – остаток от деления нацело y на x.
Условное выражение имеет вид
(условие)?значение1:значение2
Если значение условия true, значением условного выражения будет значение1, иначе — значение2. Условное выражение можно применять везде, где можно применять обычные выражения.
Пример:
a=(b<1)?0:(x-1)+c
Инкрементные и декрементные операторы также имеют синтаксис, заимствованный из языка С: "х++", "++х", "х--", "--х".
Выражения:
y=x++ эквивалентно двум присваиваниям: y=x; y=y+1,
y=++x эквивалентно двум присваиваниям: x=x+1; y=x,
y=x-- эквивалентно двум присваиваниям: y=x; x=x-1,
y=--x эквивалентно двум присваиваниям: x=x-1; y=x.
2. Строковые операции
Существуют ряд операторов работы со строками:
"+" - сложение (конкатенация) строк s1+s2 дает строку, состоящую из последовательности символов строки s1, за которыми следуют символы строки s2.
eval(s) - встроенная функция JavaScript. Она выполняет код, заданный аргументом— строкой s, который может содержать один или более операторов JavaScript (через точки с запятой). Данную функцию можно использовать не только для выполнения оператора, но и для вычисления выражения. Она возвращает значение последнего вычисленного выражения в заданном коде. Функция eval(s) обеспечивает возможность вычислять значения, введенные пользователем в пункты ввода, а также динамически модифицировать выполняемый код в JavaScript-программе. Более общая, чем функции parseInt и parseFloat.
parseFloat(s) – встроенная функция JavaScript. Находит содержащееся в строке s вещественное число (типа Float) от начала строки до первого символа, не входящего в число. Если число не найдено, возвращает значение NaN (“Not a Number”)
parseInt(s) – то же для целых чисел (Integer). При этом автоматически находится основание.
parseInt(s,n) – то же для целых чисел по основанию n (от 2 до 36). При n=0 – то же, что parseInt(s). При этом автоматически находится основание
3. Побитовые операции присваивания
Существуют ряд операторов побитового присваивания:
х<<=n эквивалентно x=(x<<n) — сдвиг на n битов влево двоичного представления целого
числа x;
x>>=n эквивалентно x=(x>>n)— сдвиг на n битов вправо двоичного представления целого
числа x с сохранением знакового бита (отрицательные
числа в дополнительном коде имеют первым битом
единицу. После сдвига на место первого бита записывается
1, и число остается отрицательным);
x>>>=n эквивалентно x=x>>>n — сдвиг на n битов вправо двоичного представления
целого числа x с ведущим нулем 0 (После сдвига на место
первого бита записывается 0, и число становится
положительным);.
Всё выражение (у нас — "x") в левой части преобразуется в 32-битное целое число, после чего производится необходимый сдвиг, а затем получившиеся число приводится к типу выражения – результата (у нас это опять"x"), и производится присваивание.
Примеры:
1) 9<<2 дает 36, т.к. сдвиг 1001 (число 9 в двоичном представлении) на 2 бита влево
дает 100100, т.е. 36. Недостающие биты заполняются 0.
9>>2 дает 2, т.к. сдвиг 1001 (число 9 в двоичном представлении) на 2 бита вправо
дает 10, т.е. 2. Недостающие биты заполняются 0.
"&" — побитовая AND — "И";
"|" — побитовое OR — "ИЛИ";
"^" — побитовое XOR — "ИСКЛЮЧАЮЩЕЕ ИЛИ".
Все операции совершаются с двоичным представлением чисел, однако, результат возвращается в обычном десятичном представлении.
Примеры:
15&9 возвращает 9, т.к. (1111) AND (1001) равно 1001;
15|9 возвращает 15, т.к. (1111) OR (1001) равно 1111;
15^9 возвращает 6, т.к. (1111) XOR (1001) равно 0110.
2.3 Логические выражения.
"&&" — логическое AND — "И";
"||" — логическое OR — "ИЛИ";
"!" — логическое NOT — "НЕ".
Пример:
(a>b)&&(b<=10)||(a>10)
В JavaScript всегда применяется так называемая сокращенная проверка логических выражений: в операнде B1&&B2 при B1=false оценки B2 не производится и возвращается значение false. Аналогично B1||B2 при B1=true оценивается как true. При этом анализ логического выражения идет слева направо, и как только всё выражение может быть оценено, возвращается результат. Поэтому, если в качестве B2 выступает функция, она не будет вызываться, и если она должна давать побочные эффекты, то это может привести к ошибке.
4. Операторы сравнения
"= =" -"равно";
">" -"больше";
"<" -"меньше";
">=" -"больше или равно";
"<=" -"меньше или равно";
"!=" -"не равно".
Операторы сравнения применимы не только к численным, но и к строковым выражениям. При этом строки считаются равными, если все их символы совпадают и идут в одном и том же порядке (пробел учитывается как символ). Если строки разной длины, то большей будет строка имеющая большую длину. Если их длины совпадают, больше считается та, у которой при просмотре слева направо встретится символ с большим номером
(a < b < c <.... < z < A <... < Z).
Строки можно складывать, если S1="это ", S2="моя строка", то S1+S2 даст "это моя строка".
Приоритет операторов (начиная с младших; в одной строке старшинство одинаково):
"+=", "-=", "*=", "/=", "%=", "<<=", ">>=", ">>>=", "&=", "^=", "|=".
5. Старшинство операций
условное выражение: "?:";
логическое "ИЛИ": "||";
логическое "И": "&&";
побитовое "ИЛИ": "|";
побитовое "XOR": "^";
побитовое "И": "&";
сравнение на равенство "= =", "!=";
сравнение: "<", "<=", ">", ">=";
побитовый сдвиг: "<<", ">>", ">>>";
сложение, вычитание: "+", "-";
умножение, деление: "*", "/";
отрицание, инкремент, декремент: "!", "~", "++", "--";
скобки: "()", "[ ]".
6. Функции
В JavaScript, как и в С или Java, процедуры и процедуры — функции называются функциями. Декларация функции состоит из:
зарезервированного слова function;
имени функции;
списка аргументов, разделенных запятыми, в круглых скобках;
тела функции в фигурных скобках.
function myFunction(arg1, arg2,...)
{
...
последовательность операторов
...
}
где myFunction — имя функции, arg1, arg2 — список формальных параметров
Пример:
function Factorial(n)
{
if((n<0)||(round(n)!=n))
{
alert("функция Factorial не определена при аргументе "+n);
return NaN;
}
else
{
result=(n*Factorial(n-1));
return result;
}
}
Функция может не возвращать значения с помощью зарезервированного слова return.
Пример:
function Greeting(s)
{document.write("Hello,"+s+"!");
}
Вызов функции производится с фактическими параметрами.
Пример:
Factorial(2+1);
— внутри некого выражения возвратит 6, а
Greeting("world");
—приведет к выводу на экран строки "Hello, world!".
Каждая функция, например myFunction, является объектом с именем myFunction, аргументы которого хранятся как массив, имеющий имя arguments, при этом доступ к аргументам может осуществляться так:
myFunction.arguments[i], где i — номер аргумента (нумерация начинается с 0).
Число фактических параметров должно быть равно либо больше числа формальных параметров в описании функции. При этом, при вызове функции действительное число переданных аргументов хранится в поле myFunction.arguments.length и может динамически изменяться переприсваиванием значения этого поля.
Пример:
Вывод в документе списка в формате HTML.
Первый аргумент здесь (ListType) может иметь значение "о" или "О" для упорядоченного списка и "u" или "U" для неупорядоченного. Далее идут элементы списка.
function myList(ListType)
{
document.write("<"+ListType+"L");
for(var i=1; i < myList.arguments.length; i=i+1)
{document.write("<LI>"+myList.arguments[i]);
}
document.write("</"+ListType+"L>");
}
Вызов в тексте HTML документа этой функции:
<script>
myList("0", "один", 2, "3")
</script>
приведет к выводу текста:
один
7. Условный оператор if
первый вариант синтаксиса оператора if:
if(условие)
{
утверждение
}
(Утверждением называется оператор или последовательность операторов.)
b) второй вариант синтаксиса оператора if:
if(условие)
{
утверждение1
}
else
{
утверждение2
}
Пример использования условного оператора:
function checkData()
{
if (document.form1.threeChar.value.length==3)
{return true;
}
else
{alert('Введите ровно 3 символа');
return false;
}
}
8. Цикл for
for(секция инициализации; секция условия; секция изменения счетчиков)
{
утверждение
}
Каждая из секций может быть пустой. В секциях инициализации и изменения счетчиков можно писать последовательности выражений, разделяя их запятыми. Выполнение цикла происходит следующим образом. Первой выполняется секция инициализации. Затем проверяется условие. Если условие равно true, то выполняется тело цикла, а затем секция изменения счетчиков. Если условие равно false, то выполнение цикла прекращается.
Пример:
function HowMany(SelectObject)
{
var numberSelected=0
for (i=0; i< SelectObject.options.leght; i++)
{
if (SelectObject.options[i].selected==true) numberSelected++;
}
return numberSelected;
}
Оператор for может использоваться для перебора всех полей объекта (см. далее раздел про объектную модель)
Синтаксис:
for(переменная in объект)
{
выражение
}
При этом производится перебор всех возможных значений указанной переменной в объекте, и для каждого из них выполняется утверждение.
Пример:
function student(name, age, group)
{
this.name=name;
this.age=age;
this.group=group;
}
function for_test(myObject)
{
for(var i in myObject)
{
document.write("i="+i+" => "+myObject[i]+"/n");
}
};
Helen=new student("Helen K.", 21, 409);
for_test(Helen);
Вывод на экран:
i=0 => Helen K.
i=1 => 21
i=2 => 409
9. Цикл while
while(условие)
{
выражение
}
Выполнение цикла while начинается с проверки условия. Если оно равно true, то выполняется тело цикла, иначе управление передается оператору, следующему за циклом.
Пример использования оператора while:
n1=10
n=0
x=0
while(n<n1)
{
n=n+1;
x=x+n;
}
2.8 Операторы прерывания выполнения циклов.
Для прекращения выполнения текущего цикла операторов for или while служит оператор break.
Пример использования оператора break:
function test(x)
{
var j=0;
var sum=0;
while(n<n1)
{
if(n==x)
{ sum=x;
break;
}
sum=sum=n;
n=n+1;
}
return sum;
}
Оператор continue прерывает выполнение текущей итерации внутри for или while и вызывает переход к началу следующей итерации.
Пример использования оператора continue:
function test1(x)
{
var j=0;
while(n<n1)
{ if(n==x)
{ sum=x;
continue;
}
sum=sum=n;
n=n+1;
}
return sum;
}