У вас вопросы?
У нас ответы:) SamZan.net

Лабораторная работа 1 Часть первая Первый скрипт познакомит вас с самыми основами создания и размещ

Работа добавлена на сайт samzan.net: 2016-06-09

Поможем написать учебную работу

Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.

Предоплата всего

от 25%

Подписываем

договор

Выберите тип работы:

Скидка 25% при заказе до 4.4.2025

ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ

ГОУ ВПО «Тверской государственный технический университет»

Методические указания по выполнению лабораторных работ

по дисциплине «Интернет в административном управлении»

351400 – «Прикладная информатика в экономике»

Тверь 6
Лабораторная работа № 1

Часть первая

Первый скрипт познакомит вас с самыми основами создания и размещения JavaScript на веб-странице. Вы узнаете о том, что можно и чего нельзя делать в JavaScript. Первый скрипт помещает текст на веб-страницу. В данном случае текст будет красного цвета.

Скрипт

<SCRIPT LANGUAGE="javascript">

document.write("<FONT COLOR='RED'>Это красный текст</FONT>")

</SCRIPT>

Что такое JavaScript?

Во-первых, это не Java. Java — это язык программирования, разработанный в Sun Microsystems. А JavaScript придумали  люди из Netscape. Но это не единственное отличие. Оба языка представляют собой ООР (Object Orientated Programming, объектно-ориентированный язык программирования). Это значит, что с их помощью можно строить небольшие объекты, из которых потом складывается целое. Главное отличие в том, что Java позволяет создавать совершенно самостоятельные события. «Java-applet» («приложения») может запускаться с веб-страницы, но на самом деле это полностью независимая программа, хоть и маленькая. К тому же ее нельзя просмотреть в виде текста. Для запуска ее необходимо «транслировать» в то, что называется «машинным языком». Netscape как бы упростил Java до набора более простых команд. JavaScript не может существовать сам по себе, он должен находиться внутри веб-страницы, а веб-страницу необходимо просматривать в браузере, который понимает язык JavaScript (скажем, Netscape Communicator и Internet Explorer). Для начала запомните, что JavaScript — это не HTML! У JavaScript и HTML очень похожие правила. Во-первых, JavaScript располагается внутри документа HTML. JavaScript сохраняется в виде текста вместе с документом HTML. Главная же разница в том, что в HTML имеет довольно расплывчатые правила. Не имеет значения, сколько пробелов вы оставляете между словами или абзацами. У JavaScript четкая форма. И пренебрегать ею можно лишь изредка. Например, вторая строка нашего скрипта выглядит следующим образом:

document.write("<font color='red'>Красный текст</font>")

То есть, целиком находится на одной линии и должна сохранять свою форму.

Всегда редактируйте свою работу в текстовом редакторе без полей. Имеется  в виду не очень широкую страницу, а ПОЛНОЕ ОТСУТСТВИЕ ПОЛЕЙ.

Для JavaScript очень важен  РеГиСтр. Некоторые скрипты по-разному действуют в Нетскейпе и Експлорере.

Разбор скрипта

Начнем с первой строки:

<SCRIPT LANGUAGE="JavaScript">

Это код HTML, который дает браузеру понять, что с этого места начинается JavaScript. Все скрипты начинаются с такой команды. А как насчет части LANGUAGE(язык)="JavaScript"? Есть еще и другие типы скриптов, например, VBS. Так что ваша команда LANGUAGE не даст браузеру запутаться.

Этим:  </SCRIPT> ...заканчивается любой JavaScript без исключений. Помните, начинаем с <SCRIPT LANGUAGE="javascript"> и заканчиваем </SCRIPT>.

Вот основная часть скрипта:

document.write("<FONT COLOR='RED'>Это красный текст</FONT>")

Указывается DOCUMENT (документ HTML) и те изменения, которые в нем произойдут — что-то будет написано (WRITE). То, что будет написано, находится в скобках. DOCUMENT представляет собой object (объект). Слово WRITE (писать), отделенное точкой, называется method (методом объекта). Текст в скобках называется instance (примером метода), он передает то, что происходит, когда метод воздействует на объект. Имейте в виду, что текст внутри скобок находится в кавычках. Текст в кавычках представляет собой простой HTML. Команда <FONT> делает текст красным. Обратите внимание, что дальше идут одинарные кавычки. Если поставить двойные, JavaScript решит, что это конец строки, и получится, что только часть вашего текста будет применена к объекту, а это уже ошибка.

Запомните: внутри двойных кавычек ставятся одинарные.

Задание

Измените скрипт так, чтобы вышли две строки текста, красная и синяя. Но вам придется дописать несколько команд Javascript, а не просто добавить немного HTML к приведенному примеру. Используйте команду <BR> в конце первого примера, чтобы текст располагался на двух строках.

Попробуйте изменить заголовок страницы с помощью скрипта, используя, для этого соответствующий тег (<title>). Попробуйте добавить на страницу список содержащий 3-5 элементов (это тоже необходимо сделать с помощью скрипта).

Часть вторая

JavaScript — это чрезвычайно логичный язык, требующий, чтобы все шло своим чередом, друг за дружкой. Допустим, у вас 10 ошибок в длинном скрипте. Сообщения накладываются одно на другое, и последняя обнаруженная компьютером ошибка окажется сверху. Не набрасывайтесь на нее сразу, возможно, в действительности ее даже не существует. Может случиться так, что первая ошибка в скрипте и вызовет все остальные. Так что исправлять их следует от начала документа HTML. Поэтому исправляйте ошибки по одной от начала до конца. И каждый раз, исправив одну ошибку, запускайте скрипт. Можно получить 20 окошек с восклицательным знаком, а исправлять придется одну или две ошибки.

«Определение отсутствует» – Эта ошибка сценария тоже часто встречается. Она означает, что в скрипте что-то не согласовано. Случаются и банальные опечатки. Приглядитесь к тексту повнимательнее, опечатки случаются чаще, чем можно себе представить. Вот практически все, что на данном этапе можно сказать про ошибки.

Задание

Ниже приведен текст скрипта.

<html>

<head>

<title>Испорченный скрипт</title>

<link REL="STYLESHEET" TYPE="text/css" HREF="blue1.css" tppabs="http://jsp.newmail.ru/blue1.css">

</head>

<body>

<script LANGUAGE="JavaScript">

...x

dothis = new Date()

month = dothis.getMonth()

month = (month * 1) + 1

day = dothis.getDate()

year = dothis.getFullYear()

document.wrte(" ",day,"/",month,"/",year," ")

</script>

<p>"Попробуйте найти ошибку!"</p>

</body>

</html>

Скопируйте его в новый тесктовый файл с расширением html и откройте в Internet Explorer. Загружая страницу, браузер должен выдать вам два сообщения об ошибке. Исправьте их. Некоторые команды покажутся вам незнакомыми, но это неважно. Из сообщения вы получите достаточно информации, чтобы наладить скрипт. Если он заработает, то на странице появится сегодняшняя дата. Каждая ссылка откроется в новом окне.

Подсказка: возможно, сначала вы получите только одно сообщение. Вторая ошибка появится, когда вы исправите первую.

Часть третья

Работа с Датой-Временем

Рассмотрим семь методов объекта: getDay(), getDate(), getMonth(), getYear(), getHour(), getMinute(), и getSecond() (получитьДень, Число, Месяц, Год, Час, Минуту, Секунду). Все они уже существуют, их можно взять и поместить на страницу.

Разберем скрипт:

<SCRIPT LANGUAGE="JavaScript">

//Скрипт отмечает точную дату и время вашего прибытия на страницу

Now = new Date();
document.write("
Сегодня " + Now.getDate()+
"-" + Now.getMonth() + "-" + Now.getFullYear() + ".
Вы зашли на мою страницу ровно в: " + Now.getHours() +
":" + Now.getMinutes() + "
и " + Now.getSeconds() +
"
секунд.")

</SCRIPT>

Результатом всех методов являются цифры и об этом необходимо помнить. Даже метод getDay(), который отвечает за день недели, выражается цифрой от единицы до семи. Начнем с месяца. Как уже говорилось раньше, getMonth() — это метод, отвечающий за месяц. getMonth() является методом объекта Date. Взгляните на скрипт еще раз. Date занимает отдельное место в команде:

Now = new Date();

Таким образом устанавливается объект, с которым будет работать метод getMonth(). Имея дело с датой и временем, всякий раз пользуйтесь той же схемой. Нужно создать объект. Объект называется Now. Команда говорит: Now — это объект, который представляет new Date(). Дата обязательно должна быть новой. Таким способом вы будете получать новую дату каждый раз, когда заходите на страницу или обновляете ее.

Обратите внимание и на точку с запятой в конце. Она указывает на то, что строка JavaScript закончена.

Нам нужно напечатать месяц на странице, значит, где-то должна быть команда document.write().

Для слияния текста используется знака «плюс» + между элементами. Объект и метод разделены точкой, так что команда напечатать месяц выглядит так: Now.getMonth().

И вот что получилось:

<SCRIPT LANGUAGE="javascript">

//Скрипт напечатает на странице номер месяца

Now = new Date();
document.write("
Сейчас месяц " + Now.getMonth())

</SCRIPT>

Метод Now.getFullYear сообщит год.

Задание

Необходимо написать скрипт, который поместит на вашу страницу дату, разделенную дробями /. Приветственный текст должен быть зеленого цвета. Также отметьте, что это вы написали скрипт, потому что... так оно и есть!

Часть четвертая

Работа с переменными

Рассмотрим два случая работы с переменными: получение информации от пользователя и создание самостоятельных переменных в JavaScript.

Снова понадобится стандартный формат от <SCRIPT LANGUAGE="javascript"> дo </SCRIPT>. Вот что мы собираемся сделать: мы спросим у пользователя, как его зовут, и присвоим этому имени переменную. Как только переменная будет присвоена, мы сможем ввести ее в строку document.write, которая напечатает это имя на странице.

Рассморим скрипт

<SCRIPT LANGUAGE="javascript">

/* Скрипт предназначен для того, чтобы получить
от пользователя информацию и поместить ее на страницу */
var user_name = prompt ("Напишите свое имя","Здесь");
document.write("Привет, " + user_name + "! Милости просим!");

</SCRIPT>

Примечание: Текст в скобках должен располагаться на одной строке

Вот новые команды : /* */

Она означает комментарий внутри скрипта. Так же можно воспользоваться двойной дробью //, отделяющую текст вашего комментария от скрипта. Это то же самое, но лучше. Двойную дробь необходимо ставить в начале каждой новой строки. Эти же команды годятся для пространных комментариев. Нужно поставить /* в начале и */ в конце, и все, что окажется между этими знаками, останется комментарием и не войдет в скрипт.

Создание переменной

Переменные имеют первостепенное значение в JavaScript. Например, Вы назначаете имя, состоящее из одного слова, функции JavaScript. Можно поместить дату на страницу с помощью метода getDate(). В строке document.write мы написали метод getDate() целиком. Но если нужно было бы написать это десять раз на одной и той же странице?

Потому и  вводим переменную, которая должна представлять окончательный результат метода. Возьмем, к примеру, переменную d. Тогда нам нужно будет только однажды написать getDate() и назначить методу переменную d. И на протяжении всего оставшегося скрипта будем просто писать d там, где нужно поставить дату.

Вернемся к примеру:

Вот строка из скрипта, которая назначает переменную:

var user_name = prompt ("Напишите свое имя","Здесь")

Переменная была создана по следующей схеме:

  •  var (от variable, переменная) объявляет, что следующим словом будет имя переменной.
  •  user_name (имя пользователя) — имя переменной. Оно необязательно должно быть таким длинным.
  •  Помните, что регистр имеет значение для JavaScript, следовательно, если вы назвали переменную Dog, то буква D каждый раз должна быть заглавной, иначе браузер посчитает их за два разных слова.
  •  Здесь нет никаких кавычек, просто ставьте одно слово за другим, как показано выше.
  •  Знак равенства = указывает на то, что переменная будет равна результату следующей команды.
  •  В нашем случае переменная будет представлять результат, полученный с помощью окна запроса.

Команда Prompt

В данном примере используется  новая командой prompt (запрос). Это метод, вызывающий окно для ввода значения переменной. Вот формат запроса:

var variable_name = prompt("Текст в окне","Текст в строке ввода")

Имя переменной включенo в схему скрипта, иначе вы получили бы запрос, но полученные им данные никуда бы не пошли.

Если вам интересно...

  •  Чтобы строка ввода оставалась чистой, ничего не пишите между второй парой кавычек.
  •  Если вы не укажете в скобках второй пары кавычек, в строке появится слово undefined.
  •  Если вы написали что-либо в строке ввода и пользователь выберет ОК, ничего не меняя, на странице появится то, что вы написали.
  •  Если в строке ввода ничего нет и пользователь выберет OK, ничего не вписав, на странице появится слово null.

Продолжим разбор

Перейдем к основной части:

var user_name = prompt ("Напишите свое имя","Здесь");

document.write("Привет, " + user_name + "! Милости просим!");

  •  Имя переменной user_name присвоено результату запроса.
  •  prompt просит пользователя написать свое имя.
  •  В строке ввода читаем: "Здесь."
  •  Точка с запятой в конце строки.
  •  document.write вызывает текст "Привет, ".
  •  Знак плюс + отмечает, что все элементы идут друг за другом.
  •  user_name вводит результат запроса. Никаких кавычек — эти слова не нужны нам на странице.
  •  Еще плюс.
  •  "! Милости просим!" завершает текст.
  •  Точка с запятой.

Задание

- разберите скрипт самостоятельно

<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 года”

сформируйте список из трех элементов которые запросите у пользователя

попробуйте нарисовать и заполнить таблицу следующего вида:

Любимый цвет

Любимое блюдо

Любимое время года

В соответствующие ячейки поместите ответы пользователя.


Лабораторная работа № 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.

  1.  Во-первых, раз это ссылка, то сохраним ту же схему, которой уже пользовались.
  2.  Куда идет команда bgColor, когда вы пишете веб-страницу? В документ. Значит, это и есть нужный нам объект. Заменим window на document.
  3.  Мы собираемся менять фоновый цвет объекта, потому заменим status на bgColor.
  4.  Больше нам текст не нужен, так что заменим его цветом. Возьмем белый.
  5.  Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем 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>

Задание

Рассмотрим новый метод, alert() (предупредить). Он вызывает небольшое диалоговое окно с текстом и кнопкой OK.

Попробуйте сделать так, чтобы окно предупреждения всплывало при наведении курсора на ссылку. Вот формат команды:

alert('текст в окошке')

Рассмотрим, как действуют другие события. Все они работают по одной схеме.

Команды и эффекты

Команда onClick (на щелчок)

Вы уже знаете, что onMouseOver запускает событие, если навести курсор на ссылку. Следовательно, щелкнув по ссылке, можно с таким же успехом запустить событие через onClick. Чтобы продемонстрировать действие команды, воспользуемся методом alert. Схема:

alert('текст, который появится в окне')

Таким образом, получаем:

<a href="http://www.jsp.newmail.ru" onClick="alert('Уже уходите!');"> Жмите сюда</a>

Помните, что внутри одинарных кавычек нельзя употреблять слова с апострофами ', иначе браузер поймет их, как окончание текста.

Команда onFocus (на фокус)

Это команда, которая вызывает действие, когда пользователь «фокусируется» на элементе страницы. Это годится для форм: флажков (checkbox) и текстовых полей (textbox). Вот пример:

<form>
<input type="text" size="30" onFocus="window.status='
Текст в строке состояния';">
</form>

Команда onBlur (на потерю фокуса)

Если можно сосредоточиться на объекте, значит, можно и «потерять фокус». оnBlur позволяет сообщить пользователю о том, что он изменил свой ответ. Этот обработчик не так часто используется.

<form>
<input type="text" size="45" value="Впишите свое имя и щелкните по другой строке" onBlur="alert('Вы изменили ответ — уверены, что он правильный?');">
</form>

Команда onChange (на изменение)

Действие этой команды очень похоже на действие предыдущей, onBlur. Ее главная задача — проверка. Этот обработчик события проверяет, сделал ли пользователь то, что вы от него просили. Пример очень похож на предыдущий, но действует все-таки по-другому.

<form>
<input TYPE="text" size="45" value="Измените текст и щелкните по другой строке" onChange="window.status='Текст был изменен';">

</form>

Команда onSelect (на выделение)

Эта команда работает так же, как и три предыдущие, отмечая, что в поле ввода произошли изменения, — в данном случае был выделен текст.

Команда onSubmit (на отправку)

Это очень популярная команда. Она позволяет вызвать какое-либо действие, когда вы нажимаете кнопку Submit (отослать, отправить). Многим очень хочется, чтобы после того, как пользователь нажимает на кнопку, у него на экране появлялась страница с надписью: «Спасибо, что вы нам написали».

Формат такой:

<form>
<input TYPE="submit" onSubmit="parent.location='thanksalot.html'";>

</form>

Новая команда parent.location — это стандартная схема ссылки на другую страницу. Можно подумать, что parent (источник) — это объект, а location (местонахождение) — метод. Неверно. В данном случае parent является свойством окна браузера, а location — объектом, который появится в этом окне. То есть для ясности просто имейте в виду, что parent.location='' означает ссылку.

Команды onLoad и onUnload (на вход и выход)

Обе они помещаются внутри строки HTML <BODY>. Они вызывают событие, когда страница открывается или закрывается, то есть когда вы уходите со страницы. Эти команды потребуются вам, когда мы возьмемся за функции.

Задание

Необходимо создать форму, которая будет взаимодействовать с пользователем.
Форма должна иметь три элемента:

  •  поле ввода с просьбой ввести имя;
  •  два поля для флажков с вопросом о том, что больше нравится пользователю, мороженое или шоколад;
  •  кнопку отправки данных.

С каждым элементом должно произойти следующее:

  •  При вводе имени в строке состояния должны появиться слова: «Впишите сюда свое имя».
  •  Два поля с флажками должны отослать в строку состояния слова: «Вы выбрали...» и выбор пользователя.
  •  При нажатии на кнопку должно выскочить окно предупреждения, благодарящее пользователя за участие в опросе.


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

Cоздавая переменную, вы присваиваете имя результату команды или события JavaScript. Создавая функцию, вы делаете почти то же самое, только имя присваивается целой серии команд. Множество команд JavaScript вы комбинируете в одну.

Рассмотрим скрипт.

Сам скрипт состоит из двух частей: собственно функции и команды onLoad, которая ее запускает.
Вот обе части:

<SCRIPT LANGUAGE="javascript">

<!-- Скрыть от браузеров, не читающих Javascript

function dateinbar()
{
var d = new Date();
var y = d.getFullYear();
var da = d.getDate();
var m = d.getMonth() + 1;
var t = da + '/' + m + '/' + y;

defaultStatus = "Вы прибыли на страницу " + t + ".";
}
// не скрывать -->

</SCRIPT>

...и команда onLoad в <BODY>:

<BODY BGCOLOR="хххххх" onLoad="dateinbar()">

Разбор скрипта

Что такое <!--  --> ?

Еще одна команда. Этими знаками вы пользуетесь для комментариев в теле HTML:

<!-- Это текст комментария, не видимый на странице -->

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

Однако соблюдайте несколько правил:

  •  Команды комментария должны находиться между <SCRIPT> и </SCRIPT>. Если вы поставите их снаружи, то браузер посчитает комментарием весь скрипт и ничего не выйдет.
  •  Текст после команды <!-- должен находиться на одной строке.
  •  Перед заключительной командой --> должна стоять двойная дробь //, иначе JavaScript примет ее за часть скрипта. Ошибка.
  •  Нет, совсем не обязательно писать текст к этим командам.

Вернемся к разбору

Сначала первая часть скрипта устанавливает функцию. Потом команда в строке <BODY> ее запускает. Давайте сначала разберем функцию.

function dateinbar()
{
var d = new Date();
var y = d.getFullYear();
var da = d.getDate();
var m = d.getMonth() + 1;
var t = da + '/' + m + '/' + y;
defaultStatus = "Вы прибыли на страницу " + t + ".";
}

Схема довольно понятная. Вы пишете "function" и даете ей любое имя, какое вашей душе угодно, точно так же, как мы делали с переменными. Оно может быть какой угодно длины, если в нем нет пробелов и это слово уже не участвует в JavaScript. Но обратите внимание, что после имени функции стоят круглые скобки, как и после метода. То есть, создавая функцию, как бы создаем новый метод для выполнения задачи. На этот раз я выбрал имя "dateinbar()" (дата в строке состояния), потому что это функция и делает — помещает дату в строку состояния.

Очень важно!
Команды, из которых состоит функция, должны быть заключены в фигурные скобки {}. Текст внутри фигурных скобок должен быть вам уже знаком. Тот же скрипт мы использовали пару уроков назад.

  •  Создается переменная для года;
  •  Еще одна для числа;
  •  Еще одна для месяца;
  •  Затем четвертая для даты целиком;

Последняя команда новая:

defaultStatus = "Вы прибыли на страницу " + t + ".";

"defaultStatus" (строка состояния по умолчанию) — свойство объекта window. Его цель — поместить текст в строку состояния внизу окна браузера. Почему не написать просто window.status? Этого нельзя сделать, потому что такая схема используется для события, например, с командой onClick. Раз строка состояния не находится внутри команды HTML, берем defaultStatus. Есть только одна строка состояния — она же и по умолчанию.

Команда "onLoad="

Команда onLoad (на вход, загрузку) (обратите внимание на заглавные буквы) говорит браузеру, что, загружая страницу, он должен выполнить следующее. В нашем случае следует функция dateinbar{}.

Эта команда почти всегда располагается в строке <BODY> документа HTML. И почти всегда за ней следует функция, но это необязательно. Можно с таким же успехом поместить туда и команду объект.метод.

Расположение элементов

Это имеет не последнее значение. Вы знаете, что onLoad идет в строку BODY. Скрипт с функцией должен находиться между командами <HEAD> и </HEAD>. Хотя на самом деле его можно поместить где угодно, но если вы расположите его после команды onLoad, он заработает только после того, как загрузится вся страница. Поместив скрипт перед командой onLoad, вы помещаете его в память компьютера, и когда onLoad вызовет его, он будет готов к работе.

Практически любой набор команд JavaScript можно записать в виде функции.

События onMouseOut и onUnload

Это два последних обработчика событий, которые вы должны иметь в своем арсенале: onMouseOut и onUnload (обратите внимание на заглавные буквы). onMouseOver вызывает некое событие, если навести мышь, к примеру, на ссылку. В противоположность ей onMouseOut начинает действовать, если курсор увести со ссылки. Вы также знаете, что команда onLoad запускает скрипт, когда страница загружается. Команда onUnload действует, когда пользователь уходит со страницы.

Скрипт

С мышью:

<A HREF="les10.htm" onMouseOver="window.status='Эй! Убирайся с меня!';
return true"
onMouseOut="window.status='Так-то лучше, спасибо'; return true">
Наведите курсор на эту ссылку и уведите   обратно</A>

При уходе со страницы:

<BODY onUnload="alert('Уже уходите?')">

Разбор скрипта

Эффекты с мышью, как вы уже догадались, создаются с помощью команд onMouseOver и onMouseOut. Обратите внимание, что между ними ощутимая разница. Вам не нужно, чтобы эти события происходили одновременно. Нужно писать их как две абсолютно разные команды, каждая из которых содержит свою команду return true.

Чтобы получить такой эффект при уходе со страницы, добавляем команду onUnload="alert('Уже уходите?')" в строку BODY. Обратите внимание на двойные и одинарные кавычки. Внутри двойных — одинарные. Вторая пара двойных кавычек означает для браузера конец команды.

Задание

Создайте функцию, которая вызовет два запроса (prompt). (Подсказка: один следует за другим с новой строки.) Первый попросит пользователя ввести свое имя, второй — отчество. Затем та же функция должна вызвать окно предупреждения (alert) c текстом:

«Привет, имя отчество, добро пожаловать на адрес страницы, мою замечательную страницу!»

Непременно создайте переменную для адреса страницы.

Если хотите еще поразвлечься, пусть слова "мою замечательную страницу" будут не просто вставлены в текст alert, сделайте это по-другому. Присвойте переменную и этому элементу.

Потренируемся с функцией, onMouseOver и onMouseOut.

  •  Создайте страницу с гипертекстовой ссылкой.
  •  Когда курсор находит на ссылку, в строке состояния должны появляться слова: «Привет, пользователь название браузера!».
  •  Когда курсор уходит со ссылки, в строке состояния должен появляться текст: «Не скучаете у нас на URL страницы
  •  Если щелкнуть по ссылке, должно всплыть окно со словами: «Уже уходите? Сейчас всего только текущее время»;
  •  Время должно определяться через функцию.
  •  Не пользуйтесь командой onClick, чтобы вызвать окно предупреждения, возьмите команду onUnload


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

Работа посвящена открытию новых окон. Сначала рассмотрим, как через команды Javascript открыть новый документ HTML в другом окне. Затем, как с помощью функции поместить две разные страницы в одном документе.

Скрипт

<SCRIPT LANGUAGE="javascript">

window.open('opened.html', 'joe', config='height=300,width=300')
self.name="main window"

</SCRIPT>

Разбор скрипта

Расположение на странице
Начнем с расположения скрипта на странице. Когда открываем новое окно, располагайте скрипт ближе к концу документа. Тогда сначала загрузится страница, а потом всплывет окошко, иначе окошко всплывет прежде, чем пользователь увидит  страницу.
window.open
window (окно) — объект, a open (открыть) — метод, который на него воздействует.

Конфигурация нового окна
Информация об этом находится в круглых скобках

Вот схема:

('URL документа в новом окне', 'Название нового окна', config='параметры нового окна')

образец:
('opened.html','joe',config='height=300,width=300')

  •  opened.html — это URL страницы, которая появится в новом окне. Если страница располагается на другом сервере, то добавьте http:// и так далее.
  •  joe — название нового окна. Через минуту я объясню вам, для чего оно нужно. config= указывает, что следующие команды относятся к конфигурации нового окна.

Команды конфигурации
Они сообщают, что новое окно будет размером 300 на 300 пикселей.

Обратите внимание, что команды height (высота) и width (ширина) разделены только запятой без пробелов, а значения поставлены в одинарные кавычки, так как эти два элемента являются подкомандами config. Пробел для браузера означает конец команды. Есть множество подкоманд для команды config. Про высота и ширина определяются в пикселях. Остальные подкоманды употребляются со словами «yes» или «no» в зависимости от того, нужны ли в новом окне эти элементы. (Можно ставить «1» вместо «да» и «0» вместо «нет».) Никаких пробелов между подкомандами и одинарные кавычки.

  •  toolbar= отвечает за наличие панели инструментов c кнопками НАЗАД, ВПЕРЕД, СТОП и т.д. 
  •  menubar= отвечает за наличие строки меню с элементами ФАЙЛ, ПРАВКА, ВИД и т.д. 
  •  scrollbars= отвечает за наличие полосы прокрутки.
  •   resizable= указывает, сможет ли пользователь изменить размер окна по своему желанию.
  •  location= отвечает за наличие адресной строки, где виден URL страницы. 
  •  status= отвечает за наличие строки состояния.

От строки с заголовком  не избавиться никогда.

Тэги в новом окне
Всплывающее новое окно — это не просто рамка для страницы.
Как видите, имеются две ссылки. Первая открывает домашнюю страницу HTML Goodies в главном окне. Вот как это получается:

<A HREF="http://www.htmlgoodies.com" TARGET="main window"></A>

У большого окна есть имя, «main window» (главное). Вот почему оно главное. В скрипте это обозначено строкой self.name="main window". Добавляем в ссылку HREF TARGET="--" (цель) и указание на main window.

Если надо, чтобы страница загружалась в маленьком окошке нужно написать «joe» после команды target.

С помощью многократных команд window.open можно вызывать многократные окна. Только следите за тем, чтобы у каждого нового окна было свое имя. Можете связывать окна ссылками при условии, что правильно указываете имена окон в команде target.

Закрыть окно
Вторая ссылка нового окна закрыла его. Вот как это сделано:

<A HREF="" onClick="self.close">Щелкните, чтобы закрыть</A>

Это обычная ссылка HREF, которая никуда не ведет. Видите пустые кавычки? Команда onClick="self.close" закрывает окно и никуда не ведет.
self (само, себя) — это свойство может относиться к любому объекту. В нашем случае это свойство окна. Команда close (закрыть) закрывает окно.

Если, вы хотите открыть окно по команде, а не когда пользователь заходит на страницу. Вот как это можно сделать:

<A HREF="les11.htm" onClick="window.open('opened.html', 'joe',
config='height=300,width=300')">
Щелкните, чтобы открыть 'joe'</A>

Продолжаем рассматривать работу с окнами.

Скрипт

<SCRIPT LANGUAGE="JavaScript">
function openindex()
{
var OpenWindow=window.open("", "newwin", "height=300,width=300");
OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>Новое окно</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR='white'>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("<font size=+1>Новое окно</font><P>")
OpenWindow.document.write("<a href= 'http://jsp.newmail.ru' target='main window'> Эта ссылка<BR>откроется в главном окне</a><p>")
OpenWindow.document.write("<P><HR><P>")
OpenWindow.document.write("<a href='' onClick='self.close()'> Эта закроет окно</a><p>")
OpenWindow.document.write("</CENTER>")
OpenWindow.document.write("</HTML>")
self.name="main window"
}
</SCRIPT>

...и в строке BODY:

onLoad="openindex()"

Помните, текст в скобках должен находиться на одной строке.

Разбор скрипта

Главная часть скрипта, содержащая функцию, помещается между командами <HEAD> и </HEAD>, как большинство функций.

По самой обычной схеме функция получает имя openindex(). Теперь подходим к основному моменту. Создаем переменную OpenWindow, под которой скрывается команда window.open(). Вот так:

var OpenWindow=window.open("", "newwin", "height=300,width=300');

Смотрите описание выше. Единственная разница в том, что вы не указываете URL. Пустые парные кавычки говорят браузеру, что он должен искать информацию о новом окне. То же самое, что и не ставить URL в ссылку, которая закрывает окно. Оно бы не закрылось, если бы начала загружаться новая страница. Точно так же и тут. Браузер стал бы загружать новую страницу, а не выполнять скрипт.

Теперь начинаем писать страницу HTML, которая будет внутри нового окна. Вот первая строка текста:

OpenWindow.document.write("<HTML>")

Переменная OpenWindow (то есть новое окно) говорит, что этот текст должен быть вписан в документ.

Каждая новая строка следует той же схеме. Можно написать сотню строк, создающих законченную страницу. Скрипт совсем небольшой, так как это наглядное пособие.

Помните: когда вы пишете HTML внутри команды document.write, вместо двойных кавычек с подкомандами ставьте одинарные.

Наконец командой onLoad в строке BODY запускается функция.

Задание

1) Напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300 пикселей и с двумя ссылками:

  •  Одна откроет новую страницу в главном окне.
  •  Вторая откроет новую страницу в том же окне.
  •  Страница, которая откроется в том же маленьком окне, должна содержать ссылку, закрывающую окно.

2) Необходимо написать функцию, которая открыла бы окно с зеленым фоном и приветствием: «Привет, имя пользователя, вот твое окно!» Имя пользователя можно узнать с помощью запроса. Разумеется, допишите еще ссылку, которая закроет окно.


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

Часть 1

Рассматриваются вопросы выполнения вычислений с помощью JavaScript.

Скрипт

<BODY>
   <SCRIPT LANGUAGE="javascript">
       var numsums = 10 + 2
            alert("10 + 2 равно " + numsums)
       var x = 10
            alert("десять — это " + x)
       var y = x * 2
            alert("10 X 2 = " + y)
       var z = "Привет " + "Пока"
      alert(z)
   </SCRIPT>
</BODY>

Разбор скрипта

<BODY>
   <SCRIPT LANGUAGE="javascript">
       var numsums = 10 + 2
            alert("10 + 2 равно " + numsums)
       var x = 10
            alert("десять — это " + x)
       var y = x * 2
            alert("10 X 2 = " + y)
       var z = "Привет " + "Пока"
      alert(z)
   </SCRIPT>
</BODY>

Скрипт устанавливает переменную numsums. Она равна 12 (10+2). Затем переводит переменную в alert и показывает, что 10 + 2 = переменная или 12.

Другая переменная, х, приравнивается к 10, и alert тоже показывает ее значение.

Следующая переменная, y, равна x, умноженному на 2. Ответ тоже виден в окне alert.

Наконец создается переменная z, которая доказывает, что с помощью знаков исчисления можно соединять текст. И снова метод alert.

Посмотрите еще раз, как работает скрипт.

  •  Переменные начинаются с VAR (от слова variable, переменная), следом идет имя, знак = и значение переменной. VAR можно не писать, но я советую вам не отказываться от него, пока вы не набьете руку.
  •  Имя переменной может состоять из любого количества букв. Но лучше давать им названия, которые что-то значат. И, ради собственного удобства, не слишком длинные. Не пользуйтесь пробелами.
  •  Имена переменных различают регистр! То есть 'Х' и 'х' — это две разные переменные.
  •  Значение текстовой переменной ставится в кавычки. Числовые переменные не ставятся в кавычки, иначе скрипт поймет их как текст с числовым значением 0!
  •  Сложение, вычитание, умножение и деление выражаются знаками: +, -, *, и / соответственно.
  •  Знак плюс (+) выполняет две задачи: складывает числа или печатает вместе два фрагмента текста.
  •  Во всех языках программирования есть зарезервированные слова, например, названия команд. В любой книжке есть их перечень. Этими словами называть переменные нельзя. Например, не надо использовать в качестве переменной, скажем, слово onMouseOver.
  •  Если необходимо, вместо пробела ставьте знак _ user_name.

Смотрите задание № 1, которое необходимо выполнить.

Часть 2

Вспомним события связанные с кликами мыши. Обратите внимание, что не требуются тэги <SCRIPT> и </SCRIPT>. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>.

Скрипт

<a href="http://nonags.online.ru/main.html" onMouseOver="document.pic1.src='a.gif'" onMouseOut="document.pic1.src='b.gif'">

<IMG SRC="b.gif" BORDER=0 NAME="pic1"></a>

Разбор скрипта 

<a href="http://nonags.online.ru/main.html" onMouseOver="document.pic1.src='a.gif'" onMouseOut="document.pic1.src='b.gif'">

<IMG SRC="b.gif" BORDER=0 NAME="pic1"> </a>

Вы уже знаете о событиях достаточно, чтобы самостоятельно разобрать скрипт. Когда убираете курсор с картинки, появляется b.gif. Когда наводите на картинку, появляется а.gif.

Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME="pic1". Не имеет значения, сколько изображений у вас на странице и в каком порядке они располагаются, если вы присвоили отдельное имя каждой нужной картинке.

  •  onMouseOver и onMouseOut различают регистр. Нельзя менять заглавные и строчные буквы.
  •  Так как необходимо ставить кавычки после onMouseOver= и onMouseOut=, название файла *.gif ставится в одинарные кавычки.
  •  document.pic1.src следует иерархии объектов, о которой мы говорили в Уроке 8. Document относится к объекту документ, a pic1 — это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл с картинкой.
  •  В этом примере onMouseOver меняет источник изображения на а.gif.
  •  ОnMouseOut заставляет объект изображение показывать а.gif.
  •  Имейте в виду, что для наилучшего эффекта картинки должны быть одинакового размера.

Смотрите задание №2, которое Вам необходимо выполнить.

Часть третья

Ниже рассматривается еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию.

В общем, когда вам нужна только одна команда JavaScript, можно включить ее целиком в <A HREF>. Для многократного повторения больше подходит функция.

Скрипт

<HTML>
<HEAD>
  <title></title>
<SCRIPT LANGUAGE="JavaScript">
function up()
{
    document.mypic.src="../files/189/up.gif" 
}
function down()
{
    document.mypic.src="../files/189/down.gif" 
}
</SCRIPT>
</HEAD>
  <BODY>
    <CENTER>
    <h2>
Пример анимации</h2>

<A HREF="http://www.jsp.newmail.ru"
  onMouseOver="up()"  onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic" BORDER=0>  
  </BODY>
</HTML>

Разбор скрипта

  •  Не забывайте про регистр и <script language= "javascript">

function up()
{
document.mypic.src="../files/189/up.gif"
}

function down()
{
document.mypic.src="../files/189/down.gif"
}

  •  Функции выполняют то же, что и команды. Сначала документ, потом имя, присвоенное объекту и наконец SRC. Функции названы up() и down().

<A HREF="http://www.newmail.ru"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0></A>

  •  Oбычно функция используется для многократных повторений.
  •  Если вы решите использовать многократные смены картинок с помощью JavaScript, помните, что каждый раз нужно давать функции и изображению новое имя. Например: вы хотите поместить на страницу еще один такой же скрипт. Для этого создаем новую функцию, копируя предыдущую и добавляя к ее названию цифру 2. Затем меняем имя рисунка на mypic2. Не забудьте поменять его и в строке img src="../files/189/*.gif". Получаем следующее:

<SCRIPT LANGUAGE="JavaScript">

function up() {
   document.mypic.src="../files/189/up.gif"
}
function down() {
   document.mypic.src="../files/189/down.gif"
}

function up2() {
   document.mypic2.src="../files/189/up.gif"
}
function down2() {
   document.mypic2.src="../files/189/down.gif"
}

</SCRIPT>

...и две разные картинки:

<A HREF="http://www.htmlgoodies.com"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0></A>

<a href="http://www.htmlgoodies.com"
onMouseOver="up2()" onMouseOut="down2()">
<IMG SRC="down.gif" NAME="mypic2"
BORDER=0></A>

Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой картинки.

Смотрите задание № 3, которое Вам необходимо выполнить.

Задания

Задание № 1

Перепишите скрипт в виде функции. Если хотите, поэкспериментируйте с делением. Пусть функция запускается командой оnLoad.

Задание № 2

Cоздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.

Задание № 3

Переделайте задание № 2, создав две функции для смены картинки.


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

Первая часть

Цель — познакомиться с использованием JavaScript в формах.

Рассмотрим скрипт, который через форму позволяет выбрать цвет фона.

Формы всегда начинаются командой <FORM> и заканчиваются командой </FORM>.

Скрипт:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function newcolor(color)
{
  alert("Вы выбрали " + color)
  document.bgColor=color
}
</SCRIPT>
</HEAD>
<BODY>
<p>Выбрать цвет фона</p>
<FORM>
 <INPUT TYPE="button" VALUE="Голубой"
      onClick="newcolor('lightblue')">
 <INPUT TYPE="button" VALUE="Розовый"
      onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
      onClick="newcolor('white')">
</FORM>
</BODY>
</HTML>

Разбор скрипта

function newcolor(color)
{
  alert("Вы выбрали " + color)
  document.bgColor=color
}

<FORM>
 <INPUT TYPE="button" VALUE="Голубой"
      onClick="newcolor('lightblue')">
 <INPUT TYPE="button" VALUE="Розовый"
      onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
      onClick="newcolor('white')">
</FORM>

  •  передаем в функцию newcolor() (новый цвет) неизменяемую строку текста, стоящую в скобках ('lightblue'). Она находится в одинарных кавычках, потому что имя функции стоит в двойных.
  •  Когда вы нажимаете кнопку, строка в скобках передается в функцию newcolor().
  •  Функция ждет, пока поступит необходимая ей информация. Ранее в функциях скобки были пустые. Потому что у них были все необходимые данные. В данном случае дополнительная информация поступает в функцию, когда пользователь нажимает на кнопку. Кнопка содержит ту же функцию, только теперь у нее есть необходимые данные, то есть цвет.
    Форма передает цвет двум элементам в разделе <SCRIPT>: методу alert и строке document.bgColor. Получив все данные, функция вступает в действие: всплывает окно и меняется цвет фона.
  •  Не запутайтесь: VALUE (значение) в команде INPUT не является свойством JavaScript, она помещает текст на кнопку.

Вторая часть

Теперь попробуем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo.

Скрипт

<SCRIPT LANGUAGE="JavaScript">
function Gofindit()
{
var search = document.formsearch.find.value;
{
var searchUrl = "http://av.yahoo.com/bin/query?p=" + search;
location.href = searchUrl;}}
</SCRIPT>
<FORM NAME="formsearch">
Найдите в Yahoo:
<INPUT NAME="find" SIZE="40" TYPE="text">
<INPUT TYPE="button" VALUE="
Искать" onClick="Gofindit()">
</FORM>

Разбор скрипта

Необходимо четкое понимание иерархии объектов.

  •  Во-первых, создаем функцию с переменной search(искать), которая будет результатом чего-то, происходящего в объекте document, под названием formsearch, внутри элемента find (найти), который обладает свойством value(значение).
  •  Вторую функцию помещаем внутри первой.
  •  Для второй функции создаем еще одну переменную searchUrl, представляющую собой адрес поисковой машины Yahoo плюс значение переменной search, полученное через команду document.formsearch.find.value.
  •  Наконец, location.href приравнивается к переменной searchUrl. После выполнения функции пользователь попадет на итоговую страницу.
  •  Теперь переходим к командам формы. Их две: текстовое поле, куда пользователь вводит свой запрос, и кнопка, запускающая функцию.
  •  Обратите внимание, что форма в целом получила имя formsearch.
  •  Затем называем текстовое поле find. Опять иерархия.
  •  Дальше соединяем кнопку с командой onClick, которая запускает функцию.
  •  Наконец заканчиваем командой </FORM>. Готово.

Третья часть

Продолжаем рассматривать взаимодействие  форм и JavaScript.

Обычно JavaScript в соединении с формами используется для проверки ввода данных..

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function doit()
{
  alert("document.myform.fname.value — это  "
+ document.myform.fname.value)

  var greeting="Привет, "

  alert(greeting + document.myform.fname.value
+ " " + document.myform.lname.value)

  alert("Количество букв в имени "
+ document.myform.fname.value.length)
}
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME="myform">
  Ваше имя:
      <INPUT TYPE="text" NAME="fname"><p>
  Ваша фамилия:
      <INPUT TYPE="text" NAME="lname"><p>
      <INPUT TYPE="button" VALUE="Отправить" onClick="doit()">
</FORM>
</BODY>
</HTML>

Разбор скрипта

Начнем с элементов формы:

<FORM NAME="myform">
 
Ваше имя:
      <INPUT TYPE="text" NAME="fname"><p>
 
Ваша фамилия:
      <INPUT TYPE="text" NAME="lname"><p>
  <INPUT TYPE="button" VALUE="
Отправить" onClick="doit()">
  </FORM>

Дали форме имя myform. Поле ввода для имени пользователя названо fname, а поле для фамилии — lname. Теперь у каждого элемента есть имя.

Данные, которые введет пользователь, станут значением (value) соответствующих текстовых полей. Тому, что написано в поле fname, будет присвоено имя fname.

Когда пользователь нажмет на кнопку (обработчик события onClick), запустится функция doit().

Теперь посмотрим на функцию:

function doit()
{
  alert("document.myform.fname.value — это  "
+ document.myform.fname.value)

  var greeting="Привет, "

  alert(greeting + document.myform.fname.value + " "
+ document.myform.lname.value)

  alert("Количество букв в имени "
+ document.myform.fname.value.length)
}

Такой передачи данных, как рассматривали в предыдущих частях не происходит. Видите, в скобках функции doit() ничего нет. Но по иерархическим командам понятно, что функция вызывает данные, введенные в форму.

Следуем иерархии объектов: за объектом документ следует объект форма (на него указывает имя формы, myform), за ним следует объект поле формы (на него указывает имя поля, fname), за ним следует свойство значение (value). Без свойства value данные, переданные пользователем, не попали бы в иерархическую команду.

Дальше переменная greeting (приветствие). Приветствие показано в команде alert(greeting).

Когда пользователь нажимает на кнопку, всплывает окно с его именем.

Второе окно включает в себя переменную greeting. Появляется надпись: «Привет, (имя) (фамилия)», составленная с помощью данных, полученных через форму. Еще раз обратите внимание на value.

Наконец всплывает третье окно c неким текстом и вызывает следующее: document.myform.fname.value.length. Этo команда, которая передает длину (length) слова, введенного в поле формы. Если fname содержит «Коля», то длина равна 4. Команда length следует за value.Таким образом она точно сосчитает буквы в тексте, а не что-нибудь другое. length — это тоже свойство.

Задания

Задание по первой части

Перепишите скрипт так, чтобы, открываясь, страница просила пользователя ввести имя. При выборе цвета должно всплывать окно со словами «Эй, (имя)! Вы выбрали (цвет)...» Желаю успеха.

Задание по второй части

Измените скрипт так, чтобы он вызывал другую поисковую систему. И еще, пусть при подаче запроса выскакивает окошко с надписью «Сейчас поищем...»

Задание по третьей части

Составьте документ HTML с формой aform. В ней должно быть два текстовых поля, одно для геометрической фигуры, другое для цвета, и кнопка. Напишите функцию с переменной, которая содержит слова «Мне нравится ». Когда пользователь нажмет на кнопку, должно всплывать окно со следующей надписью:

  1.  Мне нравится геометрическая фигура такого-то цвета. (по результатам тех данных, которые пользователь вводит в форму)
  2.  Покажите длину (length) «фигуры».


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

Часть первая

Рассматривается случайный выбор чисел. Генерируя случайные числа, JavaScript пользуется датой и временем.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function rand()
      {
          var now=new Date()
          var num=(now.getSeconds())%10
          var num=num+1
          alert(num)
      }
</SCRIPT>
</HEAD>
<BODY>
<h1>
Случайное число</h1>
<form> 
   <INPUT TYPE="button"
   VALUE="
Случайное число от 1 дo 10" 
   onClick="rand()">
</FORM>
</BODY>
</HTML>

Разбор скрипта

  •  функция:

function rand()
{
var now=new Date()
var num=(now.getSeconds())%10
var num=num+1
alert(num)
}

  •  Случайный выбор числа осуществляется в несколько шагов:

     Во-первых, создаем функцию, к примеру, rand().

     Потом создаем переменную для метода new Date().

     И еще одну переменную, num. Она содержит метод getSeconds(), так как в данном случае мы воспользуемся секундами, чтобы выбрать случайное число. Элемент %10 говорит скрипту, что нужно выбирать из десяти чисел.

  •  JavaScript, как и многие другие компьютерные языки, начинает отсчет с нуля. Таким образом, прибавляя к случайному числу единицу (num=num+1), мы задаем числа не от 0 до 9, а от 1 до 10.
  •  alert показывает число.
  •  Теперь элемент, запускающий функцию:

<form>
<INPUT TYPE="button" VALUE="
Случайное число от 1 дo 10" onClick="rand()">
</form>

  •  Это обыкновенная кнопка и событие через onClick.

Часть вторая

Рассмотрим  команду IF (если), которая дает возможность выбора.

За IF следует условие и указание, что делать, если оно верно. Верным может быть одно условие или несколько. Скрипт знает, где начинаются и кончаются верные условия, потому что они заключены в {фигурные скобки}.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function askuser() {
var answer=" "
var statement="
Отвечай, да или нет"
var answer=prompt("
Любишь горчицу?")
if ( answer == "да")
{statement="Я тоже обожаю горчицу!"}
if(answer == "нет")
{statement="Я тоже горчицу терпеть не могу!"}
alert(statement)
}
</SCRIPT>
</HEAD>

<BODY>
<h2>Горчица</h2>
<FORM>
<INPUT TYPE="button" VALUE="Жми!" onClick="askuser()">
</FORM>
</BODY>
</HTML>

Разбор скрипта

  •  Начнем с кнопки:

<FORM>
<INPUT TYPE="button" VALUE="
Жми!" onClick="askuser()">
</FORM>

Здесь ничего нового, простая форма с кнопкой, которая запускает функцию askuser() (спросить пользователя).

  •  Фрагмент скрипта с функцией:

function askuser() {
var answer=" "
var statement="
Отвечай, да или нет"
var answer=prompt("
Любишь горчицу?")
if ( answer == "да")
{statement="Я тоже обожаю горчицу!"}
if(answer == "нет")
{statement="Я тоже горчицу терпеть не могу!"}
alert(statement)
}

  •  Значение переменной answer (ответ) равно тому, что введет пользователь по запросу.
  •  На все те случаи, когда пользователь не отвечает «да» или «нет», создается переменная statement (заявление).
  •  Дальше запрос prompt приравнивается к answer. Теперь две переменные под одним именем.
  •  Следом за if идет условие в (круглых скобках).
  •  В условии ставим не один, а два знaка равенства ==! Одинарный знак = используется вне скобок.
  •  Помните, отрезки текста ставятся в кавычки.
  •  Вот как это работает:
    •  Запрашивается ваше мнение;
    •  Скрипт сверяет его с условиями;
    •  Если ответ «да», появляется окно со словами: «Я тоже обожаю горчицу!»
    •  Если ответ «нет», появляется окно со словами: «Я тоже терпеть не могу горчицу!»
    •  Если ответ ни тот, ни другой, тогда переменная answer остается пустой и заявление «Отвечай, да или нет» отсылается в alert.
  •  Помните, что JavaScript чувствителен к регистру. Tо есть если вы напишете «НЕТ» или «Нет», условие не будет выполнено! Чтобы условие было верно, необходимо ввести «нет». Исправить это можно, добавив еще несколько условий IF на все случаи жизни.

Часть третья

Рассматривается случайное число, две функции и  команда Else.

If/Else (если/иначе) дают вам дополнительный контроль над программой, позволяя принимать решения на оба случая: и когда условие выполнено, и когда не выполнено.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function rand()
  {now=new Date()
   num=(now.getSeconds())%10
   num=num+1
   }
function guessnum()
  {guess=prompt("
Угадай, какое?")
   if (eval(guess) == num)
   {alert("
ПРАВИЛЬНО!!!")
    rand()
    }
     else
    alert("
Нет. Попробуй еще раз.")
     
}
  </SCRIPT>
<BODY onLoad="rand()">

  <h3>
Я загадал число от 1 до 10</h3>

  <FORM NAME="myform">

    <INPUT TYPE="button" VALUE="
Угадай"
       NAME="b1" onClick="guessnum()">

  </FORM>
</BODY>
</HTML>

Разбор скрипта

  •  Начнем со строки BODY:

<body bgcolor="хххххх" onLoad="rand()">

На этот раз функция запускается не кнопкой через onClick, а командой onLoad, чтобы к тому времени, когда пользователь нажмет на кнопку, число уже было выбрано.

  •  Первая функция:

function rand() {
now=new Date()
num=(now.getSeconds())%10
num=num+1
}

Функция выбирает наугад число от 0 до 9 и привязывает его к num. Потом прибавляет к num единицу, чтобы выбор осуществлялся между 1 и 10.

  •  Вторая функция:

function guessnum()
  {guess=prompt("Угадай, какое?")
  
if (eval(guess) == num)
   {alert("
ПРАВИЛЬНО!!!")
    rand()
    }
     else
    alert("
Нет. Попробуй еще раз.")
    }

Как это работает:

  •  С помощью запроса создается переменная guess (догадка).
    Функция
    eval() вычисляет или выполняет строку в скобках (выражение, команду или последовательность команд) и подставляет полученное значение вместо себя. Она не является методом какого-либо объекта, но может использовать свойства уже существующего. В данном случае переводит текст, полученный с помощью запроса, в нашу функцию для последующей обработки.
    Обратите внимание на {фигурные скобки}.
    •  Переходим к IF/Else. Если (if) guess (догадка) равна загаданному числу num, тогда запускается команда alert("ПРАВИЛЬНО").
    •  Если это не так, а иначе (else), тогда запускается другая команда alert.
  •  Дальше просто:

<form name="myform">
<input type="button" value="
Угадай" name="b1" onClick="guessnum()">
</form>

Кнопка запускает функцию, которая дает возможность угадать задуманное число.

Часть четвертая

Продолжаем рассматривать команду IF

Скрипт

<SCRIPT LANGUAGE="JavaScript">
   var0="От пирогов не толстеют"
   var1="Кто ходит в гости по утрам"
   var2="До пятницы я совершенно свободен"
  now=new Date()
  num=(now.getSeconds() )%3

   if (num == 0)
    {cliche=var0}
   if (num == 1)
    {cliche=var1}
   if (num == 2)
     {cliche=var2}
  document.write(cliche + "<br>") 
  document.write("Случайная цифра: "
    + num)
</SCRIPT>

</BODY>
</HTML>

Разбор скрипта

  •  Начнем с цифры:

   var0="От пирогов не толстеют"
   var1="Кто ходит в гости по утрам"
   var2="До пятницы я совершенно свободен"
  now=new Date()
  num=(now.getSeconds() )%3
document.write("Случайная цифра: "
    + num)

document.write должна располагаться на одной строке!

  •  Мы создали три переменные. Это неизменяемые фрагменты текста, и потому заключены в двойные кавычки.
  •  Следующий шаг: программа берет случайную цифру с помощью часов вашего компьютера. %3 указывает на то, что будет выбрана цифра между 0, 1 и 2. На этот раз мы не прибавляем к num единицу, так как нам подходит и 0.
  •  Наконец команда document.write() говорит, что выбранная цифра будет показана на странице.
  •  Теперь взглянем на другой фрагмент скрипта:

   if (num == 0)
    {cliche=var0}
   if (num == 1)
    {cliche=var1}
   if (num == 2)
     {cliche=var2}
  document.write(cliche + "<br>") >

  •  Помните, что условия после IF требуют двойного знака равенства ==. 
  •  Если условие верно, будет выполнена команда, заключенная в {фигурные скобки}. Возможны только три результата, поэтому мы написали три условия, чтобы одно из них оказалось верным.
  •  Обратите внимание еще раз, что условие заключено в (круглые скобки), а результат в {фигурные}.
  •  Наконец команда document.write(cliche) напишет на странице то изречение, которое было присвоено переменной cliche (см. начало скрипта).

ЗАДАНИЯ

Часть первая

Напишите программу JavaScript, в которой пользователь нажимал бы кнопку, а программа предлагала бы ему случайную цифру от 0 до 5 со словами: "Ваша случайная цифра: "х".

Часть вторая

Перепишите программу так, чтобы она спрашивала, какого вы пола. Пусть в зависимости от ответа меняется фоновый цвет страницы. Помните, что в JavaScript различаются строчные и заглавные буквы, так что будьте внимательны в своих условиях.

Часть третья

Измените сегодняшний скрипт так, чтобы при неверной догадке он сообщал пользователю, что он назвал слишком большое или слишком маленькое число.

Часть четвертая

Измените программу так, чтобы она показывала рисунок, выбранный наугад из трех: pic1.gif, pic2.gif и pic3.gif.


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

Часть первая

Посмотрите на скрипт и попробуйте сами разобраться, как и что он делает. А лучше всего постарайтесь изменить его. В данном случае пользователь щелкает по ссылке и переходит к следующей картинке. Используем команду If и переменную num.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
  var num=1
  img1 = new Image ()
  img1.src = "leo.gif"
  img2 = new Image ()
  img2.src = "dino.gif"
  img3 = new Image ()
  img3.src = "rhino.gif" 
function slideshow()
  {
   num=num+1
   if (num==4)
    {num=1}
document.animal.src=eval("img"+num+".src")
   }
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="leo.gif" NAME="animal" BORDER=0>
<p>

<A HREF="JavaScript:slideshow()">
   Щелкните, чтобы увидеть следующую картинку</A>

</CENTER>
</BODY>
</HTML>

Разбор скрипта

Разобьем его на две части:

<SCRIPT LANGUAGE="javascript">
          var num=1
          img1 = new Image ()
          img1.src = "leo.gif"
          img2 = new Image ()
          img2.src = "dino.gif"
          img3 = new Image ()
          img3.src = "rhino.gif"  

  •  num=1 не находится внутри функции. Да и вообще ни одна команда не находится внутри функции. num — это переменная. Указывая ее в начале скрипта вне функции, мы делаем ее глобальной переменной, то есть доступной для любой функции.
  •  img1 = new Image() объявляет новый объект image (рисунок). img1.src= источник объекта, файл, в котором хранится картинка. Это стандартная схема. img1 хранится в leo.gif ; img2 хранится в dino.gif.
  •  (В скобках) содержится информация о ширине и высоте рисунка. Это не обязательно, но желательно.
  •  Рисунки тоже доступны для любой функции. Таким образом, программа загружает рисунки в память компьютера. Для следующего примера это будет еще важнее. Пользователь не хочет ждать, пока каждая картинка будет загружаться с сервера.

Теперь часть №2:

function slideshow()
{
num=num+1
if (num==4)
  {num=1}
document.animal.src=eval("img"+num+".src")
}
</script>
</head>
<body>

  •  Первоначальное значение num равно 1. Это было еще в первом фрагменте. Когда пользователь щелкает по строчке текста, запускается функция slideshow.
  •  slideshow() прибавляет к num единицу. Когда num доходит до 4, то возвращается к 1. document.animal.src меняется на img плюс значение num и плюс .src. Например, если num = 1, то document.animal.src становится img1.src.
  •  Обратите внимание, что команда eval() преобразует img1.src в указание на источник изображения. Без нее это был бы простой набор букв.

И наконец:

<a href="JavaScript:slideshow()">Щелкните,
чтобы увидеть следующую картинку</a>

  •  Новое заключаетс яв вызове скрипта, а не функции. Так используются все части скрипта, а не только те, что стоят внутри функции. Если вы напишете функцию по обычной схеме, то у вас не будет рисунков, потому что они останутся за скобками.

В Эксплорере работает и обычная схема, то есть:
<a href="" onClick="slideshow()">Щелкайте</a>

Часть вторая

Снова придется вернуться к формам. В попробуем проверить данные, которые ввел пользователь. Нужно будет ввести в форму свое имя и номер телефона из 7 или 9 знаков (ххххххх или ххх-хх-хх). Подтверждение данных часто имеет большое значение.

Этот пример возвращает нас к свойству length (длина) и показывает в действии два новых метода: indexOf(), charAt(). Сам скрипт будет длиннее, чем обычно.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function validfn(fnm)
{
fnlen=fnm.length
if (fnlen == 0)
{alert("Вы должны ввести свое имя")
document.dataentry.fn.focus()}
}
function validphone(phone)
{
len=phone.length
digits="0123456789"
if(len != 7 && len != 9)
{alert("Неверное количество знаков в номере")
document.dataentry.phone.focus()}

for(i=0; i<3; i++)
{if (digits.indexOf(phone.charAt(i))<0)
{alert("Это должны быть цифры")
document.dataentry.phone.focus()
break}
}

}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="dataentry">
<h2>Подтверждение данных</h2>

Введите свое имя:<br>
  <INPUT TYPE="text" NAME="fn"
    onBlur="validfn(fn.value)">

<SCRIPT LANGUAGE="JavaScript">
  document.dataentry.fn.focus()
</SCRIPT>

Введите номер телефона (ххх-хх-хх):<br>
    <INPUT TYPE="text" NAME="phone" SIZE=10 >

<INPUT TYPE="button"  VALUE="Отправить"
     onClick="validphone(phone.value)">

</BODY>
</HTML>

Разбор скрипта

В скрипте две функции, validfn() и validphone(). Одна проверяет, введено ли имя, другая проверяет телефонный номер. Рассмотрим первую:

function validfn(fnm)
{
  fnlen=fnm.length
  if (fnlen == 0)
  {alert("Вы должны ввести свое имя")
  document.dataentry.fn.focus()}
  }
  .....
 
<body>
  .....

<INPUT TYPE="text" NAME="fn"
   onBlur="validfn(fn.value)">

  •  Функция validfn(fnm) вызывается обработчиком события onBlur. onBlur запускается, когда курсор переходит на следующий элемент, в данном случае, когда мы выходим из текстового поля fn.
  •  Заметьте, что параметр fn.value передается из формы в функцию, где получает новое имя fnm. fn.value можно было бы обозначить как document.dataentry.fn.value, но раз мы находимся в документе и внутри формы, это не обязательно.
  •  Помните, содержимое поля формы передает команда имя_формы.value. Одного имени мало.
  •  Длине имени пользователя присвоена переменная fnlen. Таким образом, если пользователь введет имя Коля, значение fnlen будет равно 4. Помните свойство length?
  •  Если пользователь не вписал свое имя, значит, длина равна 0. Тогда программа вызывает окно с сообщением об ошибке, и ставит курсор или focus на прежнее место. Форма не столько проверяет, правильно ли вписано имя, сколько было ли что-нибудь вписано вообще.
  •  Теперь посмотрим, как программа проверяет телефонный номер:

function validphone(phone)
{
len=phone.length
digits="0123456789"
if(len != 7 && len != 9)
{alert("Неверное количество знаков в номере")
document.dataentry.phone.focus()}

for(i=0; i<3; i++)
{if (digits.indexOf(phone.charAt(i))<0)
{alert("Это должны быть цифры")
document.dataentry.phone.focus()
break}
}

  •  Во-первых, длине телефонного номера присваивается переменная len. Переменная digits содержит все цифры.
  •  Потом команда If проверяет, равна ли длина номера 7 или 9 знакам, хотя и звучит это несколько неуклюже. Двойной знак && в Javascript означает «проверить оба свойства».
  •  Если условие не выполнено, программа говорит пользователю о том, что он ввел неверное количество цифр, и снова устанавливает курсор или focus в поле для ввода.
  •  for(i=0; i<3; i++) проверяет первые 3 цифры номера одну за другой.
  •  if (digits.indexOf(phone.charAt(i))<0) знакомит нас с двумя новыми методами: indexOf() и charAt().
  •  Посмотрим на phone.charAt(i). Предположим, телефонный номер 123, и i = 2. Знак на второй позиции — цифра 3. Это не опечатка! Помните, порядковые номера начинаем считать с нуля. Таким образом, phone.charAt(0) = 1, phone.charAt(1) = 2, a phone.charAt(2) = 3!
  •  indexOf — это метод, дающий порядковый номер для заданного значения. При if (digits.indexOf(phone.charAt(i))<0), JavaScript ищет значение phone.charAt(i) в переменной digits.

Если телефонный номер 1234567 и i = 1, то программа ищет вторую цифру в переменной digits и находит ее, возвращая значение 1, так как digits = «0123456789».

Если номер телефона 12д и i = 2, программа ищет «д»; в переменной digits. Не найдя ее, она возвращает -1. Если значение = -1 (<0), тогда появляется окно с сообщением об ошибке и курсор или focus устанавливается на прежнее место. Для телефонного номера ххххххх так можно проверить все 7 цифр.

  •  И последнее — код HTML для формы:

Введите свое имя:<br>
  <INPUT TYPE="text" NAME="fn"
    onBlur="validfn(fn.value)">

<SCRIPT LANGUAGE="JavaScript">
  document.dataentry.fn.focus()
</SCRIPT>

Введите номер телефона (ххх-хх-хх):<br>
    <INPUT TYPE="text" NAME="phone" SIZE=10>

<INPUT TYPE="button"  VALUE="Отправить"
     onClick="validphone(phone.value)">

  •  Используя JavaScript с формами, давайте каждому элементу уникальное имя, которое потом будет обозначено в скрипте.

Задания

Задание к первой части

Перепишите скрипт. Покажите первым leo.gif, как в примере. Однако дальше новый cкрипт должен показать img3.src (num=3), потом img2.src, потом img1.src. Когда num=0, измените num на 3.

В общем, перепишите скрипт задом наперед.

Задание ко второй части

Во-первых, изучите сегодняшнюю программу и заставьте ее работать. Потом внесите несколько изменений. Попросите ввести телефонный номер в формате ххх-хххх. Пусть функция validphone(phone) проверит, стоит ли дефис на позиции 3. Команда != в JavaScript означает «не равно». Это вам понадобится.

 




1. биологические и социальнопсихологические факторы влияющие на внутриутробное развитие плода в разные срок
2. ТЕМА - Историческая тема в русской литературе 4 у
3. ЭКО Каскад осуществляет ведение государственной статистической отчётности по формам- 2ТП воздух 2ТП от
4. Генрих Густавович Нейгауз
5. Семей уезiнi~ о~т~стiк шегарасы ж~не е~ бастысы Шы~~ыс тауы ескерткiштерiмен ма~ызды м~нге ие деп жазды ~алы
6. Утверждаю Ректор ФГАОУ ВПО Уральского федерального университета имени первого Президента России Б1
7. О СЕБЕ И СВОЁМ ДЕЛЕ ВОСПОМИНАНИЯ СТАТЬИ ПИСЬМА С ПРИЛОЖЕНИЕМ ВОСПОМИНАНИЙ О ХУДОЖНИКЕ СОСТ
8. Реферат по истории Карибский кризис 1962 г.html
9. Лабораторная работа 13Обработка двумерных массивов на языке Турбопаскаль Цель работы- Закрепить умение со
10. 1054 великий князь Киевский с 1019 сын Владимира I Святого