Vadnica za Javascript: Hello world

Ta vadnica vam pomaga začeti z JavaScriptom. Razloži, kaj potrebujete za pisanje vašega prvega JavaScript programa. Začne z osnovami: naučili se boste, kje lahko najdete in prenesete potrebna orodja, kako namestiti ta orodja in vas popelje vse do gradnje in zagon vaše kode. Če še nikoli niste napisali JavaScript programa, je to pravo mesto za začetek. Ustvarili smo ta članek, da lahko začnete z JavaScriptom in nadaljujete na naše primere SMS. Če ste že seznanjeni z JavaScriptom, lahko skočite neposredno na enega od naslednjih SMS projektov.

Primeri SMS v Javascriptu:

Pošiljanje SMS z HTTP REST API v Javascriptu (vzorec kode)
Pošiljanje več SMS z HTTP REST API v Javascriptu (vzorec kode)
Načrtovanje SMS z HTTP REST API v Javascriptu (vzorec kode)
Prejemanje SMS z HTTP REST API v Javascriptu (vzorec kode)
Brisanje SMS z HTTP REST API v Javascriptu (vzorec kode)
Prenesite najnovejšo JavaScript SMS API knjižnico z Githuba

Hypertext Markup Language (HTML) je orodje za definiranje strukture spletne strani. HTML je standardni označevalni jezik za ustvarjanje spletnih strani. Roka v roki s CSS omogočata, da spletne strani izgledajo tako, kot so. HTML je sestavljen iz niza elementov, ki brskalniku povedo, kako prikazati vsebino. V tej vadnici ga uporabljamo za prikaz sporočila "hello world".

JavaScript je skriptni programski jezik. Podoben je naravnemu jeziku, kot je angleščina. Uporablja se za komunikacijo z računalnikom. Glavna razlika med naravnim jezikom in programskim jezikom je, da imajo programski jeziki bolj strogo strukturo, da jih računalnik lažje razume. V tej vadnici uporabljamo kodo JavaScript za izpis sporočila "hello world".

Izraz spletni strežnik se lahko nanaša na strojno ali programsko opremo ali oboje, ki delujeta skupaj. Na strani strojne opreme je spletni strežnik računalnik, ki se uporablja za strežbo spletnim strankam. Na strani programske opreme spletni strežniki poganjajo PHP kodo, ki obdeluje HTTP zahteve spletnih strank.

Spletni brskalnik je aplikacija za dostop do svetovnega spleta. Ko uporabnik zahteva spletno stran z določenega spletnega mesta, spletni brskalnik pridobi potrebno vsebino s spletnega strežnika in nato prikaže stran na uporabnikovi napravi. Deluje tako, da uporabnik lahko pošlje HTTP zahteve spletnim strežnikom. S spletnim brskalnikom lahko dostopamo do spletnih strežnikov tako, da vnesemo njihov IP naslov ali domeno v polje URL.

WampServer se nanaša na rešitev za operacijski sistem Microsoft Windows, ki vključuje spletni strežnik Apache, OpenSSL za podporo SSL, podatkovno bazo MySQL in programski jezik PHP. WAMP deluje kot virtualni strežnik na vašem računalniku. Omogoča vam testiranje vseh spletnih funkcij brez posledic, saj je lokaliziran na vašem računalniku in ni povezan s spletom. Uporabili ga bomo za gostovanje naše HTML spletne strani lokalno.

Če želite napisati svoj prvi program v Javascriptu:

1. Namestite WAMP na svoj računalnik
2. Nastavite WAMP strežnik
3. Ustvarite novo datoteko index.html
4. Sestavite svoj prvi HTML dokument
5. Napišite svojo prvo kodo JavaScript v datoteko .html
6. Zaženite svoj prvi program JavaScript
7. Odprite način Inspect za obveščanje o napakah
8. Popravite napako

• Računalnik z Windows 10
• Okolje WAMP
• Brskalnik Chrome
• Primer Hello World v HTML
• Primer Hello World v Javascriptu

V tem videoposnetku bomo prenesli strežnik WAMP. To je programska oprema, ki jo bomo uporabili za gostovanje naše kode JavaScript. Najprej morate obiskati https://wampserver.com. in prenesite namestitveni program WampServer (Video 1). Po končanem prenosu bo namestitveni program v mapi za prenose, ki jo določi vaš brskalnik. Zagon tega exe datoteke bo začel postopek namestitve strežnika WAMP.

Začnite tako, da v brskalniku odprete https://wampserver.com. Kliknite na gumb Prenesi na vrhu, da se samodejno pomaknete navzdol do razdelka za prenose. Kliknite na WAMPSERVER 64 BITS (X64), da prenesete namestitveni program WampServer na svoj računalnik (Slika 1).

Naslednji korak po prenosu WampServer je njegova namestitev. Ta video vam pokaže kako lahko uspešno dokončate namestitev. Odprite namestitveni program, konfigurirajte podrobnosti namestitve in počakajte, da se postopek zaključi (Video 2). Ko namestite WAMP Server, se bo samodejno začel izvajati. Zdaj, ko WAMP Server deluje, lahko začnete programirati v Javascriptu.

Napišite in prenesite svojo prvo HTML stran

Če želite napisati svoj prvi HTML dokument, morate ustvariti novo datoteko index.html v mapi \www\ WampServerja.
Pot: C:\wamp64\www\

<!DOCTYPE html>
<html>
	<head>
		<title>Pozdravljen, svet!</title>
	</head>
	<body>
		<h1 id="text">Pozdravljen, svet!</h1>
	</body>
</html>
	

Ta video prikazuje, kako lahko ustvarite HTML dokument (Video 3). Ta dokument bomo kasneje uporabili za lokalno gostovanje. Ker na našem računalniku poganjamo WampServer, lahko naše datoteke gledamo na naslovu http://localhost/. Če želite to storiti, morate ustvariti ali postaviti svojo HTML datoteko v mapo \www\.
Pot: C:\wamp64\www\

V tem primeru bomo zamenjali besedilo v oznaki <h1> z id-jem "text". Za to bomo uporabili vgrajeni izbirnik JavaScript. Morda se zdi zapleteno, vendar je enostavno. Izbrati bomo morali element z id-jem "text" in nastavili njegovo lastnost innerText (za naš element je kot značilnost osebe) na besedilo "Pozdravljen, Ozeki!".

/*Ta JavaScript koda bo zamenjala besedilo v oznaki
z id-jem "text".*/
document.getElementById("text").innerText = "Pozdravljen, Ozeki!";
	

Ta video prikazuje, kako lahko napišete JavaScript kodo in jo zaženete v svojem brskalniku (Video 4). Sam ukaz, ki prikaže sporočilo, mora biti znotraj skriptnih oznak. Te oznake označujejo, da je tu treba izvesti del JavaScript kode. Koda sama je funkcija, ki ima kot argument "Pozdravljen, Ozeki". Po pisanju in shranjevanju kode jo lahko zaženete v svojem brskalniku.

Če naredimo napako v naši JavaScript kodi, lahko napake opazimo v načinu pregledovanja brskalnika. Če želite to storiti, morate z desnim klikom miške izbrati Preglej iz menija. Lahko pa preprosto pritisnete (Ctrl + Shift + I). Tam izberite Konzola, in vse napake bodo prikazane.

Kaj je sintaktična napaka?

Sintaktična napaka pomeni, da ne razumem. Če z nekom govorite v angleščini in vas ne razume, vam bo odgovoril z "Ne razumem". Če z računalnikom govorite v JavaScriptu in računalnik ne razume, kaj mu govorite, vam bo odgovoril s "Sintaktična napaka".

Kako obravnavati sintaktično napako v JavaScriptu?

V spodnji kodi bomo namerno ustvarili sintaktično napako tako, da ne bomo postavili podpičja po vrstici Pozdravljen, svet. Videli boste, kako se računalnik odzove, kako popravimo napako in kako uspešno zaženemo računalniški program.

Ta video prikazuje, kako lahko preverite, ali je v vaši kodi napaka, z uporabo načina pregledovanja v vašem brskalniku. To je izjemno koristna funkcija, ki vam pomaga popraviti napake (Video 5). Konzola za odpravljanje napak v načinu pregledovanja vsebuje sporočila o napakah, ki kažejo, kaj je šlo narobe. Lahko kliknete na indeks teh sporočil o napakah, da označite natančno vrstico kode, ki je povzročila napako.

Zgornji članek govori o tem, kaj morate napisati v svojem prvem JavaScript programu, ki je primer kode Pozdravljen, svet. Ta program se morda zdi preprost in morda ne naredi veliko, vendar tako se začnejo velike stvari; s tem, da ste sledili temu vodniku, ste naredili prvi korak k temu, da postanete razvijalec JavaScripta. Poznavanje kodiranja v JavaScriptu in ustvarjanje programov kot rešitev za vaše težave vam bo zelo pomagalo, da bo delo bolj gladko.

Kar ste se tukaj naučili, je dragoceno, na spletnem mestu Ozeki so še nadaljnji koristni vodniki, pojdite za njimi! Pojdimo na naslednji članek na to temo o tem, kako poslati SMS iz JavaScripta.

Zdaj prenesite Ozeki SMS Gateway in se lotite dela!