Вывод текста красного цвета на Web-страницу.

ПРАКТИКУМ ПО ПРОГРАММИРОВАНИЮ НА JAVASCRIPT

Пример. Наберите HTML-код и сохраните файл под именем primer1.htm

<HTML>

document.write("<FONT COLOR='RED'>Это красный текст </FONT>")

</SCRIPT>

</HTML>

Задание. Измените пример так, чтобы выводились две строки текста, красная и синяя. Сохраните файл под именем zadanie1.htm. На странице должно выводиться следующее:

Это красный текст

Это синий текст

2. Работа с методами: getDay(), getDate(), getMonth(), getYear(), getHours(), getMinutes(), и getSeconds() (получить День, Число, Месяц, Год, Час, Минуту, Секунду).

Пример. Наберите HTML-код и сохраните файл под именем primer2.htm

<HTML>

//Сценарий выводит точную дату и время посещения страницы

x = new Date();

document.write("Сегодня " + x.getDate()+ "-" + (x.getMonth()+1) + "-" + x.getFullYear() + ". Вы зашли на Web-страницу ровно в: " + x.getHours() + ":" + x.getMinutes() + " и " + x.getSeconds() + " секунд.")

</SCRIPT>

</HTML>

Задание. Измените пример для вывода даты, разделенной косой чертой, зеленого цвета и вывода времени, разделенного двоеточием, желтого цвета. Добавьте также комментарий о том, что это вы написали этот сценарий. Сохраните файл под именем zadanie2.htm.

3. Запрос у пользователя информации с помощью метода prompt (запрос).Этот метод выводит окно с сообщением и полем ввода. Вот формат запроса:

var variable_name = prompt("Текст окна","Текст в поле ввода")

Пример. Наберите HTML-код и сохраните файл под именем primer3.htm

<HTML>

/* Этот сценарий предназначен для получения информации от пользователя и вывода ее на странице */

var user_name = prompt ("Введите свое имя в поле ниже","Здесь");

document.write("Привет, " + user_name + "! Добро пожаловать на эту страницу!");

</SCRIPT>

</HTML>

Задание. Измените пример для запроса имени пользователя и вывода приветствия с его именем в заголовок веб-документа (<TITLE>). Сохраните файл под именем zadanie3.htm.

4. Метод alert() (предупредить) выводит небольшое диалоговое окно с текстом и кнопкой OK. Вот формат команды:

alert('выводимый в окне текст')

Пример. Наберите HTML-код и сохраните файл под именем primer4.htm

<HTML>

Имя:

<BR>

</FORM>

</HTML>

Задание. Измените пример, добавив в форму радио-кнопки для пола (М и Ж) и выводя в статусной строке выбор кнопки в виде сообщения «Ваш пол – мужской» или «Ваш пол - женский». Сохраните файл под именем zadanie4.htm.

5. Свойства объектов "navigator" (браузер), "document", "history", "location" (адрес)

Пример. Наберите HTML-код и сохраните файл под именем primer5.htm

<HTML>

var an = navigator.appName;

var av = navigator.appVersion;

document.write("Вы пользуетесь <B>" +an+ "</B>, версия " +av);

var bgc = document.bgColor;

var fgc = document.fgColor;

var url = document.location;

document.write("<BR>Цвет фона этой страницы <B>"+bgc+ "</B>.")

document.write("<BR>Цвет текста этой страницы <B>" +fgc+ "</B>.")

document.write("<BR>URL этой страницы <B>" +url+ "</B>.")

var h = history.length;

document.write("<BR>До этой страницы вы посетили " +h+ " страниц.")

var hn = location.hostname

document.write("<BR>Страница находится на <B>" + hn + "</B>." )

</SCRIPT>

</HTML>

Задание. Измените пример для изменения цвета фона и текста при щелчке мышью на соответствующей строке. Сохраните файл под именем zadanie5.htm. На странице должно выводиться следующее:

Кликни, чтобы текст стал красным

Кликни, чтобы фон стал желтым

Кликни, чтобы текст стал зеленым

Кликни, чтобы фон стал синим

6. Метод confirm (подтвердить) действует очень похоже на метод alert, но добавляет в диалоговое окно кнопку "Отмена" (Cancel).

Пример. Наберите HTML-код и сохраните файл под именем primer6.htm

<HTML>

if (confirm("Устали?") )

{

alert("Потерпи еще немного!");

}

else

{

alert("Tогда за работу!");

}

</SCRIPT>

</HTML>

Задание. Измените пример для дополнительного вывода в строку статуса того же сообщения, что и в окне alert. Сохраните файл под именем zadanie6.htm.

7. Методы создания новых окон.Вот формат команды открытия нового окна:

window.open('URL документа в окне', 'Название нового окна', config='параметры нового окна')

Помните, никаких пробелов между подкомандами и одинарные кавычки!

Пример. Наберите HTML-код и сохраните файл под именем primer7.htm

<HTML>

window.open ('primer1.htm', 'new', config='height=400, width=400, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes, location=yes, directories=yes, status=yes')

</SCRIPT>

</HTML>

Задание. Измените в примере параметры нового окна, убрав панель инструментов, строку меню, адресной строку и строку состояния. Можно ли убрать строку с заголовком? Добавьте вывод еще одного окна с файлом primer2.htm. Сохраните файл под именем zadanie7.htm.