Основы JavaScript. Видео урок: Изучение JavaScript Галлереи и показ слайдов

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

ъДЕУШ ОХЦОП ДПВБЧЙФШ, ЮФП, ЧП-РЕТЧЩИ, ЛТПНЕ ЪБТЕЪЕТЧЙТПЧБООЩИ РБТБНЕФТПЧ Ч ЛБЮЕУФЧЕ 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. оЕ ЪБВЩЧБКФЕ ПВТБНМСФШ УЛТЙРФЩ УЙНЧПМБНЙ ЛПННЕОФБТЙС.

Нет ничего особенно таинственного в отношении XHTML , CSS и JavaScript . Они являются просто эволюцией Web . Если вы уже знакомы в какой-то степени с HTML , то ничего "забывать" не потребуется. Все, что вы знаете, по-прежнему применимо, необходимо только делать некоторые вещи другим образом (и быть немного более внимательным при разметке).

Кроме получения удовлетворения от хорошо сделанной работы, разработка в соответствии со стандартами Web имеет просто смысл. Контраргументы против разработки в соответствии со стандартами состоят в том, что это требует много времени и больших усилий, чтобы заставить компоновку работать для разных браузеров. Противоположным аргументом могло бы быть, как заставить компоновку не на основе стандартов работать на различных устройствах и с будущими версиями браузеров. Как можно быть уверенным, что спотыкающаяся разметка будет вообще выводиться в Firefox 5.0 и IE 10.0? Это невозможно, если не следовать некоторым правилам.

Данное руководство представляет собой введение в 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.

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

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

Вы наверняка знакомы с 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 .

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 который может создать горизонтальное меню-гармошку с изображениями.

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

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

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

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

В данной статье я расскажу вам о JavaScript - скриптовом языке, предназначенном для создания интерактивных веб-страниц, и о том, что можно делать с помощью JS. Мы рассмотрим примеры использования JavaScript и узнаем, чем он может быть нам полезен.

Изменять страницу, писать на ней текст, добавлять и удалять теги, менять стили элементов.

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

JavaScript. Быстрый старт

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

Устанавливать и считывать cookie, валидировать данные, выводить сообщения и многое другое.
Например, при первом посещении сайта пользователю показывается попап-окно и устанавливается cookie. А при последующих посещениях этого ресурса попап-окно не показывается, потому что cookie уже установлены.
Также можно проверять корректность введенного e-mail, проверять на соответствие нужному формату введенный номер телефона и сразу выводить сообщение о правильности или неправильности введенных данных.

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

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

1. Удобная многоуровневая навигация

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

Во многих интернет-магазинах есть боковая выпадающая навигация. Рассмотрим для примера shop.by . Представьте, насколько бы она растянулась вниз, если бы подпункты не выпадали по наведению или по клику, а были видны все сразу!

2. Использование галерей и слайдеров дает нам возможность показать фотографии, картинки дополнительных видов товаров, удобно и компактно расположить портфолио фотографа.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Сколько бы понадобилось места для галереи, представленной на картинке ниже?

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

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

Но что делать, если все-таки нужно компактно вместить много виждетов?

Тут на помощь приходит решение JavaScript с «табами».

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

Например, в один «таб» можно поместить виджеты социальных сетей, во второй - категории и архивы и т.д. Это позволит сэкономить место и сделает сайт более удобным для использования.

4. Используя JavaScript, можно также существенно улучшить страницу контактов для вашего сайта или сайтов ваших клиентов.

встроить подсказки в поля форм;

проверять вводимые в поля форм данные и выводить сообщения об ошибках;

отправлять данные формы без перезагрузки страницы;

разместить карту с маршрутом.

5. Для тех, кто размещает на сайте табличные данные, очень полезным будет использование сортировки данных в таблице.

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

Также, используя JavaScript, можно делать всевозможные эффекты на сайте - такие как плавное выскальзывание элементов, их перемещение, постепенное появление и исчезновение и все то, на что хватит вашей фантазии.

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

Как видим, область применения JavaScript очень широка. Это и галереи, и слайдеры, и табы, и всевозможные интерактивные элементы, и карты, и графики, и работа с формами и многое-многое другое.

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

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

А вы используете JavaScript на своих сайтах? Какие у вас основные трудности при использовании JavaScript?

Расскажите об этом в комментариях к статье.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения