Объектно-ориентированный язык программирования
Основные определения
JavaScript – объектно-ориентированный язык программирования,
предназначенный для написания сценариев, работающих как на стороне клиента, так
и на стороне сервера. Таким образом он не является «полноценным» языком
программирования, а ориентирован на использование возможностей только той
среды, в которой сценарии исполняются.
Обозреватель Интернет, работающий на компьютере-клиенте,
обеспечивает среду, в которой JavaScript имеет доступ к объектам,
представляющим собой окна, меню, диалоги, текстовые области, куки и ввод-вывод
в HTML-документ. Кроме того, обозреватель Интернет позволяет присоединить
сценарии на языке JavaScript к таким событиям, как загрузка и выгрузка страниц
и графических образов, нажатие клавиш и движение мыши, выбор текста и пересылка
.
При этом программный код сценариев только реагирует на
события и поэтому не нуждается в главной программе. Набор объектов,
предоставляемых обозревателем, известен под названием Document Object Model
(DOM).
Язык программирования JavaScript был разработан Бренданом
Эйком (Brendan Eich) в NetscapeCommunications как
язык сценариев для обозревателей Netscape Navigator, начиная с версии 2.0. В
дальнейшем к развитию этого языка подключилась корпорация Microsoft, чьи
обозреватели Internet Explorer поддерживают JavaScript, начиная с версии 3.0.
Версия Microsoft получила название JScipt, поскольку JavaScript является
зарегистрированной маркой фирмы Netscape. В 1996 г. в ECMA решили
стандартизировать этот язык, и в июне 1997-го была принята первая версия
стандарта под названием ECMAScript (ECMA-262). В апреле 1998 г. этот стандарт
был принят ISO в качестве международного под номером ISO/IEC 16262.
Структура программ
Программа (сценарий) на языке JavaScript – это текст,
состоящий из операторов, блоков, т.е. взаимосвязанных наборов операторов, и
комментариев. Операторы могут содержать переменные, константы и выражения. Блок
объединяет набор операторов, заключенный в фигурные скобки {}. А комментарии
делятся на два типа: однострочные (предваряются двумя дробями «//») и
многострочные (выделяются открывающим элементом «/*» и закрывающим
элементом «*/»).
function convertToMeters(inches) {
// Следующие два оператора заключены в блок.
meters = inches / 39.37;
return meters;
}
// Следующие два оператора не образуют
блока.
inches = 100;
km = convertToMeters(inches)/1000;
Как видно из примера, каждый оператор JavaScript начинается
с новой строки (что не обязательно, но рекомендуется) и заканчивается точкой с
запятой (что также не обязательно, если оператор является последним в строке).
Необходимо помнить, что в JavaScript регистр букв имеет значение, т.е.
переменнаяmeters не равна переменной Meters.
Переменные и массивы
В JavaScript различают четырк основных типа переменных:
1) числа (целые и дробные);
2) строки (при объявлении символы заключаются в парные или
одинарные кавычки);
3) логические, т.е. имеющие два значения:
· true
или 1 или непустая строка,
· false
или 0 или пустая строка;
4) объекты.
Массивы (Array) – самый распространенный объект, так как это
и список всех гипертекстовых ссылок, и список всех изображений на странице, и
т.д. Массивы можно создать несколькими разными способами.
1. Через инициализатор массива:
colors =
["red","white","blue"]
2. Через конструктор массива:
|
new_array = new Array() // пустой массив new_array5
= new Array(5) // пустой массив из 5 элементов colors = new Array
("red","white","blue") // массив из 3 элементов: red,
white, blue |
Чтобы получить данные из i-го элемента массива, необходимо в
качестве переменной использовать следующую конструкцию colors[i].
Первый элемент массива имеет номер 0. Чтобы присвоить данные
используется та же конструкция:
colors[99] = black;
В примере не только присваивается значение 100-му элементу,
но и проводится расширение размера самого массива до 100 элементов. Число
элементов массива определяется через метод length
alert(color.length);
Операции
В JavaScript используются стандартные С-подобные операции:
• бинарные (сложение «+», вычитание «−», умножение «*»,
деление «/»): x = a+b // в переменную x попадает результат сложения переменных
a и b
• унарные:
o применяемы после переменных (инкремент «++» и декремент
«--») a++; // то же самое, что и a=a+1 применяемые перед переменными (не
«!», смена знака «-») -a; // то же самое, что и a=0-a
• присваивания (=, +=, -=, *=, /=): a += b // то же самое
что и a=a+b
• сравнения (меньше «<», больше «>», меньше либо равно
«<=», больше либо равно «>=», равно «==», не равно «!=»): a>b //
возвращает true или false, т.е. больше a чем b или нет
• логические (и – «&&», или – «||»): a || b // если
хотя бы одна из переменных 1, то результат операции – 1
При использование операций тип результирующего значения
(число или строка) определяется автоматически.
Условный оператор
Условный оператор if…else позволяет
проверить определенное условие и, в зависимости от его истинности, выполнить ту
или иную последовательность операторов. Он имеет две формы:
|
if
(условие) оператор1 if
(условие) оператор1 else оператор2 |
Здесь условие – это любое выражение, значение которого может
быть преобразовано к логическому типу,оператор1 и оператор2 –
любые группы операторов JavaScript; если эти группы содержат более одного
оператора, то они должны быть заключены в фигурные скобки {}.
Первая форма оператора означает: если значение условия
истинно, то выполняется оператор1; если оно ложно, то управление
передается оператору, следующему за if.
Вторая форма оператора означает: если значение условия
истинно, то выполняется оператор1, если оно ложно, то
выполняется оператор2.
Пример использования условного оператора:
|
if (a == "молоко") { document.writeln("А у Вас "); document.writeln(a); document.writeln(" убежало "); } else document.writeln("Не "+a+", а молоко"); |
Операторы цикла
Цикл – последовательность операторов, выполнение которой
повторяется до тех пор, пока определенное условие не станет ложным. Далее
рассмотрим два основных оператора цикла: for и while.
Оператор for
Оператор цикла for имеет вид for
(инициализация; условие; изменение) оператор Здесь инициализация иизменение –
любое выражения, условие – любое выражение, значение которого
может быть преобразовано к логическому типу, оператор – любая
группа операторов JavaScript; если данная группа содержит более одного
оператора, то она должны быть заключена в фигурные скобки {}. Инициализация
может содержать декларацию переменной.
Оператор for выполняется следующим образом:
1. Выполняется выражение инициализация (обычно это выражение
инициализирует счетчик (счетчики) цикла).
2. Вычисляется значение выражения условие. Если оно ложно,
то управление передается оператору, следующему за данным оператором.
3. Выполняется оператор.
4. Выполняется выражение изменение (обычно это выражение
увеличивает или уменьшает счетчик (счетчики) цикла) и действия повторяются.
Данный оператор обычно используется в тех случаях, когда количество повторений
цикла известно заранее. Например, следующий цикл присваивает каждому элементу
массива его номер: for (i = 0; i < a.length; i++) a[i] = i;
Оператор for…in
Оператор for…in выполняет заданные действия для каждого
свойства объекта или для каждого элемента массива. Он имеет вид for (переменная
in выражение) оператор
Здесь переменная – декларация
переменной, выражение – любое выражение, значением которого
является объект или массив, оператор – любая группа операторов
JavaScript; если эта группа содержит более одного оператора, то она должны быть
заключена в фигурные скобки {}.
Оператор for…in выполняется следующим
образом:
1. Переменной присваивается имя очередного свойства объекта
или очередного элемента массива (это зависит от того, является значением
выражения объект или массив).
2. Выполняется оператор.
3. Управление передается этапу 1.
При итерации массива переменной последовательно
присваиваются значение первого, второго, …, последнего элемента массива. Однако
при итерации свойств объекта невозможно предсказать, в каком порядке они будут
присваиваться переменной: этот оператор гарантирует только то, что все они
будут просмотрены.
Следующий сценарий создает новый ассоциативный массив as,
а затем последовательно выводит все его значения на экран обозревателя:
|
var
as = {"а" : "апельсин", "б" :
"банан", "в" : "виноград"}; for (var key in as) document.write(key + ": " +
as[key] + "<BR>"); |
Оператор while
Оператор цикла while имеет вид while (условие) оператор
Здесь условие – любое выражение, значение
которого может быть преобразовано к логическому типу,оператор –
любая группа операторов JavaScript; если эти группа содержит более одного
оператора, то она должны быть заключена в фигурные скобки {}.
Оператор while выполняется следующим
образом:
1) вычисляется значение выражения условие. Если оно ложно,
то управление передается оператору, следующему за данным оператором;
2) выполняется оператор и управление передается этапу 1.
Пример использования:
|
i=50; while
(i<100) i++; |
Декларация функции
Функции являются одним из основных механизмов языка
JavaScript; они охватывают ту область, которая в других языках программирования
реализуется подпрограммами, процедурами и функциями. Функция в JavaScript –
набор операторов, выполняющих определенную задачу.
Для того чтобы пользоваться функцией, необходимо её описать.
Декларация функции имеет вид:
|
function
имя(аргументы) { операторы } |
Здесь имя – идентификатор, задающий имя
функции, аргументы – необязательный список идентификаторов,
разделенных запятыми, который содержит имена формальных аргументов функции, аоператоры –
любой набор операторов, называемый телом функции и исполняющийся при её
вызове.Рассмотрим следующий пример:
|
function quad(num) { return num * num; } |
Данная функция называется quad и имеет один формальный
аргумент num. При её вызове вместо формального аргумента подставляется его
фактическое значение, функция выполняет возведение его в квадрат и возвращает
полученное число оператором return. Переменные, декларированные в теле функции,
локальны, т.е. недоступны вне ее тела.
Вызов функции
Важно понимать, что появление декларации функции в тексте
сценария не означает ее немедленного выполнения; тело функции будет выполняться
только тогда, когда какой-либо оператор будет содержать вызов этой функции.
Например, функция из предыдущего примера может быть вызвана так: var x =
quad(5);
В результате переменная x получит значение 25.
Оператор return
Функции JavaScript могут (но не обязаны) возвращать значение.
Для указания этого значения используется оператор return: return выражение
Оператор прерывает выполнение функции и возвращает значениевыражения.
Функция, содержащая оператор return, должна вызываться как часть
выражения присваивания: x = 2 * quad(a).
Если вставить оператор return без
выражения, то выполнение функции прерывается и возвращается значение undefined. Более
того, такая функция должна вызываться как оператор. Например:
setColor(myColor);
Если тело функции не содержит оператора return,
то ее выполнение завершается с выполнением последнего оператора тела и
возвращается значение undefined.
Включение JavaScript в HTML-документ
Расположение внутри страницы
Для добавления JavaScript-кода на страницу, можно использовать тег script:
Вид: <script>…</script> Индивидуальные атрибуты: type, src, charset Стандартное отображение содержания: нет |
Атрибут type указывает, на каком именно скриптовом языке написан программный код (кроме JavaScript, еще известны непопулярные и нестандартизованные JScript и VBScript). Рекомендуется указывать или«application/javascript», или «text/javascript».
Атрибут src позволяет задать путь к внешнему файлу со скриптами, а атрибут charset указать, какая кодировка для воспроизведения национального языка используется.
Пример скрипта, выводящего модальное окно с классической надписью «Hello, World!» внутри браузера:<script type="text/javascript"> alert('Hello, World!'); </script>
Расположение внутри тега
Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий. Пример использования:
<a href="delete.php"
onClick="return confirm('Вы уверены?');">Удалить</a>
Отделение от разметки
В приведённом примере при нажатии на ссылку функция confirm('Вы уверены?'); вызывает модальное окно с надписью «Вы уверены?», а return false; блокирует переход по ссылке. Разумеется, этот код будет работать только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения.
Однако в рамках модели логического форматирования документов указанный выше пример необходимо использовать в крайнем случае, например при минимальном использовании JavaScript на странице, т.е. по аналогии с атрибутом style. Аналогом приведённого примера, при условии снабжения ссылки идентификатором alertLink:
<a href="delete.php" id="alertLink">Удалить</a>
может выступать, например, следующий фрагмент JavaScript:
window.onload = function() { var linkWithAlert = document.getElementById("alertLink"); linkWithAlert.onclick = function() { return confirm('Вы уверены?'); }; }; |
Вынесение в отдельный файл
Третья возможность подключения JavaScript – написать скрипт в отдельном файле, а потом подключить его к HTML-документу с помощью конструкции
<script type="text/javascript"
src="http://Путь_к_файлу_со_скриптом"></script>
Чтобы упростить задачу и серверному, и клиентскому программному обеспечению в идентификации содержания файла с JavaScript, рекомендуется давать таким файлам расширение js.
