http://www.nadomnik.by.ru/


Учимся писать на JavaScript.
От легкого к сложному

Михаил Новиков, Георгий Чухин

Введение

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

Предыстория

Ни для кого не секрет, что JavaScript был разработан компанией Netscape с целью создания высокоэффективных интерактивных страничек. Главной его задачей служит создание динамически изменяющихся Web-документов, то есть изменяющихся при определенном условии (при проверке данных, вводимых пользователем, и так далее).

Его синтаксис очень похож на синтаксис языка Java (JavaScript и Java - разные языки), а синтаксис языка Java, в свою очередь, очень похож на C++. Следовательно, если вы раньше писали программы на Java или C++, то с легкостью освоите и JavaScript.

Не заставив себя долго ждать, небезызвестная компания Microsoft тоже выпустила свой собственный интерпретатор языка под названием JScript, но на нем мы долго останавливаться не будем.

В данное время JavaScript очень распространен по всему миру, он используется при создании Web-приложений любой сложности.

Технология

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

1

1 часть - взаимодействие ядра JavaScript и возможностей клиента (используется для написания клиентских приложений).

2 часть - взаимодействие ядра JavaScript и специальных возможностей сервера (используется для написания серверных программ).

Разберемся с синтаксисом.

Начнем с разбора синтаксиса языка. Он очень прост, и понять его может почти каждый. Код JavaScript состоит из операторов, причем каждый оператор должен заканчиваться знаком точка с запятой ";". Надо заметить, что этот язык чувствителен к регистру, то есть он различает заглавные и строчные буквы.

Иногда, если приложение представляет собой огромный набор операторов, необходимы комментарии (пояснение к отдельной части программы). В JavaScript комментарии могут записываться следующими способами: // "пояснения" (этот способ позволяет создать комментарий только на одной строке) и /* "пояснения" */ (этот способ предпочтительнее предыдущего тем, что позволяет писать несколько строк комментария).

Теперь перейдем к тегу <Script>, в котором, собственно, и будем писать код. Но существует еще один метод встраивания в страницу сценария (набора операторов, то есть приложения) JavaScript, метод, когда сам код не пишется в самом HTML-документе, а файл сценария (файл с расширением *.js) вызывается из HTML-документа. Происходит это следующим способом:

<SCRIPT SRC="http://myserver.ru/javascript/proba.js" >
<!--
//-->
</SCRIPT>

А вообще, если вы хотите просто написать код в самой страничке, синтаксис будет такой:

<SCRIPT LANGUAGE="JavaScript">
<!--
"Требуемые операторы"
-->
</SCRIPT>

Как вы, наверное, догадались, после параметра LANGUAGE следует указать тот язык сценариев, на котором вы собрались писать приложение, в нашем случае это JavaScript (вообще-то JavaScript стоит по умолчанию, а вот если бы мы использовали, например, VBScript, то его надо было указать обязательно). Код JavaScript лучше всего размещать в тегах <HEAD>:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
"Операторы"
-->
</SCRIPT>
</HAED>

Но это не обязательно, так как теги <SCRIPT> можно разместить почти в любой части Web-документа.

Существует еще одна очень важная проблема, а именно - проблема использования переменных и выражений в качестве значений HTML-тегов. Если существует переменная, и вы хотите использовать ее в качестве параметров тега, нужно поместить ее в фигурные скобки "{" "}" и слева от переменной написать знак амперсанда "&", а справа поставить точку с запятой ";". Рассмотрим пример, когда вы вызываете картинку, а бордюр будет определять переменная Bord1:

<IMG SRC=picture1.gif BORDER="&{Bord1};">

Выражения и переменные

Вы, наверно, уже заметили, что JavaScript является языком, в котором переменным не надо вручную назначать типы (такие языки программирования называются языками так называемого свободного использования типов). JavaScript сам назначает переменной тип, соответствующий данным, хранящимся в переменной. Но, тем не менее, можно выделить четыре типа данных: целый тип, в переменных которого хранятся целые числа, которые могут быть и отрицательные, и положительные - вещественный тип - переменные хранят вещественные числа, имеющие знак плюс или минус; строковый тип - переменные содержат заданную последовательность символов и логический тип, переменные этого типа могут содержать только два значения False (ложь) или True (правда).

Переменные можно объявить, используя оператор Var:

Var "переменная" = "назначаемое значение";

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

Var "переменная";

Давайте приведем примеры всех типов при помощи оператора Var:

Var Zifra = 5;

Var String = "Строка";

Var Vesh = 5.67;

Var Logo = True;

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

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

Начнем со всем известных арифметических операторов, с помощью которых и строятся арифметические выражения: "+" - сложение, "-" - вычитание, "*" - умножение, "/" - деление, "++" - эквивалентно прибавлению к значению единицы, "--" - эквивалентно вычитанию от значения единицы. Нельзя не сказать и о более простых формах записи арифметических операторов. Рассмотрим на примере. Допустим, мы складываем два числа A и B, а полученный результат будет храниться в переменной A, в обычной записи это будет выглядеть так: A =A + B. В сокращенном варианте это можно записать так: A + = B. Аналогично с правилами математики можно менять порядок действий постановкой скобок.

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

Говоря о логических операторах, надо заметить, что большинство из них схожи с логическими операторами C++. Вот они: "&&" - связывает два условия в одно, можно понимать как логическое И; "||" - говорит о том, что должно выполняться или одно условие, или другое; "= =" - сравнивает два значения; "!=" - можно понять как логическое "не равно"; ">, <, <=, >=" - два первых оператора означают "строго больше" и "строго меньше", а последние "меньше или равно" и "больше или равно".

Операторы циклов и выбора действий.

Операторами выбора действий являются IF и SWITCH.

Сначала рассмотрим оператор IF. Он используется для проверки условия и выбора действия в зависимости от возвращаемого условием значения. Синтаксис его таков:

If ("условие для проверки")

{
"блок операторов 1"
}
Else
{
"блок операторов 2"
}

Блок операторов 1 будет выполняться, если условие возвратило True (правда), а вот блок операторов 2 будет выполняться, если условие возвратило False (ложь). Надо заметить, что часть Else не является обязательной и используется только при необходимости.

Использование SWITCH позволяет расширить возможности выбора действий, чтобы это понять, достаточно посмотреть на его синтаксис:

Switch ("переменная или выражение")

{
Case "значение 1": "блок операторов 1";
Break;
Case "значение 2": "блок операторов 2";
Break;
Case "значение N": "блок операторов N";
Break;
Default: "операторы";
}

При использовании Switch компьютер берет значение переменной или выражение и сравнивает с теми значениями, которые задал пользователь. Если значение совпадает, то выполняется соответствующий блок операторов. В конце каждого блока операторов ставиться Break, который означает выход из Switch'а. Также существует подраздел default, операторы которого будут выполняться, если значение переменной или выражения не совпали ни с одним предложенным значение.

Займемся операторами циклов. Первым мы будем разбирать For, предназначенный для организации цикла, в котором заведомо известно число повторений. Синтаксис его таков:

For ("объявление переменной"; "условие выполнения"; "изменение переменной")

{
"блок операторов"
}

Объявленная переменная является переменной, которая идет по циклу и изменяет свое значение. Насколько переменная будет изменяться после пробега цикла, можно задать в разделе "изменение переменной". Также в For присутствует проверка условия, то есть если условие выполняется, то цикл продолжает работать.

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

While ("условие")

{
"блок операторов"
}

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

Функции и их использование

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

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

Синтаксис описания процедуры таков:

Function "назначаемое имя" ("передаваемые в функцию значения")

{
"последовательность операторов"
}

Функция также может и возвращать значение. Такое действие можно осуществить оператором return().

Заключение

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

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

Целью же статьи было заинтересовать читателя языком сценариев JavaScript.

Источник: "Компьютер Price", http://www.comprice.ru

 


Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com