Введение в JavaScript

 Изменение размера шрифта Источники
  + - Вернуться на страницу учебника по HTML и CSS

Часть 1: Введение

Что такое JavaScript

JavaScript - язык созданий сценариев, который разработала Netscape. С JavaScript можно легко создавать интерактивные web-страницы. Многие полагают, что JavaScript есть Java из-за схожих имен. Но это не так. JavaScript это не Java! Для дальнейшей информации можно прочитать введение в JavaScript, предоставленное на сайте Netscape

Запуск JavaScript

Для того, чтобы выполнить сценарии, написанные на JavaScript необходим браузер поддерживающий JavaScript - например Netscape Navigator (версия 2.0 или выше) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). Необходимы также основные знания HTML. В Интернете можно найти много ресурсов по HTML, сделав интерактивный запрос html в поисковых серверах Rambler или Yandex или каких-либо еще, чтобы получить большее количество информации относительно HTML. Можно воспользоваться ссылками на учебники языка HTML на этой странице.

Вложение JavaScript в HTML-страницу

Код JavaScript встроен непосредственно в код HTML: <html>
<body>
<br>
Это HTML документ.
<br>
<script language="JavaScript">
document.write("Это JavaScript!")
</script>
<br>
Вернутся в HTML.
</body>
</html>

На первый взгляд это напоминает нормальный HTML-файл. Единственная новая вещь, эта часть:

<script language="JavaScript">
document.write("This is JavaScript!")
</script>

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

Это HTML документ.
Это JavaScript!
Вернутся в HTML.

Этот сценарий не очень полезен - это можно написать на чистом HTML намного легче. Но этот пример иллюстирует использование тега <script>. Все что находится между тегом <script> и тегом </script> - распознаётся как код JavaScript. Здесь используется команда document.write() - одна из наиболее важных команд в программировании на JavaScript. Команда document.write() используется, чтобы вывести что-либо в текущий документ (в этом случае, это - HTML- документ). Так что наша программа JavaScript пишет текст Это JavaScript! прямо в текущий HTML-документ.

Браузеры, не поддерживающие JavaScript

Как выглядит страница со сценарием JavaScript, если браузер не понимает JavaScript? Браузеры не поддерживающие JavaScript не знают тега <script>. Они игнорируют тег <script> и выводят весь последующий код, как обычный текст. Это означает, что пользователь будет видеть JavaScript-код внутри HTML-документа. Есть способ скрытия исходного текста из старых браузеров. следует воспользоваться HTML-комментарием . Новый текст JavaScript-кода выглядит так:
<html>
<body>
<br>
Это HTML документ.
<br>
<script language="JavaScriptquot;>
<!-- спрятать код от браузеров, не поддерживающих JavaScript
document.write("Это JavaScript!")
// -->
</script>
<br>
Вернутся в HTML.
</body>
</html>

Результат в браузере не поддерживающем JavaScript будет выглядеть следующим образом:
Это HTML документ.
Вернутся в HTML.

Без HTML-комментария результатом сценария в браузере не поддерживающем JavaScript будет:
Это HTML документ.
document.write("This is JavaScript!").
Это HTML документ.

Следует обратить внимание на то, что невозможно полностью скрыть исходный текст JavaScript. Мы всего лишь предотвращаем вывод кода в старых браузерах - но однако, пользователь может видеть код через Пункт меню браузера View document source или Просмотр HTML кода в русифицированных браузерах. Не имеется никакого способа препятствовать кому-то просмотреть ваш исходный текст (чтобы видеть, как выполнен некоторый эффект).

События

События и обработчики события очень важны для программирования на JavaScript. События обычно вызваны действиями пользователя. Если пользователь нажимает на кнопку мыши, происходит событие Click. Если курсор мыши перемещается на ссылку или другой элемент страницы, происходит событие MouseOver. Есть несколько различных типов событий.
Пользователь обычно желает, чтобы JavaScript сценарий (програма) реагировал на некоторые его действия (события для JavaScript сценария). Это может быть сделано с помощью обработчиков события.

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

   <form >
   <input type="button" value="Click me"
   onClick="alert('Вы нажали на кнопку')" >
   </form >

Рассмотрим этот пример шаг за шагом. Форма с кнопкой создается с помощью тега <FORM>:

<FORM>
<INPUT type="button"
value="Проверить этот пример" onClick="alert('Вы нажали на кнопку')" >
</FORM>

Новый элемент обработчик событий onClick="alert('Вы нажали на кнопку')" внутри тега <input>. Он определяет то, что происходит, когда нажимается кнопка. Если событие Click (нажатия правой кнопкой мыши на кнопку в документе HTML) происходит, компьютер должен выполнить действие alert('Вы нажали на кнопку'). Это действие заключается в том, что появляеться всплывающее окно, на котором написан текст Вы нажали на кнопку, находяжийся между одинарными кавычками внутри оператора alert.

Это - JavaScript-код. Обратите внимание, что в этом случае не используется тег <script>.

Во избежание путаницы используется соглашение об использовании разных типов кавычек. В команде document.write() используются двойные кавычки ", а в комбинации с alert() используются только одиночные кавычки ' - почему? Можно использовать оба способа. Но в последнем примере записано onClick="alert('Вы нажали на кнопку')". Видно, что используются и двойные и одиночные кавычки. Если было бы записано onClick="alert("Вы нажали на кнопку")", то компьютер запутается, поскольку не ясно, которая часть принадлежит обработчику события onClick, а которая - нет.

В этом случае, следует чередовать кавычки. Не имеет значение, в котором порядке используются кавычки - сначала двойные кавычки и затем одиночные кавычки или наоборот. Это означает, что можно также написать
onClick='alert("Вы нажали на кнопку")'

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

Если используется браузер Netscape Navigator, всплывающее окно будет содержать текст JavaScript alert. Это - защитное ограничение. Вы можете создавать подобное всплывающее окно с помощью метода prompt().

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

Функции

Функции используются в большинстве JavaScript программ. В основном функции - путь для связывания нескольких команд вместе. Вот сценарий, который выводит некоторый текст три раза:
    <html >
    <script language="JavaScript">
    <!-- hide >

   document.write("Привет!");
   document.write("Это JavaScript!");

   document.write("Привет!");
   document.write("Это JavaScript!");

   document.write("Привет!");
   document.write("Это JavaScript!");

// -- >
    </script >
    </html >


Который три разавыводит текст
Привет!
Это JavaScript!

. Повторение кода три раза делает нужный результат. Но это не очень эффективно. Можно решить это лучшим способом. Вот код, который делает тоже самое эффективнее:


<html>
<script language="JavaScript"<
<!-- hide

function myFunction() {
document.write("Привет!<br>");
document.write("Это Java Script!<br>");
}
myFunction();
myFunction();
myFunction();
// --<
</script<
</html<

В этом сценарии определяется функция myFunction. Это выполняется в следующих строках:


function myFunction() {
document.write("Привет!
");
document.write("Это JavaScript!
");
}

Команды внутри фигурных скобок{ } относятся к функции myFunction(). Это означает, что две команды document.write() связаны вместе и могут быть выполнены через обращение к функции. В данном примере имеются три обращения к функции. Мы пишем myFunction() три раза, прямо ниже определения функции. Это три обращения к функции. Это означает, что функция выполняется три раза.

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

<html>
<head>
<script language="JavaScript">
<!-- Спрятать!
function calculation() {
var x= 12;
var y= 5;
var result= x + y;
alert(result);
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Вычислить" onClick="calculation()">
</form>
</body >
</html >
</pre >

Здесь можно проверить работу примера:

Кнопка Вычислить вызывает функцию calculation(). Эта функция делает вычисления. Для этого используем переменные x, y и result. Можно определять переменную ключевым словом var. Переменные могут использоваться, чтобы хранить различные значения - например числа, текстовые строки и т.д. Строка     var result= x + y; требует, чтобы браузер создал переменную result и сохранил в ней результат x + y (т.е. в данном случае 5 + 12). После этой операции переменная result = 17.

Команда alert(result) является в этом случае аналогом команды alert(17). Это означает, что после ее выполнения появляется всплывающее окно с числом 17 в нём.



Часть 2:

Продолжение следует