Как да разделите JavaScript във вашата уеб страница

Когато за първи път напишете нов JavaScript, най-лесният начин да го настроите е да вградите JavaScript кода директно в уеб страницата, така че всичко да е на едно място, докато го тествате, за да работи прав. По същия начин, ако вмъквате предварително написан скрипт в уебсайта си, инструкциите може да ви кажат да вграждате части или целия скрипт в самата уеб страница.

Това е добре, ако настроите страницата и накарате тя да работи правилно, но след като страницата ви работи по начина, по който искате, ще можете да подобрете страницата чрез извличане на JavaScript във външен файл, така че съдържанието на страницата ви в HTML да не е толкова затрупано с елементи без съдържание, като например JavaScript.

Ако просто копирате и използвате JavaScripts, написани от други хора, тогава техните инструкции как да добавите скрипта си към вашата страница може да са довели до това, че имате един или повече големи раздела от JavaScript всъщност е вграден в самата уеб страница и техните инструкции не ви казват как можете да преместите този код от страницата си в отделен файл и пак да имате JavaScript работа. Въпреки това, не се притеснявайте, защото независимо от това кой код JavaScript използвате в страницата си, можете лесно да преместите JavaScript извън страницата си и я настройте като отделен файл (или файлове, ако имате повече от едно парче JavaScript, вградено в страницата). Процесът за това винаги е един и същ и се илюстрира най-добре с пример.

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

Вграденият ви JavaScript трябва да изглежда като един от горните три примера. Разбира се, вашият действителен JavaScript код ще бъде различен от показания, но JavaScript вероятно ще бъде вграден в страницата с помощта на един от горните три метода. В някои случаи вашият код може да използва остарелия език = "JavaScript" вместо тип = "текст / JavaScript" в този случай може да искате да приведете кода си по-актуален, за да започнете, като замените езиковия атрибут с тип.

Преди да можете да извлечете JavaScript в собствения му файл, първо трябва да идентифицирате кода, който ще бъде извлечен. И в трите горни примера има два реда от действителния JavaScript код, който трябва да бъде извлечен. Вашият скрипт вероятно ще има много повече редове, но може да бъде лесно идентифициран, защото ще заема същото място във вашата страница като двата реда на JavaScript, които ние са изтъкнати в горните три примера (и трите примера съдържат едни и същи два реда на JavaScript, просто контейнерът около тях е леко различно).

1. Първото нещо, което трябва да направите, за да извлечете JavaScript в отделен файл, е да отворите обикновен текстов редактор и да получите достъп до съдържанието на вашата уеб страница. След това трябва да намерите вградения JavaScript, който ще бъде заобиколен от една от вариантите на кода, показани в горните примери.
2. След като намерите кода на JavaScript, трябва да го изберете и да го копирате в клипборда. С горния пример кода, който ще бъде избран, е подчертан, не е необходимо да избирате маркерите на скрипта или незадължителните коментари, които могат да се появят около вашия JavaScript код.
3. Отворете друго копие на вашия обикновен текстов редактор (или друг раздел, ако вашият редактор поддържа отваряне на повече от един файл наведнъж) и минавайте там съдържанието на JavaScript.
4. Изберете описателно име на файл, което да използвате за новия си файл и запазете новото съдържание, като го използвате. С примерния код целта на скрипта е да се раздели извън рамките, за да може да бъде подходящо име framebreak.js.
5. Така че сега имаме JavaScript в отделен файл се връщаме в редактора, където имаме оригиналното съдържание на страницата, за да направим промените там, за да свържем към външното копие на скрипта.
6. Тъй като сега имаме скрипта в отделен файл, можем да премахнем всичко между маркерите на скрипта в оригиналното ни съдържание, така че маркер.
7. Последната стъпка е добавяне на допълнителен атрибут към тага на скрипта, определящ къде може да намери външния JavaScript. Правим това с помощта на a SRC = "име" атрибут. С нашия пример скрипт бихме посочили src = "framebreak.js".
8. Единственото усложнение на това е, ако сме решили да съхраним външните JavaScripts в отделна папка от уеб страниците, които ги използват. Ако направите това, тогава трябва да добавите пътя от папката на уеб страницата към папката на JavaScript пред името на файла. Например, ако JavaScripts се съхраняват в a JS папка в папката, която съдържа нашите уеб страници, от които бихме се нуждаели SRC = "JS / framebreak.js"

И така, как изглежда кодът ни, след като разделихме JavaScript в отделен файл? В случая на нашия пример JavaScript (ако приемем, че JavaScript и HTML са в една и съща папка) нашият HTML в уеб страницата гласи:

Имаме и отделен файл, наречен framebreak.js, който съдържа:

ако (top.location! = self.location) top.location = self.location;

Вашето име и съдържание на файла ще бъде много по-различно от това, защото ще бъдете извлечени каквото и да е вградено JavaScript във вашата уеб страница и да се даде на файла описателно име въз основа на какво прави го. Действителният процес на извличането му ще бъде същият, независимо от това какви редове съдържа.

Какво ще кажете за онези други два реда във всеки от примери два и три? Е, целта на тези редове в пример два е да скрият JavaScript от Netscape 1 и Internet Explorer 2, нито един от които никой не използва повече, така че тези редове всъщност не са необходими в първия място. Поставянето на кода във външен файл крие кода от браузърите, които не разбират етикета на скрипта по-ефективно, отколкото заобикалянето му в HTML коментар. Третият пример се използва за XHTML страници, за да се каже на валидаторите, че JavaScript трябва да се третира като съдържание на страница, а не да го валидира като HTML (ако използвате HTML doctype, а не XHTML такъв, тогава валидаторът вече знае това и затова тези тагове не са е необходимо). С JavaScript в отделен файл вече няма JavaScript в страницата, който да бъде прескачан от валидатори и така тези редове вече не са необходими.

Един от най-полезните начини, чрез които JavaScript може да се използва за добавяне на функционалност към уеб страница, е да се извърши някакъв вид обработка в отговор на действие от вашия посетител. Най-честото действие, на което искате да отговорите, ще бъде, когато този посетител щракне върху нещо. Обажда се обработващият събитията, който ви позволява да отговорите на посетителите, които щракнат върху нещо OnClick.

Когато повечето хора за първи път се замислят да добавят обработващ събитие на onclick към своята уеб страница, те веднага мислят да го добавят към маркер. Това дава част от кода, който често изглежда така:

Това е погрешно начин да използвате onclick, освен ако нямате действителен смислен адрес в атрибута href, така че тези без JavaScript да бъдат прехвърлени някъде, когато кликнат върху връзката. Много хора също оставят „return false“ от този код и след това се чудят защо върхът на текущата страница винаги се зарежда след като скриптът е стартиран (което е, което href = "#" казва на страницата да прави, освен ако не се върне невярно от всички обработващи събитията. Разбира се, ако имате нещо смислено като местоназначение на връзката, тогава може да искате да отидете там, след като стартирате onclick кода и тогава няма да имате нужда от „return false“.

Това, което много хора не осъзнават, е, че към него може да се добави обработващият събитията onclick който и да е HTML етикет в уеб страницата, за да взаимодейства, когато посетителят ви кликне върху това съдържание. Така че, ако искате нещо да се стартира, когато хората кликат върху изображение, което можете да използвате:

Ако искате да стартирате нещо, когато хората кликват върху текст, който можете да използвате:

някакъв текст

Разбира се, те не дават автоматична визуална представа, че ще има отговор, ако посетителят ви кликне върху тях по този начин линка, но можете сами да добавите тази визуална улика, стилизирайки изображението или педя по подходящ начин.

Другото нещо, което трябва да се отбележи за тези начини за свързване на обработващия събитията onclick е, че те не изискват "return false", защото няма действие по подразбиране, което ще се случи, когато елементът е щракнат върху това, което трябва да бъде хора с увреждания.

Тези начини за закрепване на onclick са голямо подобрение на лошия метод, който много хора използват, но все още е много далеч от това да бъде най-добрият начин за кодирането му. Един проблем при добавянето на onclick с помощта на някой от горните методи е, че той все още смесва вашия JavaScript с вашия HTML. OnClick е не HTML атрибут, той е обработващ събитие в JavaScript. Като такъв, за да отделим нашия JavaScript от нашия HTML, за да улесним страницата за поддържане, трябва да извадим онзи клик от онзи клик от HTML файла в отделен JavaScript файл, където той принадлежи.

Най-лесният начин да направите това е да замените onclick в HTML с an документ за самоличност това ще улесни привързването на обработващия събитието на съответното място в HTML. Така че нашият HTML сега може да съдържа едно от следните твърдения:

 някакъв текст

След това можем да кодираме JavaScript в отделен JavaScript файл, който е или свързан в долната част на тялото на страницата или който е в главата на страницата и където кодът ни е вътре във функция, която сама се извиква след като страницата приключи зареждането. Нашият JavaScript за прикачване на обработчиците на събития изглежда така:

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

Едно нещо, което трябва да се отбележи. Ще забележите, че винаги сме писали onclick изцяло с малки букви. Когато кодирате изявлението в техния HTML, ще видите някои хора да го пишат като onClick. Това е погрешно, тъй като всички имена на обработчици на JavaScript събития са малки букви и няма такъв манипулатор като onClick. Можете да се измъкнете от него, когато включите JavaScript директно в HTML маркера си, тъй като HTML не е чувствителен към регистъра и браузърът ще го пренасочи към правилното име за вас. Не можете да се измъкнете с грешна главна буква в самия JavaScript, тъй като JavaScript е чувствителен към регистъра и няма такова нещо в JavaScript като onClick.

Този код е огромно подобрение в сравнение с предишните версии, тъй като ние двамата прикрепяме събитието към правилния елемент в нашия HTML код и имаме напълно отделен JavaScript от HTML. Въпреки това можем да подобрим това.

Единственият проблем, който остава, е, че можем да прикачим само един обработващ събитие onclick към конкретен елемент. Ако трябва по всяко време да прикачим различен манипулатор на събитие onclick към същия елемент, тогава вече прикрепената обработка вече няма да бъде прикачена към този елемент. Когато добавяте разнообразни скриптове към вашата уеб страница за различни цели, има поне a възможност две или повече от тях да искат да осигурят някаква обработка, която да се извърши, когато е един и същ елемент щракна върху. Разбърканото решение на този проблем е да се определи къде възниква тази ситуация и да се комбинира обработката, която трябва да бъде извикана заедно, с функция, която изпълнява цялата обработка.

Докато сблъсъците като този са по-рядко срещани с onclick, отколкото с onload, трябва да идентифицирате сблъсъците предварително и да ги комбинирате заедно не е идеалното решение. Изобщо не е решение, когато реалната обработка, която трябва да бъде прикрепена към елемента, се променя с течение на времето, така че понякога има нещо, което трябва да се направи, друг път, а понякога и двете.

Най-доброто решение е да спрете напълно да използвате обработващ събитията и вместо това да използвате слушател на JavaScript събития (заедно със съответния attachEvent за Jscript - тъй като това е една от онези ситуации, в които JavaScript и JScript различават). Това можем да направим най-лесно, като първо създадем функция addEvent, която ще добави или слушател на събития, или прикачен файл в зависимост от това кой от двата поддържа езика, който се изпълнява;

функция addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); връщане вярно; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Вече можем да прикачим обработката, която искаме да се случи, когато нашият елемент е щракнат при използване:

addEvent (document.getElementById ('spn1'), 'click', dosomething, false);

Използването на този метод за прикачване на кода, който да се обработва, когато елементът е щракнат върху означава, че извършването на друго повикване addEvent за добавяне на друга функция за да бъде стартирането, когато се кликне върху конкретен елемент, няма да замени предишната обработка с новата обработка, но вместо това ще позволи и двете функции да бъдат се изпълнява. Няма нужда да знаем при повикване на addEvent дали вече имаме функция, прикрепена към елемент, който да се стартира при щракване върху него, новата функция ще се изпълнява заедно с и предишните функции приложен.

Ако ни е необходима способността да премахваме функции от това, което се изпълнява, когато елемент е щракнат върху, тогава бихме могли да създадем a съответната функция deleteEvent, която извиква съответната функция за премахване на слушател на събитие или прикачен събитие?

Единственият недостатък на този последен начин за прикачване на обработката е, че тези наистина стари браузъри не поддържат тези сравнително нови начини за прикачване на обработка на събития към уеб страница. Трябва да има достатъчно малко хора, които използват такива старинни браузъри, за да ги пренебрегнат в това, което J (ava) Сценарий, който пишем освен, че пишем кода си по такъв начин, че да не предизвиква огромни грешки съобщения. Горната функция е написана така, че да не прави нищо, ако не се поддържа нито един от начините, които използва. Повечето от тези наистина стари браузъри не поддържат метода getElementById за препратка към HTML или толкова прост ако (! document.getElementById) върне невярно; в горната част на която и да е от вашите функции, които извършват такива повиквания, също би било подходящо. Разбира се, много хора, които пишат JavaScript, не са толкова внимателни към тези, които все още използват антични браузъри и така че тези потребители трябва да свикнат да виждат JavaScript грешки на почти всяка уеб страница, която посещават до този момент.

Кой от тези различни начини използвате, за да прикачите обработка към страницата си, която да се стартира, когато посетителите ви кликнат върху нещо? Ако начинът, по който го правите, е по-близо до примерите в горната част на страницата, отколкото до тези примери в долната част на страницата, тогава може би е така време, когато сте помислили да подобрите начина, по който пишете обработката си onclick, за да използвате един от по-добрите методи, представени по-долу страница.

Като погледнете кода за слушателя на събитията в крос-браузъра, ще забележите, че има четвърти параметър, който нарекохме UCчието използване не е очевидно от предходното описание.

Браузърите имат две различни поръчки, в които могат да обработват събития, когато събитието се задейства. Те могат да работят отвън навътре от

• uC = вярно за обработка по време на фазата на заснемане
• uC = фалшиво за обработка по време на фазата на балон.

Така че, където има няколко други тагове, обвити около този, че събитието е задействано във фазата на заснемане, започва първо, като се започне с най-външния маркер и се премести в към тази, която е задействала събитието и след това, след като етикетът, към който е прикрепено събитието, е обработен, фазата на мехурчета обръща процеса и се връща назад отново.

Internet Explorer и традиционните манипулатори на събития винаги обработват фазата на балончетата и никога фазата на заснемане и затова винаги започват с най-специфичния маркер и работят навън.

Така че с обработващите събития:

хх