Vad är JavaScript och hur fungerar det?

Annons

JavaScript har blivit en bas i modern webbutveckling. Detta kraftfulla språk har utvecklats till ett viktigt verktyg för alla webbutvecklare att förstå.

JavaScript har specialfunktioner som gör att det skiljer sig från traditionella programmeringsspråk. Vi kommer att gräva in vad det är, hur det fungerar och vad du kan göra med det. Låt oss bryta ner det.

Vad är JavaScript?

JavaScript är ett skriptspråk för webben. Det är ett tolkat språk, vilket betyder att den inte behöver en kompilator för att översätta dess kod som C eller C ++. JavaScript-kod körs direkt i en webbläsare.

Den senaste versionen av språket är ECMAScript 2018 som släpptes i juni 2018.

JavaScript fungerar med HTML och CSS för att bygga webbappar eller webbsidor. JavaScript stöds av de flesta moderna webbläsare som Google Chrome, Firefox, Safari, Microsoft Edge, Opera, etc. De flesta mobila webbläsare för Android och iPhone stöder nu också JavaScript.

JavaScript styr de dynamiska elementen på webbsidor. Det fungerar i webbläsare och, nyligen, på webbservrar också. Application Programming Interfaces (API) stöds också av JavaScript, vilket ger dig mer funktionalitet.

Att förstå alla sätt som JavaScript fungerar är lite lättare när du förstår hur webbprogrammering fungerar, så låt oss lära oss mer.

Webbblockblock

Det finns tre komponenter som bygger webbplatser och appar: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) och JavaScript. Var och en har en roll i att skapa en webbapp.

• html är ett markeringsspråk som skapar webbsidans skelett. Alla stycken, avsnitt, bilder, rubriker och text är skrivna i HTML. Innehållet visas på webbplatsen i den ordning de skrivs i HTML.
• CSS styr stilen och de ytterligare aspekterna av layouten. CSS används för att skapa designen på webbplatsen för att skapa färger, teckensnitt, kolumner, gränser, etc. Det tar webbplatsen från vanliga textelement till färgglada mönster.
• Det tredje elementet är JavaScript. HTML och CSS skapar strukturen, men de gör inget därifrån. JavaScript skapar dynamisk aktivitet på din app. Skriptning i JavaScript är det som styr funktioner när man klickar på knappar, hur lösenordsformer autentiseras, hur media styrs.

Alla tre delarna arbetar i harmoni med varandra för att skapa fullskaliga appar. Det skulle vara en bra idé att läs mer om HTML och CSS Lär dig HTML och CSS med dessa steg för steg-tutorialsÄr du nyfiken på HTML, CSS och JavaScript? Om du tror att du har en skicklighet för att lära dig att skapa webbplatser från grunden - här är några bra steg-för-steg-tutorials som är värda att prova. Läs mer om du inte är helt bekväm med dem.

Hur fungerar JavaScript?

Innan du skriver JavaScript är det viktigt att veta hur det fungerar under huven. Det finns två viktiga delar att lära sig om: Hur webbläsaren fungerar och Document Object Model (DOM).

Webbläsaren laddar en webbsida, analyserar HTML och skapar det som kallas DOM (Document Object Model) från innehållet. DOM presenterar en direktvy av webbsidan till din JavaScript-kod.

Webbläsaren tar sedan tag i allt som är kopplat till HTML, som bilder och CSS-filer. CSS-informationen kommer från CSS-parsern.

HTML och CSS sätts samman av DOM för att skapa webbsidan först. Sedan laddar webbläsarnas JavaScript-motor JavaScript-filer och inline-kod men kör inte koden omedelbart. Det väntar på att HTML och CSS ska laddas.

När detta är gjort körs JavaScript i den ordning koden skrivs. Detta resulterar i att DOM uppdateras med JavaScript-kod och återges av webbläsaren.

Beställningen här är viktig. Om JavaScript inte väntade på att HTML och CSS slutfördes, skulle det inte kunna ändra DOM-elementen.

Vad kan jag göra med JavaScript?

JavaScript är ett fullständigt programmeringsspråk som kan göra det mesta som ett vanligt språk som Python kan göra. Dessa inkluderar:

• Förklarande variabler Hur man förklarar variabler i JavaScriptFör att komma igång med JavaScript måste du förstå variabler. Här är tre sätt att deklara variabler i JavaScript. Läs mer .
• Lagring och hämtning av värden.
• Definiera och åberopa funktioner, inklusive pilfunktioner.
• Definiera JavaScript-objekt och klasser.
• Laddar och använder externa moduler.
• Skriva händelseshanterare som svarar på klickhändelser.
• Skriva serverkod.
• Och mycket mer.

Varning: Eftersom JavaScript är ett så kraftfullt språk JavaScript och webbutveckling: Använda dokumentobjektmodellenDen här artikeln kommer att presentera dokumentskelettet som JavaScript fungerar med. Med kunskap om detta abstrakta dokumentobjektmodell kan du skriva JavaScript som fungerar på vilken webbsida som helst. Läs mer , är det också möjligt att skriva skadlig programvara, virus och webbläsarhack för att tillföra dem till användarna. Dessa sträcker sig från att stjäla webbläsarkakor, lösenord, kreditkort till nedladdning av virus till din dator.

Använda JavaScript

Låt oss titta på några JavaScript-grunder med kodexempel.

Förklarande variabler

Javascript skrivs dynamiskt, vilket innebär att du inte behöver ange typen av variabler i din kod.

låt num = 5; let myString = "Hej"; var ränta = 0,25; 

operatörer

Tillägg

12 + 5. >> 17. 

Subtraktion

20 - 8. >> 12. 

Multiplikation

5 * 2. >> 10. 

Division

50 / 2. >> 25. 

modul

45 % 4. >> 1. 

arrayer

låt myArray = [1,2,4,5]; let stringArray = ["hej", "världen"]; 

funktioner

JavaScript kan skriva funktioner, här är en enkel funktion som lägger till nummer.

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

Loops

JavaScript kan utföra slingor för iteration, slingor som för öglor och medan slingor.

för (låt i = 0; i <3; i ++) {console.log ("echo!"); } >> eko! >> eko! >> eko! 

låt i = 0; medan (i <3) {console.log ("echo!"); i ++; } >> eko! >> eko! >> eko! 

kommentarer

// Skriva en kommentar. 

/ * Skriva en kommentar med flera linjer. Du kan använda så många rader du vill. att dela upp text och göra kommentarer mer läsbara. */

På en webbsida

Det vanligaste sättet att ladda JavaScript på en webbsida är att använda manus HTML-tagg. Beroende på dina krav kan du använda någon av följande metoder.

• Ladda en extern JavaScript-fil till en webbsida enligt följande:
• Du kan ange den fullständiga URL: en om javascript kommer från en annan domän från webbsidan enligt följande:
• JavaScript kan inbäddas direkt i HTML. Här är en.

Andra än dessa metoder finns det sätt att ladda JavaScript-kod på begäran. I själva verket finns det ramar som är dedikerade för att ladda och köra JavaScript-moduler med rätt beroenden som löses vid körtid.

Det är mer avancerade ämnen, just nu lär du dig grunderna.

Exempel på JavaScript-kodavsnitt

Här är några enkla JavaScript-kodprover för att illustrera hur det används på webbsidor. Detta är exempel på kod som fungerar med DOM.

• Följande väljer alla djärv element i dokumentet och ställer in färgen på den första till röd.

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

• Vill du ändra bilden i en img märka? Följande associerar en händelsehanterare för klick händelse av en knapp.

  Byt bild

• Uppdatera textinnehållet i ett stycke (p) element? Ställ in innerhtml elementets egenskap som visas:

  Hej världen
  Klicka här

Dessa kodprover ger bara en inblick i vad du kan göra med JavaScript på din webbsida. Det finns massor av tutorials som kan lära dig hur du kodar Freebie: Lär dig att koda med 27 timmars videohandledningUltimate Coding Bundle, som inkluderar fem videokurser och 27 timmars premiuminstruktion är GRATIS just nu. Läs mer för att komma igång. Du kan prova det på valfri webbsida, även den här! Öppna din konsol och prova någon JavaScript-kod.

Nu vet du vad JavaScript gör

Förhoppningsvis har denna introduktion gett lite inblick i JavaScript och blir dig upphetsad över webbprogrammering. Du kan sammanfatta allt i vårt praktiska JavaScript-fuskark The Ultimate JavaScript Cheat SheetFå en snabb uppdatering av JavaScript-element med det här fusksidan. Läs mer . Det finns mycket mer att lära sig om JavaScript. När du känner dig mer bekväm varför inte försöka lära dig att använda dokumentobjektmodellen? Du kanske också är det intresserad av att lära sig om TypeScript Vad är TypeScript och varför ska utvecklare prova det?Är det svårt att anpassa JavaScript efter att ha lärt sig ett annat programmeringsspråk? Så här kan TypeScript hjälpa dig att växla. Läs mer .