Hvad er JavaScript, og hvordan fungerer det?

Reklame

JavaScript er blevet en hæfteklam i moderne webudvikling. Dette magtfulde sprog har udviklet sig til et vigtigt værktøj, som enhver webudvikler kan forstå.

JavaScript har specielle funktioner, der gør det anderledes end traditionelle programmeringssprog. Vi kommer til at grave i, hvad det er, hvordan det fungerer, og hvad du kan gøre med det. Lad os nedbryde det.

Hvad er JavaScript?

JavaScript er et scriptingsprog til internettet. Det er et tolket sprog, hvilket betyder, at det ikke har brug for en compiler for at oversætte dens kode som C eller C ++. JavaScript-kode kører direkte i en webbrowser.

Den seneste version af sproget er ECMAScript 2018, som blev frigivet i juni 2018.

JavaScript fungerer sammen med HTML og CSS til at oprette webapps eller websider. JavaScript understøttes af de fleste moderne webbrowsere som Google Chrome, Firefox, Safari, Microsoft Edge, Opera osv. De fleste mobile browsere til Android og iPhone understøtter nu også JavaScript.

JavaScript styrer de dynamiske elementer på websider. Det fungerer også i webbrowsere og for nylig på webservere. Application Programming Interfaces (API) understøttes også af JavaScript, hvilket giver dig mere funktionalitet.

At forstå alle måder, hvorpå JavaScript fungerer, er lidt lettere, når du forstår, hvordan webprogrammering fungerer, så lad os lære mere.

Webappbygningsblokke

Der er tre komponenter, der bygger websteder og apps: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) og JavaScript. Hver af dem har en rolle i oprettelsen af ​​en webapp.

• HTML er et markup-sprog, der opretter webstedets skelet. Alle afsnit, sektioner, billeder, overskrifter og tekst er skrevet i HTML. Indholdet vises på webstedet i den rækkefølge, de er skrevet i HTML.
• CSS styrer stilen og de yderligere aspekter af layoutet. CSS bruges til at oprette design af webstedet for at skabe farver, skrifttyper, kolonner, rammer osv. Det tager hjemmesiden fra almindelig tekstelementer til farverige designs.
• Det tredje element er JavaScript. HTML og CSS skaber strukturen, men de gør ikke noget derfra. JavaScript opretter dynamisk aktivitet på din app. Scripting i JavaScript er det, der styrer funktioner, når der klikkes på knapper, hvordan kodeordformer godkendes, hvordan medier styres.

Alle tre dele arbejder i harmoni med hinanden for at skabe apps i fuld skala. Det ville være en god ide at gøre det Lær mere om HTML og CSS Lær HTML og CSS med disse trinvise tutorialsEr du nysgerrig efter HTML, CSS og JavaScript? Hvis du tror, ​​at du har en evne til at lære at oprette websteder fra bunden - her er et par gode trin-for-trin-tutorials værd at prøve. Læs mere hvis du ikke er helt tilpas med dem.

Hvordan fungerer JavaScript?

Før du skriver JavaScript, er det vigtigt at vide, hvordan det fungerer under hætten. Der er to vigtige stykker, du kan lære om: Sådan fungerer webbrowseren og Document Object Model (DOM).

Webbrowser indlæser en webside, analyserer HTML og opretter det, der er kendt som en Document Object Model (DOM) fra indholdet. DOM præsenterer en direkte visning af websiden til din JavaScript-kode.

Browseren griber derefter alt, der er knyttet til HTML, som billeder og CSS-filer. CSS-informationen kommer fra CSS-parseren.

HTML og CSS er sammensat af DOM for først at oprette websiden. Derefter indlæser browsernes JavaScript-motor JavaScript-filer og inline-kode, men kører ikke koden med det samme. Det venter på, at HTML og CSS er færdig med indlæsningen.

Når dette er gjort, udføres JavaScript i den rækkefølge, koden skrives. Dette resulterer i, at DOM opdateres med JavaScript-kode og gengives af browseren.

Ordren her er vigtig. Hvis JavaScript ikke ventede på, at HTML og CSS blev afsluttet, ville det ikke være i stand til at ændre DOM-elementerne.

Hvad kan jeg gøre med JavaScript?

JavaScript er et fuldgyldigt programmeringssprog, der kan gøre det meste som et almindeligt sprog som Python kan gøre. Disse inkluderer:

• Deklarerende variabler Sådan erklæres variabler i JavaScriptFor at komme i gang med JavaScript skal du forstå variabler. Her er tre måder at erklære variabler i JavaScript på. Læs mere .
• Lagring og hentning af værdier.
• Definition og påkaldelse af funktioner, inklusive pil funktioner.
• Definition af JavaScript-objekter og klasser.
• Indlæsning og brug af eksterne moduler.
• Skrivning af hændelsesbehandlere, der reagerer på klikhændelser.
• Skrivning af serverkode.
• Og meget mere.

Advarsel: Siden JavaScript er et så stærkt sprog JavaScript og webudvikling: Brug af dokumentobjektmodellenDenne artikel introducerer dig til dokumentskelet, som JavaScript fungerer sammen med. Når du har kendskab til denne abstrakte dokumentobjektmodel, kan du skrive JavaScript, der fungerer på enhver webside. Læs mere , er det også muligt at skrive malware, vira og browserhacks for at påføre brugerne dem. Disse spænder fra at stjæle browser-cookies, adgangskoder, kreditkort til at downloade vira til din computer.

Brug af JavaScript

Lad os se på nogle JavaScript-basics med kodeeksempler.

Deklarerende variabler

JavaScript er dynamisk indtastet, hvilket betyder, at du ikke behøver at angive typen af ​​dine variabler i din kode.

lad num = 5; let myString = "Hej"; var interesseRate = 0,25; 

Operatører

Addition

12 + 5. >> 17. 

Subtraktion

20 - 8. >> 12. 

Multiplikation

5 * 2. >> 10. 

Division

50 / 2. >> 25. 

modulus

45 % 4. >> 1. 

Arrays

lad myArray = [1,2,4,5]; lad stringArray = ["hej", "verden"]; 

Funktioner

JavaScript kan skrive funktioner, her er en simpel funktion, der tilføjer numre.

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

sløjfer

JavaScript kan udføre løkker til iteration, løkker som til løkker og mens løkker.

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

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

Kommentarer

// Skrivning af en kommentar. 

/ * Skrivning af en kommentar på flere linjer. Du kan bruge så mange linjer, som du vil. at dele op teksten og gøre kommentarer mere læsbare. */

På en webside

Den mest almindelige måde at indlæse JavaScript på en webside er at bruge manuskript HTML-tag. Afhængigt af dine krav kan du bruge en af ​​følgende metoder.

• Indlæs en ekstern JavaScript-fil på en webside som følger:
• Du kan angive den komplette URL, hvis javascript er fra et andet domæne fra websiden som følger:
• JavaScript kan integreres direkte i HTML. Her er en.

Bortset fra disse metoder er der måder at indlæse JavaScript-kode efter behov. Der er faktisk rammer dedikeret til indlæsning og kørsel af JavaScript-moduler med passende afhængigheder, der løses på kørselstidspunktet.

Det er mere avancerede emner, lige nu lærer du det grundlæggende.

Eksempel på JavaScript-kodestykker

Her er nogle enkle JavaScript-kodeeksempler, der illustrerer, hvordan det bruges på websider. Dette er eksempler på kode, der fungerer med DOM.

• Følgende vælger alle fremhævet elementer i dokumentet og indstiller farven på den første til rød.

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

• Vil du ændre billedet i et img tag? Følgende knytter en begivenhedshåndterer til klik begivenhed med en knap.

  Skift billede

• Opdater tekstindholdet i et afsnit (p) element? Indstil innerHTML elementets egenskab som vist:

  Hej Verden
  Klik på mig

Disse kodeeksempler tilbyder bare et glimt af, hvad du kan gøre ved hjælp af JavaScript på din webside. Der er masser af tutorials, der kan lære dig at kode Freebie: Lær at kode med 27 timers videotutorialsUltimate Coding Bundle, der inkluderer fem videokurser og 27 timers premium-instruktion er GRATIS lige nu. Læs mere at komme i gang. Du kan prøve det på enhver webside, også denne! Åbn din konsol, og prøv en JavaScript-kode.

Nu ved du hvad JavaScript gør

Forhåbentlig har denne introduktion bragt nogle indsigt i JavaScript og får dig begejstret for webprogrammering. Du kan sammenfatte det hele ind vores praktiske JavaScript snyderark Det ultimative JavaScript snyderiFå en hurtig opdatering af JavaScript-elementer med dette snyderi. Læs mere . Der er meget mere at lære om JavaScript. Når du føler dig mere komfortabel, hvorfor ikke prøve det lære at bruge dokumentobjektmodellen? Det kan du også være interesseret i at lære om TypeScript Hvad er TypeScript, og hvorfor skal udviklere prøve det?Synes du det er svært at tilpasse JavaScript efter at have lært et andet programmeringssprog? Her er, hvordan TypeScript kan hjælpe dig med at skifte. Læs mere .