Лабораторная работа № 17
Тема: Доступ к объектам и сценариям. События.
Цель работы: ознакомиться с предпосылками создания динамического HTML. Изучить приемы работы с объектами. На практике освоить программирование с использованием встроенных функций языка JavaScrіpt.
Теоретическая сведения
Язык HTML является языком разметки гипертекста. Он не рассчитан на выполнение каких-либо «активных» действий. Этим данный язык отличается от языков программирования.
В настоящее время от Web-страниц требуют более широких возможностей. Так появился Динамический HTML.
Динамический HTML (DHTML - Dynamic HTML) - сочетание обычного HTML и языка сценариев JavaScript. Более сложные вещи (обработка и хранение информации, получаемая от посетителя страницы) осуществляется с помощью языков программирования PHP, Perl.
Язык JavaScript это не является языком Java. Язык JavaScript разработан в компании Netscape, а язык Java (универсальный язык программирования), разработан в компании Sun Microsystems. JavaScript-программа, т.е. скрипт (script), не может быть автономной. Она должна выполняться внутри Web-страницы.
Недостатки Web - страницы:
● информация статична;
● нет интерактивности (только переход на другую страницу).
Достоинства JavaScript:
● изменение рисунка при наведении мыши;
● выпадающие меню;
● всплывающие подсказки;
● фотогалерея без перегрузки страницы;
● движение объекта по экрану.
Недостатки JavaScript: JavaScript может быть отключен в броузере.
Каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства.Свойства объекта можно менять из программы на JavaScript (скрипта). Все, что происходит на Web - страницы – это события. Все события можно «обрабатывать», т.е. как-то реагировать на них.
● Событием называется некое действие, произошедшее на странице, в ответ на которое требуется выполнить какие-то операции – изменить форматирование страницы, передать данные на сервер и т.д.
● Любое событие имеет «хозяина» - элемент Web–страницы, с которым это событие происходит.
Пример: «Хозяином» может быть гиперссылка, а событиями – наведение на нее указателя мыши, или «кликнуть» на ней.
События:
onMouseOver – курсор мыши над объектом
onMouseOut – курсор мыши ушел с объекта
<IMG SRC="image1.gif" onMouseOver="this.src='image2.gif'" onMouseOut="this.src='image1.gif'">
this – этот объект
this.src – свойство SRC этого объекта
где: image1.gif – начальный рисунок;
image2.gif – когда курсор «мыши» над рисунком;
image1.gif – после «ухода» курсора «мыши».
Пример:
<html>
<head>
<title>Упражнение</title>
</head>
<body BGCOLOR="white">
<P>
<h2 ALIGN=center><FONT COLOR=red>Упражнение</FONT></h2>
<a href=“my_file.html" onMouseOver="document.pic1.src='…/pics/image2.gif' " onMouseOut="document.pic1.src='…/pics/image1.gif'">
<img src=".../pics/image1.gif" border=0 name="pic1"></a>
</body>
</html>
начальный рисунок (image1.gif) когда курсор «мыши» над рисунком (image2.gif)
Объекты в JavaScript
JavaScript — это относительно простой объектно-ориентированный язык, предназначенный для создания небольших клиентских и серверных приложений для Internet. Программы, написанные на языке JavaScript, включаются в состав HTML-документов и распространяются вместе с ними. Программы просмотра (браузеры – от англ. browser) типа Netscape Navigator и Microsoft Internet Explorer распознают встроенные в текст документа программы-вставки (script-коды) и выполняют их. Таким образом, JavaScript — интерпретируемый язык программирования.
Тип данных дата-время
Переменные типа дата-время создаются конструкцией «переменная = new Date()». При этом в переменной сохраняется дата и время присвоения, то есть в переменной сохраняется текущее время. Это время никак не обновляется, оно показывает время присвоения значения переменной, то есть при последующих обращениях оно будет постоянно. Например, таким образом можно вывести окошко alert с текущей датой и временем.
var now = new Date(); // Создаём переменную типа дата-время.
document.write('</br>');
document.write('Сегодня: '+now); // Выводим время инициализации переменной.
Объекты типа дата-время представляются как количество миллисекунд, прошедших с полуночи первого января 1970 го года по универсально координированному времени (UTC). Универсально координированное время (UTC) ранее называлось временем по Гринвичскому меридиану (GMT).
Для объектов типа дата-время определено множество методов (часть из них приведено в таблице)
|
Метод |
Описание |
|
getDate() |
Возвращает число месяца. |
|
getDay() |
Возвращает день недели. 0 — воскресенье, 1 — понедельник, 6 — суббота. |
|
getFullYear() |
Возвращает год в четырёхзначном формате. |
|
getHours() |
Возвращает часы в 24-часовом формате. |
|
getMinutes() |
Возвращает минуты. |
|
getMonth() |
Возвращает месяц. 0 — январь, 1 — февраль, 2 — март,… 10 — ноябрь, 11 — декабрь. |
|
getSeconds() |
Возвращает секунды. |
|
setDate(числоМесяца) |
Изменяет число месяца на указанное. Если указать отрицательное значение или значение больше числа дней в месяце, соответственно изменятся остальные характеристики даты. Например, попытка установить 40е января сохранит в переменной 9е февраля. |
|
setHours(часы) |
Изменяет число часов на указанное. Если указать число более 24 или менее нуля, то соответственно будет изменено число месяца, а при необходимости и месяц и год. Например, если в объекте датаВремя сохранено 12:00 31го декабря 1980 года, датаВремя.setHours(30) установит датаВремя в 6:00 1го января 1981 года. |
|
setMinutes(минуты) |
Изменяет число минут на указанное. Если указать отрицательное значение или значение больше 59, соответственно изменятся остальные характеристики даты и времени. |
|
setMonth(месяц) |
Изменяет месяц на указанный. Если указать отрицательное значение или значение больше 11, соответственно изменятся остальные характеристики даты. |
Подсчитаем число дней, которое прошло с нового года:
<SCRIPT language=JavaScript>
var now= new Date(); //текущая дата и время
var begin=new Date(now.getYear(),0,1); //начало текущего года
var d=now.getTime()-begin.getTime(); //число миллисекунд от начала года
var msPerDay = 24*60*60*1000; // число миллисекунд в дне
d =d/ msPerDay; // поделим на количество миллисекунд в сутках
alert("Прошло " + Math.round(d) + " дней с начала года"); // показать результат
</SCRIPT>
Задержки
Задержку выполнения какой-либо функции легко организовать с помощью метода setTimeout(). У этого метода два обязательных аргумента: функция и задержка выполнения в миллисекундах.
function showAlert() { // Объявляем функцию.
Alert ('Это примерный текст.'); // Определяем тело функции.
}
setTimeout(showAlert, 1500);// Устанавливаем задержку в мсек.
Интервалы
Интервалы устанавливаются аналогично задержкам методом setInterval() . При использование интервалов функция выполняется множество раз через определённые промежутки.
function showTime() { // Определяем функцию.
var now = new Date(); // Получаем текущее время.
status = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
// Записываем его в строку состояния.
}
setInterval(showTime, 250); // Вызываем функцию несколько раз в секунду.
В статусной строке появляется значение текущего времени, которое обновляется 4 раза в секунду.
Массивы
Массив можно создать двумя способами, первый: создать массив с помощью литерала массива - квадратные скобки, внутри которых расположен список элементов, разделенных запятыми.
var ar1 = [ ]; //пустой массив
var num = [4, 1, 2, 5]; //массив с 5 числовыми элементами
var diff = [1.5, false, "текст"]; //массив с 3 элементами различного типа
Второй способ создания массива - вызов конструктора Array(). Вызвать конструктор Array() можно тремя способами.
-
Вызов конструктора без аргументов:
var b = new Array();
В этом случае создается пустой массив, эквивалентный пустому литералу [ ].
-
В конструкторе явно указываются значения n элементов массива:
var b = new Array(1, 3, 5, 8, "строка", true);
В этом примере конструктор получает список аргументов, которые становятся элементами нового массива. Аргументы записываются в массив в том порядке, в котором указаны.
Выделение места для последующего присваивания значений. Это делается путем указания при определении массива одного числа в круглых скобках:
var b = new Array(5);
Этот способ определения массива предполагает выделение массиву определенного количества элементов (каждый из которых имеет значение undefined) с возможностью последующего присваивания значений по ходу сценария. Такая форма обычно используется для предварительного размещения массива, если его длина известна заранее.
Через alert можно вывести и массив целиком. При этом его элементы будут перечислены через запятую:
var fruits = ["Яблоко", "Апельсин", "Груша"];
alert(fruits); // Яблоко,Апельсин,Груша
Навигация по массиву
Доступ к элементам массива осуществляется с помощью индексов. Может выполняться с помощью циклов for, while, do while. При этом часто используется свойство массива length .
|
1 |
var week_days = ["понедельнк", "вторник", "среда", "четверг", "пятница"]; |
|
2 |
for(var i = 0; i < week_days.length; i++) document.write(week_days[i] + "<br>"); |
|
3 |
//тоже самое можно так: for(var key in week_days) document.write(week_days[key] + "<br>"); |
Свойство length доступно не только для чтения, но и для записи. Если свойству length указать значение меньше текущего, то массив укорачивается до новой (заданной) длины, любые элементы, не попадающие в новый диапазон индексов, отбрасываются и их значения теряются, даже если потом вернуть length обратно - значения не будут восстановлены.
Цикл for(var i=0; i<arr.length...) надёжнее и быстрее цикла for...in, поэтому не рекомендуется использовать for...in для числовых массивов, а только для ассоциативных.
var arr1 = [5, 2, 4, 9];
arr1.length = 1; //укорачиваем до 1 элемента - [5]
arr1.length = 4; //восстановим прежнее количество элементов
document.write(arr1[3]); //прежнего значения нет
Самым простым способом очистить массив будет: arr1.length = 0. Если свойство length сделать большим, чем его текущее значение, в конец массива добавятся новые неопределенные элементы, увеличивая массив до указанного размера.
Для работы с массивами существует большое число полезных методов, часть из них приведена в таблице:
|
Метод |
Описание |
|
join() |
Выполняет конкатенацию всех элементов массива в одну строку. |
|
reverse() |
Изменяет порядок элементов массива на обратный. |
|
sort() |
Сортирует элементы массива. |
|
concat() |
Выполняет конкатенацию массива с другим массивом. |
|
slice() |
Вычленяет подмассив массива. |
|
splice() |
|
Методы shift() и unshift() работают значительно медленнее, чем push() и pop().