Коллекция примеров JavaScript. Начинающему WEB-дизайнеру. Уроки JavaScript.Коллекция примеров JavaScript Web дизайн с помощью javascript

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 УФБФЙЮЕО. дМС ФПЗП, ЮФПВЩ ОБХЮЙФШ УФТБОЙГХ «ЦЙФШ», ПФЛМЙЛБФШУС ОБ ДЕКУФЧЙС РПМШЪПЧБФЕМС, ОХЦОП ОБКФЙ УРПУПВ ъбртпзтбннйтпчбфш ФП ЙМЙ ЙОПЕ ЕЈ РПЧЕДЕОЙЕ. хНОЩЕ МАДЙ — ОЕ ЮЕФБ ОБН У ЧБНЙ — ТЕЫБАФ ЬФХ РТПВМЕНХ, ЧУФБЧМСС Ч ЗЙРЕТФЕЛУФ ЛХУЛЙ РТПЗТБННОПЗП ЛПДБ, ЛПФПТЩЕ ОБЪЩЧБАФ ултйрфбнй. чППВЭЕ ЗПЧПТС, УЛТЙРФ — РТПУФП НБМЕОШЛБС РТПЗТБННЛБ, УТБВБФЩЧБАЭБС ФПЗДБ, ЛПЗДБ ЕК УЛБЦХФ, Й ОБРЙУБОБ ПОБ НПЦЕФ ВЩФШ ОБ ПДОПН ЙЪ ОЕНБМПЗП ЛПМЙЮЕУФЧБ УЛТЙРФПЧЩИ СЪЩЛПЧ. нЩ У ЧБНЙ ВХДЕН ЗПЧПТЙФШ ФПМШЛП ПВ ПДОПН ЙЪ ОЙИ — 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. оЕ ЪБВЩЧБКФЕ ПВТБНМСФШ УЛТЙРФЩ УЙНЧПМБНЙ ЛПННЕОФБТЙС.

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

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

JavaScript is a programming language that adds interactivity to your website (for example games, responses when buttons are pressed or data is entered in forms, dynamic styling, andanimation). This article helps you get started with this exciting language and gives you an idea of what is possible.

What is JavaScript, really?

Important : If you haven"t been following along with the rest of our course, download this example code and use it as a starting point.

Variables Variable Explanation Example StringNumberBooleanArrayObject

A sequence of text known as a string. To signify that the value is a string, you must enclose it in quote marks.	let myVariable = "Bob";
A number. Numbers don"t have quotes around them.	let myVariable = 10;
A True/False value. The words true and false are special keywords in JS, and don"t need quotes.	let myVariable = true;
A structure that allows you to store multiple values in one single reference.	let myVariable = ; Refer to each member of the array like this: myVariable , myVariable , etc.
Basically, anything. Everything in JavaScript is an object, and can be stored in a variable. Keep this in mind as you learn.	let myVariable = document.querySelector("h1"); All of the above examples too.

So why do we need variables? Well, variables are needed to do anything interesting in programming. If values couldn"t change, then you couldn"t do anything dynamic, like personalize a greeting message or change the image displayed in an image gallery.

Comments

You can put comments into JavaScript code, just as you can in CSS:

/* Everything in between is a comment. */

If your comment contains no line breaks, it"s often easier to put it behind two slashes like this:

// This is a comment

Operators Events

Real interactivity on a website needs events. These are code structures which listen for things happening in the browser and runs code in response. The most obvious example is the click event , which is fired by the browser when you click on something with your mouse. To demonstrate this, enter the following into your console, then click on the current webpage:

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

There are many ways to attach an event to an element. Here we select the element, setting its onclick handler property equal to an anonymous (i.e. nameless) function, which contains the code we want the click event to run.

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

is equivalent to

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

It"s just shorter.

Supercharging our example website

Now we"ve gone over a few JavaScript basics, let"s add a few cool features to our example site to see what is possible.

Adding an image changer

In this section, we"ll add an additional image to our site using some more DOM API features, using some JavaScript to switch between the two when the image is clicked.

First of all, find another image you"d like to feature on your site. Be sure it is the same size as the first image, or as close as possible.

Save this image in your images folder.

Rename this image "firefox2.png" (without quotes).

Go to your main.js file, and enter the following JavaScript. (If your "Hello world!" JavaScript is still there, delete it.) let myImage = document.querySelector("img"); myImage.onclick = function() { let mySrc = myImage.getAttribute("src"); if(mySrc === "images/firefox-icon.png") { myImage.setAttribute ("src","images/firefox2.png"); } else { myImage.setAttribute ("src","images/firefox-icon.png"); } }

Save all files and load index.html in the browser. Now when you click the image, it should change to the other one!

If you get stuck, you can compare your work with our finished example code on GitHub .

We have barely scratched the surface of JavaScript. If you have enjoyed playing, and wish to advance even further, head to our JavaScript learning topic .