Самоучитель по JavaScript
Ие иерархии объектов
Все команды начинаются с наивысшего объекта, window (окно браузера), и идут по нисходящей. Окна и рамки (frames) принадлежат объекту window. Их не нужно перечислять, если только их не больше одного. Top, self, parent и frames — "встроенные" имена для окон. Много о них не беспокойтесь, просто знайте, что они существуют.Вот несколько примеров. Обратите внимание на иерархию.
| document.pic.src = "pic1.gif" | window не нужно ставить в самом начале. Предполагается, что это все и так внутри окна. Команда document.pic.src указывает на рисунок, которому дано имя pic. Это понятно? Документ — это страница, pic — имя элемента, а SRC — источник элемента, "pic1.gif". | ||
| document.write(location.href) | write() — это метод объекта document. Location.href показывает полный URL окна. Обратите внимание, что location и dосument находятся на одном уровне (оба выделены зеленым цветом). Это значит, что вы получаете адрес документа того же уровня. |
Исправление ошибок
Говорят, что наилучший способ исправить ошибку — это ее не совершать, но сказать проще, чем сделать. Тем не менее можно свести ошибки к минимуму, пользуясь текстовым редактором без полей. Кроме того, отводите каждой команде JavaScript отдельную строку. Ни к чему разбивать длинные строки на несколько коротких. Это само по себе может привести к ошибке. И все же, готов спорить, что каждый раз, принимаясь за скрипты, вы будете получать такие сообщения. Так уж давайте разберемся, как их устранять.В этих всплывающих окошках есть одна замечательная вещь: они сами говорят, где и в чем состоит проблема. Взгляните на сообщение. Это ошибка сценария, и находится она на строке 23. Более того, сообщение прямо говорит, в чем состоит ошибка. Разве не здорово было бы завести такой порядок и в HTML?
Строка ошибки
Строку с ошибкой нужно отсчитывать от самого верха документа HTML, а не от первой строки JavaScript. Например, в приведенном ниже документе допущена ошибка на строке 9. Это ошибка синтаксиса, так как пример (instance) не заканчивается на той же строке, где и начался. Видите, как скобкаперескочиланаследующую строчку?
Но почему ошибка на строке 9, а не 8? Потому, что вы начинаете считать с верхнего края документа HTML, не пропуская ни одной строчки. Вот этот документ еще раз с пронумерованными строчками.
(строка 1)
(строка 2)
(строка 3)
(строка 4)
(строка 5)
(строка 6)
(строка 7)
(строка 11)
(строка 11)
Так что, считайте все строки, даже пустые.
Ну и что дальше?
Как только вы нашли строку с ошибкой, необходимо решить, что делать. Чаще всего это будет синтаксическая ошибка — либо разорванная строка, либо опечатка, либо двойные кавычки вместо одинарных и тому подобное.
Если это ошибка сценария, значит, команда, на которую указывает сообщение, не укладывается в логическую последовательность. Например, команда вызывает кнопку, а в скрипте на самом деле указано текстовое поле.
Многократные сообщения
Ничто не раздражает меня больше, чем многократные сообщения об ошибках. Можно только сидеть и смотреть, как на экране плодятся окошки. Когда-то я думал, что многократные окна означают многократные ошибки. Не всегда.
JavaScript — это чрезвычайно логичный язык, требующий, чтобы все шло своим чередом, друг за дружкой. Допустим, у вас 10 ошибок в длинном скрипте. Сообщения накладываются одно на другое, и последняя обнаруженная компьютером ошибка окажется сверху. Не набрасывайтесь на нее сразу, возможно, в действительности ее даже не существует.
Может случиться так, что первая ошибка в скрипте и вызовет все остальные. Так что исправлять их следует от начала документа HTML. Сколько раз было так, что у меня выскакивало штук 20 окон, а разрешить проблему удавалось исправлением одной единственной первой ошибки!
Поэтому я советую вам исправлять ошибки по одной от начала до конца. И каждый раз, исправив одну ошибку, запускайте скрипт. Можно получить 20 окошек с восклицательным знаком, а исправлять придется одну или две ошибки.
Определение отсутствует
Эта ошибка сценария тоже частенько встречается. Она означает, что в скрипте что-то не согласовано. Я всегда слежу за тем, чтобы не вписать какую-нибудь строку раньше, чем нужно. Если дело не в этом, попробуйте стереть строку с ошибкой, ведь ее всегда можно вернуть на место. Случаются и банальные опечатки. Приглядитесь к тексту повнимательнее, опечатки случаются чаще, чем можно себе представить.
Вот практически все, что на данном этапе можно сказать про ошибки. Теперь у вас хватит знаний, чтобы исправить 99% подобных неприятностей. Просто помните, что сообщение — это на самом деле плюс. Без них нам пришлось бы сидеть, тупо уставясь в пустую страницу, не имея ни малейшего понятия, в чем проблема.
Эффект
//Скрипт отмечает точную дату и время вашего прибытия на страницу Now = new Date(); document.write("Сегодня " + Now.getDate()+ "-" + Now.getMonth() + "-" + Now.getFullYear() + ". Вы зашли на мою страницу ровно в: " + Now.getHours() + ":" + Now.getMinutes() + " и " + Now.getSeconds() + " секунд.")/* Скрипт предназначен для того, чтобы получить информацию от пользователя и поместить ее на страницу */ var user_name = prompt ("Напишите свое имя","Здесь"); document.write("Привет, " + user_name + "! Милости просим!");
Некоторые сведения о вашем компьютере:
var an = navigator.appName; var av = navigator.appVersion; var acn = navigator.appCodeName; var ua = navigator.userAgent; document.write("Вы пользуетесь " +an+ ", версия " +av+ ".
Кодовое название " +acn+ ", заголовок " +ua+ "." );
var bgc = document.bgColor; var fgc = document.fgColor; var lc = document.linkColor; var al = document.alinkColor; var vlc = document.vlinkColor; var url = document.location; var ref = document.referrer; var t = document.title; var lm = document.lastModified; document.write("Цвет фона этой страницы " +bgc+ ".") document.write("
Цвет текста этой страницы " +fgc+ ".") document.write("
Цвет ссылок этой страницы " +lc+ ".") document.write("
Цвет активной ссылки этой страницы " +al+ ".") document.write("
Цвет посещенной ссылки этой страницы " +vlc+ ".") document.write("
URL этой страницы " +url+ ".") document.write("
До этого вы были на странице " +ref+ ".") document.write("
Заголовок этой страницы " +t+ ".") document.write("
Последние изменения внесены: " +lm+ ".")
var h = history.length; document.write("До этой страницы вы посетили " +h+ " страниц.")
var hst = location.host document.write("Страница находится на " + hst + ".")
var hstn = location.hostname
document.write("Страница находится на " + hstn + "." )
Эффект скрипта можно увидеть в строке состояния. Этим же скриптом мы пользовались для получения даты на прошлыx уроках.
Поместите курсор на ссылку и обратно несколько раз, глядя на строку состояния. Это первый эффект. Нажмите на ссылку, чтобы увидеть второй.
Наведите курсор на эту ссылку и уведите обратно
Вы видели, как действует скрипт, когда открывали страницу. Всплыло второе окно с двумя ссылками: на HTML Goodies и закрывающая окно.
Эффект тот же, что и в : открылось окно того же размера с теми же ссылками. Разница в том, что все это было написано на одной странице. Чтобы увидеть, как действует скрипт,
с одной разницей — здесь новое окно запускается кнопкой, а не командой onLoad.
Это уже кое-что.Только на этот раз, если нажмете «OK», то пойдете по ссылке, а если щелкнете по «Отмене», то останетесь.
Здорово, а? Давайте разберемся, как это делается.
Команды и эффекты
Команда onClick (на щелчок)Вы уже знаете, что onMouseOver запускает событие, если навести курсор на ссылку. Следовательно, щелкнув по ссылке, можно с таким же успехом запустить событие через onClick.
Чтобы продемонстрировать действие команды, я воспользуюсь методом alert. Если вы сделали задание к прошлому уроку, то знаете, что это такое. Вот еще раз его схема:
alert('текст, который появится в окне')
Таким образом, получаем:
Жмите сюда
И вот что это нам дает (когда вы нажмете на ссылку, она сработает):
Помните, что внутри одинарных кавычек нельзя употреблять слова с апострофами ', иначе браузер поймет их, как окончание текста, а это не входит в ваши намерения. Ошибка.
Команда onFocus (на фокус)
Это замечательная команда, которая вызывает действие, когда пользователь «фокусируется» на элементе страницы. Это годится для форм: флажков (checkbox) и текстовых полей (textbox).
Вот пример:
Вот что вы получаете (щелкните в поле ввода и посмотрите на строку состояния):
Команда onBlur (на потерю фокуса)
Если можно сосредоточиться на объекте, значит, можно и «потерять фокус». оnBlur позволяет сообщить пользователю о том, что он изменил свой ответ. Этот обработчик не так часто используется, но вот вам пример. Внизу у меня строка для ввода текста, в которой уже что-то написано. Измените текст и уведите курсор, как если бы вы перешли к следующему предмету в списке.
Здорово, а? Вы можете и сами догадаться, как это делается, но все равно вот вам код:
Команда onChange (на изменение)
Действие этой команды очень похоже на действие предыдущей, onBlur. Ее главная задача — проверка. Когда мы ближе познакомимся с формами, это станет понятнее. Этот обработчик события проверяет, сделал ли пользователь то, что вы от него просили. Пример очень похож на предыдущий, но действует все-таки по-другому.
Это дает вам следующее...
Команда onSelect (на выделение)
Эта команда работает так же, как и три предыдущие, отмечая, что в поле ввода произошли изменения, — в данном случае был выделен текст.
Команда onSubmit (на отправку)
Это очень популярная команда. Она позволяет вызвать какое-либо действие, когда вы нажимаете кнопку Submit (отослать, отправить). Многим очень хочется, чтобы после того, как пользователь нажимает на кнопку, у него на экране появлялась страница с надписью: «Спасибо, что вы нам написали».
Формат такой:
Вот что у вас выходит (щелкайте по кнопке):
Поглядите, у нас новая команда. Схема как будто знакомая, но какая-то странная.
parent.location — это стандартная схема ссылки на другую страницу. Можно подумать, что parent (источник) — это объект, а location (местонахождение) — метод. Неверно. В данном случае parent является свойством окна браузера, а location — объектом, который появится в этом окне. То есть для ясности просто имейте в виду, что parent.location='' означает ссылку.
Команды onLoad и onUnload (на вход и выход)
Пока я не привожу примера на эти команды, так как им отведен отдельный урок, однако я счел необходимым их упомянуть.
Обе они помещаются внутри строки HTML . Они вызывают событие, когда страница открывается или закрывается, то есть когда вы уходите со страницы. Эти команды потребуются вам, когда мы возьмемся за функции.
Концепция самоучителя
Самоучитель состоит из 25 уроков, в каждом из которых по следующей схеме объясняется новое понятие: сначала небольшое вступление и сам скрипт, затем эффект, который он производит, после этого подробный разбор скрипта вплоть до каждой запятой и задание для самостоятельной работы. В конце каждого урока ссылка на страницу с ответом.Имейте в виду, что в дальнейшем слово «я» будет относиться к американскому автору Джо Бернсу, за исключением слов, выделенных красным цветом.
Концепция
Мы обсудили объекты и методы. Теперь приступим к событиям (events). Сначала разрешите мне кое-что пояснить (или запутать). События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код, а не существуют самостоятельно, как те скрипты, которые мы с вами разбирали. Они входят в структуру документа НТМL, не требуя команд . Сами они не скрипты, а скорее область взаимодействия между вашей страницей и читателем.События — это то, что происходит. Они добавят динамики вашему сайту. Увидев их, посетители скажут: «Ух ты!», а сочинять длинные скрипты совсем не нужно.
Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, — onMouseOver (навести мышь).
Cейчас вы уже представляете себе, что такое некоторые события и команды, которые ими управляют. Давайте рассмотрим, как действуют другие. Все они работают по одной схеме. Так что если вам не чужда логика, вы легко сможете поместить их на свои страницы.
В этом уроке у меня две концепции. Одна только для тех случаев, когда вы решите запросить у пользователя информацию. Вторая, создание переменных, останется с вами на всю вашу жизнь в JavaScript.
Между прочим, научившись добавлять события к HTML, мы возвращаемся к полным скриптам, поэтому нам снова понадобится стандартный формат от . Вот что мы собираемся сделать: мы спросим у пользователя, как его зовут, и присвоим этому имени переменную. Как только переменная будет присвоена, мы сможем ввести ее в строку document.write, которая напечатает это имя на странице.
Скажу вам наперед, сегодняшний урок довольно длинный, так как мне хотелось немного задержаться и повторить то, что мы уже изучили.
Иерархия объектов JavaScript играет настолько важную роль, что мы посвятим ей отдельный урок, но мы уже и так начинаем понемногу ее осваивать.
Нам известно, что существуют объекты, например, document, и методы, например, write, которые воздействуют на объекты. В мы имели дело с переменными. Теперь рассмотрим концепцию свойств. Мы уже слегка касались этой темы. Свойства представляют собой часть или качество объекта. В мы работали со свойством документа bgColor.
Было бы трудно рассмотреть все возможные свойства на одной странице. У меня три книжки по JavaScript, и в них я насчитал 56 различных свойств, определяющих многочисленные объекты. Поэтому сейчас я расскажу вам о нескольких наиболее популярных и о том, какую пользу они приносят.
Уфф! Сделаем паузу и посмотрим, что мы уже знаем. В JavaScript есть объекты, похожие на существительные или предметы. У объектов есть свойства, которые описывают их, как прилагательные описывают существительные. Мы пользуемся схемой oбъект.свойство.
Еще у объектов есть методы, или действия, которые можно к ним применить. После метода ставятся скобки по схеме oбъект.мeтoд(). У разных объектов разные свойства и методы.
А теперь мы узнаем самый большой секрет JavaScript, иерархию объектов. Как только вы ее поймете, cчитайте, что JavaScript у вас в кармане!
Cоздавая переменную, вы присваиваете имя результату команды или события JavaScript. Создавая функцию, вы делаете почти то же самое, только имя присваивается целой серии команд. Множество команд JavaScript вы комбинируете в одну.
Это два последних обработчика событий, которые вы должны иметь в своем арсенале: onMouseOut и onUnload (обратите внимание на заглавные буквы). Я свел их в одном уроке, потому что обе они начинают действовать после того, как вы что-то сделали. onMouseOver вызывает некое событие, если навести мышь, к примеру, на ссылку. В противоположность ей onMouseOut начинает действовать, если курсор увести со ссылки. Вы также знаете, что команда onLoad запускает скрипт, когда страница загружается. Команда onUnload действует, когда пользователь уходит со страницы.
Это первый из двух уроков, посвященных открытию новых окон. Сначала вы узнаете, как через команды Javascript открыть новый документ HTML в другом окне. Второй урок научит вас, как с помощью функции поместить две разные страницы в одном документе.
Начнем с основ.
В мы открывали окно с помощью команды window.open. Окно заполнялось другим документом HTML, который мы указывали в скобках.
Сейчас мы попробуем создать функцию, которая откроет новое окно, причем и новое окно, и все его содержимое будет вписано в тот же документ HTML. То есть в буквальном смысле слова мы вложим две страницы в одну.
Команда confirm (подтвердить) действует очень похоже на alert, за исключением того, что добавляет кнопку «Отмена» в диалоговое окно. И то, и другое — методы.
Одна команда сама по себе многого не дает. Нет никакой разницы, что вы выбираете — «ОК» или «ОТМЕНА». Но стоит добавить функции IF (если) и ELSE (иначе), и готовы отличные эффекты.
Cегодня мы не только узнаем, как производить вычисления с помощью JavaScript, но и проверим, хорошо ли у вас с арифметикой. Если вам уже приходилось заниматься программированием, то это вам знакомо. Если нет, не паникуйте. Все очень просто!
Вспомним обработчики событий onMouseOver и onMouseOut. Мы уже делали нечто похожее — с помощью этих команд появлялся текст в строке состояния. Это было в .
Еще раз обратите внимание, что не требуются тэги . Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML .
Вот вам еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию.
В общем, когда вам нужна только одна команда JavaScript, можно включить ее целиком в . Для многократного повторения больше подходит функция.
Цель этого урока — познакомить вас с использованием JavaScript в формах. Сегодняшний скрипт через форму позволяет выбрать цвет фона.
Формы всегда начинаются командой . Здесь ничего нового, простой HTML.
Сегодня мы продолжим начатое в Уроке 17. Будем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo.
Продолжим разговор о взаимодействии форм и JavaScript.
Обычно JavaScript в соединении с формами используется для проверки ввода данных. У нас еще будет разговор на эту тему. Два следующих урока подготовят вас к нему.
Сегодня вы познакомитесь со случайным выбором чисел. Генерируя случайные числа, JavaScript пользуется датой и временем.
Сегодня вы познакомитесь с командой IF (если), которая дает возможность выбора.
За IF следует условие и указание, что делать, если оно верно. Верным может быть одно условие или несколько. Скрипт знает, где начинаются и кончаются верные условия, потому что они заключены в {фигурные скобки}.
Сегодня у нас в меню случайное число, две функции и знакомство с командой Else на закуску.
If/Else (если/иначе) дают вам дополнительный контроль над программой, позволяя принимать решения на оба случая: и когда условие выполнено, и когда не выполнено.
Прежде чем мы перейдем к следующей теме, позвольте мне показать вам еще один пример использования IF. Важно, чтобы вы хорошо овладели этой техникой, которая позволяет создавать более оригинальные и более интерактивные программы.
Все языки программирования имеют дело с циклами (loop). В JavaScript бывают циклы двух видов: While и For.
В двух словах, циклы For используются, когда известно количество повторений. Циклы While — когда вы не знаете точно, сколько раз нужно повторять команду. В сегодняшнем примере мы рассмотрим цикл For.
Сейчас вы увидите, что такое циклы While. Помните, я говорил, что циклы For используются, когда вы знаете, сколько раз нужно их повторять, а циклы While — когда не знаете. Первый же пример нарушает правило! Это нужно для того, чтобы показать вам, как пользоваться переменными, чтобы сосчитать повторения цикла и помочь вам подготовиться к заданию.
Моя домашняя страница
Как говорится...var0="От пирогов не толстеют"; var1="Кто ходит в гости по утрам?"; var2="До пятницы я совершенно свободен"; now=new Date() num=(now.getSeconds() )%3 if (num == 0) {cliche=var0} if (num == 1) {cliche=var1} if (num == 2) {cliche=var2} document.write(cliche + "
") document.write("Случайная цифра: " + num)
(Обновите страницу несколько раз, чтобы увидеть разные фразы и цифры.)
От переводчика
Этот самоучитель по JavaScript попался мне на глаза во время блужданий по дырам Интернета и поразил своей доступностью и эффективностью. Бескорыстная любовь к согражданам подвигла меня на создание русской версии. Милые чайники и начинающие, вы непременно научитесь составлять полезные и бесполезные скрипты, а также сможете при случае настроить по собственному желанию чужие сложные скрипты, которых найдется немало на других сайтах. Но это при условии, что вы будете внимательно выполнять задания, не стараясь проглотить все уроки за один день. Чтобы избежать путаницы, все термины продублированы по-английски.Разбор иерархии объектов

Поле с флажком может иметь value "on" или "off". Текстовое поле может иметь value "hidden" (скрытое), если вы не хотите, чтобы пользователь его видел. Ясно?
Разбор скрипта
Не пугайтесь сразу, скоро все станет понятно. Позвольте, уж я снова напомню вам о четкой форме скрипта. Строка document.write уходит далеко за границы экрана. Эту форму необходимо сохранить, иначе ваш браузер выдаст сообщение об ошибке.Что это за штука // ?
По ходу наших разговоров вы будете узнавать все больше новых команд. Это одна из них. Двойная дробь указывает на комментарий внутри скрипта. Она означает, что следующий за ней текст не участвует в процессе. Можете добавлять сколько угодно текста, только помните, что каждая строка должна начинаться с двойной дроби //.
Методы Дата и Время
Посмотрите на скрипт. Видите, скрипту дается команда поместить в документ число, месяц, год, часы, минуты и секунды. Несколько дополнительных слов объясняют, на что вы смотрите.
Все это было создано с помощью метода getЧто-либо(). Обратите внимание на заглавную букву. Сначала «g» в нижнем регистре, потом Заглавная буква.
Во-первых, помните, что все это цифры. Даже метод getDay(), который отвечает за день недели, выражается цифрой от единицы до семи.
Начнем с месяца. Как уже говорилось раньше, getMonth() — это метод, отвечающий за месяц. Теперь задумаемся о том, на какой объект воздействует метод getMonth(). Помните это из Урока 1? Метод (method) воздейcтвует на объект (object).
Может показаться, что getЧто-либо() — это метод объекта document. Вовсе нет. Метод документа — write. getMonth() на самом деле является методом объекта Date. Взгляните на скрипт еще раз. Date занимает отдельное место в команде:
Now = new Date();
Я устанавливаю объект, с которым будет работать метод getMonth(). Имея дело с датой и временем, всякий раз пользуйтесь той же схемой. Нужно создать объект. Мой объект называется Now (сейчас). Видите? Между прочим, я мог бы назвать его Zork или Fred, браузеру все равно. Это не имеет значения, если объект получил оригинальное имя, которое больше нигде в JavaScript не встречается.
Если вам кажется, что кое-что тут поставлено с ног на голову, я вас понимаю. Такое впечатление, что следует писать new Date = Now, но это не так. Вы изучаете незнакомый язык и обязаны подчиняться его правилам.
Вы уже знаете достаточно, чтобы понять смысл написанного. Давайте быстро разберем скрипт и попробуем его изменить.
Во-первых, onMouseOver (обратите внимание на заглавные буквы) представляет собой обработчик событий (Event Handler) гипертекстовой ссылки. Это понятно? Он используется внутри гиперссылки.
Формат ссылки остается без изменений. Те же команды и те же двойные кавычки. onMouseOver ставится сразу же после адреса URL. Видите?
Событие (Event) приводится в действие, когда браузер распознает onMouseOver="". Схема уже должна казаться вам немного знакомой: два элемента, разделенных точкой. До сих пор это означало, что один является объектом, а другой методом. Но не в этом случае. Объектом является window (окно), оно существует; status (статус) представляет собой property (свойство) oкна. Это небольшой участок окна, где должен разместиться следующий текст. Это проще запомнить, если представить, что метод обычно выражается глаголом, как write (писать) или get (получить). Свойство выражается существительным и существует как небольшая часть элемента, стоящего перед точкой.
Если у window есть изменяемое свойство status, значит, можно изменить и другие свойства окна. Это верно, но не будем лезть поперед батьки в пекло. Займемся пока окном и его строкой состояния.
После window.status следует знак равенства = и то, что должно произойти. В данном случае это текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на ссылку.
Пожалуйста, обратите внимание на точку с запятой в конце строки.
return true Эти два слова имеют не последнее значение. Они дают скрипту указание проверить, есть ли строка состояния. Если отчет (return) соответствует действительности (true), тогда происходит событие. Обратите внимание, что текст в строке состояния уже не изменяется и не изменится, сколько раз вы не наводили бы на нее курсор.
Поэтому не нужно злоупотреблять такими трюками — человек, пришедший к вам на сайт, имеет право знать точный адрес каждой ссылки и другую информацию о загрузке страницы, которую выдает строка состояния.
Стоп! Что это такое /* */?
Да, я вставил еще одну новую команду. Эти штуки означают комментарий внутри скрипта. Если помните, урока три назад я уже показывал вам двойную дробь //, отделяющую текст вашего комментария от скрипта. Это то же самое, но лучше. Двойную дробь необходимо ставить в начале каждой новой строки. Эти же команды годятся для пространных комментариев. Нужно поставить /* в начале и */ в конце, и все, что окажется между этими знаками, останется комментарием и не войдет в скрипт.
Создание переменной
Переменные имеют первостепенное значение в JavaScript. Вам необходимо научиться создавать их. В двух словах: вы назначаете имя, состоящее из одного слова, функции JavaScript. Помните, как мы помещали дату на страницу с помощью метода getDate()? В строке document.write мы написали метод getDate() целиком. Сделать это один раз было не так уж трудно. Но что если нужно было бы написать это десять раз на одной и той же странице? Писать и писать одно и то же порядком надоедает.
Потому мы и вводим переменную, которая должна представлять окончательный результат метода. Возьмем, к примеру, переменную d. Тогда нам нужно будет только однажды написать getDate() и назначить методу переменную d. И на протяжении всего оставшегося скрипта будем просто писать d там, где нужно поставить дату. Это понятно? Вернемся к примеру:
Вот строка из скрипта, которая назначает переменную:
var user_name = prompt ("Напишите свое имя","Здесь")
Переменная была создана по следующей схеме:
· var (от variable, переменная) объявляет, что следующим словом будет имя переменной.
· user_name (имя пользователя) — имя переменной. Я его придумал. Оно необязательно должно быть таким длинным. По правде, я мог бы назвать ее N, если б захотел. Просто удобнее так называть переменные, чтобы легко было вспомнить, о чем идет речь.
· Помните, что регистр имеет значение для JavaScript, следовательно, если вы назвали переменную Dog, то буква D каждый раз должна быть заглавной, иначе браузер посчитает их за два разных слова.
Поговорим о каждой группе отдельно...
Почему местами шрифт жирный?
Да так, ради забавы. Найдите в скрипте элементы, которые написаны жирным шрифтом. Я просто добавил команды и по обеим сторонам от имени переменной. Раз это document.write, в текст можно вписать любые команды HTML, изменяющие текст. Только следите за тем, чтобы команды HTML находились внутри двойных кавычек, иначе браузер посчитает их частью скрипта — это было бы ошибкой.
Вернемся к нашим свойствам...
Свойства объекта navigator
Люди обожают эти штуки. Объект navigator имеет четыре свойства. Обратите внимание на заглавные буквы!
Иногда важно знать версию браузера. Чуть позже мы изучим команды If (если). Зная браузер пользователя, можно дать команду: "Если браузер такой-то, сделать то-то."
Свойства объекта document
. Если вы поставите их снаружи, то браузер посчитает комментарием весь скрипт и ничего не выйдет.
· Текст после команды должна стоять двойная дробь //, иначе JavaScript примет ее за часть скрипта. Ошибка.
· Нет, совсем не обязательно писать текст к этим командам. Я вставил его, чтобы вам проще было понять их назначение.
· Пользуйтесь приведенной выше схемой, и у вас не будет проблем.
Вернемся к разбору
Сначала первая часть скрипта устанавливает функцию. Потом команда в строке ее запускает. Давайте сначала разберем функцию.
function dateinbar()
{
var d = new Date();
var y = d.getFullYear();
var da = d.getDate();
var m = d.getMonth() + 1;
Эффекты с мышью, как вы уже догадались, создаются с помощью команд onMouseOver и onMouseOut. Обратите внимание, что между ними ощутимая разница. Вам не нужно, чтобы эти события происходили одновременно. Помните, несколько уроков назад мы разделяли два обработчика событий запятой, чтобы они происходили одновременно? Здесь не тот случай. Следовательно, нужно писать их как две абсолютно разные команды, каждая из которых содержит свою команду return true.
Чтобы получить такой эффект при уходе со страницы, добавляем команду onUnload="alert('Уже уходите?')" в строку BODY. Обратите внимание на двойные и одинарные кавычки. Внутри двойных — одинарные. Вторая пара двойных кавычек означает для браузера конец команды.
Расположение на странице
Начнем с расположения скрипта на странице. До сих пор я говорил, что лучше помещать скрипты повыше, чтобы они первыми загружались в память компьютера и начинали работать без задержки. Когда вы имеете дело с функцией, скрипт помещается между командами . Здесь я хочу сделать вам другое предложение.
Если вы собираетесь открывать новое окно, ставьте скрипт ближе к концу документа. Проще говоря, пусть он идет в последнюю очередь. Причина простая: сначала загрузится страница, а потом всплывет окошко. Если команда стоит в начале, то окошко всплывет прежде, чем пользователь увидит вашу страницу. Скорее всего он закроет новое окно, не успев им воспользоваться.
Это только мое мнение. На самом деле можно ставить скрипт куда угодно, и он будет работать. Просто я считаю, что чем позже откроется новое окно, тем лучше для вас и для посетителей ваших страниц.
Не стоит злоупотреблять всплывающими окнами. По себе и по другим знаю, как это иногда раздражает. Если же появление нового окна оправдано, то хорошо бы предупредить об этом заранее.
window.open
Нельзя сказать яснее, чем это: window (окно) — объект, a open (открыть) — метод, который на него воздействует.
Конфигурация нового окна
Информация об этом находится в круглых скобках (это называется примером, помните?) Вот схема, которой вы будете следовать:
('URL документа в новом окне', 'Название нового окна', config='параметры нового окна')
Сегодняшний образец:
('opened.html','joe',config='height=300,width=300')
Команды конфигурации
Они сообщают, что новое окно будет размером 300 на 300 пикселей.
Кстати, всегда делайте ваше окно немножко больше, чем нужно вам. Может быть, у кого-то другое разрешение экрана, и ваши размеры окна ему не годятся.
Главная часть скрипта, содержащая функцию, помещается между командами и , как большинство функций.
По самой обычной схеме функция получает имя openindex(). Теперь подходим к основному моменту. Создаем переменную OpenWindow, под которой скрывается команда window.open(). Вот так:
var OpenWindow=window.open("", "newwin", "height=300,width=300');
Это было на . Единственная разница в том, что вы не указываете URL. Видите пустые парные кавычки? Они говорят браузеру, что он должен искать информацию о новом окне. То же самое, что и не ставить URL в ссылку, которая закрывает окно. Оно бы не закрылось, если бы начала загружаться новая страница. Точно так же и тут. Браузер стал бы загружать новую страницу, а не выполнять скрипт.
Теперь начинаем писать страницу HTML, которая будет внутри нового окна. Вот первая строка текста:
OpenWindow.document.write("")
Переменная OpenWindow (то есть новое окно) говорит, что этот текст должен быть вписан в документ.
Взгляните на скрипт. Каждая новая строка следует той же схеме. Можно написать сотню строк, создающих законченную страницу. Наш скрипт совсем небольшой, так как это наглядное пособие.
Помните: когда вы пишете HTML внутри команды document.write, вместо двойных кавычек с подкомандами ставьте одинарные. Иначе будут проблемы.
Наконец командой onLoad в строке BODY запускается функция.
У вас есть выбор
Во-первых, скрипт говорит:
if (confirm("Вы уверены, что хотите пойти на прошлый урок?") )
Это значит Если (Здесь ваш шанс сделать выбор)
В нашем случае сonfirm предлагает альтернативу: «OK» и «Отмена». Можно сказать, Да и Нет. Обратите внимание на скобки. После команды IF всегда идут скобки, но, как известно, команды сonfirm тоже требует скобок. Следовательно, берем две пары скобок, одна внутри другой.
Сразу же после этого идут команды, выполняемые при каждом варианте ответа. Обратите внимание на фигурные скобки{}. Ведь в действительности это функции. Первая из них показывает, что должно произойти, если пользователь выберет ОК (или Да).
{
parent.location='http://www.jsp.newmail.ru/les12.htm';
alert("Счастливого пути");
}
Если помните, несколько уроков назад я говорил, что parent.location означает ссылку. Дальше идет обыкновенная команда alert. Не забудьте про точки с запятой в конце строк.
А что если я выберу отмену?
Мы уже знаем, что если выбрать ОК, запускается функция IF (если). Отмена — другой выбор. Видите, сразу после фигурной скобки идет команда ELSE (иначе), как бы «если нет». И тогда следующий текст...
else
{
alert("Tогда оставайтесь");
}
...означает: если нет, тогда вызвать окно и не менять страницу.
Все это вместе и дает пользователю возможность выбора: входить или не входить.
Это самые основы использования IF и ELSE. Позже команде IF мы посвятим целый урок. Она того заслуживает, как вам кажется? Аплодисменты команде IF, дамы и господа!
Скрипт устанавливает переменную numsums. Видите, она равна 12 (10+2)? Затем он переводит переменную в alert и показывает, что 10 + 2 = переменная или 12. Ясно?
Другая переменная, х, приравнивается к 10, и alert тоже показывает ее значение.
Следующая переменная, y, равна x, умноженному на 2. Дважды десять — двадцать, не правда ли? Ответ тоже виден в окне alert.
Наконец создается переменная z, которая доказывает, что с помощью знаков исчисления можно соединять текст. И снова метод alert.
Посмотрите еще раз, как работает скрипт.
Вы уже знаете о событиях достаточно, чтобы самостоятельно разобрать скрипт. Когда убираете курсор с картинки, появляется b.gif. Когда наводите на картинку, появляется а.gif.
Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME="pic1". Не имеет значения, сколько изображений у вас на странице и в каком порядке они располагаются, если вы присвоили отдельное имя каждой нужной картинке.
...идве разные картинки:
onMouseOver="up()" onMouseOut="down()">

BORDER=0>
onMouseOver="up2()" onMouseOut="down2()">

BORDER=0>
Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой картинки.
Вот снова скрипт и форма:
function newcolor(color)
{
alert("Вы выбрали " + color)
document.bgColor=color
}
Форма передает цвет двум элементам в разделе
— так цифры печатаются с новой строки. С таким же успехом можно было написать их в одну строку, разделив запятыми.
Еще одна коротенькая программа, мы ее мигом разберем.
Другими словами, программа повторит цикл трижды, один раз для num=1, один раз для num=2 и еще один раз для num=3.
и время вашего прибытия на
Кстати, строка document.write не должна прерываться. Я разбил ее на несколько, чтобы удобнее было читать.
Текст в скобках должен располагаться на одной строке.
Ниже вы увидите множество скриптов, но все они составлены по одной схеме: создается переменная для каждой команды объект.свойство, затем переменные помещаются в document.write(). Внимание: 1) заголовки жирным шрифтом не являются частью самих скриптов; 2) текст в скобках после document.write() должен располагаться на одной строке.
Свойства объекта navigator (браузер)
Свойства объекта document
Свойства объекта history
Два свойства объекта location (адрес)
Сам скрипт состоит из двух частей: собственно функции и команды onLoad, которая ее запускает.
Вот обе части:
...и команда onLoad в :
С мышью:
onMouseOut="window.status='Так-то лучше, спасибо'; return true">
Наведите курсор на эту ссылку и уведите обратно
При уходе со страницы:
...ив строке BODY:
onLoad="openindex()"
Помните, текст в скобках должен находиться на одной строке.
Знакомо? Пора бы уже. То же самое, что и alert, кроме слова confirm. Вот основной пример
того, что делает скрипт. Как видите, немного. Но вот вам та же команда с некоторыми добавлениями:
Сообщение об ошибке
В основном бывают ошибки двух типов: синтаксиса и сценария. Ошибка синтаксиса означает опечатку или пропущенный текст. Ошибка сценария значит, что вы перепутали местами команды или вставили неправильные. Так или иначе, дело в одном — где-то вы напутали.Существуют программы, которые помогают исправлять ошибки, этот процесс называется «debugging» («уничтожение багов, ошибок»), но я все же предпочитаю делать это вручную. На самом деле это даже легче, чем можно подумать.
Сообщения об ошибках
КонцепцияЗнаете, какая тема вообще не обсуждается ни в одной из миллиона книг по JavaScript, которые я перечитал? Сообщения об ошибках. Вероятно, авторы этих книг полагают, что вы с самого первого раза все делаете правильно и никогда не получаете таких сообщений. Пора снять розовые очки.
Если вы хоть раз пытались написать JavaScript или вставить готовый на свою страницу, тогда вам известно, что этот номер входит в программу развлечений. Вроде бы уже все в порядке и тут... бац! Выскакивает такая штука:

Сегодня я собираюсь рассказать вам, как реагировать, если браузер сообщает об ошибке. Я такие окна видел тысячами. Начнете писать JavaScript, тоже получите свою долю.
Дата и время
КонцепцияИз вам известно, что существует такой объект как документ. Иначе в нем ничего нельзя было бы написать. Сегодня мы поговорим о семи методах объекта: getDay(), getDate(), getMonth(), getYear(), getHour(), getMinute(), и getSecond() (получитьДень, Число, Месяц, Год, Час, Минуту, Секунду). Все они уже существуют, их можно взять и поместить на страницу. Проблема в том, что это всего лишь методы. Для воздействия им нужен объект, а документ для этих целей не годится... так что придется самим придумывать новый объект.
Ошибка 2000!
С 1 января 2000 вместо двух последних цифр года, как раньше, getYear в Експлорере показывает полный четырехзначный номер, а в Нескейпе — число 100. Может быть, Нетскейп заделает эту дырку, а до тех пор лучше пользоваться командой getFullYear, которую, кажется, правильно воспринимает и тот, и другой. Правда, Опера ее вообще не воспринимает.
Ваше задание
П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.

Сегодня не самое простое задание. Создайте функцию, которая вызовет два запроса (prompt). (Подсказка: один следует за другим с новой строки.) Первый попросит пользователя ввести свое имя, второй — отчество. Затем та же функция должна вызвать окно предупреждения (alert) c текстом:
Привет, имя отчество, добро пожаловать на адрес страницы, мою замечательную страницу!
Непременно создайте переменную для адреса страницы.
Если хотите еще поразвлечься, пусть слова "мою замечательную страницу" будут не просто вставлены в текст alert, сделайте это по-другому. Присвойте переменную и этому элементу.
Потренируемся с функцией, onMouseOver и onMouseOut.
Я не показал вам в действии все доступные характеристики окна, так что в качестве задания напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300 пикселей и с двумя ссылками:
Сегодня вам придется написать функцию, которая открыла бы окно с зеленым фоном и приветствием: «Привет, имя пользователя, вот твое окно!» Имя пользователя можно узнать с помощью запроса. Разумеется, допишите еще ссылку, которая закроет окно.
Не пугайтесь, вы это можете. Преобразуйте скрипт, о котором мы сегодня говорили, в функцию. Да, и сделайте так, чтобы при отмене, кроме окна, еще появлялась какая-нибудь надпись в строке состояния.
Перепишите скрипт в виде функции. Если хотите, поэкспериментируйте с делением. Пусть функция запускается командой оnLoad.
Cоздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.
Переделайте прошлое задание, создав две функции для смены картинки.
Посмотрим, хорошо ли вы помните материал предыдущих уроков. Перепишите скрипт так, чтобы, открываясь, страница просила пользователя ввести имя. При выборе цвета должно всплывать окно со словами «Эй, (имя)! Вы выбрали (цвет)...» Желаю успеха.
Измените скрипт так, чтобы он вызывал другую поисковую систему. И еще, пусть при подаче запроса выскакивает окошко с надписью «Сейчас поищем...»
Составьте документ HTML с формой aform. В ней должно быть два текстовых поля, одно для геометрической фигуры, другое для цвета, и кнопка. Напишите функцию с переменной, которая содержит слова «Мне нравится ». Когда пользователь нажмет на кнопку, должно всплывать окно со следующей надписью:
Напишите программу JavaScript, в которой пользователь нажимал бы кнопку, а программа предлагала бы ему случайную цифру от 0 до 5 со словами: "Ваша случайная цифра: "х".
Перепишите программу так, чтобы она спрашивала, какого вы пола. Пусть в зависимости от ответа меняется фоновый цвет страницы. Помните, что в JavaScript различаются строчные и заглавные буквы, так что будьте внимательны в своих условиях.
Придется вам постараться! Измените сегодняшний скрипт так, чтобы при неверной догадке он сообщал пользователю, что он назвал слишком большое или слишком маленькое число.
Подсказка! В этом случае возможны только три решения: слишком много, слишком мало или правильно. Подумайте вот о чем: нужна ли вам команда Else или сойдет и парочка дополнительных If?
Измените программу так, чтобы она показывала рисунок, выбранный наугад из трех: pic1.gif, pic2.gif и pic3.gif.
Напишите документ HTML с заголовком «Сюрприз». Начните с белого фона. Потом с помощью JavaScript досчитайте до 50000.
На этом этапе цвет фона меняется на желтый и появляется текст: «Скоро будет еще один цветной сюрприз...»
Снова досчитайте до 50 тысяч, и тогда фон должен опять поменяться. Успеха.
Подсказка: никаких команд в {фигурные скобки} ставить не надо.
Примечание: Владельцам компьютеров на 900MHz и выше лучше выбрать числа побольше, иначе эффекта практически не видно.
Снова не такое простое. Во-первых, заставьте работать сегодняшнюю программу. Потом измените ее так, чтобы пользователь получал запрос: «Сколько раз пожелать вам доброго вечера?» Для ответа создайте переменную. Помните команду eval(), которая меняет текст на число? В конце программа должна написать «Добрый» столько раз, сколько ее просили.
...повтор пройденного.
Oтлично, мы прошли шесть уроков. Пора приниматься за скрипты потруднее. Моя цель не сбить вас с толку, а показать, что у вас уже достаточно знаний для создания шикарных эффектов посредством команд JavaScript. Сегодня я хочу, чтобы вы посмотрели на скрипт, указанный ниже, и объяснили, как работает каждая его часть. Вы удивитесь тому, как легко эти чудовища раскладываются на понятные элементы, как только возьметe в толк, что происходит.
Бизнес: Предпринимательство - Малый бизнес - Управление
- Бизнес
- Разновидности бизнеса
- Планирование бизнеса
- Управление бизнесом
- Предпринимательство
- Русское предпринимательство
- Управление и предпринимательство
- Малый бизнес
- Виды малого бизнеса
- Русский малый бизнес
- Управление малым бизнесом
- Posix для малого бизнеса
- Телефония как малый бизнес
- Телефония на Java для малого бизнеса