INTERNET-WEB.RU
Обучение работе с ПК
Операционные системы
Флеш (Flash)

JavaScript

Технология JavaScript позволяет использовать возможности программирования при оформлении собственных HTML-документов любому опытному пользователю.

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

К недостаткам JavaScript можно отнести их ограниченность (программирование на Java позволяет реализовать гораздо больше возможностей), больший размер передаваемой по сети информации, а также затраты времени на компьютере клиента на преобразование исходных текстов в вид, «понятный» компьютеру. В то же время любой пользователь, имеющий небольшой опыт написания макрокоманд, способен реализовать достаточно сложную функцию, использовав имеющиеся примеры и изучив скрипты реальных документов Интернета. Эта простота использования, наличие многих встроенных возможностей привели к широкому внедрению JavaScript в HTML-документы.

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

iX*w; На практике работа скриптов различается в программах просмотра 9 разных фирм-изготовителей, а также на различных компьютерных платформах. Если вы предполагаете использовать сложную программу своей разработки, целесообразно протестировать ее в различных ситуациях. __

Несмотря на имеющиеся отличия языков программирования, реализованных различными фирмами в своих версиях обозревателей Интернета (JavaScript, Jscript, VBScript и т. д.), правила их применения во многом тождественны.

Включение скриптов в текст HTML-доку мента

Тексты программ, включаемые в HTML-документ, должны быть помещены между тэгами <SCRIPT> и </SCPJPT>. Таких блоков в одном документе может быть несколько. Блоки могут размещаться независимо как в заголовке (между <HEAD> и </HEAD>), так и в основном тексте (между <BODY> и </BODY>). He допускается только вложение одного блока в другой.

fax? В заголовке программного блока можно указать язык - программирования. В настоящее время используются языки

JavaScript и VisualBasicScript. Поэтому открывающие тэги блоков с текстами программ должны быть исполнены в виде <SCRIPT language = "JavaScript"> или <SCRIPT language = "VBScript">. По умолчанию предполагается, что вы используете JavaScript.

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

<SCRIPT SRC = "URL"X/SCRIPT>

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

/gxf Есть еще один интересный способ включения программного текста: — написать его как URL с именем псевдопротокола javascript.

Покажем на простейших примерах использование скриптов в HTML-документе. Сохраните эти коды в текстовом файле (с расширением htm или html) и откройте его в браузере.

 Пример 1. Формирование текста документа.

Данный пример использует метод document. write, выводящий на экран заданную строку символов.

<HTML>

<HEADX/HEADXBODY>

<SCRIPT>

document. write ("This is Script!")

</SCRIPT>

</BODYX/HTML>

На экране будет показана только одна строчка This is Script!

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

<HTML>

<HEADX/HEADXBODY>

<SCRIPT>

document. write ("Текущее время " + new DateO)

</SCRIPT>

</BODYX/HTML>

На экране появится текущее время, например: Текущее время: Моп Sep 16 22:42:04 2002. Вставить же в документ текущее время без использования скриптов с помощью только HTML-текста уже невозможно.

а Пример 2. Расположение программного блока на месте URL. В примере использован метод показа окна сообщения-предупреждения с помощью JavaScript.

<HTML>

<HEADX/HEADXBODY>

<А HREF = "javascript: alert (Это тест!) ">Щелкните здесь</А></BODYX/HTML>

После щелчка мышью по «приглашению» появится окно предупреждения с текстом «Это тест!».

Включение программных кодов в документ

Итак, как проще всего включить в документ необходимый программный код?

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

Обычно в описании скрипта указываются необходимые операции для правильного использования данного кода. Но в любом случае вам необходимо скопировать в образце блок кода, начиная с тэга <SCRIPT> и завершая тэгом < /SCRIPT>.

Далее этот блок необходимо вставить в документ. Поскольку программы редактирования показывают документ в том виде, как он будет отображаться в браузере, а блоки макрокоманд в этом режиме не отображаются, то необходимо переключиться в режим показа HTML-источника документа. Если используется для редактирования Word, то эта операция выполняется командой меню Вид => Источник HTML. Найдите место, в которое предполагается вставить код. Например, если предполагается использовать код счетчика посещений страницы, то его обычно располагают в самом конце документа.

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

Элементы JavaScript

/gx" JavaScript учитывает регистр символов. Несмотря на то, что -*---> в большинстве случаев программа выполнит правильные действия, вы должны соблюдать строчные и прописные буквы, которые заданы в синтаксисе языка. Кроме того, программа-интерпретатор игнорирует пробелы,

употребленные при написании кода, и не учитывает разбиения

на строки.

Каждый оператор должен заканчиваться знаком «;» (если каждый

оператор написан в новой строке, разрешено точку с запятой

опускать).

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

Кроме свойств, которые можно получать («считывать существующие значения») и устанавливать, существуют понятия методов. Мы уже приводили пример использования метода документа — document. write , который записывал в текст документа в текущем месте заданную строку символов.

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

Объекты

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

объект.характеристика 1 характеристика

Часть объектов уже существует в JavaScript (document, window, frame, form и т. д.), а другие вы можете создавать сами.

В качестве характеристики объекта может быть использована функция. Например, для объекта документ определена функция записи текста в документ (document. writeO). Функции, которые определены в качестве свойств объекта, называют методом данного объекта.

Чтобы создать объект, используется следующий синтаксис:

название_объекта = new constructor где constructor — конструктор объекта; обычно используется Object, Ar-rayO, DateO — Конструктор объекта — это программный код, который описывает, какие характеристики и операции существуют у объекта. Например, можно записать такую функцию:

function Car (color, make, model)

this. color=color; this. make =make; this. model=model;

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

myCar=new Car (white, 2002, Ford)

Для того чтобы добавить новую характеристику объекта, достаточно просто присвоить ей значение, написав эту характеристику в виде объ-ект.новая_характеристика:

myCar. speed =180

Для удобства работы с объектами введено несколько операторов.

Перебор всех свойств объекта

Конструкция

for (variable in [object arrayp блок_операторов позволяет переменной последовательно принять значения всех характеристик объекта, и для каждого такого значения будет выполнен блок операторов. Вы можете даже не знать количество всех свойств объекта, программа автоматически «переберет» все. Обычно эта функция используется для показа всех характеристик объекта. Например, такая конструкция выведет на экран перечень всех свойств объекта navigator и их значения:

<script>

for (i in navigator)

» document. write (i + " = " + navigator[i] + "<br>") </script>

Если вы используете MS Internet Explorer, то можете получить следующий вывод:

appCodeName = Mozilla

appMinorVersion = 0

appName = Microsoft Internet Explorer

appVersion = 4.0 (compatible; MSIE 4.0; Windows NT)

cookieEnabled = true

cpuClass = x86

mimeTypes =

onLine = true

opsProfile =

platform = Win32

plugins =

systemLanguage = ru

userAgent = Mozilla/4.0 (compatible; MSIE 4.0; Windows NT)

userLanguage = ru

userProfile =

 . .  . — --------------------------—-------

Определение объекта по умолчанию, используемого в операциях

Если необходимо выполнить несколько операций с характеристиками какого-либо объекта, то можно использовать определение объекта по умолчанию:

with (object)

блок_операторов

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

x=Math. cos (3 * Math. PI) + Math. sin (Math. LN10)

у = Math. tan (14 * Math. E) можно записать:

with (Math)

x=. cos (3 * PI) +. sin (LN10) у=. tan (14 * E)

Задание объекта по умолчанию — Math — позволило опустить его написание в методах cos, sin, tan.

Оператор this

Ранее мы уже употребили ключевое слово this. Опишем его применение несколько подробнее.

Ключевое слово this используется для ссылки на текущий объект вместо его имени. Кроме того, его можно использовать для указания на родительский объект, используя синтаксис this. object. Например, если само ключевое слово указывает на какое-либо поле в форме, то обратиться ко всей форме можно, применив конструкцию this. form.

Переменные

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

var i, sum

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

document. write (1 + 2);

document. write (1 + 2);

В первом случае в документе появится цифра 3, а во втором — 12. Это произошло потому, что двойка, взятая в кавычки во втором примере, воспринята программой как строка символов, соответственно единица стала восприниматься не как цифра, а как текстовый символ. Еще пример:



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

/g>< По правилам, объекты также должны преобразовываться в подобных ~— случаях, например, в строковые переменные. Результат

преобразования аналогичен использованию метода toStringOПеременные могут принимать логические значения (True или False). Переменным может быть присвоено значение null, при этом переменная декларируется, инициализируется, но ей не присваивается никакое значение. Если вы хотите присвоить какой-либо переменной строку символов, то эти символы необходимо заключить в кавычки, например: I date="25 августа 1997 года" /gx В некоторых случая синтаксис требует, чтобы внутри одних кавычек ~ были употреблены другие . В таких ситуациях следует использовать в одном случае одинарные кавычки, а в другом — двойные. Числа JavaScript допускает следующее написание чисел:


 Массивы Массив — это коллекция данных, каждое из которых имеет имя и номер, который называется индексом. Номера начинаются с нуля. При обращении к элементу массива необходимо использовать прямоугольные скобки для индекса следующим образом: arrTest[i][j].

Комментарии

В JavaScript используются те же комментарии, что и в языке программирования С: можно заключить часть программного кода в строке между

знаками «/*» и «*/» или закомментировать всю строку, поставив в ее начало символы «//». Можно использовать традиционные комментарии языка HTML, то есть начать строку с «<! — -». Такой комментарий действует только на одну строку и не требует обязательного использования завершения в виде «- ->».

Использование специальных символов

Для использования специальных символов в тексте программы нужно применять ESC-последовательности:


Операторы

В JavaScript можно использовать арифметические, логические, битовые, строковые операторы. Их синтаксис практически не отличается от принятого в большинстве языков программирования.



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

Блоки операторов

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

Условные операторы

Используются в тех случаях, когда операция должна выполняться только при определенных условиях. Например, в утреннее время на странице должно появляться приветствие «С добрым утром», а вечером — «Добрый вечер». Синтаксис этих операторов следующий:

if (условие) операторы_1 else операторы_2

Вторую половину оператора (начиная с else) можно опускать. Если условие имеет значение истины, то выполняется первая группа операторов (операторы_1), если значение условия ложно, то выполняется вторая группа (операторы_2).

Данный условный оператор имеет сокращенную форму записи: (условие)? операторы_1: операторы_2

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

hours += (theHour > = 12)? " РМ": " AM" В этом примере переменная theHour содержит значение часов, a hours — время (часы и минуты). Первоначально проверяется, сколько времени (больше или меньше) показывают часы относительно полудня. Если больше 12 часов, то к обозначению времени добавляется (+ =)« РМ», если время дообеденное (меньше 12 часов), то добавляется « AM».

Операторы цикла

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

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

Пример:

for (j= 1, fact= l; j<10; j++)

fact = fact * j

Сначала инициализируются переменные j и fact: им присваивается значение 1. Затем переменная fact умножается на 1, 2, 3,... до 9 (шаг приращения переменной j равен 1, а цикл прекращается, когда j становится равным 10). Таким образом, этот цикл вычисляет факториал 9.

Другой оператор, позволяющий сформировать цикл, имеет следующий вид:

while (условие) операторы

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

<script>

i = l

while (i < 8)

document, write ("<FONT SIZE=" + i + ">         Привет<!/FONT><BR>");

i++

</SCRIPT>

Существуют способы досрочного выхода из цикла. Чтобы прервать цикл, можно использовать оператор break. При его выполнении программа выходит из цикла и начинает выполнять следующие команды. Обычно этот оператор используется в конструкциях типа if (условие) break.

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

Функции

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

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

t/gx Вы можете описание функции и ее вызовы располагать ~— в произвольных местах документа. Единственное условие — функции должны быть определены раньше их вызова. Поэтому принято описания функций вставлять в заголовок HTML-документа.

Синтаксис функции:

function имя_функции ([аргумент1[, аргумент2[..., аргументп]]] операторы

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

return [операторы];

Например, так можно записать функцию вычисления квадрата числа:

function f (x) return x*x

Затем вы сможете присвоить какой-либо переменной квадрат числа следующей записью:

myint = f (x)

/gx" Если функция имеет несколько аргументов, то к ним можно ~-~ обращаться как к массиву: f (x). arguments[i].

Сама функция может быть назначена как элемент массива (а[3] = f (x)) или как свойство объекта (например, если о — объект, то можно записать о. sq = f (x)). Кроме того, так как функции сами являются объектами языка JavaScript, то им можно присваивать свойства, например, если описана функция f (x), то можно присвоить ей свойство f. i = 2.

Справочная таблица методов и функций

Для справки мы приведем таблицу методов и функций языка JavaScript. В целях удобства пользования группировка произведена по объектам языка. Вы можете использовать приведенные элементы для написания собственных скриптов в HTML-документе.









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

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

function changeFrames 

parentframes[1]. location = document1. htm parentframes[2]. location= document2. htm parentframes[3]. location= documents. htm

В текст документа включите вызов этой функции, например, по щелчку в следующей гипертекстовой ссылке:

<А HREF = "#" onclick = "changeFrames  ">.<... /А>

Этот скрипт работает следующим образом. По выбору гиперссылки (щелчок по тексту, это событие onClick) вызывается функция changeFra-mesO — Функция changeFramesO определяет, что для первого дочернего окна (нумерация «дочерних» окон задается порядком их создания, или, что то же самое, порядком определения фреймов) документ, загруженный в него (parentframes[l]. location), должен быть documentl. htm. Для второго — document2. htm. И так далее.

Пример скрипта, использующего Cookies

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

<SCRIPT LANGUAGE="JavaScript">

document. cookie="MyVar=Value; expires=Ol-Jul-02 GMT"

t</SCRIPT> /g< Если вы не установите для переменной время «жизни», то такая ~- переменная будет автоматически удалена после завершения сессии (когда пользователь уйдет с HTML-страницы).

Для того чтобы удалить Cookie, достаточно установить время ее существования с прошедшей датой, например, можно так:

document. cookie = "NULL;expires = Ol-Jan-02 GMT".

Для того чтобы прочитать информацию из Cookie, необходимо сначала считать всю строку информации (для JavaScripts: MyStr = document. cookie), а затем «разобрать» ее на части. Надо найти начало определения переменной, выделить ее значение (от знака «равно» до знака «точка с запятой») и после этого использовать полученное значение для последующих операций.

 

© 2009 internet-web.ru. All Rights Reserved