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

Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и анонсирован в 1995 году.

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

В браузере JavaScript умеет делать всё, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером:

• Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.
• Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру и т.п.
• Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется "AJAX").
• Получать и устанавливать cookie, запрашивать данные, выводить сообщения…
• …и многое другое!

Язык JavaScript регистрозависимый, т.е. заглавные и прописные буквы алфавита считаются разными символами.

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

Типы данных

1. Единый тип "число" (number) используется как для целых, так и для вещественных чисел.
Целые числа в представлении:
- десятичном: 15, +5, -174.
- шестнадцатеричном: 0х25, 0хff. Шестнадцатеричные числа включают цифры 0-9 и буквы a, b, c, d, e, f. (Записываются они с символами 0х перед числом.)
- восьмеричном: 011, 0543. Восьмеричные числа включают только цифры 0-7. (Записываются они с символа 0 перед числом.)

Вещественные числа.
Целая часть отделяется от дробной точкой, например: 99.15, -32.45. Возможна экспоненциальная форма записи, например: 2.73E-7. В привычном виде это 2.73*10^-7.

2. Строка «string»

В JavaScript одинарные и двойные кавычки равноправны. Можно использовать или те или другие. Тип символ не существует, есть только строка.

var str = "Веб-программирование студентам";
str = 'Веб-программирование  в уроках и лекциях';

3. Булевый (логический) тип «boolean»

У него всего два значения: true (истина) и false (ложь).

4. Специальное значение «null»

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

var age = null;

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

5. Специальное значение «undefined»

Значение undefined, как и null, образует свой собственный тип, состоящий из одного этого значения. Оно имеет смысл «значение не присвоено».

Если переменная объявлена, но в неё ничего не записано, то её значение как раз и есть undefined:

 var x;
alert( x ); // выведет "undefined"

6. Объекты «object»

Первые 5 типов называют «примитивными».

Особняком стоит шестой тип: «объекты».

Он используется для коллекций данных и для объявления более сложных сущностей.

Объявляются объекты при помощи фигурных скобок {...}, например:

var user = { name: "Вася" };

Таким образом в javascript определено 5 «примитивных» типов: number, string, boolean, null, undefined и 6-й тип – объекты object.

Переменные

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

Например:

var test;
var _test;
var _my_test1;

var a=15;
var b=23.15;
var c='выполнено';
var s=true;

Каждая переменная имеет тип, определяемый значением переменной.

Выражения

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

В выражении a*b, a и b называются операндами, а * - знак операции. В javascript определены следующие операции:

Операторы в выражении вычисляются слева направо в соответствии с приоритетами арифметических операций. Изменить порядок вычисления можно с помощью скобок.

Для каждого из арифметических операторов есть форма, в которой одновременно с заданной операцией выполняется присваивание:

В данном случае сначала вычисляется правый операнд, а затем полученное значение присваивается левому операнду.

Для того, чтобы можно было сравнивать два значения в javascript определены операции сравнения, результатом которых может быть только логическое значение: true или false:

В javascript определены логические операции:
&& - логическое И (AND),
|| - логическое ИЛИ (OR),
! - логическое НЕ (NOT).

Для строковых переменных определена операция конкатенация строк, т.е. их объединение. Обозначается эта операция знаком плюс (+). Результатом выполнения операции является также строка. Пример:

var st1="Веб-программирование";
var st2=" студентам";
var st3=st1+st2;

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

Встраивание в веб-страницы

Расположение внутри страницы

Для добавления JavaScript-кода на страницу, можно использовать теги <script></script>, которые рекомендуется, но не обязательно, помещать внутри контейнера <head>. Контейнеров <script> в одном документе может быть сколько угодно. Атрибут «type='text/javascript'» указывать необязательно, данное значение используется по умолчанию.

Скрипт, выводящий модальное окно с классической надписью «Hello, World!» внутри браузера:

 
<script type="application/javascript">
         alert('Hello, World!');
      </script>

Расположение внутри тега

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

      <a href="delete.php" onclick="return confirm('Вы уверены?');">
         Удалить
      </a>

В приведённом примере при нажатии на ссылку функция confirm('Вы уверены?'); вызывает модальное окно с надписью «Вы уверены?», а return false; блокирует переход по ссылке. Разумеется, этот код будет работать только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения.

Вынесение в отдельный файл

Есть и третья возможность подключения JavaScript — написать скрипт в отдельном файле, а потом подключить его с помощью конструкции

   <head>
      <script type="application/javascript" src="http://Путь_к_файлу_со_скриптом">
      </script>
   </head>

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

При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:

На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т.д.

Все объекты имеют методы (отделяются от объекта точкой), например:
document.write позволяет писать текст в текущую страницу,
window.open открывает новое окно браузера.

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

<div onClick="addText();"></div>

Здесь Click - событие (щелчок по div-у), onClick - обработчик события,
addText() - имя функции, которая сработает при возникновении этого события (щелчка по div-у).

Примечание: не забываем стилизовать div (см. лекцию "Блочная верстка"), иначе элемент не будет виден на странице.

Перечислим события, которые поддерживаются javascript.