Како да одвојите ЈаваСцрипт на својој веб страници

Када први пут напишете нови ЈаваСцрипт, најлакши начин да га подесите је уградити ЈаваСцрипт код директно на веб страницу тако да све буде на једном месту док га тестирате да би функционисало јел тако. Слично томе, ако на своју веб локацију убацујете унапред написану скрипту, упутства могу да вам наложе да уградите делове или читаву скрипту у саму веб страницу.

То је у реду за постављање странице и навођење на њено правилно функционисање, али једном када страница ради онако како ви желите, моћи ћете побољшајте страницу екстрахирањем ЈаваСцрипта у спољну датотеку тако да садржај ваше странице у ХТМЛ-у није толико препун ставки које нису садржане као што су ЈаваСцрипт.

Ако само копирате и користите ЈаваСцриптс написане од других људи, тада су њихова упутства о томе како додати скрипту на вашу страницу можда резултирала тиме да имате један или више великих одељка ЈаваСцрипт је заправо уграђен у вашу веб страницу и њихова упутства не говоре како можете да преместите овај код са своје странице у засебну датотеку и да и даље имате ЈаваСцрипт посао. Не брините се, јер без обзира који код ЈаваСцрипт користите на својој страници, ЈаваСцрипт можете лако преместити ван ваше странице и подесите је као засебну датотеку (или датотеке ако имате више од једног дела ЈаваСцрипт-а уграђеног у страницу). Поступак за то је увек исти и најбоље је илустрован примером.

Погледајмо како може изгледати комад ЈаваСцрипт када је уграђен у вашу страницу. Ваш стварни ЈаваСцрипт код разликоват ће се од приказаног у наредним примерима, али поступак је у сваком случају исти.

Ваш уграђени ЈаваСцрипт треба да изгледа нешто као један од горе наведена три примера. Наравно, ваш стварни ЈаваСцрипт код ће се разликовати од приказаног, али ЈаваСцрипт ће вероватно бити уграђен у страницу користећи једну од горе наведене три методе. У неким случајевима ваш код може употребити застарелу лангуаге = "јавасцрипт" уместо типе = "тект / јавасцрипт" у том случају можда желите да ажурирате свој код за почетак заменом језичког атрибута са типом типа.

Пре него што можете да издвојите ЈаваСцрипт у сопствену датотеку, прво морате да идентификујете код који треба да издвојите. У сва три горе наведена примера, треба издвојити две линије стварног ЈаваСцрипт кода. Ваша скрипта ће вероватно имати много више линија, али може се лако идентификовати јер ће заузимати исто место на вашој страници као две линије ЈаваСцрипт које ми истакла су у горња три примера (сва три примера садрже иста два реда ЈаваСцрипт-а, само је контејнер око њих мало различит).

1. Прво што треба да урадите како бисте уствари издвојили ЈаваСцрипт у засебну датотеку је отварање једноставног уређивача текста и приступ садржају ваше веб странице. Затим морате пронаћи уграђени ЈаваСцрипт који ће бити окружен једном од варијација кода приказаним у горњим примерима.
2. Након лоцирања ЈаваСцрипт кода морате га одабрати и копирати у међуспремник. Горе наведеним примером означава се код који треба да одаберете, не морате да бирате тагове скрипте или факултативне коментаре који се могу појавити око вашег ЈаваСцрипт кода.
3. Отворите другу копију свог једноставног уређивача текста (или неку другу картицу ако ваш уређивач подржава отварање више од једне датотеке истовремено) и пребаците се на ЈаваСцрипт садржај тамо.
4. Изаберите описно име датотеке које ћете користити за нову датотеку и сачувајте нови садржај користећи то име датотеке. С примером кода, сврха скрипте је да се избаци из оквира како би било одговарајуће име фрамебреак.јс.
5. Дакле, сада имамо ЈаваСцрипт у засебној датотеци, враћамо се у уредник где имамо оригинални садржај странице како бисмо тамо унели измене и повезали се са спољном копијом скрипте.
6. Како сада имамо скрипту у засебној датотеци, можемо уклонити све између ознака скрипте у нашем оригиналном садржају тако да таг.
7. Завршни корак је додавање додатног атрибута ознаци скрипте идентифицирајући где може пронаћи спољни ЈаваСцрипт. То радимо помоћу а срц = "име датотеке" атрибут. С нашим примером скрипте одредили бисмо срц = "фрамебреак.јс".
8. Једина компликација у томе је ако смо одлучили да похранимо спољне ЈаваСцрипте у засебну фасциклу од веб страница које их користе. Ако то учините, тада морате да додате путању из мапе веб страница у мапу ЈаваСцрипт испред назива датотеке. На пример, ако се ЈаваСцриптс чувају у а јс директоријум у мапи која садржи наше веб странице које би нам биле потребне срц = "јс / фрамебреак.јс"

Па како изгледа наш код након што смо ЈаваСцрипт одвојили у засебну датотеку? У случају нашег примера ЈаваСцрипт (под претпоставком да су ЈаваСцрипт и ХТМЛ у истој мапи) наш ХТМЛ на веб страници сада гласи:

Такође имамо засебну датотеку која се зове фрамебреак.јс која садржи:

ако (топ.лоцатион! = селф.лоцатион) топ.лоцатион = селф.лоцатион;

Ваше име и садржај датотеке ће се увелико разликовати од оног, јер ћете га издвојити шта год да је ЈаваСцрипт уграђен на вашу веб страницу и датој датотеци је дало описно име на основу чега то јесте. Стварни поступак вађења ће бити исти иако без обзира на то које линије садржи.

Шта је са остала два реда у сваком од примера два и три? Па, сврха ових редака у примјеру два је сакрити ЈаваСцрипт од Нетсцапе 1 и Интернета Екплорер 2, од којих нико више не користи па те линије у првом нису баш потребне место. Постављање кода у спољну датотеку скрива код од прегледача који тагове скрипте не разумеју ефикасније од окружења у ХТМЛ коментару. Трећи пример користи се за КСХТМЛ странице како би се валидаторима рекло да ЈаваСцрипт треба третирати као садржај странице, а не да га валидира. као ХТМЛ (ако користите ХТМЛ доцтипе а не КСХТМЛ, онда валидатор то већ зна и зато те ознаке нису потребно). Са ЈаваСцрипт-ом у засебној датотеци више нема ЈаваСцрипт-а на страници који би прескочили валидатори, тако да ти редови више нису потребни.

Један од најкориснијих начина на који се ЈаваСцрипт може користити за додавање функционалности веб страници је извођење неке врсте обраде као одговор на акцију вашег посетиоца. Најчешћа акција на коју желите да одговорите биће када посетилац кликне на нешто. Позива се организатор догађаја који вам омогућава да реагујете на посетиоце који кликну на нешто онцлицк.

Када већина људи прво помисли на додавање алата за обраду догађаја онцлицк својој веб страници, одмах помисле да га додају у ан таг. То даје део кода који често изгледа као:

Ово је погрешно начин употребе онцлицк-а осим ако у атрибуту хреф имате стварну смислену адресу тако да ће оне без ЈаваСцрипт бити пребачене негде када кликну на линк. Многи људи такође изостављају „ретурн фалсе“ из овог кода и питају се зашто се увек учита врх тренутне странице након што се скрипта покрене (што је оно што хреф = "#" поручује страници да ради, осим ако се не врати лажна фаза од свих руковалаца догађаја. Наравно, ако имате нешто смислено као одредиште везе, можда ћете желети да одете тамо након покретања онцлицк кода и тада вам неће требати „ретурн фалсе“.

Оно што многи људи не схватају је да им се може додати алат за обраду догађаја онцлицк било који ХТМЛ ознака на веб страници ради интеракције када посетилац кликне на тај садржај. Ако желите да се нешто покрене када људи кликну на слику коју можете да користите:

Ако желите покренути нешто када људи кликну на неки текст који можете да употребите:

неки текст

Наравно, они не дају аутоматски визуелни знак да ће доћи до одговора ако ваш посетилац кликне на њих на начин на који веза то чини, али сами визуелни траг можете довољно једноставно додати стилизовањем слике или распона на одговарајући начин.

Друга ствар која се мора приметити код ових начина причвршћивања онцлицк хандлера догађаја је да они не захтевају "ретурн фалсе" јер не постоји задана радња која ће се догодити када се на то кликне елемент онеспособљено.

Ови начини причвршћивања онцлицк-а велико су побољшање за лошу методу коју многи користе, али још је далеко од тога да је најбољи начин њеног кодирања. Један проблем са додавањем онцлицк-а коришћењем било које од горе наведених метода је тај што он и даље меша ваш ЈаваСцрипт са вашим ХТМЛ-ом. онцлицк је не ХТМЛ атрибут, то је ЈаваСцрипт руковалац догађаја. Како бисмо одвојили наш ЈаваСцрипт од нашег ХТМЛ-а да би страница била лакша за одржавање, потребно је да се онцлицк референца из ХТМЛ датотеке пренесе у засебну ЈаваСцрипт датотеку тамо где и припада.

Најлакши начин за то је заменити онцлицк у ХТМЛ-у са ан ид што ће олакшати додавање алата за обраду догађаја на одговарајуће место у ХТМЛ-у. Дакле, наш ХТМЛ можда сада садржи једну од ових изјава:

 неки текст

Затим можемо да кодирамо ЈаваСцрипт у засебну ЈаваСцрипт датотеку која је или повезана у дну тела странице или која се налази у глави странице и где се наш код налази у функцији која се сама зове након што се страница заврши са учитавањем. Наш ЈаваСцрипт да прикачемо обрађиваче догађаја сада изгледа овако:

доцумент.гетЕлементБиИд ('имг1'). онцлицк = досометхинг; доцумент.гетЕлементБиИд ('сп1'). онцлицк = досометхинг;

Једна ствар коју треба напоменути. Примијетићете да смо увијек написали онцлицк у потпуности малим словима. Када кодирате изјаву у њиховом ХТМЛ-у, видећете да је неки људи пишу као онЦлицк. Ово је погрешно јер су имена ЈаваСцрипт обрађивача догађаја мала слова и не постоји такав руковатељ као онЦлицк. Можете се извући ако директно укључите ЈаваСцрипт у своју ХТМЛ ознаку, јер ХТМЛ не разликује велика и мала слова, а претраживач ће га пресликати у тачно име за вас. Не можете побећи са погрешном употребом великих слова у вашем ЈаваСцрипт-у, јер је ЈаваСцрипт осетљив на велика и мала слова, а не постоји у ЈаваСцрипт-у као онЦлицк.

Овај код је велико побољшање у односу на претходне верзије, јер сада обе вежемо догађај на исправан елемент у нашем ХТМЛ-у, а ЈаваСцрипт је потпуно одвојен од ХТМЛ-а. Ипак, можемо још побољшати ово.

Један преостали проблем је што можемо да причврстимо само један онцлицк руковатељ догађајима на одређени елемент. Ако у било којем тренутку требамо на исти елемент прикључити различиту обраду онцлицк догађаја, тада претходно приложена обрада више неће бити везана за тај елемент. Када на своју веб страницу додајете различите скрипте у различите сврхе, постоји најмање један могућност да два или више њих можда желе да обезбеде неку обраду која се изводи када је исти елемент кликнули на. Неуредно решење овог проблема је идентификовати одакле настаје ова ситуација и комбиновати обраду коју је потребно звати заједно са функцијом која обавља сву обраду.

Иако су сукоби с онцлицк-ом рјеђи него код онлоад-а, сукоби морају бити идентифицирани унапријед и комбинирати их није идеално рјешење. То уопште није решење када се стварна обрада која мора бити причвршћена за елемент временом мења, тако да понекад постоји једна ствар коју треба урадити, понекад друга, а понекад и једно и друго.

Најбоље решење је у потпуности престати са кориштењем алата за обраду догађаја и уместо тога користити ЈаваСцрипт слушач догађаја (заједно са одговарајућим аттацхЕвент за Јсцрипт - јер је то једна од оних ситуација у којима су ЈаваСцрипт и ЈСцрипт разликују се). То можемо најлакше урадити тако што ћемо прво створити аддЕвент функцију која ће додати или слушаоца догађаја или прилог у зависности од тога која од два подржава језик који се покреће;

функција аддЕвент (ел, еТипе, фн, уЦ) {иф (ел.аддЕвентЛистенер) {ел.аддЕвентЛистенер (еТипе, фн, уЦ); повратак истинит; } елсе иф (ел.аттацхЕвент) {ретурн ел.аттацхЕвент ('он' + еТипе, фн); } }

Сада можемо приложити обраду за коју желимо да се догоди када се на наш елемент кликне користећи:

аддЕвент (доцумент.гетЕлементБиИд ('спн1'), 'клик', досометхинг, фалсе);

Употреба ове методе додавања кода који се обрађује када се кликне на елемент значи да упућивање другог аддЕвент позива за додавање друге функције за Покретање када се кликне на одређени елемент, неће заменити претходну обраду новом обрадом, већ ће дозволити да обе функције буду трцати. Када позивамо аддЕвент не морамо знати да ли већ имамо неку функцију која је приложена за елемента који ће се покренути када се на њега кликне, нова функција ће се покренути заједно са и раније функцијама у прилогу.

Ако нам треба способност да уклонимо функције из оног што се покрене кад се елемент кликне, могли бисмо створити одговарајућа делетеЕвент функција која позива одговарајућу функцију за уклањање слушатеља догађаја или приложене догађај?

Једини недостатак овог последњег начина привржености обради су они који заиста стари прегледачи не подржавају ове релативно нове начине везаности обраде догађаја на веб страници. До сада би требало бити довољно мало људи који користе тако старинске прегледаче да их они не примете у ономе што Ј (ава) Скрипта коју пишемо осим што шифру пишемо на такав начин да не узрокује велики број грешака поруке. Горња функција написана је тако да не ради ништа ако није подржан ниједан од начина које користи. Већина ових заиста старих прегледача не подржава ни гетЕлементБиИд метод референцирања ХТМЛ-а, па је тако једноставан иф (! доцумент.гетЕлементБиИд) враћа лажно; на врху било које од ваших функција које упућују такве позиве би такође био прикладан. Наравно, многи људи који пишу ЈаваСцрипт нису толико пажљиви према онима који још увек користе античке прегледаче и па се ти корисници морају навикнути да виде грешке ЈаваСцрипта на готово свим веб страницама које до сада посете.

Који од ових различитих начина користите за додавање обраде на вашу страницу како би се покренуо када посетиоци кликну на нешто? Ако је начин на који то радите ближи примерима на врху странице, него примерима на дну странице, можда је то тако времена када сте размишљали о побољшању начина на који пишете обраду онцлицк-а да бисте користили један од бољих метода представљених ниже на страна.

Гледајући код слушаоца догађаја више претраживача, приметићете да постоји четврти параметар који смо позвали уЦчија употреба није очигледна из претходног описа.

Прегледници имају два различита налога у којима могу обрађивати догађаје када се догађај покрене. Они могу радити споља, према унутра

• уЦ = тачно за обраду током фазе снимања
• уЦ = лажно се обрађује током фазе мехурића.

Дакле, тамо где је неколико других тагова омотаних око оне да је догађај покренут у фази хватања, покреће се прво почевши од најудаљеније ознаке и премештајући се у према ономе који је покренуо догађај, а затим када се обради тага за коју је догађај везан, фаза мехурића преокреће процес и врати се назад опет.

Интернет Екплорер и традиционални руковаоци догађаја увек обрађују фазу облачења, а никада фазу хватања, па увек почињу са најконкретнијом ознаком и раде напољу.

Па са руководиоцима догађаја:

кк