
- •Лабораторная работа №_
- •Теоретические сведения.
- •Счетчик посещений странички
- •Ваш браузер уже 1 раз(а). Добро пожаловать на страничку!
- •Информация о посетителе странички
- •Отображение координат мышки
- •Выежающие полоски справа и слева
- •Цвет фона
- •Просмотр исходника html документа
- •Прокрутка странички
- •Защита странички паролем на ява скрипте для всех браузеров
- •Сообщение всегда на экране
- •Фраза дня
Фраза дня
Описание: Скрипт позволяет выводить каждый день разный текст. Можно использовать как "Анекдот дня"
Демонстрация: Приходите завтра и здесь будет другой текст. Или измените дату вашего компьютера и обновите страницу.
Текст на воскресенье
Установка: Шаг 1.: Вставьте этот код в ваш файл где нужно отобразить текст:
Начало формы
<script language="JavaScript"><!--
/*
By Dynamic Web Design (www.dynamic-design.com.ua)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit http://www.dynamic-design.com.ua/develop/
*/
nowDate=new Date();
theDay=nowDate.getDay();
text=new Array(30);
text[0]="Текст на воскресенье";
text[1]="Текст на понедельник";
text[2]="Текст на вторник";
text[3]="Текст на среду";
text[4]="Текст на четверг";
text[5]="Текст на пятницу";
text[6]="Текст на субботу";
document.write(text[theDay]);
//--></script>
Начало формы
коллекция Java Applet'ов:
http://homejungle.km.ru/JA/Java/Java.htm
http://www.megalink.ru/~java/japplets.html
Создание калькулятора, который выполняет простейшие арифметические операции. Калькулятор будет содержать следующие поля:
поле для ввода первого числа;
поле для ввода второго числа;
кнопку, по нажатии на которую производится сложение двух чисел, указанных в предыдущих полях;
поле для вывода результата;
Такие элементы, как поля для ввода текста, кнопки, выпадающие списки, флажки указываются внутри тега <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 указывает, какая функция должна быть вызвана по нажатии кнопки.
Программирование простейшего калькулятора.
Вначале сформируем тело страницы — в разделе body заведите форму, назовите ее form1.
Внутри формы укажите три текстовых поля, присвойте им следующие имена:
value1
value2
result
Между текстовыми полями value1 и value2 поместите кнопку, назначьте ей следующие свойства: name="button1" value=" + " onClick="func_sum()"
В head-раздел Вашего HTML-документа внесите следующий скрипт: <script language="JavaScript"> function func_sum() { document.form1.result.value = eval(document.form1.value1.value + "+" + document.form1.value2.value); } </script>
При помощи элемента ввода select реализуйте изменение фона документа.
Сохраните созданный документ, откройте его в браузере и проверьте работоспособность скрипта.
Программирование дополнительной функциональности. Усовершенствуйте созданный калькулятор:
Добавьте кнопку " - ", привяжите к ней метод, который вычисляет разность значений, введенных в поля value1 и value2;
Измените созданную функциональность таким образом, чтобы на странице использовалось только одно текстовое поле.
Программирование простейшего калькулятора.
Вначале сформируем тело страницы — в разделе body заведите форму, назовите ее form1.
Внутри формы укажите три текстовых поля, присвойте им следующие имена:
value1
value2
result
Между текстовыми полями value1 и value2 поместите кнопку, назначьте ей следующие свойства: name="button1" value=" + " onClick="func_sum()"
В head-раздел Вашего HTML-документа внесите следующий скрипт: <script language="JavaScript"> function func_sum() { document.form1.result.value = eval(document.form1.value1.value + "+" + document.form1.value2.value); } </script>
При помощи элемента ввода select реализуйте изменение фона документа.
Сохраните созданный документ, откройте его в браузере и проверьте работоспособность скрипта.
Программирование дополнительной функциональности. Усовершенствуйте созданный калькулятор:
Добавьте кнопку " - ", привяжите к ней метод, который вычисляет разность значений, введенных в поля value1 и value2;
Измените созданную функциональность таким образом, чтобы на странице использовалось только одно текстовое поле. Конец формы
Начало формы
Конец формы
Ход работы:
На примерах ознакомится с основами языка JavaScript;
использовать примеры скриптов при разработке собствен. Web-страниц