Лабораторная работа 10 (LAB10 Машеров Д.Е.)

Посмотреть архив целиком

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

Московский Энергетический Институт (Технический Университет)

Институт автоматики и вычислительной техники

Кафедра Прикладной математики









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

по дисциплине ВМСС

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



Выполнил:

Машеров Дмитрий Евгеньевич

Проверил:

к.т.н., доц. Куриленко Иван Евгеньевич













Москва

2012 г.

Оглавление

1. Основные понятия 2

JavaScript 2

Document Object Model 2

jQuery 2

2. Задания лабораторной работы и их реализации 4

1) Приветствие 4

2) Цифровые часы и статический календарь 4

3) Клиентский скрипт с рядом вопросов 5

4) «Плавающий» рекламный слой 6

5) Отображение полного абцзаца текста и сокращенной версии 7





  1. Основные понятия

JavaScript

JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента.

JavaScript - это не только язык программирования на стороне клиента. Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит. На практике это выражается в том, что можно, например, изменить цвет фона страницы или интегрированную в документ картинку, открыть новое окно или выдать предупреждение.

Название "JavaScript" является зарегистрированным товарным знаком компании Sun Microsystems. Реализация языка, осуществленная разработчиками Microsoft, официально называется JScript . Версии JScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JScript.

Document Object Model

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

Модель DOM не налагает ограничений на структуру документа. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями "родительский-дочерний".

Изначально различные браузеры имели собственные модели документов (DOM), несовместимые с остальными. Для того чтобы обеспечить взаимную и обратную совместимость, специалисты международного консорциума W3C классифицировали эту модель по уровням, для каждого из которых была создана своя спецификация. Все эти спецификации объединены в общую группу, носящую название W3C DOM.

Еще один интерфейс прикладного программирования, называемый JDOM, обеспечивает более высокий, чем W3C DOM, уровень для работы с XML-документами на Java.

jQuery

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


Использование:

jQuery, как правило, включается в веб-страницу как один внешний JavaScript-файл:


Вся работа с jQuery ведётся с помощью функции $. Если на сайте применяются другие JavaScript библиотеки, где $ может использоваться для своих нужд, то можно использовать её синоним — jQuery. Второй способ считается более правильным, а чтобы код не получался слишком громоздким можно писать его следующим образом:

jQuery(function ($) {

// здесь код скрипта, где в $ будет находиться объект, предоставляющий доступ к функциям jQuery

})


Работу с jQuery можно разделить на 2 типа:

  • Получение jQuery-объекта с помощью функции $(). Например, передав в неё CSS-селектор, можно получить jQuery-объект всех элементов HTML попадающих под критерий и далее работать с ними с помощью различных методов jQuery-объекта. В случае, если метод не должен возвращать какого-либо значения, он возвращает ссылку на jQuery объект, что позволяет вести цепочку вызовов методов согласно концепции текучего интерфейса.

  • Вызов глобальных методов у объекта $, например, удобных итераторов по массиву.


Типичный пример манипуляции сразу несколькими узлами DOM заключается в вызове $ функции со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов HTML-страницы. Эти элементы затем обрабатываются методами jQuery. Например,

$("div.test").add("p.quote").addClass("blue").slideDown("slow");


находит все элементы div с классом test, а также все элементы p с классом quote, и затем добавляет им всем класс blue и визуально плавно спускает вниз. Здесь методы add, addClass и slideDown возвращают ссылку на исходный объект $("div.test"), поэтому возможно вести такую цепочку.


Методы, начинающиеся с $., удобно применять для обработки глобальных объектов. Например:

$.each([1, 2, 3], function () {

document.write(this + 1);

});


добавит на страницу 234.

Пример добавления к элементу обработчика события click с помощью jQuery:

jQuery(function ($) {

$("a").click(function () {

alert("Hello world!");

});

});


В данном случае при нажатии на элемент <a> происходит вызов alert("Hello world!").


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

  1. Задания лабораторной работы и их реализации

  1. Приветствие

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

html-файл:

<body onload="window.alert('Здравствуйте!'); //...

body>

  1. Цифровые часы и статический календарь

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

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

JavaScript:

function Timer() {

var today = new Date();

var h = today.getHours();

var m = today.getMinutes();

var s = today.getSeconds();

// add a zero in front of numbers<10

m = checkTime(m);

s = checkTime(s);

document.getElementById('timer').innerHTML = h + ":" + m + ":" + s;

t = setTimeout('Timer()', 1000);

}

function checkTime(i) {

if (i < 10) {

i = "0" + i;

}

return i;

}


function Calendar() {

var today = new Date();

var year = today.getFullYear();

var day = today.getDate();

var month = today.getMonth();

day = checkTime(day);

month = checkTime(month);

document.getElementById('calendar').innerHTML = "Сегодняшняя дата: " + day + "." + month + "." + year;

}


function TimerAndCalendar() {

Timer();

Calendar();

}



html-файл:


<div id="timer">

div>


<div id="calendar">

div>

  1. Клиентский скрипт с рядом вопросов

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



JavaScript:

var question1;

function loadTest()

{

var number1 = Math.floor(Math.random()*20+1);

var number2 = Math.floor(Math.random() * 20 + 1);

question1 = number1 + "+" + number2

document.getElementById('question1').innerHTML = question1;

number1 = Math.floor(Math.random()*20+1);

number2 = Math.floor(Math.random()*20+1);

document.getElementById('question2').innerHTML = number1 + "-" + number2;

number1 = Math.floor(Math.random() * 20 + 1);

number2 = Math.floor(Math.random() * 20 + 1);

document.getElementById('question3').innerHTML = number1 + "*" + number2;


}



function ArithmeticTest() {

var correctAnswersNumber = 0;

answer1 = document.getElementById('answer1').value;

answer2 = document.getElementById('answer2').value;

answer3 = document.getElementById('answer3').value;

if (answer1 == "")

alert("На 1 вопрос не был дан ответ");

if (answer2 == "")

alert("На 2 вопрос не был дан ответ");

if (answer3 == "")

alert("На 3 вопрос не был дан ответ");


if (answer1 == eval(question1).toString() ||

answer2 == eval(question2).toString() ||

answer3 == eval(question3).toString())

CreateWindow(true);

else

CreateWindow(false);


}


function CreateWindow(right) {

var newwindow2 = window.open('', 'Результат', 'height=200,width=200');

var tmp = newwindow2.document;

tmp.write('</span></font></font></font><font color="#800000"><font face="Consolas, serif"><font size="2" class="CL_12">Результат</font></font></font><font color="#800000"><font face="Consolas, serif"><font size="2" class="CL_12"><span lang="en-US">');

tmp.write('');

if (right)

tmp.write('

Все правильно!
');

else

tmp.write('

Не все ответы правильные
');

tmp.write('

Закрыть

');

tmp.write('');

tmp.close();

}



html-файл:

<form action="JavaScript:ArithmeticTest()">

Тест:

<div id="question1">

div>

<input id="answer1" type="text""/>

<div id="question2">

div>

<input id ="answer2" type="text""/>

<div id="question3">

div>

<input id ="answer3" type="text""/>

<div>

<input type="submit">

div>

div>

  1. «Плавающий» рекламный слой

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

JavaScript

function MovingBanner(progress,right) {

banner = document.getElementById("MovingBanner");

if (progress > banner.parentNode.offsetWidth - banner.offsetWidth)

right = false;

if (progress < 0)

right = true;

if (right)

progress += 10;

else

progress -= 10;


banner.style.left = progress + "px";

setTimeout(function () { MovingBanner(progress,right); }, 100);

}

html-файл:

<form action="JavaScript:ArithmeticTest()">

Тест:

<div id="question1">

div>

<input id="answer1" type="text""/>

<div id="question2">

div>

<input id ="answer2" type="text""/>

<div id="question3">

div>

<input id ="answer3" type="text""/>

<div>

<input type="submit">

div>

div>


<div id="MovingBannerContainer">

<div id="MovingBanner">

Движущийся баннер

div>

div>


CSS:


div#MovingBannerContainer

{

background-color: #FF0000;

width: 900px;

}

div#MovingBanner

{

border-style: solid;

border-width: medium;

background-color: #00FF00;

color: #0000FF;

width: 300px;

line-height: 50px;

vertical-align: bottom;

text-align: center;

position: relative;

left: 100px;

}



  1. Отображение полного абцзаца текста и сокращенной версии

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

JavaScript

function showFull(preview) {

shortAndFull = preview.getElementsByTagName('*');

short = shortAndFull[0];

short.style.display = "none";

full = shortAndFull[1];

full.style.display = "block";

}


function showShort(preview) {

shortAndFull = preview.getElementsByTagName('*');

short = shortAndFull[0];

short.style.display = "block";

full = shortAndFull[1];

full.style.display = "none";

}

html-файл:

<div class="preview" onmouseover="showFull(this)" onmouseout="showShort(this)">

<div class='short'>

Наведите курсором, чтобы текст изменился

div>

<div class='full' dir=rtl>

Отведите курсор, чтобы текст снова изменился

div>

div>








Чтобы не видеть здесь видео-рекламу достаточно стать зарегистрированным пользователем.
Чтобы не видеть никакую рекламу на сайте, нужно стать VIP-пользователем.
Это можно сделать совершенно бесплатно. Читайте подробности тут.