4328

Модификация персонального сайта студента с использованием Javascript

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

Информатика, кибернетика и программирование

Цель работы: Получить практические навыки работы в виртуальной среде. Изучить основы языка JScript. Программное обеспечение Для выполнения лабораторной работы необходимо следующее ПО: Редактор HTML документов (желательно HomeSite 4.5 и выше)...

Русский

2012-11-16

113.5 KB

20 чел.

Цель работы: Получить практические навыки работы в виртуальной среде. Изучить основы языка JScript.

Программное обеспечение

Для выполнения лабораторной работы необходимо следующее ПО:

  1.  Редактор HTML документов (желательно HomeSite 4.5 и выше)
  2.  Графический редактор (желательно Adobe Photoshop 5.5 и выше)
  3.  Файловый менеджер (желательно Windows Commander 4.0 и выше)
  4.  Браузер (желательно Internet Explorer 5.0 и выше)

Теоретические сведения. JavaScript в HTML

Основные тезисы:

  1.  Не тоже самое, что и Java, хотя синтаксис немного схож.
  2.  Скриптовый (облегченный) интерпретируемый язык без строгой типизации.
  3.  Внедряется в HTML-код тэгом <SCRIPT>
  4.  Поддерживается всеми основными браузерами.

Что можно делать с помощью JavaScript:

  •  Динамически вставлять текст в HTML-код оператором:
    •  document.write("<h1>" + name + "</h1>")
  •  Программно реагировать на события
    •  например, при нажатии кнопки или подведении курсора на ссылку
  •  Получать и изменять состояние HTML-элементов
    •  например, можно изменить размер шрифта при нажатии на кнопку
  •  Проверять корректность форм
  •  Определять тип браузера и перейти страницу, адаптированную под конкретный браузер

Простой пример:

<html><head>…</head><body>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body></html>

Внедрение JavaScript в HTML

Варианты внедрения:

  •  <SCRIPT> внутри <HEAD>:

<html>

<head>

<script type="text/javascript">

....

</script>

</head>

  •  <SCRIPT> внутри <BODY> (можно генерировать HTML)
  •  Из внешнего файла:

<html>

<head>

<script type="text/javascript" src="xxx.js"></script>

</head>

<body>

  •  В специальных атрибутах HTML-тэгов – обработчиках событий:
    •  общие для всех: onClick, onDblClick, onMouseOver (вход), onMouseOut (выход), onKeyPress
    •  специфичные для элементов: onFocus, onBlur, onSelect, onChange
    •  например: <INPUT TYPE='submit' ONMOUSEOVER='window.status="Вы заполнили все поля?";' ONMOUSEOUT='window.status="";'>

Основы синтаксиса

  •  Точки с запятой необязательны.
  •  Регистр важен.
  •  Комментарии: // и /* … */
  •  Переменные создаются так: var var = value или просто var = value. Объявленные переменные внутри функций с помощью var будут локальными, иначе – глобальными.
  •  Типы: целый, вещественный, строковый, логическая, объектный.

Операторы:

  •  +, -, *, /, %, ++, --
  •  ==, !=, <, >, <=, >=
  •  =, +=, -=, *=, /=, %=
  •  &&, ||, !
  •  + (конкатенация): document.write('x=' + 5 + "!")

Функции:

  •  Вызов: alert(‘Hello, world!’)
  •  Объявление: function myfunc(var1, …) {….[return value]…}

Условия:

  •  if (…) …;
  •  if (…) … else …
  •  switch(…) {case value1: …; break; … default:….;}
  •  var = expr?value1:value2

Циклы:

  •  while (…) ….
  •  do {…} while(…)
  •  for (…; …; …) …

Объекты:

  •  Создание: o = new Object(….)
  •  Свойства: str.length, document.forms[0]
  •  Методы: str.substring(0,3)

Встроенные объекты JavaScript

  •  String:
    •  поля и методы: length, indexOf(), substring(), toLowerCase(), toUpperCase()
  •  Array:
    •  инициализация: var myarr = new Array(1,2,3), myarr2 = new Array(N); myarr[0] = 3;
    •  поля и методы: length, sort(), join(delim), push(el1,…), …
  •  Date:
    •  например, alert(new Date().getMonth());
  •  Math:
    •  Math.random(), Math.sin(…)…

HTML Document Object Model

Набор объектов, их методов и свойств, доступных JavaScript, внедренном в HTML, стандартизирован W3C и этот стандарт называется HTML DOM. С помощью HTML DOM можно получать и изменять свойства HTML-элементов страницы, открывать новые окна, изменять текущую страницу и проч.

Пример использования HTML DOM:

<html><head>

<script type="text/javascript">

function ChangeColor()

{

document.body.bgColor="yellow"

}

</script></head>

<body onclick="ChangeColor()">

Кликните!

</body></html>

Объекты браузера:

  •  window (тип Window) – окно браузера:
    •  методы: alert(), confirm(), prompt(), open(), close(), print(), setTimeout(‘javascript…’, ms)
    •  свойства: status, opener (окно, открывшее данное)
    •  свойство document (тип Document) – корень все структуры HTML-документа:
      •  свойства: bgColor, fgColor, linkColor, title, anchors[], forms[], images[]
      •  методы: write/writeln(), getElementById(id), getElementsByName(name)
    •  свойство history (тип History):
      •  свойства: length
      •  методы: back(), forward(), go(n)
    •  свойство location (тип Location):
      •  свойства: href
      •  методы: reload()
    •  screen (нестандартный тип Screen):
      •  свойства: colorDepth, height, width
  •  event (тип Event, доступен только в обработчиках событий типа onClick):
    •  clientX, clientY (координаты мыши)
    •  keyCode (код нажатой клавиши)
    •  button (0 – нет нажатия, 1 – левая, 2 – правая, …)
    •  srcElement (элемент, с которым ассоциировано событие)
    •  type (тип события: ‘mousedown’, …)

К document можно обращаться опуская префикс window.

HTML-элементы и поле STYLE в HTML DOM

Кроме перечисленных объектов window, document, history и проч. имеются также объекты, соответствующие HTML-элементам: anchor (ссылка), image (изображение), table (таблица) и проч. Эти элементы можно получить через window.document (например, с помощью window.document.getElementById). У document и всех этих объектов есть свойство style (тип Style), с помощью которого можно изменить любые стили отображения элемента: цвет, размер шрифта, отступы и проч. Эти стили практически совпадают с CSS-стилями, только в названиях нет «-» (например, paddingLeft).

Примеры

1. Изменение цвета заголовка при клике по нему

<h1 id=header onclick="document.getElementById(‘header’).style.color='red'">Нажмите здесь</h1>

2. То же самое, только изменение цвета вынесено в отдельную функцию

<script type="text/javascript">

function changecolor() {

document.getElementById('header').style.color="red"

}

</script>

<h1 id="header" onclick="changecolor()">Нажмите здесь</h1>

3. Выводит текущий день недели прямо в HTML:

<script type="text/javascript">

var d=new Date()

theDay=d.getDay() // вскр=0, пон=1, втр=2…

switch (theDay) {

case 5:  document.write("Пятница");  break

case 6:  document.write("Субота");  break;

case 0:  document.write("Воскресенье");  break;

default:  document.write("Раб.день");}

</script>

4. Изменение изображения при нажатии на кнопку

<script type="text/javascript">

function setSrc()

{

var x=document.images

x[0].src="hackanm.gif"

}

</script><img src="compman.gif" width="107" height="98">

<form>

<input type="button" onclick="setSrc()" value="Изменить изображение">

</form>

5. Вывод окна с сообщений при нажатии на кнопку

<input type="button" onclick="window.alert('Нажали!')" value="Вывести окно">

6. Переход на другую страницу при нажатии на кнопку

<input type=button onclick="document.location.href='http://edu.krasu.ru/'" value="открыть edu.krasu.ru">

7. Разворачивающееся-сворачивающееся меню

<style>

.submenu {

visibility:hidden;

 position:absolute;  // если этого не сделать, то подменю видно не будет, но место будет зарезервировано

}

</style>

<body>

<script type="text/javascript">

function show_hide(id)

{

style = document.getElementById(id).style;

if (style.visibility == 'visible')

{

 style.visibility = 'hidden';

 style.position = 'absolute';

}

else

{

 style.visibility = 'visible';

 style.position = 'static';

}

}

</script>

<a href=# onClick="show_hide('ch1')">+</a> Часть 1<br>

<div id=ch1 class= submenu>

 <a href="1_1.html">Параграф 1.1</a><br>

 <a href="1_2.html">Параграф 1.2</a>

</div>

<a href=# onClick="show_hide('ch2')">+</a> Часть 2<br>

<div id=ch2 class= submenu>

 <a href="2_1.html">Параграф 2.1</a><br>

 <a href="2_2.html">Параграф 2.2</a><br>

 <a href="2_3.html">Параграф 2.3</a>

</div>

DHTML

DHTML = HTML + JavaScript + DOM HTML + CSS

Задание

  1.  Анимировать графическое меню. Меню, осуществляющее навигацию между разделами сайта, должно быть анимировано средствами Javascript. Анимация заключается в изменении цвета пункта меню при наведении на него курсора мыши. После того, как курсор убран, пункт меню должен восстанавливать свой цвет.

Для осуществления анимации необходимо изготовить второй комплект графических изображений элементов меню, причем цвет элементов второго комплекта должен отличаться от цвета элементов первого комплекта (изготовленного в ходе л/р №1-2).

При наведении курсора мыши на пункт меню, графическое изображение пункта, входящее в состав первого комплекта, должно заменяться на соответствующее графическое изображение из второго комплекта. Когда курсор убран с пункта меню, должна производиться обратная замена.

  1.  Заполнить таблицу изображений. В таблицу изображений (заполненную в ходе л/р №1-2) необходимо добавить сведения о втором комплекте графических изображений пунктов меню.

№ п/п

Название файла

Длина изображения

Ширина

изображения

Размер файла (кб)

Присутствует в документах (номера из табл. документов)

  1.  Проверить правильность заполнения формы (подготовленной в ходе л/р №1-2)на стороне броузера с помощью функции на JavaScript или VBScript. Форма должна содержать хотя бы параметры типа число и дата.
  2.  Включить на одну из страниц сайта апплет (см Примеры)

Отчет

Отчет о выполнении лабораторной работы должен содержать следующие разделы:

  1.  Титульный лист
  2.  Таблицу изображений
  3.  Описание стилей
  4.  Текст одного HTML документа, содержащего скрипт анимированного меню (по выбору студентов)

Защита


     
Для защиты необходимо предоставить отчет о выполнении лабораторной работы и продемонстрировать версию сайта с элементами Javascript.

     Демонстрация работоспособности сайта осуществляется на рабочей станции дисплейного класса путем загрузки страниц сайта из папки студента программой просмотра страниц (браузером).

Пример

  1.  Текст файла res.html (в примере анимирована одна кнопка меню)

<html>

<head>

<title>Персональный сайт Иванова И.И. Резюме</title>

<link href="img/styles.css" rel="stylesheet">

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

<meta name="keywords" content="Иванов, персональный сайт, резюме">

</head>

<body bgcolor="#CCCCCC">

<script language="Javascript">

<!--

// инициализация массивов, содержащих имена файлов

 var PassivePictures=new Array(1);

 var ActivePictures=new Array(1);

// заполнение массивов

 ActivePictures[0]="img/res2.gif";

 PassivePictures[0]="img/res.gif";

// функция замены изображений

function Change(button,param,type) {

 if (type=="act") button.src=ActivePictures[param];

 else button.src=PassivePictures[param];

}

-->

</script>

<center><span class="title">Резюме</span></center>

<hr size="1" width="100%">

<table width="100%" cellspacing="10" cellpadding="0" border="0">

<tr>

 <td width="200" valign="top">

  <a href="res.html"><img src="img/res.gif" width="157" height="47" alt="Резюме" border="0" onmouseover="Change(this,0,'act')" onmouseout="Change(this,0,'pas')"></a><br><br>

  <a href="#"><img src="img/bio.gif" width="157" height="47" alt="Биография" border="0"></a><br><br>

  <a href="#"><img src="img/proj.gif" width="157" height="47" alt="Проекты" border="0"></a>

 </td>

 <td>

  <table width="100%" cellspacing="0" cellpadding="0" border="0">

   <tr>

 <td class="normal">

  <span class="bold">Ф.И.О:</span> Иванов Иван Иванович<br>

     <span class="bold">Дата рождения:</span> 1 января 1970г.<br>

     <span class="bold">Семейное положение:</span> холост<br>

     <span class="bold">Домашний телефон:</span> 111-11-11<br>

     <span class="bold">E-mail:</span> ivanov@mail.ru<br><br>

     <span class="subtitle">Образование</span><br>

     Иркутский государственный университет, филиал в г.Братске(БФ ИГУ).<br>

  <span class="bold">Специальность:</span> Прикладная информатика в экономике.<<br><br>

     <span class="subtitle">Опыт работы</span><br>

     1995-2004 ООО "СуперСофт"<br>

     <span class="bold">Должность:</span> системный администратор<br><br>

     <span class="subtitle">Профессиональные навыки</span><br>

     <span class="bold">ОС:</span> MS Windows 9x/2000/XP, UNIX<br>

     <span class="bold">Языки программирования:</span>  C/С++, Visual Basic<br>

     <span class="bold">Программные продукты:</span> MS Office, MS Visio<br><br>

     <span class="subtitle">Дополнительные сведения</span><br>

     <span class="bold">Личные качества:</span> аккуратность, педантичность, обучаемость<br>

     <span class="bold">Увлечения:</span> музыка, литература, спорт, компьютерные игры<br>

     <span class="bold">Прочее:</span> Английский язык (технический)

 </td>

</tr>

  </table>

 </td>

</tr>

</table>

</body>

</html>

2. Пример проверки правильности заполнения формы на стороне браузера.

<HTML>

<HEAD>

<TITLE>Проверка формы</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

//Скрываем от броузеров, не поддерживающих JavaScript

function JavaScriptCheckForm() {

var flag = true;

var TempDate;

 

document.all["MESSAGE"].innerHTML = "";

if(isNaN(form1["NumberFld"].value)) {

 document.all["MESSAGE"].innerHTML += "<HR>Необходимо ввести число (JavaScript)<HR>"

 flag=false;

}

// Замена "." на "/"

TempDate = document.form1["DateFld"].value;

TempDate = TempDate.replace('.','/');

TempDate = TempDate.replace('.','/');

if(isNaN(new Date(TempDate))) {

 document.all["MESSAGE"].innerHTML += "<HR>Необходимо ввести дату (JavaScript)<HR>"

 flag=false;

}

//Запретить отправку формы в случае ее неправильного заполнения

//Если броузер не поддерживает клиентские сценарии, форма

//будет отправлена на сервер и проверена на серверной стороне.

//Данный вариант является предпочтительным

 if(!flag) event.returnValue=false;

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<FORM METHOD="GET" ACTION="script.asp" name="form1" Target="_blank" onsubmit="JavaScriptCheckForm()">

Введите число: <INPUT TYPE="text" NAME="NumberFld" Size="10"><br>

Введите дату: <INPUT TYPE="text" NAME="DateFld" Size="10"><br>

<DIV ID="MESSAGE"></DIV><br>

<INPUT TYPE="submit" VALUE="Проверка (JavaScript)">

<INPUT TYPE="reset" VALUE="Очистить форму">

</FORM>

</BODY>

</HTML>

3. Создать калькулятор, который выполняет простейшие арифметические операции.

Наш калькулятор будет содержать следующие поля:

  •  поле для ввода первого числа;
  •  поле для ввода второго числа;
  •  кнопку, по нажатии на которую производится сложение двух чисел, указанных в предыдущих полях;
  •  поле для вывода результата;

Такие элементы, как поля для ввода текста, кнопки, выпадающие списки, флажки указываются внутри тега <form></form>. Например, для того, чтобы страница содержала поле для ввода текста, в ее тело необходимо поместить следующий код: <FORM NAME="form1"> <INPUT TYPE="text" NAME="field1" SIZE=12> </FORM>

В окне браузера это будет выглядеть так:

Как только вы внесли все необходимые элементы (в нашем случае это три поля для ввода текста и одна кнопка), к ним можно привязать обработчики событий, написанные на языке JavaScript.

Функции-обработчики событий записываются на той же HTML-странице внутри тега <script></script>. Документ, внутри которого записан код доступен скрипту через объект document, который имеет следующие свойства:

  •  alinkColor - отражает атрибут ALINK
  •  anchors - массив, отражающий все якоря в документе
  •  bgColor - отражает атрибут BGCOLOR
  •  cookie - определяет "ключик"
  •  fgColor - отражает атрибут TEXT
  •  forms - массив, отражающий все формы в документе
  •  lastModified - отражает дату последней модификации документа
  •  linkColor - отражает атрибут LINK
  •  links - массив, отражающий все ссылки в документе
  •  referrer - отражает URL документа, из которого вызван текущий документ
  •  title - отражает содержание тага <TITLE>
  •  URL - отражает полный URL документа
  •  vlinkColor - отражает атрибут VLINK

Следующие объекты также являются свойствами объекта document:

  •  anchor
  •  form
  •  history
  •  link

и методы:

  •  close
  •  open
  •  write
  •  writeln

Если вы обратили внимание, одним из свойств объекта document является form - контейнер, который содержит все редактируемые поля и кнопки. В свою очередь через объект form скрипт JavaScript может получить доступ к значению (или состоянию) каждого редактируемого элемента, будь то кнопка, поле для ввода текста или флажек.

Рассмотрим пример.

Внутри тега <head></head> запишем наш первый скрипт на языке JavaScript:

<script language="JavaScript">

function func1()

{

document.form1.field1.value = "Script works properly";

}

</script>

Этот скрипт будет задавать текст в поле с именем "field1", которое определено в контейнере "form1".

Теперь привяжем выполнение этого кода к какому-нибудь событию. Пусть это будет нажатие кнопки. Определим кнопку и привяжем к ней обработчик события:

<FORM NAME="form2"><INPUT TYPE="button" NAME="button2" onClick="func1()" value="Click me"></FORM>

Здесь опциональный параметр onClick указывает, какая функция должна быть вызвана по нажатии кнопки.

Ход выполнения задания 

  1.  Откройте Блокнот, сохраните текущую страницу как calc.html
  2.  Вначале сформируем тело страницы — в разделе body заведите форму, назовите ее form1.
  3.  Внутри формы укажите три текстовых поля, присвойте им следующие имена:
    •  value1
    •  value2
    •  result
  4.  Между текстовыми полями value1 и value2 поместите кнопку, назначьте ей следующие свойства:
    name="button1" value=" + " onClick="func_sum()"
  5.  В head-раздел Вашего HTML-документа внесите следующий скрипт:

<script language="JavaScript">
function func_sum()
{
document.form1.result.value = eval(document.form1.value1.value + "+" + document.form1.value2.value);
}
</script>

  1.  Сохраните созданный документ, откройте его в браузере и проверьте работоспособность скрипта.

Программирование дополнительной функциональности. 

Усовершенствуйте созданный калькулятор:

  •  Добавьте кнопку " - ", привяжите к ней метод, который вычисляет разность значений, введенных в поля value1 и value2;
    •  Измените созданную функциональность таким образом, чтобы на странице использовалось только одно текстовое поле.

Создание собственного скрипта. 

  1.  Создайте новую страницу myscript.html
  2.  Разместите на странице три элемента:
    •  Выпадающий список (задается тегом <select>)

Выглядеть он будет так:

Подробнее о свойствах этого элемента читайте:

Спецификация HTML: Элементы SELECT, OPTGROUP и OPTION

  •  Поле ввода (задается тегом <input type=text>)

Выглядеть оно будет так:

Подробнее о свойствах этого элемента читайте:

Спецификация HTML: Элемент INPUT

  •  Кнопка (задается тегом <input type=button>)

Выглядеть она будет так:

  1.  Создайте скрипт на языке JavaScript, который отрабатывает следующий сценарий:
    при нажатии на кнопку "Click me" пользователю выводится диалоговое окно, в котором выводится выбранное из выпадающего списка приветствие и имя, введенное в текстовое поле.
  2.  Измените скрипт так, чтобы приветствие, выводимое в диалоговом окне, выбиралось в зависимости от времени суток.
  3.  Совет. Используйте для этого объект Date и его метод getHours().
    Подробнее о объекте Date и его свойствах читайте
    . Найдите описание метода getHours()е


 

А также другие работы, которые могут Вас заинтересовать

75436. Давач Хола. Застосування індуктивних безконтактних вимикачів 376 KB
  Зараз знайдені матеріали, які мають досить великий коефіцієнт Холла. Давач Хола можна також використати як пристрій для підрахування кількості обертів. Давачі Холла, що їх виготовляє компанія Honeywell поділяються на лінійні та цифрові.
75437. Безконтактний ємнісний давач 283.5 KB
  В індуктивних генераторних ВПБ перетворювачем є індуктивність. У ємнісних ВПБ перетворювачем є конденсатор коливального контуру. Як і для інших типів генераторних перетворювачів основним параметром ємнісних ВПБ є максимальна відстань впливу. Через властивої ємнісний ВПБ чутливості до запилености зазору вони не знайшли такого широкого застосування як індуктивні але окремими підприємствами ведеться серійне виробництво цих вимикачів.
75438. Переваги та недоліки ємнісних давачів 263 KB
  При цьому можливий монтаж і обслуговування ВБЄ зовні резервуарів і бункерів. Можливе застосування штирових ВБЄ для контролю протікання рідини в трубах. ВБЄ застосовується також для підрахунку чи позиціонуванні різноманітних обєктів неметалевих матеріалів.
75439. Оптичні давачі. Безконтактний фотоелектричний давач 2.23 MB
  Фотодавачі складаються з джерела випромінювання фотоприймача перетворювача сигналу і підсилювача сигналу. У порівнянні з іншими типами давачів фотодавачі мають ряд переваг. Діапазон дії фотодавачів істотно перевершує індуктивні ємнісні магнітні й ультразвукові.
75440. Інфекційні захворювання 99.5 KB
  Сприйнятливість до інфекційних захворювань залежить від безлічі факторів: від віку перенесених і супутніх захворювань харчування вакцинації. За останні десятиліття в лікуванні інфекційних захворювань було зроблено величезний крок вперед. В останні роки були відкриті збудники раніше невідомих інфекційних захворювань з якими людина стикнувся в результаті зміни навколишнього середовища і міграції населення. Адже навіть просто вимиті вчасно руки після відвідин убиральні або по приходу з вулиці можуть врятувати вас від ряду кишковоінфекційних...
75441. Організація медичного захисту особового складу 219.5 KB
  Методика проведення: Штучне дихання: Потерпілого положити на тверду поверхню на спину. Однією рукою підтримують голову потерпілого в запрокинутому положенні стиснувши пальцями ніздрі другою підтримують наполовину відкритим його рот. Роблять вдих щільно прикладають рот через хустку бинт до рота потерпілого і вдувають повітря.
75442. Захист населення від надзвичайних ситуацій природного характеру. Радіаційна, хімічна і біологічна небезпека. Завдання та особливості дій підрозділів міліції 108.5 KB
  Захист населення від надзвичайних ситуацій природного характеру. Захист населення від надзвичайних ситуацій природного характеру. Засоби колективного захисту населення. Література: Закон України Про захист населення і територій від надзвичайних ситуацій техногенного та природного характеру.
75443. Єдина державна система запобігання і реагування на надзвичайні ситуації техногенного та природного характеру. Організаційна структура цивільної оборони МВС України 294 KB
  Основні завдання і рішення начальника функціональної підсистеми ОГП на проведення необхідних заходів. Основні завдання і рішення начальника функціональної підсистеми ОГП на проведення необхідних заходів. Відповідно до постанов Кабінету Міністрів України...
75444. Основні поняття про надзвичайні ситуації та оповіщення. Дії особового складу за сигналами ЦО. Небезпечні чинники виробничих аварій, їх вплив на екологічну безпеку та безпеку життя та здоров’я людей 123.5 KB
  Надзвичайний стан це особливий правовий режим який може тимчасово вводитися в Україні чи в окремих її місцевостях при виникненні надзвичайних ситуацій техногенного або природного характеру не нижче загальнодержавного рівня що призвели чи можуть призвести до людських і матеріальних втрат створюють загрозу життю і здоровю громадян або при спробі захоплення державної влади чи зміни конституційного ладу України шляхом насильства і передбачає надання відповідним органам державної влади військовому командуванню та органам місцевого...