4328

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

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

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

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

Русский

2012-11-16

113.5 KB

19 чел.

Цель работы: Получить практические навыки работы в виртуальной среде. Изучить основы языка 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()е


 

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

16103. Органи державної влади України 3.44 MB
  Найбільша увага приділяється проблемам органів законодавчої влади в механізмі здійснення державної влади та проблемам органів виконавчої і судової влади, їх структури, функцій та форм діяльності, здійсненню парламентської, адміністративної і судової реформ.
16104. Право соціального забезпечення 2.21 MB
  У навчальному посібнику на основі чинного законодавства України та відповідно до програми курсу «Право соціального забезпечення» розглядаються питання правового регулювання соціального захисту громадян в Україні.
16105. Виявлення та ліквідація підпільних лабораторій з виготовлення наркотичних засобів та психотропних речовин 168 KB
  Г. В. Пасічник М С. Хруппа В. М. Жмінько та ін. Виявлення та ліквідація підпільних лабораторій з виготовлення наркотичних засобів та психотропних речовин: Метод. рекомендації. К.: РВВ МВС України 2000. 35 с. У методичних рекомендациях дано кримінолопчне визначення понят
16106. Українська державність у 1917-1919рр 1.57 MB
  У книзі висвітлюється історія формування, розвитку та падіння першої у XX ст. Української держави, пов’язаних з цим соціальних процесів, культурних перетворень та політичних подій. Головна увага приділяється розгляду періоду гетьманування П. Скоропадського, під час якого Україна перетворилася на справжній державний органам з усіма властивими йому ознаками та атрибутами
16107. Адміністративна діяльність: Навчальний посібник 167 KB
  Забезпечення належного громадського порядку в країні, який відповідав би вимогам сучасного періоду, є однією з важливих функцій держави. У здійсненні цієї функції беруть участь всі державні органи, посадові особи та громадяни. Важлива роль у забезпеченні виконання цієї функції відводиться органам внутрішніх справ, для яких, згідно з їх правовим положенням, громадський порядок в країні - є головне завдання
16108. Кримінальне право України 2.01 MB
  Як самостійна галузь права кримінальне право являє собою сукупність юридично закріплених норм, що визначають загальні принципи, умови і підставу кримінальної відповідальності й покарання, а також встановлюють, які суспільно небезпечні діяння є злочинними і які види та межі покарань застосовуються до осіб, що їх вчинили
16109. Основи адміністративного менеджменту 3.21 MB
  Подано матеріал з основ управлінської діяльності і, зокрема, про особливості адміністративно-державного управління. Розглянуто основні функції управління, питання прийняття стратегічних рішень. Висвітлено систему та сучасний досвід адміністративно-державного управління у країнах з федеральною (Німеччина, США) та унітарною (Франція, Великобританія) формою державного устрою. Розглянуто перспективи формування української школи державного адміністрування.
16110. Комерційне право 2.84 MB
  Книга загострює увагу на найбільш актуальних проблемах підприємництва, спрямована на поєднання в процесі навчання теорії і практики. Практикум містить методичні вказівки для підготовки та проведення занять з курсу «Комерційне право», практичні поради, ситуаційні завдання, основою яких є реальні судові прецеденти...
16111. ОСНОВИ КРИМІНАЛЬНО-ПРАВОВОЇ КВАЛІФІКАЦІЇ 2.72 MB
  Аналізуються загальні положення кримінально-правової кваліфікації - її поняття, підстави та принципи, а також питання кваліфікації окремих типів діянь, передбачених Кримінальним кодексом України - кваліфікації злочинів, з урахуванням стадії їх вчинення, вчинених у співучасті, множинності злочинів тощо.