ИЗУЧЕНИЕ ОСНОВ ЯЗЫКА JavaScript

ИЗУЧЕНИЕ ОСНОВ ЯЗЫКА JavaScript

 

 

Методические указания

По выполнению лабораторных работ

Уфа

РИЦ БашГУ

 

 

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

Протокол № 7 от 25.03.2014 г.

 

 

Составитель: д.ф.-м.н., профессор Делев В.А.

 

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

Методические указания предназначены для студентов и бакалавров факультета математики и информационных технологий БашГУ, изучающих дисциплины «Современные Web-технологии», «Проектирование в среде Интернет», «Основы Web-программирования», «Основы Web-дизайна» (направления подготовки: 230700 – Прикладная информатика; 010400, 010500, 010501 – Прикладная математика и информатика; 010300 – Фундаментальная информатика и информационные технологии).

Содержание:

Введение. 4

Лабораторная работа №1. Порядок запуска скриптов. 8

Лабораторная работа №2. Методы ввода информации. 10

Лабораторная работа №3. Текстовая область textarea и интерактивные формы. 15

Лабораторная работа №4. Методы вывода информации. 19

Лабораторная работа №5. События. 22

Лабораторная работа №6. Арифметические и логические операции. 28

Лабораторная работа №7. Операции со строковыми переменными. 31

Лабораторная работа №8. Математические функции и константы. 33

Лабораторная работа №9. Регулярные циклы. 36

Лабораторная работа №10. Операторы условной передачи управления if-else(cond) и switch(x). 37

Лабораторная работа №11. Создание окон. 41

Лабораторная работа №12. Примеры скриптов. 44

Контрольные вопросы.. 47

 

 

Введение

 

JavaScript – это объектно-событийный язык сценариев. В этом определении содержатся три ключевых понятия: сценарий, событие и объект.

Сценарий (скрипт, script) – программа, которая расширяет возможности языка HTML. Скрипты обрабатываются (интерпретируется) браузером одновременно с кодом HTML.

Событие – действие пользователя или операционной системы, которое вызывает запуск скрипта (программы). В качестве примера произошедших событий можно назвать: нажатие клавиши на клавиатуре, щелчок мышью, открытие окна браузера, срабатывание таймера.

Объект – контейнер, содержащий данные. Объект обладает свойствами и методами, предназначенными для изменения этих свойств. Сценарии позволяют изменять свойства объекта в соответствии с планом, разработанным дизайнером. Объектами являются: окно браузера (window), Web-страница (document), фрейм (frame), текстовое поле (text), кнопка (button). Часть объектов находятся в состоянии соподчиненности друг к Другу (иерархии). Старшие объекты включают в себя младшие объекты. Например, Web-страница (document) может содержать внутри себя форму (form), которая может быть реализована в виде текстового поля (text).

Свойства – совокупность переменных, которые характеризуют объект, например, ширина и высота окна браузера.

Методы – функции (подпрограммы), которые позволяют изменять свойства объекта (а значит и сам объект). Характерной синтаксической особенностью методов является то, что их имена заканчиваются скобками. Например, open(), close(), write(). Кроме того, имена методов чаще всего являются глаголами, которые указывают на выполняемые действия: открыть, закрыть, написать.

Программистами создано большое число оригинальных скриптов (программ-сценариев обработки каких-либо событий с последующим изменением свойств объектов). Скрипты позволяют создавать разнообразные эффекты и выполнять различные действия, например: изменять цвет и форму кнопки при наведении на нее курсора, определять версию браузера клиента, выводить на экран местное время, изменять цвет фона страницы и т.д. При создании скрипта у программистов имеется большой простор для творчества Можно выбирать разные события, от которых происходит запуск скрипта. Программист самостоятельно определяет, на какой объект будут направлены запанированные им действия.

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

Язык JavaScript существенно отличается от процедурных (алгоритмических) языков. Работа программ, написанных на алгоритмических языках, идет практически непрерывно от момента их запуска до момента завершения. Скрипты – это множество программ, которые работают чаще всего независимо друг от друга и каждая программа запускается автономно при определенных действиях пользователя. По этой причине этот язык иногда называют интерактивным. При отсутствии активных действий пользователя скрипты не будут работать (за исключением, может быть, сценариев, которые запускаются с помощью таймера или в момент полной загрузки Web-страницы). Большую часть времени скрипты «дремлят», ожидая активных действий пользователя.

Язык JavaScript разработан фирмой Netscape (1995 г.). В противовес этому языку фирма Microsoft создала язык VBScript. Однако язык VBScript поддерживается только браузерами Internet Explorer, поэтому язык JavaScript получил большее распространение в Web-дизайне. Порой этот язык называют межбраузерным, так как он одинаково успешно работает на разных типах браузеров (Internet Explorer, Netscape Navigator, Opera). Язык JavaScript расширяет возможности языка HTML за счет того, что позволяет программно изменять значения атрибутов HTML. При этом происходящие изменения наблюдаются без перезагрузки Web-страницы.

Рассмотрим основные сведения об этом языке. Элементами языка являются:

· Константы.

· Переменные.

· Функции.

· Операторы.

· Выражения.

· Константы – величины, которые не изменяют своих значений в процессе работы скрипта. Константы бывают следующих типов:

· Целые (десятичные, восьмеричные, шестнадцатеричные).

· С плавающей точкой.

· Строковые.

· Булевы (логические).

Константа null, означающая отсутствие каких-либо значений (другими словами, null – это ничего нет, пусто).

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

Переменные могут быть глобальными и локальными. Локальные переменные действуют только внутри функции, глобальные переменные действуют в рамках всей составленной программы. Однако и глобальные переменные действуют лишь в пределах одной Web-страницы.

Имена переменных должны начинаться с буквы или с символа подчеркивания. В именах допустимо использование арабских цифр. Имена не могут содержать пробелов. Они не должны совпадать с ключевыми (зарезервированными) словами языка JavaScript. Перечень ключевых слов можно найти в различных литературных источниках. Например, в [7].

Так же как и константы, переменные могут быть целыми, с плавающей точкой, строковыми и булевыми. Перед использованием переменные должны быть объявлены. Делается это так:

var = vol_sound;

var y 12 = 3.123;

var x = "Alisa";

В приведенном примере объявлены три переменные. Причем для переменных у 12 и х сразу определен их тип (соответственно с плавающей точкой и строковая переменная).

Переменные могут быть сгруппированы в массивы. Массив – это пронумерованный набор переменных, называемых элементами массива. Порядковые номера элементов (переменных) называют индексами.

Функция – логически завершенный фрагмент программы, предназначенный для решения (реализации) определенной задачи. Каждая функция имеет оригинальное (неповторяющееся) имя. Одна и та же функция может быть многократно вызвана в разных местах программы.

Операторы – конструкции, которые определяют, какие действия производятся над константами, переменными, функциями. Операторы бывают следующих типов:

· Присваивания.

· Сравнения.

· Арифметические,

· Инкремента и декремента.

· Битовые.

· Логические.

· Строковые.

· Специальные,

· Управляющие.

· Цикла.

Выражения – набор констант, переменных, функций, соединенных операторами. Каждое выражение в языке JavaScript должно заканчиваться точкой с запятой.

Программа, написанная на языке JavaScript, чаще всего размещается внутри HTML-кода, например, внутри контейнера из тегов head. Границы сценария отмечают при помощи парного тега script. Заметим, что существует возможность разместить код скрипта в отдельном файле. В этом случае можно вызывать один и тот же сценарий на разные HTML-страницы.

Для языка JavaScript важным понятием является «объектная модель». Образно это понятие можно представить так. Существует несколько ящиков, внутри которых лежат матрешки. Чтобы положить записку в нужную матрешку следует открыть соответствующий ящик и все матрешки, которые охватывают выбранную программистом матрешку. Возвращаясь к реальным объектам можно сказать: ящики - это окна браузеров (их может быть открыто несколько). Матрешками являются: документы (Web-страницы), фреймы... Для того чтобы выбрать нужное свойство объекта следует указать полный путь к нему: объект1.объект2.объект3.свойство. Одна из реальных конструкций вложенных объектов может быть такой: win* dow3.document.forma2.textl.value=Proba. Подобная конструкция может использоваться для записи слова "Proba" в текстовое поле с именем textl формы forma2, которые находятся внутри окна window3. По структуре объектная иерархия напоминает файловую систему, в которой фигурируют диски, папки и файлы.

Таким образом, язык JavaScript используется для расширения возможностей языка HTML. Основными понятиями, которыми оперирует язык JavaScript, являются: объекты, события, методы, свойства.

Сценарии, написанные на JavaScript, обладают наибольшей совместимостью со всеми типами браузеров.

Function func()

{

alert("Простейший скрипт, код которого расположен между тегами head");

}

</script>

</head>

<body>

<input type="Button" value="Щелкните" onclick="func()">

</body>

</html>

Внешним проявлением работы скрипта станет изображение командной кнопки.

При щелчке по изображенной кнопке появится сообщение:

Анализируя листинг приведенного скрипта, можно сказать, что код скрипта и обработчик событий находятся на одной Web-странице, Для запуска сценария используются объект – кнопка (Button) и событие – щелчок (click), которое с помощыо обработчика события onclick активизирует функцию func(). Функция func(), в свою очередь, осуществляет вывод информации на экран с помощью метода alert(). Тело скрипта отделяется от заголовка Web-страницы с помощью парного тега script. В открывающем теге скрипта указано имя языка (language) – JavaScript. Заметим, что код скрипта может располагаться практически в любом месте HTML-страницы (даже за пределами HTML-контейнера).

 

Упражнение 1.2. Наберите следующий HTML-код в текстовом редакторе Блокнот и сохраните его в своей папке с именем run_script_2.htm.

<html>

<head>

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

<script language="JavaScript" src="script2.js"></script>

</head>

<body>

<input type="Button" value="Щелкните" onclick="func2()">

</body>

</html>

 

Затем создайте файл:

Function func2()

{

alert("Скрипт расположен во внешнем файле script2.js");

}

В данном случае сценарий располагается в отдельном файле с именем script2.js. Имя файла и путь к нему указывается с помощью атрибута src (источник). Подсоединение этого файла к HTML-коду осуществляется с помощью строки:

<script language="JavaScript" src="script2.js"></script>

Данная строка располагается между тегами head.

Запуск скрипта можно осуществить с помощью командной кнопки, как это показано ниже:

<input type="Button" value="Щелкните" oncIick="func2()”>

В результате действия этого кода появится изображение командной кнопки

Щелчок по этой кнопке приведет к выполнению сценария и появлению следующего сообщения:

Третий способ запуска созданных скриптов предполагает использование гиперссылки (псевдо-URL).

Упражнение 1.3. Наберите следующий HTML-код в текстовом редакторе Блокнот и сохраните документ в своей папке с именем run_script_3.htm.

<html>

<head>

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

</head>

<body>

<a href="javascript:alert('Скрипт запущен с помощью гиперссылки');">Щелкните здесь</a>

</body>

</html>

В результате работы скрипта на экране появится гиперссылка:

При щелчке по гиперссылке появится окно:

 

Function conf()

{

var x=confirm("Нажмите кнопку ОК или Отмена");

alert("Результат:"+ x);

}

</script>

</head>

<body>

<input type="Button" name="but1" value="Запуск метода confirm()"

onclick="conf()">

</body>

</html>

В случае, когда в программу достаточно ввести всего два значения, например, «да» или «нет», то удобно использовать метод confirm(). Диалоговое окно этого метода содержи две кнопки ОК и Отмена.

С помощью этих кнопок формируются две логических величины: true – при нажатии ОК и false – при нажатии Отмена. Введенные значения затем могут быть использованы по усмотрению дизайнера.

В данном HTML-коде функции дано имя conf. Переменной x присваивается значение, введенное с помощью метода confirm(). Результат выбора одной из двух кнопок (ОК или Отмена) выводится с помощью метода alert(). Запуск программы осуществляется с помощью события onclick, возникающего при щелчке по кнопке «Запуск метода confirm()».

 

Упражнение 2.2. Наберите следующий HTML-код в Блокноте и сохраните документ в своей папке с именем method_prompt().htm.

<html>

<head>

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

<script language="JavaScript">

Function summ()

{

var x=prompt("Введите число x","");

var z=prompt("Введите число z","");

x=parseFloat(x);

z=parseFloat(z);

var y=x+z;

alert("Результат сложения y="+ y);

}

</script>

</head>

<body>

<input type="Button" value="Щелкните"

onclick="summ()">

</body>

</html>

Метод prompt() позволяет вводить значение переменной с клавиатуры. В данной программе двум переменным x и z поочередно присваиваются некоторые числа. Затем находится сумма этих переменных y=x+z. Результат выводится на экран с помощью метода alert(). Запуск скрипта происходит с помощью командной кнопки:

После щелчка по кнопке появится диалоговое окно, в которое нужно ввести первое слагаемое.

В следующее диалоговое окно нужно ввести второе слагаемое:

Результат операции появится в новом окне:

Преобразование строковых переменных в числовой формат с плавающей запятой осуществляется с помощью функции parseFloat(). Если строковую переменную нужно перевести в целочисленную, то используют функцию parseInt(). Без указанных функций преобразования будет выполнена операция конкатенации (соединения) двух строковых значений x и z. Т.е. при вводе двух чисел 3 и 5 вместо ожидаемого ответа 8 появится строковое значение 35.

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

Упражнение 2.3. Убедитесь в этом самостоятельно, изменив HTML-код, приведенный в Упражнении°2.2 соответствующим образом. Сохраните файл как method_prompt()_1.htm.

Упражнение 2.4. В данном упражнении ввод информации производится с помощью текстового поля. Создайте и сохраните файл как.

<html>

<head>

<title>Ввод информации с помощью текстового поля</title>

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

<form name="form1">

<input type="text" name="text1" size="30" value="В это поле введите Ваше имя" onblur="check()">

</form>

<script language="JavaScript">

function check() {

var d=document.form1.text1.value;

alert("Приятно с Вами познакомиться, "+d);

}

</script>

</head>

<body>

<input type="Button" value="Нажмите после ввода имени" onclick="cheсk()">

</body>

</html>

Если в текстовое поле ввести имя Вася, то после нажатия кнопки «Нажмите после ввода имени» выполнится скрипт и на экране появится сообщение:

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

Упражнение 2.5. Создайте и сохраните файл как textfield_summ.htm.

<html>

<head>

<div align="center">

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

Введите слагаемые:

<form name="form2">

Первое слагаемое

<input type="text" name="text11" size="5" value="0"><br>

Второе слагаемое

<input type="text" name="text21" size="5" value="0"><br><br>

<input type="Button" value="Результат суммирования"

onclick="summ()">

</form>

<script language="JavaScript">

Function summ()

{

var a=document.form2.text11.value;

var b=document.form2.text21.value;

var c=1*a+1*b;

alert(a+"+"+b+"="+c);

}

</script>

</div>

</head>

<body>

</body>

</html>

Скрипт запускается после нажатия на кнопку «Результат суммирования».

В теле скрипта считывание переменных «a» и «b» происходит путем прохода всей иерархии объектов: документ – форма – текстовое поле – введенное значение.

Преобразование текстовых переменных в числовые осуществляется их умножением на единицу.

Function Rbut()

{

otv=document.Test2.Otv[1].checked;

if(otv){alert("Потрясающе!");}

else {alert("Увы…");}

}

</script>

</body>

</html>

Для запуска тестирующего скрипта нужно активировать одно из полей переключателя и нажать на кнопку «Проверка решения». В результате этого на экране появится одно из двух сообщений:

 

Первое слагаемое

<input type="text" name="text11" size="5" value="0"><br>

Второе слагаемое

<input type="text" name="text21" size="5" value="0"><br><br>

<input type="Button" value="Вычислить" onclick="summ()"><br><br>

Результат

<input type="text" name="text31" size="5" value="">

</form>

</body>

</html>

В данном скрипте поля, предназначенные для ввода информации, имеют имена text11 и text21. Вывод информации происходит в поле с именем text31. Форме дано имя form2. Функция summ() осуществляет считывание двух чисел из полей text11 и text21, преобразование строковых переменных в числовые, их суммирование и вывод результата в поле text31. Первому слагаемому дано имя “a”, второму слагаемому – имя “b”, а результату суммирования – имя “c”.

 

Упражнение 4.3. Вывод информации с помощью созданных окон.

Информацию можно выводить в отдельные окна. Рассмотрим скрипт, который создает два окна (okno1 и okno2). Для создания окон используется метод open(). Формирование окон и запись в них информации происходит с помощью двух функций с именами winopen1() и winopen2(). Запускются указанные функции с помощью двух кнопок, в момент щелчка по ним. Одновременное закрытие созданных (открытых) окон происходит с помощью метода close() и соответствующей кнопки.

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>Вывод информации с помощью текстового поля</title>

</head>

<body>

<script>

Function winopen1()

{

okno1=window.open("","","top=150, left=250, width=150, height=80");

Okno1.document.write("Как дела?");

}

Function winopen2()

{

okno2=window.open("","","top=300, left=250, width=150, height=80");

Okno2.document.write("Всё в порядке.");

}

Function winclose()

{

okno1.close();

okno2.close();

}

</script>

<input type="Button" value="Создать окно 1" onclick="winopen1()">

<input type="Button" value="Создать окно 2" onclick="winopen2()">

<input type="Button" value="Закрыть окна" onclick="winclose()">

</body>

</html>

Function Fsob1()

{

alert("Сценарий запущен в момент касания указателем мыши кнопки «Коснитесь»");

}

</script>

</head>

<body>

<input type="Button" value="Коснитесь!" onmouseover="Fsob1()">

</body>

</html>

Событие onmouseover="Func()" запускает функцию Func() в момент соприкосновения указателя мыши с объектом – кнопкой «Коснитесь!».

 

 

В результате на экране появится следующее сообщение:

 

 

Упражнение 5.2. Событие onclick="Func()".

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>События</title>

<script language="JavaScript">

Function Fsob2()

{

alert("Сценарий запущен в момент щелчка по кнопке");

}

</script>

</head>

<body>

<div align="center">

<input type="Button" value="Щелкните" onclick="Fsob2()">

</div>

</body>

</html>

При щелчке по кнопке

Происходит запуск сценария, результат работы которого показан ниже:

 

Упражнение 5.3. Событие ondblclick="Func()".

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>События</title>

<script language="JavaScript">

Function Fsob3()

{

alert("Сценарий запущен с помощью двойного щелчка по кнопке");

}

</script>

</head>

<body>

<div align="center">

<input type="Button" value="Нужен двойной щелчок!" ondblclick="Fsob3()">

</div>

</body>

</html>

 

Результат выполнения двойного щелчка по кнопке

 

 

показан ниже:

 

 

Упражнение 5.4. Событие onmouseout="Func()".

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>События</title>

<script language="JavaScript">

Function Fsob4()

{

alert("Сценарий запущен в момент выхода указателя мыши с кнопки");

}

</script>

</head>

<body>

<div align="center">

<input type="Button" value="Проведите по кнопке!" onmouseout="Fsob4()">

</div>

</body>

</html>

 

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

 

 

 

Упражнение 5.5. Событие onmousedown="Func()".

Самостоятельно напишите HTML-код сценария, который запускается в момент нажатия кнопки «Нажмите».

 

Упражнение 5.6. Событие onmouseup="Func()".

Самостоятельно напишите HTML-код сценария, который запускается в момент отпускания кнопки «Срабатывает при отпускании!». Проверьте, что при этом нажатие кнопки может происходить в другом месте страницы. Если же нажатие и отпускание кнопки мыши происходит на кнопке «Срабатывает при отпускании!», то действие события onmouseup ничем не отличается от действия onclick.

 

Упражнение 5.7. Событие onkeypress="Func()".

Событие onkeypress="Func()" активизирует функцию Func() в момент нажатия клавиши на клавиатуре. В данном упражнении скрипт позволяет выводить на экран кодовую таблицу CP-1251 для латинских букв, цифр, знаков препинания и т.п. Для букв русского алфавита выводимые коды не соответствуют CP-1251.

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>События</title>

</head>

<body>

<p align="center">

Function Fpress()

{

code=window.event.keyCode;

window.document.Formpress.InpText2.value="Код CP=1251 для нажатой клавиши равен..." + code;

}

</script>

<form name="Formpress">

<input type="text" name="InpText" value="" size="4" onkeypress="Fpress()">

<p align="center">

<input type="text" name="InpText2" value="Код CP-1251 для нажатой клавиши равен... " size="50">

</form>

</body>

</html>

Выводимый скриптом код будет синхронно изменяться с введением очередной буквы.

 

Упражнение 5.7. Событие onkeyup="Func()".

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>События</title>

<script language="JavaScript">

Function Fpress2()

{

alert("Сценарий запущен в момент отпускания клавиши");

}

</script>

<div align="center">

Введите символ<br><br>

<form name="Formpress2">

<input type="text" name="InpText" value="" size="4" onkeyup="Fpress2()">

</form>

</head>

<body>

</body>

</html>

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

Else

{alert("Как хорошо быть женщиной! Не надо утром бриться.");}

}

</script>

</head>

<body>

<div align="center">

<input type="Button" value="Запуск скрипта" onclick="Fit()">

</div>

</body>

</html>

 

В зависимости от сделанного выбора появится одно из двух сообщений:

 

 

 

Метод confirm() формирует значение true (Истина), если щелкнуть по кнопке «OK». При щелчке по кнопке «Отмена» этот метод присваивает переменной pol значение false. Проверка истинности выражения осуществляется с помощью выражения (pol==true).

ВНИМАНИЕ! Использование одного знака равенства при проверке истинности условия является типичной ошибкой при программировании.

Более сложная конструкция оператора условной передачи управления может включать несколько направлений ветвлений.

ЕСЛИ (УСЛОВИЕ 1 истинно), ТО выполнить {группу ОПЕРАТОРОВ 1}

ЕСЛИ (УСЛОВИЕ 2 истинно), ТО выполнить {группу ОПЕРАТОРОВ 2}

ЕСЛИ (УСЛОВИЕ 3 истинно), ТО выполнить {группу ОПЕРАТОРОВ 3}

……………..

ИНАЧЕ выпонить {группу ОПЕРАТОРОВ n}.

 

Упражнение 10.2. Несколько направлений ветвлений if-else.

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>Регулярные циклы</title>

<script language="JavaScript">

function Fit2() {

var let1=document.Formif.Field1.value;

var let=parseInt(let1);

if(isNaN(let)==true)

alert("Нужно вводить числа, а не текст!");

else if (let<=0)

alert("Вы уверены? Вы – эмбрион?");

else if (let>0&&let<=7)

alert("Только в этом возрасте бывают настоящие друзья и верные подруги!");

else if (let>7&&let<=17)

alert("Школьные годы чудесные! Хочется быстрее повзрослеть.");

else if (let>17&&let<=23)

{alert("Нужно получить высшее образование! Найти вторую половину.");}

else if (let>23&&let<=50)

alert("Работа. Работа! Не забыть купить машину, дачу, съездить в Гондурас.");

else if (let>50&&let<=65)

alert("Опять хочется идти в детский сад, школу… Совсем не хочется идти на работу, заниматься домашним хозяйством.");

else if (let>65&&let<=100)

alert("Теперь можно отдохнуть. Посмотреть, как бессмысленно суетятся эти молодые люди.");

else if (let>100&&let<=150)

alert("Для Вашего возраста Вы прекрасно управляетесь с вычислительной техникой! Поступайте в нашу академию на

специальность Программирование.");

Else

alert("Вам приходилось встречаться со Львом Толстым?");

}

</script>

<form name="Formif">

<input type="Text" name="Field1" value="0" size="4"><br><br>

<input type="Button" value="Запуск" onclick="Fit2()">

</form>

</head>

<body>

</body>

</html>

 

Упражнение 10.3. Переключатель switch(x).

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>Регулярные циклы</title>

<script language="JavaScript">

function Fif3() {

var kol=document.Formif2.Field2.value;

var kol=parseInt(kol);

switch(kol) {

case 1: alert("Первый период жизни человека – астрономический.\nВозвышенные мечты, интерес к звездам…");

break;

case 2: alert("Второй период жизни человека – семафорный.\nВсё безразлично…");

break;

case 3: alert("Третий период жизни человека – агрономический.\nПоявляется естественней интерес к земле…");

break;

default: alert("Введено число, отличное от 1, 2 и 3.");

}

}

</script>

<body>

<div align="center">

Введите одно из трех чисел 1, 2 или 3.<br><br>

<form name="Formif2">

<input type="Text" name="Field2" value="" size="3"><br><br>

<input type="Button" value="Запуск" onclick="Fif3()">

</head>

<div>

</body>

</html>

Лабораторная работа №12. Примеры скриптов.

Упражнение 10.1. Анимация в строке-заголовка браузера.

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>Анимация в заголовке браузера</title>

<script language="JavaScript">

var tit=document.title

// Переменной tit присвоено содержимое контейнера title (текст заголовка)

var c=0;

Function writetitle()

// Для функции определено имя writetitle

{

document.title=tit.substring(0,c);

// смена заголовка на переменную tit (количество выводимых символов = с)

if(c==tit.length)

// Проверка равенства переменной c числу символов в заголовке

{

c=0;

setTimeout("writetitle()", 2000)

// Пауза до очередного вывода текста составляет 2000 миллисекунд = 2 секунды

}

Else

{c++;

setTimeout("writetitle()", 100)

// Пауза до вывода очередной буквы текста установлена 100 миллисекунд

}

}

Writetitle()

// Вызов созданной функции

</script>

</head>

<body>

</body>

</html>

 

Упражнение 10.2. Cкрипт, создающий на экране изображение работающих часов и текущей даты.

<html>

<head>

<script Language="JavaScript">

<!-- hide

var timeStr, dateStr;

function clock() {

now= new Date();

// врем\я

hours= now.getHours();

minutes= now.getMinutes();

seconds= now.getSeconds();

timeStr= "" + hours;

timeStr+= ((minutes < 10)? ":0": ":") + minutes;

timeStr+= ((seconds < 10)? ":0": ":") + seconds;

document.clock.time.value = timeStr;

// дата

date= now.getDate();

month= now.getMonth()+1;

year= now.getYear();

dateStr= "" + month;

dateStr+= ((date < 10)? "/0": "/") + date;

dateStr+= "/" + year;

document.clock.date.value = dateStr;

Timer= setTimeout("clock()",1000);

}

// -->

</script>

</head>

<body onLoad=&q