LAB10 Логинов А. А. (Лабораторная работа 10)

Национальный исследовательский университет

Московский Энергетический Институт

Лабораторная работа №10v1.

Разработка страниц с динамическим содержимым: Использование языка выполняемых сценариев JavaScript.

Выполнил: Логинов Андрей

группа А-13-08

Преподаватель: Куриленко Иван Евгеньевич

Москва, 2012.

Цель работы:

Получить навыки использования языка выполняемых сценариев JavaScript для организации динамического содержимого.

Подготовка к работе:

1. Ознакомиться с способами создания интерактивных Web-сайтов и DHTML.

2. Ознакомиться с объектной моделью документа (DOM).

3. Ознакомиться с основами разработки скриптов на языке JavaScript.

4. Ознакомиться с возможностями jquery и jquery ui

Порядок выполнения работы:

1. Дополнить одну из разработанных ранее страниц Java-скриптом, перехватывающим событие onload и показывающим сообщение с приветствием.

2. Добавить на одну из страниц часы (цифровые).

3. Добавить на одну из страниц статический календарь, отображающий текущую дату.

4. Добавить страницу с клиентским скриптом, задающим пользователю ряд вопросов и генерирующим на основе его ответов страницу в новом окне.

5. Добавить на страницу «плавающий» (от границы к границе) рекламный слой.

6. Добавить на страницу скрипт обеспечивающий отображение полного абзаца текста при наведении мыши на его сокращенную версию.

Dynamic HTML или DHTML — это способ создания интерактивного веб-сайта, использующий сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа).

DOM (от англ. Document Object Model — «объектная модель документа») — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов. Модель DOM не налагает ограничений на структуру документа. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями "родительский-дочерний".

Уровни W3C DOM

Текущим уровнем спецификаций DOM является Уровень 2, но тем не менее некоторые части спецификаций Уровня 3 являются рекомендуемыми W3C.

Уровень 0 

Включает в себя все специфические модели DOM, которые существовали до появления Уровня 1, например, document.images, document.forms, document.layers и document.all. Необходимо обратить внимание, что эти модели формально не являются спецификациями DOM, опубликованными W3C, а скорее являются информацией о том, что существовало до начала процесса стандартизации.

Уровень 1 

Базовые функциональные возможности DOM (HTML и XML) в документах, такие как получение дерева узлов документа, возможность изменять и добавлять данные.

Уровень 2 

Состоит из следующих основных частей:

• DOM2-Core описывает XML, включая основные понятия: Node, Document и пр.
  Этот стандарт бывает полезен изредка. Он поддерживается очень хорошо всеми браузерами.

• DOM2-HTML расширяет Core для HTML/XHTML.
  При этом Document дополняется методами и свойствами до HTMLDocument, Node - до HTMLElement.
  Пожалуй, самый полезный стандарт, отлично освоенный браузерами.

• Стандарт DOM2-Events описывает события W3C.
  Как известно, здесь много кросс-браузерных несовместимостей.

• Стандарт DOM2-Style описывает работу с CSS: с файлами стилей Stylesheets и CSS-правилами.
  Поддерживается неплохо, однако некоторые несовместимости в браузерах все же есть.

• Стандарт DOM2-Traversal-Range описывает DOM 2 Traversal - итераторы и фильтры для обхода документа, и DOM 2 Range - средства для выделения текста и DOM-узлов.
  Traversal браузеры только начинают осваивать, ну а Range хорошо поддерживается везде, кроме Internet Explorer.

Уровень 3 

Состоит из шести различных спецификаций:

1. DOM Level 3 Core;

2. DOM Level 3 Load and Save;

3. DOM Level 3 XPath;

4. DOM Level 3 Views and Formatting;

5. DOM Level 3 Requirements;

6. DOM Level 3 Validation.

Эти спецификации являются дополнительными расширениями DOM.

JavaScript — прототипно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.

jQuery UI — библиотека JavaScript с открытым исходным кодом для создания насыщенного пользовательского интерфейса в веб-приложениях, часть проекта jQuery. Построена поверх главной библиотеки jQuery и предоставляет разработчику упрощенный доступ к её функциям взаимодействия, анимации и эффектов, а также набор виджетов.

Файл lab10_1.htm:

"http://www.w3.org/TR/html4/strict.dtd">

Лаб. 10v1

Файл lab10_2.htm:

"http://www.w3.org/TR/html4/strict.dtd">

Лаб. 10v1

Имя:

Фамилия:

Пол:

Файл lab10_3.htm:

"http://www.w3.org/TR/html4/strict.dtd">

Лаб. 10v1

Вы ввели:

Имя:

Фамилия:

Пол:

Файл со скриптами:

window.onload = function Hello() {

window.alert("Приветствуем Вас!");

get_date();

get_month();

get_year();

get_day();

}

var clock1;

function t_start() {

clock1 = setInterval("t_time();", 1000);

document.getElementById("div_start").style.display = "none";

document.getElementById("div_end").style.display = "block";

}

function t_time() {

var d = new Date();

var msg = (d.getHours()<10) ? "0" : "";

msg += d.getHours() + ":";

msg += (d.getMinutes()<10) ? "0" : "";

msg += d.getMinutes() + ":";

msg += (d.getSeconds()<10) ? "0" : "";

msg += d.getSeconds();

document.getElementById("div1").innerHTML = msg;

}

function t_end() {

clearInterval(clock1);

document.getElementById("div_start").style.display = "block";

document.getElementById("div_end").style.display = "none";

}

function get_date() {

var d = new Date();

document.getElementById("t1").innerHTML = d.getDate();

}

function get_month() {

var mass = [ "Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря" ];

var d = new Date();

document.getElementById("t2").innerHTML = mass[d.getMonth()];

}

function get_year() {

var d = new Date();

document.getElementById("t3").innerHTML = d.getFullYear() + " года,";

}

function get_day() {

var mass = [ "Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота" ];

var d = new Date();

document.getElementById("t4").innerHTML = mass[d.getDay()];

}

var myWindow;

function f_open() { // Открываем окно

var str = "menubar=0,location=0,resizable=0,titlebar=0,width=500,height=600,left=100,top=50";

myWindow = window.open("lab10_2.htm", "window", str);

}

Файл lab10_4.htm:

"http://www.w3.org/TR/html4/strict.dtd">

Лаб. 10v1

BANNER

Файл со стилями:

body {

font-family: Arial

}

.clock {

font-size: 30px;

color: #008040

}

table {

border: solid 2px black;

background: green;

color: white

}

.bl {

text-align: center;

font-size: 30px;

color: white;

border: solid 2px black;

background: green;

width: 200px;

height: 50px;

position: absolute;

top: 150px;

}

.text {

border: none 2px black;

position: absolute;

top: 350px;

width: 200px;

height: 100px;

overflow: hidden }