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()е


 

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

76608. Восстановление зараженных файлов 2.63 MB
  Приобрести практические навыки по восстановлению файлов офисных приложений зараженных макровирусами. Краткие теоретические сведения Макровирусы заражают файлыдокументы и электронные таблицы популярных офисных приложений. Для анализа макровирусов необходимо получить текст их макросов.
76609. Профилактика компьютера от «троянских программ» 195 KB
  Ознакомиться с основными возможностями «системного реестра» операционной системы Windows 2000 (ХР) по настройке параметров безопасности. Изучить последовательность операций по проверке потенциальных мест размещения вирусов в ОС Windows 2000 (ХР).
76610. Настройка безопасности почтового клиента Outlook Express 282 KB
  Приобрести практические навыки по защите компьютера при работе с электронной почтой. Краткие теоретические сведения Почтовый клиент это программа предназначенная для приема и отправки электронной почты. Для работы с электронной почтой почтовый клиент должен поддерживать протоколы SMTP исходящая почта и POP3 входящая почта.
76611. Настройка параметров аутентификации Windows 2000 (ХР) 144.5 KB
  Определяет число новых паролей которые должны быть сопоставлены учетной записи пользователя прежде чем можно будет снова использовать старый пароль. Определяет период времени в днях в течение которого можно использовать пароль прежде чем система потребует от пользователя заменить его. Минимальный срок действия пароля Определяет период времени в днях в течение которого необходимо использовать пароль прежде чем пользователь сможет заменить его. Определяет наименьшее число символов которые может содержать пароль учетной записи...
76612. Екатерина II. Просвещенный абсолютизм 33.5 KB
  Екатерина II стремилась построить законную самодержавную монархию обновить ее с учетом новых исторических реалий а не вводить конституционный демократический строй как этого хотели просветители. Большое внимание Екатерина II уделяла совершенствованию законодательства. Екатерина написала для комиссии Наказ в котором обосновала основные принципы политики просвещенного абсолютизма. Екатерина II положила начало крупнейшему музею мира Эрмитажу.
76613. Зарождение либеральной и революционной идеи в России 18 века 29.5 KB
  Русский либерализм одна из значимых тенденций общественной мысли в России. Либерализм в России возник как идеология в период кризиса феодальнокрепостнического строя конец 18 1я половина 19 в. Его появление обусловлено включением России в широкий общеевропейский контекст приобщением высших слоев общества к европейской образованности утверждением идеалов просвещения внедрением идеи общественного договора и т.
76614. Россия и мир в 19 веке. Попытки модернизации и промышленный переворот. Развитие россии при Александре 1 30 KB
  Александр 1 – сын императора Павла I и княгини Марии Фёдоровны, внук Екатерины 2. Родился 23 декабря 1777 г. С самого раннего детства он начал жить у бабушки, которая хотела воспитать из него хорошего государя. После смерти Екатерины на престол вошел Павел
76615. Декабризм. Исторические условия, предпосылки, программы, тактика 28.5 KB
  Серьезное влияние на становление взглядов будущих декабристов оказали идеи западных национально-освободительных движений русская публицистика и просветительская литература. Таким образом можно выделить следующие важнейшие причины восстания декабристов. Несмотря на то что далеко не все было готово заговорщики решили действовать и восстание декабристов произошло в 1825 г. Но Николай 1 был предупрежден о том что готовится восстание декабристов на Сенатской площади.
76616. Николай 1. Западничество и славянофильство 35 KB
  Либеральная мысль в России разделилась на два идейных течения оппозиционных политике Николая I славянофилы и западники. Западники придерживались идеи о том что Россия принадлежит к европейской цивилизации и следовательно путь ее развития проходит по тем же рельсам по которым уже прошла Европа. Западники напротив верили в единство человеческой цивилизации и полагали что Россия стала цивилизованным государством лишь со времен Петра Великого благодаря именно реформам Петра. С особенным интересом западники следили за умственным...