Данное руководство представляет собой введение в JavaScript и некоторые примеры.
(По книге Стефана Коха "JavaScript - Einfuehrung, Programmierung und Referenz")

Часть 1 : Первые шаги

Что такое JavaScript
JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript Вы можете легко создавать интерактивные Web-страницы. В данном руководстве Вы увидите, что можно сделать с помощью JavaScript, и даже более того - увидите, как это сделано.
JavaScript - это не Java!
Многие люди считают, что JavaScript - это то же самое, что и Java, лишь потому, что эти языки имеют схожие названия. На самом деле это не так. Я считаю, что сейчас будет излишне показывать Вам все различия между этими языками - так что запомните лишь то, что JavaScript - это не Java.

Запуск JavaScript

Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Вам понадобится браузер, способный работать с JavaScript - например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространеными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Несомненно, это важный аргумент в пользу выбора языка JavaScript, как средства улучшения ваших Web-страниц.
Конечно же, перед чтением данного руководства Вы должны познакомиться с основами другого языка - HTML. При этом, возможно, Вы обнаружите, что много хороших средств диалога можно создать, пользуясь лишь командами HTML. Чтобы получить дополнительную информацию о языке HTML, лучше всего инициировать поиск по ключевому слову "html" на поисковом сервере Yahoo.

Размещение JavaScript на HTML-странице

Код скрипта JavaScript размещается непосредственно на HTML-странице. Чтобы увидеть, как делается, давайте рассмотрим следующий простой пример:

Это обычный HTML документ.




Вновь документ HTML.

С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь - конструкция:

document.write("А это JavaScript!")

Это действительно код JavaScript. Чтобы видеть, как этот скрипт работает, запишите данный пример как обычный файл HTML и загрузите его в браузер, имеющий поддерку языка JavaScript. В результате Вы получите 3 строки текста:

Это обычный HTML документ.
А это JavaScript!
Вновь документ HTML.

Я должен признать, что данный скрипт не столь полезен - то же самое и более просто можно было бы написать на "чистом" языке HTML. Я всего лишь хотел продемонстрировать Вам тэг признака . Все, что стоит между тэгами и , интерпретируется как код на языке JavaScript. Здесь Вы также видите пример использования инструкции document.write() - одной из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write() используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ). Так наша небольшая программа на JavaScript в HTML-документе пишет фразу "А это JavaScript!".

Браузеры без поддержки JavaScript

А как будет выглядеть наша страница, если браузер не воспринимает JavaScript? Браузеры, не имеющие поддержки JavaScript, "не знают" и тэга . Они игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, читатель увидит, как код JavaScript, приведенный в нашей программе, окажется вписан открытым текстом прямо посреди HTML-документа. Разумеется, это не входило в наши намерения. На этот случай имеется специальный способ скрыть исходный код скрипта от старых версий браузеров - мы будем использовать для этого тэг комментария из HTML - . В результате новый вариант нашего исходного кода будет выглядеть как:

Это обычный HTML документ.





Вновь документ HTML.

В этом случае браузер без поддержки JavaScript будет печатать:

Это обычный HTML документ.
Вновь документ HTML.

А без HTML-тэга комментария браузер без поддержки JavaScript напечатал бы:

Это обычный HTML документ.
document.write("А это JavaScript!")
Вновь документ HTML.

Пожалуйста обратите внимание, что Вы не можете полностью скрыть исходный код JavaScript. То, что мы здесь делаете, имеет целью предотвратить распечатку кода скрипта на старых браузерах - однако тем не менее читатель сможет увидеть этом код посредством пункта меню "View document source". Не существует также способа скрыть что-либо от просмотра в вашем исходном коде (и увидеть, как выполнен тот или иной трюк).

События

События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:

Данный пример имеет несколько новых особенностей - рассмотрим их по порядку. Вы можете здесь видеть, что мы создаем некую форму с кнопкой (как это делать - проблема языка HTML, так что рассматривать это здесь я не буду). Первая новая особенность - onClick="alert("Yo")" в тэге . Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, компьютере должен выполнить вызов alert("Yo"). Это и есть пример кода на языке JavaScript (Обратите внимание, что в этом случае мы даже не пользуемся тэгом ). Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это "Yo". И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда читатель когда щелкает на кнопке, наш скрипт создает окно, содержащее текст "Yo".

Некоторое замешательство может вызвать еще одна особенность данного примера: в команде document.write () мы использовали двойные кавычки ("), а в конструкции alert() - только одинарные. Почему? В большинстве случаев Вы можете использовать оба типа кавычек. Однако в последнем примере мы написали onClick="alert("Yo")" - то есть мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick="alert("Yo")", то компьютер не смог бы разобраться в нашем скрипте, поскольку становится неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick, а к которой - нет. Поэтому Вы и вынуждены в данном случае перемежать оба типа кавычек. Не имеет значения, в каком порядке Вы использовали кавычки - сперва двойные, а затем одинарные или наоборот. То есть Вы можете точно так же написать и onClick="alert("Yo")".

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

Итак, если Вы используете браузер Netscape Navigator, то выпадающее окно содержит текст, что был передан функции JavaScript alert. Такое ограничение накладывается по соображениям безопасности. Такое же выпадающее окно Вы можете создать и с помощью метода prompt(). Однако в этом случае окно будет воспроизводить текст, введенный читателем. А потому, скрипт, написанный злоумышленником, может принять вид системного сообщения и попросить читателя ввести некий пароль. А если текст помещается в выпадающее окно, то тем самым читателю дается понять, что данное окно было создано web-браузером, а не вашей операционной системой. И поскольку данное ограничение наложено по соображениям безопасности, Вы не можете взять и просто так удалить появившееся сообщение.

Функции

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

И такой скрипт напишет следующий текст

Добро пожаловать на мою страницу!
Это JavaScript!
три раза. Если посмотреть на исходный код скрипта, то видно, что для получения необходимого результата определенная часть его кода была повторена три раза. Разве это эффективно? Нет, мы можем решить ту же задачу еще лучше. Как насчет такого скрипта для решения той же самой задачи?:

В этом скрипте мы определили некую функцию, состоящую из следующих строк:

function myFunction() {
document.write("Добро пожаловать на мою страницу!
");
document.write("Это JavaScript!
");
}

Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction (). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. И действительно, нашем примере есть три вызова этой функции - Можно увидеть, что мы написали строку myFunction() три раза сразу после того, как дали определение самой функции. То есть как раз и сделали три вызова. В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды. Поскольку это довольно простой пример использования функции, то у Вас мог возникнуть вопрос, а почему собственно эти функции столь важны в JavaScript. По прочтении данного описания Вы конечно же поймете их пользу. Именно возможность передачи переменных при вызове функции придает нашим скриптам подлинную гибкость - что это такое, мы увидим позже.

Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим следующий пример:

Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменную мы можем определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин - чисел, строк текста и т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т.е. 5 + 12). После этого в переменный result будет размещено число 17. В данном случае команда alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в котором написано число 17.

После того как мы обсудили подходы к изучению HTML и CSS, пришло время уделить внимание JavaScript, третьему ключевому навыку веб-дизайнера. JavaScript - это язык скриптов. Это означает, что его синтаксис несколько сложнее синтаксиса HTML и CSS. И перед тем как вы сможете свободно писать код на JavaScript, вам придется еще много чего изучить. Я хотел сказать, что у большинства людей на изучение JavaScript уходит чуть больше времени, чем на изучение HTML и CSS. Существует множество мнений по поводу того, какой подход к изучению JavaScript считать самым лучшим, и не все эти мнения совпадают с моим.

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

Этот язык был создан для работы с HTML и CSS, поэтому в нем много встроенных функций, облегчающих процесс управления поведением сайтов. JavaScript дополняет статичную природу HTML, позволяя создавать интерактивные элементы, отображать элементы в зависимости от определенных условий, создавать анимацию элементов или выполнять произвольное количество задач, связанных с написанием скриптов. Очень важно выяснить, для выполнения каких задач подходит JavaScript, поскольку благодаря этому вы научитесь понимать, в каких ситуациях его следует использовать, и на что стоит обращать внимание во время изучения JavaScript.

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

Кроме того, рекомендую сначала изучить основы JavaScript, а потом уже приступать к изучению таких библиотек, как jQuery. Использовать jQuery - довольно заманчивая идея, поскольку это мощный инструмент, и им пользуется множество людей. Вы мгновенно найдете сотни пособий о том, как использовать jQuery для своего сайта. Но если вы займетесь изучением jQuery еще до того, как изучите JavaScript, то это станет большой ошибкой. Как вы понимаете, использование библиотеки jQuery не всегда является правильным решением. И если вы будете знать только то, как пользоваться той или иной библиотекой, то не сможете понять, когда стоит использовать JavaScript, а когда нет.

Такой подход подразумевает, что вам следует как минимум структурированно и сосредоточено изучить основы JavaScript с помощью, например, конкретного курса или книги. Несмотря на то что множество пособий учит вас, как выполнять весьма конкретные задачи с помощью JavaScript, вам действительно необходимо иметь четкое представление о его концепциях и синтаксисе, чтобы понимать, что скрывается за тем или иным вашим действием. Конечно, не всем веб-дизайнерам нужно быть специалистами в JavaScript. Те дизайнеры, которые, к примеру, хотят заниматься frontend-разработкой, должны свободно владеть JavaScript.

А тем, кто больше интересуется UX-дизайном или визуальным дизайном, вполне достаточно знать только основы. Независимо от того, сколь глубокими должны быть ваши знания JavaScript, вам необходимо освоить самые важные его концепции, чтобы иметь практическое представление об этом языке. Главное - будьте терпеливы. На изучение JavaScript уходит много времени, и если вы слишком быстро бросите его изучение, то не сможете вспомнить то, что изучили, если вам это понадобится для какого-либо проекта. Я настоятельно рекомендую вам начать с курса Саймона Аллардайса "JavaScript Essential Training" (Основы JavaScript), который можно найти в библиотеке онлайн-тренингов на сайте lynda.com.

JavaScript в нем рассматривается с точки зрения новичка, а основы JavaScript и правда описываются самым прямолинейным образом. Кроме того, я рекомендую... простите, если я неправильно произнесу... Книгу Марижна Хавербеке (Marijn Haverbeke). Кстати, это отличный парень. Так или иначе, я рекомендую вам прочитать его книгу "Eloquent JavaScript" (Выразительный JavaScript), которая также носит название "Modern Introduction to Programming" (Современное введение в программирование). Эта книга и правда написана доступным для новичков языком. По JavaScript написано много книг, но эта книга написана программистом и для программистов. Книга "Eloquent JavaScript" была написана таким образом, что является своего рода введением в язык для новичков.

Что самое удивительное, можно купить печатную версию книги, но... Давайте щелкнем по этой ссылке... Есть еще электронная версия этой книги. В ней рассматривается все, что касается языка JavaScript, а также приводится несколько работоспособных примеров, с которыми вы можете поэкспериментировать, чтобы понять, как все это работает. Это и правда очень классный небольшой сайт. Как и в случае с HTML и CSS, на сайте docs.webplatform.org есть раздел, посвященный JavaScript. Вы увидите, что он очень полезен, поскольку здесь есть некоторые обучающие материалы, обсуждаются функции, объекты, события - все те элементарные сущности, которые нужно знать при изучении JavaScript.

Я не могу недооценивать важность сайта stackoverflow.com. Если вы никогда с ним раньше не сталкивались, то стоит отметить, что этот сайт позволяет создать свой аккаунт и впоследствии постить вопросы членам этого сайта о тех вещах, которые сбивают вас с толку, когда вы работаете над собственными проектами, или задавать вопросы о тех понятиях, которые вам сложно усвоить. Зачастую люди дают множество разных советов, при этом хорошие ответы получают дополнительные голоса, а у плохих советов голоса отнимаются. Поэтому через некоторое время благодаря отзывам членов сообщества вы сможете понять, какой ответ самый лучший. Вы можете не только постить вопросы, но и искать их на сайте. Есть вероятность, что кто-то уже задавал интересующий вас вопрос. Поэтому сайт stackoverflow.com - действительно очень полезный ресурс. Как и в случае с HTML и CSS, на сайте проекта "Mozilla developer network" тоже есть раздел, посвященный JavaScript. На нем представлено множество различной информации. Кроме того, в правой части сайта есть раздел, в котором перечисляются те ресурсы, на которых можно получить более подробную информацию по той или иной теме. Некоторая часть этой информации является абсолютно технической. Но в основном любой новичок в JavaScript может воспользоваться большей частью этой информации на самом начальном этапе изучения этого языка программирования. Если после овладения основами JavaScript у вас появится желание более подробно изучить этот язык, то вы можете воспользоваться еще одной, довольно полезной, по моему мнению, книгой - "Professional JavaScript for Web Developers" (Профессиональный JavaScript для веб-разработчиков), автором которой является Николас Закас.

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

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

йФБЛ, ЧЕВ-УФТБОЙГБ ЦЙЧЈФ. чЩ ОБТЙУПЧБМЙ ЛБТФЙОЛЙ, РПДЗПФПЧЙМЙ ФЕЛУФ, УДЕМБМЙ ЧУЈ, ЮФП ИПФЕМПУШ, Й… ЪБУЛХЮБМЙ. рПЮЕНХ? дБ ИПФС ВЩ РПФПНХ, ЮФП ЧЩУФТБДБООБС ЧБНЙ УФТБОЙЮЛБ ОЙЛБЛ ОЕ ПФЛМЙЛБЕФУС ОБ ДЕКУФЧЙС ЧМБДЕМШГБ, ЦБДОП ЫБТСЭЕЗП РП ОЕК ЛХТУПТПН. фШЖХ, РПЮФЙ ОЕРТЙМЙЮОП РПМХЮЙМПУШ… фЕН ОЕ НЕОЕЕ, ВХДЕН МЕЮЙФШ.

дП ФПЗП, ЛБЛ ОБЮБФШ ТБУУЛБЪ П ЧУСЛЙИ ФЕИОЙЮЕУЛЙИ ЖПЛХУБИ ОБ РПФЕИХ РПУЕФЙФЕМСН Й УЕВЕ, МАВЙНЩН, ОБДП РТЕДУФБЧЙФШ, ЮФП ЧППВЭЕ НЩ УПВЙТБЕНУС ДЕМБФШ.

сЪЩЛ HTML УФБФЙЮЕО. дМС ФПЗП, ЮФПВЩ ОБХЮЙФШ УФТБОЙГХ «ЦЙФШ», ПФЛМЙЛБФШУС ОБ ДЕКУФЧЙС РПМШЪПЧБФЕМС, ОХЦОП ОБКФЙ УРПУПВ ъбртпзтбннйтпчбфш ФП ЙМЙ ЙОПЕ ЕЈ РПЧЕДЕОЙЕ. хНОЩЕ МАДЙ — ОЕ ЮЕФБ ОБН У ЧБНЙ — ТЕЫБАФ ЬФХ РТПВМЕНХ, ЧУФБЧМСС Ч ЗЙРЕТФЕЛУФ ЛХУЛЙ РТПЗТБННОПЗП ЛПДБ, ЛПФПТЩЕ ОБЪЩЧБАФ ултйрфбнй. чППВЭЕ ЗПЧПТС, УЛТЙРФ — РТПУФП НБМЕОШЛБС РТПЗТБННЛБ, УТБВБФЩЧБАЭБС ФПЗДБ, ЛПЗДБ ЕК УЛБЦХФ, Й ОБРЙУБОБ ПОБ НПЦЕФ ВЩФШ ОБ ПДОПН ЙЪ ОЕНБМПЗП ЛПМЙЮЕУФЧБ УЛТЙРФПЧЩИ СЪЩЛПЧ. нЩ У ЧБНЙ ВХДЕН ЗПЧПТЙФШ ФПМШЛП ПВ ПДОПН ЙЪ ОЙИ — JavaScript . уЙОФБЛУЙУ JavaScript ЧЪСФ ЙЪ ВПМШЫПЗП Й УЕТШЈЪОПЗП СЪЩЛБ Java , ОБ ЛПФПТПН РТПЗТБННЙТХАФ УФТБЫОЩЕ ВПТПДБФЩЕ ДСДЙ ДЕЧЕМПРЕТЩ, РПМХЮБС ЪБ ЬФП ЦХФЛЙЕ ДЕОШЗЙ.

оБЫЕ У ЧБНЙ ДЕМП НБМЕОШЛПЕ, ОБН ОБДП РТПУФП ОБХЮЙФШУС РЙИБФШ ЬФЙ УБНЩЕ УЛТЙРФЩ ЛХДБ РПРБМП, ЮФПВЩ ЧУЈ НЙЗБМП, ЛТХФЙМПУШ, ДЈТЗБМПУШ Й ЬФБЛ НЕ-ЕДМЕООП НЕОСМП ГЧЕФ ЖПОБ РТЙ ЪБЗТХЪЛЕ. й ФПЗДБ ЛПЗП-ОЙВХДШ РМПИПЗП ПФ ОБЫЕК УФТБОЙГЩ ФПЮОП ИЧБФЙФ ЛПОДТБФЙК, Б ЪОБЮЙФ, НЩ У ЧБНЙ ИПТПЫЙЕ. б ЕУМЙ ЛПОДТБФЙК ИЧБФЙФ ЛПЗП-ОЙВХДШ ИПТПЫЕЗП? оЕФХЫЛЙ! ьФЙНЙ ЪБДБЮБНЙ ЪБОЙНБАФУС УРЕГЙБМЙУФЩ РП НБТЛЕФЙОЗХ Й ТЕЛМБНЕ, ПОЙ ЪОБАФ, ЮФП ФБЛПЕ гемечбс зтхррб, Й ПФЗПОСФ ЧУЕИ ИПТПЫЙИ ПФ ЬФПЗП НЙЗБОЙС Й ЧЕТЮЕОЙС. оХ, ЮФП-ФП С ПРСФШ ЪБРХФБМУС: ДМС ЛПЗП Ц НЩ ФПЗДБ ЧППВЭЕ ФТХДЙНУС?

уОПЧБ ЛПОФЕКОЕТЩ…

юФПВЩ ЧУФБЧЙФШ ЛХУПЛ ЛПДБ ОБ СЪЩЛЕ JavaScript Ч ФЕМП HTML -УФТБОЙГЩ, ОБН У ЧБНЙ ПРСФШ РПОБДПВЙФУС ЛПОФЕКОЕТ. чПФ ФБЛПК:

еДЙОУФЧЕООЩК РБТБНЕФТ, ЛПФПТЩК ДЕКУФЧЙФЕМШОП УФПЙФ ЙУРПМШЪПЧБФШ, ОБЪЩЧБЕФУС language . пО ПРТЕДЕМСЕФ, ОБ ЛБЛПН СЪЩЛЕ ОБРЙУБОП ЧУЈ ФП, ЮФП ОБИПДЙФУС ЧОХФТЙ ЛПОФЕКОЕТБ. дЧЕ ДПРПМОЙФЕМШОЩЕ УФТПЮЛЙ ЧОХФТЙ ЗПЧПТСФ УФБТПНХ ВТБХЪЕТХ, ЛПФПТЩК ОЙЛБЛЙИ УЛТЙРФПЧ ОЕ РПОЙНБЕФ, ЮФП ЧУЈ, ОБИПДСЭЕЕУС НЕЦДХ — ЛПННЕОФБТЙК, ЛПФПТЩК ОБДП РТПУФП ПУФБЧЙФШ Ч РПЛПЕ Й ОЙЮЕЗП У ОЙН ОЕ ДЕМБФШ. фБЛЙН ПВТБЪПН, ЕУМЙ ЛФП-ФП ПФЛТПЕФ УФТБОЙГХ У РПНПЭША ЬФПЗП УБНПЗП УФБТПЗП ВТБХЪЕТБ, ПО РПМХЮЙФ ФПМШЛП ЮЙУФЩК HTML -ЛПД, Б ЧУЕ УЛТЙРФЩ ВХДХФ РТПЙЗОПТЙТПЧБОЩ. еУМЙ ЪОБЛЙ ЛПННЕОФБТЙС ПФУХФУФЧХАФ, Б ЧОХФТЙ УЛТЙРФБ ОБИПДЙФУС ЮФП-ФП ФБЛПЕ, ЮЕЗП ВТБХЪЕТ ОЕ РПОЙНБЕФ, РПУЕФЙФЕМШ РПМХЮЙФ УППВЭЕОЙЕ ПВ ПЫЙВЛЕ ЙМЙ ЧППВЭЕ ОЕ ХЧЙДЙФ ОЙЮЕЗП. пОП ОБН У ЧБНЙ ОБДП?

фЕРЕТШ П ФПН, ЗДЕ УФПЙФ РПНЕЭБФШ УЛТЙРФЩ. ч РТЙОГЙРЕ, ПОЙ НПЗХФ ОБИПДЙФШУС ЗДЕ ХЗПДОП, ОП МХЮЫЕ РПНЕЭБФШ JavaScript -ЛПД Ч ЛПОФЕКОЕТЕ HEAD . еУМЙ ТБЪНЕУФЙФШ ЛПД Ч ТБЪДЕМЕ ... , ПО ПВСЪБФЕМШОП ЙУРПМОЙФУС Ч ФПФ НПНЕОФ, ЛПЗДБ ВТБХЪЕТ ДПКДЈФ ДП ОЕЗП РП НЕТЕ ЪБЗТХЪЛЙ УФТБОЙГЩ. ч ОЕЛПФПТЩИ УМХЮБСИ ЬФП ФПЦЕ ОЕПВИПДЙНП, ОП ИПТПЫЙН ФПОПН СЧМСЕФУС ПЖПТНМЕОЙЕ УЛТЙРФПЧ Ч ЧЙДЕ жхолгйк, ЛПФПТЩЕ НПЦОП РТЙ ОЕПВИПДЙНПУФЙ ЧЩЪЧБФШ ЙЪ МАВПЗП НЕУФБ УФТБОЙГЩ Й ЛПФПТЩЕ ОЕ ВХДХФ ЧЩРПМОСФШУС ДП ФЕИ РПТ, РПЛБ НЩ У ЧБНЙ ЬФПЗП ОЕ ЪБИПФЙН.

Roll-over фЕИОЙЮЕУЛПЕ ЪБДБОЙЕ

рПУФБОПЧЛБ ЪБДБЮЙ ОПНЕТ ПДЙО.

оБ УФТБОЙГЕ ЕУФШ ЛОПРЛБ, ЧЩРПМОЕООБС Ч ЧЙДЕ ЙЪПВТБЦЕОЙС Ч ЖПТНБФЕ GIF . оХЦОП, ЮФПВЩ ПОБ ЛБЛЙН-ФП ПВТБЪПН НЕОСМБУШ РТЙ ОБЧЕДЕОЙЙ ОБ ОЕЈ ЛХТУПТБ.

ьФПФ ЬЖЖЕЛФ РП-БОЗМЙКУЛЙ ОБЪЩЧБЕФУС roll-over Й Ч ТЕКФЙОЗЕ РПРХМСТОПУФЙ ЬЖЖЕЛФПЧ ЪБОЙНБЕФ, ОБЧЕТОПЕ, РЕТЧПЕ НЕУФП. йФБЛ, РТЙУФХРЙН.

тЕБМЙЪБГЙС

рТЕЦДЕ ЧУЕЗП ОБН РПОБДПВСФУС дче ЛОПРЛЙ: ЙУИПДОЩК ЧБТЙБОФ РМАУ ФПФ, ЛПФПТЩК ДПМЦЕО РПДУФБЧМСФШУС ЧНЕУФП ОЕЗП РТЙ ДЧЙЦЕОЙЙ ЛХТУПТБ НЩЫЙ РПЧЕТИ ЛОПРЛЙ. пВЕ ЛБТФЙОЛЙ ДПМЦОЩ ЙНЕФШ ПДЙО Й ФПФ ЦЕ ТБЪНЕТ. уНЩУМ ЧУЕИ ДБМШОЕКЫЙИ НБОЙРХМСГЙК УПУФПЙФ Ч ФПН, ЮФПВЩ ЪБНЕОЙФШ ПДОП ЙЪПВТБЦЕОЙЕ ДТХЗЙН, Б РПФПН ЧЕТОХФШ ЙУИПДОПЕ ОБ НЕУФП.

чУФБЧМСЕН РЕТЧХА ЛОПРЛХ Ч HTML . лПД ВХДЕФ ЧЩЗМСДЕФШ РТЙНЕТОП ФБЛ:

фЕЗ IMG ЙУРПМШЪХЕФУС ДМС ТБЪНЕЭЕОЙС ЗТБЖЙЛЙ ОБ HTML -УФТБОЙГЕ. рБТБНЕФТЩ name , src , width Й height ЪБДБАФ УППФЧЕФУФЧЕООП ЙНС ЧУФТПЕООПЗП Ч HTML ПВЯЕЛФБ ДМС ДБМШОЕКЫЙИ УУЩМПЛ ОБ ОЕЗП, ЙНС ЗТБЖЙЮЕУЛПЗП ЖБКМБ, ЫЙТЙОХ Й ЧЩУПФХ ЛБТФЙОЛЙ Ч РЙЛУЕМСИ.

фЕРЕТШ ТБЪНЕУФЙН Ч ТБЪДЕМЕ HEAD УМЕДХАЭЙК ВМПЛ:

фЕРЕТШ ДПВБЧЙН ЕЭЈ ДЧБ РБТБНЕФТБ Ч ФЕЗ IMG :

Onmouseover="ImgOn();" onmouseout="ImgOff();"

оБРПНОА, ЮФП СЪЩЛ JavaScript ЮХЧУФЧЙФЕМЕО Л ТЕЗЙУФТХ, РПЬФПНХ, ЕУМЙ ЧЩ Ч ПДОПН НЕУФЕ ОБРЙЫЕФЕ imgon , Б Ч ДТХЗПН ImgOn , ЬФЙ ПРЙУБОЙС ОЕ ВХДХФ ЙНЕФШ ДТХЗ Л ДТХЗХ ОЙЛБЛПЗП ПФОПЫЕОЙС.

пУФБМПУШ УДЕМБФШ РПУМЕДОЕЕ: ДПВБЧЙФШ ПДЙО РБТБНЕФТ Ч ФЕЗ BODY :

Onload="ImgPreload();"

у ЛПДПН РПЛПОЮЕОП. с ОБНЕТЕООП ОЕ ДБА ДЕФБМШОЩИ ЙОУФТХЛГЙК: ТБЪХНЕЕФУС, ЙЪ УППВТБЦЕОЙК МЈЗЛПЗП УБДЙЪНБ. оП П ФПН, ЛБЛ ЬФП ЧУЈ ТБВПФБЕФ, ТБУУЛБЦХ РПДТПВОП.

пВЯСУОЕОЙС

ч ЪБЗПМПЧЛЕ УФТБОЙГЩ — Б ЙНЕООП Ч УЕЛГЙЙ HEAD — НЩ УПЪДБМЙ УЛТЙРФ, ЧЛМАЮБАЭЙК Ч УЕВС ФТЙ ЖХОЛГЙЙ: ImgPreload , ImgOn Й ImgOff . лМАЮЕЧПЕ УМПЧП function Ч ВПМШЫЙОУФЧЕ СЪЩЛПЧ ПРТЕДЕМСЕФ ЛХУПЛ ЛПДБ, ЛПФПТЩК НПЦЕФ ВЩФШ НОПЗПЛТБФОП ЧЩЪЧБО ЙЪ ТБЪМЙЮОЩИ НЕУФ РТПЗТБННЩ. пВЭЙК УМХЮБК УЙОФБЛУЙУБ ЧЩЗМСДЙФ ФБЛ:

Function func_name(par1,par2,par3) { ... }

тБУЫЙЖТПЧЩЧБЕФУС ЧУЈ ЬФП УМЕДХАЭЙН ПВТБЪПН: ЖХОЛГЙС У ЙНЕОЕН func_name , Ч ЛПФПТХА РЕТЕДБАФУС РБТБНЕФТЩ У ЙНЕОБНЙ par1 , par2 Й par3 , ЛПФПТЩИ, ЧППВЭЕ ЗПЧПТС, НПЦЕФ Й ОЕ ВЩФШ. жЙЗХТОЩЕ УЛПВЛЙ ПВТБНМСАФ ФХ ЮБУФШ, ЛПФПТБС, УПВУФЧЕООП, Й ВХДЕФ ЧЩРПМОСФШУС, ЕУМЙ НЩ ЬФХ ЖХОЛГЙА ЧЩЪПЧЕН, Ф. Е. УПЫМЈНУС ОБ ОЕЈ РП ЙНЕОЙ ЙЪ ЛБЛПК-ФП ДТХЗПК ЮБУФЙ ЛПДБ.

ъБЮЕН ОХЦОЩ РБТБНЕФТЩ, ФЕН ВПМЕЕ, ЮФП Ч ФЕИ ФТЈИ ЖХОЛГЙСИ, ЛПФПТЩЕ НЩ ЙУРПМШЪХЕН Ч ОБЫЕК ЪБДБЮЕ, ЙИ ОЕФ? б ЧПФ ЪБЮЕН. рТЕДУФБЧШФЕ УЕВЕ, ЮФП ОБ УФТБОЙЮЛЕ ЕУФШ оеулпмшлп ЛОПРПЛ, ДМС ЛБЦДПК ЙЪ ЛПФПТЩИ НЩ ИПФЙН УДЕМБФШ УЧПК УПВУФЧЕООЩК roll-over . юФП ЦЕ, РЙУБФШ ПФДЕМШОХА ЖХОЛГЙА ОБ ЛБЦДХА ЛОПРЛХ? б ЕУМЙ ЙИ ДЕУСФПЛ? зМХРПУФЙ ЛБЛЙЕ.

нЩ ОБРЙЫЕН едйоуфчеооха ЖХОЛГЙА ДМС ЛБЦДПК ПРЕТБГЙЙ, Й У РПНПЭША РБТБНЕФТПЧ РЕТЕДБДЙН ЕК йнс ФПК ЛБТФЙОЛЙ, ОБД ЛПФПТПК Ч ДБООЩК НПНЕОФ РТПИПДЙФ ЛХТУПТ НЩЫЙ Й ЛПФПТБС, УППФЧЕФУФЧЕООП, ДПМЦОБ ХЮБУФЧПЧБФШ Ч УПЪДБОЙЙ ОХЦОПЗП ОБН ЬЖЖЕЛФБ. чПФ Й ЧУЈ.

чЕТОЈНУС Л ОБЫЕНХ ЛПДХ.

жХОЛГЙС ImgPreload УМХЦЙФ ДМС РТЕДЧБТЙФЕМШОПК ЪБЗТХЪЛЙ Ч РБНСФШ ЛПНРШАФЕТБ ФПЗП ЙЪПВТБЦЕОЙС, ЛПФПТПЕ ДПМЦОП ВЩФШ РПДУФБЧМЕОП ОБ НЕУФП ЙУИПДОПЗП. пОБ ЪБРХУЛБЕФУС ФПЗДБ, ЛПЗДБ ЧУС УФТБОЙГБ ЪБЗТХЪЙМБУШ: ЪБРЙУШ onload="ImgPreload();" Ч ФЕЗЕ BODY ПЪОБЮБЕФ, ЮФП РП УПВЩФЙА onload (ПЛПОЮБОЙА ЪБЗТХЪЛЙ ПФПВТБЦБЕНПК ЮБУФЙ УФТБОЙГЩ ВТБХЪЕТПН) ВХДЕФ ЧЩРПМОЕОБ ЖХОЛГЙС ImgPreload .

ъБЮЕН ОХЦОБ ЬФБ ЖХОЛГЙС? дЕМП Ч ФПН, ЮФП ЪБЗТХЪЛБ ЛБЦДПЗП ЙЪПВТБЦЕОЙС У УЕТЧЕТБ ФТЕВХЕФ ЧТЕНЕОЙ, ПУПВЕООП РТЙ ОЕ ПЮЕОШ ИПТПЫЕК УЧСЪЙ. еУМЙ НЩ ВХДЕН ФБЭЙФШ ЧФПТХА ЛБТФЙОЛХ У УЕТЧЕТБ, ФП ЛХТУПТ ХКДЈФ У ЛОПРЛЙ ТБОШЫЕ, ЮЕН НЩ ХЧЙДЙН ЛБЛПК-ФП ЬЖЖЕЛФ, Ф. Л. ЗТБЖЙЮЕУЛЙК ЖБКМ — ЛБЛЙН ВЩ НБМЕОШЛЙН ПО ОЕ ВЩМ — РТПУФП ОЕ ХУРЕЕФ ЪБЗТХЪЙФШУС. дТХЗПЕ ДЕМП, ЛПЗДБ ФТЕВХЕНБС ЛБТФЙОЛБ ХЦЕ ОБИПДЙФУС Ч РБНСФЙ: ЪБЗТХЪЛБ РТПЙЪПКДЈФ НЗОПЧЕООП.

фЕРЕТШ П УБНПК ЖХОЛГЙЙ. ъБРЙУШ pic2=new Image(); УПЪДБЈФ ОПЧЩК ПВЯЕЛФ ФЙРБ Image , ОБ ЛПФПТЩК У ЬФПЗП НПНЕОФБ НЩ НПЦЕН УУЩМБФШУС, Б УМЕДХАЭБС УФТПЮЛБ pic2.src=button1b.gif; ЗПЧПТЙФ П ФПН, ЛБЛПК ЗТБЖЙЮЕУЛЙК ЖБКМ УППФЧЕФУФЧХЕФ ЬФПНХ ПВЯЕЛФХ. фЕРЕТШ, ЪБРТПУЙЧ ЙЪ МАВПЗП НЕУФБ ЛПДБ ЪОБЮЕОЙЕ pic2.src , НЩ ФХФ ЦЕ РПМХЮЙН button1b.gif , ЮФП ОБН Й ФТЕВХЕФУС.

пВТБФЙФЕ ЧОЙНБОЙЕ ОБ ФП, ЛБЛЙЕ РБТБНЕФТЩ НЩ ДПВБЧЙМЙ Ч ФЕЗ IMG . ъБРЙУШ onmouseover="ImgOn();" ПЪОБЮБЕФ, ЮФП РП УПВЩФЙА onmouseover (ЛХТУПТ ЧЯЕИБМ ОБ ЛБТФЙОЛХ) ДПМЦОЩ ВЩФШ ЧЩЪЧБОБ ЖХОЛГЙС ImgOn , Б ЪБРЙУШ onmouseout="ImgOff;" ПЪОБЮБЕФ, ЮФП ЛХТУПТ ХЫЈМ У ЛОПРЛЙ, Й ФЕРЕТШ ОХЦОП ЪБРХУФЙФШ ЖХОЛГЙА ImgOff . лБЛ РПОСФОП ЙЪ ОБЪЧБОЙС, ЬФЙ ДЧЕ ЖХОЛГЙЙ ПФЧЕЮБАФ ЪБ РПДНЕОХ ЛБТФЙОЛЙ (ImgOn ) Й ЧПЪЧТБФ ЕЈ Ч ЙУИПДОПЕ УПУФПСОЙЕ (ImgOff ). фЕРЕТШ РПУНПФТЙН, ЛБЛ ЬФЙ ЖХОЛГЙЙ ТБВПФБАФ.

ч ЖХОЛГЙЙ ImgOn РЕТЧБС УФТПЛБ (temp=mybutton.src; ) РЕТЕДБЈФ РЕТЕНЕООПК temp ЙНС ФПЗП ЗТБЖЙЮЕУЛПЗП ЖБКМБ, ЛПФПТЩК УППФЧЕФУФЧХЕФ ЙУИПДОПНХ УПУФПСОЙА ЛОПРЛЙ: ЬФП ЪОБЮЕОЙЕ ОХЦОП УПИТБОЙФШ. чФПТБС УФТПЛБ (mybutton.src=pic2.src; ) РЕТЕДБЈФ ЛОПРЛЕ ЙНС ЧФПТПЗП ЖБКМБ, ЛПФПТЩК НЩ РПДУФБЧМСЕН. лБЛ ФПМШЛП ЬФП РТПЙЪПЫМП, ЧНЕУФП РЕТЧПОБЮБМШОПК ЛБТФЙОЛЙ ОБ НЕУФЕ ЛОПРЛЙ ЧПЪОЙЛБЕФ ЛБТФЙОЛБ button1b.gif , Й ОБЫБ ЪБДБЮБ ОБРПМПЧЙОХ ТЕЫЕОБ. оБРПМПЧЙОХ, РПФПНХ ЮФП ОБН ЕЭЈ РТЕДУФПЙФ ЧЕТОХФШ ЛОПРЛХ Ч ЙУИПДОПЕ УПУФПСОЙЕ РПУМЕ ФПЗП, ЛБЛ ЛХТУПТ НЩЫЙ ХВЕТЈФУС ЧПУЧПСУЙ.

ьФЙН Й ЪБОЙНБЕФУС ЖХОЛГЙС ImgOff . еЈ ЕДЙОУФЧЕООБС УФТПЮЛБ (mybutton.src=temp; ) ЧПЪЧТБЭБЕФ ЛОПРЛЕ ФПФ ЖБКМ, ЛПФПТЩК УППФЧЕФУФЧПЧБМ ЕК Ч УБНПН ОБЮБМЕ. чУЈ!

дМС РТЙНЕТБ РПУНПФТЙФЕ, ЛБЛ ПТЗБОЙЪПЧБОЩ roll-overs ОБ ЗМБЧОПК (ЙМЙ МАВПК ДТХЗПК) УФТБОЙГЕ НПЕЗП УБКФБ. ьФП ФБЛЙЕ НБМЕОШЛЙЕ УЙОЙЕ ФПЮЛЙ, ЧПЪОЙЛБАЭЙЕ ЧОХФТЙ НБМЕОШЛЙИ ВЕМЩИ ЛТХЦПЮЛПЧ, ЛПЗДБ ЧЩ ЧПЪЙФЕ НЩЫЛПК РП РХОЛФБН НЕОА. рТБЧДБ, ФБН ЧУЈ УДЕМБОП ЮХФШ-ЮХФШ ЙОБЮЕ. ;-)

OpenWin

тБУУНПФТЙН ЪБДБЮХ ОПНЕТ ДЧБ.

фЕИОЙЮЕУЛПЕ ЪБДБОЙЕ

йФБЛ, ОБН ОХЦОП, ЮФПВЩ

РТЙ ЭЕМЮЛЕ НЩЫША ОБ УУЩМЛЕ ПФЛТЩЧБМПУШ ДПРПМОЙФЕМШОПЕ ПЛОП ВТБХЪЕТБ, УЧПКУФЧБ ЛПФПТПЗП НПЦОП ВЩМП ВЩ ПРТЕДЕМЙФШ ЪБТБОЕЕ. оЕРМПИП, ЕУМЙ ЬФП ПЛОП НПЦОП ВХДЕФ ЪБЛТЩФШ ЭЕМЮЛПН РП ТБУРПМПЦЕООПК Ч ОЈН ЦЕ УУЩМЛЕ.

пЗПЧПТЛБ

ьФХ ЪБДБЮЛХ НПЦОП ТЕЫЙФШ Й УТЕДУФЧБНЙ УБНПЗП HTML , РТБЧДБ, ЪБДБФШ учпкуфчб ОПЧПЗП ПЛОБ ЧУЈ-ФБЛЙ ОЕ ХДБУФУС, ДБ Й ЪБЛТЩФШ ЕЗП ПРЙУБООЩН ЧЩЫЕ УРПУПВПН ВХДЕФ ОЕМШЪС. чУРПНОЙН УОБЮБМБ, ЮФП ФБЛПЕ УУЩМЛБ.

ЧПФ ФХФ Х ОБУ У ЧБНЙ УУЩМЛБ.

чФПТПК ЧБТЙБОФ:

оЕ ФБЛБС ХЦ ВПМШЫБС ТБЪОЙГБ, ЛБЛБС ЮБУФШ ЛПОФЕОФБ ЧЩРПМОЕОБ Ч ЧЙДЕ УУЩМЛЙ: ФЕЗ РТЙУХФУФЧХЕФ Ч МАВПН УМХЮБЕ, Б ПО-ФП ОБН Й ОХЦЕО.

фБЛ ЧПФ, ЪБДБЮХ НПЦОП ТЕЫЙФШ ДПВБЧМЕОЙЕН РБТБНЕФТБ target Ч ФЕЗ (target="zzz" ). чНЕУФП zzz НПЦОП РПДУФБЧМСФШ ПДОП ЙЪ ФТЈИ ЪБТЕЪЕТЧЙТПЧБОЩИ ЪОБЮЕОЙК:

Self _top _blank

ъОБЮЕОЙЕ _self ЙУРПМШЪХЕФУС Ч ФПН УМХЮБЕ, ЕУМЙ ОПЧЩК ДПЛХНЕОФ ДПМЦЕО ВЩФШ ПФЛТЩФ Ч ФПН ЦЕ ПЛОЕ (ЖТЕКНЕ), ЮФП Й ЙУИПДОЩК; ЪОБЮЕОЙЕ _top ЗПЧПТЙФ П ФПН, ЮФП ОПЧЩК ДПЛХНЕОФ ВХДЕФ ПФЛТЩФ Ч ФЕЛХЭЕН ПЛОЕ ВТБХЪЕТБ, ЧЩФЕУОЙЧ ЙЪ ОЕЗП ЧУЕ ЖТЕКНЩ, ЕУМЙ ФБЛЙЕ ОБМЙЮЕУФЧХАФ, Б ЪОБЮЕОЙЕ _blank ЛБЛ ТБЪ ПРТЕДЕМСЕФ, ЮФП ОПЧЩК ДПЛХНЕОФ ВХДЕФ ПФЛТЩФ Ч ОПЧПН ПЛОЕ, ЛПФПТПЕ ПФЛТПЕФУС УРЕГЙБМШОП ДМС ЬФПК ГЕМЙ. оП — ЛБЛ С ХЦЕ ЗПЧПТЙМ — ХРТБЧМСФШ РБТБНЕФТБНЙ ЬФПЗП ПЛОБ НЩ ОЕ УНПЦЕН.

лУФБФЙ, УРЙУПЛ ЪБТЕЪЕТЧЙТПЧБООЩИ ЪОБЮЕОЙК ОЕ ЙУЮЕТРЩЧБЕФУС ФТЕНС ПРЙУБООЩНЙ ЪДЕУШ РТЙНЕТБНЙ, ОП ЪБ ЬФЙН — Л ФЕТБРЕЧФХ… Ф. Е. Л РПМОПНХ ТХЛПЧПДУФЧХ.

ъДЕУШ ОХЦОП ДПВБЧЙФШ, ЮФП, ЧП-РЕТЧЩИ, ЛТПНЕ ЪБТЕЪЕТЧЙТПЧБООЩИ РБТБНЕФТПЧ Ч ЛБЮЕУФЧЕ target НПЦЕФ ВЩФШ РПДУФБЧМЕОП ЙНС ХЦЕ УХЭЕУФЧХАЭЕЗП ПЛОБ, Б ЕУМЙ ФБЛПЗП ОЕФ — ВТБХЪЕТ Ч ВПМШЫЙОУФЧЕ УМХЮБЕЧ РПУФБТБЕФУС ПФЛТЩФШ ОПЧПЕ ПЛОП Й ЪБЗТХЪЙФШ ДПЛХНЕОФ ФХДБ. чП-ЧФПТЩИ, С ХРПНЙОБМ ЖТЕКНЩ, П ЛПФПТЩИ ОБН У ЧБНЙ РПЛБ ЮФП ОЙЮЕЗП ОЕ ЙЪЧЕУФОП. оБ ДБООЩК НПНЕОФ ПВПКДЈНУС ФЕН, ЮФП ЖТЕКНЩ — ЬФП ПЛОБ ОЕЪБЧЙУЙНЩИ ДПЛХНЕОФПЧ, ЛПФПТЩЕ Ч МАВПН ЛПМЙЮЕУФЧЕ НПЗХФ ОБИПДЙФШУС Ч ПВЭЕН ДМС ЧУЕИ ОЙИ ПЛОЕ ВТБХЪЕТБ. рПДТПВОЕЕ ПВ ЬФПН НЩ РПЗПЧПТЙН ОЕУЛПМШЛП РПЪЦЕ. ч ФТЕФШЙИ, ЙУРПМШЪПЧБОЙЕ УУЩМПЛ ДМС ПФЛТЩФЙС ОПЧПЗП ПЛОБ ЧЩЪЧБОП ФПМШЛП ФЕН, ЮФП Netscape ОЕ Ч УПУФПСОЙЙ РПОСФШ УПВЩФЙЕ onclick (ЭЕМЮПЛ НЩЫША), ЕУМЙ ПОП РТПЙУИПДЙФ ОЕ УП УУЩМЛПК. Internet Explorer ДЕМБЕФ ЬФП У МЈЗЛПУФША, ОП ОБН ПФ ЬФПЗП ОЕ МЕЗЮЕ: УЛТЙРФЩ ДПМЦОЩ ТБВПФБФШ Ч МАВПН ВТБХЪЕТЕ.

тЕБМЙЪБГЙС

рПДЗПФПЧЙН ЖБКМ newfile.htm , УПДЕТЦБЭЙК УМЕДХАЭЙК ЛПД:

ЮФПВЩ ЪБЛТЩФШ ПЛОП, ЭЈМЛОЙФЕ ЪДЕУШ.

пВТБФЙФЕ ЧОЙНБОЙЕ, ЮФП УФТПЛБ У ФЕЗПН

ТБЪПТЧБОБ: ОЙЮЕЗП УФТБЫОПЗП, HTML ФБЛЙЕ ЧЕЭЙ РЕТЕОПУЙФ УРПЛПКОП. уФТБООПЕ ЪОБЮЕОЙЕ РБТБНЕФТБ href — "#" — ОЕТЕДЛП ЙУРПМШЪХЕФУС ФПЗДБ, ЛПЗДБ УУЩМЛБ ЛБЛ ФБЛПЧБС ОХЦОБ, Б РЕТЕИПД РП ОЕК, ДБЦЕ РТЙ УМХЮБКОПН ЭЕМЮЛЕ, ОЕ ОХЦЕО.

дБМЕЕ. ч ФПН ЖБКМЕ, ЙЪ ЛПФПТПЗП ЧЩ ИПФЙФЕ ПФЛТЩФШ ОПЧПЕ ПЛОП, ОХЦОП УДЕМБФШ ДЧЕ ЧУФБЧЛЙ. рЕТЧБС — Ч УЕЛГЙЙ HEAD .

чФПТБС — ЗДЕ-ОЙВХДШ Ч ФЕМЕ УФТБОЙГЩ:

ЮФПВЩ ПФЛТЩФШ ОПЧПЕ ПЛОП, ЭЈМЛОЙФЕ ЪДЕУШ.

фЕРЕТШ РПУНПФТЙН, ЮФП Х ОБУ У ЧБНЙ РПМХЮЙМПУШ. лТПНЕ ФПЗП, НПЦОП ЭЈМЛОХФШ .

лУФБФЙ, ЙНЕКФЕ Ч ЧЙДХ: ЪБЛТЩФШ ПЛОП ФБЛЙН ПВТБЪПН ЧЩ УНПЦЕФЕ ФПМШЛП Ч ФПН УМХЮБЕ, ЕУМЙ ПОП ВЩМП ПФЛТЩФП РТЙ РПНПЭЙ JavaScript .

п ФПН, ЛБЛЙЕ ЕЭЈ РБТБНЕФТЩ НПЦОП ЪБРЙИБФШ ЧП ЧУФТПЕООХА ЖХОЛГЙА window.open , ЧЩ РТПЮЙФБЕФЕ Ч ТХЛПЧПДУФЧЕ РП JavaScript ПФ W3C . ;-)

пВЯСУОЕОЙС

жХОЛГЙС OpenWin УПДЕТЦЙФ УФБОДБТФОЩК НЕФПД JavaScript window.open , ЙУРПМШЪХАЭЙКУС ДМС ПФЛТЩФЙС ОПЧПЗП ПЛОБ. ч ЛБЮЕУФЧЕ РБТБНЕФТПЧ НЩ РЕТЕДБЈН ЬФПНХ НЕФПДХ (ЙМЙ ЖХОЛГЙЙ, ЮФП РПЮФЙ ФП ЦЕ УБНПЕ):

1. "newfile.htm" — ЙНС ДПЛХНЕОФБ, ЛПФПТЩК ДПМЦЕО ПФЛТЩФШУС Ч ОПЧПН ПЛОЕ.

2. "mywindow" — ЙНС ЬФПЗП ПЛОБ ДМС ДБМШОЕКЫЙИ УУЩМПЛ ОБ ОЕЗП. хЛБЪЩЧБФШ ОЕ ПВСЪБФЕМШОП, ОП РБТХ РХУФЩИ ЛБЧЩЮЕЛ ("" ) ЧУЈ ТБЧОП РТЙДЈФУС РПУФБЧЙФШ, Ф. Л. УФБОДБТФОЩК УЙОФБЛУЙУ РТЕДРПМБЗБЕФ УФТПЗП ПРТЕДЕМЈООХА РПУМЕДПЧБФЕМШОПУФШ РБТБНЕФТПЧ.

3. "width=300,height=250,toolbar=no" — ОБВПТ УФБОДБТФОЩИ РБТБНЕФТПЧ УП ЪОБЮЕОЙСНЙ. ч ДБООПН УМХЮБЕ — МЙОЕКОЩЕ ТБЪНЕТЩ ПЛОБ Й ЙОЖПТНБГЙА П ФПН, ЮФП ПОП ОЕ ДПМЦОП ЙНЕФШ РБОЕМЙ ЙОУФТХНЕОФПЧ. ъБНЕФШФЕ, ЮФП ЪОБЮЕОЙС РБТБНЕФТПЧ С РЙЫХ ВЕЪ ЛБЧЩЮЕЛ.

уМЕДХАЭБС ЮБУФШ ЛПДБ (ЪДЕУШ ) РТЕДРЙУЩЧБЕФ ВТБХЪЕТХ ЙУРПМОЙФШ ЖХОЛГЙА (НЕФПД) OpenWin РТЙ ЭЕМЮЛЕ ОБ УМПЧЕ ЪДЕУШ , ПЖПТНМЕООПН ЛБЛ РХУФБС УУЩМЛБ (href="#" ).

фПЮОП ФБЛХА ЦЕ ЖПТНХ ЪБРЙУЙ ЙУРПМШЪХЕФ УЛТЙРФ, ТБЪНЕЭЈООЩК Ч ДПЛХНЕОФЕ, ЛПФПТЩК ПФЛТЩЧБЕФУС Ч ОПЧПН ПЛОЕ. уФБОДБТФОЩК НЕФПД window.close ЪБЛТЩЧБЕФ ФЕЛХЭЕЕ ПЛОП, ЕУМЙ ПОП ВЩМП ПФЛТЩФП У РПНПЭША JavaScript . еУМЙ НЩ ИПФЕМЙ ВЩ ЪБЛТЩФШ ДТХЗПЕ ПЛОП, РТЙЫМПУШ ВЩ ОБРЙУБФШ mywin.close() , ЗДЕ mywin -- ЙНС ПЛОБ, ЛПФПТПЕ УЛТЙРФХ РТЕДУФПЙФ ЪБЛТЩФШ.

чЩОПУ УЛТЙРФПЧ Ч ПФДЕМШОЩК ЖБКМ

еУФШ ЕЭЈ ПДЙО ЧБТЙБОФ ЪБРЙУЙ ЛПОФЕКОЕТБ SCRIPT .

ьФП ПЪОБЮБЕФ, ЮФП ЧУЕ ЧБЫЙ УЛТЙРФЩ НПЗХФ ИТБОЙФШУС Ч ПФДЕМШОПН ЖБКМЕ У ТБУЫЙТЕОЙЕН . js . еУФЕУФЧЕООП, Ч ЬФПН УМХЮБЕ ОЕ ОХЦОП РЙУБФШ ЛМАЮЕЧПЕ УМПЧП SCRIPT Ч УБНПН ЖБКМЕ: РТПУФП РПНЕУФЙФЕ РТЙЧЕДЈООХА ЧЩЫЕ УФТПЛХ Ч ТБЪДЕМЕ HEAD , Й МАВБС ЖХОЛГЙС ВХДЕФ ДПУФХРОБ ФПЮОП ФБЛ ЦЕ, ЛБЛ ЕУМЙ ВЩ ЕЈ ФЕЛУФ ОБИПДЙМУС РТСНП ОБ УФТБОЙГЕ. ьФП ХДПВОП ЕЭЈ Й РПФПНХ, ЮФП РТЙ ЧПЪНПЦОПН ЙЪНЕОЕОЙЙ УЛТЙРФБ ЧБН ОЕ РТЙДЈФУС ЙЪНЕОСФШ ЧУЕ HTML -ЖБКМЩ, ЛПФПТЩЕ ОБ ОЕЗП УУЩМБАФУС.

ъБЛМАЮЕОЙЕ

рПОСФОП, ЮФП РПЛБ ЕЭЈ ОЙЮЕЗП ОЕ РПОСФОП. уПВУФЧЕООП, С ОЕ ДБЧБМ ПВЕФ ХЮЙФШ ЧБУ СЪЩЛХ Ч РПМОПН ПВЯЈНЕ: ДМС ЬФПЗП ЕУФШ НБУУБ ХНОЩИ Й РПМЕЪОЩИ ЛОЙЗ. рТПВМЕНБ Ч ФПН, ЮФП ПЮЕОШ ЮБУФП Х МАДЕК, РТПЮЙФБЧЫЙИ ФБЛЙЕ ЛОЙЗЙ, ЧПЪОЙЛБЕФ НБУУБ ЧПРТПУПЧ ЙНЕООП ЧП ЧТЕНС РЕТЧПК РПРЩФЛЙ ТЕБМЙЪПЧБФШ УЧПЙ ОПЧЩЕ ЪОБОЙС ОБ РТБЛФЙЛЕ. й ЧПФ ФХФ, С ОБДЕАУШ, НПЈ НБМЕОШЛПЕ ТХЛПЧПДУФЧП ПЛБЦЕФУС РПМЕЪОЩН.

с ТБУУНПФТЕМ ЧБТЙБОФЩ ТЕЫЕОЙС ДЧХИ ЪБДБЮ, ЛПФПТЩЕ ЮБЭЕ ЧУЕЗП ЧУФТЕЮБАФУС РТЙ РПУФТПЕОЙЙ ЧЕВ-УФТБОЙГ. лПОЕЮОП ЦЕ, ЧБН ОХЦОП ЪОБФШ ВПМШЫЕ П JavaScript : ЧПЪНПЦОП, ЙНЕООП ХЗМХВМЕОЙЕН ЪОБОЙК НЩ Й ЪБКНЈНУС ОБ УМЕДХАЭЕН ХТПЛЕ. б УЕКЮБУ — ОБРПУМЕДПЛ — ОЕУЛПМШЛП РТБЧЙМ, ЛПФПТЩЕ ОЕПВИПДЙНП РПНОЙФШ ЧП ЧТЕНС РТПЗТБННЙТПЧБОЙС ОБ СЪЩЛЕ JavaScript .

1. сЪЩЛ JavaScript ЮХЧУФЧЙФЕМЕО Л ТЕЗЙУФТХ.

лБЛ ХЦЕ ЗПЧПТЙМПУШ ТБОШЫЕ, РЕТЕНЕООЩЕ temp Й Temp ДМС СЪЩЛБ JavaScript ОЕ ПДОП Й ФП ЦЕ: Х ОЙИ ВХДХФ ТБЪОЩЕ ЪОБЮЕОЙС, РПЬФПНХ ВХДШФЕ ЧОЙНБФЕМШОЩ РТЙ ОБРЙУБОЙЙ ЛПДБ.

2. лБЦДЩК ПРЕТБФПТ ДПМЦЕО ПЛБОЮЙЧБФШУС ФПЮЛПК У ЪБРСФПК.

фЕПТЕФЙЮЕУЛЙ РПУМЕДОЙК ПРЕТБФПТ ВМПЛБ {...} НПЦОП РЙУБФШ Й ВЕЪ ФПЮЛЙ У ЪБРСФПК, ОП МХЮЫЕ ЕЈ ЧУЈ-ФБЛЙ УФБЧЙФШ… ЛТПНЕ УРЕГЙБМШОП ПЗПЧПТЈООЩИ УМХЮБЕЧ, ЛПФПТЩЕ НЩ ТБУУНПФТЙН РПРПЪЦЕ.

3. оЕ ЪБВЩЧБКФЕ ПВТБНМСФШ УЛТЙРФЩ УЙНЧПМБНЙ ЛПННЕОФБТЙС.

В современном веб-дизайне Javascript является просто неотъемлемым компонентом. Помимо его функциональности, Javascript может значительно улучшить общее впечатление пользователя, создавая различные переходные эффекты, такие как плавные переходы и слайд-анимация. Благодаря открытой архитектуре Javascript, нам больше не придется писать отдельные скрипты с нуля. Вот 47 плагинов Javascript, которые вы можете использовать для улучшения взаимодействия пользователей с сайтом и его функциональности. Не забудьте просмотреть примеры сайтов, которые покажут вам, как можно использовать эти плагины.

Две наиболее популярные среды Javascript

На сегодняшний день две наиболее используемые среды Javascript следующие:jQuery и MooTools. Посмотрите на опрос снизу:

Всплывающие изображения и зум

Lightbox

Вы наверняка знакомы с Lightbox - простой Javascript, используемы для наложения изображений на текущую страницу. Оригинальный Lightbox был выпущен в 2005. С тех пор было выпущено множество скриптов со схожими функциями, но использующие другие подходы и библиотеки Javascript.

Этот плагин аналогичен Lightbox JS, только написан на библиотеке jQuery.

Thickbox это плагин jQuery, который очень похож на Lightbox, разве что имеет больше функций. Он позволяет отображать: как одно, так и сразу несколько изображений, встроенное содержимое, содержимое в плавающем фрейме или же содержимое, переданное через AJAX в гибридной модели.

Обратите внимание: Web Designer Wall использует Thickbox для отображения своих галерей изображений и демонстрационных уроков.

Highslide JS служит той же цели, что и Thickbox, но еще имеет и эффект зума, что позволяет перетаскивать наложенное изображение.

FancyBox это плагин jQuery, который был разработан для того, чтобы заменить чрезмерно используемый Lightbox. У него схожие функции, но более красивые переходные эффекты (дизайн на манер Mac).

jQZoom позволяет отображать увеличенные изображения пиктограмм. Эта техника повсеместно используется на сайтах электронной коммерции (посмотрите для примера сайт Gap).

Галлереи и показ слайдов

Slideshow 2! Это класс javascript для Mootools 1.2, предназначенный для анимирования презентации изображений на вашем сайте.

Используя mootools v1.11, эта система слайдшоу и javascript-галлерей позволяет вам создавать простые и сглаженные (техника плавного перехода) галереи картинок, слайдшоу, афиши и много других классных примочек на ваш сайт.

Galleria это галерея картинок javascript написанная в jQuery. Она подгружает изображения одно за другим из несортированного списка и отображает пиктограммы, когда загружается каждое изображение. Она может создавать различные пиктограммы, если вы выберите, масштабированные или немасштабированные, центрированные или обрезанные по размеру поля для пиктограмм, определенного в CSS.

NoobSlide это класс MooTools, который позволяет вам создавать слайдшоу и скользящие панели синхронизированные по таймеру. Посмотрите этот сайт для демонстрации.

Вот демонстрация виджета слайдера из UI библиотеки jQuery, используемого для создания слайдера с товарами, такого как на сайте Apple - Mac .

Carousel

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

Компонент перелистывания управляет списком содержимого (элементы HTML LI внутри тега UL), которое можно отображать вертикально или горизонтально. Содержимое можно прокручивать вверх и вниз с или без использования анимации. Содержимое может относиться к статичному HTML содержимому или список предметов может быть создан динамически "на ходу" (с или без использования AJAX).

Carousel Slideshow это широко известный скрипт DHTML для показа изображений на вашем сайте. Он отображает изображения в 3D, на манеру карусели.

iCarousel это бесплатный инструмент javascript с открытым исходным кодом для создания виджетов на манер карусели. Вы также можете использовать iCarousel в качестве бегущей новостной строки/скроллера или в качестве галереи изображений.

Панельный слайдер

Coda Slider это плагин jQuery, который имитирует эффект слайда панелей, как на сайте Coda .

Sliding Tabs это плагин mootools 1.11 с очень приятными эффектами. Это клон чего-то, что используется на сайте Panic Software"s Coda, что в свою очередь очень похоже на виджет, используемый на сайте iTunes Music Store.

Вкладки

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

Еще один отличный урок с сайта jQueryForDesigners.com покажет вам как создавать основную навигацию по вкладкам при помощи jQuery.

MooTabs это крошечный (3кб) класс для MooTools. Как следует из названия, его основная задача это помогать вам в создании простых вкладок навигации.

Очень гибкий плагин jQuery, позволяющий вам создавать анимацию при прокрутке в любую позицию веб-страницы с настраиваемыми опциями стирания и скорости прокрутки.

Простой скрипт MooTools, который может создавать плавную прокрутку до якоря на веб-странице.

Настраиваемый плагин jQuery, который отображает всплывающие строки-подсказки - или со статичным HTML или с содержимым AJAX.

Еще один неплохой плагин строки-подсказки.

Очень простой скрипт jQuery, который отображает строку-подсказку и предварительный просмотр изображения (Я использую его на Best Web Gallery).

Меню-гармошка

Этот плагин создает меню гармошку. Он работает с вложенными списками, списками определений или просто с вложенными дивками.

Плагин Accordion может отлично выделит и покажет тот контент, который вам необходим.

Image Menu это плагин MooTools который может создать горизонтальное меню-гармошку с изображениями.

Замена текста Flash и изображением

sIFR может замещать короткие отрывки простого браузерного текста текстом визуализированным выбранным вами шрифтом, независимо от того установлен ли он на системах ваших пользователей. Он выполняет свою задачу, используя комбинацию javascript, CSS, и Flash.

Плагин jQuery, который выполнит для вас функции sIFR.

Facelift Image Replacement это скрипт замены изображений, который динамически генерирует представление текста в изображении на вашей веб-странице в тех шрифтах, которые другим способом могут быть недоступны вашим посетителям. Сгенерированное изображение автоматически вставляется в вашу веб-страницу посредством Javascript и видимо всеми современными браузерами