Часть1. Выполнить задания на JavaScript:
1. a) Ответьте на вопрос: Как вывести строку "Hello World" в окно alert?
-alert("Hello World")
-msgBox("Hello World")
-alertBox="Hello World"
-alertBox("Hello World")
b) Создать html-документ. Поместить туда текст «Добро пожаловать на сайт!», отформатировав его как заголовок первого уровня. Вывести строку в окно alert (), confirm() и prompt()
2. a) Ответьте на вопрос: В каком варианте правильный комментарий JavaScript?
<!--This is a comment-->
'This is a comment
//This is a comment
//This comment has more than one line//
/*This comment has more than one line*/
b) Создайте страницу, которая предлагает (в диалоговом окне) пользователю ввести его имя (по умолчанию «неизвестный гость»), а после этого будет приветствовать его по имени. Приветствие должно отображаться в основной части страницы с помощью document.write("str");. Ввести строку из окна prompt().Если пользователь отказывается вводить свое имя, то на странице должно появиться сожаление по этому поводу. В сценарий добавьте комментарий, поясняющий принцип выполнения операторов этого сценария.
Метод promt() отображает диалоговое окно с сообщением, полем ввода и двумя кнопками OK и CANCEL. Он возвращает введенное значение, если нажата кнопка OK, или специальное значение null, если нажата кнопка CANCEL.
3. a)Создайте сценарий, в котором при загрузке документа выводилось бы окноconfirm() с сообщением "Приветствуем, Вас!".
b) Создайте кнопку «Поздороваться» и обработайте событиеOnClickкнопки «Поздороваться» таким образом, чтобы по щелчку на кнопке выводилось бы окно с сообщением "Еще раз здравствуйте!".
c) Напишите оператор JavaScript, который отображает приветствие новых посетителей Web-страницы на уровне заголовка <h1 > страницы документа.
d) Напишите в теле документа скрипт формирующий в документе тег параграфа с помещенной в него фразой «Заходи, гостем будешь».
4. a) Ответьте на вопрос: Как правильно создать утверждение, выполняющееся только в случае “i тождественно равно 5”?
-if (i==5)
-if i=5
-if i=5 then
-if i==5 then
-другое
Создайте страницу, которая предлагает (в диалоговом окне) пользователю ввести число, а затем выводит информацию о четности числа на страницу документа. Для выяснения четности воспользоваться
оператором if … else;
оператором ? :;
оператором switch.
Функция parseInt поможет преобразовать строку к целому числу.
5. a) Ответьте на вопрос: Как правильно создать утверждение, выполняющееся только в случае "i" is NOT equal to 5?
- if =! 5 then
- if (i <> 5)
-if <>5
-if (i != 5)
b) Вывести кубы чисел от 1 до 100, превышающие 10 000. Для возведения в степень можно воспользоваться функцией Math.pow(x,y)=xy;
6. a) Ответьте на вопрос: Сколько различных видов циклов используется в JavaScript?
-One. The "for" loop
-Tree. The "for" loop and the "while" loop
-Four. The "for" loop, the "while" loop, the "do...while" loop, and the "loop...until" loop
Создайте страницу, которая предлагает (в диалоговом окне) пользователю ввести число, а затем выводит кубы всех чисел от 1 до введенного числа при условии, что они не превосходят 1000. Воспользоваться
циклом for;
циклом while;
циклом do while.
7. a) Пример создания бегущей строки в заголовке браузера.
<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>
b) выведите в заголовок строки:
"раз";
"два";
"три";
"четыре";
"пять";
"вышел зайчик погулять".
8. Полем статуса (status bar) называют поле нижней части окна браузера сразу под областью отображения HTML-страницы. В поле статуса отображается информация о состоянии браузера (загрузка документа, загрузка графики, завершение загрузки и т.п.). Программа на JavaScript имеет возможность работать с этим полем как с изменяемым свойством окна. При этом фактически с ним связаны два разных свойства:
window.status — значение поля статуса;
window.defaultStatus — значение поля статуса по умолчанию.
Значение свойства status можно изменить — и оно тут же будет отображено в поле статуса. Свойство defaultStatus тоже можно менять — и сразу по его изменении оно отображается в поле статуса.
Разница между этими двумя свойствами заключается в их поведении: если свойству status присвоить пустую строку: window.status="", то в поле статуса автоматически будет отображено значение defaultStatus. Обратного же не происходит: при присвоении пустой строки свойству defaultStatus оно и отобразится в поле статуса, независимо от значения свойства status. Следует отметить, что реакция браузеров на описываемые ниже действия со свойствами status и defaultStatus может быть разной в различных браузерах.
a)Как вывести сообщение в окно статуса броузера?
statusbar = "put your message here"
status("put your message here")
window.status("put your message here")
window.status = "put your message here"
b)Напишите оператор JavaScript, который отображает сообщение в строке состояния, приветствующее новых посетителей Web-страницы.
c)Создайте страницу на которой расположена кнопка «Установить техт в строке состояния» по нажатию на которую в строку состояния выводится приветствие.
d) Расположите на странице ссылку. При наведении мыши на ссылку отобразите в строке состояния текст 'Заходи, не пожалеешь!' (обработка события onMouseOver), при уходе курсора со ссылки отобразите в строке состояния текст 'Напрасно, что не зашел' (обработка события onMouseOut).
e)Непрерывно последовательно друг за другом выводите в строке статуса фразы:
"раз";
"два";
"три";
"четыре";
"пять";
"вышел зайчик погулять".
f) Создать Web-страницу с «бегущим текстом» в строке статуса состояния браузера
g) Вывести время в окно документа и в окно статуса
Пример программы выводящей время в строке статуса.
<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 -> Дополнительно -> Изменять текст в строке статуса.
9. Сценарий в разделе 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 вывести это сообщение в окно статуса состояния и в другие диалоговые окна.
10. В сценарии JavaScript могут использоваться объекты нескольких видов:
клиентские объекты, входящие в модель DOM, т.е. отвечающие тому, что содержится или происходит на Web-странице в окне браузера. Они создаются браузером при разборе (парсинге) HTML-страницы. Примеры: window, document, location, navigator и т.п.
серверные объекты, отвечающие за взаимодействие клиент-сервер. Примеры: Server, Project, Client, File и т.п.
встроенные объекты. Они представляют собой различные типы данных, свойства, методы, присущие самому языку JavaScript, независимо от содержимого HTML-страницы. Примеры: встроенные классы объектов Array, String, Date, Number, Function, Boolean, а также встроенный объект Math.
пользовательские объекты. Они создаются программистом в процессе написания сценария с использованием конструкторов типа объектов (класса). Например, можно создать свои классы Cat и Dog.
Оператор for(переменная in объект) позволяет "пробежаться" по свойствам объекта. Пример.
for(v in document)
document.write("document."+v+" = <B>"+ document[v]+"</B><BR>");
Всю необходимую информацию о запущенном браузере и системе пользователя можно узнать при помощи объекта navigator.
a)Укажите корректный JavaScript синтакс для открытия нового окна "window2" ?
window.open("http://www.w3schools.com","window2")
open.new("http://www.w3schools.com","window2")
new.window("http://www.w3schools.com","window2")
new("http://www.w3schools.com","window2")
b)Получите информацию о браузере и системе: имя браузера, версия браузера, кодовое название браузера, платформа на которой работает браузер, доступность на запуск сценариев JavaScript.
11. Задание задержек по времени при выполнении функций. Программирование картинок. Загрузка и манипулирование с изображениями на JavaScript.
Следует обратить внимание на использование метода setTimeout(). На первый взгляд, это просто рекурсия. Но в действительности все несколько сложнее. JavaScript разрабатывался для многопоточных операционных систем, поэтому правильнее будет представлять себе исполнение скриптов следующим образом:
скрипт movie() получает управление от обработчика события onLoad;
заменяет картинку;
порождает новый скрипт movie() и откладывает его исполнение на 500 миллисекунд;
текущий скрипт movie() уничтожается JavaScript-интерпретатором.
После окончания срока задержки исполнения все повторяется.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<SCRIPT>
var i=0;
n=5;
function movie()
{
document.i.src='n'+i+'.gif';
i++; if(i>10){i=0;n--;}
if(n>0)setTimeout('movie();',500);
}
</SCRIPT>
</head>
<body onLoad="movie();"><IMG NAME=i>
</body>
</html>
a)Реализовать запуск и остановить мультипликацию по требованию пользователя по нажатию на кнопке.
12. Создайте страницу, содержащую произвольный текст. Сразу после загрузки она должна автоматически выводить диалоговое окно с адресом URL текущей страницы.
13. Создать страницу, использующую операторы:
window.status = "Welcome to my Web page.";
document.write("<hl>Welcome to my Web page.</hl>")
Наведение курсора на эти строки должно вызывать диалоговые окна, поясняющие работу этих операторов.
14. Манипулирование окнами: изменение размера, цвета и др.
15. Адрес URL получен из свойства href объекта location.
<html> <head>
<script type="text/javascript">
function showLocation() {
alert("This page is at: " + location.href);
}
</script> </head>
<body onload="showLocation()"> Bu, be, by.
</body> </html>
Создать кнопку и по событию onclick вывести это сообщение в окно статуса состояния и в другие диалоговые окна.
16. Определение типа ОС клиента.
17. Определение типа браузера клиента.
18. Создание контекстного меню.
19. Голосование
20. Таймер-часы.
21. Приветствие посетителя с учетом времени суток(утро, день, вечер).
22. Календарь.
23. Органайзер
24. Слои на веб-сайте.
25. Вычисления на веб-сайте.
26. Создать игру типа: “Угадай задуманное число”.
27. Создать различные меню на JavaScript.
28. Создать объект калькулятор.
29. Перекодировщик русских символов
43. Программирование форм. Создать Web-страницу с викториной из 7-ми вопросов с 5-ю возможными вариантами ответов.
29. Решение квадратных уравнений -------х2 +------х +-------- =0
30. Авторизация на JavaScript
31. Навигация по сайту
32. Объекты JavaScript.
33. Работа с текстовыми строками из формы: объединение, сравнение, нахождение длины, удаление HTML-тегов из строки, удаление пробелов вначале и в конце.
34. Перевод строки в разные кодировки: KOI8-R, WINDOWS-1251, UNICODE.
35. Конвертация даты из одного формата в другой.
36. Проверка данных, вводимых пользователем в форму:
а) Проверка обязательных для ввода полей
b) Проверка допустимости вводимых данных
c) Удаление HTML тегов
d) Удаление обратных слешей