Јаваскрипт

Из Википедије, слободне енциклопедије
(преусмерено са Javascript)
Јаваскрипт
JavaScript-logo.png
Лого програмског језика Јаваскрипт
Оригинални назив енгл. JavaScript
Изговара се Џаваскрипт или Јаваскрипт
Модел скриптни, објектно-оријентисани (прототипни), императивни, функционални и вођен догађајима
Појавио се 4. децембар 1995. год.; пре 21 године (1995-12-04)[1]
Аутор(и) Брендан Ајк
Дизајнер(и) Нетскејп, Мозила Фондација, Ecma International
Актуелна верзија ECMAScript 2016[2]
Датум актуелне верзије 17. јун 2016. год.; пре 15 месеци (2016-06-17)
Систем куцања динамичко
Имплементације V8, ЈаваскриптКор, SpiderMonkey, Chakra
Утицаји Луа, Scheme, Перл, Селф, Јава, Це, Пајтон, AWK, HyperTalk
Утицао на ActionScript, AtScript, CoffeeScript, Дарт, JScript .NET, LiveScript, Objective-J, Opa, Перл 6, QML, TypeScript,
Јаваскрипт
Екстензија фајла: .js
Развио: Брендан Ајк
Прво појављивање: 1995.
Тип формата: скриптни језик

Јаваскрипт или Џаваскрипт (енгл. 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). Неке примене ЈС су:

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

Садржај

Историјат[уреди]

Почеци у Нетскејпу[уреди]

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 (нпр. if исказе, while петље, switch исказе, do while петље, и др.). Делимичан изузетак је опсег променљивих: Јаваскрипт је у оригиналу подржавао само функционални опсег променљивих помоћу декларације var. ЕКМАСкрипт 2015 доноси кључну реч let за блоковски опсег, тако да сада Јаваскрипт подржава функционални и блоковски опсег. Као и C, Јаваскрипт прави разлику између исказа и израза. Још једна битна разлика у односу на C је и аутоматско уметање краја наредбе односно карактера тачка-зарез, па није потребно експлицитно наглашавати крај наредбе са знаком тачка-зарез.[23]

Динамични[уреди]

Куцање
Као и већина скриптних језика, Јаваскрипт је језик са динамичном провером куцања; тип је повезан са сваком вредношћу пре него са свакоим изразом. На пример, уколико имамо неку променљиву која је везана за број, та иста променљива касније може бити везана за стринг.[24] Јаваскрипт подржава различите начине провере типа објекта.
Провера приликом извршавања
Јаваскрипт садржи eval која може да извршава исказе у облику стрингова у време извршавања.

Прототипни (објектно-оријентисани)[уреди]

Јаваскрипт је скоро у потпуности објектно заснован скриптни језик. У Јаваскрипту, објекат представља асоцијативни низ, наглашен помоћу прототипа; сваки кључ у облику низа карактера представља назив својства објекта за који постоји два синтаксна начин за дефинисање таквог назива; нотација са тачком, енгл. dot notation (obj.x = 10) и нотација са заградама, енгл. bracket notation (obj['x'] = 10). Својство се може додати или обрисати за време изврашавања кода. Већина својстава објекта (или било ког својства које припада ланцу наслеђивања прототипа објекта) се може набројати коришћењем for...in петље. Јаваскрипт садржи ограничен број уграђених објеката, као што су Date и Function.

Прототипови
Јаваскрипт користи прототипове у случајевима у којима други објектно-оријентисани програмски језици користе класе за наслеђивање.[25] Помоћу прототипова у Јаваскрипту је могуће симулирате многе карактеристике класа.[26]
Функције као конструктори објеката
Функције осим своје главне функције, имају и улогу конструктора објеката. Додавањем префикса new испред позива функције, креира нову инстанцу прототипа, наслеђујући својства и методе конструктора (уклјучујући и својства Object прототипа).[27] ЕКМАСкрипт 5 садржи методу Object.create, која омогућава експлицитно креирање инстанце без аутоматског наслеђивања Object прототипа (старија окружења могу додељивати прототипу вредност null).[28] Својство prototype конструктора одређује који објекат се користи као интерни прототип новог објекта. Нове методе се могу додати изменом прототипа функције која се користи као конструктор. Конструктори доступни у самом Јаваскрипту, као што су Array и Object, такође имају своје прототипове који могу да се измене. Иако могућа, измена Object прототипа није добра пракса због тога што већина објеката у Јаваскрипту наслеђује методе и својства из Object прототипа и потенцијално не очекују његову измену.[29]
Функције као методе
За разлику од већине објектно-оријентисаних језика, у Јаваскрипту не постоји разлика између дефинисања функција и дефинисања метода. Најчешће, разлика постоји код позивања функције; када се функција позива као метода објекта, њена локална кључна реч this се везује за тај објекат приликом позивања.

Функционални[уреди]

Функција је прве класе и може се третирати као објекат. Као таква, функција може да садржи својства и методе, као што је .call() и .bind().[30] Угњеждена функција је функција која се дефинише унутар друге функције. Оваква функција се креира сваки пут када се позове надређена функција. Додатно, свака надређена функција формира лексички блок; Лексички блок надређене функције (укључујући константе, локалне променљиве и вредности аргумената) постају саставни део сваког објекта подређене функције, чак и након завршетка извршавања надређене функције.[31] Јаваскрипт подржава и анонимне функције.

Делегирани[уреди]

Јаваскрипт подржава имплицитно и експлицитно делегирање.

Функције као улоге (Traits и Mixins)
Јаваскрипт подразумевано подржава различите функције имплементиране у виду улога (енгл. Roles)[32] и патерна као што су Traits[33][34] и Mixins.[35] Оваква функција дефинише додатно понашање барем једне методе везане за кључну реч this унутар тела функције. Улога се након тога експлицитно додељује помоћу call или apply наредбе објектима који треба да садрже додатно понашање које се не дели кроз ланац прототипова.
Композиција објеката и наслеђивање
Иако експлицитна делегација заснована на функцијама покрива композицију објеката у ЈаваСкрипт-у, имплицитна делегација се већ обавља сваки пут када се ланац прототипова проширује како би, нпр. пронашли методу која је потенцијално повезана али не и у директној вези са објектом. Када се метода једном пронађе, она се позива у контексту објекта. На овај начин је наслеђивање у ЈаваСкрупт-у покривено аутоматизмом делегације који се везује за својства прототипа у оквиру функција у конструктору.

Остале карактеристике[уреди]

Извршно окружење
ЈаваСкрипт се најчешће ослања на извршно окружење (нпр. Веб претраживач) как оби обезбедило објекте и методе помоћу којих скрипте врше интеракцију са окружењем (нпр. Објектни модел документа веб странице). Такође се на извршно окружење ослања и да би обезбедили могућност укључивања скрипти (нпр. помоћу HTML script елемента). Ово није особина самог програмског језика, иако је заједничка карактеристика многих ЈаваСкрипт имплементација.
ЈаваСкрипт обрађује поруке из реда једну по једну. Пре него што учита нову поруку, ЈаваСкрипт позива функцију везану за ову поруку, чиме се креира оквир позивног стека (аргументи функције и локалне променљиве). Позивни стек се шири и расте у зависности од потреба функције. Пре самог изврђавања функције, када је стек празан, ЈаваСкрипт наставља са обрадом следеће поруке у реду. То се још назива и петљом догађаја (енгл. event loop) и описује као "скок на завршетак" јер је свака порука у потпуности обрађена пре него што се у обзир узме следећа порука. Без обзира на то, модел конкурентности програмског језика дефинише да петља догађаја не блокира само извршавање: улазно/излазне операције програма се одвијају путем догађаја и повратних функција. То значи, на пример, да ЈаваСкрипт може да обради клик мишем док чека да упит над базом података врати тражену информацију.[36]
Варијативне функције
Функцији може бити прослеђен неограничен број аргумената. Функција им приступа путем формалних параметара или кроз локални arguments објекат. Варијативне функције се такође могу креирати и помоћу bind методе.
Низ и литерали објеката
Као и код многих програмских језика, низови и објекти (асоцијативни низови у другим језицима) се могу креирати помоћу скраћене синтаксе. Заправо, ови литерали формирају базу JSON формата података.
Регуларни изрази
ЈаваСкрипт такође подржава регуларне изразе на начин сличан ономе у програмском језику Перл, који пружа прецизну и снажну синтаксу за манипулацију текстом која је доста напреднија од уграђених функција знаковних низова.[37]

Специфични додаци произвођача[уреди]

Развојем ЈаваСкрипт програмског језика управља Мозила Фондација, док се нове функционалности периодично додају језику. Међутим, само одређени покретачи ЈаваСкрипт-а подржавају ове нове функционалности:

  • гетер и сетер функције (подржавају их Веб-кит, Gecko, Опера[38], ActionScript и Rhino)[39]
  • условне catch клаузуле
  • протокол итератора (преузето из Пајтона)
  • површни генератори-потпрограми (преузето из Пајтона)
  • проширивање низова и генератор израза (преузето из Пајтона)
  • одговарајући опсег блока помоћу кључне речи let
  • уништавање низова и објеката (ограничен облик слагања обрасца)
  • прецизни изрази функција (function(args) expr)
  • ECMAScript за XML (E4X), додатак који омогућава подразумевану XML подршку за ECMAScript (није подржано у Мозила Фајерфоксу од верзије 21[40])

Ванила Јаваскрипт[уреди]

Појам Ванила Јаваскрипт или Ванила ЈС се односи на Јаваскрипт који није проширен неким фрејмворком или додатним библиотекама. Скрипт написан Ванила Јаваскриптом је чист Јаваскрипт код.

Структуре података[уреди]

Примитивни типови[уреди]

Бројеви: све вредносте су представљене као реални бројеви (64 бита, IEEE 754 стандард). У случају прекорачења (overflow) генерише се +/- Infinity.[41] У случају поткорачења (underflow) генерише се 0/ "negative zero". Дељење нулом не резултира грешком осим у случају 0/0 – тада се генерише NaN. Infinity и NaN су глобалне променљиве које се могу само читати.

Стрингови су непроменљиве секвенце 16-битних вредности, углавном Уникодних карактера и морају бити под двоструким или једноструким наводницима ("string", '123str45', "vise reci", ...). Такође, битно је запамтити да индекси крећу од нуле, а не од јединице.[41] Стринг може садржати и HTML кодове, као и следеће специјалне текст ознаке:

  • \t - табулатор
  • \n - нова линија
  • \r - повратак на почетак реда
  • \b - једно слово уназад
  • \f - form feed

Логички (булов) тип: true/false.

Специјалне вредности[уреди]

null - представља недостајућу вредност (језичка кључна реч);[41]
undefined - представља недостајућу вредност (глобална променљива која се може само читати); добија се као резултат приступа својствима или елементима низа који не постоје или као резултат функција које немају ретурн.[41] Ово је можда мало збуњујуће, али битно је запамтити да је undefined сам по себи (недефинисан) тип, а null је објекат.

Објекти[уреди]

Објекти су све преостало, односно, неуређена колекција именованих вредности (својстава). Они су динамичке природе и за разлику од примитивних типова преносе се по референци, а не по вредности. Сваки пут када се интерпретер покрене или се учита нова страна у прегледачу, креира се нешто што се зове глобални објекат и на нивоу њега се дефинишу и иницијализују својства типа undefined, NaN, глобалне функције типа isNaN(), parseInt(), конструктори као што су Date(), Array(), String(),..., глобални објекти ко што су Math, JSON,... Резервисана реч којом се у глобалном опсегу може реферисати на овај објекат је this. На нивоу прегледача то је Виндоус објекат који се може реферисати са window.[41]

Неки битнији објекти су:[41]

  • Функције - објекти који садрже код који треба извршити,
  • Array - низови, тј. уређена колекција нумерисаних вредности,
  • Date - објекти за рад са датумима и временом,
  • RegExp - објекат за рад са регуларним изразима и
  • Error - објекат који представља синтаксе грешке и грешке у извршавању

Функције[уреди]

У програмирању се често долази у ситуацију у којој се део програма понавља на више различитих места. Постоји потреба да се тај део програма издвоји и да се позива по потреби. То се остварује помоћу функција. Функције представљају потпрограме који углавном враћају резултат неког израчунавања. Враћање резултата није обавезно.[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 pocetak 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 visedimenzionih 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"*/

Синтакса:

[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elemntN]])
new Array(duzinaNiza)

Неки најчешће коришћени методи:[43]

  • методи који мењају низ:
    • Array.prototype.copyWithin() - копира секвенцу елемената низа у низ
    • Array.prototype.pop() - скида последњи елемент из низа и враћа тај елемент
    • Array.prototype.push() - додаје један или више елемената на крај низа и враћа нову дужину низа
    • Array.prototype.reverse() - обрће елементе низа
    • Array.prototype.shift() - уклања први елемент из низа и враћа тај елемент
    • Array.prototype.sort() - сортира низ у месту (користи константну количину додатног простора) и враћа сортирани низ
    • Array.prototype.splice() - додаје и/или уклања елементе низа
    • Array.prototype.unshift() - додаје један или више елемената на почетак низа и враћа нову дужину низа
  • методи који не мењају низ:
    • Array.prototype.concat() - враћа нови низ настао спајањем два низа или низа и неке вредности
    • Array.prototype.includes() - одређује да ли низ садржи одговарајући елемент и враћа труе ако садржи, а фалсе ако не садржи
    • Array.prototype.indexOf() - враћа индекс првог појављивања елемента или -1 ако елемент није пронађен
    • Array.prototype.join() - спаја све елементе низа у стринг
    • Array.prototype.lastIndexOf() - враћа индекс последњег појављивања елемента или -1 ако елемент није пронађен
    • Array.prototype.slice() - извлачи део низа и враћа нови низ
    • Array.prototype.toString() - враћа стринг репрезентацију низа

Датум[уреди]

Date методи омогућавају враћање и постављање вредности датума (године, месеце, дане, сате, минуте, секунде и милисекунде).[44]

Гет методе[уреди]
Метода Опис[44]
getDate() Враћа дан као број (1-31)
getDay() Враћа дан у недељи као број од (0-6)
getFullYear() Враћа четири цифре које представљају годину (yyyy)
getHours() Враћа сат (0-23)
getMilliseconds() Враћа милисекунду (0-999)
getMinutes() Враћа минут (0-59)
getMonth() Враћа месец (0-11)
getSeconds() Враћа секунду (0-59)
getTime() Враћа време

Пример getDay() методе

  <script>
  var d = new Date();
  document.getElementById("demo").innerHTML = d.getDay();
  </script>
Сет методе[уреди]
Метода Опис[44]
setDate() Поставља дан као број (1-31)
setFullYear() Поставља годину (опционо месец и дан)
setHours() Поставља сат (0-23)
setMilliseconds() Поставља милисекунду (0-999)
setMinutes() Поставља минут (0-59)
setMonth() Поставља месец (0-23)
setSeconds() Поставља секунду (0-59)
setTime() Поставља време

Пример setFullYear() методе

 <script>
 var d = new Date();
 d.setFullYear(2020, 0, 14);
 document.getElementById("demo").innerHTML = d;
 </script>

RegExp[уреди]

RegExp конструктор креира објекат типа регуларни израз за одговарајући патерн.[45] Синтакса литерала и конструктора: /pattern/flags

new RegExp(pattern[, flags])
где је паттерн текст регуларног израза, а опције ако су наведене могу имати било коју комбинацију следећих вредности:
  • g - глобална претрага
  • i - игнориши величину слова
  • m - више линија
  • u - третира патерн као низ уникодних карактера
  • y - sticky[45]
 //kreiranje regularnog izraza
 /ab+c/i;
 new RegExp('ab+c', 'i');
 new RegExp(/ab+c/, 'i');
 
 var re='/\w+';
 var re=new RegExp("\\w+");
карактери значења[45]
. Одговара сваком карактеру осим: \n, \r, \u2028 или \u2029. У карактерској класи тачка губи специјално значење, тј. одговара баш тачки
\d Одговара свим цифрама, тј. еквивалентно је са [0-9]
\D Одговара сваком карактеру који није цифра, тј. еквивалентно је са [^0-9]
\w Одговара свим малим и великим словима, цифрама и доњој црти, тј. еквивалентно је са [a-zA-Z_]
\s Одговара белини, тј. еквивалентно је са [\f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]
\S Одговара сваком карактеру који није белина, тј. еквивалентно је са [^\f\n\r\t\v\u00a0\u1680\u180e\u2000

\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]

\t Одговара хоризонталном табу
\r Одговара carriage return карактеру
\v Одговара вертикалном табу
\f Одговара form feed карактеру
[\b] Одговара backspace карактеру (не треба мешати са \b)
\0 Одговара Nul карактеру
\cX Одговара контролном карактеру у стрингу, где је X неко слово од A до Z
\xhh Одговара карактеру са две хексадецималне цифре
\uhhhh Поклапа се са UTF-16 кодном јединицом (hhhh-четири хексадекадне цифре)
\u{hhhh} или \u{hhhhhh} Поклапа се са знаком са уникодном вредношћу U+hhhh или U+hhhhhh
\ Одузима специјално значење карактерима
сидра значење[45]
^ Означава почетак речи
$ Означава крај речи
\b Означава границу речи
оператори значење[45]
* Нула или више пута
+ Једном или више пута
 ? 0 или 1 пут
{n} Тачно n puta
{n, } n или више пута
{n, m} најмање n пута и највише m пута
тврдње значења[45]
x(?=y) одговара x-y само ако иза x следи y
x(?!y) одговара x-y само ако иза x не следи y

Грешке[уреди]

Сваки од прегледача има свој подразумевани начин реаговања на грешке, нпр. Фајерфокс и Кроум уписују грешке у лог датотеку, док рецимо Интернет Експлорер и Опера генеришу обавештења за корисника. Због удобности рада корисника потребни су механизми који би омогућили руковање с грешкама.[46]

Грешке се могу обрађивати у оквиру try-catch блока: овакве грешке прегледачи сматрају примећеним па не реагују на њих.

  try{
  ...
  }catch(error){
  ...
  }

Типови грешака који могу да се јаве:

  • Error - основни тип грешке (сви остали се наслеђују) има својство message са описом грешке и својство name којим се одређује тип грешке. Прегледачи интерно обогаћују овај објекат, па нпр. Фајерфокс има и својства fileName са именом датотеке у којој се јавила грешка, lineNumber који садржи линију грешке и stack који садржи stack trace.[46]
  • EvalError - грешка која се генерише при раду са eval() функцијом која извршава Јаваскрипт код записан у виду ниске и прослеђен као аргумент, нпр. eval("var a,b,c;a=5;b=10;c=a+b"). Ову функцију треба користити уз опрез уколико постоји могућност да њен аргумент постане малициозни код који може да угрози податке и апликацију. Уз све то, eval() се нешто спорије извршава јер експлицитно позива ЈС интерпретер.[46]
  • RangeError - грешка која се генерише када вредност која се наводи није у скупу или опсегу дозвољених вредности, нпр. a=new Array(-20)[46]
  • ReferenceError - јавља се у случајевима када се реферише на непостојећу променљиву[46],

нпр. a=x;, док x не постоји

  • SyntaxError - обично се јавља када се проследи синтаксно неисправан код функцији eval(); у свим осталим случајевима синтаксне грешке аутоматски прекидају извршавање Јаваскрипт кода[46]
  • TypeError - тип грешке који се најчешће јавља и то када је променљива неодговарајућег типа или када се покушава са приступом методи која не постоји[46]
  • URIError - грешка која се јавља као последица коришћења функција encodeURI() и decodeURI() на УРИ аргументима који су погрешног формата. Функција encodeURI() само врши УРИ кодирање, кодирају се сви специјални карактери(%HH) осим резервних карактера: ;,/?:@&=+$# слова и карактера: _ . ! ~ * ' ( )[46]

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 је једносмерни вид комуникације између клијента и сервера који заобилази правило истог порекла (може се комуницирати између разнородних домена).

  • често се користе за праћење корисничких кликова
  • мана им је што не постоји могућност слања само GET захтева, и што не постоји могућност обраде серверског текстуалног одговора.[46]

STRICT MODE[46]

  • појавио се са ECMA5 стандардом
  • подржавају га сви актуелни прегледачи
  • омогућава строжију контролу грешака било глобално било на нивоу појединачних функција
  • у стриктни мод се улази навођењем "use strict"; ниске
  • идеја је да се спрече све грешке преко којих може интерпретатор да пређе (silently falls)

Синтакса[уреди]

У овом делу се разматрају најосновније ствари без којих је немогуће било шта креирати везано за Јаваскрипт. Ту се пре свега мисли на Јаваскрипт синтаксу, типове промењљивих, операторе итд.

Унос ЈС кода у 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;

Оператори[уреди]

Оператори у Јаваскрипту представљају симболе, који означавају одређену операцију или релацију и које повезују један или више операнада у један израз (аритметички, логички...). За целобројне типове те операције укључују аритметичке, релацијске и логичке операције. Подржани су и операције које се примењују над појединачним битовима целобројних вредности. Оператори се деле на основу своје парности тј. броја операнада на које се примењују. Унарни оператори делују само на један операнд и могу бити префиксни када се наводе испред операнда и постфиксни када се наводе након операнда. Бинарни операнди имају два операнда и обично су инфиксни тј. наводе се између својих операнада. Постоји и тернарни оператор који се примењује на три операнда.

Приоритет и асоцијативност оператора[уреди]

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

  1. Унарни оператори имају већи приоритет у односу на бинарне.
  2. Постфиксни унарни оператори имају већи приоритет у односу на префиксне унарне операторе.
  3. Аритметички оператори имају приоритет у односу на релацијске који имају приоритет у односу на логичке операторе.
  4. Оператори доделе имају веома низак приоритет.

Друга важна конвенција је асоцијативност оператора која дефинише којим редоследом ће се израчунавати два иста оператора или оператора истог приоритета када се нађу узастопно у истом, незаграђеном изразу. Обично се разликују лева асоцијативност, када се израз израчунава с лева на десно, и десна асоцијативност, када се израз израчунава са десна на лево. Већина оператора има леву асоцијативност (најзначајнији изузеци су префиксни унарни оператори и оператори доделе).

Аритметички оператори[уреди]

Аритметички оператори се користе за извршавање аритметичких операција. Аритметички оператори имају већи приоритет од релацијских (оператори поређења), који имају већи приоритет од логичких оператора.[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]

Симбол Значење
= // додељује вредност променљиве или израза с десне стране променљивој с леве стране (x=y;)
+= // сабира две променљиве (x = x + y;) и додељује збир променљивој с леве стране
-= // одузима две променљиве (x = x - y;) и додељује разлику променљивој с леве стране
*= // множи две променљиве (x = x * y;) и додељује производ променљивој с леве стране
/= // дели две променљиве (x = x / y;) и додељује количник променљивој с леве стране
 %= // целобројно дели две променљиве (x = x % y;) и додељује остатак при дељењу променљивој с леве стране

Оператори поређења[уреди]

Оператори поређења упоређују вредности две променљиве или израза. Сваки израз у коме се користе оператори поређења има логичку вредност: ако је израз тачан, има логичку вредност True, а ако је нетачан логичку вредност False.[51]

Симбол Значење
== // враћа вредност труе ако су променљиве једнаке (x == y)
=== // враћа вредност труе ако променљиве исте вредности и истог типа
 != // враћа вредност труе ако променљиве нису једнаке (x != y)
> // враћа вредност труе ако је променљива с леве стране већа од променљиве с десне стране (x > y)
< //враћа вредност труе ако је променљива с леве стране мања од променљиве с десне стране (x < y)
>= //враћа вредност труе ако је променљива с леве стране већа или једнака од променљиве с десне стране (x >= y)
<= //враћа вредност труе ако је променљива с леве стране мања или једнака од променљиве с десне стране (x <= y)
 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]

  • && - логички AND враћа вредност труе ако су оба израза труе
  • || - логички оператор OR vраћа вредност труе ако је барем један израз труе
  •  ! - логички оператор NOT враћа вредност труе ако је израз фалсе односно фалсе ако је израз труе
 
 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.";

Уколико је вредност променљиве емаил једнака “Да” додељујемо променљивој порука вредност “Примио си пошту.”, у супротном додељујемо јој вредност “Нема поште.”.

Битовски оператори[уреди]

Битовски оператори се користе за рад са појединачним битовима (1 и 0), који се могу примењивати само на целобројне аргументе.[54]

  • ~ - битовска негација - инвертује сваки бит аргумента
  • & - битовска коњункција - врши коњункцију појединачних битова два аргумента
  • | - битовска дисјункција - врши дисјункцију појединачних битова два аргумента
  • ^ - битовска ексклузивна дисјнукција - врши ексклузивну дисјункцију појединачних битова два аргумента
  • << - лево померање (шифтовање) - врши померање битова првог аргумента улево за број прозиција који је наведен као други аргумент
  • >> - десно померање (шифтовање) - врши померање битова првог аргумента удесно за број прозиција који је наведен као други аргумент

Унарни оператор ~ има највећи приоритет и десно асоцијативан је. Приоритет оператора померања је највећи од свих бинарних битовских оператора. Након тога следи & који има већи приоритет од ^ који има већи приоритет од |. Ови оператори имају леву асоцијативност.[54]

   
 x=5 & 1 // 5&1=(1010)&(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; // дефиниција променљиве y и додела вредности 2.

Коментари се у Јаваскрипт-у пишу на следећи на следећи начин.

// кратак коментар у једној линији.
/*
     Дугачак, документацијски коментар.
     Написан у више линија.
*/
/*Коментар /* не сме бити угњежден. */Ово је синтаксна грешка*/

За испис текста на екрану, користи се објекат конзоле. У примеру је дато исписивање текста Здраво Свете.

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 nаредбе. Иф наредба омогућује извршавање неког кода уколико је услов задовољен, а уколико није неће се извршити ништа.[56]

Ако се жели написати да уколико услов у if изразу није задовољен, да се изврши неки други код онда користи се if...else наредба. Вишеструке if…else наредбе се могу угнездити, да би се направила елсе иф наредба.[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 izvrsavaju ako se izraz poklopi sa vrednoscu1
       [break;]
   case vrednost2:
      //Naredbe koje se izvrsavaju ako se izraz poklopi sa vrednoscu2
       [break;]
   case vrednost3:
     //Naredbe koje se izvrsavaju ako se izraz poklopi sa vrednoscu3
       [break;]
      ...
   case vrednostN:
     //Naredbe koje se izvrsavaju 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-ciklus се записује тако да се иза кључне речи 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] Гетер је функција која обезбеђује читање својства. Шта год да ради, на крају мора помоћу директиве ретурн да врати вредност која онда представља вредност својства.[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]

Конструктор[уреди]

Конструктор је посебни метод који се користимо да би се иницијализовао објекат креиран у класи. У класи може постојати само један конструктор иначе програм ђе јавити да постоји грешка.

Extends[уреди]

Extends је кључна реч која се користи код наследјивања класа.

Static[уреди]

Static је кључна реч која дефинисе статичку методу класе. Статичке методе могу бити позване без конструисања њихове класе.

Веб програмирање[уреди]

Основни домен примене Јаваскрипт програмског језика јесте веб програмирање. Пре него што прегледач учита страницу, мора да направи DOM и CSSOM стабла. Прегледач анализира фајл, заправо анализира бајтове и од њих прави карактере, затим груписањем карактера прави токене, од токена чворове, а од чворова објекте.[69] HTML етикете се трансформишу у Објектни модел документа (DOM), а CSS етикете у CSS објектни модел (CSSOM). DOM и CSSOM су независне структуре и њиховим спајањем настаје рендер дрво, које се затим користи за израчунавање особина сваког видљивог елемента, нпр. величина елемента, боја позадине итд. Оптимизација сваког од ових корака је од кључне важности за постизање оптималних перформанси прегледања. DOM описује садржај, а CSSOM описује стил који се примењује. Рендер дрво садржи само чворове потребне за приказивање странице и води рачуна о распореду и тачној величини сваког објекта.[70] Приликом креирања рендер стабла, прегледач отприлике ради следеће:

  • Креће од корена ДОМ стабла и посећује сваки видљиви чвор
    • Неки чворови нису видљиви (нпр. скрипт етикета, мета тагови итд.) и њих не приказује у DOM dрвету јер нису видљиви на страници
    • Неки чворови су сакривени преко CSS-а (display: none) и они се, такође, не приказују у DOM дрвету
  • За сваки видљиви чвор прегледач проналази одговарајућа CSSOM правила и примењује их
  • Приказује видљиве чворова са садржајем и стилизује их[70]

Прегледач страну коју треба да прикаже третира као доцумент, и елементима 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 odgovarajucih atributa na nivou elementa.
            Neki od atributa koji postoje su: 
            onclick - definise 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>

Неке Јаваскрипт библиотеке:

  • jQuery - biblioteka čija je svrha da olakša upotrebu Javaскripta na web stranicama. Slogan ove biblioteke je „пиши мање, уради више”
  • AJAX (asynchronous JavaScript and XML) - група међусобно повезаних техника за развој веба коришћених на клијентској страни за прављење синхроних и асинхроних веб апликација
  • Angular JS - структурални оквир за креирање динамичких wеб страница
  • Modernizr - Јаваскрипт библиотека која детектује „Html5” и Css3 својства у корисничком браузеру.

Употреба у интернет страницама[уреди]

Најчешћа употреба Јаваскрипт-а је додавање динамичности HTML страницама на клијентској страни. Скрипте се укључују у HTML странице и врше интеракцију са објектним моделом докумената (енгл. Document Object Model). Неки од примера употребе Јаваскрипт-а су:

  • Учитавање одређеног дела странице или достављање података серверу преко АЈАКСА (engl. AJAX) без поновног освежавања целе странице (на пример друштвена мрежа вам омогућава ажурирање новог статуса без освежавања целе странице).
  • Анимирање елемената на страници, чинећи их видљивим и невидљивим, мења елементима величину, помера њихов садржај.
  • Убацивање интерактивног садржаја (на пример видео клипова, анимација, видео игрица, аудио садржаја...)
  • Валидација унетог садржаја унутар форми, како би били сигурни да су исправни подаци послати серверу.

Интернет претраживач је најчешће окружење за извршавање Јаваскрипт кода. Интернет претраживачи обично креирају хост објекте за представљање објектног модела докумената у Јаваскрипт-у. Поред интернет претраживача, Јаваскрипт код се може извршити и на серверу.[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]

Осим тога, скрипте не могу да раде за одређене кориснике. На пример корисник може да:

  • Користи стари или редак интернет претраживач са непотпуном или необичном подршком за објектни модел докумената.
  • Користи ПДА (engl. personal digital assistant) или претраживач на мобилном телефону који не може да изврши Јаваскрипт код.
  • Да има онемогућено извршавање Јаваскрипт-а као меру предострожности.

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

Историјат верзија[уреди]

Јаваскрипт је провибтно развијен 1996. године ради коришћења у веб претраживачу Нетскејп навигатор. Исте године Мајкрософт је представио имплементацију Интернет експлорера. Она је названа ЈСкрипт због проблема са ауторским правима. 1997. је представљена прва стандардизована верзија језика под називом ЕКМАСкрипт у оквиру првог издања стандарда ЕКМА-252. Експлицитно верзионисање и укључивање нових компоненти језика је било карактеристично само за Мозилу и касније је напуштен овај принцип. Фајерфокс 4 је последња верзија овог претраживача која је била везана за верзију Јаваскрипта (1.8.5). Са новим верзијама ЕКМА-262 стандарда, компоненте Јаваскрипт језика се помињу заједно са почетном дефиницијом ЕКМА-262 издања.

Следећа табела се заснива на информацијама из више извора.[77][78][79]

Верзија Датум Еквивалентно са Нетскејп
Навигатор
Мозила
Фајерфокс
Интернет
Експлорер
Опера Сафари Гугл
Хром
1.0 Март 1996 2.0 3.0
1.1 Август 1996 3.0
1.2 Јун 1997 4.0-4.05 3[80]
1.3 Октобар 1998 ЕКМА-262 1. + 2. издање 4.06-4.7x 4.0 5[81]
1.4 Нетскејп
Сервер
6
1.5 Новембар 2000 ЕКМА-262 3. издање 6.0 1.0 5.5 (ЈСкрипт 5.5),
6 (ЈСкрипт 5.6),
7 (ЈСкрипт 5.7),
8 (ЈСкрипт 5.8)
7.0 3.0-5 1.0-10.0.666
1.6 Новембар 2005 1.5 + додаци низовима + генератори низова и стрингова + E4X 1.5
1.7 Октобар 2006 1.6 + пајтон генератори + итератори + дозволе 2.0 28.0.1500.95
1.8 Јун 2008 1.7 + генератори израза + затварачи израза 3.0 11.50
1.8.1 1.8 + подршка за Џејсон (енгл. JSON) + мањи додаци 3.5
1.8.2 Јун 22, 2009 1.8.1 + мањи додаци 3.6
1.8.5 Јул 27, 2010 1.8.2 + нове компоненте за слагање са ЕКМА-262 издањем 4.0

Референце[уреди]

  1. 1,0 1,1 Press release announcing JavaScript, "Netscape and Sun announce JavaScript", PR Newswire, December 4, 1995
  2. „Standard ECMA-262”. Ecma International. 17. 06. 2015. 
  3. 3,0 3,1 3,2 „Uvod”. Приступљено 10. 11. 2016. 
  4. „ECMAScript Language Specification” (PDF). 
  5. „ECMAScript Language Overview” (PDF). 23. 10. 2007. стр. 4. Приступљено 03. 05. 2009. 
  6. Severance, Charles (фебруар 2012). „JavaScript: Designing a Language in 10 Days”. Computer. IEEE Computer Society. 45 (2): 7—8. doi:10.1109/MC.2012.57. Приступљено 23. 03. 2013. 
  7. „TechVision: Innovators of the Net: Brendan Eich and JavaScript”. web.archive.org. Архивирано из оригинала на датум 08. 02. 2008. 
  8. „The History of Programming Languages”. oreilly.com. O'Reilly Media. 2004. Приступљено 16. 07. 2016. 
  9. „What Is JavaScript?” (PDF). wiley.com. Wiley. Приступљено 16. 07. 2016. 
  10. Noorda, Brent (21. 09. 2013). „Brent Noorda's Answers on ECMA”. quora.com. Приступљено 16. 07. 2016. 
  11. Noorda, Brent (24. 06. 2010). „History of Nombas”. brent-noorda.com. Приступљено 16. 07. 2016. 
  12. Eich, Brendan (21. 06. 2011). „New JavaScript Engine Module Owner”. brendaneich.com. Приступљено 16. 07. 2016. 
  13. Netscape Communications Corporation (11. 12. 1998). „Server-Side JavaScript Guide”. oracle.com. Netscape Communications Corporation. Приступљено 16. 07. 2016. 
  14. 14,0 14,1 14,2 Champeon, Steve (6. 04. 2001). „JavaScript, How Did We Get Here?”. oreilly.com. Приступљено 16. 07. 2016. 
  15. „Microsoft Internet Explorer 3.0 Beta Now Available”. microsoft.com. Microsoft. 29. 05. 1996. Приступљено 16. 07. 2016. 
  16. McCracken, Harry (16. 09. 2010). „The Unwelcome Return of "Best Viewed with Internet Explorer". technologizer.com. Приступљено 16. 07. 2016. 
  17. „Documentation”. ecmascript.org. Приступљено 16. 07. 2016. 
  18. „Standard ECMA-262, ECMAScript® 2016 Language Specification”. ecma-international.org. јун 2016. Приступљено 16. 07. 2016. 
  19. Crockford, Douglas (2001). „JavaScript, The World's Most Misunderstood Programming Language”. crockford.com. Приступљено 16. 07. 2016. 
  20. Kowal, Kris (1. 12. 2009). „CommonJS Effort Sets JavaScript on Path for World Domination”. arstechnica.com. Приступљено 16. 07. 2016. 
  21. „USPTO Copyright entry #75026640”. USPTO. 
  22. „Sun Trademarks”. Sun Microsystems. Архивирано из оригинала на датум 28. 05. 2010. Приступљено 08. 11. 2007. 
  23. Flanagan (2006). стр. 16.
  24. „JavaScript data types and data structures - JavaScript | MDN”. Developer.mozilla.org. 16. 02. 2017. Приступљено 24. 02. 2017. 
  25. „Inheritance and the prototype chain”. Mozilla Developer Network. Mozilla. Приступљено 6. 04. 2013. 
  26. Herman, David (2013). Effective JavaScript. Addison-Wesley. стр. 83. ISBN 978-0-321-81218-6. 
  27. Haverbeke, Marijn (2011). Eloquent JavaScript. No Starch Press. стр. 95—97. ISBN 978-1-59327-282-1. 
  28. Katz, Yehuda. „Understanding "Prototypes" in JavaScript”. Приступљено 6. 04. 2013. 
  29. Herman, David (2013). Effective JavaScript. Addison-Wesley. стр. 125—127. ISBN 978-0-321-81218-6. 
  30. „Properties of the Function Object”. Es5.github.com. Приступљено 26. 05. 2013. 
  31. Flanagan (2006). стр. 141.
  32. The many talents of JavaScript for generalizing Role-Oriented Programming approaches like Traits and Mixins, Peterseliger.blogpsot.de, April 11, 2014.
  33. Traits for JavaScript, 2010.
  34. „Home | CocktailJS”. Cocktailjs.github.io. Приступљено 24. 02. 2017. 
  35. Angus Croll, A fresh look at JavaScript Mixins, published May 31, 2011.
  36. „Concurrency model and Event Loop”. Mozilla Developer Network. Приступљено 2015-08-28. 
  37. Haverbeke, Marijn (2011). Eloquent JavaScript. No Starch Press. стр. 139—149. ISBN 978-1-59327-282-1. 
  38. Robert Nyman, Getters And Setters With JavaScript – Code Samples And Demos, Robertnyman.com, published 29 May 2009, accessed 2 January 2010.
  39. John Resig, JavaScript Getters and Setters, Ejohn.org, 18 July 2007, accessed 2 January 2010
  40. „E4X – Archive of obsolete content | MDN”. Mozilla Developer Network. Mozilla Foundation. 14. 2. 2014. Приступљено 13. 7. 2014. 
  41. 41,0 41,1 41,2 41,3 41,4 41,5 „Primitivni tipovi” (PDF). Приступљено 16. 11. 2016. 
  42. 42,0 42,1 42,2 42,3 42,4 42,5 42,6 „Fukcije”. Приступљено 18. 11. 2016. 
  43. 43,0 43,1 „Nizovi”. Приступљено 20. 11. 2016. 
  44. 44,0 44,1 44,2 „Date”. Приступљено 05. 12. 2016. 
  45. 45,0 45,1 45,2 45,3 45,4 45,5 „Regularni izrazi”. Приступљено 20. 11. 2016. 
  46. 46,00 46,01 46,02 46,03 46,04 46,05 46,06 46,07 46,08 46,09 46,10 46,11 46,12 „Greske” (PDF). Приступљено 20. 11. 2016. 
  47. 47,0 47,1 47,2 47,3 47,4 47,5 „Sintaksa”. Приступљено 14. 11. 2016. 
  48. „Promenljive”. Приступљено 22. 11. 2016. 
  49. „Aritmeticki operatori”. Приступљено 20. 11. 2016. 
  50. „Operator dodele”. Приступљено 20. 11. 2016. 
  51. „Operatori poredjena”. Приступљено 20. 11. 2016. 
  52. „Logicki operatori”. Приступљено 20. 11. 2016. 
  53. „Uslovni operator”. Приступљено 20. 11. 2016. 
  54. 54,0 54,1 „Bitovski operatori”. Приступљено 20. 11. 2016. 
  55. „var – JavaScript – MDN”. The Mozilla Developer Network. Приступљено 30. 4. 2016. 
  56. 56,0 56,1 56,2 56,3 „If-else”. Приступљено 22. 11. 2016. 
  57. „Switch”. Приступљено 22. 11. 2016. 
  58. „Do while”. Приступљено 22. 11. 2016. 
  59. „While”. Приступљено 22. 11. 2016. 
  60. „For”. Приступљено 22. 11. 2016. 
  61. „For in”. Приступљено 22. 11. 2016. 
  62. „For of”. Приступљено 22. 11. 2016. 
  63. „Break”. Приступљено 22. 11. 2016. 
  64. „Continue”. Приступљено 22. 11. 2016. 
  65. „Import”. Приступљено 22. 11. 2016. 
  66. „Export”. Приступљено 22. 11. 2016. 
  67. 67,0 67,1 67,2 67,3 „Klase”. Приступљено 22. 11. 2016. 
  68. „Prototipsko nasledjivanje”. Приступљено 18. 11. 2016. 
  69. „Objekti”. Приступљено 01. 12. 2016. 
  70. 70,0 70,1 „Veb”. Приступљено 01. 12. 2016. 
  71. „Dogadjaji”. Приступљено 01. 12. 2016. 
  72. 72,0 72,1 72,2 72,3 72,4 „Veb”. Приступљено 01. 12. 2016. 
  73. „JavaScript tracking – Piwik”. Piwik. Приступљено 30. 4. 2016. 
  74. Peter-Paul Koch, Object detection
  75. Peter-Paul Koch, Mission Impossible – mouse position
  76. Peter-Paul Koch, Browser detect
  77. „JavaScript – JScript – ECMAScript version history”. Webmasterworld.com. Приступљено 30. 4. 2016. 
  78. Resig, John. „Versions of JavaScript”. Ejohn.org. Приступљено 30. 4. 2016. 
  79. „Version Information (JScript)”. Msdn.microsoft.com. Приступљено 30. 4. 2016. 
  80. „History of the Opera web browser”. www.opera.com. Приступљено 30. 4. 2016. 
  81. „What Version of JavaScript”. 

Литература[уреди]

  • Bhangal, Sham; Jankowski, Tomasz (2003). Foundation Web Design: Essential HTML, JavaScript, CSS, PhotoShop, Fireworks, and Flash. APress L. P. ISBN 1-59059-152-6. 
  • Burns, Joe; Growney, Andree S. (2001). JavaScript Goodies. Pearson Education. ISBN 0-7897-2612-2. 
  • Duffy, Scott (2003). How to do Everything with JavaScript. Osborne. ISBN 0-07-222887-3. 
  • Flanagan, David (2006). JavaScript: The Definitive Guide (5th изд.). O'Reilly & Associates. ISBN 0-596-10199-6. 
  • Flanagan, David (2011). JavaScript: The Definitive Guide (6th изд.). O'Reilly & Associates. ISBN 978-0-596-80552-4. 
  • Goodman, Danny; Eich, Brendan (2001). JavaScript Bible. John Wiley & Sons. ISBN 0-7645-3342-8. 
  • Goodman, Danny; Markel, Scott (2003). JavaScript and DHTML Cookbook. O'Reilly & Associates. ISBN 0-596-00467-2. 
  • Harris, Andy (2001). JavaScript Programming for the Absolute Beginner. Premier Press. ISBN 0-7615-3410-5. 
  • Haverbeke, Marijn (2011). Eloquent JavaScript. No Starch Press. ISBN 978-1-59327-282-1. 
  • Heinle, Nick; Koman, Richard (1997). Designing with JavaScript. O'Reilly & Associates. ISBN 1-56592-300-6. 
  • Husted, Robert; Kuslich, JJ (1999). Server-Side JavaScript: Developing Integrated Web Applications (1st изд.). Addison-Wesley. ISBN 0-201-43329-X. 
  • McDuffie, Tina Spain (2003). JavaScript Concepts & Techniques: Programming Interactive Web Sites. Franklin, Beedle & Associates. ISBN 1-887902-69-4. 
  • McFarlane, Nigel (2003). Rapid Application Development with Mozilla. Prentice Hall Professional Technical References. ISBN 0-13-142343-6. 
  • Powell, Thomas A.; Schneider, Fritz (2001). JavaScript: The Complete Reference. McGraw-Hill Companies. ISBN 0-07-219127-9. 
  • Shelly, Gary B.; Cashman, Thomas J.; Dorin, William J.; Quasney, Jeffrey J. (2000). JavaScript: Complete Concepts and Techniques. Cambridge: Course Technology. ISBN 0-7895-6233-2. 
  • Vander Veer, Emily A. (2004). JavaScript For Dummies (4th изд.). Wiley Pub. ISBN 0-7645-7659-3. 
  • Watt, Andrew H.; Watt, Jonathan A.; Simon, Jinjer L. (2002). Teach Yourself JavaScript in 21 Days. Pearson Education. ISBN 0-672-32297-8. 
  • Zakas, Nicholas C. (2012). Professional JavaScript for Web Developers (3rd изд.). Wrox. ISBN 978-1-118-02669-4. 

Спољашње везе[уреди]