Mis on JavaScript ja kuidas see töötab?

Reklaam

JavaScript on muutunud kaasaegse veebiarenduse põhialuseks. See võimas keel on muutunud oluliseks tööriistaks, mida kõik veebiarendajad mõistavad.

JavaScriptil on erifunktsioonid, mis muudavad selle tavapärastest programmeerimiskeeltest erinevaks. Me uurime, mis see on, kuidas see töötab ja mida saate sellega teha. Jagage see ära.

Mis on JavaScript?

JavaScript on veebi skriptikeel. See on tõlgendatud keel, mis tähendab, et selle koodi tõlkimiseks pole vaja kompilaatorit nagu C või C ++. JavaScripti kood töötab otse veebibrauseris.

Keele uusim versioon on ECMAScript 2018, mis ilmus 2018. aasta juunis.

JavaScript töötab veebirakenduste või veebilehtede loomiseks koos HTML-i ja CSS-iga. JavaScripti toetavad enamikud kaasaegsed veebibrauserid nagu Google Chrome, Firefox, Safari, Microsoft Edge, Opera jne. Enamik Androidi ja iPhone'i mobiilibrauseritest toetab nüüd ka JavaScripti.

JavaScript kontrollib veebilehtede dünaamilisi elemente. See töötab veebibrauserites ja viimasel ajal ka veebiserverites. JavaScripti abil toetatakse ka rakenduste programmeerimisliideseid (API), mis annab teile rohkem funktsioone.

Kõigist JavaScripti toimimisviisidest on pisut lihtsam aru saada, kui mõistate, kuidas veebipõhine programmeerimine töötab, nii et õppige veel.

Veebirakenduse ehitusplokid

Veebisaite ja rakendusi loovad kolm komponenti: hüperteksti märgistuskeel (HTML), kaskaadlaadistiilid (CSS) ja JavaScript. Igal ühel on oma roll veebirakenduse loomisel.

• HTML on märgistuskeel, mis loob veebilehe skeleti. Kõik lõigud, lõigud, pildid, pealkirjad ja tekst on kirjutatud HTML-is. Sisu kuvatakse veebisaidil HTML-i vormingus.
• CSS kontrollib stiili ja paigutuse täiendavaid aspekte. CSS-i kasutatakse veebisaidi kujunduse loomiseks, luues värve, fonte, veerge, ääriseid jne. See võtab veebisaidi lihtteksti elementidest värviliste kujundusteni.
• Kolmas element on JavaScript. HTML ja CSS loovad struktuuri, kuid nad ei tee sealt midagi. JavaScript loob teie rakenduses dünaamilise tegevuse. Skriptimine JavaScriptis kontrollib nuppude klõpsamist, paroolivormide autentimist ja meediumide juhtimist.

Kõik kolm osa toimivad täismõõduliste rakenduste loomiseks üksteisega kooskõlas. See oleks hea mõte lisateavet HTMLi ja CSSi kohta Õppige HTML-i ja CSS-i nende samm-sammult juhendavate dokumentide abilKas olete huvitatud HTMList, CSSist ja JavaScriptist? Kui arvate, et teil on nullist veebisaitide loomise õppimiseks vajalik teadmine - siin on mõned suurepärased samm-sammult õpetamisvõimalused. Loe rohkem kui te ei tunne neid täielikult.

Kuidas JavaScript töötab?

Enne JavaScripti kirjutamist on oluline teada, kuidas see kapoti all töötab. Selle kohta on kaks olulist teavet: kuidas veebibrauser töötab ja dokumendiobjekti mudel (DOM).

Veebibrauser laadib veebilehe, parsib HTML-i ja loob sisust nn dokumendiobjekti mudeli (DOM). DOM tutvustab veebisaidi otsevaadet teie JavaScripti koodile.

Seejärel haarab brauser kõik HTML-iga lingitud, näiteks pildid ja CSS-failid. CSS-i teave pärineb CSS-i parserist.

DOM paneb HTML-i ja CSS-i kokku, et kõigepealt veebileht luua. Seejärel laadib brauserite JavaScripti mootor JavaScripti faile ja tekstisisese koodi, kuid ei käivita koodi kohe. See ootab HTML-i ja CSS-i laadimise lõpuleviimist.

Kui see on tehtud, käivitatakse JavaScripti koodi kirjutamise järjekorras. Selle tulemuseks on DOM-i värskendamine JavaScripti koodiga ja brauseri poolt muudetud.

Siin olev järjekord on oluline. Kui JavaScript ei oota HTML-i ja CSS-i lõppu, ei saa see DOM-i elemente muuta.

Mida ma saan JavaScriptiga teha?

JavaScript on täieõiguslik programmeerimiskeel, mis suudab enamikku asju teha tavalises keeles, nagu Python. Need sisaldavad:

• Muutujate deklareerimine Kuidas muutujaid JavaScriptis deklareeridaJavaScriptiga alustamiseks peate mõistma muutujaid. Siin on kolm viisi, kuidas muutujaid JavaScriptis deklareerida. Loe rohkem .
• Väärtuste salvestamine ja hankimine.
• Funktsioonide määratlemine ja kutsumine, sealhulgas noolefunktsioonid.
• JavaScripti objektide ja klasside määratlemine.
• Väliste moodulite laadimine ja kasutamine.
• Klõpsamissündmustele reageerivate sündmuste töötlejate kirjutamine.
• Serveri koodi kirjutamine.
• Ja palju muud.

Hoiatus: Alates JavaScript on nii võimas keel JavaScript ja veebiarendus: dokumendiobjekti mudeli kasutamineSee artikkel tutvustab teile dokumendiskeletti, millega JavaScript töötab. Omades selle abstraktse dokumendiobjekti mudeli praktilisi teadmisi, saate kirjutada JavaScripti, mis töötab igal veebilehel. Loe rohkem , on ka võimalik pahavara, viirusi ja brauseri häkke kirjutada, et neid kasutajatele tekitada. Need ulatuvad brauseri küpsiste, paroolide, krediitkaartide varastamisest kuni viiruste arvutisse allalaadimiseni.

JavaScripti kasutamine

Vaatame mõnda JavaScripti põhitõde koos koodinäidetega.

Muutujate deklareerimine

JavaScripti trükitakse dünaamiliselt, mis tähendab, et te ei pea oma koodis muutujate tüüpi deklareerima.

las num = 5; lase myString = "Tere"; var intressimäär = 0,25; 

Operaatorid

Lisamine

12 + 5. >> 17. 

Lahutamine

20 - 8. >> 12. 

Korrutamine

5 * 2. >> 10. 

Jaoskond

50 / 2. >> 25. 

Moodul

45 % 4. >> 1. 

Massiivid

las myArray = [1,2,4,5]; lase stringArray = ["tere", "maailm"]; 

Funktsioonid

JavaScript suudab funktsioone kirjutada, siin on lihtne funktsioon, mis lisab numbreid.

funktsiooni addNumbers (num1, num2) { tagasitulek num1 + num2; } >> lisaNumbrid (10,5); >> 15.

Silmused

JavaScripti abil saab itereerimiseks kasutada silmuseid, nt silmuste jaoks ja samas silmuseid.

jaoks (las i = 0; i <3; i ++) {console.log ("kaja!"); } >> kaja! >> kaja! >> kaja! 

las i = 0; while (i <3) {console.log ("kaja!"); i ++; } >> kaja! >> kaja! >> kaja! 

Kommentaarid

// Kommentaari kirjutamine. 

/ * Mitmerealise kommentaari kirjutamine. Võite kasutada nii palju ridu kui soovite. teksti tükeldamiseks ja kommentaaride loetavamaks muutmiseks. */

Veebilehel

Kõige tavalisem viis JavaScripti laadimiseks veebilehele on skript HTML-märgend. Sõltuvalt teie nõudmistest võite kasutada ühte järgmistest meetoditest.

• Laadige välimine JavaScripti fail veebilehele järgmiselt:
• Kui javascript pärineb veebilehe teisest domeenist, saate täieliku URL-i määrata järgmiselt:
• JavaScripti saab otse HTML-i manustada. Siin on.

Lisaks nendele meetoditele on JavaScripti koodi nõudmisel laadimise viise. Tegelikult on olemas JavaScripti moodulite laadimisele ja käitamisele pühendatud raamistikud, mille õiged sõltuvused on lahendatud töö ajal.

Need on keerukamad teemad, praegu õpite põhitõdesid.

JavaScripti koodilõikude näidised

Siin on mõned lihtsad JavaScripti koodinäited, mis illustreerivad selle kasutamist veebilehtedel. Need on näited koodist, mis töötab DOM-iga.

• Järgnev valib kõik julge elemendid dokumendis ja seab esimese värvi punaseks.

  var elems = document.getElementsByTagName ('b'); elems [0] .style.color = 'punane'; 

• Kas soovite pilti muuta img silt? Järgnev seostab sündmuse käitleja klõps nupu sündmus.

  Muuda pilti

• Lõigu teksti sisu värskendamine (lk) element? Seadke sisemineHTML elemendi omadus nagu näidatud:

  Tere, Maailm
  Klõpsake mind

Need koodinäidised annavad vaid ülevaate sellest, mida saate oma veebisaidil JavaScripti abil ära teha. Seal on palju õpetusi, mis õpetavad teile koodimist Ilmaistarjous: õppige 27 tunni videoõpetustega koodimaUltimate Coding Bundle, mis sisaldab viit videokursust ja 27 tundi premium-õpet, on praegu TASUTA. Loe rohkem alustamiseks. Saate seda proovida igal veebilehel, isegi sellel! Avage oma konsool ja proovige JavaScripti koodi.

Nüüd teate, mida JavaScript teeb

Loodetavasti on see sissejuhatus JavaScripti sisse viinud ja paneb teid veebiprogrammeerimises põnevust tundma. Saate selle kõik kokku tõmmata meie käepärane JavaScripti petmise leht Ülim JavaScripti petulehtSelle petulehe abil saate kiiresti värskendada JavaScripti elemente. Loe rohkem . JavaScripti kohta on veel palju õppida. Kui olete end mõnusamalt tundnud, siis miks mitte proovida õppige, kuidas kasutada dokumendiobjekti mudelit? Võite ka olla huvitatud TypeScripti tundmaõppimisest Mis on TypeScript ja miks peaksid arendajad seda proovima?Kas JavaScripti leidmine on pärast mõne teise programmeerimiskeele õppimist keeruline kohaneda? Siit saate teada, kuidas TypeScript võib aidata teil ümber lülituda. Loe rohkem .