Файл: Лабораторна робота №17.doc

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 17.06.2024

Просмотров: 28

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

Лабораторная работа № 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()