Лабораторная работа 10 (LAB10 Апухтин М.А.)

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

НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ

МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ









Лабораторная работа по ВМСС № 10.

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





Выполнил

студент группы А-13-08

Апухтин М.А.


Преподаватель

Куриленко И.Е.


















Москва, 2012

Оглавлени



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

Выполнение работы. 4

JavaScript.htm 4












































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

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

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

JavaScript — прототипно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript.

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

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

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

head>

Вся работа с 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.

$.ajax и соответствующие функции позволяют использовать методы AJAX. Например:

$.ajax({

type: "POST",

url: "some.php",

data: {name: 'John', location: 'Boston'},

success: function(msg){

alert( "Data Saved: " + msg );

}

});


В этом примере идет обращение к скрипту some.php с параметрами name=John&location=Boston, и полученный результат выдается в сообщении посредством alert().


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

jQuery(function($) {

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

alert("Hello world!");

});

});

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

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

Выполнение работы.

JavaScript.htm

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Скриптыtitle>

<link rel="stylesheet" type="text/css" href="style.css" />

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

<script type="text/javascript">

function startTime()

{

var tm=new Date();

var h=tm.getHours();

var m=tm.getMinutes();

var s=tm.getSeconds();

m=checkTime(m);

s=checkTime(s);

document.getElementById('time').innerHTML="Текущее время: " + h+":"+m+":"+s;

t=setTimeout('startTime()',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 Trains() {

var res;

v1 = parseInt(document.getElementById('v1').value);

v2 = parseInt(document.getElementById('v2').value);

s = parseInt(document.getElementById('s').value);

if (v1 == "")

{

alert("Скорость первого поезда не указана!");

return;

}

if (v2 == "")

{

alert("Скорость второго поезда не указана!");

return;

}

if (s == "")

{

alert("Расстояние между поездами не указано!");

return;

}

res = s/(v1+v2);

CreateWindow(res);

}

function CreateWindow(res) {

var newwindow = window.open('', 'Ответ', 'height=100,width=400');

var tmp = newwindow.document;

tmp.write('</font></font></font><font color="#800000"><font face="Consolas, serif"><font size="2" class="CL_11"><span lang="ru-RU">Ответ</span></font></font></font><font color="#800000"><font face="Consolas, serif"><font size="2" class="CL_11">');

tmp.write('');

tmp.write('Поезда встретятся через: '+res+часа(ов).');

tmp.write('');

tmp.close();

}

function MoveBanner(x,goright) {

banner = document.getElementById("Banner");

if (x > 550)

goright = false;

if (x < 0)

goright = true;

if (goright)

x += 10;

else

x -= 10;


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

setTimeout(function () { MoveBanner(x,goright);}, 100);

}

function Full() {

par = document.getElementById('paragraph');

Elements = par.getElementsByTagName('*');

short = Elements[0];

short.style.display = "none";

full = Elements[1];

full.style.display = "block";

}

function Short() {

par = document.getElementById('paragraph');

Elements = par.getElementsByTagName('*');

short = Elements[0];

short.style.display = "block";

full = Elements[1];

full.style.display = "none";

}

script>

head>

<body onload="alert('Приветствие!!!'); startTime(); Calendar(); MoveBanner(0,true); Short();">

<div class="header" title="Скрипты">

Скрипты

div>

<div class="menu" title="Меню">

<ul>

<li><a href="index.htm" title="Главная">Главнаяa>li>

<li><a href="coin1.htm" title="Монета1">Сочи 25 рублейa>li>

<li><a href="coin2.htm" title="Монета2">10 рублей Воронежская областьa>li>

<li><a href="table.htm" title="Таблицы">Таблицыa>li>

<li><a href="list.htm" title="Списки">Спискиa>li>

<li><a href="layer.htm" title="Слои">Слоиa>li>

<li><a href="multimedia.htm" title="Мультимедиа">Мультимедиаa>li>

<li><a href="JavaScript.htm" title="Скрипты">Скриптыa>li>

ul>

div>

<div class="content">

<p id="time" align="center"> p>

<p id="calendar" align="center"> p>

br>

br>

<form>

<b>Задача о двух поездах, которые едут навстречу друг другу:b>

br>

br>

Скорость превого поезда:

<input id="v1" type="text">  км/ч

br>

br>

Скорость второго поезда:

<input id ="v2" type="text">  км/ч

br>

br>

Расстояние между поездами:

<input id ="s" type="text">  км

br>

br>

<div>

<input type="button" value="Вычислить" onClick="Trains();">

div>

form>

<div id="Banner">

<img src="добрый.jpg" alt="Добрый" />

div>

<div id="paragraph" onmouseover="Full()" onmouseout="Short()">

<div class='short'>

JavaScript — прототипно-ориентированный скриптовый язык программирования.

div>

<div class='full'>

JavaScript — прототипно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript.

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

Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

div>

div>

div>

body>

html>




Случайные файлы

Файл
170046.rtf
18611.rtf
69149.rtf
157388.rtf
34208.rtf




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