JavaScript vodič: Hello world

Ovaj vodič pomaže vam da započnete s JavaScriptom. Objašnjava što vam je potrebno za pisanje vašeg prvog JavaScript programa. Počinje s osnovama: naučit ćete gdje možete pronaći i preuzeti potrebne alate, kako ih instalirati i vodit će vas sve do izgradnje i pokretanja vašeg koda. Ako nikada prije niste pisali JavaScript program, ovo je mjesto za početak. Kreirali smo ovaj članak kako biste mogli započeti s JavaScriptom i prijeći na naše SMS primjere. Ako ste već upoznati s JavaScriptom, možete skočiti izravno na jedan od sljedećih SMS projekata.

JavaScript SMS primjeri:

JavaScript slanje SMS-a s HTTP REST API-jem (primjer koda)
JavaScript slanje više SMS-ova s HTTP REST API-jem (primjer koda)
JavaScript zakazivanje SMS-a s HTTP REST API-jem (primjer koda)
JavaScript primanje SMS-a s HTTP REST API-jem (primjer koda)
JavaScript brisanje SMS-a s HTTP REST API-jem (primjer koda)
Preuzmite najnoviju JavaScript SMS API biblioteku s Githuba

Što je HTML

Hypertext Markup Language (HTML) je alat za definiranje strukture web stranice. HTML je standardni jezik za označavanje za izradu web stranica. Zajedno s CSS-om čine da web stranice izgledaju onako kako izgledaju. HTML se sastoji od niza elemenata koji govore pregledniku kako prikazati sadržaj. U ovom vodiču koristit ćemo ga za prikaz poruke "hello world".

Što je JavaScript

JavaScript je skriptni programski jezik. Sliči prirodnom jeziku, poput engleskog. Koristi se za komunikaciju s računalom. Glavna razlika između prirodnog jezika i programskog jezika je u tome što programski jezici imaju strožiju strukturu kako bi računalo bolje razumjelo. U ovom vodiču koristit ćemo JavaScript kod za ispis poruke "hello world".

Što je web poslužitelj

Pojam web poslužitelj može se odnositi na hardver ili softver, ili na oboje zajedno. S hardverske strane, web poslužitelj je računalo koje se koristi za posluživanje web klijenata. S softverske strane, web poslužitelji pokreću PHP kod koji obrađuje HTTP zahtjeve web klijenata.

Što je web preglednik

Web preglednik je aplikacija za pristup World Wide Webu. Kada korisnik zatraži web stranicu s određenog web mjesta, web preglednik dohvaća potreban sadržaj s web poslužitelja i zatim prikazuje stranicu na korisnikovom uređaju. Radi na način da korisnik može slati HTTP zahtjeve web poslužiteljima. Pomoću web preglednika možemo pristupiti web poslužitelju upisivanjem njegove IP adrese ili domene u URL polje.

Što je WAMP

WampServer se odnosi na skup rješenja za operacijski sustav Microsoft Windows koji se sastoji od Apache web poslužitelja, OpenSSL-a za SSL podršku, MySQL baze podataka i PHP programskog jezika. WAMP djeluje kao virtualni poslužitelj na vašem računalu. Omogućuje vam testiranje svih web značajki bez ikakvih posljedica, budući da je lokaliziran na vašem stroju i nije povezan s internetom. Koristit ćemo ga za lokalno hostiranje naše HTML web stranice.

Kako napisati svoj prvi program u JavaScriptu

Da biste napisali svoj prvi program u JavaScriptu:

  1. Instalirajte WAMP na svoje računalo
  2. Postavite WAMP poslužitelj
  3. Kreirajte novu index.html datoteku
  4. Sastavite svoj prvi HTML dokument
  5. Napišite svoj prvi JavaScript kod u .html datoteku
  6. Pokrenite svoj prvi JavaScript program
  7. Otvorite Inspect način rada za obavijesti o greškama
  8. Ispravite grešku

Preduvjeti

  • Računalo s Windows 10
  • WAMP okruženje
  • Chrome preglednik
  • HTML Hello World primjer
  • JavaScript Hello World primjer

Preuzmite WAMP

U ovom videu ćemo preuzeti WAMP poslužitelj. To je softver koji ćemo koristiti za hostiranje našeg JavaScript koda. Prije svega morate posjetiti https://wampserver.com. i preuzeti WampServer instalacijski program (Video 1). Nakon što se preuzimanje završi, instalacijski program će se nalaziti u direktoriju za preuzimanje koji je određen u vašem pregledniku. Otvaranje ovog exe datoteke pokrenut će proces instalacije WAMP poslužitelja.

Video 1 - Kako preuzeti WampServer (Video vodič)

Preuzmite WampServer

Započnite tako da u svom pregledniku otvorite https://wampserver.com. Kliknite na gumb Preuzmi na vrhu kako biste automatski pomaknuli do odjeljka za preuzimanje. Kliknite na WAMPSERVER 64 BITS (X64) kako biste preuzeli WampServer instalacijski program na svoje računalo (Slika 1).

Slika 1 - Preuzimanje WampServera

Instalirajte WAMP

Sljedeći korak nakon preuzimanja WampServera je njegova instalacija. Ovaj video pokazuje vam kako možete uspješno dovršiti postavljanje. Otvorite instalacijski program, konfigurirajte pojedinosti instalacije i pričekajte da se proces završi (Video 2). Kada instalirate WAMP Server, on će se automatski pokrenuti. Sada kada WAMP Server radi, možete početi pisati JavaScript kod.

Video 2 - Kako instalirati WampServer (Video vodič)

Napišite i preuzmite svoju prvu HTML stranicu

Da biste napisali svoj prvi HTML dokument, trebate stvoriti novu datoteku index.html u mapi \www\ WampServera.
Putanja: C:\wamp64\www\ 

<!DOCTYPE html>
<html>
	<head>
		<title>Pozdrav svijete!</title>
	</head>
	<body>
		<h1 id="text">Pozdrav svijete!</h1>
	</body>
</html>

Kod 1 - Vaš prvi HTML dokument

Napišite svoj prvi HTML dokument

Ovaj video vam pokazuje kako možete stvoriti HTML dokument (Video 3). Kasnije ćemo koristiti ovaj dokument kako bismo ga hostali lokalno. Budući da na svom računalu koristimo WampServer, možemo pregledavati svoje datoteke na URL-u http://localhost/. Da biste to učinili, trebate stvoriti ili postaviti svoju HTML datoteku u mapu \www\.
Putanja: C:\wamp64\www\

Video 3 - Napišite svoj prvi HTML dokument (Video tutorial)

Napišite i pokrenite svoj prvi JavaScript program

U ovom primjeru zamijenit ćemo tekst u oznaci <h1> s ID-om "text". Da bismo to učinili, koristit ćemo ugrađeni JavaScript query selector. Ovo može izgledati komplicirano, ali zapravo je jednostavno. Odabrat ćemo element s ID-om "text" i postavit ćemo njegov innerText atribut (za naš element to je poput karakteristike osobe) na tekst "Pozdrav Ozeki!". 

/*Ovaj JavaScript kod zamijenit će tekst u oznaci
koja ima ID naziva "text".*/
document.getElementById("text").innerText = "Pozdrav Ozeki!";

Kod 2 - Vaš prvi JavaScript kod

Napišite i pokrenite svoj JavaScript kod

Ovaj video prikazuje kako možete napisati JavaScript kod i pokrenuti ga unutar svog preglednika (Video 4). Sama naredba koja prikazuje poruku mora biti unutar script oznaka. Ove oznake označavaju da se ovdje mora izvršiti dio JavaScript koda. Sam kod je funkcija koja ima "Pozdrav Ozeki" kao svoj argument. Nakon što napišete i spremite svoj kod, možete ga pokrenuti unutar preglednika.

Video 4 - Kako napisati i pokrenuti svoj prvi JavaScript kod (Video tutorial)

Unesite grešku u JavaScript kod

Ako napravimo grešku u svom JavaScript kodu, možemo je vidjeti u načinu pregleda preglednika. Da bismo to učinili, trebamo desnim klikom miša odabrati Inspect iz izbornika. Ili možemo jednostavno pritisnuti (Ctrl + Shift + I). Tamo odaberemo Console, i sve greške će biti prikazane.

Što je sintaksna greška?

Sintaksna greška znači da ne razumijem. Ako razgovarate s nekim na engleskom i on ne razumije što govorite, odgovorit će s "Ne razumijem". Ako razgovarate s računalom na JavaScriptu i računalo ne razumije što govorite, odgovorit će s "Sintaksna greška".

Kako riješiti sintaksnu grešku u JavaScriptu?

U kodu ispod namjerno ćemo stvoriti sintaksnu grešku tako što nećemo staviti točku-zarez nakon linije Pozdrav svijete. Vidjet ćete kako računalo reagira, kako ćemo popraviti grešku i kako ćemo uspješno pokrenuti računalni program.

Popravite grešku u svom JavaScript kodu

Ovaj video vam pokazuje kako možete provjeriti postoji li greška u vašem kodu koristeći način pregleda u pregledniku. Ovo je nevjerojatno korisna značajka koja vam pomaže u popravljanju grešaka (Video 5). Konzola za ispravljanje pogrešaka u načinu pregleda prikazuje poruke o greškama koje ukazuju na ono što je pošlo po zlu. Možete kliknuti na indeks ovih poruka o greškama kako biste istaknuli točnu liniju koda koja je uzrokovala grešku.

Video 5 - Kako popraviti grešku u našem JavaScript kodu (Video tutorial)

Sažetak

Gornji članak govori o tome što trebate napisati u svom prvom JavaScript programu, što je primjer koda Pozdrav svijete. Ovaj program može izgledati jednostavno i možda ne čini puno, ali ovako počinju velike stvari; slijedeći ovaj vodič, napravili ste svoj prvi korak u postajanju JavaScript programera. Znati kako kodirati u JavaScriptu i stvarati programe kao rješenje za svoje probleme pomoći će vam da olakšate rad.

Ono što ste ovdje naučili vrijedno je, na Ozeki web stranici postoje daljnji korisni vodiči, samo naprijed! Prijeđimo na sljedeći članak na ovu temu o kako poslati SMS iz JavaScripta.

Sada preuzmite Ozeki SMS Gateway i krenite na posao!

More information