LAB10 Машеров Д.Е. (544765)
Текст из файла
Национальный исследовательский институт
Московский Энергетический Институт (Технический Университет)
Институт автоматики и вычислительной техники
Кафедра Прикладной математики
Лабораторная работа №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-файл:
Наведите курсором, чтобы текст изменился
Отведите курсор, чтобы текст снова изменился
Характеристики
Тип файла документ
Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.
Будьте внимательны на мобильных устройствах, так как там используются упрощённый функционал даже в официальном приложении от Microsoft, поэтому для просмотра скачивайте PDF-версию. А если нужно редактировать файл, то используйте оригинальный файл.
Файлы такого типа обычно разбиты на страницы, а текст может быть форматированным (жирный, курсив, выбор шрифта, таблицы и т.п.), а также в него можно добавлять изображения. Формат идеально подходит для рефератов, докладов и РПЗ курсовых проектов, которые необходимо распечатать. Кстати перед печатью также сохраняйте файл в PDF, так как принтер может начудить со шрифтами.