Разработка web сайта на основе HTML с использованием JavaScript

Что касается JavaScript, его объекты находятся внутри браузера. Это, в частности, окно браузера, формы и их части, например кнопки и текстовые окна. В JavaScript также имеется собственная группа встроенных объектов, к которым относятся массивы, данные и т.д. Сейчас вам не обязательно фиксировать на этом внимание, поскольку все эти объекты будут рассмотрены позже. Пока вы должны усвоить лишь необходимые определения.

Именно благодаря наличию объектов язык JavaScript считается объектно-ориентированным. Язык организован вокруг объектов, а не действий, или, иначе говоря, ориентирован на данные, а не на логику. При объектно-ориентированном программировании первоочередное внимание уделяется объектам, с которыми производятся некоторые манипуляции, а не логическим правилам, необходимым для таких манипуляций. Преимуществом такого подхода является не только облегчение программирования (или написания сценария), но и в то, что каждое действие можно выполнить разными способами.

Методы

Метод (method) - это действия, которые может выполнять объект. В реальном мире у объектов тоже имеются какие-либо методы. Машины ездят, собаки лают, доллар покупается и т.д. В нашем случае alert () является методом объекта Window, то есть объект Window может выдавать пользователю какое-либо предупреждение в окне сообщений. Примерами других методов являются открытие и закрытие окон, нажатие кнопок. Здесь речь идет о трех методах: open (), close () и click (). Обратите внимание на круглые скобки. Они означают, что методы, в отличие от свойств, используются.

Свойства

У всех объектов имеются свойства (properties). Если вы и далее будете следовать аналогии с объектами реального мира, то обнаружите, что все предметы обладают какими-то свойствами: у машин есть колеса, а у собаки - шерсть. Что касается JavaScript, то у такого объекта, как браузер, имеется название и номер версии.

2.2 Управление данными с помощью переменных

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

Значения в языке JavaScript

Самое ценное в нашем мире -- это информация. Каждый фрагмент информации в JavaScript рассматривается как значение (value). Так как информация может быть очень разнообразной, имеются различные категории значений. Простейшие типы данных в JavaScript принято называть основными типами (primitive types).

Три основных типа данных:

- строка (string);

- число (number);

- булево выражение (boolean).

Строки

Возможно, самым распространенным типом данных является строка. Строка -связанный набор символов, включающий в себя буквы, знаки препинания и цифры. В JavaScript строки чаще всего представляют собой какой-либо текст:

Здравствуйте и добро пожаловать!

Кто вы?

Мой рост - шесть футов.

Строки, вставляемые в сценарий JavaScript, заключаются в двойные или одинарные кавычки, например:

"Здравствуйте и добро пожаловать!"

Причина использования двух типов кавычек заключается в том, что двойные кавычки (") могут содержаться внутри строки, заключенной в одинарные кавычки ('), и наоборот. Например:

"J'm 6 feet tall"

'"Кто вы?" - спросил он.'

Строка может и вовсе не содержать символов. В этом случае она называется пустой строкой и обозначается пустыми кавычками:

Числа

JavaScript воспринимает два типа чисел. Это целые числа (integer) и числа с плавающей точкой (floating-point number).

Целые числа

Включают в себя положительные целые числа, например 1,2,3, отрицательные целые числа, например -1, -2, -3 и нуль - 0.

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

Числа с плавающей точкой

Числа с плавающей точкой представляют собой числа с дробной десятичной частью:

3.1415926535897932384626433832795

Либо это числа, выраженные в экспоненциальном виде:

3.76е2

При экспоненциальной записи числа символ <se» в верхнем или нижнем регистре означает «10 в степени»-.

Число, начинающееся с нуля и содержащее десятичную точку, считается числом с плавающей точкой.

Число, начинающееся с нескольких нулей и содержащее десятичную точку (например, 005.5) воспринимается как ошибка.

В табл. 2.1 приводятся примеры чисел, использующихся в JavaScript, чтобы вам проще было освоиться с ними.

Большие и маленькие числа

Таблица 2.1. Примеры чисел, использующихся в JavaScript

Число	Описание	Десятичный эквивалент
91	Целое число	91
4.56е2	Число с плавающей точкой	456
0.001	Число с плавающей точкой	0.001
00.001	Ошибка
0.001	Четыре равных числа	0.001
.001	с плавающей точкой
1е-3
1.0е-3

Числа, используемые в JavaScript, могут быть как очень большими, так и очень маленькими. Под очень большими подразумеваются величины до 10³⁰⁸ (единица с тремястами восемью нулями), а под очень маленькими - Ю~³⁰⁸ (нуль целых с тремястами семью нулями и единицей после запятой).

Булевы выражения

Булевы выражения отличаются от строк и чисел тем, что могут принимать лишь два значения: true (истина) и false (ложь).

Булевыми эти выражения названы в честь английского математика Джорджа Буля (1815-1864).

Ниже помещены примеры булевых выражений:

Собака лает = true

У собаки пять ног = false

К булевым выражениям вернемся в главе 6, где будут рассматриваться выражения и условия. Пока вам нужно просто знать, что такой тип данных существует и может использоваться в JavaScript.

Особые типы данных: числа, неопределенные и неопределяемые выражения.

Помимо рассмотренных типов данных, встречаются еще несколько основных, менее очевидных типов. Далее приводятся четыре числовых значения:

- положительная бесконечность;

- отрицательная бесконечность;

- положительный и отрицательный нуль;

- несуществующее число (not a number - NaN) .

Имеются еще два специальных типа данных:

- неопределенный (null);

- неопределяемый (undefined).

Что касается первых четырех типов, то вам не придется работать с ними (не будете же вы вводить в программу бесконечное число). Под несуществующим числом понимается результат бессмысленной математической операции (например, деления на нуль). Бесконечностью считается значение, превышающее 10³⁰⁸ (например, результат возведения 10³⁰⁰ в квадрат), и оно также не имеет для вас особого значения (если только не свидетельствует об ошибке).

Неопределенный тип может иметь только одно значение - null. В данном случае это свидетельствует о полном отсутствии полезной информации или каких-либо данных.

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

Переменные в языке JavaScript

Теперь, когда вам известно об используемых в языке JavaScript значениях, вы готовы к тому, чтобы войти в мир переменных (variable) JavaScript.

Переменные имеют огромное значение не только в JavaScript, но и во всех языках программирования. Без их использования трудно обойтись, а с их помощью вы сможете управлять всеми типами данных.

Переменная - это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные во время исполнения сценария JavaScript. Возможно, это определение кажется несколько сложным, но на самом деле пользоваться переменными очень просто.

Создание переменных

В языке JavaScript переменные создаются довольно легко. Давайте вернемся к стандартному шаблону HTML, чтобы сразу ввести вас в курс дела:

<html>

<head>

<Title>Простая страница</Title>

<script language="JavaScript">

<!-- Маскируемся!

// Снимаем маскировку. -->

</script>

</head>

<body>

</body> </html>

Прежде всего нужно создать переменную. Это можно сделать двумя путями: объявив ее заранее или создав «на лету». Сначала будут рассматриваться переменные, объявляемые заранее. Позже в этой главе рассказывается, каким образом они создаются «на лету».

Пример. Чтобы объявить (создать) переменную, в языке JavaScript используется оператор var, вслед за которым указывается имя, которое вы хотите присвоить переменной. В данном примере объявляется переменная под названием msg:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

var msg;

// Снимаем маскировку. -->

</script>

</head>

<body>

</body> </html>

Вот что следует знать об именах переменных:

- в именах переменных можно использовать символы нижнего и верхнего регистра либо сочетание того и другого;

- до объявления переменной ее значением считается undefined;

- имя переменной не может начинаться с цифры;

- в именах переменных недопустимы пробелы; если необходим разделитель, используется символ подчеркивания (_);

- в именах переменных следует избегать символа доллара ($) поскольку он не воспринимается, браузерами Internet Explorer 3.02 (поддерживающим JScript 1.0) и Netscape Navigator 2.02;

- следует избегать использования имен переменных, отличающихся только символами верхнего и нижнего регистра (например, msg и MsG), поскольку JScript 1.0 не сумеет их различить.

Рассмотрим следующие примеры корректных имен переменных:

msg

Hello_all Msgl Msg_l

Приведенные ниже имена переменных либо являются недопустимыми, либо их следует избегать:

- Imsg - начинается с цифры;

- helloall- содержит пробел;

- var- зарезервированное слово JavaScript;

- dollar$ - в имени содержится символ $;

- msg и Msg - не используйте такие имена в одном сценарии, поскольку различаются они только регистром.

Пример. Если вы хотите присвоить значение только что объявленной переменной, это можно сделать в той же строке:

<html>

<head>

<title> Простая страница </title>

<script language="JavaScript">

<!-- Маскируемся!

var msg = "Добро пожаловать в мир переменных JavaScript!";

// Снимаем маскировку. -->

</script>

</head>

<body>

</body> </html>

2.3 Массивы JavaScript и Escape-последовательности

В предыдущей главе вы научились пользоваться переменными. В этой главе вы узнаете о новой разновидности переменных, которые способны хранить в себе несколько значений, - о массивах. Здесь рассказывается:

- как пользоваться массивами;

- как создаются массивы;

- как создаются элементы массива;

- как пользоваться знаками переключения кода.

Как пользоваться массивами

Массив (array) - мощное средство программирования для любого языка, в том числе в JavaScript. Массив позволяет сохранять несколько независимых значений в одной переменной. Обычно эти значения как-то связаны (например, названия дней недели). Преимущество массивов заключается в том, что правильное их использование значительно упрощает код и помогает избежать создания множества переменных с похожими именами.

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

Пример. В первую очередь вам нужно создать массив:

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

var days_of_week = new Array(7);

// Снимаем маскировку. -->

</script>

</head>

<body>

</body> </html>

Эта простая строка сценария приводит к нескольким различным последствиям:

- создается переменная days_pf_week;

- с помощью new Array () указывает, что новая переменная является массивом; а определяется размер массива (в данном случае - 7).

Таким образом, созданы семь пустых ячеек, или элементов, которым нужно присвоить некоторые значения.

Ввести значения достаточно просто, только не забывайте отслеживать, какое значение присваивается каждому элементу.

days_of_week[x] = значение;

В данном случае х означает номер элемента.

Прежде всего обратите внимание, как JavaScript нумерует элементы. Он рассматривает первый элемент массива не как первый (с номером 1), а как нулевой (с номером 0). То есть в данном примере дням недели будут соответствовать порядковые номера от 0 до 6, а не от 1 до 7.

Пример. Итак, чтобы присвоить соответствующее значение первому элементу массива (в данном случае это понедельник), выполняются следующие действия:

<html>

<head>

<title>Простая страница</title>

<script language=" JavaScript">

< ! - - Маскируемся!

var days_of_week = new Array (7), *

days_of_week[0] = "Понедельник";

// Снимаем маскировку. -->

</script>

</head>

<body>

</body> </html>

Пример. Следуя этому образцу, вы можете заполнить массив соответствующими значениями:

<html>

<head>

<title> Простая страница </title>

<script language="JavaScript">

<!-- Маскируемся!

var days_of_week = new Array(7);

"Понедельник"; "Вторник"; "Среда"; "Четверг"; "Пятница"; "Суббота"; "Воскресенье";

days_of_week[0]

days_of_week[1]

days_of_week[2]

days_of_week[3]

days_of_week[4]

days_of_week[5]

days_of_week[6]

// Снимаем маскировку. -->

</script>

</head>

<body>

</body> </html>

Теперь вы можете извлекать из массива значения элементов. Как ранее элементам присваивались значения посредством имени переменной (в данном случае days_of _week) и указанного в квадратных скобках номера элемента (например, days_of_week[2]), так теперь этот формат используется для извлечения значений из массива.

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

<html>

<head>

<title>Простая страница</title>

<script language="JavaScript">

<!-- Маскируемся!

var days_of_week = new Array(7),*

days_of_week[0] = "Понедельник";

days_of_week[1] = "Вторник";

days_of_week[2] = "Среда";

days_of_week[3] = "Четверг";

days_of_week[4] = "Пятница";

days_of_week[5] = "Суббота";

days_of_week[6] = "Воскресенье";

alert(days_of_week[2]);

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

Не забывайте, что счет элементов массива начинается с нуля.

Пример. Здесь представлен еще один способ, которым достигается тот же результат:

<html>

<head>

<title> Простая страница </title>

<script language="JavaScript">

<!-- Маскируемся!

var days_of_week = new Array(7);

days_of_week[0] = "Понедельник";

days_of_week[1] = "Вторник";

days_of_week[2] = "Среда";

days_of_week[3] = "Четверг";

days_of_week[4] = "Пятница";

days_of_week[5] = "Суббота";

days_of_week[6] = "Воскресенье";

var x = 2;

alert(days_of_week[x]);

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

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

2.4 Выражения, условия, операции, строки и числа

Из предыдущей главы вы узнали, как в JavaScript пользоваться переменными и массивами для сохранения информации. В этой главе вы закрепите усвоенный материал и научитесь работать с этой информацией. Здесь рассматриваются следующие понятия:

- выражения;

- условия;

- различные операции и способы их использования;

- преобразование строки в число и наоборот.

Что такое выражения и условия

При изучении любого языка программирования (и JavaScript в том числе) время от времени приходится отвлекаться на попутные замечания. Давайте на минуту оторвемся от упражнений и рассмотрим новые термины.

Выражения и условия

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

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

1 + 2 = 3

Вы скомбинировали два значения (1 и 2), чтобы получить третье (3). Вот еще один пример:

3 + 3-1 = 5

Здесь комбинация трех значений (3,3 и 1) приводит к появлению нового значения (5).

Условия (conditions) позволяют сравнивать величины и определять логическое значение - true или false. Ниже приводится пример условия:

Лимоны желтые? Да.

Или другой пример:

3 + 3 = 6? Да.

Заметьте, что на оба этих вопроса можно дать только два ответа - да или нет (хотя на вопрос о лимонах можно ответить «наверное»). В языке JavaScript (и в других компьютерных языках) использование условий подразумевает только два результата - да или нет.

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

Знакомство с операциями

В выражениях и условиях данные комбинируются с помощью операций (operator). Если манипуляции осуществляются с какой-либо одной величиной, то такая операция именуется операцией с одним операндом (unary operator). Если таких величин две, то операция называется операцией с двумя операндами (binary operator), а если три - операцией с тремя операндами (ternary operator).

Давайте рассмотрим наиболее часто используемые операции.

Арифметические операции

Арифметические операции - это всем известные математические действия:

а сложение (+);

1 + 3 = 4 а вычитание (-);

2-1 = 4 Q деление (/);

4/2 = 2 а умножение (*);

2*2 = 4 а остаток от деления (%).

9 % 5 = 4

Это были операции с двумя операндами.

Единственная арифметическая операция, нуждающаяся в пояснении, - остаток от деления. То есть 9 делится на 5 с остатком 4. Иногда эту операцию также называют взятием по модулю. При использовании целых чисел результат также будет представлять собой целое число. Но если речь идет о действительных числах (с плавающей точкой, не целых), в результате получится действительное число. Например:

5.5 % 2.2 = 1.1

Будьте внимательны при использовании этих операций, поскольку при некорректном их выполнении они могут привести к результатам NaN (несуществующее число) или Infinity (бесконечность). Примером такой проблемной операции является деление на нуль.

Примеры сценариев JavaScript

Далее описывается несколько примеров использования арифметических операций. Здесь приводится только содержимое блока SCRIPT. Все примеры созданы на основе шаблона.

Пример. Операция сложения (+) -.

<script language="JavaScript">

<!-- Маскируемся!

var а = 6, b = 4;

alert(a + b);

// Снимаем маскировку. -->

</script>

Пример. Операция вычитания (-) -.

<script language="JavaScript">

<!-- Маскируемся!

var а = 6, b = 4;

alert(a - b);

// Снимаем маскировку. -->

</script>

Рис. 2.4.1. Использование операции вычитания

Пример. Операция деления (/) -.

<script language="JavaScript"> <!-- Маскируемся! var a = 6, b = 3; alert(a / b);

Операции сравнения

Операции сравнения используются для сопоставления выражений. К ним относятся следующие операции:

меньше (<);

5<6

меньше или равно (<=);

<= 6 или 6 <= 7

а больше (>);

> 4

больше или равно (>=);

5 >= 5 или 5 >= 4

равно (==);

5 == 5

не равно (!=).

5 != 3

Это были операции с двумя операндами.

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

Логические операции

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

Далее перечислены три логические операции:

- логическое И (and);

- логическое ИЛИ (ог);

- логическое НЕ (not).

Логическое И и логическое ИЛИ - операции с двумя операндами, а логическое НЕ - операция с одним операндом. Они позволяют свести воедино результаты сравнений нескольких переменных.

Логическое И (&&) означает, что обе части выражения должны быть истинны. В качестве примера из жизни можно взять мысли водителя перед нажатием на педаль тормоза: машина едет слишком быстро && нужно затормозить.

Логическое ИЛИ (II) означает, что, по крайней мере, одна часть выражения должна быть истинной. Снова представим себе мысли водителя перед тем, как он включает фары: темнеет I I плохая видимость.

Логическое НЕ изменяет значение истина/ложь на обратное. Например, фары включают, когда! светлеет (то есть когда темнеет).

Операции с одним операндом

Как видно из названия, эти операции осуществляются с одной величиной. К ним относятся:

префиксное и постфиксное возрастание (increment);

++

префиксное и постфиксное уменьшение (decrement);

унарный плюс;

+ унарный минус.

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

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

Результат использования префиксной операции проще предугадать: если а = 5, то ++а + 2 = 8, потому что значение переменной а было увеличено на единицу, прежде чем к нему прибавили число 2. В то же время

--а + 2 = 6,

потому что значение переменной а было уменьшено на единицу, прежде чем к нему прибавили число 2.

Постфиксные операции действуют иначе, поскольку возрастание или убывание производится только после использования старого значения в выражении. Таким образом, если а = 5, то а++ + 2 = 7, потому что увеличение на единицу будет выполнено после вычисления значения выражения. Это справедливо и для следующего выражения:

а-- + 2 = 6,

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

2.5 Создание сценариев с помощью функций и событий

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

Что такое функция

Функция (function) - это группа операторов, предназначенных для определенной цели и объединенных под общим именем. Функция имеет следующий вид:

function имяфункции()

{

операторы; }

В начале функции помещается слово function, за которым указывается ее имя (например, yourMessage). После имени ставятся круглые скобки (your-Message () ). Их отсутствие приводит к ошибке.

После круглых скобок идут открывающая и закрывающая фигурные скобки, между которыми помещаются операторы.

У каждой функции должно быть имя, причем имена функций, используемых на одной странице, не должны повторяться. Функция запускается (активизируется или вызывается) с Web-страницы.

Ваша первая функция

Пример. Теория может казаться вам слишком сложной, пока вы не перейдете к практике. Давайте сразу создадим первую функцию. Выполните следующие действия:

Откройте HTML-шаблон в текстовом редакторе.

Напечатайте в блоке SCRIPT слово function и дайте функции имя, например yourMessage (не забудьте о круглых скобках в конце строки):

<script language=" JavaScript ">

<! - - Маскируемся !

function yourMessage ()

// Снимаем маскировку. --> </script>

3.Затем добавьте пару фигурных скобок:

<script language=" JavaScript ">

<! - - Маскируемся !

function yourMessage ()

// Снимаем маскировку. --> </script>

Помните, что в начале ставится открывающая фигурная скобка ({), а в конце - закрывающая (}). Распространенная ошибка новичков заключается в том, что они питают скобки местами, в результате чего сценарий не работает.

4.Далее добавьте простой оператор:

<script language="JavaScript">

<!-- Маскируемся!

function yourMessage()

{

alert("Ваша первая функция!");

}

// Снимаем маскировку. -->

</script>

5.Сохраните результат, откройте его в браузере и посмотрите, что получилось.

Конечно, сначала вы ничего не увидите. Однако из этого вовсе не следует, что с вашим сценарием что-то не так. Причина в том, что вы еще не вызвали функцию. Это обязательно нужно сделать, потому что в отличие от простых операторов в блоке SCRIPT (запускаемых сразу) функции автоматически запускаться на выполнение не могут. Вам придется кое-что добавить в сценарий.

Функции в языке JavaScript могут вызываться несколькими способами. Самый простой, хотя и наименее эффективный - указание имени функции непосредственно в блоке SCRIPT:

<script language="JavaScript"> <!-- Маскируемся!

yourMessage();

function yourMessage()

{

alert("Ваша первая функция!");

}

// Снимаем маскировку. -->

</script>

Рис. 2.5.1

Сохраните страницу еще раз и откройте ее в браузере, чтобы увидеть результат. Появление окна подтверждающих сообщений доказывает, что ваша функция была вызвана и выполнена.

Способ, с помощью которого вы вызвали функцию в этом примере, - не самый удачный. По сути, он ничем не отличается от простого перечисления операторов в блоке SCRIPT, освоенного ранее.

Предпочтительнее вызывать одну функцию из другой. Но, прежде чем вы научитесь это делать, вам предстоит узнать, каким образом выполняются функции и что такое события (events), поскольку именно они дают возможность управлять выполнением функций.

События

Необходимо сделать так, чтобы при вызове функций всю работу вместо вас выполняли события. JavaScript - язык, управляемый событиями (event-driven). To есть все происходящее в нем является результатом события или вызывает какое-либо событие. Открытие новой страницы в браузере, перемещение курсора, щелчок мыши - все это относится к событиям. В этой книге вам встретятся четыре их вида:

- onLoad;

- onclick;

- onMouseover;

- onMouseout.

Давайте коротко рассмотрим каждый из них.

Событие onLoad

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

Событие onLoad очень удобно использовать в сценарии, когда необходимо, чтобы функция выполнялась сразу после открытия страницы.

Событие onClick

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

Событие onMouseover

Это событие похоже на событие onCl ick, но происходит не после щелчка мышью, а после наведения курсора на определенный элемент страницы. Событие onMouseover можно связать практически с любым объектом Web-страницы (текстом, изображением, кнопками, гиперссылками и т.д.). Его также можно использовать, чтобы повысить уровень интерактивности сценария.

Событие onMouseout

Это событие подобно событию onMouseover, но происходит в тех случаях, когда курсор мыши отводится от объекта.

3. РАЗРАБОТКА УЧЕБНЫХ ПРОГРАММ ПО ПРЕДМЕТУ "WEB ПРОГРАММИРОВАНИЯ"

3.1 Описание программ

Разработанные программные примеры предназначены студентам для выполнения практических задач по предмету "Web программирования".

Разработанные примеры с использованием JavaScript соответствиет рабочей программы практических занятие. Ниже приведён список разработанных программ:

- проверка правильности электронного адреса (по заданному шаблону);

- проверка заполнения полей формы (проверка на наличие данных);

- пример формы заказа (объединение всех проверок на уровне формы);

- фоновая музыка;

- простая анимация на JavaScript;

- пример таблицы стилей (без использования JavaScript);

- применение динамических стилей, используя JavaScript;

- управление слоями, используя JavaScript;

- создание анимации с помощью DHTML;

- поисковая система (написана на JavaScript);

- дополнительные примеры.

Примеры программ разработаны в виде Web-сайт. Каждый пример оформлен в виде отдельной Web-страницы.

Для работы с программой необходимо запустит файл index.htm. После открытия запуска файла index.htm появляется следующие окно (рис.3.1.1):

Рис.3.1.1. Главная страница

В главной странице приведен список примеров задании. С нажатием нужную ссылку открывается соответствующий пример.

Теперь подробно рассмотрим каждый из задачи.

1. Проверка правильности электронного адреса (по заданному шаблону) (рис.3.1.2)

Рис.3.1.2. Проверка правильности электронного адреса (по заданному шаблону)

Чтобы проверить действие программы нужно ввести в окошку «Адрес E-mail:» неверный адрес e-mail (например, такой как XYZ) и щелкнут текст «здесь». После щелчка текста «здесь» на экране появляется окно сообщения:

Рис. 3.1.3. Результат неправильного ввода e-mail адреса

Если вводится верный адрес e-mail (такой как emily@emilyv.com) в поле и щелкнут текст «здесь» на экране появляется следующем виде окно сообщения:

Рис. 3.1.4. Результат правильного ввода e-mail адреса

2. Проверка заполнения полей формы (проверка на наличие данных) (рис.3.1.5).

Рис.3.1.6. Проверка заполнения полей формы (проверка на наличие данных)

Чтобы увидеть результаты выполнения примера щелкнут на поле для ввода, а затем - в любом другом месте (не вводя никаких данных), чтобы проверить, работает ли функция exists(). В результате появляется следующие окно сообщение:

а) б)

Рис.3.1.7. Результаты выполнения примера «Проверка заполнения полей формы»: а) не заполнен поле «Имя», б) не заполнен поле «Фамилия»

3. Пример формы заказа (объединение всех проверок на уровне формы) (рис.3.1.7).

Рис. 3.1.7. Объединение всех проверок на уровне формы

Если не заполняется, какой нибуд нужное поля то с нажатиям кнопку «Отправить заявку» на экране появляется по очереди, следующие сообщении:

Рис. 3.1.8. Окно сообщении о незаполненных полей

4. Фоновая музыка (рис.3.1.9).

Рис.3.1.9. Окно примера «Фоновая музыка»

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

5. Простая анимация на JavaScript

В примере приведен метод создания простых анимации на JavaScript.

6. Пример таблицы стилей(без использования JavaScript) (рис.3.1.10).

Рис.3.1.10. Пример оформления цвета текста (без использования JavaScript)

Применение динамических стилей, используя JavaScript (рис.3.1.12).

Рис.3.1.11. Применение динамических стилей, используя JavaScript

Чтобы изменить цвет текста абзаца и заголовку, необходимо указать цвет текста абзаца и заголовка после щелкнуть на кнопке "Reload" (обновить). Указанные параметры будут применены к нижнему документу.

7. Управление слоями, используя JavaScript

Рис. 3.1.12. Управление слоями, используя JavaScript

Если нажимается кнопка «Показать Layer» в участке рабочей области появляется новый слой (рис.3.1.13).

Рис.3.1.13.

Чтобы убрать этот слой необходимо нажать кнопку «Скрыть Layer».

8. Создание анимации с помощью DHTML

На этом примере показано создание анимации с помощью DHTML.

9. Поисковая система (написана на JavaScript)(рис.3.1.14).

Рис. 3.1.14. Поисковая система (написана на JavaScript)

С использованием JavaScript разработано поисковая система, которое предназначена для поиска и сортировки методов, объектов, свойств, обработчика событий и функции JavaScript.

Рис.3.1.15. Результаты поиска

Кроме приведенных девяти примеров, разработаны ещё несколько дополнительных примеров (рис.3.1.16).

Рис.3.1.16. Дополнительные примеры

Студенты могут пользоваться исходными кодами выше перечисленных примеров. Исходные коды примеров можно открыт выбрав команду «Просмотр HTML-кода» из меню «Вид» (рис.3.1.17).

Рис.3.1.17. HTML-код примера

3.2 Руководство пользователя

Для нормальной работы разработанной программы необходимо имеет следующие аппаратно-программные средства:

1) Процессор: PENTIUM II и выше.

2) Оперативная память не менее 64 МБ.

3) Не менее 10 MБ память на винчестере.

4) Операционная система: Windows 98, NT, XP или Vista.

Для работы с примерами программ нужно открыть главное страницу (index.htm). Из предлагаемого списка примеров выбирается нужный пример.

4. ОХРАНА ТРУДА И ТЕХНИКА БЕЗОПАСНОСТИ

4.1 Цель и содержание БЖД

С развитием научно-технического прогрессе немаловажную роль играет возможность безопасного исполнения людьми своих трудовых обязанностей. В связи с этим была создана и развивается наука о безопасности труда и жизнедеятельности человека.

Безопасность жизнедеятельности - это комплекс мероприятий, направленных на обеспечение безопасности человека в среде обитания, сохранение его здоровья, сохранение его здоровья, разработку методов и средств защиты путем снижения влияния вредных и опасных факторов до допустимых значений, выработку мер, но ограничению ущерба в ликвидации последствии чрезвычайных ситуаций мирного и военного времени. Охрана здоровья трудящихся, обеспечение безопасности условий труда, ликвидация профессиональных заболеваний и производственного травматизма составляет одну из главных забот человеческого общества. Обращается внимание на необходимость широкого применения прогрессивных форм научной организации труда, сведения к минимуму ручного, малоквалифицированного труда, создания обстановки, исключающей профессиональные заболевания и производственный травматизм. На рабочем месте должны быть предусмотрены меры защиты от возможного воздействия опасных и вредных факторов производства. Уровни этих факторов не должны превышать предельных значений, оговоренных правовыми, техническими и санитарно-техническими нормами. Эти нормативные документы обязывают к созданию на рабочем месте условий труда, при которых влияние опасных и вредных факторов на работающих либо устранено совсем, либо находится в допустимых пределах.Данный раздел дипломного проекта посвящен рассмотрению следующих вопросов:

- определения оптимальных условий труда инженера-программиста;

- расчет освещенности;

- обеспечение пожаробезопасности.

4.2 Характеристика условий труда программиста

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

В настоящее время компьютерная техника широко применяется во всех областях деятельности человека. При работе с компьютером человек подвергается воздействию ряда опасных и вредных производственных факторов: Электромагнитных полей (диапазон радиочастот: ВЧ, ЧВЧ и СВЧ), инфракрасного и ионизирующего излучений, шума и вибрации, статического электричества.

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

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

4.3 Эргономические требования к рабочему месту

Проектирование рабочих мест, снабженных видеотерминалами, относится к числу важных проблем эргономического проектирования в области вычислительной техники.

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

В помещениях, где находится компьютер, необходимо обеспечить следующие величины коэффициента отражения: для потолка - 60 70 %, для стен - 40 50%, для пола - 30%, для других поверхностей и рабочей мебели - 30 40%.

Рабочее место программиста и оператора должно быть организовано таким образом, чтобы:

- высота стола с клавиатурой составляла 62-88 см над уровнем стола; а высота экрана (над полом) - 90 128 % см;

- расстояние от экрана до края стола - 40 - 115 см;

- наклон экрана от - 15 до + 20⁰ по отношению к нормальному его положению;

- положение спинки кресла оператора обеспечивало наклон тела назад 97: 121⁰ .

Клавиатуру следует делать отдельной от экрана и подвижной. Усилие нажима на клавиши должно лежать в пределах 0,25:1,5 Н, а ход клавишей - 1:5 мм.

Существенное значение для производительной и качественной работы на компьютере имеют размеры знаков, плотность их размещения, контраст и соотношение яркостей символов и фона экрана. Если расстояние от глаз оператора до экрана дисплея составляет 6080см, то высота знака должна быть не менее 3 мм, оптимальное соотношение ширины и высоты знака составляет 3 : 4, а расстояние между знаками - 15 : 20 % их высоты. Соотношение яркости фона экрана и символов от 1 : 2 : 1 : 5 до 1 : 10 : 1 : 15.

Подкладка под запястья при работе с клавиатурой позволит избежать болезни кистей.

Кроме всего прочего рекомендуется иметь специальные протирочное средство для мониторов, которое не только очищает экран от грязи и пыли, но и покрывает его антистатическим слоем.

4.4 Метрологические условия и их влияние на организм человека

Состояние воздушной среды производственных помещений характеризуется степенью частоты воздуха и метрологическими условиями, под которыми понимают различные сочетания температуры, влажности и скорости движения воздуха. Длительное действия на человека неблагоприятных метрологических условий резко ухудшает его самочувствие, снижает производительности труда и часто приводит к различным заболеваниям.

Метрологические условия для рабочей зоны устанавливается в соответствии с требованиями санитарных норм.

В качестве оптимальных мете-условий для данного помещения, где выполнялся дипломный проект, рекомендуем следующее:

- для голодного переуда года: температура воздуха от+20 до +25⁰ С влажность воздуха от 45 % до 50 %; скорость движения воздуха 0,2 м/с;

- для жаркого переуда: температура воздуха от+20 до +27⁰ С; влажность воздуха от 45 % до 50 %; скорость движения воздуха 0,5 м/с;

- допустимые нормы: температура воздуха от +18 до +27⁰С; влажность воздуха от 45% до 70%; скорость движения воздуха от 0,3 м/с до 0,5 м/с.

4.5 Защита от электромагнитных полей

Электромагнитные волны возникают при ускоренном движении электрических зарядов и представляют собой взаимосвязанное распространение в пространстве изменяющихся электрического и магнитного полей. Совокупность этих полей, неразрывно связанных друг с другом, называется электромагнитным полем. Электромагнитное поле характеризуется напряженностью электрического поля Е (вольт на метр. В/м) и напряженностью магнитного поля Н (ампер на метр, А/м). Величины Е и Н - векторные, их колебания происходит во взаимоперпендикулярных плоскостях.

Диапазоны электромагнитных излучений в области радиочастот: 30кГц 300 гц.

При нагреве человеческого организма в электромагнитном поле происходит отвод избыточной теплоты до плотности потока энергии I=10 mBт/см² . Это величина называется тепловым порогом, начиная с которого система терморегуляции не справляется с отводом генерируемого тепла, происходит перегрев организма человека, что негативно сказывается на его здоровье.

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

При воздействии на организм человека постоянных магнитных и электростатических полей с интенсивностью, превышающей безопасность уровень, могут развиться нарушения в деятельности сердечно-сосудистой системы, органов дыхания и пищеварения, возможно изменение состава крови и других. Электрические поля промышленной частоты (f=50 Гц) воздействуют на мозг и центральную нервную систему.

Предельно допустимые уровни облучения в диапазоне радиочастот определяются государственному стандарту «Электромагнитные поля радиочастот. Допустимые уровни на рабочих местах и требования к проведению контроля» в соответствии с этим нормативным документом установлена предельно допустимая напряженность электрического поля (E_пд, B/м) в диапазоне 0,06-300 МГц и предельно допустимая энергетическая нагрузка за рабочий день [ЭН_Enд , (В/м)². ч].

Между этим величинами существует связь:

где Т - время воздействия в течение рабочего дня, ч.

Для частот 0,06 3,0 МГц: E_пд =500 В/м, ЭН_Enд =20000 (В/м)².ч.

Для частот 3 30 МГц: E_пд=300 В/м, ЭН_Enд =7000 (В/м)².ч.

Для частот 30 - 300 МГц: Е_пд =80 В/м, ЭН _Епд=800 (В/м)².ч.

Предельно допустимая напряженность магнитного поля в диапазоне частот 0,06 - 3 МГц должна составлять Н_пд=50 А/м. Взаимосвязь этой характеристики и предельно допустимой энергетикой нагрузки за рабочий день

[ЭН_Нпд , (А/м)².ч] имеет вид:

где Т - время воздействия, ч (величина ЭН_пд не должна перевешать 200 (А/м)².ч).

Напряженность такого поля (Н) не должна превышать 8000 А/м.

Электрические поля промышленной частоты нормируются в соответствии с государственному стандарту «Электрическое поля промышленной частоты. Допустимые уровни напряжения и требования к проведению контроля на рабочих местах». В соответствии с этим нормативными документам предельно допустимый уровень напряженности электрического поля (Е) составляет 25000 В/м. Кроме того, оговаривается допустимое время пребывания (Т, ч) в электрическом поле с различной напряженностью:

Е5000 В/м - в течении рабочего дня; Е= 500020000В/м, от 20000 до 25000 В/м, 1/6 часть рабочего дня.

В нашей стране разработаны также гигиенические нормативы для электростатических полей, электрических полей диапазона частот 112 кГц, магнитных полей промышленной частоты (50 Гц) и другие.

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

Наиболее распространенный из них - экранирование рабочих мест, или непосредственно источника излучения. Отражающие экраны изготавливают из материалов с низким электросопротивлением (Си, латуни, Al и его сплавов, стали).

Экраны должны быть заземлены.

4.6 Расчет освещенности

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

Расчет освещенности рабочего места сводится к выбору системы освещения, определению необходимого числа светильников, их типа и размещения. Исходя из этого, рассчитаем параметры искусственного освещения.

Обычно искусственное освещение выполняется посредством электрических источников света двух видов: ламп накаливания и люминесцентных ламп. Будем использовать люминесцентные лампы, которые по сравнению с лампами накаливания имеют ряд существенных преимуществ:

– по спектральному составу света они близки к дневному, естественному;

– обладают более высоким КПД (в 1,52 раза выше, чем КПД ламп накаливания);

– обладают повышенной светоотдачей (в 34 раза выше, чем у ламп накаливания);

– более длительный срок службы.

Расчет освещения производится для комнаты площадью 15 м² ширина которой 5 м, высота -3м. Воспользуемся методом светового потока.

Для определения количества светильников определим световой поток,

подающий на поверхность по формуле:

где F -рассчитываемый световой поток, Лм;

Е -нормирования минимальная освещенность, Лк. Работу программиста, в соответствии с таблицей, можно отнести к разделу точных работ, следовательно, минимальная освещенность будет Е=300 Лк;

S -площадь освещаемого помещения (в нашем случае S=15м²);

Z -отношение средней освещенности к минимальной (обычно принимается равным 1,1…1,2, пусть Z=1,1);

K -коэффицент запаса (в нашем случае К-1,1);

n -коэффицент использования.

Значение n определим по таблице коэффицентов использования различных светильников. Для этого вычислим индекс помещения по формуле:

Где S -площадь помещения, S=15 м²; h -расчетная высота подвеса, h=2,92м; А -ширина помещения, А=3м, В -длина, В=5м.

Подставив значения получим:

Зная индекс помещения I, по таблице находим n=0,22

Подставим все значения в формулу для определения светового

потока F:

Для освещения выбираем люминесцентные лампы типа ЛБ40-1, световой поток которых F=4320 Лк.

Рассчитаем необходимое количество ламп по формуле:

где N -определяемое число ламп;

F -световой поток, F=33750 Лм;

F_л -световой поток лампы, F_л =4320 Лм.

При выборе осветительных приборов используем светильники типа ОД. Каждый светильник комплектуется двумя лампами.

4.7 Пожаробезопасность

Пожар - неконтролируемое горение вне специального очага, наносящее материальный ущерб. Возможности создания условий для возникновения пожара или его быстрого развития представляют собой пожарную опасность.

Опасными поражающими факторами пожара являются:

– открытый огонь и искры;

– выделяющееся при горении тепло вызывает повышение температуры окружающей среды, и когда она доходит до критической для окружающих предметов и вещей, загораются и они. Очаг пожара разрастается;

– токсичные продукты горения, дым;

– падающие части строительных конструкций и агрегатов.

Основными факторами взрыва являются:

– воздушная взрывная волна, основным параметром которой является избыточное давление в ее фронте;

– осколочные поля, создаваемые летящими обломками взрывающихся объектов, порождающее действие которых определяется количеством летящих осколков, их кинетической энергией и радиусом разлета.

Согласно санитарному норму производственное здание относится к категории Г (производства, связанные с обработкой несгораемых веществ и материалов в горячем, раскаленном или расплавленном состояние, сопровождающиеся выделением лучистого тепла, искр и пламени). Использование в компьютерах мощных радиоэлементов: понижающие и высоковольтные трансформаторы, выпрямляющие диоды, транзисторы, микросхемы, токопроводящие линии, работающих при относительно больших токах и напряжениях, предполагает их нагрев до высоких температур. Тепловое действие электрического тока, проходящего по проводам, при неисправностях или перегрузка электроустановка или аппаратуры может быть причиной пожара.

Основными причинами пожара являются:

1) повреждение изоляции проводов; 2) попадание на неизолированные провода токопроводящих предметов; 3) воздействие на провода химически - активных веществ, паров; 4) неправильный монтаж установки прибора.

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

...