Практикум по программированию на JavaScript. Сценарий document.write (" Это красный текст ") Результат работы сценария Это красный текст С помощью DOCUMENT. - презентация

1 Практикум по программированию на JavaScript

2 Сценарий document.write (" Это красный текст ") Результат работы сценария Это красный текст С помощью DOCUMENT объявляется документ (документ HTML). Этот документ будет изменен в нем что-то будет написано ( WRITE ). То, что будет написано, находится внутри скобок. DOCUMENT представляет собой объект. Слово WRITE (писать), отделенное точкой, называется методом объекта. Обратите внимание, что текст внутри скобок находится в кавычках. В HTML эти кавычки не требуются. Задание Измените сценарий так, чтобы выводились две строки текста, красная и синяя. Но это надо сделать с помощью дополнительных команд JavaScript, а не просто добавить код HTML к приведенному примеру. На странице должно выводиться следующее: Это красный текст Это синий текст

3 ОШИБКИ Ошибки бывают двух типов: Ошибка синтаксиса означает опечатку или неправильную конфигурацию JavaScript. Ошибка времени выполнения означает, что была использована неправильная команда. Задание Ниже показан сценарий с ошибкой. Загружая страницу с этим сценарием, браузер должен выдать два сообщения об ошибке. Исправьте их. Некоторые команды покажутся незнакомыми, но это неважно. Сообщения содержат достаточно информации, чтобы исправить сценарий. Если сценарий выполнится правильно, то на странице появится текущая дата. Подсказка: возможно, сначала будет получено только одно сообщение. Вторая ошибка появится, когда будет исправлена первая. Код с ошибкой...x dothis = new Date() month = dothis.getMonth() month = (month * 1) + 1 day = dothis.getDate() year = dothis.getFullYear() document.wrte(" ",month,"/",day,"/",year," ")

4 Метод get Что-либо(): getDay(), getDate(), getMonth(), getYear(), getH ours(),getMinutes(), и getSeconds() (получить День, Число, Месяц, Год, Час, Минуту, Секунду) !!!! Методы без объектов не используются //Сценарий выводит точную дату и время посещения страницы Now = new Date(); document.write("Сегодня " + Now.getDate()+ "-" + (Now.getMonth()+1) + "-" + Now.getFullYear() + ". Вы зашли на Web-страницу ровно в: " + Now.getHours() + ":" + Now.getMinutes() + " и " + Now.getSeconds() + " секунд.") !!!! Строка document.write не должна прерываться. Результат работы сценария Сегодня Вы зашли на эту Web-страницу ровно в: 8:42 и 3 секунд.

5 //Сценарий выведет на странице номер месяца Now = new Date(); document.write("Сейчас месяц " + (Now.getMonth()+1)) document.write("Сегодня " + (Now.getMonth()+1)+ "-" + Now.getDate() + "-" + Now.getFullYear() + ". Вы зашли на Web- страницу ровно в : " + Now.getHours() + ":" + Now.getMinutes() + " и " + Now.getSeconds() + " секунд") RightNow = new Date(); var mpo = RightNow.getMonth(); var mpo1 = mpo + 1; document.write("Сегодня месяц " +mpo1+ "."); Вот что получилось: Cегодня месяц 8. Задание Напишите сценарий, который выводит на Web-странице дату, разделенную косой чертой. Приветственный текст должен быть зеленого цвета. Числа могут быть не зеленого цвета. Добавьте также комментарий о том, что это вы написали этот сценарий. Возможное решение Привет! Сегодня у нас 18/8/2006. Вот сценарий: // Автор сценария Now = new Date(); var mpo = Now.getMonth(); var mpo1 = mpo + 1; document.write(" Привет! Сегодня у нас: " + Now.getDate() + "/" + mpo1 + "/" + Now.getFullYear() + ".");

6 Обработчики событий: onMouseOver Сценарий Ссылка Щелкните здесь Результат работы сценария При наведении курсора мыши на ссылку строка состояния в окне браузера изменится. onMouseOver - обработчик событий (Event Handler) гипертекстовой ссылки. Используется внутри гиперссылки. Формат гипертекстовой ссылки остается без изменений. Обработчик событий onMouseOver ставится сразу же после адресаURL. Событие (Event) приводится в действие, когда браузер распознает onMouseOver="". Общая схема : два элемента, разделенные точкой. До сих пор это означало, что один является объектом, а другой методом. Но в данном случае объектом является window (окно), оно существует; status(статус) представляет собой свойство (property) oкна. Это небольшой участок окна, где должен разместиться следующий далее в команде текст. Это проще запомнить, если представить, что метод обычно выражается глаголом, как write (писать) или get (получить). Свойство выражается существительным и существует как небольшая часть элемента, стоящего перед точкой. Если у window есть изменяемое свойство status, значит, можно изменить и другие свойства окна. После window.status ставится знак равенства =, за которым следует то, что должно произойти. В данном случае это текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на гипертекстовую ссылку. Пожалуйста, обратите еще раз внимание на точку с запятой в конце командной строки. Затем следует return true. Эти два слова имеют вполне определенное влияние на то, что произойдет, когда указатель мыши переместится на ссылку. Если они присутствуют, сценарий проверит, есть ли строка состояния. Если проверка будет успешной ( true ), происходит событие. Обратите внимание, что когда указатель мыши перемещается на ссылку, то текст в строке состояния блокируется. Он больше не изменяется при последующих перемещениях указателя мыши на ссылку. (Если обновить страницу, то можно будет это увидеть). Если проверка строки состояния отсутствует, то выполняется действие по умолчанию. По умолчанию в HTML выводится URL- ссылка, на которую указывает курсор мыши. Затем, когда курсор смещается со ссылки, произойдет событие. И так как проверка отсутствует, то событие будет происходить всякий раз при перемещении курсора мыши над ссылкой.

7 В HTML цветом фона страницы управляет команда BGCOLOR. То же самое и здесь, только обязательно соблюдайте регистр символов. В JavaScript цвет фона обозначается bgColor. Подумаем, как создать ссылку, которая изменяла бы цвет фона окна с помощью события onMouseOver. 1.Во-первых, раз это ссылка, то сохраним тот же формат, который использовался ранее. 2. Что изменяется, окно или документ? Куда идет команда bgColor, когда создается Web-страница? В документ. Значит, это и есть нужный объект. Заменим window на document. 3. Мы собираемся изменить фоновый цвет объекта, потому заменим status на bgColor. 4. Появление текста нам больше не нужно, поэтому заменим его цветом. Возьмем розовый ( pink ). 5. Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем return true после точки с запятой. Вот что получилось... Щелкните здесь Если требуется и то, и другое Подумаем, как можно это сделать. Здравый смысл подсказывает, что нужно написать две команды onMouseOver. Попробуем это реализовать. Эти две команды не разделяются. Мы хотим, чтобы они произошли одновременно, поэтому не будем разделять команды точкой с запятой, так как точка с запятой означает конец оператора. Новое правило: ставьте запятую, чтобы отделить друг от друга несколько событий JavaScript.