Файловый архив студентов. Файловый архив студентов.
1300 вузов, 5062 предметов.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Белорусский государственный университет
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Веб программирование.doc
Скачиваний:
0
Добавлен:
02.02.2020
Размер:
6.88 Mб
Скачать
☆
►Содержание►

Лабораторная работа 5 (4 ч). Динамика и JavaScript на веб-странице

Чтобы добавить сценарий JavaScript в документ, используются дескрипторы <script> </script>. Скрипты могут размещаться во всех частях документа HTML или в отдельном файле с расширением js. Например, в каталоге jspr помещается файл pr.js, содержащий код JavaScript без ограничивающих тегов <script> </script>:

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

Скрипт можно разместить в дескрипторе HTML. Эта конструкция называется обработчиком события. Событие при этом представляет собой указатель на функцию-обработчик события, который вызывается при возникновении события. Пример:

<!-- Использование кнопки и события jsLab0-->

<!—Проверка типа и версии браузера -->

<html> <body>

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

<form>

//При нажатии на кнопку "click me" появляется диалоговое окно

<input type = "button" value = "click me" onclick = "window.alert(' Hello users!')">

</form>

//При ннажатию по гиперссылке "click me"

<a href = "pr3.htm" onclick = "alert('Links clicked')"> click me</a>

<h1 >Проверка типа браузера</h1>

<p><hr>

<form >

<input type = button name = browser value = Browser

onClick = "alert(window.navigator.appName+navigator.appVersion)">

</form>

</body></html>

Имя и версия браузера в примере возвращаются в окне alert() через свойства navigator.appName и navigator.appVersion после нажатия кнопки "Browser".

Задания на JavaScript:

  1. Ответьте на следующие вопросы:

    1. Какая из секций документа подходит для вставки кода JavaScript?

    2. Как подключить внешний код скрипта "xxx.js"?

    3. Как вывести строку «Hello» в окно alert и другие диалоговые окна?

    4. Сколько различных видов циклов используется в JavaScript?

    5. Какие два способа существуют для записи массива JavaScript?

    6. Как вывести сообщение в окно статуса браузера?

1.7 Какого рода информация в приведенном ниже HTML-дескрипторе будет передана обработчиком события?

<input type = "text" name = "phone" onchange = "format(this.value)">

  1. Создайте html-документ. Поместить туда текст «Добро пожаловать на сайт!» c помощью директивы document.write(). Вывести строку «Hello World» в диалоговые окна alert ("string") и confirm(("string"). Добавить на страницу комментарии

<!--This is a comment-->

//This is a comment

/*This comment has more than one line*/

  1. Создайте страницу, которая предлагает в окне prompt() ввести имя (по умолчанию «гость»), а после этого будет приветствовать пользователя по имени. Если пользователь отказывается вводить свое имя, то на странице должен появиться текс, выражающий сожаление. Приветствие должно отображаться в основной части страницы с помощью инструкции document.write("str");.

Метод promt() отображает диалоговое окно с сообщением, полем ввода и двумя кнопками OK и CANCEL и возвращает введенное значение, если нажата кнопка OK, или значение null, если нажата кнопка CANCEL. Пример:

<html> <head>

<title>js1Lab – ввод в окно</title>

<script type = "text/javascript">

function askName() {

var name = prompt ("What is your name, please? ");

return name;

}

</script>

</head>

<body>

<script type = "text/javascript">

document.write("Welcome to my web page, " + askName() + ".");

</script>

</body> </html>

  1. Создайте кнопку «Поздороваться» и обработать событие OnClick кнопки «Поздороваться» так, чтобы по щелчку на кнопке выводилось окно confirm() с сообщением «Еще раз здравствуйте!».

  2. Создайте страницу, которая предлагает (в диалоговом окне) пользователю ввести число, а затем выводит информацию о четности числа на страницу документа. Функция parseInt() поможет преобразовать строку к целому числу.

  3. Создайте страницу, которая предлагает (в диалоговом окне) пользователю ввести число, а затем выводит кубы всех чисел от 1 до введенного числа при условии, что они не превосходят 1000. Воспользоваться циклом for; циклом while; циклом do while; if()

  4. Выведите в заголовок документа строки: «раз»; «два»; «три»; «четыре»; «пять»; «вышел зайчик погулять» как сделано в примере. Продолжить считалку: «Вдруг охотник выбегает…»

<html> <head>

<title>JavaScript в примерах-js2Lab</title>

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

<script type = "text/javascript">

var msg = document.title;

var c = 0;

var str = new Array("раз", "два", "три", "четыре", "пять", "вышел зайчик погулять");

function animateTitle() {

document.title = strings[c];

if(c == strings.length - 1)

{ c = 0;

setTimeout("animateTitle()", 2000)

}

else

{ c++;

setTimeout("animateTitle()", 200)

}

}

</script>

</head>

<body onload = "animateTitle()">

<div id = "strings"></div>

</body></html>

  1. На основе приведенного ниже примера выведите на странице тикающие часы на фоне изображения и текущую дату. Для получения текущего времени можно воспользуемся объектом time = new Date();. Чтобы получить каждый компонент даты отдельно, можно воспользоваться следующими функциями: getDay() – возвращает день недели 0..6 (0->воскресенье); getDate() – возвращает день месяца 1..31; getMonth() – возвращает номер месяца 0..11; getFullYear() – возвращает год в виде четырех чисел (начиная с 1970). Часы, минуты и секунды можно получить так: time = new Date(); _hours = time.getHours(); _min = time.getMinutes(); _sec = time.getSeconds();

Просто воспользоваться функцией document.write(), чтобы вывести time на экран не получится, так как значение нужно обновлять. Воспользуйтесь свойством innerHTML, которое есть у каждого элемента HTML-кода. Можно выводить время в элементе span, которому дадим уникальный идентификатор id = "hours". Впоследствии можно получить к нему доступ выражением obj_hours.innerHTML = time_wr;.

Чтобы время регулярно обновлялось, нужно функцию wr_hours() вызывать через определенное время. Функция setInterval() выполняет заданный код по истечении заданного промежутка времени. Время в этой функции задается в миллисекундах: setInterval("{выражение}",{временной интервал});.

Зададим интервал, равный одной секунде (1000 миллисекунд). Поскольку функции getDay() и getMonth() возвращают лишь числа, для числовой маркировки месяцев и дней недели добавим два массива с перечислением дней недели и названиями месяцев. В итоге получим следующий код:

<html> <head>

<title>Часы и дата на JavaScript</title>

</head>

<body>

<h1>Часы и дата на JavaScript</h1>

<div><span id = "hours"></span> </div>

<script type = "text/javascript">

obj_hours = document.getElementById("hours");

_month = new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа","сентября", "октября","ноября","декабря");

_day = new Array ("воскресенье","понедельник", "вторник","среда","четверг", "пятница","суббота");

function wr_hours() {

time = new Date();

time_sec = ime.getSeconds();

time_min = time.getMinutes();

time_hours = time.getHours();

time_wr = ((time_hours<10)?"0":"")+time_hours;

time_wr+ = ":";

time_wr+ = ((time_min<10)?"0":"")+time_min;

time_wr+ = ":";

time_wr+ = ((time_sec<10)?"0":"")+time_sec;

time_wr = " сегодня "+_day[time.getDay()]+", "+time.getDate()+" "+_month[time.getMonth()]+" "+time.getFullYear()+" г. время "+time_wr;

obj_hours.innerHTML = time_wr;

}

wr_hours();

setInterval("wr_hours();",1000);

alert(time);

</script>

</body></html>

  1. Выведите на странице таймер-часы типа секундомера.

  2. Приветствовать посетителя с учетом времени суток(утро, день, вечер).

  3. В следующих примерах выведите сообщения в окне состояния.

a) Написать оператор JavaScript, который отображает сообщение в строке состояния, приветствующее новых посетителей веб-страницы.

б) Создать страницу, на которой расположена кнопка «Установить техт в строке состояния» по нажатию на которую в строку состояния выводится приветствие.

в) Расположить на странице ссылку. При наведении мыши на ссылку отобразить в строке состояния текст «Заходи, не пожалеешь!» (обработка события onMouseOver), при уходе курсора со ссылки отобразите в строке состояния текст «Напрасно, не зашел» (обработка события onMouseOut).

г) Создать веб-страницу с «бегущим» текстом в строке статуса состояния браузера.

д) Выведите текущее время в окно документа и в окно статуса.

Пример программы, выводящей время в строке статуса.

<html> <head>

<script>

function time_scroll() {

var d = new Date();

window.status = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();

setTimeout('time_scroll()',1000);

}

</script>

</head>

<body onLoad = "time_scroll()">

<h1>Часы в строке статуса</h1>

</body> </html>

Полем состояния (status bar) называют поле нижней части окна, в котором отображается информация о состоянии браузера (загрузка документа, графики, завершение загрузки и т. п.) называют строкой состояния. Программа на JavaScript имеет возможность работать с этим полем с помощью двух свойств: window.defaultStatus – значение поля статуса по умолчанию и window.status – значение поля статуса;. Значение свойства defaultStatus или status можно изменить – и оно тут же будет отображено в поле статуса. Пример: window.status = "put your message here"

Если в Mozilla не изменяется строка состояния, то следует выполнить: Инструменты -> Настройки -> Содержимое JavaScript -> Дополнительно -> Изменять текст в строке статуса.

  1. Выведите на странице регулярно обновляемую информацию:

а). о том, сколько дней осталось до Нового года или другого праздника от текущей даты;

б). сколько часов и минут осталось до конца рабочего дня или до начала нового рабочего дня – в зависимости от текущего времени. Рабочее время считать с 9.00 до 17.00. Расширенный вариант: рабочими днями считать понедельник, вторник, среду, четверг, пятницу, а в рабочее время есть обед с 12.00 до 12.30.

  1. На странице непрерывно выводите заголовок первого уровня в стиле печатной машинки. После того как строка напечатается полностью, не стирайте ее побуквенно как в примере, повторяйте вывод сначала. Измените стиль заголовка: шрифт крупнее в 2 раза, цвет шрифта – красный, курсив. Используйте пример вывода строки в стиле печатной машинки.

<html> <head>

<title>Пример с печатающими буквами</title>

<script type = "text/javascript">

var delay = 50; // задержка

var pos = 0;

//Строка, которая будет выводиться

var msg = 'Пример с печатающими буквами';

// функция, печатающая слова

function printWords(text, dir)

{

var typingtext = text.substring(0, pos);

document.getElementById("type").innerHTML = typingtext;

pos += dir; // печатаем или стираем текст

if (pos > text.length)

setTimeout('printWords("'+text+'",'+(-dir)+')', delay * 50);

else

{

if(pos < 0)

{

dir = -dir;

}

setTimeout('printWords("'+text+'",'+dir+')', delay);

}

}

</script>

</head>

<body onLoad = "printWords(msg, 1)">

<h1>Эффект печатной машинки</h1>

<div id = "type"></div>

</body>

</html>

  1. Напишите в теле документа скрипт, формирующий в документе тег параграфа <p> с помещенной в него фразой «Заходи, гостем будешь».

<html> <head>

<title>Добро пожаловать на сайт! - JsLab3</title>

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

<script type = "text/javascript">

window['username'] = false;

function action() {

confirm('Приветствую Вас!');

}

function sayAgain() {

alert('Здравствуйте еще раз !')

}

function writeHello() {

var str = prompt('Введите свое приветственное сообщение', '');

if (str) {

var newEl = document.createElement('h1');

newEl.innerHTML = str;

document.getElementById('strings').appendChild(newEl);

}

}

function createPTag() {

var newEl = document.createElement('p');

newEl.innerHTML = 'Приветствую Вас, многоуважаемый Гость!!!';

document.getElementById('strings').appendChild(newEl);

}

</script>

</head>

<body onload = "action()">

<div id = "strings"></div>

<input type = "button" onclick = "sayAgain()" value = "Поздороваться еще раз" />

<input type = "button" onclick = "writeHello()" value = "Написать свое приветствие" />

<input type = "button" onclick = "createPTag()" value = "Сформировать тег параграфа" />

</body> </html>

  1. Напишите оператор JavaScript, который отображает приветствие новых посетителей веб-страницы на уровне заголовка <h1 > страницы документа.

  2. Загрузите маленькое изображение, в случае щелчка по изображению, загрузить большое изображение .

  3. Создать HTML-документ, который сразу после загрузки страницы будет отображать диалоговое окно адресом URL. Другое диалоговое окно должно отображаться при щелчке пользователя на кнопке формы. Адрес URL может быть получен из свойства href объекта location.

<html> <head>

<script type = "text/javascript">

function showLocation() {

alert("This page is at: " + location.href);

}

</script> </head>

<body onload = "showLocation()"> Bu, be, by.

</body> </html>

  1. Создайте навигацию по сайту. Создайте контекстное меню для различных элементов сайта.

  2. Выведите на странице календарь на текущий месяц/год.

  3. Пусть имеется ряд изображений. Создайте эффект мультипликации на странице, для этого разработайте сценарий смены изображений с заданной частотой. Реализуйте запуск и остановите мультипликацию по требованию пользователя по нажатию на кнопке.

  4. На странице задан элемент, содержащий некоторый текст. Разработайте сценарий, который при наведении мыши на элемент меняет текст на другой.

  5. Задана таблица. Разработайте сценарий, который при наведении мыши на ячейку меняет толщину и цвет границы.

  6. Создайте игру типа: «Угадай задуманное число».

  7. Создайте различные меню на JavaScript.

  8. Создайте объект калькулятор.

  9. Задание задержек по времени при выполнении функций. Проигрывание картинок и звуковых файлов.

  10. Создайте веб-страницу со слоем, появляющимся при нажатии на кнопку «Невидимка» и исчезающим при повторном нажатии на кнопку «Невидимка».

  11. Создайте окно для решения линейных уравнений ------х +-------- =0

  12. Работа с текстовыми строками из формы: объединение, сравнение, нахождение длины, удаление HTML-тегов из строки, удаление пробелов в начале.

  13. Перевод строки в кодировки: KOI8-R, WINDOWS-1251, UTF-8.

  14. Выполните конвертацию даты из одного формата в другой по событию.

  15. Вычислите время, проведенное на сайте.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности