Лабораторная работа № 9 Программирование сценариев с помощью JavaScript
Цель. Изучение основных принципов программирования с помощью языка сценариев JavaScript.
Базовые сведения
Общие сведения о языке JavaScript. JavaScript - это язык для составления сценариев, позволяющих выполнять разные действия непосредственно на машине пользователя. Располагаются данные сценарии внутри HTML документов.
JavaScript применяется для проверки правильности заполнения форм, создания удобной навигации и других сервисов.
JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems на базе языка Sun's Java .С помощью JavaScript на Web-странице можно сделать то, что невозможно сделать стандартными тегами HTML. Скрипты выполняются в результате наступления каких-либо событий, инициированных действиями пользователя. Создание Web- документов, включающих программы на JavaScript, требует наличие текстового редактора и подходящего браузера. Некоторые просмотрщики включают в себе встроенные редакторы, поэтому необходимость во внешнем редакторе отпадает.
Несмотря на отсутствие прямой связи с языком Java, JavaScript может обращаться к внешним свойствам и методам Java- апплетов, встроенных в страницу HTML. Разница сводится к тому, что апплеты существуют вне браузера, в то время как программы JavaScript могут работать только внутри браузера.
JavaScript и Java- это два разных языка программирования. Java- это объектно-ориентированный язык программирования и запускается при помощи компилятора и вспомогательных файлов. Разрабатываемые с помощью Java программы могут работать как законченные приложения либо как встроенные в Web-страницу апплеты. И хотя они встроены в страницу HTML, они хранятся на клиентской машине как отдельные файлы.
Использование JavaScript в html. Скрипт-Программа размещается непосредственно на html-Странице, как правило, внутри тега html-Файла. Она загружается в браузер вместе с файлом.
JavaScript может быть введен в HTML-Документ двумя средствами: как функция, которая использует тег SCRIPT; как обработчик результата, который использует тег HTML.
Тег SCRIPT. Каждая вставка сценария JavaScript в HTML-документ начинается открывающим тегом <SCRIPT> и завершается закрывающим </SCRIPT>. Открывающий тег <SCRIPT> может иметь необязательный атрибут LANGUAGE равный JavaScript. В связи с появлением еще одного скриптового языка VBScript рекомендуется использовать этот атрибут.
Если страница, содержащая сценарий, будет загружена в Обозреватель не поддерживающий языки сценариев, строки программы, засоряя экран, будут выведены как обычный текст. Если же использовать тег комментария, то такой браузер пропустит текст программы, воспринимая его как комментарий. Двойная косая черта перед закрывающим текст скприпта тегом комментария гарантирует, что тег не будет воспринят Обозревателем как оператор JavaScript:
<SCRIPT LANGUAGE="JavaScript">
<! ---- --alert("Добро пожаловать !")
// ---->
</SCRIPT>
Результатом выполнения этого скрипта будет вывод на экран сообщения: Добро пожаловать! (рис. 9.1).
Рис. 9.1. Результат выполнения скрипта
JavaScript загружается в браузер вместе с файлом html. Запуск программы проходит тогда, когда происходит определенное событие, на которое указано в файле.
Синтаксис. Определение и инициализация переменных. Типы данных.
Сценарий JavaScript является набором операторов, которые последовательно интерпретируются браузером. Операторы можно размещать как в одном, так и в нескольких строках.
Точка с запятой. Как и во многих языках, конструкции javascript можно разделять точкой с запятой. Но при переходе на новую строку в javascript точка с запятой становится необязательной, ее можно не ставить.
Эти две строки полностью эквивалентны:
a = 5
a = 5;
Блоки задаются фигурными скобками.
Комментарии возможны в двух вариантах / / и /*...*/:
/ / однострочные комментарии / * многострочные комментарии * /
Идентификатор JavaScript или имя должны начинаться из символа или символом подчеркивания ("_"); последовательностью символов также могут быть цифры (0-9). Символы включают знаки от "A" до "Z" (верхнего регистра) и знаки от "a" до "z" (нижний регистр). JavaScript учитывает регистр.
Некоторые примеры допустимых имен переменных:
Number_hits
temp99
_name
В JavaScript существует две области действия, которые переменные могут иметь: глобальная и локальная.
Чтобы объявить локальную переменную внутри функции, используется ключевое слово var, например:
var total = 0
Чтобы объявить глобальную переменную, необходимо объявить переменную назначение, которой просто присваивать значение переменной (или в функции или вне нее), например:
total = 0
Лучше всего объявлять глобальные переменные вначале скрипта, так, чтобы функции наследовали переменную и ее значение.
Переменные в javascript слабо типизированные. Это означает, что при объявлении не нужно указывать тип. Можно присвоить любой переменной любое значение. Однако при этом интерпретатор javascript (браузер) всегда знает, какого типа значения содержит данная переменная, т.е. - какие операции к ней можно применять. Переменную необязательно объявлять. Достаточно ей присвоить значение. Так, например, можно определить переменную следующим образом:
var answer = 42
А позже можно присвоить той же переменной значение:
answer = "Thanks for all the fish..."
JavaScript распознает такие типы величин: числа (целые, действительные), логические значения (true или false), строки, пустой указатель.
Для объявления строк используются кавычки - простые ' или двойные ". Между ними нет разницы.
a = 'моя'
b = "строка"
Для конкатенации строк используется оператор +.
a = "моя"
b = "строка"
alert (a + '' + b)
Поскольку JavaScript не поддерживает методов и свойств для определения типа значения переменной, очень важно внимательно отслеживать типы переменных, во избежание неожиданных результатов.
В выражениях, которые включают числовые и строковые значения, JavaScript превращает числовые значения в сроку. Например:
x = "The answer is " + 42
y = 42 + " is the answer."
В первой переменной будет строка "The answer is 42 ". Вторая конструкция возвращает строку " 42 The answer is".
JavaScript предоставляет несколько специальных функций для управления строковыми и числовыми значениями:
eval вычисляет строку, которая представляет любые JavaScript-Литералы или переменные, превращая его в число;
parseInt превращает строка в целое число в указанной системе исчисления;
parseFloat превращает строку в число с плавающей точкой.
Javascript - объектный язык. Строки, числа, функции и массивы - все это объекты со своими методами и свойствами. Это необходимо знать и иметь в виду с самого начала.
Методы объектов вызываются через точку. Например, в сроке String есть метод toUpperCase, который возвращает строку в верхнем регистре:
name = "Vasya"
alert (name.toUpperCase ())
Практически все в javascript делается с помощью вызова методов разных объектов. Объекты создаются функциями-конструкторами с помощью директивы new.
Выражения и операторы. Выражение - любой имеющий силу набор литералов, переменных, операторов, и выражений, которые вычисляют простое значение. Значение может быть число, строка, или логическое значение. Существует два типа выражений: которые присваивают значение переменной, и которые вычисляют выражение без присваивания его переменной. Например, выражение: x = 7
Является выражением, которое приписывает x значение 7. Это выражение вычисляет 7. Такие выражения используют операторы присвоения. С другой стороны, выражение: 3 + 4
Просто вычисляет 7; оно не выполняет присвоение. Операторы, используемые в таких выражениях, упоминаются просто как операторы.
JavaScript имеет следующие выражения:
Арифметические: например, вычисляет число.
Строковые: вычисляют строку символов, например "Джон" или "234".
Логические: вычисляют true(истина) или false(ложь).
Язык JavaScript включает в себя значение null для переменных, которым не присвоено никакое значение. Любая попытка использовать переменную, имеющую значение null, в вычисляемом выражении приводит к ошибке, за исключением случая присваивания значения null переменной, например timerID = null.
Условное выражение может иметь одну из двух значений, основанных на условии. Синтаксис
(Условие)? Val1: val2
Если условие истинно, то выражение имеет значение val1, иначе имеет значение val2.
Например,
status = (age >= 18) ? "adult" : "minor"
Это утверждение присваивает значение "adult" переменной status, если age равно 18 или больше чем 18. Иначе, приписывает значение "minor" переменной status.
JavaScript имеет арифметические, строковые и логические операторы. Имеет, и бинарные и унарные операторы. Бинарный оператор требует двух операндов, унарный перед оператором и одним после оператора:
Operand1 operator operand2
Например, 3 + 4 or x * y
Унарный оператор требует одного операнда, до или после оператора:
operator operand
Или
operand operator
Например x ++ или ++ x.
Массивы. В javascript есть два основных способа объявить массив.
Для массива с числовыми индексами используется объект типа Array.
arr = new Array ("my", "array")
alert (arr.length) // результат 2
Свойство length содержит длину массива, которая всегда равна последнему индексу (в примере - это 1) плюс один.
По обыкновению используется другая, почти эквивалентная, запись массива, которая использует квадратные скобки:
arr = ["my", "array"]
alert (arr [0]) // "my" - нумерация от нуля
Новые элементы можно добавить в конец методом push.
Для перебора значений используется цикл for.
arr = ["первый", "второй"]
arr.push ("третий")
for (var i = 0; i <arr.length; i + +) {
alert (arr [i])
}
Ассоциативные массивы. Для массивов, ключи которых являются строками, используется Object. Следующая запись задает ассоциативный массив с ключами n и str:
obj = {
n: 1,
str: "Вася"
}
Для получения свойства объекта используются точка или квадратные скобки.
obj = {n: 1, str: "Вася"}
alert (obj.n) // точка
alert (obj ["n"])
Квадратные скобки разрешают получать свойство по переменной-ключу.
var key = "str"
alert (obj [key])
Точка используется, если имя свойства точно известно. Вызов obj.key возвратит свойство по имени "key", а квадратные скобки - по значению, которое содержится в переменной key.
При обращении к отсутствующему свойству возвращается специальное значение undefined.
a = {} // пустой объект
alert (a.something) / / undefined
alert (a.blabla === undefined)
В примере был использован оператор сравнения без приведения типа.
Операторы выбора. Операторы выбора относятся к операторам управления, назначением которых является изменение направления выполнения программы. Кроме операторов выбора к операторам управления относят: операторы цикла и операторы манипулирования объектами.
Операторы выбора предназначены для выполнения некоторых блоков операторов в зависимости от истинности некоторого логического выражения. К операторам выбора относят оператор условия if...else и переключатель switch.
Синтаксис оператора условия:
if(условие)
{
Группа операторов 1
…
}
[else]
{
Группа операторов 2
…
}
В следующем примере в виде JavaScript реализована проверка введенных имени пользователя и пароля. В случае ввода неверных данных, выдается соответствующее сообщение (рис. 9.2).
<script type="text/javascript">
<!--
function EW_checkMyForm(EW_this) {
if (!EW_hasValue(EW_this.userid, "TEXT" )) {
if (!EW_onError(EW_this, EW_this.userid, "TEXT", "Пожалуйста, введите имя пользователя"))
return false;
}
if (!EW_hasValue(EW_this.passwd, "PASSWORD" )) {
if (!EW_onError(EW_this, EW_this.passwd, "PASSWORD", "Пожалуйста, введите пароль"))
return false;
}
return true;
}
//-->
</script>
Рис. 9.2. Страница идентификации пользователя
Если количество вложенных операторов if больше трех, то программа становится сложной для понимания. В этом случае уместно использовать оператор switch. Оператор вычисляет некоторое выражение и сравнивает со значением, заданным в блоках case. Синтаксис оператора switch :
switch(выражение){
case значение1:
[операторы 1]
break;
case значение 2:
[операторы 2]
break;
…
default:
[операторы]
}
Операторы цикла. JavaScript поддерживает две формы цикла: for и while. Кроме этого, операторы break и continue используются вместе с циклами.
Цикл for повторяет группу команд до тех пор, пока указанное условие неверно. Синтаксис оператора for:
for (начальное значение; условие; изменение итератора)
{
операторы
}
Пример: цикл расчета суммы целых чисел от 1 до 100.
s=0
for (i=1; i<101; i++)
{
s=s+1; }
Оператор while повторяет цикл до тех пор, пока указанное условие имеет значение Истина. Синтаксис:
while(условие)
{
операторы
}
Иногда необходимо завершить цикл не по условию, которое задано в конструкции, а в результате выполнения некоторого условия в теле цикла. Для этого используются операторы break и continue. Оператор break завершает цикл и передает управление программой первому оператору после цикла. Оператор continue передает управление оператору проверки истинности условия в цикле while и оператору восстановления значения счетчика в цикле for и продолжает выполнение цикла.
Использование функций. Функция JavaScript (это именованная группа команд, которые решают определенные задачи и могут возвратить некоторое значение. Функция определяется при помощи оператора function, которы имеет такой синтаксис:
function Имя_Функции ([параметры])
{
[операторы]
return [возвращает_значение]
}
Параметры, которые передаются функции, разделяются запятыми. Необязательный оператор return в теле функции (блок операторов, который ограничен фигурными скобками) определяет значение, которое возвращается функцией. Определение функции только задает ее имя и определяет, что будет делать функция при ее вызове.
Определение функции необходимо реализовать на HTML-Странице для ее вызова. Например, для вывода на экран окна сообщения с текстом "Это вызов функции", определяется функция Go и реализуется ее вызов:
<html>
<head>
<title>Использование JavaScript</title>
<script>
function Go() {
alert("Это вызов функции")
}
</script>
</head><body>
<script>
Go();
</script>
</body>
</html>
Объектная модель JavaScript. JavaScript относят к объектно-ориентированным языкам программирования. Объект - это целостная конструкция, имеющая свойства, которые являются переменными JavaScript, и методы их обработки. Свойства могут быть другими объектами. Функции, связанные с объектами, называют методами объекта. Для обращения к свойствам объекта используется синтаксис:
objectName.propertyName.
Имя объекта, имена свойств и методов чувствительны к регистру. Для определения свойств им необходимо присвоить значение. Например, если существует объект с именем myCar, то для определения свойства model необходимо:
myCar.model = "Таврия"
Для определения методов необходимо сначала определить обычную функцию, а после этого связать ее с существующим объектом.
object.methodname = function_name
где object - существующий объект,
methodname - имя, которое назначается методу,
function_name - имя функции.
Вызов метода в контексте объекта реализуется следующим образом:
object.methodname (params);
Для создания экземпляра объекта необходимо:
написать функции, которые будут использованы как методы объекта;
с помощью обычной функции определить объект;
с помощью оператора new создать экземпляр объекта.
Например, необходимо создать объект с именем car и свойствами model, color и методом go. Для этого нужно написать функцию when, которая будет использована для определения метода go:
function when()
{
//код функции
}
После этого нужно написать функцию для определения объекта:
function car( model, color)
{
this.model = model;
this.color = color;
this.go =when;
}
Оператор this используется для того, чтобы присвоить значение свойствам объекта, на основании параметров, которые передаются функции.
Создание объекта mycar можно реализовать следующим образом:
mycar = new car("Таврия", "Зеленый")
Обработка событий. Приложениями JavaScript в браузере преимущественно руководят события. События (Events) - это действия, которые происходят в результате работы пользователя (например, нажатие кнопки мыши). Есть определенный набор событий, которые браузер распознает.
Обработчик результата записывается в документ как атрибут тега HTML, к которому приписывается код JavaScript, для выполнения. Общий вид:
<TAG eventHandler="JavaScript Code">
Где TAG - это тег HTML, и eventHandler - имя обработчика результата.
Например, созданная функция JavaScript с названием compute. Можно заставить браузер выполнять эту функцию, когда пользователь нажимает на кнопку, где в onClick прописан обработчик результата кнопки:
<INPUT TYPE="button" VALUE="Calculate" onClick = "compute(this.form)">
Можно помещать любые выражения JavaScript внутри кавычек onClick. Эти команды будут выполнены, когда пользователь нажмет на кнопку. Если необходимо включить более чем одно выражение, отдельные выражения записываются через точку с запятой (;).
Если события обращаются к тегам HTML, то для этого можно определять обработчик событий. Обработчик событий имеет имя события, которое начинается с "on". Например, обработчик результата для результата Focus - onFocus.
Много объектов также имеют методы, которые подражают событиям. Например, кнопка имеет метод нажатие, которое подражает нажптую кнопку. Методы, которые подражают событиям не вызывают обработчика событий (табл. 9.1). Так, например, метод нажатия не вызывает обработчика результата onClick. Однако, можно всегда вызвать обработчик результата (например, можно вызвать onClick явным образом в сценарии).
Таблица 9.1