Лекция: Включение скриптов JavaScript в HTML-код

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

В этом варианте в директории /jspr/ должен находиться файл pr.js, который содержит код JavaScript без тегов <script> и </script>.

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

<form>

<input type=«button» value=«click me»

onclick=«window.alert(' Hello!')»>

</form>

click me</a>

</body>

</html>

В следующем примере чтобы получить имя браузера, следует нажать кнопку «Browser»

<title>Test of Browser name</title>

</head>

<body>

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

<P><hr>

<input type=button name=browser value=Browser

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

</form>

</body> </html>

Имя и версия браузера возвращаются через свойства navigator.appName и navigator.appVersion

1. Выполнить следующие задания на JavaScript:

1. Создать html-документ. Поместить туда текст «Добро пожаловать на сайт!»

c помощью директивы document.write(). Вывести строку «Hello World» в диалоговые окна alert (“string”) и confirm((“string”).

2. Добавить на страницукомментарии

//This is a comment

/*This comment has more than one line*/

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

«www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

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

window['username'] = false;

function action() {

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

}

function sayAgain() {

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

}

function writeHello() {

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

if (str) {

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

newEl.innerHTML = str;

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

}

function createPTag() {

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

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

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

}

</script>

</head>

</body>

</html>

7. Создать страницу, которая предлагает (в диалоговом окне) пользователю ввести число, а затем выводит информацию о четности числа на страницу документа. Для выяснения четности воспользоваться

· оператором if … else;

· оператором? :;

· оператором switch.

Функция parseInt поможет преобразовать строку к целому числу.

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

· циклом for;

· циклом while;

· циклом do while

· if()

9. Вывести в заголовок строки: «раз»; «два»; «три»; «четыре»; «пять»; «вышел зайчик погулять».

Пример создания бегущей строки в заголовке браузера.

<html>

<head>

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

var msg = document.title;

var c = 0;

function animateTitle()

{

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

if(c == msg.length)

{

c = 0;

setTimeout(«animateTitle()», 2000)

}

else

{

c++;

setTimeout(«animateTitle()», 200)

}

animateTitle()

</script>

</head>

<body>

<h1>Пример с заголовком браузера</h1>

</body>

</html>

Такой же пример

<html>

<head>

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

var msg = document.title;

var c = 0;

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

function animateTitle()

{

document.title = strings[c];

if(c == strings.length — 1)

{

c = 0;

setTimeout(«animateTitle()», 2000)

}

else

{

c++;

setTimeout(«animateTitle()», 200)

}

</script>

</head>

</body>

</html>

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

window.status — значение поля статуса;

window.defaultStatus — значение поля статуса по умолчанию.

Значение свойства status можно изменить — и оно тут же будет отображено в поле статуса. Свойство defaultStatus тоже можно менять — и сразу по его изменении оно отображается в поле статуса. Пример:

window.status = «put your message here»

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

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

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

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

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

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

<HTML>

<HEAD>

function time_scroll()

{

var d = new Date();

window.status = d.getHours()

+ ':' + d.getMinutes()

+ ':' + d.getSeconds();

setTimeout('time_scroll()',1000);

}

</SCRIPT>

</HEAD>

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

</BODY>

</HTML>

Метод setTimeout() используется для создания нового потока вычислений, исполнение которого откладывается на время (в миллисекундах), указанное вторым аргументом:

idt = setTimeout(«JavaScript_код»,Time);

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

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

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

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

Пример вывода даты и времени на сайте с помощью JavaScript.

Для получения текущего времени воспользуемся объектом Date(), который без аргументов и возвращает нужное нам текущее время.

time=new Date();

Но формат даты, определяемый этим объектом, нас не устраивает, для примера посмотрите

alert (Date());

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

getSeconds() — возвращает число секунд в диапазоне от 0 до 59;

getMinutes() — возвращает число минут в диапазоне от 0 до 59;

getHours() — возвращает число часов в диапазоне от 0 до 23;

getDay() — возвращает день недели в диапазоне от 0 до 6 (0->воскресенье, 1 -> понедельник, и т.д.);

getDate() — возвращает день месяца в диапазоне от 1 до 31;

getMonth() — возвращает номер месяца в диапазоне от 0 до 11;

getFullYear() — возвращает год в виде четырех чисел, минимальное значение 1970.

То есть часы, минуты и секунды получим следующим образом

time=new Date();

time_sec=time.getSeconds();// получаем секунды

time_min=time.getMinutes();// получаем минуты

time_hours=time.getHours();// получаем часы

Если возвращаемое значение функциями getSeconds(), getMinutes() и getHours() будет меньше 10, то цифры 0 не будет впереди. Поэтому напишем функцию представляющую вид часов в привычном для виде

function wr_hours()

{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

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

time_wr+=":";

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

time_wr+=":";

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

}

Теперь нужно нам это время вывести на экран монитора. Воспользоваться функцией document.write() не получится, так как нам нужно время обновлять через определенный промежуток времени. Воспользуемся свойством innerHTML, которое есть у каждого элемента HTML-кода. Это свойство содержит весь HTML-код данного элемента. Его можно изменять. И если его изменить, то изменится HTML-код, содержащийся в элементе, а, следовательно, и содержимое веб-странички. Поэтому поступим следующим образом. Будем выводить время в элементе span, которому дадим уникальный идентификатор hours. Впоследствии в JavaScript получим к нему доступ выражением

obj_hours=document.getElementById(«hours»)

obj_hours=document.getElementById(«hours»);

function wr_hours()¶{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

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

time_wr+=":";

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

time_wr+=":";

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

obj_hours.innerHTML=time_wr;

}

wr_hours();

</script>

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

setInterval("{выражение}", {временной интервал});

Мы зададим интервал равный одной секунде (1000 миллисекунд). Чаще обновлять нет смысла, так как у нас время выводится с точностью до секунды. Соответственно получим следующий код

obj_hours=document.getElementById(«hours»);

function wr_hours()

{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

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

time_wr+=":";

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

time_wr+=":";

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

obj_hours.innerHTML=time_wr;

}

wr_hours();

setInterval(«wr_hours();»,1000);

</script>

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

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

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

В итоге получим следующий код

<html>

<head>

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

</head>

<body>

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

</div>

obj_hours=document.getElementById(«hours»);

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

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

function wr_hours()

{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

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

time_wr+=":";

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

time_wr+=":";

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

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

obj_hours.innerHTML=time_wr;

}

wr_hours();

setInterval(«wr_hours();»,1000);

</script>

</body>

</html>

И теперь на сайте будет дата и «тикающие» часы.

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

Пример вывода строки в стиле печатной машинки

<html>

<head>

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

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

var pos = 0;

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

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

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

function printWords(text, dir)

{

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