JavaScript Туторијал

by **Kosta** Чет Јан 24 2008, 06:59

Основната цел (улога) на JavaScript е да додаде дополнителна интеракција меѓу веб страната и нејзите посетители, на сметка на мала дополнителна работа од страна на веб развивачот. JavaScript им овозможува на веб дизајнери да искористат повеќе од тоа што го нудат HTML и CSS.
По дефиниција, JavaScript е клиентски скриптирачки јазик. Тоа значи дека веб прабарувачот ја стартува скриптата. Има и скриптирачки јазици кои се стартуваат од серверска страна, од типот на PHP. PHP скриптите се стартуваат од веб серверот.
JavaScript јазикот се користи насекаде. Еве неколку работи што можеби сте ги видел или не, додека сте сурфале:

- Часовници
- Mouse Trailers (анимација која го следи маусот додека сурфаш)
- Drop Down Мени
- Alert Пораки
- Popup прозорци
- Податочни валидации на HTML форми

by **Kosta** Чет Јан 24 2008, 07:00

Во нашиот прв пример со помош на JavaScript скрипта на веб пребарувачот ќе испечатиме „Здраво Најфорумче!“. Тоа и не е многу интересно, но е добар пример да се објаснат основните работи за како нешто да се направи во JavaScript.

Код:: <html> <body> <script type="text/javascript">  </script> </body> </html>

Здраво Најфорумче!

Нашиот прв чекор беше да му „кажиме“ на пребарувачот дека ќе користиме скрипта со помош на <script> тагот. Наредно го поставивме типот на скриптата да е еднаков на „text/javascript“.
Наредно додадовме необврзни HTML коментари пред и после нашиот JavaScript код. Ако пребарувачот не поддржува JavaScript, тогаш нема да го прикаже нашиот код во јаслив текст за корисниците. Коментарот завршува со „//-->“ бидејќи „//“ значи коментар во JavaScript, па ако пребарувачот не подржува JavaScript ќе си остане во HTML коментар.

by **Kosta** Чет Јан 24 2008, 07:00

Последниот чекор од нашата скрипта беше користењето на функцијата document.write која испишува стринг во нашиот HTML документ. document.write може да се користи за пишување на текст, HTML, или пак комбинација од двете. Ва нашиот случај ние на екран со помош на оваа функција испечативме Здраво Најфорумче!.
Ако забележавте во нашата скрипта на крајот од наредбата document.write("Здраво Најфорумче!") нема ; (точка запирка). Тоа е така бидејќи во JavaScript не е потребно да се користи точка запирка за да се нагласи крајот на наредбата. Но и нивно користење, не прави никаков проблем.

by **Kosta** Чет Јан 24 2008, 07:01

Во овој дел ќе видиме како да овозможиме JavaScript на Internet Explorer, Firefox и Opera, а потоа ќе видиме како може да напишиме многу едноставна скрипта за да ги разделиме тие што немаат JavaScript поддршка, од тие што имаат на своите веб страни.

Овозможување на JavaScript во Internet Explorer.

Во Internet Explorer можеме да видиме дали е овозможена JavaScript со навигација во Custom security settings:

1. Кликнете на Tools менито
2. Изберете Internet Options
3. Кликнете на Security табот во Internet Options
4. Кликнете на Custom level
5. Скроловајте се до долу, каде се наоѓа Scripting секцијата
6. Изберете го Enable копчето кај Active Scripting
7. Кликнете ОК, па Yes

Овозможување на JavaScript во Firefox

1. Кликнете на Tools менито
2. Изберете Options од менито
3. Изберете Content од листата
4. Видете дали Enable JavaScript e чекирано
5. Кликнете ОК за крај

Овозможување на JavaScript во Opera

1. Кликнете на Tools менито
2. Изберете Preferences од менито
3. Кликнете на Advanced табот во Preferences
4. Изберете Content од листата
5. Видете дали Enable JavaScript e чекирано
6. Кликнете ОК за крај

by **Kosta** Чет Јан 24 2008, 07:02

Денеска е речиси невозможно да се разлистува низ интернетот без JavaScript овозможена на пребарувачот, па проверувањето дали има или нема корисникот овозможено JavaScript и не е толку важно. Меѓутоа, ако сеуште сакате да бидете сигурни дали корисниците имаат овозможено JavaScript , тоа ќе го дознаеете со помош на оваа скрипта.
Единствен начин да се направи разлика помеѓу корисниците кои немаат овозможено JavaScript од они кои имаат, е користење на едноставна пренасочувачка скрипта што ќе работи само за они со овозможена JavaScript. Ако пребарувачот на корисникот нема овозможено JavaScript скриптата нема да се стартува и тие ќе останат на истата страница.

Код:: <script type="text/javascript"> window.location = "http://www.najforumce.com" </script>

Притоа заменете го URL-то со тоа што сакате вие.

by **Kosta** Чет Јан 24 2008, 07:04

Главно постојат 3 места каде што може да биде поставена JavaScript-тата за да се користи на веб страната:

1. Во head тагот
2. Внатре во body тагот (како нашиот прв пример)
3. Во надворешна датотека

Изборот на локација, дали ќе биде во head или body тагот, е едноставно. Ако сакаме скриптата да се стартува при некој настан, на пример кога корисникот кликнува на нешто, тогаш ќе ја поставуваме скриптата во head тагот. Ако сакаме скриптата да се стартува кога се вчитува страната, како што е примерот со Здраво Најфорумче!, тогаш ќе ја поставиме скриптата во body тагот.
Надворешните JavaScript датотеки и нивната примена ќе ги дискутираме покасно.

Претходно видвме скрипта што ја поставивме во body тагот, сега ќе напишиме скрипта која ќе се стартува кога ќе се предизвика некој настан.

Код:: <html> <head> <script type="text/javascript">  </script> </head> <body> <input type="button" onclick="popup()" value="Притисни"> </body> </html>

Направивме функција наречена popup и ја вметнавме во head тагот од HTML-от. Сега секогаш кога некој клика на копчето (тоа е настанот) ќе се прикаже порака „Здраво Најфорумче!“. Подлабоко овие функции ќе ги објасниме покасно.

by **Kosta** Чет Јан 24 2008, 07:05

Импортирање на надворешена датотека е релативно лесно. Прво датотеката што се импортира мора да биде валидна JavaScript, и само JavaScript. Второ, датотека мора да има екстензија .js. Последно, мора да ја знаете локацијата на датотеката.
Нека препоставиме дека имаме датотека „mojajs.js“ што содржи една линија која прикажува порака „Здраво Најфорумче!“(функција popup, како во претходниот пример). Исто така ќе претпоставиме дека датотеката се наоѓа во истиот директориум каде што се наоѓа и HTML – от. За да ја импортираме датотеката ќе го напишиме следниов код:

Код:: <html> <head> <script src="mojajs.js"> </script> </head> <body> <input type="button" onclick="popup()" value="Кликни!"> </body> </html>

by **Kosta** Пет Јан 25 2008, 06:35

Операторите во JavaScript се многу слични со операторите што се јавуваат во другите програмски јазици. Операторите се симболи кои се користи за да извршат некоја операција.

Аритметички оператори

Оператор	Име	Пример
+	Собирање	6+2
-	Одземање	7-5
*	Множење	2*5
/	Делење	15/3
%	Остаток	43%10

Извршување на операции врз променливи што содржат вредности е многу лесно. Еве еден пример во кој се содржат сите аритметички операции.

Код:: <body> <script type="text/javascript">  </script> </body>

2 + 10 = 12
10 * 10 = 100
10 / 2 = 5

Оператори за споредба

Операторите за споредба се користат за споредување на вредности меѓу две променливи. Знакот = доделува вредност на променливата, додека знакот = = споредува две вредности дали се еднакви. Операторите за споредба се користат во наредбите за проверка и враќаат true или false.

Оператор	Име	Пример	Резултат
==	Е еднаков со	x==y	false
!=	Не е еднаков со	x!=y	true
<	Помало	x < y	true
>	Поголемо	x > y	false
<=	Помало еднакво	x <= y	true
>=	Поголемо еднакво	x >= y	false

by **Kosta** Пет Јан 25 2008, 06:39

Променливите во JavaScript се однесуваат исто како променливите во другите јазици (C, C++ итн) со исклучок дека немораш да декларираш променлива пред да ја користиш.
Основна цел на променливата е да складира информации што покасно ќе бидат искористени. Таа е податок.
Кога користиме променливи за прв пат не е потребно да се корисит зборчето „var“ пред името на променливата, но е добра програмерска пракса кога ја користиме променливата за прв пат да го поставиме и зборчето „var“ пред нејзиното име. Еве еден пример:

Код:: <body> <script type="text/javascript">  </script> </body>

Здраво Најфорумче!
Јас учам JavaScript!
Скриптата завршува...

Направивме две променливи во овој пример. Една која го содржи HTML кодот за нов ред и другата беше динамичка променлива која имаше вкупно три различни вредности низ скриптата.
За да доделиме вредност на променлива го користиме знакот еднакво ( = ) со име на променлива лево и вредност на променливата десно. Ако го изменете редоследот тогаш скриптата нема да ви работи.
Првиот пат кога ја користевме променливата го поставиве клучното зборче var пред нејзиното име. Понатаму немаше потреба од негово користење.
Кога се избира име на променлива треба да се внима да не се избере име кое е клучен збор во JavaScript (Клучни зборови). Исто така добра пракса е избирање на имиња кои ќе ја објаснуваат информацијата што ја содржи променливата.

by **Kosta** Нед Фед 03 2008, 22:09

Функција е дел од код кој е пасивен се додека не биде референциран или повикан да си ја изврши својата „функција“. Функциите исто така го штедат нашето време на места каде кодот се повторува. Наместо да го пишуваме секогаш нашиот код кога нешто сакаме да направиме, можеме едноставно да ја повикаме функцијата онолку пати колку што ни е потребна, а да го добиеме истиот ефект.
Функцијата не се извршува кога се вчитува страницата и затоа препорачливо е таа да се вметне внатре во head тагот од вашиот HTML документ. Креирањето на функција е прилично лесно, се што треба да направите е да му кажете на пребарувачот дека ќе креирате функција, давајќи и име на функцијата, и потоа пишување на JavaScript-тата како и претходно. Следува еден пример со функција:

Код:: <html> <head> <script type="text/javascript">  </script> </head> <body> <input type="button" onclick="popup()" value="Притисни"> </body> </html>

Излез:
Копче на кое пише „Притисни“, и кога ќе притиснете ќе добиете alert порака на која ќе пише Здраво Најфорумче!

На почетокот прво му кажавме на пребарувачот дека ќе користиме функција со користење на резервираниот збор „function“. После тоа, на функцијата и дадовме име, за покасно таа функција да може да ја искористиме. Секогаш кога ќе ни е потребна функцијата, нејзе ќе може да ја повикуваме со нејзиното име. Заградите { } го дефинираат телото на функцијата, делот во кој ќе се наоѓа нашиот код. Во функцијата го користиме резервираниот збор alert кој прикажува popup прозорец со текст кој е е внесен помеѓу ( ) (заградите), кој мора да се наоѓа во наводници. Наредно што останува е да кажеме, како се извршува функцијата кога ќе притисниме на копчето. Кликнувањето на копчето предизвикува настан, а за настаните ќе зборуваме наредно.