Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Практические аспекты разработки веб-ресурсов. Учебное пособие
.pdf
сивы JS динамические, поэтому не надо заранее объявлять длину, а при работе
сними отслеживать выделение памяти. Объекты типа массив наследуют свойства от объекта Array.prototype, позволяющим работать как с числовыми массивами, так с символьными массивами и со строками.
Создать массив можно несколькими способами:
1. С помощью литералов — заключенных в квадратные скобки списков,
например:
var mas=[2, 3, 5];
var b=13;
var mas1=[b, b+1, b+2, b+3]; // [13, 14, 15, 16]
2. С помощью конструктора new. Например:
var a=new Array(); // без аргументов, создание пустого массива
var a1=new Array(10); // создается массив из 10 неопределенных значений
var a2=new Array(1, 2, 3, 4); // создан массив состоящий из чисел 1, 2, 3, 4
Чтобы обратиться к элементу массива используется следующий синтаксис:
<имя массива>[<индекс>]
Каждый массив имеет свойство length(), которое позволяет узнать текущую длину массива, изменять текущую длину массива. Если свойству length()
присвоить значение меньшее, чем текущая длина массива, то будут удалены
элементы с индексами, большими вновь указанной длины. Если в свойстве
length() будет задана большая длина, то в массив добавятся новые пустые элементы.
При работе с массивами часто используется оператор цикла for.
Для создания многомерного массива, например матрицы, в качестве элементов одномерного массива берут также одномерные массивы, тем самым получая массив массивов. Например:
var table=new Array(10); // 10 строк таблицы (матрицы)
for (var i=0; i<table.length; i++)
table[i]=new Array(10); // 10 столбцов таблицы (матрицы)
При работе с массивами используются следующие методы:
join(<разделитель>) — преобразует все элементы массива в строки, вы-
полняет их конкатенацию и возвращает результирующую строку; Если задан
разделитель, то элементы строки друг от друга разделяются указанным способом, если разделитель не задан, то используется по умолчанию запятая.
reverse() — выводит элементы массива в обратном порядке.
81
sort() — выполняет сортировку элементов массива и выводит отсортиро-
ванный массив. Если этот метод вызван без аргументов, то сортирует элементы
масива в алфавитном порядке (по возрастанию).
concat(<аргументы>) — добавляет в массив <аргументы>, указанные при
вызове этого метода.
slice(<начало>,<конец>) — возвращает заданный фрагмент массива из
указанного диапазона [<начало>,<конец>). Если аргумент <конец> не указан,
то возвращаются все элементы, начиная с аргумента <начало> и до конца
массива.
splice(<начало>,<сколько>,<список новых массивов>) — вырезает элементы из массива или вставляет массив(ы).
Рассмотрим первый вариант использования данного метода. Первый аргумент указывает индекс элемента массив, начиная с которого будут удалены
элементы. Второй аргумент указывает количество удаляемых элементов, если
он не указан, то удаляются все элементы до конца массива. Результатом данного метода является массив удаленных элементов.
Во втором варианте использования данного метода необходимо в качестве второго аргумента указать значение “0”, а в качестве третьего аргумента
указать, соответствующий вставляемый массив(ы).
toString() — преобразует массив в список строк, каждая из которых является элементом исходного массива. Разделителем является запятая.
indexOf(<значение>,<индекс>), lastIndexOf(<значение>,<индекс>) — возвращают индекс первого вхождения в массиве элемента с заданным значением.
Если элемент не найден, то возвращается значение «-1». Первый метод осуществляет поиск сначала массива, а второй метод — с конца. Если указан второй аргумент, то поиск начинается с заданного индекса массива. Если второй
аргумент отрицательный, то поиск идет в обратную сторону.
Функции
В программах иногда одна и та же последовательность операторов выполняется несколько раз. Такую последовательность операторов удобно вынести из основной программы во вспомогательную. Вспомогательная программа
называется подпрограмма. Подпрограммы в JS называются функциями.
Каждая подпрограмма работает со списком параметров, содержащих перечень исходных данных, с которыми работает подпрограмма, а также идентификаторов, содержащих значения результата. Эти параметры называются формальными. При вызове подпрограммы каждому формальному параметру дол-
82
жен соответствовать фактический параметр, т. е. значение переменной необходимое для вычисления результата подпрограммы.
В JS функции являются объектами. Методы объектов являются по своей
сути функциями.
Функции могут быть зарезервированными языком программирования, а
могут быть пользовательскими, т.е. написанными для данного программного
кода.
Синтаксис описания функции следующий:
function <имя функции>([параметр1[= значение параметра 1][, ..., параметр N[= значение параметра N]]]) {
операторы (тело функции);
return <значение>;
}
[параметр1[= значение параметра 1][, ..., параметр N[= значение параметра N]]] — список формальных параметров (и/или значения по умолчанию)
В теле функции используется инструкция return. Она предназначена для
определения возвращаемого функцией значения. Обработка интерпретатором
инструкции return является условием прекращения выполнения функции с передачей значения функции во внешнюю программу.
Объявление функции в программе может быть организовано следующими способами:
декларативным;
функциональным;
способом объектно-ориентированного программирования (ООП).
Например:
function square(number) {// декларативный способ
return number * number;
}
или
var square = function(number) {// функциональный способ
или
return number * number;
}
function Person(name, age, sex) {// способ ООП
this.name = name;
this.age = age;
83
this.sex = sex;
}
var rand = new Person(«Rand McKinnon», 33, «M»);
или
var adder = new Function('a', 'b', 'return a + b');
adder(2, 6); // > 8
Аргумент this (объект привязки) возвращает ссылку на объект, являющийся текущим контекстом вызова. Это позволяет обращаться к свойствам
«текущего» объекта. В случае конструктора, вызванного с ключевым словом
new, значение по умолчанию — это значение его параметра this.
Если функция используется не как объект JS, а является подпрограммой,
реализующей вычисления, то в программе ее надо вызвать. Синтаксис вызова
функции следующий:
<имя функции>(<список фактических параметров>);
Фактические параметры должны совпадать по количеству, типу, порядку
с формальными параметрами функции.
Например:
var result = square(5); // в результате вернет 25
Для функций определен рекурсивный вызов. Рекурсия — это вызов подпрограммы в теле самой подпрограммы. При рекурсивном вызове функции создается новый набор формальных параметров и локальных переменных, хранящихся в стеке. В стеке сохраняется и адрес возврата.
Например: вычисление факториала.
function factorial(n) {
if ((n == 0) || (n == 1))
return 1;
else
return (n * factorial(n — 1));
}
//вычислить 5!:
var e = factorial(5); // e будет равно 120
84
JavaScript на стороне клиента.
Подключение программного кода
Скрипты вставляются в тело HTML-документа при помощи специального
тега <SCRIPT>. . .</SCRIPT> следующими способами:
1. Текст JavaScript пишется в этих тегах. Браузер анализирует содержимое, находящееся между этими тегами и для исполнения сценария приводит в
действие тот или иной интерпретатор. Например, отображение системного времени посредством цифровых часов (файл .html).
<!DOCTYPE html>
<html>
<head>
<title> Цифровые часы </title>
<script>
function displayTime() {
var now=new Date();//Получение времени
var elt=document.getElementById(«clock»);//Поиск элемента с id = «clock»
elt.innerHTML=now.toLocaleTimeString();// Вывод времени
setTimeout(displayTime, 1000);// Повторение 1 раз в секунду
}
window.onload=displayTime; // Запуск часов при загрузке HTML — до-
кумента
</script>
/* http://htmlbook.ru/CSS — стили для оформления элементов*/
<style>
#clock {/*Стили для элемента id=«clock»*/
font: bold 24pt sans;/*Крупный шрифт*/
background: #ddf;/*Серый фон*/
padding: 10px;/*Отступ 10 пикселей*/
border: solid black 2px;/*Черная рамка шириной 2 пикселя*/
border-radius: 10px;/* Скругленые углы*/
}
</style>
</head>
<body>
<h1> Цифровые часы </h1>
<span id=«clock»></span>
</body>
</html>
85
2. Текст JavaScript пишется в отдельном файле. Этот подход наиболее
приемлем при использовании скриптов довольно большого объема, а также для
хранения служебных процедур. Если мы храним наш скрипт в файле с именем
filel.js, то включить его в код страницы мы можем следующим способом:
<SCRIPT src= «file. JS»></SCRIPT>.
Например, вывод системного времени, посредством цифровых часов.
Сначала должен быть создан файл с расширением .js (в нашем примере
f1.js) (кодировка UTF-8):
function displayTime() {
var now=new Date();//Получение времени
var elt=document.getElementById(«clock»);//Поиск элемента с id = «clock»
elt.innerHTML=now.toLocaleTimeString();// Вывод времени
setTimeout(displayTime, 1000);// Повторение 1 раз в секунду
}
window.onload=displayTime;
Затем в файле HTML — кода в теге <script > посредством параметра srс,
данный файл включается в программный код.
<!DOCTYPE html>
<html>
<head>
<title> Цифровые часы </title>
<script src=«f1.js»></script>
<style>
#clock {/*Стили для элемента id=«clock» */
font: bold 24pt sans;/*Крупный шрифт*/
background: #ddf;/*Серый фон*/
padding: 10px;/*Отступ 10 пикселей*/
border: solid black 2px;/*Черная рамка шириной 2 пикселя*/
border-radius: 10px;/* Скругленые углы*/
}
</style>
</head>
<body>
<h1> Цифровые часы </h1>
<span id=«clock»></span>
</body>
</html>
86
Программирование на основе событий
Свойство
Описание
closed
Возвращает логическое значение (true или false) в зависимости от того, закрыто указанное окно или отрыто.
frames
Возвращает массив всех фреймов на странице (включая iframe).
document
Возвращает объект Document данного окна.
history
Возвращает объект History данного окна.
length
Возвращает количество фреймов (включая iframe), которые находятся в данном окне.
location
Возвращает объект Location данного окна.
name
Устанавливает или возвращает имя данного окна.
Клиентские программы на JS работают асинхронно и управляются событиями. Обработка событий объектов неотъемлемая часть программирования на
JS. Управлять поведением браузера можно с помощью объектной модели браузера (Browser Object Model — BOM). BOM включает в себя несколько объектов:
1. Объект окно (Window) главный объект, включающий перечисленные
ниже объекты:
2. Объект (свойство) location содержит URL-адрес отображаемой веб-
страницы. Например: Window.location=”http://nodesj.org”;
3. Объект (свойство) history хранит информацию об истории просмотра
страниц.
4. Объект (свойство) Navigator содержит информацию о типе браузера и
номере версии.
5. Объект (свойство) Screen содержит информацию о размерах пользова-
тельского монитора.
6. Объект (свойство) Frames содержит информацию о массиве фреймов,
расположенных в текущем окне. Обратиться к фрейму можно по индексу в
этом массиве.
7. Объекты DOM (Document Object Model) — способ представления страницы в JavaScript.
Объекты JavaScript — основной тип в JavaScript.
Рассмотрим некоторые основные объекты, их свойства и события.
Таблица 2.12
Свойства объекта Window
87
Свойство
Описание
navigator
Возвращает объект Navigator данного окна.
opener
Возвращает ссылку на окно, которое открыло данное.
parent
Возвращает родительское окно данного окна.
screen
Возвращает объект Screen данного окна.
self
Возвращает текущее окно.
top
Возвращает верхнее браузерное окно для данного окна.
Метод
Описание
alert()
Вызывает окно оповещения, которое содержит текст сообщения
и клавишу ОК.
blur()
Делает окно неактивным.
clearInterval()
Прекращает повторное выполнение кода заданного setInterval().
clearTimeout()
Отменяет запланированное методом setTimeout() выполнение кода.
close()
Закрывает окно.
confirm()
Вызывает окно подтверждения содержащее текст сообщения
и клавиши ОК и Отмена.
focus()
Делает окно активным.
moveBy()
Смещает окно относительно его текущей позиции.
moveTo()
Перемещает окно на указанную позицию.
open()
Открывает новое окно браузера.
print()
Распечатывает содержимое текущего окна.
prompt()
Вызывает окно запроса, побуждающее посетителя ввести в него
определенные данные.
scrollBy()
Прокручивает содержимое окна на указанное количество пикселей.
scrollTo()
Прокручивает содержимое окна до указанных координат.
setInterval()
Вызывает функцию или выполняет код через определенные промежутки
времени (указанные в миллисекундах).
setTimeout()
Вызывает функцию или выполняет код после указанного количества
миллисекунд один раз.
Таблица 2.13
Методы объекта Window
88
Объект window создается автоматически при запуске браузера, так как
Параметр
Значения
Описание
fullscreen
yes|no|1|0
Указывает, показывается ли новое окно
на полный экран или как обычное окно
channelmode
yes|no|1|0
Отображается ли полоса каналов
toolbar
yes|no|1|0
Отображается ли полоса кнопок
location
yes|no|1|0
Отображается ли полоса ввода адреса
directories
yes|no|1|0
Отображается полоса для выбора каталога
status
yes|no|1|0
Полоса статуса
menubar
yes|no|1|0
Полоса меню
scrollbar
yes|no|1|0
Задает отображение горизонтальной и вертикальной
полос прокрутки
resizable
yes|no|1|0
Могут ли окна изменять свой размер
width
Число
Ширина окна в пикселах (минимум 100)
height
Число
Высота окна в пикселах (минимум 100)
top
Число
Вертикальная координата левого верхнего угла окна
left
Число
Горизонтальная координата левого верхнего угла окна
для отображения документа необходимо окно. В меню Файл (File) любого
браузера есть команда Создать (New), позволяющая открыть новое окно и
отобразить в нем документ, и команда Закрыть (Close) закрытия окна. Эти действия можно осуществлять программно — из приложения JavaScript, применяя
методы open() и close() объекта window:
<имя_окна> = window.<метод>([имя_файла], [ссылка], [параметры]),
где имя_окна — имя для ссылки на новое окно в операторах JavaScript;
имя_файла — полный или относительный URL-адрес открываемого в
окне документа;
ссылка — имя, указываемое в качестве цели в гипертекстовой ссылке на
это окно из другого документа HTML;
параметры — задают значения параметров окна (ширина, высота, нали-
чие панелей инструментов, полос прокрутки и т.п.).
Таблица 2.14
Параметры объекта Window
89
Для организации ввода-вывода используются следующие методы:
Событие
Когда происходит
Обработчик события
Blur
потеря объектом фокуса
onBlur
Change
пользователь изменяет значение элемента
onChange
Click
пользователь щелкает мыщью по объекту
onClick
DblClick
пользователь делает двойной щелчок мышью по объекту
onDblClick
1. Метод alert() — отображает диалоговое окно сообщений с кнопкой «Ок».
2. Метод write() — предоставляется объектом document.
3. Метод confirm() — отображает диалоговое окно сообщений с кнопками
«Ок» и «Отмена».
4. Метод prompt() — отображает диалоговое окно, содержащие сообще-
ние и текстовое поле для ввода значений пользователя.
Например:
do {
var n=prompt(“Введите свое имя”);
var ok=confirm(“Имя ”+n+” правильное”);
} while (!ok)
alert(“Здравствуйте, ”+n);
Для работы со временем используются следующие методы:
1. Метод setTimeout() — устанавливает время вывода, синхронизирован-
ное с системным временем.
Например: Слово «Привет!» будет выведено в диалоговом окне через
2 секунды после вызова функции:
setTimeout(function() {alert(“Привет!”);}, 2000);
2. Метод clearTimeout() — отменяет параметры заданные методом set-
Timeout().
3. Метод setInterval() — устанавливает интервал однократного или мно-
гократного вызова пользовательской функции.
4. Метод clearInterval() — отменяет вызов пользовательской функции.
Во многих случаях нужно, чтобы сценарий выполнялся после инициализации какого либо события. Для этого используются обработчики событий, связанные с объектом. В табл. 2.15 приведены некоторые из событий, поддерживаемых в JavaScript.
Таблица 2.15
События, поддерживаемые в JavaScript
90
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]