Лекции.Орг


Поиск:




Категории:

Астрономия
Биология
География
Другие языки
Интернет
Информатика
История
Культура
Литература
Логика
Математика
Медицина
Механика
Охрана труда
Педагогика
Политика
Право
Психология
Религия
Риторика
Социология
Спорт
Строительство
Технология
Транспорт
Физика
Философия
Финансы
Химия
Экология
Экономика
Электроника

 


Включение скриптов JavaScript в HTML-код. Чтобы добавить сценарий JavaScript в документ, используется пара дескрипторов <script> и </script>




Чтобы добавить сценарий 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 вывести это сообщение в окно статуса состояния и в другие диалоговые окна.

 





Поделиться с друзьями:


Дата добавления: 2016-07-29; Мы поможем в написании ваших работ!; просмотров: 1219 | Нарушение авторских прав


Поиск на сайте:

Лучшие изречения:

Человек, которым вам суждено стать – это только тот человек, которым вы сами решите стать. © Ральф Уолдо Эмерсон
==> читать все изречения...

2315 - | 2171 -


© 2015-2025 lektsii.org - Контакты - Последнее добавление

Ген: 0.013 с.