Web дизайн с помощью 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.

Ресурс Creative Bloq опубликовал материал, в котором его авторы поделились с читателями лучшими, на их взгляд, примерами использования JavaScript для создания сайтов. ЦП выбрал 30 самых интересных ресурсов.

Портфолио веб-дизайнера Майка Куса выполнено в «чистой и сдержанной манере», пишут редакторы Creative Bloq. В нём большие изображения сочетаются с простыми элементами пользовательского интерфейса.

«Я думаю о своих работах, как о бренде. Нет никакой необходимости добавлять в мой сайт лишние элементы дизайна», — говорит Кус.

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

Сайт креативного агентства Hello Monday претерпел значительные изменения, замечают авторы статьи. Разработчиками компании была проделана огромная работа. Им удалось сделать интерфейс дружелюбным для пользователя.

Старый сайт агентства Hello Monday

Теперь на сайте представлены примеры уже выполненных агентством заказов — у каждого проекта есть своя страница, на которой описана его история, что даёт пользователю более глубокое понимание, чем занимается Hello Monday.

Обновлённый сайт Hello Monday

«Мы пытались отойти от шаблонного представления о том, как должен выглядеть сайт креативного агентства», — рассказывает Кэти Хертел, руководитель проекта по редизайну веб-страницы Hello Monday. Авторы материала находят сайт очень привлекательным и отзывчивым, чему способствует организация проектов на главной странице: она автоматически дополняется новыми работами агентства при прокрутке вниз.

Multeor — это многопользовательская онлайн-игра, написанная на JavaScript с использованием элемента canvas HTML5. Она разработана Арьеном де Врайзом и Филидором Вайзе, а спроектирована Артуром ван Хугом. Основная задача пользователя в игре — контролировать падение метеоритов, получая очки за оставленные им разрушения.

Игра использует Node.js-сервер для управления связью между настольными и мобильными устройствами с помощью WebSockets.

Вайзе акцентирует внимание на том, что при разработке Multeor не использовались уже существующие игровые библиотеки:

Мы писали всё сами — это было очень увлекательно, к тому же, мы узнали много нового. То, что мы не зависели от конкретных сборок и префабов, дало нам определённую свободу действий: не нужно было заниматься рендерингом существующей графики, обработкой коллизий и отдельно описывать систему, отвечающую за взрывы.

Crime Timelime — агрегатор, собирающий данные о преступности в Великобритании с помощью публичных API. Он позволяет пользователям узнать, как обстоят дела в их регионе.

«Мы организовали сайт таким образом, чтобы он показывал карту региона и места совершения преступлений — за месяц, выбранный пользователем на панели снизу», — говорит разработчик проекта Алекс Миллер.

Ресурс использует API Google Maps, для создания панели с месяцами применялись jQuery и jQRangeSlider. Когда пользователь взаимодействует с картой — например, щелкает мышкой в определенное место на ней, сайт обновляет изображение с помощью JavaScript. «Пузырьки», показывающие количество преступлений, были созданы с помощью CSS и анимированы с помощью jQuery.

На сайте Here is Today язык JavaScript использовался для создания анимации. Создатель ресурса, дизайнер Люк Твимэн, так объясняет свою идею: «Я хотел создать что-то, что дало бы каждому человеку ощущение масштаба времени. Here is Today помогает понять, насколько обширна история вселенной».

Твимэн отмечает, что он с самого начала решил отказаться от стандартных величин измерения — пикселей, и описал собственные, основываясь на размерах экрана. Это было сделано для того, чтобы сайт выглядел одинаково на всех устройствах.

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

Tweetmap изображает на страны на карте пропорционально количеству отправленных из них твитов. Разработчик сервиса Роб Хоукс перечисляет несколько технологий, использованных при его создании: TopoJSON, D3.js, Node.js, PhantomJS, и специальные алгоритмы построения смежных картограмм в режиме реального времени.

Мы выбрали Node.js, потому что у нас уже был опыт его использования, и потому что это простая, быстрая и гибкая платформа. Для анимации карты (в формате TopoJSON) мы используем D3 — фантастическую библиотеку для визуализации данных. В частности, мы широко применяем модуль geo, который позволяет делать сложные географические расчеты и преобразования.

Чтобы избежать проблем с представлением карт в браузере клиента, система генерирует карты на сервере с помощью D3, запускает и рендерит их с помощью движка PhantomJS, и только потом передаёт пользователю — это позволяет не создавать «дыр» при показе карт.

The Trip — интерактивный фильм, созданный с помощью JavaScript и HTML5 (без использования Flash). Отто Наскарелла, создатель проекта, считает, что задача разработки подобного сервиса оказалась очень сложной:

Большинство трудностей, с которыми мы столкнулись, были связаны с тем, что HTML5 на момент написания сайта не имел средств для кросс-браузерной разработки. Тогда мы решили, что будем рекомендовать клиентам использовать Chrome.

Код сайта на JavaScript использует jQuery практически для всех задач. Разработчики также применяли TextBlur и TextDrop — для размытия и анимации текста.

Эта страница, написанная на JavaScript — новое портфолио и блог дизайнерского и маркетингового агентства Si Digital. Ведущий разработчик проекта Алекс Крук так объясняет анимацию на главной странице: «Жидкость, движущаяся по трубам, ведёт пользователей по нашему портфолио — она активирует анимацию изображений на каждом из этапов исследования сайта клиентом».

Для достижения подобного эффекта Крук применил метод jQuery.animate(). К тому же, добавляет он, нужно было правильно выбрать скорость заполнения жидкостью труб — ведь все читают с разной скоростью.

Интерактивный график на странице с описанием выполненных проектов и команды агентства, реализован с помощью jQuery. Временная шкала, по словам Крука, генерируется динамически — на основе информации из базы данных, с использованием технологии Ajax.

Жан Хальфстейн — веб-дизайнер. В его портфолио авторов статьи больше всего привлекла главная страница — и анимация на ней. «Я действительно неплохо провёл время, пока возился с различными эффектами. Я очень люблю использовать новые технологии, так что решил сделать основную страницу своего сайта своеобразной песочницей — там я развлекаюсь с Three.js и элементом canvas HTML5», — рассказывает Хальфстейн.

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

По словам Джонса, когда он разрабатывал сайт, у него было больше опыта в работе с Flash, чем с JavaScript, но ему захотелось попробовать что-нибудь новое — чтобы понять, на что он способен. «Я сразу понял, что синтаксис JavaScript почти такой же, как синтаксис ActionScript — поэтому очень скоро полностью освоился», — описывает процесс написания кода Джонс.

Джонс вспоминает, что Flash не давал ему доступа к работе с движениями мыши — это был новый опыт, который ему очень понравился. Разработчик хотел добиться такой отзывчивости сайта, которой он не мог достичь, используя переходы между классами в CSS. Джонс доволен достигнутым результатом:

Если вы собираетесь перейти с ActionScript на JavaScript, не медлите ни секунды. Делая свой сайт, я хотел понять, способен ли JavaScript на то, на что способен Flash. И я очень впечатлён.

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

Создатель проекта Дункан Барклай объясняет, как это работает: «Мы использовали API Google Maps, MooTools и JavaScript. Самая сложная часть — поиск маршрута, которым будут следовать враги пользователя. Как только игрок выбрал начальную точку, сервис осуществляет поиск долготы и широты, и вычисляет возможные пути c помощью Google».

По ходу игры на экране появляется всё больше противников. Барклай рассказывает, что разработчикам пришлось «бороться» c таймингом браузеров — дело в том, что большинство из них со временем снижает частоту проверки обновлений на странице, и нужно было сделать так, чтобы этого не происходило.

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

Ресурс Glimpse разработан совместно командой Windows IE и проектом TheFind, и соединяет в себе систему поиска TheFind и приложение тех же разработчиков для онлайн-шопинга на Facebook. В рамках Glimpse программисты выпустили собственный фреймворк, основанный на Turn.js.

Целью команды с самого начала было сделать из Glimpse веб-приложение, а не обычный сайт. Разработчики использовали парадигму «модель-представление-поведение», которая разделяет на три отдельных компонента модель данных, пользовательский интерфейс и взаимодействие с клиентом. Сервис применяет шаблоны рендеринга моделей на стороне клиента Thrift или JSON — в зависимости от вычислительной мощности клиента.

Библиотека Turn.js также использовалась при разработке каталогов. С помощью CSS и JavaScript моделям, представленным на сайте, придаётся объём — за счет наложения теней на изображение.

RBMA Radio использует инструмент Modernizr, который позволяет вести кросс-браузерную разработку на HTML5 и CSS. Modernizr постоянно обновляется, так что создатели сайта могут улучшать код по мере представления новых возможностей.

Кроме того, при реализации сервиса применена библиотека Backbone.js — с помощью неё подгружаются плитки для создания эффекта бесконечной страницы.

Nouvelle Vague — сайт от французского дизайнерского агентства Ultranoir. Сервис позволяет «отслеживать» твиты по заданному хештегу. Он реализован с помощью JavaScript, WebGL и HTML5. HTML5, правда, отвечает только за тизер при открытии ресурса.

Один из разработчиков агентства рассказал, что на создание сайта ушло четыре месяца, а трудились над ним три человека. «Нам было очень интересно попробовать поработать с WebGL», — объясняет он.

Основная цель проекта заключалась в том, чтобы при помощи 3D-изображений воссоздать атмосферу из видеозаставки. Команда погрузилась в новые технологии HTML5, CSS3 и JavaScript, и считает, что эти языки могут стать стандартами для работы с 3D в будущем — из-за качественного рендеринга, богатых возможностей взаимодействия и реагирования.

The Convergence — браузерная игра, своей ретро-графикой напоминающая Super Mario Bros. Она демонстрирует потрясающие возможности JavaScript и HTML5 и доказывает, что HTML5 справляется со своими задачами ничуть не хуже, чем Flash.

Разработчики обещают в будущем добавить в игру аудиосопровождение и новые уровни, а также поддержку Mozilla Gamepad API.

Это веб-приложение превращает слова «купите один раз, читайте на всех устройствах» в реальность. Оно использует технологии HTML5, JavaScript API, библиотеки jQuery и jQuery UI и несколько плагинов jQuery, в том числе jScrollPane для прокрутки страниц и jQuery Templates. Кроме того, команда разработчиков воспользовалась WebSQL для поддержки офлайн-режима.

Сайт, запущенный студией WeFail, считают авторы заметки, выглядит страшновато, но всё равно очень круто. Ресурс выполнен в довольно резком стиле. JavaScript используется для анимации при взаимодействии пользователя и системы. Чтобы прокручивание осуществлялось только для отдельных элементов интерфейса, командой был применён плагин jQuery ScrollTo. Для появления видео не во всплывающих окнах, а прямо на сайте использовалась библиотека Shadowbox.js.

Кроме того, в коде Les Enfants применяется плагин jQuery Cycle — он отвечает за отображение картинок и примеров работ агентства.

«Мы запустили Les Enfants, чтобы понять, какие возможности по производительности имеются у JavaScript. Оказалось, что в сочетании с СSS Transform можно добиться отличных результатов», — говорит разработчик Мартин Хью.

Не так давно, отмечает Хью, подобные вещи можно было создавать только при помощи Flash, но теперь у него есть жизнеспособная альтернатива — JavaScript.

Pinterest — яркий пример использования JavaScript для создания эффекта бесконечной страницы. Для создания сайта понадобились инструменты jQuery, jQuery UI и плагин PageLess.

Как считают авторы заметки, PageLess жизненно важен для Pinterest, потому что бесконечная прокрутка и прогрузка новых пинов гораздо эффективнее помогает удерживать внимание пользователя, чем социальные функции — например, комментирование записей.

Love Bobm Builder помогает пользователям выразить свою любовь или благодарность кому-либо. Это аккуратный и простой сайт, который позволяет создать и отправить послание-бомбу.

Ресурс иcпользует инструмент Modernizr для своевременного обновления кода на JavaScript и HTML5.

Когда пользователь попадает на сайт, первым делом он видит так называемый «прелоадер» — может показаться, что он выполнен при помощи Flash, но это не так. За наполнение стакана пивом по мере загрузки отвечает HTML5 и JavaScript.

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

Нажимая на маски животных, клиент отправляется к другим сценам — все анимационные эффекты в которых исполнены при помощи jQuery.animate().

Trello — приложение для совместного или индивидуального планирования, в котором пользователи могут создавать списки выполненных и невыполненных задач и делиться прогрессом в режиме реального времени. Сайт разработан с использованием Node.js, MongoDB и Backbone.js.

Один из создателей Trello Даниэль ле Черминан поясняет, что применение только одного языка при написании сайта помогает новым членам команды быстрее влиться в процесс разработки.

Общение между пользователями реализовано с помощью Web Sockets — ле Черминан отмечает, что это достаточно новая технология, поэтому при её настройке возникали некоторые сложности.

Это игра в ретро-стиле, созданная студией Little Workshop, призвана продемонстрировать возможности HTML5, JavaScript и, в особенности, Web Sockets. Он может одновременно поддерживать взаимодействие между тысячами пользователей.

«Создание многопользовательской игры — отличный способ продемонстрировать, как такие технологии могут работать вместе. BrowserQuest опирается на серверы Node.js, каждый из которых может запустить несколько экземпляров игрового мира», — рассказывает разработчик студии Гийом Лекольне.

JS1k — ежегодный конкурс, задача участников которого создать страницу на JavaScript на заданную тему (чаще всего — анимированные изображения). Её вес не должен превышать 1 КБ.

Тема этого года — «Here be dragons».

Работа-победитель конкурса в 2012 году. Автор — Филипп Бучанан, тема — «Любовь»

Работа победителя 2012 года изначально весила 8 КБ — но за день Филипп смог сократить её размер до требуемого 1 КБ, оптимизировав алгоритм генерации дерева:

Моей тактикой был «честный обман» компилятора. Например, использование конструкции «a ? b: c» вместо «if (a) b else c» экономит 8 байтов.

Сервис помогает пользователям создавать таймлайны, и он очень прост в использовании. В интерактивную шкалу можно включать твиты, видео, фотографии и аудиозаписи. Свой таймлайн можно описать с помощью JSON или Google Docs — как удобнее самому клиенту.

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

Для создания игры использовались jQuery и библиотека для работы с векторной графикой Raphal.js. Реализация проекта с помощью Raphal помогла разработчикам избежать проблем с производительностью на большинстве устройств и во всех браузерах.