Java Script

JavaScript - это язык программирования, используемый в составе страниц HTML для увеличения функциональности и возможностей взаимодействия с пользователем. Например, JavaScript может использоваться для операций, которые не могут быть реализованы стандартными средствами языка HTML, как то: вывод в строке статуса браузера какого-либо сообщения, диалогового окна с запросом к пользователи на ввод определенных данных и т.д. JavaScript был разработан фирмой Netscape на базе языка Sun's Java корпорации Sun.
Прежде всего, надо понять, что JavaScript и Java - это совершенно разные вещи. Java представляет собой объектно-ориентированный язык программирования, разработанный фирмой Sun Microsystems и требующий для своего функционирования компилятора и вспомогательных файлов, зато при их наличии программы скомпилированные на Java могут функционировать почти на любой платформе. Этот язык хорош для программистов с опытом работы на языках типа C++.
Разрабатываемые с помощью Java Development Kit программы могут работать как законченные приложения либо как встроенные в страницу HTML аплеты. И хотя аплеты встроены в страницы HTML, они хранятся на клиентской машине как отдельные файлы.
JavaScript был разработан в Netscape. Он близок к языку Java в том, что оба содержан некоторый простой набор команд, сходных в своей реализации.
По структуре и синтаксису JavaScript близок к Java, но JavaScript реализует свою функциональность только(!) в составе страницы HTML. Вы не можете разрабатывать аплеты или обособленные приложения с помощью JavaScript. Программы на JavaScript могут располагаться только внутри страницы HTML и функционируют, будучи загруженными в подходящий браузер. Полноценная поддержка JavaScript реализована в Netscape Navigator, начиная с версии 4.0 и в Microsoft Internet Explorer, начиная с версии 4.0.
Два конкурента: Netscape и Microsoft заявляют о полной поддержки соответственно JavaScript и JScript (JScript - вариант языка JavaScript, разработанный компанией Microsoft) в своих браузерах. Однако заметим, что синтаксис и поддерживаемые операторы могут отличаться в JavaScript и JScript, поэтому может случиться так, что скрипт, правильно работающий в Microsoft Internet Explorer, не будет правильно воспринят браузером Netscape Navigator или наоборот. Поскольку JavaScript был разработан именно Netscape, Microsoft в ответ на это, кроме уже вышеупомянутого JScript, разработала язык скриптов VbScript и включила его поддержку в свой браузер. Хоть и VbScript и был по синтаксису несколько проще, чем JavaScript, он не получил должного распространения, поскольку Netscape отказалась включить поддержку этого языка в свой браузер. А JavaScript в той или иной степени поддерживается браузерами обеих фирм. Принимая во внимание и то, что доля Microsoft Internet Explorer составляет 85-90% от общего количества браузеров, а Netscape Navigator - 5-8%, то на этом сайте будут представлены скрипты правильно работающие в Microsoft Internet Explorer. Некоторые web-мастера сначала на своей страничке определяют тип браузера, а затем в зависимости от этого отправляют браузер на выполнение JavaScpipt'а специально написанного для этого типа браузера.

Как мы уже говорили, для создания программ на JavaScript не требуется никаких дополнительных средств, необходим лишь соответствующий браузер, поддерживающий JavaScript (Internet Explorer или Netscape Navigator версии 3.0 и выше). Каждая вставка сценария JavaScript в HTML- документ начинается командой <SCRIPT> с необязательным атрибутом (параметром) LANGUAGE и заканчивается командой </SCRIPT>. Всвязи с появлением еще одного скриптового языка VBScript рекомендуется использовать атрибут LANGUAGE, соответственно равным "JavaScript". Кроме того, обратите внимание на использование тегов комментария <!-- и -->; если страница, содержащая сценарий, будет загружена в браузер, не поддерживающий языки сценариев, строки программы, засоряя экран, будут выведены как обычный текст. Если же использовать тег комментария, то такой браузер пропустит текст программы, воспринимая его как комментарий. Двойная косая черта перед закрывающим текст JavaScript-программы тегом комментария гарантирует, что тег не будет воспринят браузером как оператор JavaScript:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Мой первый пример на JavaScript");
// -->
</SCRIPT>
Результатом выполнения скрипта будет вывод на зкран строки:
Мой первый пример на JavaScript

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

Объекты и свойства. Объект - это структура, имеющая свойства (properties), представляющие собой переменные JavaScript или другие объекты. Среди объектов существуют определенные взаимоотношения - иерархия экземпляров. Поясним на примере: объект window является родительским по отношению ко всем остальным объектам. Прямыми потомками объекта window являются объекты location, history и document. Каждым объект является потомком объекта более высокого уровня. Форма с названием orderForm является объектом и в то же время свойством объекта document. Таким образом для вызова такой формы используется выражение:
document.orderForm
Иерархию объектов языка JavaScript можно сопоставить с иерархией объектов в реальном мире. Колеса, руль (handleBars) и педали - это все объекты, принадлежащие велосипеду (bicycle). Велосипед представляет собой объект, принадлежащий к средствам наземного транспорта (groundTransport). В терминах объектов JavaScript эти взаимоотношения могли бы быть выражены следующим образом:
groundTransport.bicycle.handleBars
Наиболее общий объект высшего уровня находится слева в выражении, и слево направо происходит переход к более частным объектам, являющимся при этом наследниками высших в иерархии объектов.
Свойства используют для описания объекта или его текущего состояния. Свойство определяется путем присваивания ему значения. Значение может быть присвоено браузером, программой или действиями пользователя.
Несколько свойств в JavaScript содержат константы-значения, которые никогда не меняются. Такими являются значения числа pi или основания натуральных логарифмов (e). Другие элементы, например, абсолютный адрес странички в Интернете, различаются от страницы к странице, но не могут быть изменены в пределах одной страницы.
Остальные свойства можно изменять в ходе выполнения программы на JavaScript. Следующий пример демонстрирует изменение цвета фона на красный в ходе выполнения программы:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.bgColor='red';
// -->
</SCRIPT>

Операторы. Оператор производит действия над одним или несколькими операндами или переменными. Операторы разделяются друг от друга точкой с запятой ";". Операторы делятся на 2 основные группы: унарные и бинарные. Бинарные операторы требуют двух операндов, а унарные имеют дело только с одним операндом. Например, оператор сложения является бинарным оператором:
sum = 1 + 5
Унарные операторы часто используются для обновления значений счетчиков. Следующий пример увеличивает переменную счетчика на единицу:
counter++

Функции. Функция представляет собой последовательность операторов, выполняющих какую-либо задачу. Синтаксис объявления функции следующий:
function NameFunction()
{
... тело функции JavaScript ...
}
Имя функции (NameFunction) произвольно и определяется программистом. В круглых скобках после имени функции могут быть указаны принимаемые функцией переменные. Функция создается программистом, как правило, при необходимости многократного вызова одной и той же последовательности команд. В этом случае необходимая последовательность команд записывается в теле функции, и, вызывая эту функцию, вы тем самым вызываете всю последовательность команд. Функция может также вернуть значение, если в нее помещен оператор return. Функции универсальны и не требуют привязки к какому-либо объекту для своей работы.
Лучше всего определения всех функции помещать внутри тегов <HEAD> и </HEAD>. Это гарантирует, что функция будет загружена в память до загрузки странички, а, следовательно, "готова к употреблению" прежде, чем пользователь сможет произвести какие-либо действие, вызывающие эту функцию.
Вызывать функцию просто: для этого достаточно указать имя функции и круглые скобки, в которых могут находится передаваемые параметры. Например:
...
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function attention()
{
alert("Внимание !")
}
//-->
</SCRIPT>
</head>
...

<body>
...
<SCRIPT LANGUAGE="JavaScript">
<!--
attention()
//-->
</SCRIPT>
...
</body>
...
Из тела документа была вызвана функция attention(), которая была объявлена в заголовке документа. В теле функции attention() находится только метод alert (о методах см. ниже), который выводит диалоговое окно с кнопкой "Ok" и определенным программистом сообщением. Прежде чем пользователь сможет продолжить работу со страницей, он должен нажать кнопку "Ok".

Методы. В JavaScript существуют встроенные в язык функции, которые сразу совершают какое-то действие над объектом; эти функции принято называть методами. Таким образом, метод представляет собой функцию, ассоциированную (связанную) с объектом. Например,
UserName.toUpperCase()
возвращает строку, содержащуюся в переменной UserName, преобразованную к верхнему регистру.
В самом первом примере мы также использовали метод write в виде: document.write(parameter) для вывода parameter в текущий документ.

События (обработчики событий). События - это действия, которые произвел пользователь: щелкнул на ссылке (кнопке), подвел курсор мышки над каким-либо объектом, щелкнул в текстовом поле для его заполнения (передал фокус этому элементу) и т.д.
Обработчики событий являются особенной частью языка JavaScript и придают ему основную мощь. Они позволяют программисту отслеживать действия пользователя (события) по отношению к странице HTML.
Обработчики событий встраиваются в теги HTML. Практически все, что пользователь может делать со страницей, можно отслеживать с помощью обра-ботчиков событий, от движения мыши до выхода из страницы. Например, следующий фрагмент кода выводит строку "Холм Web-мастера [webholm.ru]" в строке статуса браузера, когда указатель мыши оказывается на гиперссылкой (обрабатываем событие onMouseOver):
<a href="http://webholm.ru"
onMouseOver="window.status='Холм Web-мастера [webholm.ru]';
return true">Холм Web-мастера</a>

Комментарии. В сценариях JavaScript возможно использование комментариев, то есть примечаний программиста, которые будут игнорированы интерпритатором. Однострочные комментарии начинаются с символа "//". Многострочные комментарииначинаются с "/*" и заканчиваются "*/".
/* Комментарий начинается здесь
и заканчивается
здесь.*/
... строки кода JavaScript ...
// Комментарий ограничен данной строкой.

Для получения целостной картины использования и интегрирования сценариев JavaScript приведем еще один пример в полном листинге файла html.

Пример:
<html>
<head>
<title>Пример использования JavaScript</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var name; // Объявляем переменную name
name = prompt ("Пожалуйста, введите ваше имя:", "посетитель" );
// -->
</SCRIPT>
</head>
<body>
<h1 align="center">Домашняя страничка Васи Пупкина</h1>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write ("<h2>Добро пожаловать, "+name+", на мою страничку!<h2>");
// -->
</SCRIPT>
<h2>До свидания!<h2>
</body>
</html>
В приведенном примере используется 2 вставки сценария JavaScript в html-документ. Как вы могли заметить, первый сценарий размещен внутри тегов <head> и </head>, что гарантирует выполнение сценария до загрузки всей странички. В этом сценарии мы сначала объявляем переменную name. Затем присваиваем этой переменной значение, которое получено после обращения к посетителю с запросом на ввод имени (по умолчанию предлагается вариант "посетитель"), для этого используется метод prompt, который отображает диалоговое окно для ввода данных. Если посетитель в окне запроса вместо кнопки "Ok" нажмет кнопку "Отмена", то переменной name будет присвоено значение "null".
Второй сценарий JavaScript мы размещаем непосредственно в теле html-документа (между тегами <body> и </body>). Он, используя метод write, выводит в текущий документ строку, состоящую из тегов HTML, текста и значения переменной name. Выводимые <h2> и </h2> будут восприняты как теги языка HTML, поэтому заключенный между ними текст будет выведен, как заголовок второго уровня.

Переменные. Изучив примеры, вы, наверное, уже знаете, что переменные объявляются при помощи ключевого слова var, за которым следует имя переменной. Возможно объявление сразу нескольких переменных, в этом случае они разделяются запятой. Кроме того, переменные могут быть сразу инициализированы при объявлении, т.е. им будет присвоено значение.
var NameofVariable1, NameofVariable2 = 567;
Здесь переменная NameofVariable1 просто объявлена, а переменная NameofVariable2 еще и инициализирована при объявлении и ей присвоено значение 567.

Областью видимости переменной является текущая функция или, в случае объявления вне функции, весь текущий документ (web-страничка).

Пример:
var globalString;
function bracket()
{
var localString = "[" + globalString + "]";
document.write(localString);
}
В вышеприведенном примере переменная globalString может быть использована в любой функции или сценарии текущего документа (такие переменные называют глобальными для данного документа), а переменная localString видна только внутри функции bracket (такие переменные называют локальными переменными функции). Как Вы видите, при инициализации локальной переменной мы можем использовать значение глобальной переменной.

Типы переменных. В зависимости от значения, присвоенного переменной, выделяют следующие типы переменных:
· численный;
· логический;
· строковый;
Численные переменные могут содержать целые числа и числа с плавающей точкой. Целые числа могут быть выражены в обычном десятичном (по основанию 10), шестнадцатеричном (по основанию 16) или восьмеричном (по основанию 8) представлении. Шестнадцатеричные числа включают цифры 0-9 и буквы a-f, в JavaScript они записываются с комбинацией символов 0x (ноль-x) перед числом. Восьмеричные числа включают только цифры 0-7 и в JavaScript записываются с ведущего нуля. Например, десятичное число 23 представляется в шестнадцатеричном виде как 0x17 и в восьмеричном как 027. Числа с плавающей точкой представляют собой дробные части целых чисел и должны включать в себя, по крайней мере, одну цифру и десятичную точку либо символ экспоненты (e).
Логические переменные могут иметь только два значения: true (истина) или false (ложь). Вместо true и false можно использовать соответственно 1 и 0, что эквивалентно.
Строковые переменные содержат любое количество символов - строку. При присваивании строковой переменной значения (строки) строка всегда окружена одинарными или двойными кавычками.
var variable1 = 534, variable2 = true, variable3 = "строка";
Мы объявили переменные:
variable1 - численная;
variable2 - логическая;
variable3 - строковая;

А использование обратного слеша "" позволяет вставлять в строку специальные символы. Например:
document.write(""Сделайте это", - сказал он.");
выводит фразу "Сделайте это", - сказал он.

Замена типов данных. Как мы уже говорили выше, тип переменной зависит от того, какой тип информации в ней хранится. Поскольку JavaScript не является жестко типизированным языком, то нет необходимости объявлять тип переменной в момент ее создания. Тип переменной определяется автоматически в зависимости от значения присвоенного переменной. Разберем это на следующем примере:
var oneString = "1";
var oneInt = 1;
var oneConcat = oneString + oneInt;
// здесь значение переменной oneConcat равно "11"
oneString = 1;
oneConcat = oneInt + oneString;
// здесь значение переменной oneConcat равно 2
В первой операции сложения первый операнд является строкой. JavaScript предполагает, что производиться операция с двумя строками, если хотя бы один из операндов является строкой. Во второй операции сложения оба операнда целые числа, следовательно, и результат целое число.

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

Пример:

<html>
<head>
<title>Пример №2 использования JavaScript</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var variable1, variable2; // Объявляем глобальные переменные variable1 и variable2
function calculate()
{
variable1 = prompt ("Пожалуйста, введите значение переменной variable1:", "0" );
variable2 = prompt ("Пожалуйста, введите значение переменной variable2:", "0" );
var variable3, variable4; // Объявляем локальные переменные variable3 и variable4
variable3 = variable1 + variable2;
variable4 = parseFloat(variable1) + parseFloat(variable2);
alert("variable1 = "+variable1+" variable2 = "+variable2+" variable1 + variable2 (как строк) = "+variable3+" variable1 + variable2 (как чисел) = "+variable4+"");
}
// -->
</SCRIPT>
</head>
<body>
<form>
<input onclick="calculate()" type=button value="Вычислить">
</form>
</body>
</html>

Cценарий JavaScript опять помещаем внутри тегов <head> и </head>, что гарантирует загрузку сценария до загрузки всей странички. В сценарии объявляем две глобальные переменные и функцию calculate. В теле документа мы создали форму с одной единственной кнопкой "Вычислить". При описании кнопки вставили обработчик события onclick (это событие возникает, когда пользователь выполняет щелчок мышкой на объекте, в данном случае на кнопке). Итак, после возникновения события onclick осуществляется вызов функции calculate (без параметров, так как внутри скобочек () ничего нет), которая уже была описана в заголовке (head) документа.
Рассмотрим, что представляет собой функция calculate. Переменным variable1 и variable2 присваиваем значения, полученные после использования метода prompt (этот метод отображает диалогое окно для ввода данных). Тут следует заметить важную деталь: метод prompt возвращает данные в строковом виде, т.е. если вы ввели число 456, то метод вернет не число 456, а строку из трех символов "456". Кроме того, если пользователь в диалоговом окне метода prompt нажмет "Отмена", соответствующей переменной будет присвоено значение null. Далее объявлены две локальные для данной функции переменные variable3 и variable4. Переменной variable3 присваиваем значение variable1 + variable2 и поскольку variable1 и variable2 - строковые переменные, то выполняется конкатенация (объединение) этих строк. Переменной variable4 присваиваем значение parseFloat(variable1) + parseFloat(variable2). parseFloat - это метод верхнего уровня, не связанный ни с каким объектом. Его синтаксис такой: parseFloat(string). Метод parseFloat анализирует строковый аргумент (string) и возвращает число, с плавающей запятой или нет в зависимости от строкового аргумента. Если метод parseFloat не может преобразовать строку в число (например, встретив букву), то он возвращает значение NaN. Итак, если преобразование прошло успешно осуществляется сложение двух чисел, результат которых присваивается переменной variable4. Далее мы используем метод alert, который выводит на экран диалоговое окно с кнопкой Ok и определенным сообщением; прежде чем пользователь сможет продолжить работу со страницей, он должен нажать кнопку Ok. Cинтаксис этого метода следующий: alert(message). Использовав в качестве сообщения приведенную в примере строку, мы выводим необходимый нам текст и значения переменных, а означает перевод последующего текста на новую строку (для более наглядного восприятия).
Используя код примера, вы можете создать html-файл и сами прочувствовать, как работает приведенный скрипт.