MANUEL RADOVANOVIĆ : Savladajte osnove JavaScript programskog jezika i postanite stručnjak za izradu veb stranica

Pre nego i što pomislite da učite JavaScript programski jezik, neophodno je da poznajete HTML5 i CSS3 ili da bar pročitate i prostudirate postove na ovom blogu vezanu na navedenu temu; pogledajte ovde ili pogledajte u navigacionom toolbar-u “Sadržaj“. JavaScript je najpopularniji programerski jezik koji veb stranice pretvara u veb aplikacije na strani klijenta. Uglavnom se nalazi na prvom mestu svih top listi programskih jezika zbog svoje lakoće učenja i korišćenja i dodao bi još da su JavaScript programeri izuzetno plaćeni u poređenju sa drugim programerima. Ono što prvo treba da znate o JavaScript programskom jeziku jeste da on nema nikakve veze sa Java programskim jezikom i njegova sintaksa je bazirana na C sintaksi. On se interpretira, što znači da se ne kompajlira kao C# programski jezik. On podržava promenjive za čuvanje informacija, operatore za izvođenje operacija i poređenje, funkcije koje se mogu više puta pozivati, uslovne izraze, programerske petlje i mogućnost kreiranja objekata sa svojstvima, metodama i događajima. Za JavaScript kažemo da je on model vođen događajima izvršenja. Inače JavaScript se koristi u kombinaciji sa DOM – Document Object Model i BOM – Browser Object Model kako bi veb stranica izgledala dinamična.

( JavaScript je danas najpopularniji programski jezik u svetu )

Postoje kolege koje ovaj programski jezik ne shvataju ozbiljno jer se on često uči kao deo nekog drugog programskog jezika, npr. podrazumeva se da C# programer poznaje JavaScript programski jezik, ali i JQuery biblioteku i AJAX. Ali takođe u stranim kompanijama postoje radna mesta gde se programeri isključivo profesionalno bave JavaScript programskim jezikom, bez poznavanja drugih programskih jezika. U svakom slučaju moj savet vam je da JavaScript programski jezik shvatite ozbiljno i da ga dobro savladate jer je izuzetno prisutan kod skoro svakog Internet projekta i na tržištu rada. Takođe će i vaše veb stranice učiniti mnogo boljim. Ali za sada se vratimo malo u nazad da vidimo kako je JavaScript nastao. Prvo je jedan programer Brendan Ajh iz kompanije Netscape razvio 1995 godine LiveScript. Zatim se pojavom Microsoft Internet Explorer-a verzije 3.0; 1996 godine; uključila podrška u ovaj pregledač za Jscript što je bila osnova JavaScript-a. I pored toga što je Jscript bio sličan JavaScript-u njihova primena je bila totalno drugačija. Samo godinu dana kasnije; ECMA-Europen Computer Manufactures Association je izgradila prvu jezičku specifikaciju ECMAScript, poznatiju kao ECMA-262 ili ono što danas zovemo JavaScript; što je tada postalo standard prvenstveno za Microsoft pregledače, zatim i druge. Ali je problem nastao što svaki pregledač je primenjivao ovaj standard na malo svoj način i činio isti nekompatibilnim. Postoji mnogo novijih izdanja ECMA-262 ali i dalje kao programer morate da uzmete u obzir razlike između ECMA-262 i drugih JavaScript implementacija. To naravno ne treba da vas plaši i kompromituje vaš JavaScript code, ali je neophodno isti testirati na pregledačima različitih proizvođača. Danas je standard JavaScript usko povezan sa DOM – Document Object Model standardom koji reguliše W3C – WorldWide Web Consortium i njihovim učešćem programerima je olakšan život.

Zašto da koristim JavaScript ?

JavaScript se prvobitno koristio da proveri ispravnost podataka na klijentskoj strani, bolju interaktivnost, rad sa slikama i bar vizualno je pružao brži odziv između klijenta i veb stranice. Ništa se tu nije značajno promenilo. JavaScript je i dalje najviše koristan zato što je duboko integrisan sa pregledačima; lako se snjim kontroliše upravljanje pregledača ali i objekata. Ako ste se susretali sa iritirajućim reklamama koje stalno iskaču na nekim stranicama kad god nešto pokrenete ili skrolujte u vašem pregledaču onda ste se sigurno sreli sa mnoštvom događaja koje lako pokreću izvršavanje JavaScript funkcija.

( JavaScript je zadužen za ponašanje na vešm veb sajtu )

Ono što mu je najveća prednost jeste jednostavnost i kad se koristi kod velikih i kompleksnih aplikacija. Možete vašim veb stranicama lako da dodajete mnoštvo korisnih stvari. S obzirom da se JavaScript izvršava na strani klijenta bez potrebe da se poziva server; vi lako i odmah obezbeđujete korisničke povratne informacije. Možete poboljšati vaše performanse jer možete da učitate vaše resurse kad su oni potrebni umesto da se sve učitava kad se učitava veb stranica kao i da izmenite samo potrebne delove veb stranice.

Zašto da ne koristim JavaScript ?

Jedna od najvećih mana JavaScript-a jeste što upotreba JavaScript-a može da bude isključena iz pregledača. Ponekad, klijent to uradi zbog straha od virusa dok je češći slučaj da je previše iritiran iskačućim reklamama. Dok postoje i klijenti koji koriste još uvek starije računare, operativne sisteme i sa njima pregledače koji uopšte ne podržavaju upotrebu JavaScript-a. Kad šaljete podatke serveru, vi pored JavaScript-a morate da pravite validaciju podataka i na server strani jer se ne možete pouzdati na ništa što sa klijent strane dolazi na server stranu. Pravljenje duple validacije podataka može biti zamorno. Kod klijenata kod kojih je upotreba JavaScript-a isključena, treba zahtevati od klijenta da ponovo uključi upotrebu JavaScript-a što češće dovodi do toga da klijent napušta vaš sajt. Zatim i kada imate dozvolu od klijenta da koristite JavaScript; vi ga ne možete koristiti sa više domena. Ograničeni ste samo na domen sa kojeg je JavaScript pozvan bez obzira što možete otvoriti novi prozor u vašem pregledaču. Ako uzmete u obzir da JavaScript ne može da ima ništa sa serverskom stranom i samim tim ne može da pristupa bazama podataka na serveru, to su često velika i neprihvatljiva ograničenja. Rešenje je često da se JavaScript koristi i sa tehnologijama koji rade na server strani poput ASP .Net ili ASP .Net MVC-a. Ili da se koristi isključivo kod jednostavnih i ne mnogo zahtevni veb sajtova gde HTML5, CSS3 i JavaScript mogu odraditi čitav posao.

Moj prvi JavaScript code

Kad je u pitanju JavaScript programski jezik on se uglavnom najbolje uči kroz male praktične primere koji se često koriste u praksi. Znači mnogo je važno da pišete JavaScript code, nije dovoljno samo da čitate i gledate kako to druge osobe rade. Vi možete da učite JavaScript u bilo kom operativnom sistemu i upotrebom bilo kojeg IDE - integranisanog razvojnog okruženja ili tekst editora. Ukoliko ste C# programer i ukoliko ne želite da menjate Microsoft Visual Studio Community za ništa na ovom svetu, vi to ne morate ni da radite. Možda ste početnik i hoćete da ga koristite ali se pitate kako se instalira. Jednostavno, pogledajte video:

( Windows - 4. How to install Microsoft Visual Studio Community? )

Sve u svemu svi primeri JavaScript programskog jezika na ovom blogu vi možete pratiti iste kroz bilo koji IDE - integranisano razvojno okruženje ili tekstualni editor. To je samo vaš izbor. Imajte samo u vidu da se u Microsoft Visual Studio Community, JavaScript programski jezik kodira u Node.js šablonu ili u nekim framework - radnim okvirima. Za Node.js imamo poseban tutorial; pogledaj ovde. Zato je mnogo bolje da kodirate JavaScript u Visual Studio Code-u. Pogledajte kako se instalira na Windows operativni sistem:

( Windows - 1. How to install Visual Studio Code & .Net Core ? )

Ukoliko koristite Linux operativni sistem; ovaj tutorial takođe možete pratiti kroz Visual Studio Code instaliranom na Linux operativnom sistemu. Pogledajte video kako se Visual Studio Code instalira na Linux operativnom sistemu; tačnije na Ubuntu distribuciji.

( Linux - 2. How to install Visual Studio Code & .Net Core ? )

Ukoliko ste uspešno instalirali Visual Studio Code; pokrenite IDE - integranisano razvojno okruženje i kroz Open Folder dijalog, kreirajte direktorijum js_tutorial i otvorite ga. Zatim mu dodajte HTML datoteku lesson1.html. Zatim kliknite sa vaše leve strane na ikonicu Extension i instalirajte sledeće ekstenzije koje će vam kodiranje učiniti mnogo boljim, prijatnijim i lepšim.

HTML Boilerplate
HTML CSS Support
IntelliSense for CSS class names in HTML
Format HTML in PHP
Prettier - Code formatter
vscode-icons
JavaScript (ES6) code snippets
Babel JavaScript
Live Server

Ukoliko ste instalirali navedene ekstenzije, ugasite Visual Studio Code pa ga ponovo pokrenite. Onda unesite sledeći kod.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JavaScript - Lesson 1</title>

</head>

<body>

    <h1>JavaScript - Lesson 1</h1>

    <script type="text/javascript">

        alert("Hello World, we are learning JavaScript!");

        console.log("This is JavaScript on Chrome Console!");

        document.write("This is my first JavaScript code!"); 

    </script>

</body>

</html>

Kliknite desnim tasterom miša na lesson1.html i u padajućem meniju kliknite na Live Server.

Dobićete ovakav rezultat.

( Js_tutorial - Lesson 1. izvršen preko Live Server-a )

Kao što možete videti u navedenom; JavaScript se može pokrećati u html datoteci između <script></script> tagova. Vi čak ne morate ni navoditi type="text/javascript", ali to se radi radi starijih pregledača. U prvoj liniji koda vidite kako se poziva dijalog forma pretraživača, u drugoj liniji ispisujemo tekst na HTML stranici u pregledaču i treća linija koda se samo može videti u konzolnoj aplikaciji. Kad pišete vaš JavaScript kod; najbolje da ga pišete ispred </body> taga. Na taj način usled neke greške, vaša veb starnica će se prikazati korisniku. JavaScript se uglavnom piše u datotekama *.js i pozivaju se u HTML fajlovima. To ćete videti u sledećoj lekciji. Kako sve ovo izgleda, možete pogledati i u sledećem video-u: