Vvedenie_v_Veb_programmirovanien_2 / Vvedenie_v_Veb_programmirovanien_2

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

Создать 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"

"http://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>

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

оператором if … else;
оператором ? :;
оператором switch.

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

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

циклом for;
циклом while;
циклом do while
if()

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

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

<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 -> Дополнительно -> Изменять текст в строке статуса.

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

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

Содержание