Чтобы добавить сценарий JavaScript в документ, используется пара дескрипторов <script> и </script>. Код скрипта выполняется незамедлительно, если только этот код не является функцией. Скрипты могут размещаться во всех частях документа HTML. Скрипт можно разместить в отдельном файле с расширением js. Например
<script type="text/javascript" src="/jspr/pr.js"></script>
В этом варианте в директории /jspr/ должен находиться файл pr.js, который содержит код JavaScript без тегов <script> и </script>.
Скрипт можно разместить в дескрипторе HTML. Последняя конструкция называется обработчиком события. Событие представляет собой указатель на метод – обработчик события, который вызывается при возникновении события. Пример:
<!-- Использование кнопки и события -->
<html> <body>
<form>
<input type="button" value="click me"
onclick="window.alert(' Hello!')">
</form>
<a href="pr3.htm" onclick="alert('Links clicked')">
click me</a>
</body>
</html>
В следующем примере чтобы получить имя браузера, следует нажать кнопку "Browser"
<!-- пример pr15: получение типа и версии браузера -->
<html> <head>
<title>Test of Browser name</title>
</head>
<body>
<h1 align=center>Проверка типа браузера</h1>
<P><hr>
<form name=fr>
<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 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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Добро пожаловать на сайт!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
window['username'] = false;
function action() {
confirm('Приветствую Вас!');
}
function sayAgain() {
alert('Здравствуйте еще раз!')
}
function writeHello() {
var str = prompt('Введите свое приветственное сообщение', '');
if (str) {
var newEl = document.createElement('h1');
newEl.innerHTML = str;
document.getElementById('strings').appendChild(newEl);
}
}
function createPTag() {
var newEl = document.createElement('p');
newEl.innerHTML = 'Приветствую Вас, многоуважаемый Гость!!!';
document.getElementById('strings').appendChild(newEl);
}
</script>
</head>
<body onload="action()">
<div id="strings"></div>
<input type="button" onclick="sayAgain()" value="Поздороваться еще раз" />
<input type="button" onclick="writeHello()" value="Написать свое приветствие" />
<input type="button" onclick="createPTag()" value="Сформировать тег параграфа" />
</body>
</html>
7. Создать страницу, которая предлагает (в диалоговом окне) пользователю ввести число, а затем выводит информацию о четности числа на страницу документа. Для выяснения четности воспользоваться
· оператором if … else;
· оператором?:;
· оператором switch.
Функция parseInt поможет преобразовать строку к целому числу.
8. Создайте страницу, которая предлагает (в диалоговом окне) пользователю ввести число, а затем выводит кубы всех чисел от 1 до введенного числа при условии, что они не превосходят 1000. Воспользоваться
· циклом for;
· циклом while;
· циклом do while
· if()
9. Вывести в заголовок строки: "раз"; "два"; "три"; "четыре"; "пять"; "вышел зайчик погулять".
Пример создания бегущей строки в заголовке браузера.
<html>
<head>
<title>JavaScript в примерах</title>
<script language="JavaScript">
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
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 onload="animateTitle()">
<div id="strings"></div>
</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>
<SCRIPT>
function time_scroll()
{
var d = new Date();
window.status = d.getHours()
+ ':' + d.getMinutes()
+ ':' + d.getSeconds();
setTimeout('time_scroll()',1000);
}
</SCRIPT>
</HEAD>
<BODY onLoad="time_scroll()">
<H1>Часы в строке статуса</H1>
</BODY>
</HTML>
Метод 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")
<span id="hours"></span>
<script type="text/javascript">
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 миллисекунд). Чаще обновлять нет смысла, так как у нас время выводится с точностью до секунды. Соответственно получим следующий код
<span id="hours"></span>
<script type="text/javascript">
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><span id="hours"></span>
</div>
<script type="text/javascript">
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>
<script type="text/javascript">
var delay = 50; // задержка
var pos = 0;
//Строка, которая будет выводиться
var msg = 'Пример с печатающими буквами';
// функция, печатающая слова
function printWords(text, dir)
{
var typingtext = text.substring(0, pos);
document.getElementById("type").innerHTML = typingtext;
pos += dir; // печатаем или стираем текст
if (pos > text.length)
setTimeout('printWords("'+text+'",'+(-dir)+')', delay * 50);
else
{
if(pos < 0)
{
dir = -dir;
}
setTimeout('printWords("'+text+'",'+dir+')', delay);
}
}
</script>
</head>
<body onLoad="printWords(msg, 1)">
<h1>Эффект печатной машинки</h1>
<div id="type"></div>
</body>
</html>
12. Сценарий в разделе body вызывает функцию, которая возвращает текст, введенный в диалоговом окне prompt ().
<html> <head>
<script type=text/javascript">
function askName() {
var name = prompt ("What is your name, please?11,"")
return name
}
</script>
</head>
<body>
<script type="text/javascript">.
document.write("Welcome to my web page, " + askName() + ".")
</script>
</body>
</html>
По событию onclick вывести это сообщение в окно статуса состояния и в другие диалоговые окна.