JS: основные понятия

Современный 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 определены следующие операции:

операция название
+ сложение
- вычитание
* умножение
/ деление
% остаток от деления целых чисел
++ увеличение значения операнда на единицу
-- уменьшение значения операнда на единицу

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

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

оператор эквивалентный оператор присваивания
X+=Y X=X+Y
X-=Y X=X-Y
X*=Y X=X*Y
X/=Y X=X/Y
X%=Y X=X%Y

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

Для того, чтобы можно было сравнивать два значения в 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.

событие когда происходит обработчик события
Blur потеря объектом фокуса onBlur
Change пользователь изменяет значение элемента onChange
Click пользователь щелкает мышью по объекту onClick
DblClick пользователь делает двойной щелчок мышью по объекту onDblClick
DragDrop пользователь перетаскивает мышью объект onDragDrop
Error возникновение javascript-ошибки onError
Focus окно или элемент формы получает фокус onFocus
KeyDown пользователь нажимает клавишу клавиатуры onKeyDown
KeyPress пользователь удерживает нажатой клавишу клавиатуры onKeyPress
KeyUp пользователь отпускает клавишу клавиатуры onKeyUp
Load документ загружается в браузер onLoad
MouseDown пользователь нажимает кнопку мыши onMouseDown
MouseOut указатель мыши выходит за пределы элемента onMouseOut
MouseOver указатель мыши помещается над элементом onMouseOver
MouseUp пользователь отпускает кнопку мыши onMouseUp
Move пользователь перемещает окно onMove
Reset пользователь нажимает кнопку "reset" формы onReset
Resize пользователь изменяет размеры окна или элемента onResize
Select пользователь выбирает элемент формы onSelect
Submit пользователь нажимает кнопку "submit" формы onSubmit
Unload пользователь закрывает документ onUnload
Направление: