- •Методические указания по выполнению лабораторных работ
- •Задание
- •Часть вторая
- •Задание
- •Часть третья
- •Задание
- •Часть четвертая
- •Рассморим скрипт
- •Задание
- •Лабораторная работа № 2
- •Разбор скрипта
- •Задание
- •Команды и эффекты
- •Задание
- •Лабораторная работа № 3
- •Рассмотрим скрипт.
- •Разбор скрипта
- •События onMouseOut и onUnload
- •Разбор скрипта
- •Задание
- •Лабораторная работа № 4
- •Разбор скрипта
- •Продолжаем рассматривать работу с окнами. Скрипт
- •Разбор скрипта
- •Задание
- •Лабораторная работа № 5
- •Часть 1
- •Разбор скрипта
- •Часть 2
- •Разбор скрипта
- •Разбор скрипта
- •Задания Задание № 1
- •Задание № 2
- •Задание № 3
- •Лабораторная работа № 6
- •Скрипт:
- •Разбор скрипта
- •Разбор скрипта
- •Разбор скрипта
- •Задания Задание по первой части
- •Задание по второй части
- •Задание по третьей части
- •Начало формы
- •Конец формы
- •Часть вторая
- •Разбор скрипта
- •Часть третья
- •Разбор скрипта
- •Часть четвертая
- •Разбор скрипта
- •Случайное число
- •Лабораторная работа № 8
- •Разбор скрипта
- •Часть вторая
- •Разбор скрипта
- •Задания Задание к первой части
- •Задание ко второй части
Задание
- разберите скрипт самостоятельно
<SCRIPT LANGUAGE="javascript"> var name = prompt("Напишите свое имя, пожалуйста","") var d = new Date(); var y = d.getFullYear(); var da = d.getDate(); var m = d.getMonth() + 1; var t = da + '/' + m + '/' + y; document.write("<TITLE>") document.write("Привет, "+name+ ". Сегодня " +t+ ". Спасибо, что зашли."); document.write("</TITLE>") </SCRIPT>
- попробуйте поработать с переменными, формирую документ в зависимости от введенных значений
например:
запросите новый заголовок окна и измените текущий заголовок на тот что ввел пользователь
выведите на странице текущую дату в следующем виде: “Сегодня 15 день 10 месяца 2003 года”
сформируйте список из трех элементов которые запросите у пользователя
попробуйте нарисовать и заполнить таблицу следующего вида:
Любимый цвет |
Любимое блюдо |
Любимое время года |
|
|
|
В соответствующие ячейки поместите ответы пользователя.
Начинаем со строки <SCRIPT LANGUAGE="javascript">.
Создаем переменную name для имени пользователя, которое он введет по запросу.
Нам нужна дата, поэтому создаем переменную d.
Нам известно, что год, месяц и число определяются с помощью d.getЧто-либо(), поэтому создаем переменные для каждого из этих элементов, y, m и dа.
Видите "+ 1" после переменной m? Так мы получаем правильный месяц.
Полная дата, состоящая из числа, месяца и года, также становится переменной и получает имя t.
Заголовок создается с помощью команд <title>, написанных в трех строках document.write. Так проще всего отделить команды html от кода JavaScript.
Первая строка из трех начинает команду <title>.
Вторая создает текстовую строку. Обратите внимание, что видимый текст помещен в двойные кавычки и отделен от команд, отвечающих за дату, знаками плюс. Не забудьте о пробелах.
Третья строка document.write завершает команду <title>.
Наконец </SCRIPT>.
Необходимо помнить, что скрипт помещается перед командой <body> в документе HTML, потому что там находится <title>.
Ах, да, если вам интересно, ваше имя было вставлено в текст с помощью команды:
<SCRIPT>document.write("" +name+ "")</SCRIPT>
Лабораторная работа № 2
Рассмотрим событиям (events). События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код, а не существуют самостоятельно. Они входят в структуру документа НТМL, не требуя команд <SCRIPT> и </SCRIPT>. Сами они не скрипты, а скорее область взаимодействия между вашей страницей и читателем.
События — это то, что происходит. Они добавят динамики вашему сайту. Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, — onMouseOver (навести мышь).
Скрипт
<A HREF="http://www.newmail.ru" onMouseOver="window.status='Бесплатный хостинг'; return true">Ссылка</A>
Разбор скрипта
Во-первых, onMouseOver (обратите внимание на заглавные буквы) представляет собой обработчик событий (Event Handler) гипертекстовой ссылки. Он используется внутри гиперссылки. Формат ссылки остается без изменений. Те же команды и те же двойные кавычки. onMouseOver ставится сразу же после адреса URL. Событие (Event) приводится в действие, когда браузер распознает onMouseOver="". Объектом в данном случае является window (окно), оно существует; status (статус) представляет собой property (свойство) oкна. Это небольшой участок окна, где должен разместиться следующий текст. Если у window есть изменяемое свойство status, значит, можно изменить и другие свойства окна. После window.status следует знак равенства = и то, что должно произойти. В данном случае это текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на ссылку.
Пожалуйста, обратите внимание на точку с запятой в конце строки.
return true Эти два слова имеют не последнее значение. Они дают скрипту указание проверить, есть ли строка состояния. Если отчет (return) соответствует действительности (true), тогда происходит событие. Текст в строке состояния уже не изменяется и не изменится, сколько раз вы не наводили бы на нее курсор.
Другие свойства
Вернемся к свойствам. Если они есть у окна, другие объекты тоже должны иметь свойства. В HTML цветом фона страницы управляет команда BGCOLOR. То же самое и здесь, только обязательно соблюдайте регистр. В JavaScript он пишется bgColor. Попробуем создать ссылку, которая изменяла бы фон страницы с помощью обработчика onMouseOver.
Во-первых, раз это ссылка, то сохраним ту же схему, которой уже пользовались.
Куда идет команда bgColor, когда вы пишете веб-страницу? В документ. Значит, это и есть нужный нам объект. Заменим window на document.
Мы собираемся менять фоновый цвет объекта, потому заменим status на bgColor.
Больше нам текст не нужен, так что заменим его цветом. Возьмем белый.
Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем return true после точки с запятой.
Вот что получилось...
<a href="http://www.newmail.ru" onMouseOver="document.bgColor='white'; return true">Не щелкать</a>
Мы хотим, чтобы два события произошли одновременно, поэтому не будем разделять команды точкой с запятой, так как это означает конец.
Новое правило: ставьте запятую, чтобы отделить друг от друга разные команды JavaScript, происходящие одновременно.
Раз нам нужно, чтобы обе команды действовали одновременно, ставим кавычки в самом начале первой и в самом конце второй. Таким образом, мы показываем браузеру, что все это одно событие.
Однако нам еще могут понадобиться одинарные кавычки...
Вернем документу первоначальный цвет...
<a href="http://www.newmail.ru" onMouseOver="document.bgColor='334775', nMouseOver=window.status='Бесплатная почта'; return true">Не щелкать</a>