JavaScript
Јаваскрипт или Џаваскрипт (енгл. JavaScript) је динамичан, слабо типизиран и интерпретиран програмски језик високог нивоа. Стандардизован је по ЕКМАСкрипт спецификацији језика. Поред HTML-а и CSS-а, Јаваскрипт је једна од три водеће технологије за дефинисање садржаја на Вебу; већина веб-сајтова користи Јаваскрипт а сви модерни веб-читачи га подржавају без потребе за инсталирањем додатака. Комбинован са HTML језиком и CSS-om Јаваскрипт чини DHTML (Dynamic HTML).[3] Јаваскрипт је језик заснован на прототиповима са функцијама првог реда, што га чини језиком вишеструке парадигме који подржава објектно-оријентисани,[4] императивни и функционални начин програмирања. Садржи АПИ за рад са текстом, низовима, датумима и регуларним изразима, али не и улазно/излазне функционалности, као што су повезивање, складиштење података или графичке функционалности, за шта се ослања на окружење у коме се извршава. Иако се на први поглед може рећи да Јаваскрипт има одређене сличности са програмским језиком Јава, као што су назив, синтакса и стандардне библиотеке, они су два потпуно различита програмска језика која се значајно разликују у свом дизајну. На програмски језик Јаваскрипт највише су утицали језици као што су Селф и Scheme.[5] Јаваскрипт се поред Веба користи и у другим окружењима, као што су PDF документи, Веб-читачи за специфичне веб-сајтове (енгл. site-specific browsers) и десктоп виџети (енгл. widget). Нове и знатно брже Јаваскрипт виртуелне машине и платформе засноване на њима, популаризовале су Јаваскрипт за израду веб апликација на серверској страни. На клијентској страни, програмери најчешће имплементирају Јаваскрипт као интерпретирани језик, али све више новијих веб-читача обавља just-in-time компајлирање. Јаваскрипт се још користи и за развој видео игара, десктоп и мобилних апликација као и у мрежном програмирању на серверској страни са извршним окружењима као што је Node.js. ЈС припада ОО парадигми, јер програмер не дефинише само тип података, него и врсту операција (функција) које се могу применити на структуре података. На овај начин, структура података постаје објекат који укључује и податке и функције. Поред тога, програмери могу да праве односе између једног и другог објекта. На пример, објекти могу да наследе карактеристике од других објеката.[3] Скриптни је језик, јер се састоји од серије команди које се очитавају у интерпретеру, а да се претходно не компајлира садржај. Односно не преводи се у машински језик, него се команде директно „читају” из кода (изворног кода или бајтовског кода). Због ове карактеристике ЈаваСцрипт се извршава на страни корисника (client side), тј. на рачунару на којем је покренут садржај са Јаваскриптом. Сам по себи, HTML дозвољава посетиоцу да пошаље податке ка серверу на обраду. Нажалост, ако ти подаци нису валидни цео процес се мора поновити све док се не унесу валидни подаци. Ово је један од основних разлога настанка Јаваскрипта који проверава веродостојност података на клијентовом прегледачу и тако олакшава посао на вебу.[3] Јаваскрипт је најпопуларнији скриптни језик на Интернету којег подржавају сви познатији прегледачи (Internet Explorer, Mozilla Firefox, Netscape, Opera, Safari). Неке примене ЈС су:
ИсторијатПочеци у НетскејпуГодине 1993, Национални центар за суперкомпјутерске апликације (енгл. National Center for Supercomputing Applications - NCSA), који је део Универзитета у Илиноису, објавио је Мозаик, први популарни графички веб-читач, који је одиграо значајну улогу у развоју Веба који је у то време био на самом зачетку. 1994. године у Маунтин Вјуу, у Калифорнији, основана је компанија под називом Мозаик Комјуникејшн, која је запослила већину аутора оригиналног веб-читача Мозаик како би развили Мозаик Нетскејп. Касније ће се испоставити да овај веб-читач неће имати никакве сличности са оригиналним Мозаиком. Интерни назив за овај веб-читач био је "Мозила", што је значило "убица Мозаика" енгл. Mosaic killer, јер је циљ компаније био да замени Мозаик као најпопуларнији веб-читач на свету. Прва верзија веб-читача, Мозаик Нетскејп 0.9, објављена је крајем 1994. године. За само четири месеца овај веб-читач је већ заузео три четвртине тржишта веб-читача и постао је најпопуларнији веб-читач деведесетих година 20. века. Како би избегли проблеме са ауторским правима са НЦСА, веб-читач је исте године добио нов назив, Нетскејп навигатор, a компанија Нетскејп Комјуникејшн. У овој компанији су на време схватили да би Веб требало да постане динамичнији. Оснивач компаније, Марк Андресен, тврдио је да HTML-у треба пратећи језик који веб дизајнери и програмери могу лако да користе за склапање компоненти као што су слике и додаци, чији би се код писао директно у HTML коду веб странице. Како би уопште започели са радом, компанија Нетскејп Комјуникејшн је морала да сарађује са компанијом Сан Мајкросистемс да би у овај веб-читач уградили њихов статични програмски језик Јаву и тиме се борили са конкурентском компанијом Мајкрософт за већу наклоност корисника и усвајање веб технологија и платформи.[6] Одлучено је да се креира програмски језик комплементаран Јави, са сличном синтаксом, што је у старту значило одбацивање подршке за друге програмске језике као што су Перл, Пајтон, TCL или Scheme. Како би одбранили идеју Јаваскрипта у односу на понуду конкурената, компаније је био потребан прототип. Ајк је написао прототип будућег програмског језика за 10 дана, у мају 1995. године. Иако је развијан под кодним називом Мока, језик је званично назван Лајвскрипт приликом првог објављивања бета верзија Нетскејп навигатора 2.0, септембра 1995. године, али је убрзо преименован у Јаваскрипт[1] са објављивањем Нетскејп навигатора 2.0 бета 3 верзије, у децембру исте године.[7] Коначан избор имена је изазвао конфузију код корисника јер је створен утисак да је ово још једна варијанта програмског језика Јава, а сам избор имена је окарактерисан као маркетиншки трик Нетскејпа како би се Јаваскрипт представио као најновији веб програмски језик. Често се јавља погрешно тумачење да је на развој Јаваскрипта битно утицао веб скриптни језик Ц-- развијен од стране компаније Номбас (овај скриптни језик не треба мешати са касније развијеним језиком Ц--, 1997. године]).[8][9] У прилог томе иде и чињеница да Брендан Ајк није никад чуо за Ц-- пре него што је креирао ЛајвСкрипт.[10] Номбас је обезбеђивао уграђене скриптне веб странице Нетскејпу, иако концепт скриптних веб страница није био нов, као што се може видети у веб-читачу ViolaWWW.[11] Касније је компанија Номбас одлучила да у свом производу СкриптИз, Ц-- замени Јаваскриптом и учествовала је у стандардизацији ЕКМАСкрипта кроз ТЦ39 групу.[12] Јаваскрипт на серверској страниУ децембру 1995. године, убрзо након објављивања Јаваскрипта за веб-читаче, компанија Нетскејп је представила и имплементацију овог језика за сервере кроз Нетскејп ентерпрајз сервер (енгл. Netscape Enterprise Server). Од средине 2000-их, објављено је неколико серверских Јаваскрипт имплементација, међу којима најпознатији Node.js (2009. године).[13] Прихватање Јаваскрипта од стране МајкрософтаМајкрософт је 1996. године представио своје скриптне језике, ВБСкрипт и ЈСкрипт. ЈСкрипт, обрнута имплементација Нетскејповог Јаваскрипта, била је део Интернет Експлорера 3. ЈСкрипт је такође био доступан и као серверска имплементација скриптног језика у Интернет Информационом Серверу. Интернет Експлорер 3 је по први пут донео подршку за CSS и различите HTML додатке, али се водило рачуна о томе да свака имплементација буде значајно различита од оне у Нетскејп навигатору.[14][15] Ове разлике су отежавале дизајнерима и програмерима да праве веб-сајтове који би функционисали у оба веб-читача, што је довело до појаве логоа "најбољи приказ у Нетскејпу" и "најбољи приказ у Интернет Експлореру" који су обележили почетне године борбе међу веб-читачима.[16] Јаваскрипт је почео да стиче репутацију препреке вишеплатформском и стандардизованом Вебу. Програмери су се прихватили задатка да покушају да праве веб-сајтове који ће радити у оба најпознатија веб-читача иако већина није имала времена за то.[14] Објавом Интернет Експлорера 4, Мајкрософт је представио концепт динамичког HTML-а, али су разлике у имплементацији језика и различити власнички објектни модели докумената представљали препреке за ширу примену Јаваскрипта на Вебу.[14] Стандардизација![]() У новембру 1996. године, Нетскејп је стандардизовао Јаваскрипт како би остале компаније које развијају веб-читаче могле да га имплементирају у својим производима. То је довело до званичног објављивања спецификације језика ЕКМАСкрипт која је објављена у првој верзији ЕКМА-262 стандарда у јуну 1997. године, чија је најпознатија имплементација управо Јаваскрипт. ЕкшнСкрипт и ЈСкрипт су такође познате имплементације ЕКМАСкрипта са додацима. Процес стандардизације је настављен у циклусима, објављивањем ЕКМАСкрипта 2 у јуну 1998. године, који доноси одређене промене како би се прилагодио ISO/IEC 16262 међународном стандарду. Са објављивањем је настављено у децембру 1999. године са ЕКМАСкриптом 3, који представља основу за Јаваскрипт какав данас знамо. Развој оригиналног ЕКМАСкрипта 4, који је водио Валдемар Хорват (тада запослени у Нетскејпу, данас у Гуглу), почео је 2000. године и на самом почетку је изгледало као да Мајкрософт учествује у томе па је чак и имплементирао неке карактеристике у њихов ЈСкрипт .НЕТ језик. Временом је било јасно да Мајкрософт не намерава да сарађује нити да имплементира Јаваскрипт у ИнтернетЕксплореру, иако нису имали достојну алтернативу већ само парцијално завршену имплементацију .НЕТ серверске стране. Због тога је до 2003. године развој ЕКМАСкрипта 4 био запостављен. Следећа битна година за Јаваскрипт била је 2005, коју су обележила два велика историјска догађаја битна за развој Јаваскрипта. Прво су се Брендан Ајк и Мозила придружили ЕКМА Интернашонал као непрофитни чланови и започет је рад на ЕКМАСкрипту за XML (E4X), ЕКМА-357 стандарду, који је потекао од Мајкрософтових бивших запослених који су сад радили за БЕА Системс. То је довело до заједничког рада са компанијом Макромедија (коју је касније купио Адоби Системс), који су применили E4X у свом ЕкшнСкрипту 3 (ЕкшнСкрипт 3 је био форк оригиналног ЕКМАСкрипта 4). Заједно са Макромедијом поново је отпочет развој ЕКМАСкрипта 4 са циљем стандардизације компоненти из ЕкшнСкрипта 3. На крају овог процеса, Адоби Системс је објавио ЕкшнСкрипт виртуелну машину верзије 2, кодног назива Тамарин, као пројекат отвореног кода. Међутим, Тамарин и ЕкшнСкрипт 3 су били значајно различити од онога чему Јаваскрипт тежи, што су обе стране увиделе током 2007. и 2008. године. На тржишту је владао хаос међу различитим играчима. Даглас Крокфорд, тада запослени у Јаху-у, удружио се са Мајкрософтом 2007. године како би се супротставио ЕКМАСкрипт 4 стандарду, што је довело до развоја ЕКМАСкрипт 3.1 стандарда. Иако развој ЕКМАСкрипт 4 стандарда никад није довршен, он је битно утицао на наредне верзије.[17] Док се све ово дешавало, заједнице отвореног кода и програмера су наставиле на развоју револуционарних могућности са Јаваскриптом. Напор заједнице је добио замајац 2005. године када је Џеси Џејмс Гарет осмислио концепт Ајакса и описао скуп технологија, где је ослонац био на Јаваскрипту, које се користе за креирање веб апликација код којих се подаци могу учитавати у позадини, без потребе да се цела страница учита, што је довело до развоја још динамичнијих апликација. Све ово је довело до периода препорода у коришћењу Јаваскрипта, предвођеног библиотекама отвореног кода и заједницама које су се формирале око њих, са библиотекама као што су Прототајп, џејКвери, Доџо Тулкит, МуТулс и друге. У јулу 2008. године, раздвојене стране су се састале у Ослу. То је довело до евентуалног договора почетком 2009. године, да се ЕКМАСкрипт 3.1 стандард преименује у ЕКМАСкрипт 5 и да се језик унапреди пратећи агенду познатију као Хармони (енгл. Harmony). ЕКМАСкрипт 5 је коначно објављен у децембру 2009. године. У јуну 2011. године, ЕКМАСкрипт 5.1 је објављен како би се у потпуности изједначио са трећим издањем ISO/IEC 16262 међународног стандарда. ЕКМАСкрипт 2015 је објављен у јуну 2015. године. Тренутна верзија ЕКМАСкрипт 2016 је објављена у јуну 2016. године.[18] Каснији развојЈаваскрипт је постао један од најпопуларнијих програмских језика на Вебу. Међутим, на самом почетку језик није био на добром гласу међу програмерима професионалцима, због тога што су му, између осталог, циљна публика били веб аутори и остали "аматери".[19] Са појавом Ајакса Јаваскрипт се враћа у центар пажње и постаје атрактиван за све више програмера. Резултат тога је умножавање обимних фрејмворка и библиотека, побољшана Јаваскрипт рутина програмирања и повећано коришћење Јаваскрипта изван веб-читача, што је у директној корелацији са значајним развојем серверских Јаваскрипт платформи. У јануару 2009. године, представљен је пројекат КомонЈС (енгл. CommonJS) са циљем стандардизације заједничких библиотека, углавном за Јаваскрипт развој изван веб-читача.[20] Са порастом једностраничних апликација и напредних Јаваскрипт сајтова, повећано је његово коришћење од стране компајлера како за динамичке тако и за статичке програмске језике. Заштитни знак![]() "Јаваскрипт" је заштитни знак Оракл корпорације.[21] Користи се под лиценцом за технологију коју је осмислила и имплементирала компанија Нетскејп Комјуникејшн и њени наследници као што је Мозила фондација.[22] КарактеристикеНаведене карактеристике су заједничке за све ЕКМАСкрипт имплементације, осим ако није експлицитно другачије наведено. Универзална подршкаСви модерни веб читачи подржавају Јаваскрипт са уграђеним интерпретерима. Императивни и структурираниЈаваскрипт подржава већи део структуриране синтаксе програмског језика C (нпр. Динамични
Прототипни (објектно-оријентисани)Јаваскрипт је скоро у потпуности објектно заснован скриптни језик. У Јаваскрипту, објекат представља асоцијативни низ, наглашен помоћу прототипа; сваки кључ у облику низа карактера представља назив својства објекта за који постоји два синтаксна начин за дефинисање таквог назива; нотација са тачком, енгл. dot notation (
ФункционалниФункција је прве класе и може се третирати као објекат. Као таква, функција може да садржи својства и методе, као што је ДелегираниЈаваскрипт подржава имплицитно и експлицитно делегирање.
Остале карактеристике
Специфични додаци произвођачаРазвојем ЈаваСкрипт програмског језика управља Мозила Фондација, док се нове функционалности периодично додају језику. Међутим, само одређени покретачи ЈаваСкрипт-а подржавају ове нове функционалности:
Ванила ЈаваскриптПојам Ванила Јаваскрипт или Ванила ЈС се односи на Јаваскрипт који није проширен неким фрејмворком или додатним библиотекама. Скрипт написан Ванила Јаваскриптом је чист Јаваскрипт код. Структуре податакаПримитивни типовиБројеви: све вредности су представљене као реални бројеви (64 бита, IEEE 754 стандард). У случају прекорачења (overflow) генерише се +/- Infinity.[41] У случају поткорачења (underflow) генерише се 0/ "negative zero". Дељење нулом не резултира грешком осим у случају 0/0 – тада се генерише NaN. Infinity и NaN су глобалне променљиве које се могу само читати. Стрингови су непроменљиве секвенце 16-битних вредности, углавном Уникодних карактера и морају бити под двоструким или једноструким наводницима ("string", '123str45', "vise reci", ...). Такође, битно је запамтити да индекси крећу од нуле, а не од јединице.[41] Стринг може садржати и HTML кодове, као и следеће специјалне текст ознаке:
Логички (булов) тип: true/false. Специјалне вредностиnull - представља недостајућу вредност (језичка кључна реч);[41] ОбјектиОбјекти су све преостало, односно, неуређена колекција именованих вредности (својстава). Они су динамичке природе и за разлику од примитивних типова преносе се по референци, а не по вредности. Сваки пут када се интерпретер покрене или се учита нова страна у прегледачу, креира се нешто што се зове глобални објекат и на нивоу њега се дефинишу и иницијализују својства типа undefined, NaN, глобалне функције типа isNaN(), parseInt(), конструктори као што су Date(), Array(), String(),..., глобални објекти ко што су Math, JSON,... Резервисана реч којом се у глобалном опсегу може реферисати на овај објекат је this. На нивоу прегледача то је Виндоус објекат који се може реферисати са window.[41] Неки битнији објекти су:[41]
ФункцијеУ програмирању се често долази у ситуацију у којој се део програма понавља на више различитих места. Постоји потреба да се тај део програма издвоји и да се позива по потреби. То се остварује помоћу функција. Функције представљају потпрограме који углавном враћају резултат неког израчунавања. Враћање резултата није обавезно.[42] Да би се користила функција, она се мора декларисати. Декларација обавезно садржи кључну реч function. После ње се може навести назив функције, а онда обавезно заграде унутар којих се може навести листа формалних аргумената. Коначно, обавезно се наводе витичасте заграде унутар којих се може навести тело функције, односно њене наредбе.[42] function nazivFunkcije(formalni parametri){
...naredbe unutar funkcije
return rezultat;
}
Минимална декларација функције би била:[42] function() {}
Наредбе унутар функције се не извршавају док се функција не позове. Позив функције се обавља једноставно навођењем назива функције и, обавезно, заграда унутар којих се може навести листа аргумената.[42] nazivFunkcije(stvarni parametri)
Параметри функцијеПриликом декларације функције може се навести листа параметара. Листа параметара је обично списак променљивих. function zbir(a, b){
var rezultat = a + b;
}
У наведеном примеру a и b су локалне променљиве у функцији. Функција узима прослеђене параметре, у овом случају два броја и враћа њихов збир. Функција као параметар може узимати неке вредности или референце на објекте. У програму могу несметано постојати истоимене променљиве докле год су у различитом локалном опсегу.[42] Формални параметри су они који се наводе у декларацији функције и који се користе када се пише тело функције. Стварни аргумент су конкретне вредности које се наводе. При позиву функције битно је да параметри имају вредности. zbir(5, 2);
zbir(x, y*4);
У класичном програмирању важи да се стварни и формални параметри морају поклопити по броју, типу и редоследу. Јаваскрипт дозвољава одступање од овог правила. То значи да је дозвољено да се наведе више стварних аргумената него што је предвиђено (вредности вишкова се игноришу), или да их има мање (у функцији ће недостајући параметри имати вредност undefined). Пошто Јаваскрипт није строго типизиран језик, не постоји начин да се програмер натера да користи тачно одређене типове при позиву функције. То што је оваква пракса дозвољена не значи да је пожељна.[42] Вредност функцијеУнутар функције се на једном или више места може навести наредба return, после које се наводи вредност која се враћа као резултат функције. Важно је нагласити да чим се у извршавању функције наиђе на наредбу return, функција прекида све и остале наредбе ће бити игнорисане.[42] function zbir(a, b){
var rezultat = a + b;
return rezultat;
}
Вредност функције се може користити унутар израза. var p = zbir(a-10, zbir(c*2,b)/2);
Пример функције која рачуна квадрат броја function kvadratBroja(x){
return x*x;
}
---
x = kvadratBroja(5); /* poziv funkcije */
document.write("Kvadrat od 5 je " + x); //u HTML dokumentu ispisuje vrednost
---
Kvadrat od 5 je 25
НизовиЈаваскрипт Array објекат је глобални објекат који се користи као конструктор за креирање низова.[43] //kreiranje niza
var niz=[1, 2, 3, "Soldier of fortune"];
//ili
var novi_niz=new Array(4, 5, "I can't make you love me");
var n=niz.length; // u promenljivu n upisujemo dužinu niza
var prvi=niz[0]; // prvi sadrži 1, tj. prvi element niza
var poslednji=niz[niz.length-1]; //poslednji sadrži "Soldier of fortune", tj. poslednji element niza
//for je kolekcijski
niz.forEach(function (item index array)){
console.log(item, index);
});
/*1 0
2 1
3 2
"Soldier of fortune" 3*/
//dodavanje elementa na kraj niza
var kraj=niz.push("Tears in heaven"); // niz: [1, 2, 3, "Soldier of fortune", "Tears in heaven"]
//brisanje elementa sa kraja niza
var poslednji=niz1.pop(); //niz: [1, 2, 3, "Soldier of fortune"]
//brisanje elementa sa pocetka niza
var prvi=niz1.shift(); //niz: [2, 3, "Soldier of fortune"]
//dodavanje na početak niza
var novi_niz=niz1.unshift("Wish you were here"); //niz: ["Wish you were here", 2, 3, "Soldier of fortune"]
//pronalaženje pozicije na kojoj se element nalazi
var pozicija=niz1.indexOf(2); //1
//brisanje elementa koji se nalazi na zadatoj poziciji
var niz1_bez_dvojke=niz1.splice(pos, 1); //niz: ["Wish you were here", 3, "Soldier of fortune"]
//pravljenje kopije niza
var kopija=niz1.slice();
//kreiranje višedimenzionih nizova
var visedimenzioni_niz=[
["Ali", "sreca", "je", "uvek", "bila", "tamo"],
["gde", "je", "neko", "umeo", "da", "voli"],
["i", "ziveo", "za", "svoja", "osecanja"]];
//pristupanje elementima
var element=visedimenzioni_niz[1][5]; //"voli"
var prvi_element=visedimenzioni_niz[0]; //["Ali", "sreca", "je", "uvek", "bila", "tamo"]
//primer
var vrednost=[];
for (x=0; x<10; x++){
vrednost.push([2**x, 2*x**2])
};
console.table(vrednost.join('\n'));
/*"0,0
1,2
4,8
9,18
16,32
25,50
36,72
49,98
64,128
81,162"*/
Синтакса:
Неки најчешће коришћени методи:[43]
ДатумDate методи омогућавају враћање и постављање вредности датума (године, месеце, дане, сате, минуте, секунде и милисекунде).[44] Гет методе
Пример getDay() методе <script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();
</script>
Сет методе
Пример setFullYear() методе <script>
var d = new Date();
d.setFullYear(2020, 0, 14);
document.getElementById("demo").innerHTML = d;
</script>
RegExpRegExp конструктор креира објекат типа регуларни израз за одговарајући патерн.[45] Синтакса литерала и конструктора: /pattern/flags
//kreiranje regularnog izraza
/ab+c/i;
new RegExp('ab+c', 'i');
new RegExp(/ab+c/, 'i');
var re='/\w+';
var re=new RegExp("\\w+");
ГрешкеСваки од прегледача има свој подразумевани начин реаговања на грешке, нпр. Фајерфокс и Кроум уписују грешке у лог датотеку, док рецимо Интернет Експлорер и Опера генеришу обавештења за корисника. Због удобности рада корисника потребни су механизми који би омогућили руковање с грешкама.[46] Грешке се могу обрађивати у оквиру try-catch блока: овакве грешке прегледачи сматрају примећеним па не реагују на њих. try{
...
}catch(error){
...
}
Типови грешака који могу да се јаве:
нпр. a=x;, док x не постоји
decodeURI() - инверзна функција функцији encodeURI() Грешке се генеришу са throw. function test(x){
if(typeof x != "number")
throw new TypeError(...);
if(x<conditions.MIN_VALUE || x>conditions.MAX_VALUE)
throw new RangeError(...);
return true;
}
Са instanceof се може утврдити којег је типа грешка која се појавила и у складу са тим предузети одговарајући скуп акција.[46] try{
var="abc"
test(x)
}catch(error){
if(error instanceof TypeError){
.....
}
else
if(error instanceof RangeError){
.....
}
else{
console.log(error.message)
}
}
Могу се креирати и властити објекти који наслеђују класу Error[46] function myError(message){
this.message=message;
this.name="myError";
}
myError.prototype=new Error();
У коду ...throw new myError("my message"); Уписивање у централизовани лог систем (на страни сервера): сваки пут када се грешка јави може се генерисати AJAX позив који садржи тип грешке и позив грешке; тако се лакше може пратити понашање апликације на страни клијената.[46] //image pings tj. slanje zahteva preko img objekta
function logerror(type,message){
var img=new Image();
img src="log.php?type="+encodeURIComponent(type)+"&message="+encodeURIComponent(message);
}
u kodu
...
catch(error){
if(error instanceof SyntaxError){
logerror("syntax","Description:"+error.message);
}
...
}
Image pings је једносмерни вид комуникације између клијента и сервера који заобилази правило истог порекла (може се комуницирати између разнородних домена).
STRICT MODE[46]
СинтаксаУ овом делу се разматрају најосновније ствари без којих је немогуће било шта креирати везано за Јаваскрипт. Ту се пре свега мисли на Јаваскрипт синтаксу, типове променљивих, операторе итд. Унос ЈС кода у HTML документПостоје две могућности: писањем директно у HTML код или смештањем у посебан фајл (екстензија .js) који се потом позива у HTML документу. Оба начина су правилна и не постоји разлика у раду скрипта. Позивање спољашњег фајла је добро у случајевима када се једна иста скрипта користи у више страница.[47] Браузер чита HTML страницу и приказује елементе онако како они наилазе. Када наиђе на скрипт у страници, обавља се његово извршавање пре него што се настави читање осталих елемената (текст, слике...).[47]
Јаваскрипт писан у HTML документу: <html>
<body>
<script type="text/javascript">
document.write("Ovo je moj prvi JavaScript!");
</script>
</body>
</html>
Јаваскрипт позван из посебног фајла: <script type="text/javascript" src="/js/ime_skripta.js"></script>
Постоје различити начини позивања Јаваскрипт кода, тј. различита места где се он може сместити у страници. Први начин је да се Јаваскрипт код стави у <head> секцији, док је други начин смештање унутар <body> секције документа. Код првог начина скрипта се учитава одмах, још пре учитавања читаве странице, док се код другог начина скрипта извршава чим браузер наиђе на њу. Могуће је поставити неограничен број скрипти у страници, било да се ради о првом или другом случају.[47] КоментариКоментари се користе ради лакшег сналажења у коду, и као подсетници. То је начин за остављање напомена током програмирања, чиме се олакшава рад на коду.[47] Разликујемо два типа коментара:
//ovo je komentar
/*ovo je dugačak višelinijski
JavaScript komentar*/
ПроменљивеЈаваскрипт као и остали програмски језици, користи променљиве да би запамтио вредности, тако да се оне касније могу користити у другим деловима програма. Имена променљивих могу да почињу великим словима (A - Z), малим словима (a - z), или доњом цртом (_). Преостали карактери могу да се састоје од малих и великих слова, доње црте, или цифара од 0 до 9. Такође, битно је напоменути да Јаваскрипт разликује мала и велика слова. Јаваскрипт за разлику од неких других програмских језика не захтева специфицирање типа вредности променљиве, он то чак и не дозвољава. Иста променљива може да се користи за смештање различитих типова вредности у њој, као што су стрингови, цели бројеви, реални бројеви (3.14) или логичке вредности. Јаваскрипт интерпретатор аутоматски конвертује тип података који се налази у променљивој. Стрингови се морају наводити под наводницима, док остали типови то не захтевају.[48] За декларисање променљивих користи се кључна реч var:[47] var ceo_broj=3;
var realan_broj=3.14;
var string="Hello world";
var logicka_promenljiva=true;
Могуће је декларисати и празну променљиву. var x;
Постоје две врсте променљивих:
Ако се променљива декларише у оквиру неке функције без кључне речи вар, сматра се да је та променљива глобална, тј. видљива је у целом коду.[47] function primer1(){
a=1;
}
var b=a+2;
Дакле, a је глобална и могуће јој је приступити. var a=1;
function primer2(){
var b=a+2;
}
И у овом примеру је могуће приступити променљивој a јер је глобална. Међутим, у следећем примеру то неће бити могуће, јер се а сматра локалном променљивом. function primer3(){
var a=1;
}
var b=a+2;
ОператориОператори у Јаваскрипту представљају симболе, који означавају одређену операцију или релацију и које повезују један или више операнада у један израз (аритметички, логички...). За целобројне типове те операције укључују аритметичке, релацијске и логичке операције. Подржани су и операције које се примењују над појединачним битовима целобројних вредности. Оператори се деле на основу своје парности тј. броја операнада на које се примењују. Унарни оператори делују само на један операнд и могу бити префиксни када се наводе испред операнда и постфиксни када се наводе након операнда. Бинарни операнди имају два операнда и обично су инфиксни тј. наводе се између својих операнада. Постоји и тернарни оператор који се примењује на три операнда. Приоритет и асоцијативност оператораИзрази могу да обухватају више оператора и заграде и користе се да би одредиле којим редоследом их треба примењивати. Постоје конвенције које омогућавају изостављање заграда. Једна од основних таквих конвенција је приоритет оператора који дефинише којим редоследом ће се два различита оператора примењивати када се нађу у истом, незаграђеном изразу. Наки од основних принципа у дефинисању приоритета:
Друга важна конвенција је асоцијативност оператора која дефинише којим редоследом ће се израчунавати два иста оператора или оператора истог приоритета када се нађу узастопно у истом, незаграђеном изразу. Обично се разликују лева асоцијативност, када се израз израчунава слева надесно, и десна асоцијативност, када се израз израчунава здесна налево. Већина оператора има леву асоцијативност (најзначајнији изузеци су префиксни унарни оператори и оператори доделе). Аритметички операториАритметички оператори се користе за извршавање аритметичких операција. Аритметички оператори имају већи приоритет од релацијских (оператори поређења), који имају већи приоритет од логичких оператора.[49]
Унарни + је еквивалентан позиву Number() конструктора, тј. претвара свој операнд у бројни тип. Унарни - ради исто то и након тога негира вредност. Унарни - се углавном користи када желимо да користимо негативне бројеве. Бинарни + се може користити и за конкатенацију стрингова. 1 + 2 // rezultat: 3
true + 1 // rezultat: 2
false + false // rezultat: 0
5 + "foo" // rezultat: "5foo"
false + " hope"// rezultat: "false hope"
"Wonderful" + " tonight" // "Wonderful tonight"
Оператор инкрементирања повећава вредност операнда за 1, а декрементирања смањује за 1. Ови оператори могу бити префиксни и постфиксни. Префиксни оператор инкрементирања увећа вредност операнда и врати је, а постфиксни оператор инкрементирања прво врати вредност операнда, па је тек онда увећа. Слично је и са декрементирањем. var a=3
document.write(++a) //postavlja a na 4 i upisuje 4
var b=3
document.write(b++) //upisuje 3 i postavlja b na 4
document.write(b) //upisuje 4
document.write(--a) //postavlja a na 3 i upisuje 3
document.write(b--) //upisuje 4 i postavlja b na 3
document.write(b) //upisuje 3
Степеновање 2**2 //rezultat: 4
(-2)**2 //rezultat: 4
2**3 //rezultat: 8
2**3**2 //rezultat: 512
2**(3**2) //rezultat: 512
(2**3)**2 //rezultat: 64
10**-1 //rezultat: 0.1
3**2.5 //rezultat: 15.588457268119896
Оператор доделеВредности променљивама додељују се коришћењем оператора доделе. Најчешћи оператор додељивања је знак једнако “=”. Оператор доделе може се писати заједно са бинарним аритметичким операторима.[50]
Оператори поређењаОператори поређења упоређују вредности две променљиве или израза. Сваки израз у коме се користе оператори поређења има логичку вредност: ако је израз тачан, има логичку вредност True, а ако је нетачан логичку вредност False.[51]
5==8 //vraca false
Za vrednosti promenljivih x=5, y="5" vršimo sledeća poređenja:
x==y //vraća true
x===y //vraća false
5!=8 //vraća true
5>8 //vraća false
5<8 //vraća true
5>=8 //vraća false
5<=8 //vraća true
Логички операториЛогички оператори примењују се над истинитосним вредностима, које се представљају коришћењем бројевних вредности. Уколико је број једнак 0, онда је његова логичка вредност једнака 0 (нетачно), а иначе је његова логичка вредност једнака 1 (тачно). Резултат израчунавања тачно није произвољна вредност различита од нула, већ искључиво један. Постоје следећи логички оператори:[52]
x=6,y=3
(x<10 && y>1) //je true
(x === 5 || y === 5) //je false
!(x == y) //je true
Условни операторУсловни оператор испитује да ли је услов испуњен (вредност true), ако јесте додељује вредност након упитника, у супротном додељује вредност након двотачке.[53] poruka = (email == "Da") ? "Primio si poštu." : "Nema pošte.";
Уколико је вредност променљиве email једнака “Да” додељујемо променљивој порука вредност “Примио си пошту.”, у супротном додељујемо јој вредност “Нема поште.”. Битовски операториБитовски оператори се користе за рад са појединачним битовима (1 и 0), који се могу примењивати само на целобројне аргументе.[54]
Унарни оператор ~ има највећи приоритет и десно асоцијативан је. Приоритет оператора померања је највећи од свих бинарних битовских оператора. Након тога следи & који има већи приоритет од ^ који има већи приоритет од |. Ови оператори имају леву асоцијативност.[54] x=5 & 1 // 5&1=(0101)&(0001)=(0001) pa je razultat 1
x=5|1 // 5|1=(0101)|(0001)=(0101) pa je razultat 5
x=~5 // 5=0101 bitovski ~5=1010 sto je 10
x=5^1 // (0101)^(0001)=(0100) pa je rezultat 4
x=5 << 1 // 5=0101 a kada 5 siftujemo za jedan ulevo dobijamo 1010 sto je 10
x=5 >> 1 // 5=0101 a kada 5 siftujemo za jedan udesno dobijamo 0010 sto je 2
Једноставнији примериПроменљиве се у Јаваскрипту дефинишу са кључном речи var.[55] var x; // дефиниција променљиве x. Почетна вредност ове променљиве је недефинисана (eng. undefined).
var y = 2; // дефиниција променљиве у и додела вредности 2.
Коментари се у Јаваскрипт-у пишу на следећи на следећи начин. // кратак коментар у једној линији.
/*
Дугачак, документацијски коментар.
Написан у више линија.
*/
/*Коментар /* не сме бити угњежден. */Ово је синтаксна грешка*/
За испис текста на екрану, користи се објекат console. У примеру је дато исписивање текста Здраво Свете. console.log("Zdravo Svete.");
Искази if, else и else if // if исказ се користи ради активирања одређених наредби ако је одређени услов задовољен.
function funkcija4(){
var boja = prompt("Koju boju najviše voliš?")
if (boja == "rozu") {
alert("Verovatno si žensko");
}
}
// else исказ се извршава онда када if услов није задовољен.
function funkcija2() {
var broj = prompt("Unesite bilo koji broj!")
if (broj <= 10) {
alert("Uneli ste broj manji od 10");
}
else alert("Uneli ste broj veći od 10")
}
// else if исказ је веома користан јер дозвољава да се наведе више од једног услова.
var visitor= "";
if (visitor == "Drago" {
document.write("Pozdrav Drado...");
}
else if (visitor == "Miloje") {
document.write("Pozdrav Miloje...");
}
else if(visitor == "Laki") {
document.write("Pozdrav Laki...");
}
else {
document.write("Pozdrav posetioče...");
}
Једноставна рекурзивна функција која рачуна факторијел. function factorial(n) {
if (n == 0) {
return 1;
}
return n*factorial(n - 1);
}
Пример анонимне функције var displayClosure = function() {
var count = 0;
return function () {
return ++count;
};
}
var inc = displayClosure();
inc(); // враћа 1
inc(); // враћа 2
inc(); // враћа 3
Напреднији примерОвај узорак кода приказује разне Јаваскрипт функције. function LCMCalculator(x, y) {
var checkInt = function (x) {
if (x % 1 !== 0) {
throw new TypeError(x + " is not an integer");
}
return x;
};
this.a = checkInt(x)
this.b = checkInt(y);
}
LCMCalculator.prototype = {
constructor: LCMCalculator,
gcd: function () {
var a = Math.abs(this.a), b = Math.abs(this.b), t;
if (a < b) {
t = b;
b = a;
a = t;
}
while (b !== 0) {
t = b;
b = a % b;
a = t;
}
this['gcd'] = function () {
return a;
};
return a;
},
lcm : function () {
var lcm = this.a/this.gcd()*this.b;
this.lcm = function () {
return lcm;
};
return lcm;
},
toString: function () {
return "LCMCalculator: a = " + this.a + ", b = " + this.b;
}
};
function output(x) {
document.body.appendChild(document.createTextNode(x));
document.body.appendChild(document.createElement('br'));
}
[[25, 55], [21, 56], [22, 58], [28, 56]].map(function (pair) {
return new LCMCalculator(pair[0], pair[1]);
}).sort(function (a, b) {
return a.lcm() - b.lcm();
}).forEach(function (obj) {
output(obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm());
});
Контрола токаКонтроле тока омогућавају ток програма жељеном путањом у складу са одређеним условима. Основне контроле тока у Јаваскрипту су веома сличне основним контролама тока у вишим програмским језицима. Осим њих, постоје и контроле тока специфичне само за Јаваскрипт језик. If-else наредбаОмогућава извршавање одређеног блока инструкција, ако је задати услов испуњен.[56] Sintaksa :
if(logički izraz)
blok1;
[else
blok2;]
if...else наредба је проширење if наредбе. If наредба омогућује извршавање неког кода уколико је услов задовољен, а уколико није неће се извршити ништа.[56] Ако се жели написати да уколико услов у if изразу није задовољен, да се изврши неки други код онда користи се if...else наредба. Вишеструке if…else наредбе се могу угнездити, да би се направила else if наредба.[56] if(logički izraz1)
blok1;
else if(logički izraz2)
blok2;
else if(logički izraz3)
blok3;
. . .
else if(logički izrazN)
blokN;
Како једна if-else наредба може да садржи више наредби, те наредбе се групишу заградама { }. Генерално је добра пракса да се увек користе заграде.[56] if(logicki izraz1)
{
blok1;
}
else
{
blok2;
}
Тернарни операторSwitch наредба упоређује израз у загради са вредностима у случајевима, ако је израз једнак некој од вредности у случају тада се извршавају наредбе у оквиру њега.[57] Sintaksa:
logičkiIzraz ? izraz1 : izraz2;
где је израз logički_izraz било који израз чији резултат је вредност логичког типа. Ако је резултат израза true, онда се извршава izraz1, у супротном izraz2. Switch наредба Sintaksa:
switch (izraz){
case vrednost1:
//Naredbe koje se izvršavaju ako se izraz poklopi sa vrednoscu1
[break;]
case vrednost2:
//Naredbe koje se izvršavaju ako se izraz poklopi sa vrednoscu2
[break;]
case vrednost3:
//Naredbe koje se izvršavaju ako se izraz poklopi sa vrednoscu3
[break;]
...
case vrednostN:
//Naredbe koje se izvršavaju ako se izraz poklopi sa vrednoscuN
[break;]
}
Do...while наредбаDo...while наредбом се креира петља која извршава наредбе док је условна наредба тачна. Услов се тестира након извршења наредбе, што значи да се наредба мора извршити бар једном.[58] Sintaksa:
do
Naredba
while(uslov);
While наредбаWhile наредбом се креира петља у којој се извршавају наредбе док је услов тачан. Услов се тестира пре извршавања наредбе.[59] Sintaksa :
while(uslov)
{ naredba
}
For наредбаFor циклус се записује тако да се иза кључне речи for, запишу у заградама три опциона израза међусобно одвојена тачка-зарезом, а иза њих наредба која чини тело петље.[60] Sintaksa:
for ( izraz1opcion ; izraz2opcion ; izraz3opcion )
Izraz1 се типично користи за иницијализацију бројача, izraz2 за услов, а izraz3 за инкрементацију. Наравно ови изрази су опциони, тако да се могу и изоставити у зависности од проблема. For…in наредбаКористи се за обилазак колекције, тј. за обављање одређених радњи над свим елементима колекције.[61] Sintaksa:
for( x in kolekcija){
...
}
x променљива којој се у свакој итерацији додељује вредност, колекција у којој се врши обилазак. For...of наредбаКористи се за обилазак итерабилног објекта (укључујући низ, мапу, стринг…), позивајући посебну итерацију и извршавајући наредбе за сваки члан објекта.[62] Sintaksa:
for ( x of object){
naredbe
}
Break наредбаОва наредба зауставља покренуту петљу. И наставља програм на наредној команди после тела петље.[63] Sintaksa:
break[labela];
Лабела опциона и везана са лабелом наредби у петљи. Continue наредбаОва наредба зауставља извршавање петље на тренутној итерацији и наставља њено извршавање на следећем итерираном елементу[64] Sintaksa :
continue[labela];
Лабела опциона и везана са лабелом наредби у петљи. Continue наредба не зауставља извршавање као break већ у случају while петље проверава поново услов, а у случају for петље иде на наредбу итерације. Import наредбаImport наредба се користи за увођење функција, објекта… из других фајлова из скрипта.[65] Export наредбаExport наредба се користи за извоз функција, објеката у друге фајлове.[66] КласеКласе су посебне “функције” које се дефинишу у телу програма. Један од начина дефинисања класе је коришћењем декларације класе. Да би се декларисала класа користи се кључну реч class након чега следи име класе, затим у заградама тело класе.[67] class Poligon {
Constructor(height,width){
this.height=height;
this.width=width;
}
}
Главна разлика између декларације функције и декларације класе је у томе што класу мора прво да се декларише па онда да јој приступимо, иначе ће се јавити грешка (Reference Error). Класе, као и функције, могу бити анонимне. Значи, могуће их је навести и без конкретног назива, као и правити референцу на класу. var KlasaRef = class {
...
}
var NovaKlasa = class extends KlasaRef {
...
}
Такође, класе је могуће и прослеђивати као параметар или враћати као вредност функције. Функција која прима класу као параметар, онда креира нову класу која наслеђује задату класу и коју онда враћа би изгледала овако: function kreator (klasa) {
return class extends klasa {
...
}
}
Такву функцију бисмо могли да употребимо да креирамо нову наслеђену класу на основу ње или чак да директно дефинишемо објекат: class xx extends kreator(class {...});
var obj = new xx();
...или var obj = new (kreator(class {...}))();
Гетери и сетериУкратко, гетери и сетери су функције које служе за напредно дефинисање својства. Оне практично представљају „прву линију одбране” својства, тачније спречавају програмере да приступају својствима као „голим” подацима.[67] Гетер је функција која обезбеђује читање својства. Шта год да ради, на крају мора помоћу директиве return да врати вредност која онда представља вредност својства.[67] Слично, сетер је функција која се позива када се задаје вредност својства. Ова функција мора имати један параметар који представља задату вредност.[67] Негде „у позадини” се та вредност бележи - најчешће у неком својству објекта, које се не „експонира”. Наравно, Јаваскрипт нема механизам којим би се својство заиста сакрило, тако да је у питању просто конвенција - договор. class Klasa {
constructor(params) {
this._skriveno_svojstvo = početna_vrednost;
}
get svojstvo() {
return this._skriveno_svojstvo;
}
set svojstvo(vrednost) {
this._skriveno_svojstvo = vrednost;
}
...
}
Када се својство дефинише на овакав начин, користи се као и било које „обично” својство. var objekat = new Klasa(params)
var citanje = objekat.svojstvo;
objekat.svojstvo = nova_vrednost;
Прототипско наслеђивањеОбјекти у Јаваскрипту имају уграђени механизам наслеђивања кроз такозвано прототипско наслеђивање. То је посебан стил објектно-оријентисаног програмирања који чак није ни јединствен за Јаваскрипт. Прототипско наслеђивање се заснива на делегирању. Сваки објекат има своја својства и методе, али и посебну везу ка родитељском објекту који онда представља његов прототип од кога наслеђује својства и методе. Сувишно је рећи - и тај родитељски објекат такође има свој прототип и тако даље. Када се приступа нпр. одређеном методу објекта, ако га објекат нема, он се „тражи” у његовом прототипу, па у прототипу прототипа и тако све до краја ланца.[68] КонструкторКонструктор је посебни метод који се користи да би се иницијализовао објекат креиран у класи. У класи може постојати само један конструктор иначе програм ће јавити да постоји грешка. ExtendsExtends је кључна реч која се користи код наслеђивања класа. StaticStatic је кључна реч која дефинише статичку методу класе. Статичке методе могу бити позване без конструисања њихове класе. Веб програмирањеОсновни домен примене Јаваскрипт програмског језика јесте веб програмирање. Пре него што прегледач учита страницу, мора да направи DOM и CSSOM стабла. Прегледач анализира фајл, заправо анализира бајтове и од њих прави карактере, затим груписањем карактера прави токене, од токена чворове, а од чворова објекте.[69] HTML етикете се трансформишу у Објектни модел документа (DOM), а CSS етикете у CSS објектни модел (CSSOM). DOM и CSSOM су независне структуре и њиховим спајањем настаје рендер дрво, које се затим користи за израчунавање особина сваког видљивог елемента, нпр. величина елемента, боја позадине итд. Оптимизација сваког од ових корака је од кључне важности за постизање оптималних перформанси прегледања. DOM описује садржај, а CSSOM описује стил који се примењује. Рендер дрво садржи само чворове потребне за приказивање странице и води рачуна о распореду и тачној величини сваког објекта.[70] Приликом креирања рендер стабла, прегледач отприлике ради следеће:
Прегледач страну коју треба да прикаже третира као document, и елементима DOM стабла може се приступити помоћу document.getElemenstByTagName(). Метод .getElementsByTagName() враћа низ елемената са тагом који му проследимо. Слични методи су .getElementById(), .getElementsByClassName() и .getElementsByName(). Од претходне верзије ЈС елементима је могуће приступити помоћу document.querySelector() који дохвата само први елемент који се подудара са прослеђеним CSS селектором или document.querySelectorAll() који дохвата све елементе који се подударају са прослеђеним селектором. Уколико се жели да се дође до HTML садржаја неког елемента, то радимо помоћу метода .innerHTML. Помоћу метода .textContent исписује се текстуални садржај неког елемента, а нови елемент се прави помоћу .createElement(). На пример: var p=document.createElement("p");
//atributu title dodeljujemo vrednost Napravljen pomocu JS-a
p.setAttribute("title", "Napravljen pomocu JS-a");
//pravimo cvor koji sadrzi Zdravo svima
var text=document.createTextNode("Zdravo svima");
//da bi ovaj cvor bio vidljiv potrebno je da ga nadovezemo na p
p.appendChild(text);
//medjutim, ovo i dalje nije vidljivo jer nismo sve to nadovezali na body
document.body.appendChild(p);
Помоћу овог механизма могу се креирати сви елементи (нпр. неуређену/уређену листу), али све то се може урадити и само помоћу HTML-а и CSS-а. Оно што Јаваскрипт разликује од HTML-а и CSS-а јесте чињеница да ЈС подржава и акције, односно, догађаје који се реализују када се клинке не неки елемент или се страница затвори итд. То је показано на следећем примеру:[71] <!DOCTYPE html>
<html>
<head>
<title> Pridruživanje događaja </title>
<meta charset='UTF-8'>
<style type='text/css'>
.dugme{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: green;
color: white;
}
.dugme:hover{
cursor: pointer;
background-color: blue;
}
</style>
</head>
<body>
<input type='button' id='dugme' value='klik za pregled poruke' onclick='prikazi_poruku()'>
<br />
<br />
<div class='dugme' id='moderno_dugme'> klik za pregled poruke </div>;
<br />
<!--
this prilikom ovog navodjenja predstavlja ceo input element pa se moze pristupiti svim njegovim svojstvima - u ovom slucaju se funkciji prikazi prosledjuje tekuci tekstualni sadrzaj elementa
-->
Unesite tekst (kada element izgubi fokus prikazace se njegov sadrzaj):
<br />
<input type='text' id='unos1' onblur='prikazi(this.value)'>
<br />
/*Preporuka je da script tag uvek pisemo na kraju body sekcije jer zelimo da imamo DOM drvo u celosti kreirano pre nego sto
izvrsimo neke manipulacije*/
<script type='text/javascript'>
/* Ovakav nacin pridruzivanja podrazumeva postojanje odgovarajućih atributa na nivou elementa.
Neki od atributa koji postoje su:
onclick - definiшe sta se dogadja kada korisnik klikne na povrsinu elementa
onchange - definise sta se dogadja kada korisnik promeni vrednost npr. input elementa ili select
elementa
onfocus - definise sta se dogadja kada element dobije fokus (kada se korisnik pozicionira bilo misem bilo tab tasterom na ovo polje)
onblur - definise sta se dogadja kada element izgubi fokus
onhover - definise sta se dogadja kada se predje preko povrsine elementa
onkeydown - definise sta se dogadja kada korisnik pritisne taster na tastaturi (spust tastera)
onkeyup - definise sta se dogadja kada korisnik pusti pritisnuti taster na tastaturi
.....
.....
*/
function prikazi_poruku(){
//window je objekat koji predstavlja ceo prozor pregledaca
window.alert("Poruka!");
}
/* Ovakav nacin pridruzivanja zahteva pristup elementu i definisanje odgovarajuceg svojstva - vrednost
svojstva je funkcija pa postojanje omotaca sprecava da se funkcija izvrsi odmah nakon pridruzivanja
*/
var moderno_dugme=document.querySelector('#moderno_dugme');
moderno_dugme.onclick=function(){
window.alert("Poruka!");
}
function prikazi(tekst){
window.alert("Novi sadrzaj je: " + tekst);
}
</script>
</body>
</html>
У наставку следе неки једноставнији примери примене ЈСа кроз веб програмирање.[72] Пример калкулатора[72] <!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
</head>
<body>
a: <input type="text" id="a" onkeyup="izracunaj()">
<br />
b: <input type="text" id="b" onkeyup="izracunaj()">
<br />
rez: <output id="rez" for="a b"></output>
<br />
<!-- I nacin:
<input type="button" value="+" onclick="izracunaj('+')">
<input type="button" value="-" onclick="izracunaj('-')">
<input type="button" value="*" onclick="izracunaj('*')">
<input type="button" value="/" onclick="izracunaj('/')">
<input type="button" value="koren" onclick="izracunaj('koren')"> -->
<!-- II nacin: -->
<select id="operacija" onchange="izracunaj()">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="koren">koren</option>
</select>
<br />
<span id="greska"></span>
<script type="text/javascript">
function izracunaj(){
var a = document.getElementById("a");
var b = document.getElementById("b");
var op = document.getElementById("operacija").value
var rez = document.getElementById("rez");
var err = document.getElementById("greska");
a1 = parseInt(a.value);
b1 = parseInt(b.value);
if(isNaN(a1) || isNaN(b1)){
if(isNaN(a1))
a.focus();
else
b.focus();
err.textContent = "Neispravni argumenti!";
return;
}
else{
switch(op){
case '+':
rez.value = a1 + b1;
break;
case '-':
rez.value = a1 - b1;
break;
case '*':
rez.value = a1 * b1;
break;
case '/':
if(b1 == 0){
err.textContent = "Deljenje nulom!";
b.focus();
return;
}
else
rez.value = (a1 / b1).toPrecision(2);
break;
case 'koren':
if(a1 < 0){
err.textContent = "Vrednost ne sme biti negativna!";
a.focus();
return;
}
else
rez.value = Math.sqrt(a1);
break;
}
}
err.innerHTML = "Sve je ok!";
}
</script>
</body>
</html>
Годишња доба[72] <!DOCTYPE html>
<html>
<head>
<title>Godisnja doba></title>
<style type="text/css">
img{
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<img src='prolece.jpg' alt="prolece">
<br />
<input type="button" value="napred" onclick="napred()">
<input type="button" value="nazad" onclick="nazad()">
<input type="button" value="start slideshow" onclick="slideshow()" id="slide">
<script type="text/javascript">
window.slike = new Array("prolece.jpg", "leto.jpg", "jesen.jpg", "zima.jpg");//ovo je globalno
var i = 0;//ovo je takodje globalno
var elem = document.getElementsByTagName("img")[0];
var timer;
function napred(){
i = (i + 1) % slike.length;
elem.src = slike[i];
elem.alt = slike[i];
}
function nazad(){
if(i - 1 == -1)
i = slike.length - 1;
else
i = i - 1;
elem.src = slike[i];
elem.alt = slike[i];
}
function slideshow(){
timer = setInterval("napred()", 1000);
var elem = document.getElementById("slide");
elem.value = "stop slideshow";
elem.onclick = stopslideshow;
}
function stopslideshow(){
clearInterval(timer);
var elem = document.getElementById("slide");
elem.value = "start slideshow";
elem.onclick = slideshow;
}
</script>
</body>
</html>
Генерисање карактера[72] <!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Captcha</title>
</head>
<body>
<input type="checkbox" id="malaSlova"> mala slova
<br />
<input type="checkbox" id="velikaSlova"> velika slova
<br />
<input type="checkbox" id="cifre"> cifre
<br />
duzina <input type="text" id="duzina">
<br />
<br />
<input type="text" id="captcha" readonly>
<br />
<input type="button" value="generisi" onclick="generisi()">
<script type="text/javascript">
function generisi(){
var karakteri = '';
var malaSlova = document.getElementById("malaSlova");
var dozvoljena_slova="abcdefghijklmnopqrstuvwxyz";
if(malaSlova.checked == true)
karakteri += dozvoljena_slova;
var velikaSlova = document.getElementById("velikaSlova");
if(velikaSlova.checked == true)
karakteri += dozvoljena_slova.toUpperCase();
var cifre = document.getElementById("cifre");
var dozvoljene_cifre="0123456789";
if(cifre.checked == true)
karakteri += dozvoljene_cifre;
var n = parseInt(document.getElementById("duzina").value);
if(isNaN(n) || n <= 0 || karakteri == ""){
console.log("Nekorektan unos!");
return;
}
var captcha = Array();
for(var i = 0; i < n; i++){
var indeks = Math.floor(Math.random() * karakteri.length);
captcha[i] = karakteri.charAt(indeks);
}
document.getElementById("captcha").value = captcha.join('');
}
</script>
</body>
</html>
Погађање речи[72] <!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Pogadjanje reci</title>
</head>
<body>
trenutna rec:<br />
<input type="text" id="trenutnaRec">
<br />
slovo:<br />
<input type="text" id="slovo">
<br />
broj pokusaja:<br />
<input type="text" id="brojPokusaja" readonly>
<br />
<input type="button" value="zameni" onclick="zameni()" id="zameni">
<script type="text/javascript">
window.tacnaRec = "programiranje";
window.trenutnaRecNiz = new Array();
for(var i = 0; i < window.tacnaRec.length; i++)
window.trenutnaRecNiz[i] = "*";
document.getElementById("trenutnaRec").value = window.trenutnaRecNiz.join("");
window.brojPokusaja = 0;
document.getElementById("brojPokusaja").value = window.brojPokusaja;
window.brojPogodaka = 0;
function zameni(){
var slovo = document.getElementById("slovo").value.trim();//izdvajamo slovo i usput izbaucjemo vodece beline
if(slovo.length != 1){
window.alert("Morate uneti slovo!");
return;
}
for(var i = 0; i < window.tacnaRec.length; i++){
if(window.tacnaRec.charAt(i) == slovo){
window.trenutnaRecNiz[i] = slovo;
window.brojPogodaka++;
}
}
window.brojPokusaja++;
document.getElementById("trenutnaRec").value = window.trenutnaRecNiz.join("");
document.getElementById("brojPokusaja").value = window.brojPokusaja;
document.getElementById("slovo").value = "";
if(window.brojPogodaka == window.tacnaRec.length){
window.alert("Cestitamo!");
return;
}
if(window.brojPokusaja > 8){
window.alert("Potrosili ste sve pokusaje.");
document.getElementById("zameni").disabled = true;
return;
}
}
</script>
</body>
</html>
Неке Јаваскрипт библиотеке:
Употреба у интернет страницамаНајчешћа употреба Јаваскрипт-а је додавање динамичности HTML страницама на клијентској страни. Скрипте се укључују у HTML странице и врше интеракцију са објектним моделом докумената (енгл. Document Object Model). Неки од примера употребе Јаваскрипт-а су:
Интернет претраживач је најчешће окружење за извршавање Јаваскрипт кода. Интернет претраживачи обично праве хост објекте за представљање објектног модела докумената у Јаваскрипт-у. Поред интернет претраживача, Јаваскрипт код се може извршити и на серверу.[73] Једноставна скриптаИспод је минималистички пример интернет странице која користи Јаваскрипт и објектни модел докумената. <!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Minimal Example</title>
<body>
<h1 id="header">Ovo je Javaskript</h1>
<script>
document.body.appendChild(document.createTextNode('Zdravo Svete!'));
var h1 = document.getElementById('header');
h1 = document.getElementsByTagName('h1')[0];
</script>
<noscript>Vaš pretraživač ne podržava Javaskript ili je trnutno isključen.</noscript>
</body>
</html>
КомпатибилностС обзиром да Јаваскрипт код може да се изврши у различитим окружењима, важан део тестирања кода је и провера да ли Јаваскрипт код ради на више различитих претраживача. Интерфејс објектног модела докумената за манипулацију са интернет страницама није део Екмаскрипт стандарда односно самог Јаваскрипт-а, већ је дефинисан посебним стандардом. У пракси, имплементација интернет претраживача се разликује у стандардима, и самим тим не извршава сваки претраживач Јаваскрипт код исто. Да би се ове разлике анулирале, Јаваскрипт програмери могу да покушају да напишу код који ће се у већини претраживача извршавати исто. Ако се не изврши, могуће је написати код који проверава присуство одређених функција претраживача.[74] У неким случајевима, два претраживача могу извршити исту функцију али са различитим исходом. Тако да програмер може практично открити шта претраживач ради и сходно томе изменити своју скрипту како би је претраживач извршио на одговарајући начин.[75][76] Осим тога, скрипте не могу да раде за одређене кориснике. На пример корисник може да:
Како би помогли овим корисницима, програмери могу да направе интернет странице које деградирају претраживаче да не користе Јаваскрипт. Конкретно, страна би требало да остане употребљива без додатних елемената Јаваскрипт-а. Алтернативни приступ решавању овог проблема јесте да први аутор садржаја користи основне технологије које раде у свим претраживачима, а затим побољша садржај намењен корисницима који подржавају Јаваскрипт. Ово је познато као прогресивно побољшање. Историјат верзијаЈаваскрипт је првобитно развијен 1996. године ради коришћења у веб претраживачу Нетскејп навигатор. Исте године Мајкрософт је представио имплементацију Интернет експлорера. Она је названа ЈСкрипт због проблема са ауторским правима. Године 1997. је представљена прва стандардизована верзија језика под називом ЕКМАСкрипт у оквиру првог издања стандарда ЕКМА-252. Експлицитно верзионисање и укључивање нових компоненти језика је било карактеристично само за Мозилу и касније је напуштен овај принцип. Фајерфокс 4 је последња верзија овог претраживача која је била везана за верзију Јаваскрипта (1.8.5). Са новим верзијама ЕКМА-262 стандарда, компоненте Јаваскрипт језика се помињу заједно са почетном дефиницијом ЕКМА-262 издања. Следећа табела се заснива на информацијама из више извора.[77][78][79]
Референце
Литература
Спољашње везе
|
Portal di Ensiklopedia Dunia