Пример вывода строки в стиле печатной машинки

<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>

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

Дополнительные задачи и упражнения по JavaScript

1. Создать кнопку Hi, на которой отображается надпись “При­вет”, а обработчик события onclick вызывает диалоговое окно предупре­ждения, содержащее строку Hello to you, too! (Привет и тебе!).

2. Создайте сценарий, в котором использовался бы оператор: document.write("Hello, world.");. Сценарий должен запускаться при за­грузке HTML-документа. В сценарий необходимо добавить коммента­рий, поясняющий принцип выполнения операторов этого сценария и вы­вести краткое пояснение в диалоговое окно.

3. Загрузка и манипулирование с изображениями на JavaScript.

4. Создайте HTML-документ, который сразу после загрузки стра­ницы будет отображать диалоговое окно с предупреждением. Другое диалоговое окно должно отображаться при щелчке пользователя на кнопке формы.

5. Напишите оператор JavaScript, который отображает сообще­ние в строке состояния, приветствующее новых посетителей Web-стра­ницы.

6. Напишите оператор JavaScript, который отображает приветст­вие новых посетителей Web-страницые на уровне заголовка <hl > страницы.

7. Создайте страницу, которая предлагает (в диалоговом окне) пользователю ввести его или ее имя, а после этого будет приветствовать его (ее) по имени. Приветствие должно отображаться в основной части страницы.

8. Создайте страницу, содержащую произвольный текст. Сразу после загрузки она должна автоматически выводить диалоговое окно с адресом URL текущей страницы.

9. Создать страницу, использующую операторы:

window.status = "Welcome to my Web page.";

document.write("<hl>Welcome to my Web page.</hl>")

Наведение курсора на эти строки должно вызывать диалоговые окна, поясняющие работу этих операторов.

10. Манипулирование окнами: изменение размера, цвета и др.

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

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

13. Обработчики событий JavaScript.

14. Навигация по сайту

15. JavaScript и таблица стилей

16. Определение типа ОС клиента.

17. Определение типа браузера клиента.

18. Создание контекстного меню.

19. Раскрывающееся окно.

20. Таймер-часы.

21. Приветствие посетителя с учетом времени суток(утро, день, ве­чер).

22. Календарь.

23. Формы. Проверка информации, вводимой и посредством форм. Проверка наличия во вводимой строке определенных символов.

24. Рисунки на веб-сайте.

25. Вычисления на веб-сайте.

26. Создать игру типа: “Угадай задуманное число”.

27. Создать различные меню на JavaScript.

28. Создать объект калькулятор.

29. Создать объект бегущая строка.

30. Время в JavaScript (получение и установка даты-времени).

31. Создать страницу с «бегущим текстом» в строке состояния браузера

32. Задание задержек по времени при выполнении функций. Про­граммирование картинок.

33. Создать Web-страницу со слоем, появляющимся при нажатии на кнопку «Невидимка», и исчезающем при повторном нажатии на кнопку «Невидимка».

34. Программирование форм. Создать Web-страницу с виктори­ной из 7-ми вопросов с 5-ю возможными вариантами ответов.

35. Создание тестирующей программы.

36. Создание фреймов.

37. Органайзер

38. Авторизация на JavaScript

39. Решение линейных уравнений ------х +-------- =0

40. Проверка доступности cookie.

41. Объекты JavaScript.

42. DOM.

43. DOM и AJAX.

44. Работа с текстовыми строками из формы: объединение, сравне­ние, нахождение длины, удаление HTML-тегов из строки, удале­ние пробелов вначале и в конце.

45. Перевод строки в разные кодировки: KOI8-R, WINDOWS-1251, UNICODE.

46. Конвертация даты из одного формата в другой.

47. Проверка данных, вводимых пользователем в форму:

а) Проверка обязательных для ввода полей

b) Проверка допустимости вводимых данных

c) Удаление HTML тегов

d) Удаление обратных слешей

48. Создать прототип для списка личностей(актеров, спортсме­нов, ученых, политиков, писателей). Личность:

{// свойства:

name //(имя);

birthYear //(год рождения);

country //(страна проживания, по умолчанию USA);

alive //(жив ли, по умолчанию – true).

}

Добавить методы:

setCountry() – присваивает название страны соответствующему свойству и проверяет является ли название страны корректным setBir­thYear –присвавает свойству значение года рождения и проверяет являет ли значение корректным.

Список личностей реализуется с помощью объекта “Spisok”:

{ supermans // массив личностей;

length // количество членов в списке.

}

Добавить к списку следующие методы: Add () (добавить), Remove() (удалить), Replace() (заменить). Заполнить список 5-10 элементами.

Написать функцию, которая при загрузке страницы будет создавать таблицу со списком Личностей (используйте функции insertRow и insertCell). Таблица должна содержать колонки: порядковый номер, имя, год рождения, страна, жив или нет. Имя в таблице должно быть ссылкой, при нажатии на которую данные Личности должны загружаться в форму на странице. Форма должна иметь два кнопки: Сохранить и Отменить. Соответственно должны быть написаны функции для очистки формы и для сохранения данных (после сохранения данные должны обновиться).