Знакомство с языком сценариев JavaScript

Введение

JavaScript - язык программирования предназначенный для создания интерактивных HTML-документов с использованием сценариев. С помощью сценариев поддерживается диалог с пользователем, обеспечивается привлекательный вид web-страниц, осуществляется навигация по страницам сайта, поиск элементов на странице и многое другое. Основой языка является понятие объекта (каждый элемент с которым работает JavaScript представляет собой объект). JavaScript внедрен в HTML (т.е. работает только совместно с HTML), обеспечивает работу в среде, поддерживаемой браузерами. Язык JavaScript позволяет обрабатывать исходные данные, представленные с помощью различных элементов управления, создавать тестирующие программы, осуществлять контроль вводимых данных и многое другое.
Программа (сценарий) на языке JavaScript представляет собой последовательность операторов, которые обрабатываются встроенным в браузер интерпретатором. Надо стремиться к тому, чтобы написанные сценарии корректно выполнялись в любом браузере. На первоначальном этапе обучения удовлетворить этому требованию сложно. Поэтому предлагаемые сценарии отлаживались в Internet Explorer версии 4.01 и выше.

Как поместить сценарий в документ

Сценарии, написанные на языке JavaScript, могут располагаться непосредственно в HTML-документе между тегами <script> и </ script>. Эти тэги означают, что в документ помещен сценарий JavaScript.Одним из параметров тега <script> является параметр language, он определяет используемый язык сценариев. Для языка JavaScript значение параметра равно "JavaScript". Если используется язык сценариев VBScript, то значение параметра должно быть равным "VBScript". В случае использования языка JavaScript параметр language можно опускать, так как этот язык используется браузером по умолчанию.
Обычно браузеры, не поддерживающие какие-либо тега HTML, их просто игнорируют. Попытка браузера проанализировать содержимое неподдержанных тегов может привести к неверному отображению страницы. Чтобы избежать такой ситуации, рекомендуется помещать операторы языка JavaScript в теги комментария <!--...->. Дли правильной работы интерпретатора перед закрывающим тегом комментария -> следует поставить символы //. Итак, для размещения сценария в HTML-документе следует написать следующее:
 

<script language= "JavaScript">
<! -
операторы языка JavaScript.
//->
</script>
 

Документ может содержать несколько тегов <script>. Все они последовательно обрабатываются интерпретатором JavaScript.  Тег <noscript> определяет HTML-код, отображаемый на экране в случае, если JavaScript не поддерживается браузером или поддержка отключена. Этот тег следует после кода, заключенного в теги <script> и </script>. Если поддержка включена, то тег <noscript> игнорируется. В дальнейших примерах будем считать, что поддержка JavaScript включена. В программах на JavaScript можно использовать комментарии. Для того чтобы задать комментарий, располагающийся на одной строке, достаточно перед текстом комментария поставить две косые черты. Если же поясняющий текст занимает несколько строк, то его следует заключать между символами /* и */. В JavaScript строчные и прописные буквы алфавита считаются разными символами.

Пример 1. Этот сценарий познакомит вас с самыми основами создания и размещения JavaScript на веб-странице:

<SCRIPT LANGUAGE="javascript">
document.write("<FONT COLOR='RED'>Это красный текст</FONT>")
</SCRIPT>

Наш первый сценарий помещает текст на веб-страницу. В данном случае текст будет красного цвета.

 

Задание 1. Поместите этот сценарий в простейший Web-документ. Откройте полученный файл в броузере. Измените сценарий так, чтобы вышли две строки текста, красная и синяя.
 

Функции

Основным элементом языка JavaScript является функция. Описание функции имеет вид: function F (V) {S}, где F - идентификатор функции, задающий имя, по которому можно обращаться к функции, V - список параметров функции, разделяемых запятыми, S - тело функции, в нем задаются действия, которые нужно выполнить, чтобы получить результат. Необязательный параметр return е определяет возвращаемое функцией значение.
Описание функции не может быть вложено в описание другой функции. Параметры функции внутри ее тела играют ту же роль, что и обычные переменные, но начальные значения этим параметрам задаются при обращении к функции. Если описание функции имеет вид function F <v1,v2, . . . ,vn {S}, то вызов функции должен иметь вид: F (e1,e2,. .. ,еn), где е1,е2,. . . ,еn -выражения, задающие фактические значения параметров. Параметры v1,v2,. . . ,vn, указанные в описании функции, называются формальными параметрами, чтобы подчеркнуть тот факт, что они получают смысл только после задания в вызове функции фактических параметров е1, е2,. . ., еn, с которыми функция затем и работает. Бели в функции параметры отсутствуют, то есть описание функции имеет вид function F {S}, то наличие скобок в операторе вызова функции обязательно, то есть вызов функции в этом случае должен иметь вид: F().
Обычно все определения и функции задаются в разделе <HEAD> документа. Это обеспечивает интерпретацию и сохранение в памяти всех функций при загрузке документа в браузер.

Пример 2. Этот сценарий показывает пример использования функций:

<HTML>
<HEAD>
<TITLE>Пример использования функций</TITLE>
<SCRIPT LANGUAGE="javascript">
<!--
function dateinbar() // описываем функцию вывода даты
{
var d = new Date(); // получаем системную дату
var y = d.getFullYear(); // выделяем год из даты
var da = d.getDate(); //  выделяем число из даты
var m = d.getMonth() + 1;  // выделяем месяц из даты
var t = da + '/' + m + '/' + y; // формируем информацию для вывода
defaultStatus = "Вы прибыли на страницу " + t + "."; // выводим готовую дату
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white" onLoad="dateinbar()"> // вызываем функцию вывода даты
<p> Дата вашего прихода на страницу </p>
</BODY>
</HTML>

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

 

Задание 2.  Создайте Web-страницу, используя описанный выше код. Откройте полученный файл в броузере. Измените сценарий так, чтобы сначала указывался год, затем месяц, а затем день посещения Web-страницы.

Литералы

Простейшие данные, с которыми может оперировать программа, называются литералами. Литералы не могут изменяться. Литералы целого типа могут быть заданы в десятичном (но основанию 10), шестнадцатеричном (по основанию 16) или восьмеричном (по основанию 8) представлении. Литерал целого типа в десятичном представлении записывается как последовательность десятичных цифр со знаком или без него, например, 15, 123, -156, +3567.
Кроме целых и вещественных значений, в языке JavaScript могут встречаться так называемые логические значения. Существуют только два логических значения: истина и ложь. Первое представляется Литералом true, второе - false. В некоторых реализациях JavaScript может быть использована единица в качестве true и ноль в качестве false.
Строковый литерал представляется последовательностью символов, заключенной в одинарные или двойные кавычки. Примером строкового литерала может быть строка "результат" или 'результат'.

Переменные

Переменные используются для хранения данных. Переменные в сценарии представляются с помощью идентификаторов. Идентификатор должен начинаться с буквы латинского алфавита, либо с символа подчеркивания. Далее может следовать последовательность, содержащая буквы латинского алфавита, цифры или знак подчеркивания, например, d, y, testl, _my_test, test_l. (см. код примера 2).Тип переменных зависит от хранимых в них данных. При изменении типа данных меняется тип переменной. Определить переменную можно с помощью оператора var, например, var testl. Тип переменной tesl1 не определен. Тип переменной станет известен только после присвоения неременной некоторого значения. Значение переменной изменяется в результате выполнения оператора присваивания. Оператор присваивания может быть использован в любом месте программы. Он может изменить не только значение, но и тип переменной. Оператор присваивания выглядит так а=b, где а - переменная, которой мы хотим задать некоторое значение, b - выражение, которое определяет новое значение переменной.
Переменные, описанные в сценарии как в части <HEAD>, так и в части <BODY>, имеют одну и ту же область действия, доступны любому сценарию текущего документа. Такие переменные называются глобальными, в отличие от локальных переменных, определенных в теле функции.

Выражения

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

Обработчики событий

Интерактивные документы создаются с помощью форм. Действие пользователя (например, щелчок кнопкой мыши) вызывает событие, которое производится, в основном, с элементами форм HTML. Обычно перехват и обработка события задается в параметрах элементов форм. Имя параметра обработки события начинается с приставки on, за которой следует имя самого события. Например, параметр обработки события Click будет выглядеть onClick. Значением параметра обработки события могут быть операторы языка JavaScript оператор присваивания.

Организация ветвлений в программах

При составлении программы часто необходимо выполнение различных действий, в зависимости от результатов проверки некоторых условий. Для организации ветвлений можно воспользоваться условным оператором, который имеет вид
if B {S1}
else {S2}
где B - выражение логического типа, S1 и S2 - операторы. Выполнение условного оператора осуществляется следующим образом: вычисляется значение выражения B, если оно истинно, то выполняются операторы S1, если ложно - операторы S2. Если последовательность операторов S1 или S2 состоит лишь из одного оператора, то фигурные скобки можно опустить.

Пример 3.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function rand() // создаем функцию генерирующую случайное число
{now=new Date() // определяем системную дату
num=(now.getSeconds())%10 //генерируем случайное число
num=num+1
}
function guessnum() //создаем функцию диалога
{guess=prompt("Угадай, какое?") //запрос пользователю
if (eval(guess) == num)
{alert("ПРАВИЛЬНО!!!")
rand()
}
else
alert("Нет. Попробуй еще раз.")
}
</SCRIPT>
<BODY onLoad="rand()">

<h3>Я загадал число от 1 до 10</h3>

<FORM NAME="myform">

<INPUT TYPE="button" VALUE="Угадай"
NAME="b1" onClick="guessnum()">

</FORM>
</BODY>
</HTML>
 

В результате действия сценария мы получим Web-страничку с небольшой игрой "Угадай число".

Задание 3.  Создайте Web-страницу, используя описанный выше код. Откройте полученный файл в броузере. Как видно из вышеприведенных примеров JavaScript обладает большими возможностями по обеспечению интерактивности на страничке. Чтобы узнать больше об использовании сценариев прейдите по одной из ссылок:

JavaScript в математике  JavaScript в дизайне  Использование JavaScript при работе с формами

В начало страницы

Hosted by uCoz