Самоучитель по JavaScript

         

Ваше задание


Пeред вами ссылка на страницу со скриптом. Загружая страницу, браузер должен выдать вам два сообщения об ошибке. Исправьте их. Некоторые команды покажутся вам незнакомыми, но это неважно. Из сообщения вы получите достаточно информации, чтобы наладить скрипт.

Если он заработает, то на странице появится сегодняшняя дата. Каждая ссылка откроется в новом окне.

Подсказка: возможно, сначала вы получите только одно сообщение. Вторая ошибка появится, когда вы исправите первую.

hotlog_js="1.0";hotlog_d=document; hotlog_n=navigator;hotlog_rn=Math.random(); hotlog_n_n=(hotlog_n.appName.substring(0,3)=="Mic")?0:1; hotlog_r=""+hotlog_rn+"&s=15862&r="+escape(hotlog_d.referrer)+"&pg="+ escape(window.location.href); hotlog_d.cookie="hotlog=1"; hotlog_r+="&c="+(hotlog_d.cookie?"Y":"N"); hotlog_d.cookie="hotlog=1; expires=Thu, 01-Jan-70 00:00:01 GMT"

hotlog_js="1.1";hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N")

hotlog_js="1.2";hotlog_s=screen; hotlog_r+="&wh="+hotlog_s.width+'x'+hotlog_s.height+"&px="+((hotlog_n_n==0)? hotlog_s.colorDepth:hotlog_s.pixelDepth)

hotlog_js="1.3"

hotlog_r+="&js="+hotlog_js; hotlog_d.write("

")

var site="sm2jsp"


Сегодняшнее задание не такое уж сложное. Я предлагаю вам написать скрипт, который поместит на вашу страницу дату, разделенную дробями /. Приветственный текст должен быть зеленого цвета. Также отметьте, что это вы написали скрипт, потому что... так оно и есть!






Посмотрим, не удастся ли мне запутать вас. Я собираюсь дать вам новый метод, alert() (предупредить). Он вызывает небольшое диалоговое окно с текстом и кнопкой OK. Попробуйте сделать так, чтобы окно предупреждения всплывало при наведении курсора на ссылку. Вот формат команды:

alert('текст в окошке')

Подумайте хорошенько, решите, что должно произойти сначала, что потом. На самом деле все это довольно просто.




На этот раз я предлагаю вам создать форму, которая будет взаимодействовать с пользователем.

Форма должна иметь три элемента:

  • поле ввода с просьбой ввести имя;
  • два поля для флажков с вопросом о том, что больше нравится пользователю, мороженое или шоколад;
  • кнопку отправки данных.
  • С каждым элементом должно произойти следующее:

  • При вводе имени в строке состояния должны появиться слова: «Впишите сюда свое имя».
  • Два поля с флажками должны отослать в строку состояния слова: «Вы выбрали...» и выбор пользователя.
  • При нажатии на кнопку должно выскочить окно предупреждения, благодарящее пользователя за участие в опросе.



  • Oтлично, умники, сделайте-ка вот что: пользуясь одной из вышеперечисленных команд, напишите JavaScript, который создает ссылку на страницу на вашем сервере. Например, если вы находитесь на www.you.ru, JavaScript создаст ссылку на www.you.ru/index.html.

    Также, каким бы свойством вы ни воспользовались, присвойте ему переменную.




    Напишите полные команды, начиная с Window, хотя обычно это не требуется. Пускай имя изображения будет mypic, имя формы myform.

  • Форма:

  • Содержание поля lname (фамилия):

  • Содержание поля fname (имя):

  • Измените название картинки на "marigold.gif":




    Сегодня не самое простое задание. Создайте функцию, которая вызовет два запроса (prompt). (Подсказка: один следует за другим с новой строки.) Первый попросит пользователя ввести свое имя, второй — отчество. Затем та же функция должна вызвать окно предупреждения (alert) c текстом:

    Привет, имя отчество, добро пожаловать на адрес страницы, мою замечательную страницу!

    Непременно создайте переменную для адреса страницы.

    Если хотите еще поразвлечься, пусть слова "мою замечательную страницу" будут не просто вставлены в текст alert, сделайте это по-другому. Присвойте переменную и этому элементу.




    Потренируемся с функцией, onMouseOver и onMouseOut.

  • Создайте страницу с гипертекстовой ссылкой.
  • Когда курсор находит на ссылку, в строке состояния должны появляться слова: «Привет, пользователь название браузера!».
  • Когда курсор уходит со ссылки, в строке состояния должен появляться текст: «Не скучаете у нас на URL страницы?»
  • Если щелкнуть по ссылке, должно всплыть окно со словами: «Уже уходите? Сейчас всего только текущее время»;
  • Время должно определяться через функцию.
  • Не пользуйтесь командой onClick, чтобы вызвать окно предупреждения, возьмите команду onUnload.



  • Я не показал вам в действии все доступные характеристики окна, так что в качестве задания напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300 пикселей и с двумя ссылками:

  • Одна откроет новую страницу в главном окне.
  • Вторая откроет новую страницу в том же окне.
  • Страница, которая откроется в том же маленьком окне, должна содержать ссылку, закрывающую окно.



  • Сегодня вам придется написать функцию, которая открыла бы окно с зеленым фоном и приветствием: «Привет, имя пользователя, вот твое окно!» Имя пользователя можно узнать с помощью запроса. Разумеется, допишите еще ссылку, которая закроет окно.




    Не пугайтесь, вы это можете. Преобразуйте скрипт, о котором мы сегодня говорили, в функцию. Да, и сделайте так, чтобы при отмене, кроме окна, еще появлялась какая-нибудь надпись в строке состояния.




    Перепишите скрипт в виде функции. Если хотите, поэкспериментируйте с делением. Пусть функция запускается командой оnLoad.




    Cоздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.




    Переделайте прошлое задание, создав две функции для смены картинки.




    Посмотрим, хорошо ли вы помните материал предыдущих уроков. Перепишите скрипт так, чтобы, открываясь, страница просила пользователя ввести имя. При выборе цвета должно всплывать окно со словами «Эй, (имя)! Вы выбрали (цвет)...» Желаю успеха.




    Измените скрипт так, чтобы он вызывал другую поисковую систему. И еще, пусть при подаче запроса выскакивает окошко с надписью «Сейчас поищем...»




    Составьте документ HTML с формой aform. В ней должно быть два текстовых поля, одно для геометрической фигуры, другое для цвета, и кнопка. Напишите функцию с переменной, которая содержит слова «Мне нравится ». Когда пользователь нажмет на кнопку, должно всплывать окно со следующей надписью:

  • Мне нравится геометрическая фигура такого-то цвета. (по результатам тех данных, которые пользователь вводит в форму)
  • Покажите длину (length) «фигуры».



  • Напишите программу JavaScript, в которой пользователь нажимал бы кнопку, а программа предлагала бы ему случайную цифру от 0 до 5 со словами: "Ваша случайная цифра: "х".




    Перепишите программу так, чтобы она спрашивала, какого вы пола. Пусть в зависимости от ответа меняется фоновый цвет страницы. Помните, что в JavaScript различаются строчные и заглавные буквы, так что будьте внимательны в своих условиях.




    Придется вам постараться! Измените сегодняшний скрипт так, чтобы при неверной догадке он сообщал пользователю, что он назвал слишком большое или слишком маленькое число.

    Подсказка! В этом случае возможны только три решения: слишком много, слишком мало или правильно. Подумайте вот о чем: нужна ли вам команда Else или сойдет и парочка дополнительных If?




    Измените программу так, чтобы она показывала рисунок, выбранный наугад из трех: pic1.gif, pic2.gif и pic3.gif.




    Напишите документ HTML с заголовком «Сюрприз». Начните с белого фона. Потом с помощью JavaScript досчитайте до 50000.

    На этом этапе цвет фона меняется на желтый и появляется текст: «Скоро будет еще один цветной сюрприз...»

    Снова досчитайте до 50 тысяч, и тогда фон должен опять поменяться. Успеха.

    Подсказка: никаких команд в {фигурные скобки} ставить не надо.

    Примечание: Владельцам компьютеров на 900MHz и выше лучше выбрать числа побольше, иначе эффекта практически не видно.




    Снова не такое простое. Во-первых, заставьте работать сегодняшнюю программу. Потом измените ее так, чтобы пользователь получал запрос: «Сколько раз пожелать вам доброго вечера?» Для ответа создайте переменную. Помните команду eval(), которая меняет текст на число? В конце программа должна написать «Добрый» столько раз, сколько ее просили.




    ...повтор пройденного.

    Oтлично, мы прошли шесть уроков. Пора приниматься за скрипты потруднее. Моя цель не сбить вас с толку, а показать, что у вас уже достаточно знаний для создания шикарных эффектов посредством команд JavaScript. Сегодня я хочу, чтобы вы посмотрели на скрипт, указанный ниже, и объяснили, как работает каждая его часть. Вы удивитесь тому, как легко эти чудовища раскладываются на понятные элементы, как только возьметe в толк, что происходит.



    Содержание раздела