Hva er JavaScript, og hvordan fungerer det?

Annonse

JavaScript har blitt en stift i moderne nettutvikling. Dette kraftige språket har utviklet seg til et essensielt verktøy for enhver webutvikler å forstå.

JavaScript har spesielle funksjoner som gjør det forskjellig fra tradisjonelle programmeringsspråk. Vi kommer til å grave i hva det er, hvordan det fungerer og hva du kan gjøre med det. La oss bryte det ned.

Hva er JavaScript?

JavaScript er et skriptspråk for nettet. Det er et tolket språk, som betyr at det ikke trenger en kompilator for å oversette koden som C eller C ++. JavaScript-kode kjøres direkte i en nettleser.

Den siste versjonen av språket er ECMAScript 2018 som ble utgitt i juni 2018.

JavaScript fungerer med HTML og CSS for å bygge webapper eller websider. JavaScript støttes av de fleste moderne nettlesere som Google Chrome, Firefox, Safari, Microsoft Edge, Opera, etc. De fleste mobilnettlesere for Android og iPhone støtter nå også JavaScript.

JavaScript kontrollerer de dynamiske elementene på websider. Det fungerer i nettlesere og, nylig, på webservere også. Application Programming Interfaces (API) støttes også av JavaScript, noe som gir deg mer funksjonalitet.

Det er litt enklere å forstå alle måtene JavaScript fungerer på når du forstår hvordan nettprogrammering fungerer, så la oss lære mer.

Web-app byggesteiner

Det er tre komponenter som bygger nettsteder og apper: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) og JavaScript. Hver og en har en rolle i å lage en webapp.

• HTML er et markeringsspråk som lager skjelettet til nettsiden. Alle avsnitt, seksjoner, bilder, overskrifter og tekst er skrevet i HTML. Innholdet vises på nettstedet i den rekkefølgen de er skrevet i HTML.
• CSS styrer stilen og tilleggsaspektene i oppsettet. CSS brukes til å lage utformingen av nettstedet og lage farger, skrifter, kolonner, rammer osv. Det tar nettstedet fra ren tekstelementer til fargerike design.
• Det tredje elementet er Javascript. HTML og CSS lager strukturen, men de gjør ikke noe derfra. JavaScript oppretter dynamisk aktivitet på appen din. Skripting i JavaScript er det som styrer funksjoner når du klikker på knapper, hvordan passordformer blir autentisert, hvordan media styres.

Alle tre delene fungerer i harmoni med hverandre for å lage apper i full skala. Det ville være lurt å lære mer om HTML og CSS Lær HTML og CSS med disse trinnvise tutorialsEr du nysgjerrig på HTML, CSS og JavaScript? Hvis du tror at du har en evne til å lære å lage nettsteder fra bunnen av - her er noen gode trinnvise tutorials som er verdt å prøve. Les mer hvis du ikke er helt komfortabel med dem.

Hvordan fungerer JavaScript?

Før du skriver JavaScript, er det viktig å vite hvordan det fungerer under panseret. Det er to viktige brikker å lære om: Slik fungerer nettleseren, og Document Object Model (DOM).

Nettleseren laster inn en webside, analyserer HTML og oppretter det som er kjent som en Document Object Model (DOM) fra innholdet. DOM presenterer en livevisning av websiden til JavaScript-koden.

Nettleseren vil da ta tak i alt som er knyttet til HTML, for eksempel bilder og CSS-filer. CSS-informasjonen kommer fra CSS-parseren.

HTML og CSS er satt sammen av DOM for å opprette webside først. Deretter laster nettlesernes JavaScript-motor JavaScript-filer og inline-kode, men kjører ikke koden umiddelbart. Det venter på at HTML og CSS er ferdige med lastingen.

Når dette er gjort, kjøres JavaScript i den rekkefølgen koden er skrevet. Dette resulterer i at DOM blir oppdatert med JavaScript-kode og gjengitt av nettleseren.

Rekkefølgen her er viktig. Hvis JavaScript ikke ventet på at HTML og CSS ble fullført, ville det ikke kunne endre DOM-elementene.

Hva kan jeg gjøre med JavaScript?

JavaScript er et fullverdig programmeringsspråk som kan gjøre det meste et vanlig språk som Python kan gjøre. Disse inkluderer:

• Deklarerende variabler Hvordan erklære variabler i JavaScriptFor å komme i gang med JavaScript, må du forstå variabler. Her er tre måter å deklarere variabler i JavaScript. Les mer .
• Lagring og henting av verdier.
• Definere og påkalle funksjoner, inkludert pilfunksjoner.
• Definere JavaScript-objekter og klasser.
• Laster og bruker eksterne moduler.
• Skrive hendelsesbehandlere som svarer på klikkhendelser.
• Skrive serverkode.
• Og mye mer.

Advarsel: Siden JavaScript er et så kraftig språk JavaScript og webutvikling: Bruke dokumentobjektmodellenDenne artikkelen vil introdusere deg for dokumentskjelettet som JavaScript fungerer med. Når du har kunnskap om denne abstrakte dokumentobjektmodellen, kan du skrive JavaScript som fungerer på enhver webside. Les mer , er det også mulig å skrive malware, virus og nettleserhack for å påføre brukerne dem. Disse spenner fra å stjele nettleserkaker, passord, kredittkort til å laste ned virus til datamaskinen din.

Bruker JavaScript

La oss se på noen grunnleggende JavaScript med kodeeksempler.

Deklarerende variabler

JavaScript er dynamisk skrevet, noe som betyr at du ikke trenger å oppgi typen variabler i koden.

la num = 5; la myString = "Hei"; var interesseRate = 0,25; 

operatører

Addisjon

12 + 5. >> 17. 

Subtraksjon

20 - 8. >> 12. 

multiplikasjon

5 * 2. >> 10. 

Inndeling

50 / 2. >> 25. 

modulus

45 % 4. >> 1. 

arrays

la myArray = [1,2,4,5]; la stringArray = ["hallo", "verden"]; 

funksjoner

JavaScript kan skrive funksjoner, her er en enkel funksjon som legger til tall.

funksjon addNumbers (num1, num2) { return num1 + num2; } >> addNumbers (10,5); >> 15.

Loops

JavaScript kan utføre løkker for iterasjon, løkker som for løkker og mens løkker.

for (la jeg = 0; i <3; i ++) {console.log ("ekko!"); } >> ekko! >> ekko! >> ekko! 

la jeg = 0; while (i <3) {console.log ("ekko!"); Jeg ++; } >> ekko! >> ekko! >> ekko! 

kommentarer

// Skrive en kommentar. 

/ * Å skrive en kommentar på flere linjer. Du kan bruke så mange linjer du vil. å dele opp tekst og gjøre kommentarer mer leselige. */

På en webside

Den vanligste måten å laste JavaScript på en webside på er å bruke manus HTML-kode. Avhengig av dine behov, kan du bruke en av følgende metoder.

• Last inn en ekstern JavaScript-fil på en webside som følger:
• Du kan spesifisere den komplette URL-en hvis JavaScript er fra et annet domene fra websiden som følger:
• JavaScript kan legges direkte inn i HTML-koden. Her er en.

Andre enn disse metodene er det måter å laste JavaScript-kode på forespørsel. Det er faktisk rammer som er dedikert til å laste og kjøre JavaScript-moduler med riktige avhengigheter løst ved kjøretid.

Dette er mer avanserte emner, akkurat nå lærer du det grunnleggende.

Eksempel på JavaScript-kodebiter

Her er noen enkle JavaScript-kodeprøver for å illustrere hvordan den brukes på websider. Dette er eksempler på kode som fungerer med DOM.

• Følgende velger alle modig elementer i dokumentet og setter fargen på den første til rød.

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

• Vil du endre bildet i en img stikkord? Følgende knytter en hendelseshåndterer til klikk hendelse av en knapp.

  Endre bilde

• Oppdater tekstinnholdet i et avsnitt (p) element? Sett innerhtml elementets egenskap som vist:

  Hei Verden
  Klikk på meg

Disse kodeprøvene gir bare et innblikk i hva du kan gjøre med JavaScript på hjemmesiden din. Det er mange tutorials som kan lære deg å kode Freebie: Lær å kode med 27 timer med videoopplæringerUltimate Coding Bundle, som inkluderer fem videokurs og 27 timers premiuminstruksjon, er GRATIS akkurat nå. Les mer for å komme i gang. Du kan prøve det på hvilken som helst webside, også denne! Åpne konsollen din og prøv ut JavaScript-koden.

Nå vet du hva JavaScript gjør

Forhåpentligvis har denne introduksjonen brakt litt innsikt i JavaScript og blir deg spent på nettprogrammering. Du kan sammenfatte det hele inn vårt praktiske JavaScript-jukseark The Ultimate JavaScript Cheat SheetFå en rask oppdatering på JavaScript-elementer med dette juksearket. Les mer . Det er mye mer å lære om JavaScript. Når du føler deg mer komfortabel, hvorfor ikke prøve det lære hvordan du bruker Document Object Model? Det kan du også være interessert i å lære om TypeScript Hva er TypeScript, og hvorfor skal utviklere prøve det?Er det vanskelig å tilpasse JavaScript etter å ha lært et annet programmeringsspråk? Slik kan TypeScript hjelpe deg med å bytte. Les mer .