LAB10 Машеров Д.Е. (Лабораторная работа 10)
Описание файла
Файл "LAB10 Машеров Д.Е." внутри архива находится в папке "Лабораторная работа 10". Документ из архива "Лабораторная работа 10", который расположен в категории "". Всё это находится в предмете "вычислительные машины, системы и сети (вмсис)" из 8 семестр, которые можно найти в файловом архиве НИУ «МЭИ» . Не смотря на прямую связь этого архива с НИУ «МЭИ» , его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "вычислительные машины, системы и сети (вмсс)" в общих файлах.
Онлайн просмотр документа "LAB10 Машеров Д.Е."
Текст из документа "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
-
Основные понятия
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!");
});
});
В данном случае при нажатии на элемент происходит вызов alert("Hello world!").
jQuery UI — библиотека JavaScript с открытым исходным кодом для создания насыщенного пользовательского интерфейса в веб-приложениях, часть проекта jQuery. Построена поверх главной библиотеки jQuery и предоставляет разработчику упрощенный доступ к её функциям взаимодействия, анимации и эффектов, а также набор виджетов.
-
Задания лабораторной работы и их реализации
-
Приветствие
Дополнить одну из разработанных ранее страниц Java-скриптом, перехватывающим событие onload и показывающим сообщение с приветствием.
html-файл:
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-файл:
-
Клиентский скрипт с рядом вопросов
Добавить страницу с клиентским скриптом, задающим пользователю ряд вопросов и генерирующим на основе его ответов страницу в новом окне.
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('Результат');
tmp.write('');
if (right)
tmp.write('Все правильно!');
else
tmp.write('Не все ответы правильные');
tmp.write('
Закрыть
');tmp.write('');
tmp.close();
}
html-файл:
-
«Плавающий» рекламный слой
Добавить на страницу «плавающий» (от границы к границе) рекламный слой.
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-файл:
Движущийся баннер
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;
}
-
Отображение полного абцзаца текста и сокращенной версии
Добавить на страницу скрипт обеспечивающий отображение полного абзаца текста при наведении мыши на его сокращенную версию.
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-файл:
Наведите курсором, чтобы текст изменился
Отведите курсор, чтобы текст снова изменился