JAVASCRIPT

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

Резервисане речи
У JavaScript-у, као и у сваком језику, постоје речи које се посебно издвајају од других. То су
резервисане речи, односно, речи које се не могу користити као променљиве у скрипту. Оне имају
своје изворно значење и само тако се могу користити. Ово је листа таквих речи:
Резервисана реч Основно значење
break Прекида извршење циклуса
continue Прекида тренутну итерацију и покреће следећу у циклусу
debugger Прекида извршавање скрипта и покреће дибагер
do ... while Циклус са условом на крају, извршава се док је услов испуњен
for Циклус са условом на почетку, извршава се док је услов испуњен
if ... else Гранање
switch … case Наредба вишеструког гранања
function Декларација функције
return Повратак из функције
try ... catch .. finally Дефинише понашање у случају грешке
var Декларација променљивих
Остале резервисане речи:
delete, in, this, instanceof, throw, new, with, default, null, true, false, class, const, enum, export, implements,
extends, import, super, let, private, public, yield, interface, package, protected, static, arguments, eval
Има их мање него у осталим програмским језицима (неке од последњих се и не користе у
тренутној варијанти ЈаваСкрипт-а), али ово и није прави програмски језик и овде нећемо писати
самостојеће програме него скрипте, нешто што личи на програм и има нека правила, али може да
се извршава само у веб прегледачима у оквиру неког хтмл документа.

Синтакса JavaScript-а
На крају сваке наредбе обавезно стоји ознака ; као ознака краја наредбе. Ред може бити
произвољне дужине, а прекида се када нам је то згодно, при чему треба водити рачуна да се
прекид реда направи после неког симбола (=+-*/…), а никако не прекидати ред унутар апострофа
или наводника (ако из неког разлога „морамо“ онда треба затворити ознаку и додати + пре отварања
нове ознаке).
Као и у програмским језицима и овде разликујемо: променљиве, константе и наредбе.
Имена променљивих у JavaScript-у морају да почну словом и могу садржати слова, цифре или
цртицу за подвлачење. Дозвољено је коришћење свих Unicode карактера, тј. у имену променљивих
могу се користити и ћирилична и латинична слова (и слова других национални абецеда). Сложена
имена променљивих могу се писати са великим почетним словима сваке речи (као у паскалу)
PovrsinaTrougla или са цртицом за подвлачење povrsina_trougla, али најчешће се пишу малим
почетним, а остале речи почињу велики словом (то је JavaScript стил): povrsinaTrougla. JavaScript
интерпретер је, иначе, осетљив на мала и велика слова, то значи да су променљиве х и Х две
различите променљиве и могу имати различите вредности.
 Декларација променљивих
Променљиве могу бити глобалне и локалне. Глобалне променљиве се декларишу на почетку
скрипта и могу се користити у свим функцијама у оквиру тог скрипта. Локалне променљиве се
декларишу у оквиру једне функције у скрипту и могу се користити само у тој функцији.
Основни начин декларације променљивих:
Var x, y, z; // var listaPromenljivih;
Примећујемо да се декларација променљивих користи само за навођење имена променљивих
које ће се користити у скрипту. Нема унапред дефинисаног типа података. Свака променљива
може бити и број и текст и нека карактеристика, а шта ће бити зависи од додељене joj вредности.
Други начин декларације променљивих:
Var x = 3, y = 5, z = x + y; // z → 8
Ово је декларација променљивих са доделом иницијалних (почетних) вредности. Трећа
декларисана променљива (z) добија као вредност збир вредности прве две (х и у), али то није
функционална веза, тј. ако бисмо касније променљивој х или променљивој у променили вредност,
не би се аутоматски променила и вредност променљиве z.
Ова два начина декларације се могу и комбиновати.
У JavaScript-у је дозвољено редекларисање променљиве истог имена ако је из неког разлога
то потребно. Дозвољена је и употреба променљиве чак и пре него што је декларисана (или уопште
није декларисана).
Декларација променљивих може се извршити и са let (занимљиво је да ово није резервисана
реч), али у том случају, редекларација променљиве није дозвољена, а у таквом случају није
дозвољена ни употреба тих променљивих пре декларације.
Блок наредби
У JavaScript-у наредбе могу (а некада и морају) да се групишу у блок наредби тако што се
напишу између ознака { }.
Променљиве декларисане са var у једном блоку наредби могу да се користе и изван тога
блока. Ако је променљива декларисана пре неког блока наредби и добила је неку вредност, а
затим је декларисана и у самом блоку наредби и ту добила неку другу вредност, након изласка из
блока наредби променљива задржава вредност која јој је додељена у блоку наредби (тј. последњу
додељену вредност). Ако нам то не одговара и желимо да се иза блока наредби користи вредност
додељена променљивој пре тог блока наредби онда у блоку наредби уместо са var променљива
треба да се декларише са let (вредност у блоку не зависи од вредности изван блока наредби, као
да су то две променљиве).
Наредба додељивања
Најчешће коришћена наредба је наредба додељивања, променљивој додељује вредност која
може бити конкретна или израз или функција. Општи облик наредбе је:
x = 5; y = 6;
z = x + y + 3; // z → 14
Знаковне вредности које се додељују променљивој се обавезно пишу или између апострофа
или између наводника (свеједно је, а и корисно када ови симболи треба да буду делови текста).
x = ‘Ово је ‘; y = “текст.“;
z=x+y; // z → Ово је текст
Бројне вредности могу имати децимале или су целобројне без икакве посебне декларације.
Операције
Основне операције са бројевима су:
+ сабирање
- одузимање
* множење
/ дељење
** степеновање
% остатак при целобројном дељењу
а дозвољене су и операције у комбинованом облику:
++ (х = х + 1)
- - (х = х – 1)
+= (х += у → х = х + у)
-= (х -= у → х = х – у)
*= (х *= у → х = х * у)
/= (х /= у → х = х / у)
**= (х **= у → х = х ** у),
%= (х %= у → х = х % у).
 Знаковне променљиве се надовезују операцијом
+ слепљивање, а дозвољено је и
+= (х += у → х = х + у).
Дозвољено је надовезивање текста и бројева при чему се бројеви аутоматски конвертују у текст:
х = “5“ + 5 + 5; у = 5 + 5 + “5“; // х → 555, али: у → 105
х = “5“ + 5 * 5; у = 5 * 5 + “5“; // х → 525, али: у → 255
односно, поштује се приоритет извршавања операција.
Релације
Ознаке релација су:
== једнако
=== строго једнако (и тип и вредност)
!= није једнако
!== строго није једнако (ни тип ни вредност)
< мање
<= мање или једнако
> веће
>= веће или једнако
Релација == врши претходну конверзију типа пре провере једнакости, па ће зато логичка
вредност израза „5“==5 бити true, тј. две вредности су једнаке, за разлику од израза „5“===5 који
има вредност false, јер === не врши конверзију типова Исто важи и за релације != и !==, односно,
израз „5“!==5 ће бити true, тј. две вредности су једнаке, за разлику од израза „5“!=5 који ће имати
вредност false.
Погледајмо следећу таблицу:
Ознака Значење Пример Израз Резултат
x == 8 false
== Једнако са х=5 x == 5 true
x == "5" true
x === 5 true
=== Једнако по вредности и типу са х=5
x === "5" false
!= Различито од х=5 x != 8 true
x !== 5 false
!== Различито по вредности или по типу х=5 x !== "5" true
x !== 8 true
> Веће од х=5 x>8 false
< Мање од х=5 x<8 true
>= Веће или једнако х=5 x >= 8 false
<= Мање или једнако х=5 x <= 8 true
Логиички изрази могу бити прости и сложени. Сложени се састоје из простих израза који су
повезани логичким операцијама:
&& логичка операција и (конјункција, AND)
|| логичка операција или (дисјункција, OR, вертикална црта, аски код 124)
! негација (NOT)
Прости изрази у оквиру сложених могу да се пишу у заградама али не морају, тј.
((x != 0) || (x < 10) || (x > -10))
исто је што и
(x != 0 || x < 10 || x > -10)
Заграде су обавезне када вредност израза зависи од редоследа простих исказа ако треба
променити приоритет операција, на пример, није свеједно:
((x != 0 || x < 10) && x > -10) и
(x != 0 || x < 10 && x > -10)
 Операције за манипулацију битовима
У овом, кратком курсу јаваСкрипта, нећемо користити манипулацију (рад) са битовима, али
је корисно запамтити да постоје и ове операције, за случај да нам у каснијем раду буде из неког
разлога потребно упоређујемо или мењамо вредности бит по бит.
& логичка операција и (конјункција, AND)
| логичка операција или (дисјункција, OR, вертикална црта, аски код 124)
^ ексклузивно или (XOR, аски код 94)
~ негација (NOT)
<< померање у лево (LEFT SHIFT)
>> померање у десно са чувањем знака (RIGHT SHIFT)
>>> померање у десно и попуњавање места највише тежине нулама
нећемо користити, али постоје:
<<= променљиву са леве стране помера улево за вредност израза са десне стране
>>= променљиву са леве стране помера удесно за вредност израза са десне стране
задржавајући знак
>>>= променљиву са леве стране помера удесно за вредност израза са десне стране и
попуњава нулама места највеће тежине
&= логичко и над битовима променљиве са леве стране користећи вредност са десне
стране
|= логичко или над битовима променљиве са леве стране користећи вредност са
десне стране
^= логичко ексклузивно или над битовима променљиве са леве стране користећи
вредност са десне стране
Условни оператор
Врло корисни оператор, који може уштедети неколико простих условних наредби. Ако се из
описа не схвати начин његове употребе, пример ће сигурно све разјаснити.
(uslov) ? vred1 : vred2 са леве стране знака ? је услов (израз који треба израчунати) са
десне стране знака су две вредности раздвојене знаком : од којих се узима само једна,
зависно од услова (преузето из програмских језика С, С++, Јава).
На пример:
(х > у) ? 5 : 7
ако је х веће узима се вредност 5, у противном се узима вредност 7.
Специјални оператори
Оператор , на пример: а = (5+6) , (2*20), израчунава обе вредности и променљивој а
додељује вредност другог израза, односно, 40.
delete брисање особине неког објекта
new креирање новог објекта класе
typeOf одређује тип променљиве или израза
void оператор без вредности
Ови оператори су преузети из објектно оријентисаних програмских језика и имају велики
значај код професионалне употребе ЈаваСкрипта. Ако ћемо изабрати ову професију као свој
животни позив, није лоше запамтити их јер без њих нећемо моћи.
Приоритет операција
Приоритет операција наслеђен је из математике, а може се мењати стављањем појединих
делова израза у посебне заграде.
У основи, корисно је запамтити да су једночлане операције највишег приоритета, затим
операције множења и дељења (које су истог приоритета и извршавају се у редоследу у ком су
написане), затим су операције сабирање и одузимање (које су истог приоритета и извршавају се у
редоследу у ком су написане). Логичке операције су нижег приоритета, а најнижи приоритет
имају операције =. +=. -=. *=. /=. %=. <<=. >>=. >>>=. &=. ^=. |=.
Коментари
У скриптима се могу користити коментари када желимо да себи или другима објаснимо неки
део скрипте или оставимо поруку за каснију евентуалну измену скрипта.
Коментари могу бити у једном реду, без обзира да ли почињу на почетку реда или се
настављају на неки ред са наредбом. Овакви, једноредни коментари се означавају као у паскалу
ознаком // која се наводи пре почетка коментара.
Ако коментар има више редова, онда се може писати као више једноредних коментара
(сваки ред коментара почиње ознаком //) или, што је практичније, као вишередни коментари
који почињу ознаком /* (пише се пре првог реда коментара) и завршавају ознаком */ (на крају
коментара).
 Константе
За дефинисање константи користимо кључни реч const.
const PI = 3.141592653589793;
Наравно, ово није добар пример јер се константа пи не мора дефинисати, стандардно постоји
у библиотеци Math, па се у наредбама може користити директно навођењем имена Math.PI ако то
желимо, али није обавезно. Константама чија је вредност број или текст није дозвољено мењати
вредности у скрипту, а могу се користити у изразима као и променљиве.
Променљива и константа могу имати исто име ако не припадају истом блоку наредби (не
препоручује се) и свака од њих има одговарајућу вредност у блоку наредби којем припада.
Константа може бити дефинисана као објекат са неким карактеристикама. У том случају
дозвољена је промена вредности појединачних карактеристика и додавање нових карактеристика:
const auto = {tip:"Fiat", model:"500", boja:"bela"};
car.boja = "siva";
car.vlasnik = "Petar";
Константа може бити дефинисана као низ неких вредности и у том случају дозвољена је
измена вредности појединих елемента низа и додавање нових елемената:
const auto = ["Saab", "Volvo", "BMW"];
auto[0] = "Toyota";
auto.push("Audi");
 Почетак рада
Најједноставнија наредба ЈаваСкрипт-а је испиши, односно:
document.write(неки текст)
Део document означава да се обраћамо документу са којим радимо;
Део write саопштава да нешто треба исписати на тренутној позицији у документу;
Тачка између ова два дела је обавезна, а текст који се исписује може се ставити између
апострофа или између наводника што је згодно јер се у оквиру текста могу наћи и неки од ових
знакова, па у зависности од тога бирамо граничнике.
Текст који се исписује може се форматирати хтмл елементом <font> или стилом у цссу.
Такође, у оквиру текста који се исписује можемо дефинисати и хтмл елемент који се користи
приликом исписа, на пример:
document.write("<Н1>Ово је наслов највишег нивоа</H1>")
Приликом исписа овог текста користиће се стил дефинисан за елемент <Н1>, а ознаке хтмл
елемента се неће видети.
Посебан облик ове наредбе је writeln где се после исписа текста прелази у нови ред. Ово је
значајно запамтити ако се исписује више пута неки текст. Са обликом write ће се текст исписивати
у једном реду све док је то могуће, а са обликом writeln ће се сваки текст исписати у новом реду.
Када желимо да се обратимо неком одређеном хтмл елементу и да у њега испишемо неки
текст користићемо наредбу:
document.getElementById(idOznaka).innerHTML
Подразумева се да одговарајући хтмл елемент мора имати наведену Id ознаку. Функција
getElementById проналази одговарајући елемент и у њега записује жељени текст или из њега чита
текст. Важно је запамтити да ЈаваСкрипт разликује мала и велика слова и да се функције записују
малим почетним словом, а свака друга реч у називу функције се пише великим почетним словом.
Овом функцијом можемо мењати и атрибуте стила хтмл елемента са датом Id ознаком. У том
случају општи облик команде је:
document.getElementById(id).attribute = vrednost
Примери:
Први пример за write:
<html>
<head>
<title>What Can JavaScript Do?
</title>
</head>
<body>
<h1>Шта можемо уз помоћ ЈаваСкрипт-а?</h1>
<script>
document.write("Можемо писати текстове ");
document.write("у једном реду у две или више наредби.<br>");
document.writeln("Можемо писати текстове <br>");
document.writeln("и у више редова.<br>");
document.write("Ако прегледач разуме <i>writeln</i> ");
document.write("онда је све у реду, али<br>");
document.write("Ако прегледач не разуме <i>writeln</i> <br>");
document.write("у <i>write</i> можемо додати прекид реда.<br>");
</script>
</body>
</html>
а овако то изгледа у прегледачу:
 Други пример за write:
<html>
<head>
<title>What Can JavaScript Do?
</title>
</head>
<body>
<h1>Шта можемо уз помоћ ЈаваСкрипт-а?</h1>
<script>
document.write("<h2><center><b>Можемо поставити наслов</b></center><h2>");
document.write('<p style="color:mediumblue; text-align:justify;">Или неки
одељак текста у коме морам да пишем свакојаке "глупости" да бих попунио ред и
прешао у нови и да покажем да и хтмл и цсс раде унутар скрипта.</p>');
</script>
</body>
</html>
а овако то изгледа у прегледачу:

Пример за document.getElementById(id):
<html>
<head>
<title>What Can JavaScript Do?
</title>
</head>
<body>
<h2>Шта можемо уз помоћ ЈаваСкрипт-а?</h2>
<p id="p1">JavaScript može promeniti sadržaj HTML elementa.</p>
<button type="button" onclick='document.getElementById("p1").innerHTML = "Učimo
da radimo sa JavaScript-om!"'>Promeni tekst!</button>
<button type="button" onclick='document.getElementById("p1").style.fontSize =
"35px";'>Povećaj tekst!</button>
<p>JavaScript može menjati atribute HTML elemenata.</p>
</body>
</html>
Кликом на лево дугме, текст у одељку
испод наслова је промењен.
Кликом на десно дугме, текст у одељку
испод наслова се исписује фонтом величине 35рх.
Наравно, било би занимљивије да се
кликом на дугме текст промени у жељени или
испише изабраном величином фонта, али то није
могуће без коришћења функција.
 А сада пробајте ви: додајте треће дугме које смањује текст, а затим додајте четврто дугме које
мења боју текста:

Упутство:
Практично, треће дугме је копија другог, само се мења величина фонта у тачкама (рецимо 15рх).
Четврто дугме користи атрибут боја: style.color и боје се пишу малим словима.
Ако вам из неког разлога није успело да решите претходна два задатка, ево другог решења
које у себи садржи и решење првог задатка:
<html>
<head>
<title>What Can JavaScript Do?
</title>
</head>
<body>
<h2>Шта можемо уз помоћ ЈаваСкрипт-а?</h2>
<p id="p1">JavaScript može promeniti sadržaj HTML elementa.</p>
<button type="button" onclick='document.getElementById("p1").innerHTML =
"Učimo da radimo sa JavaScript-om!"'>Promeni tekst!</button>
<button type="button" onclick='document.getElementById("p1").style.fontSize =
"35px";'>Povećaj tekst!</button>
<button type="button" onclick='document.getElementById("p1").style.fontSize =
"15px";'>Smanji tekst!</button>
<button type="button" onclick='document.getElementById("p1").style.color =
"maroon";'>Oboji tekst!</button>
<p>JavaScript može menjati atribute HTML elemenata.</p>
</body>
</html>
Наравно, ако бисмо хтели да на сваки клик дугмета повећавамо или смањујемо произвољно
вредност атрибута fontSize или да бирамо боју текста, онда то не можемо овако једноставно. За то
нам треба мало сложенија скрипта (нека функција којом би се прихватале жељене врености и
додељивале атрибутима).
А сада мала игра са сличицама:
На клик тастера „упалити“ или „угасити“ сијалицу (наравно, пре тестирања примера потребно је да
преузмите обе слике):
<html>
<head>
<title>What Can JavaScript Do?
</title>
</head>
<body>
<h2>Шта можемо уз помоћ ЈаваСкрипт-а?</h2>
<img id="sl" src="pic_bulboff.gif" style="width:100px"><br><br>
<button id="1" style="display:block; width:100px;"
onclick="document.getElementById('sl').src='pic_bulbon.gif';
document.getElementById('1').style.display='none';
document.getElementById('2').style.display='block';">
Upali svetlo!</button>
<button id="2" style="display:none; width:100px"
onclick="document.getElementById('sl').src='pic_bulboff.gif';
document.getElementById('2').style.display='none';
document.getElementById('1').style.display='block';">
Ugasi svetlo!</button>
</body>
</html>
 А сада задаци за вас

1. Одељку текста додајте дупли, плави оквир.

2. На претходни задатак додајте дугме за уклањање оквира.
3. Позадину одељка обојите жутом бојом.
4. На претходни задатак додајте још три тастера за црвену, зелену и
плаву боју.
5. Одељку текста повећајте спољашње и унутрашње маргине.
6. Преместите произвољну слику са левог на десни део екрана.
7. На претходни задатак додајте дугме за враћање слике.
8. Повећајте размере слике два пута.
9. На претходни задатак додајте дугме за смањивање слике.
Решења пошаљите на мејл, што пре то боље. Ово морате да научите јер оно што следи је
много напредније и захтевније, па нам овакве једноставне ствари, ако се не схвате, могу направити
(непотребан) проблем.