Јаваскрипт или Џаваскрипт (енгл.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]
Maskota JavaScript-a
Прихватање Јаваскрипта од стране Мајкрософта[уреди | уреди извор]
Мајкрософт је 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]
Са порастом једностраничних апликација и напредних Јаваскрипт сајтова, повећано је његово коришћење од стране компајлера како за динамичке тако и за статичке програмске језике.
Јаваскрипт подржава већи део структуриране синтаксе програмског језика 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 наредбе објектима који треба да садрже додатно понашање које се не дели кроз ланац прототипова.
Композиција објеката и наслеђивање
Иако експлицитна делегација заснована на функцијама покрива композицију објеката у ЈаваСкрипт-у, имплицитна делегација се већ обавља сваки пут када се ланац прототипова проширује како би, нпр. пронашли методу која је потенцијално повезана али не и у директној вези са објектом. Када се метода једном пронађе, она се позива у контексту објекта. На овај начин је наслеђивање у ЈаваСкрупт-у покривено аутоматизмом делегације који се везује за својства прототипа у оквиру функција у конструктору.
ЈаваСкрипт се најчешће ослања на извршно окружење (нпр. Веб претраживач) как оби обезбедило објекте и методе помоћу којих скрипте врше интеракцију са окружењем (нпр. Објектни модел документа веб странице). Такође се на извршно окружење ослања и да би обезбедили могућност укључивања скрипти (нпр. помоћу HTMLscript елемента). Ово није особина самог програмског језика, иако је заједничка карактеристика многих ЈаваСкрипт имплементација.
ЈаваСкрипт обрађује поруке из реда једну по једну. Пре него што учита нову поруку, ЈаваСкрипт позива функцију везану за ову поруку, чиме се креира оквир позивног стека (аргументи функције и локалне променљиве). Позивни стек се шири и расте у зависности од потреба функције. Пре самог изврђавања функције, када је стек празан, ЈаваСкрипт наставља са обрадом следеће поруке у реду. То се још назива и петљом догађаја (енгл.event loop) и описује као "скок на завршетак" јер је свака порука у потпуности обрађена пре него што се у обзир узме следећа порука. Без обзира на то, модел конкурентности програмског језика дефинише да петља догађаја не блокира само извршавање: улазно/излазне операције програма се одвијају путем догађаја и повратних функција. То значи, на пример, да ЈаваСкрипт може да обради клик мишем док чека да упит над базом података врати тражену информацију.[36]
Варијативне функције
Функцији може бити прослеђен неограничен број аргумената. Функција им приступа путем формалних параметара или кроз локални arguments објекат. Варијативне функције се такође могу креирати и помоћу bind методе.
Низ и литерали објеката
Као и код многих програмских језика, низови и објекти (асоцијативни низови у другим језицима) се могу креирати помоћу скраћене синтаксе. Заправо, ови литерали формирају базу JSON формата података.
Регуларни изрази
ЈаваСкрипт такође подржава регуларне изразе на начин сличан ономе у програмском језику Перл, који пружа прецизну и снажну синтаксу за манипулацију текстом која је доста напреднија од уграђених функција знаковних низова.[37]
Развојем ЈаваСкрипт програмског језика управља Мозила Фондација, док се нове функционалности периодично додају језику. Међутим, само одређени покретачи ЈаваСкрипт-а подржавају ове нове функционалности:
Појам Ванила Јаваскрипт или Ванила ЈС се односи на Јаваскрипт који није проширен неким фрејмворком или додатним библиотекама. Скрипт написан Ванила Јаваскриптом је чист Јаваскрипт код.
Бројеви: све вредносте су представљене као реални бројеви (64 бита, IEEE 754 стандард). У случају прекорачења (overflow) генерише се +/- Infinity.[41] У случају поткорачења (underflow) генерише се 0/ "negative zero". Дељење нулом не резултира грешком осим у случају 0/0 – тада се генерише NaN. Infinity и NaN су глобалне променљиве које се могу само читати.
Стрингови су непроменљиве секвенце 16-битних вредности, углавном Уникодних карактера и морају бити под двоструким или једноструким наводницима ("string", '123str45', "vise reci", ...). Такође, битно је запамтити да индекси крећу од нуле, а не од јединице.[41] Стринг може садржати и HTML кодове, као и следеће специјалне текст ознаке:
null - представља недостајућу вредност (језичка кључна реч);[41] undefined - представља недостајућу вредност (глобална променљива која се може само читати); добија се као резултат приступа својствима или елементима низа који не постоје или као резултат функција које немају ретурн.[41] Ово је можда мало збуњујуће, али битно је запамтити да је undefined сам по себи (недефинисан) тип, а null је објекат.
Објекти су све преостало, односно, неуређена колекција именованих вредности (својстава). Они су динамичке природе и за разлику од примитивних типова преносе се по референци, а не по вредности. Сваки пут када се интерпретер покрене или се учита нова страна у прегледачу, креира се нешто што се зове глобални објекат и на нивоу њега се дефинишу и иницијализују својства типа undefined, NaN, глобалне функције типа isNaN(), parseInt(), конструктори као што су Date(), Array(), String(),..., глобални објекти ко што су Math, JSON,... Резервисана реч којом се у глобалном опсегу може реферисати на овај објекат је this. На нивоу прегледача то је Виндоус објекат који се може реферисати са window.[41]
У програмирању се често долази у ситуацију у којој се део програма понавља на више различитих места. Постоји потреба да се тај део програма издвоји и да се позива по потреби. То се остварује помоћу функција. Функције представљају потпрограме који углавном враћају резултат неког израчунавања. Враћање резултата није обавезно.[42] Да би се користила функција, она се мора декларисати. Декларација обавезно садржи кључну реч function. После ње се може навести назив функције, а онда обавезно заграде унутар којих се може навести листа формалних аргумената. Коначно, обавезно се наводе витичасте заграде унутар којих се може навести тело функције, односно њене наредбе.[42]
Наредбе унутар функције се не извршавају док се функција не позове. Позив функције се обавља једноставно навођењем назива функције и, обавезно, заграда унутар којих се може навести листа аргумената.[42]
Приликом декларације функције може се навести листа параметара. Листа параметара је обично списак променљивих.
functionzbir(a,b){varrezultat=a+b;}
У наведеном примеру a и b су локалне промениљиве у функцији. Функција узима прослеђене параметре, у овом случају два броја и враћа њихов збир. Функција као парамтере може узимати неке вредности или референце на објекте. У програму могу несметано постојати истоимене променљиве докле год су у различитом локалном опсегу.[42]
Формални параметри су они који се наводе у декларацији функције и који се користе када се пише тело функције. Стварни аргумент су конкретне вредности које се наводе. При позиву функције битно је да парамтери имају вредности.
zbir(5,2);zbir(x,y*4);
У класичном програмирању важи да се стварни и формални параметри морају поклопити по броју, типу и редоследу. Јаваскрипт дозвољава одступање од овог правила. То значи да је дозвољено да се наведе више стварних аргумената него што је предвиђено (вредности вишкова се игноришу), или да их има мање (у функцији ће недостајући параметри имати вредност undefined). Пошто Јаваскрипт није строго типизиран језик, не постоји начин да се програмер натера да користи тачно одређене типове при позиву функције. То што је оваква пракса дозвољена не значи да је пожељна.[42]
Унутар функције се на једном или више места може навести наредба return, после које се наводи вредност која се враћа као резултат функције. Важно је нагласити да чим се у извршавању функције наиђе на наредбу return, функција прекида све и остале наредбе ће бити игнорисане.[42]
Вредност функције се може користити унутар израза.
varp=zbir(a-10,zbir(c*2,b)/2);
Пример функције која рачуна квадрат броја
functionkvadratBroja(x){returnx*x;}---x=kvadratBroja(5);/* poziv funkcije */document.write("Kvadrat od 5 je "+x);//u HTML dokumentu ispisuje vrednost---Kvadratod5je25
Јаваскрипт Array објекат је глобални објекат који се користи као конструктор за креирање низова.[43]
//kreiranje nizavarniz=[1,2,3,"Soldier of fortune"];//ilivarnovi_niz=newArray(4,5,"I can't make you love me");varn=niz.length;// u promenljivu n upisujemo dužinu nizavarprvi=niz[0];// prvi sadrži 1, tj. prvi element nizavarposlednji=niz[niz.length-1];//poslednji sadrži "Soldier of fortune", tj. poslednji element niza//for je kolekcijskiniz.forEach(function(itemindexarray)){console.log(item,index);});/*1 0 2 1 3 2 "Soldier of fortune" 3*///dodavanje elementa na kraj nizavarkraj=niz.push("Tears in heaven");// niz: [1, 2, 3, "Soldier of fortune", "Tears in heaven"]//brisanje elementa sa kraja nizavarposlednji=niz1.pop();//niz: [1, 2, 3, "Soldier of fortune"]//brisanje elementa sa pocetka nizavarprvi=niz1.shift();//niz: [2, 3, "Soldier of fortune"]//dodavanje na pocetak nizavarnovi_niz=niz1.unshift("Wish you were here");//niz: ["Wish you were here", 2, 3, "Soldier of fortune"]//pronalaženje pozicije na kojoj se element nalazivarpozicija=niz1.indexOf(2);//1//brisanje elementa koji se nalazi na zadatoj pozicijivarniz1_bez_dvojke=niz1.splice(pos,1);//niz: ["Wish you were here", 3, "Soldier of fortune"]//pravljenje kopije nizavarkopija=niz1.slice();//kreiranje visedimenzionih nizovavarvisedimenzioni_niz=[["Ali","sreca","je","uvek","bila","tamo"],["gde","je","neko","umeo","da","voli"],["i","ziveo","za","svoja","osecanja"]];//pristupanje elementimavarelement=visedimenzioni_niz[1][5];//"voli"varprvi_element=visedimenzioni_niz[0];//["Ali", "sreca", "je", "uvek", "bila", "tamo"]//primervarvrednost=[];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"*/
Сваки од прегледача има свој подразумевани начин реаговања на грешке, нпр. Фајерфокс и Кроум уписују грешке у лог датотеку, док рецимо Интернет Експлорер и Опера генеришу обавештења за корисника. Због удобности рада корисника потребни су механизми који би омогућили руковање с грешкама.[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()
Уписивање у централизовани лог систем (на страни сервера): сваки пут када се грешка јави може се генерисати AJAX позив који садржи тип грешке и позив грешке; тако се лакше може пратитит понашање апликације на страни клијената.[46]
//image pings tj. slanje zahteva preko img objektafunctionlogerror(type,message){varimg=newImage();imgsrc="log.php?type="+encodeURIComponent(type)+"&message="+encodeURIComponent(message);}ukodu...catch(error){if(errorinstanceofSyntaxError){logerror("syntax","Description:"+error.message);}...}
Image pings је једносмерни вид комуникације између клијента и сервера који заобилази правило истог порекла (може се комуницирати између разнородних домена).
често се користе за праћење корисничких кликова
мана им је што не постоји могућност слања само GET захтева, и што не постоји могућност обраде серверског текстуалног одговора.[46]
У овом делу се разматрају најосновније ствари без којих је немогуће било шта креирати везано за Јаваскрипт. Ту се пре свега мисли на Јаваскрипт синтаксу, типове промењљивих, операторе итд.
Постоје две могућности: писањем директно у HTML код или смештањем у посебан фајл (екстензија .js) који се потом позива у HTML документу. Оба начина су правилна и не постоји разлика у раду скрипта. Позивање спољашњег фајла је добро у случајевима када се једна иста скрипта користи у више страница.[47] Браузер чита HTML страницу и приказује елементе онако како они наилазе. Када наиђе на скрипт у страници, обавља се његово извршавање пре него што се настави читање осталих елемената (текст, слике...).[47]
Примери
Јаваскрипт писан у HTML документу:
<html><body><scripttype="text/javascript">document.write("Ovo je moj prvi JavaScript!");</script></body></html>
Постоје различити начини позивања Јаваскрипт кода, тј. различита места где се он може сместити у страници. Први начин је да се Јаваскрипт код стави у <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]
локалне - видљеве су само у блоку у ком су декларисане
глобалне - видљиве су у целом програму
Ако се променљива декларише у оквиру неке функције без кључне речи вар, сматра се да је та променљива глобална, тј. видљива је у целом коду.[47]
functionprimer1(){a=1;}varb=a+2;
Дакле, a је глобална и могуће јој је приступити.
vara=1;functionprimer2(){varb=a+2;}
И у овом примеру је могуће приступити променљивој a јер је глобална.
Међутим, у следећем примеру то неће бити могуће, јер се а сматра локалном променљивом.
Оператори у Јаваскрипту представљају симболе, који означавају одређену операцију или релацију и које повезују један или више операнада у један израз (аритметички, логички...). За целобројне типове те операције укључују аритметичке, релацијске и логичке операције. Подржани су и операције које се примењују над појединачним битовима целобројних вредности. Оператори се деле на основу своје парности тј. броја операнада на које се примењују. Унарни оператори делују само на један операнд и могу бити префиксни када се наводе испред операнда и постфиксни када се наводе након операнда. Бинарни операнди имају два операнда и обично су инфиксни тј. наводе се између својих операнада. Постоји и тернарни оператор који се примењује на три операнда.
Изрази могу да обухватају више оператора и заграде и користе се да би одредиле којим редоследом их треба примењивати. Постоје конвенције које омогућавају изостављање заграда. Једна од основних таквих конвенција је приоритет оператора који дефинише којим редоследом ће се два различита оператора примењивати када се нађу у истом, незаграђеном изразу. Наки од основних принципе у дефинисању приоритета:
Унарни оператори имају већи приоритет у односу на бинарне.
Постфиксни унарни оператори имају већи приоритет у односу на префиксне унарне операторе.
Аритметички оператори имају приоритет у односу на релацијске који имају приоритет у односу на логичке операторе.
Оператори доделе имају веома низак приоритет.
Друга важна конвенција је асоцијативност оператора која дефинише којим редоследом ће се израчунавати два иста оператора или оператора истог приоритета када се нађу узастопно у истом, незаграђеном изразу. Обично се разликују лева асоцијативност, када се израз израчунава слева надесно, и десна асоцијативност, када се израз израчунава здесна налево. Већина оператора има леву асоцијативност (најзначајнији изузеци су префиксни унарни оператори и оператори доделе).
Аритметички оператори се користе за извршавање аритметичких операција. Аритметички оператори имају већи приоритет од релацијских (оператори поређења), који имају већи приоритет од логичких оператора.[49]
Оператор
Опис
+
унарни плус и сабирање
-
унарни минус и одузимање
*
множење
/
дељење
%
модуо
++
инкрементирање
--
декрементирање
**
степен
Унарни + је еквивалентан позиву Number() конструктора, тј. претвара свој операнд у бројни тип. Унарни - ради исто то и након тога негира вредност. Унарни - се углавном користи када желимо да користимо негативне бројеве.
Бинарни + се може користити и за конкатенацију стрингова.
Оператор инкрементирања повећава вредност операнда за 1, а декрементирања смањује за 1. Ови оператори могу бити префиксни и постфиксни. Префиксни оператор инкрементирања увећа вредност операнда и врати је, а постифксни оператор инкерментирања прво врати вредност операнда, па је тек онда увећа. Слично је и са декрементирањем.
vara=3document.write(++a)//postavlja a na 4 i upisuje 4varb=3document.write(b++)//upisuje 3 i postavlja b na 4document.write(b)//upisuje 4document.write(--a)//postavlja a na 3 i upisuje 3document.write(b--)//upisuje 4 i postavlja b na 3document.write(b)//upisuje 3
Вредности променљивама додељују се коришћењем оператора доделе. Најчешћи оператор додељивања је знак једнако “=”. Оператор доделе може се писати заједно са бинарним аритметичким операторима.[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)
Логички оператори примењују се над истинитосним вредностима, које се представљају коришћењем бројевних вредности. Уколико је број једнак 0, онда је његова логичка вредност једнака 0 (нетачно), а иначе је његова логичка вредност једнака 1 (тачно). Резултат израчунавања тачно није произвољна вредност различита од нула, већ искључиво један. Постоје следећи логички оператори:[52]
&& - логички AND враћа вредност труе ако су оба израза труе
|| - логички оператор OR vраћа вредност труе ако је барем један израз труе
! - логички оператор NOT враћа вредност труе ако је израз фалсе односно фалсе ако је израз труе
Условни оператор испитује да ли је услов испуњен (вредност true), ако јесте додељује вредност након упитника, у супротном додељује вредност након двотачке.[53]
poruka=(email=="Da")?"Primio si poštu.":"Nema pošte.";
Уколико је вредност променљиве емаил једнака “Да” додељујемо променљивој порука вредност “Примио си пошту.”, у супротном додељујемо јој вредност “Нема поште.”.
Битовски оператори се користе за рад са појединачним битовима (1 и 0), који се могу примењивати само на целобројне аргументе.[54]
~ - битовска негација - инвертује сваки бит аргумента
& - битовска конјункција - врши конјункцију појединачних битова два аргумента
| - битовска дисјункција - врши дисјункцију појединачних битова два аргумента
^ - битовска ексклузивна дисјнукција - врши ексклузивну дисјункцију појединачних битова два аргумента
<< - лево померање (шифтовање) - врши померање битова првог аргумента улево за број прозиција који је наведен као други аргумент
>> - десно померање (шифтовање) - врши померање битова првог аргумента удесно за број прозиција који је наведен као други аргумент
Унарни оператор ~ има највећи приоритет и десно асоцијативан је. Приоритет оператора померања је највећи од свих бинарних битовских оператора. Након тога следи & који има већи приоритет од ^ који има већи приоритет од |. Ови оператори имају леву асоцијативност.[54]
x=5&1// 5&1=(0101)&(0001)=(0001) pa je razultat 1x=5|1// 5|1=(0101)|(0001)=(0101) pa je razultat 5x=~5// 5=0101 bitovski ~5=1010 sto je 10x=5^1// (0101)^(0001)=(0100) pa je rezultat 4x=5<<1// 5=0101 a kada 5 siftujemo za jedan ulevo dobijamo 1010 sto je 10x=5>>1// 5=0101 a kada 5 siftujemo za jedan udesno dobijamo 0010 sto je 2
Променљиве се у Јаваскрипту дефинишу са кључном речи var.[55]
varx;// дефиниција променљиве x. Почетна вредност ове променљиве је недефинисана (eng. undefined).vary=2;// дефиниција променљиве у и додела вредности 2.
Коментари се у Јаваскрипт-у пишу на следећи на следећи начин.
// кратак коментар у једној линији./* Дугачак, документацијски коментар. Написан у више линија.*//*Коментар /* не сме бити угњежден. */Овојесинтакснагрешка*/
За испис текста на екрану, користи се објекат конзоле. У примеру је дато исписивање текста Здраво Свете.
console.log("Zdravo Svete.");
Искази if, else и else if
// if исказ се користи ради активирања одређених наредби ако је одређени услов задовољен.functionfunkcija4(){varboja=prompt("Koju boju najviše voliš?")if(boja=="rozu"){alert("Verovatno si žensko");}}// else исказ се извршава онда када if услов није задовољен.functionfunkcija2(){varbroj=prompt("Unesite bilo koji broj!")if(broj<=10){alert("Uneli ste broj manji od 10");}elsealert("Uneli ste broj veći od 10")}// else if исказ је веома користан јер дозвољава да се наведе више од једног услова.varvisitor="";if(visitor=="Drago"{document.write("Pozdrav Drado...");}elseif(visitor=="Miloje"){document.write("Pozdrav Miloje...");}elseif(visitor=="Laki"){document.write("Pozdrav Laki...");}else{document.write("Pozdrav posetioče...");}
Овај узорак кода приказује разне Јаваскрипт функције.
functionLCMCalculator(x,y){varcheckInt=function(x){if(x%1!==0){thrownewTypeError(x+" is not an integer");}returnx;};this.a=checkInt(x)this.b=checkInt(y);}LCMCalculator.prototype={constructor:LCMCalculator,gcd:function(){vara=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(){returna;};returna;},lcm:function(){varlcm=this.a/this.gcd()*this.b;this.lcm=function(){returnlcm;};returnlcm;},toString:function(){return"LCMCalculator: a = "+this.a+", b = "+this.b;}};functionoutput(x){document.body.appendChild(document.createTextNode(x));document.body.appendChild(document.createElement('br'));}[[25,55],[21,56],[22,58],[28,56]].map(function(pair){returnnewLCMCalculator(pair[0],pair[1]);}).sort(function(a,b){returna.lcm()-b.lcm();}).forEach(function(obj){output(obj+", gcd = "+obj.gcd()+", lcm = "+obj.lcm());});
Котроле тока омогућавају ток програма жељеном путањом у складу са одређеним условима.
Основне контроле тока у Јаваскрипту су веома сличне основним контролама тока у вишим програмским језицима. Осим њих, постоје и контроле тока специфичне само за Јаваскрипт језик.
Омогућава извршавање одређеног блока инструкција, ако је задати услов испуњен.[56]
Sintaksa:if(logičkiizraz)blok1;[elseblok2;]
if...else наредба је проширење if nаредбе. Иф наредба омогућује извршавање неког кода уколико је услов задовољен, а уколико није неће се извршити ништа.[56]
Ако се жели написати да уколико услов у if изразу није задовољен, да се изврши неки други код онда користи се if...else наредба. Вишеструке if…else наредбе се могу угнездити, да би се направила елсе иф наредба.[56]
Switch наредба упоређује израз у загради са ведностима у случајевима, ако је израз једнак некој од вредности у случају тада се извршавају наредбе у оквиру њега.[57]
Sintaksa:logičkiIzraz?izraz1:izraz2;
где је израз logički_izraz било који израз чији резултат је вредност логичког типа. Ако је резултат израза true, онда се извршава izraz1, у супротном izraz2.
Sintaksa:switch(izraz){casevrednost1://Naredbe koje se izvrsavaju ako se izraz poklopi sa vrednoscu1[break;]casevrednost2://Naredbe koje se izvrsavaju ako se izraz poklopi sa vrednoscu2[break;]casevrednost3://Naredbe koje se izvrsavaju ako se izraz poklopi sa vrednoscu3[break;]...casevrednostN://Naredbe koje se izvrsavaju ako se izraz poklopi sa vrednoscuN[break;]}
Do...while наредбом се креира петља која извршава наредбе док је условна наредба тачна. Услов се тестира након извршења наредбе, што значи да се наредба мора извршити бар једном.[58]
For-ciklus се записује тако да се иза кључне речи for, запишу у заградама три опциона израза међусобно одвојена тачка-зарезом, а иза њих наредба која чини тело петље.[60]
Izraz1 се типично користи за иницијализацију бројача, izraz2 за услов, а izraz3 за инкрементацију.
Наравно ови изрази су опциони, тако да се могу и изоставити у зависности од проблема.
Користи се за обилазак итерабилног објекта (укључујући низ, мапу, стринг…), позивајући посебну итерацију и извршавајући наредбе за сваки члан објекта.[62]
Ова наредба зауставља извршавање петље на тренутној итерацији и наставља њено изшавање на следећем итерираном елементу[64]
Sintaksa:continue[labela];
Лабела опциона и везана са лабелом наредби у петљи. Continue наредба не зауставља извршавање као break већ у случају while петље проверава поново услов, а у случају for петље иде на наредбу итерације.
Класе су посебне “функције” које се дефинишу у телу програма. Један од начина дефинисања класе је коришћењем декларације класе. Да би се декларисала класа користи се кључну реч class након чега следи име класе, затим у заградама тело класе.[67]
Главна разлика између декларације функције и декларације класе је у томе што класу мора прво да се декларише па онда да јој приступимо, иначе ће се јавити грешка (Reference Error). Класе, као и функције, могу бити анонимне. Значи, могуће их је навести и без конкретног назива, као и правити референцу на класу.
Такође, класе је могуће и прослеђивати као параметар или враћати као вредност функције. Функција која прима класу као параметар, онда креира нову класу која наслеђује задату класу и коју онда враћа би изгледала овако:
Укратко, гетери и сетери су функције које служе за напредно дефинисање својства. Оне практично представљају „прву линију одбране” својства, тачније спречавају програмере да приступају својствима као „голим” подацима.[67]Гетер је функција која обезбеђује читање својства. Шта год да ради, на крају мора помоћу директиве ретурн да врати вредност која онда представља вредност својства.[67] Слично, сетер је функција која се позива када се задаје вредност својства. Ова функција мора имати један параметар који представља задату вредност.[67] Негде „у позадини” се та вредност бележи - најчешће у неком својству објекта, које се не „експонира”. Наравно, Јаваскрипт нема механизам којим би се својство заиста сакрило, тако да је у питању просто конвенција - договор.
Објекти у Јаваскрипту имају уграђени механизам наслеђивања кроз такозвано прототипско наслеђивање. То је посебан стил објектно-оријентисаног програмирања који чак није ни јединствен за Јаваскрипт. Прототипско наслеђивање се заснива на делегирању. Сваки објекат има своја својства и методе, али и посебну везу ка родитељском објекту који онда представља његов прототип од кога наслеђује својства и методе. Сувишно је рећи - и тај родитељски објекат такође има свој прототип и тако даље. Када се приступа нпр. одређеном методу објекта, ако га објекат нема, он се „тражи” у његовом прототипу, па у прототипу прототипа и тако све до краја ланца.[68]
Конструктор је посебни метод који се користимо да би се иницијализовао објекат креиран у класи. У класи може постојати само један конструктор иначе програм ђе јавити да постоји грешка.
Основни домен примене Јаваскрипт програмског језика јесте веб програмирање. Пре него што прегледач учита страницу, мора да направи 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(). На пример:
varp=document.createElement("p");//atributu title dodeljujemo vrednost Napravljen pomocu JS-ap.setAttribute("title","Napravljen pomocu JS-a");//pravimo cvor koji sadrzi Zdravo svimavartext=document.createTextNode("Zdravo svima");//da bi ovaj cvor bio vidljiv potrebno je da ga nadovezemo na pp.appendChild(text);//medjutim, ovo i dalje nije vidljivo jer nismo sve to nadovezali na bodydocument.body.appendChild(p);
Помоћу овог механизма могу се креирати сви елементи (нпр. неуређену/уређену листу), али све то се може урадити и само помоћу HTML-а и CSS-а. Оно што Јаваскрипт разликује од HTML-а и CSS-а јесте чињеница да ЈС подржава и акције, односно, догађаје који се реализују када се клинке не неки елемент или се страница затвори итд. То је показано на следећем примеру:[71]
<!DOCTYPEhtml><html><head><title>Pridruživanjedogađaja</title><metacharset='UTF-8'><styletype='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><inputtype='button'id='dugme'value='klik za pregled poruke'onclick='prikazi_poruku()'><br/><br/><divclass='dugme'id='moderno_dugme'>klikzapregledporuke</div>;<br/><!--thisprilikomovognavodjenjapredstavljaceoinputelementpasemozepristupitisvimnjegovimsvojstvima-uovomslucajusefunkcijiprikaziprosledjujetekucitekstualnisadrzajelementa-->Unesitetekst(kadaelementizgubifokusprikazacesenjegovsadrzaj):<br/><inputtype='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*/<scripttype='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 ..... ..... */functionprikazi_poruku(){//window je objekat koji predstavlja ceo prozor pregledacawindow.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 */varmoderno_dugme=document.querySelector('#moderno_dugme');moderno_dugme.onclick=function(){window.alert("Poruka!");}functionprikazi(tekst){window.alert("Novi sadrzaj je: "+tekst);}</script></body> </html>
У наставку следе неки једноставнији примери примене ЈСа кроз веб програмирање.[72]
<!DOCTYPEhtml><html><head><title>Kalkulator</title></head><body>a:<inputtype="text"id="a"onkeyup="izracunaj()"><br/>b:<inputtype="text"id="b"onkeyup="izracunaj()"><br/>rez:<outputid="rez"for="a b"></output><br/><!--Inacin:<inputtype="button"value="+"onclick="izracunaj('+')"><inputtype="button"value="-"onclick="izracunaj('-')"><inputtype="button"value="*"onclick="izracunaj('*')"><inputtype="button"value="/"onclick="izracunaj('/')"><inputtype="button"value="koren"onclick="izracunaj('koren')">--><!--IInacin:--><selectid="operacija"onchange="izracunaj()"><optionvalue="+">+</option><optionvalue="-">-</option><optionvalue="*">*</option><optionvalue="/">/</option><optionvalue="koren">koren</option></select><br/><spanid="greska"></span><scripttype="text/javascript">functionizracunaj(){vara=document.getElementById("a");varb=document.getElementById("b");varop=document.getElementById("operacija").valuevarrez=document.getElementById("rez");varerr=document.getElementById("greska");a1=parseInt(a.value);b1=parseInt(b.value);if(isNaN(a1)||isNaN(b1)){if(isNaN(a1))a.focus();elseb.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;}elserez.value=(a1/b1).toPrecision(2);break;case'koren':if(a1<0){err.textContent="Vrednost ne sme biti negativna!";a.focus();return;}elserez.value=Math.sqrt(a1);break;}}err.innerHTML="Sve je ok!";}</script></body></html>
<!DOCTYPEhtml><html><head><title>Godisnjadoba></title><styletype="text/css">img{height:200px;width:200px;}</style></head><body><imgsrc='prolece.jpg'alt="prolece"><br/><inputtype="button"value="napred"onclick="napred()"><inputtype="button"value="nazad"onclick="nazad()"><inputtype="button"value="start slideshow"onclick="slideshow()"id="slide"><scripttype="text/javascript">window.slike=newArray("prolece.jpg","leto.jpg","jesen.jpg","zima.jpg");//ovo je globalnovari=0;//ovo je takodje globalnovarelem=document.getElementsByTagName("img")[0];vartimer;functionnapred(){i=(i+1)%slike.length;elem.src=slike[i];elem.alt=slike[i];}functionnazad(){if(i-1==-1)i=slike.length-1;elsei=i-1;elem.src=slike[i];elem.alt=slike[i];}functionslideshow(){timer=setInterval("napred()",1000);varelem=document.getElementById("slide");elem.value="stop slideshow";elem.onclick=stopslideshow;}functionstopslideshow(){clearInterval(timer);varelem=document.getElementById("slide");elem.value="start slideshow";elem.onclick=slideshow;}</script></body></html>
<!DOCTYPEhtml><html><head><metacharset='UTF-8'><title>Pogadjanjereci</title></head><body>trenutnarec:<br/><inputtype="text"id="trenutnaRec"><br/>slovo:<br/><inputtype="text"id="slovo"><br/>brojpokusaja:<br/><inputtype="text"id="brojPokusaja"readonly><br/><inputtype="button"value="zameni"onclick="zameni()"id="zameni"><scripttype="text/javascript">window.tacnaRec="programiranje";window.trenutnaRecNiz=newArray();for(vari=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;functionzameni(){varslovo=document.getElementById("slovo").value.trim();//izdvajamo slovo i usput izbaucjemo vodece belineif(slovo.length!=1){window.alert("Morate uneti slovo!");return;}for(vari=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 Javаск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><metacharset="utf-8"><title>Minimal Example</title><body><h1id="header">Ovo je Javaskript</h1><script>document.body.appendChild(document.createTextNode('Zdravo Svete!'));varh1=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]
Shelly, Gary B.; Cashman, Thomas J.; Dorin, William J.; Quasney, Jeffrey J. (2000). JavaScript: Complete Concepts and Techniques. Cambridge: Course Technology. ISBN978-0-7895-6233-3.
Vander Veer, Emily A. (2004). JavaScript For Dummies (4th изд.). Wiley Pub. ISBN978-0-7645-7659-1.
