ЭлектроЗнаток » Инструменты » Видео урок: Изучение JavaScript. Начинающему WEB-дизайнеру

Видео урок: Изучение JavaScript. Начинающему WEB-дизайнеру

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

Что такое JavaScript на самом деле?

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

Что произошло?

Итак, ваш заголовок текста был изменен на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции querySelector() , захватив ссылку на наш заголовок и сохранив её в переменной, названной myHeading . Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

После этого, вы устанавливаете значение переменной myHeading в textContent свойство (которое представляет собой контент заголовка) "Hello world!".

Ускоренный курс по основам языка

Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало!

Переменные

Примечание : JavaScript чувствителен к регистру - myVariable отличается от переменной myvariable . Если у вас возникают проблемы в вашем коде, проверьте регистр!

После объявления переменной вы можете присвоить ей значение:

MyVariable = "Bob";

Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:

Var myVariable = "Bob";

Вы можете получить значение, просто вызвав переменную по имени:

MyVariable;

После установки значения переменной вы можете изменить его позже:

Var myVariable = "Bob"; myVariable = "Steve";

Обратите внимание, что переменные имеют разные типы данных :

Переменная Пояснение Пример String Number Boolean ArrayObject
Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки. var myVariable = "Bob";
Числа. Числа не имеют кавычек вокруг них. var myVariable = 10;
Значение True(Правда)/False(Ложь). Слова true и false специальные ключевые слова в JS, и не нуждаются в кавычках. var myVariable = true;
Массив, который позволяет хранить несколько значений в одной ссылке. var myVariable = ;
Обратиться к каждому элементу массива можно так:
myVariable , myVariable , и т.д.
В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь. var myVariable = document.querySelector("h1");
Все это из вышеприведённых примеров.

Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.

Комментарии

Вы можете поместить комментарии в JavaScript код, так же как вы делали это в CSS:

/* Всё, что находится тут - комментарий. */

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

// Это комментарий

Операторы

Примечание : Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите "35" + "25" в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, 35 + 25 , то получите правильный результат.

Условия

Условия - это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространенная форма условия называется, if ... else . Например:

Var iceCream = "chocolate"; if (iceCream === "chocolate") { alert("Yay, I love chocolate ice cream!"); } else { alert("Awwww, but chocolate is my favorite..."); }

Выражение внутри if (...) - это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную iceCream со строкой chocolate и увидеть равны ли они. Если это сравнение возвращает true , выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции else .

Функции События

Для создания действительной интерактивности на веб-сайте вам необходимы события. События - это структура, которая слушает то, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является событие клика , которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:

Document.querySelector("html").onclick = function() { alert("Ouch! Stop poking me!"); }

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

Обратите внимание, что

Document.querySelector("html").onclick = function() {};

эквивалентно

Var myHTML = document.querySelector("html"); myHTML.onclick = function() {};

Просто так короче.

Прокачаем пример нашего веб-сайта

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

Добавление смены изображения

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

  • В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.
  • Сохраните изображение в вашу папку images .
  • Переименуйте это изображение в "firefox2.png" (без кавычек).
  • Перейдите в ваш файл main.js и введите следующий JavaScript. (Если ваш "hello world" JavaScript по-прежнему существует, удалите его.) var myImage = document.querySelector("img"); myImage.onclick = function() { var mySrc = myImage.getAttribute("src"); if(mySrc === "images/firefox-icon.png") { myImage.setAttribute ("src","images/firefox2.png"); } else { myImage.setAttribute ("src","images/firefox-icon.png"); } }
  • Сохраните все файлы и загрузите index.html в браузере. Теперь, когда вы щёлкните по изображению, оно должно измениться на другое!

    • Итак, мы сохраняем ссылку на наш элемент в переменной myImage . Далее, мы создаём этой переменной обработчик события onclick с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:

  • Мы получаем значение из атрибута src изображения.
  • Мы используем условие для проверки значения src, равен ли путь к исходному изображению:
  • Если это так, мы меняем значение src на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента .
  • Если это не так (значит, оно должно было уже измениться), мы меняем значение src , возвращаясь к первоначальному пути изображения, каким он был изначально.
    • Добавление персонального приветственного сообщения

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

  • В index.html , добавьте следующую строку перед элементом : Change user
  • В main.js , добавьте следующий код в конец файла, точно так, как написано - он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные: var myButton = document.querySelector("button"); var myHeading = document.querySelector("h1");
  • Теперь добавьте следующую функцию для установки персонализированного приветствия - она ничего не будет делать, но мы будем использовать её позже: function setUserName() { var myName = prompt("Please enter your name."); localStorage.setItem("name", myName); myHeading.innerHTML = "Mozilla is cool, " + myName; } Эта функция содержит функцию prompt() , которая вызывает диалоговое окно, немного похожее на alert() кроме того, что prompt() просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает OK . В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием localStorage , который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию setItem() из localStorage для создания и хранения данных в свойстве под названием "name" , и устанавливаем это значение в переменную myName , которая содержит имя введенное пользователем. В конце мы устанавливаем textContent заголовку в виде строки и имени пользователя.
  • Затем добавьте блок if ... else - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке: if(!localStorage.getItem("name")) { setUserName(); } else { var storedName = localStorage.getItem("name"); myHeading.innerHTML = "Mozilla is cool, " + storedName; } Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде!) чтобы проверить, существуют ли данные в пункте name . Если нет, то функция setUserName() запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохраненное имя, с помощью getItem() и устанавливаем textContent заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри setUserName() .
  • Наконец, установите обработчик события onclick на кнопку. При нажатии кнопки запускается функция setUserName() . Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки: myButton.onclick = function() { setUserName(); }

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

    Заключение

    После того как мы обсудили подходы к изучению 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 - скриптовом языке, предназначенном для создания интерактивных веб-страниц, и о том, что можно делать с помощью JS. Мы рассмотрим примеры использования JavaScript и узнаем, чем он может быть нам полезен.

    Что можно делать, используя JavaScript?

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

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

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

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

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

    Примеры использования JavaScript

    Применение 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 на практическом примере по созданию веб-приложения

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

    1. Портфолио Майка Куса

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

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

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

    2. Hello Monday

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

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

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

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

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

    3. Multeor

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

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

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

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

    4. Crime Timeline

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

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

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

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

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

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

    6. Tweetmap

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

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

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

    7. The Trip

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

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

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

    8. Si Digital

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

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

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

    9. Сайт Жана Хальфстейна

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

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

    10. Портфолио Ника Джонса

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

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

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

    11. MapsTD

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

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

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

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

    12. Glimpse Catalogs

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

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

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

    13. Red Bull Music Academy Radio

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

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

    14. Nouvelle Vague

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

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

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

    15. The Convergence

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

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

    16. Kindle Cloud Reader

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

    17. Les Enfants Terrible

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

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

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

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

    18. Pinterest

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

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

    19. Love Bomb Builder

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

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

    20. Michelberger Booze

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

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

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

    21. Trello

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

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

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

    22. BrowserQuest

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

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

    23. JS1k

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

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

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

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

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

    24. Timeline

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

    25. Draw a Stickman

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

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

    Похожие статьи