Wat is JavaScript en hoe werkt het?

Advertentie

JavaScript is een nietje geworden in de moderne webontwikkeling. Deze krachtige taal is geëvolueerd tot een essentieel hulpmiddel voor elke webontwikkelaar om te begrijpen.

JavaScript heeft speciale functies die het anders maken dan traditionele programmeertalen. We gaan kijken wat het is, hoe het werkt en wat je ermee kunt doen. Laten we het afbreken.

Wat is JavaScript?

JavaScript is een scripttaal voor het web. Het is een geïnterpreteerde taal, wat betekent dat het geen compiler nodig heeft om zijn code zoals C of C ++ te vertalen. JavaScript-code wordt rechtstreeks in een webbrowser uitgevoerd.

De nieuwste versie van de taal is ECMAScript 2018, die werd uitgebracht in juni 2018.

JavaScript werkt met HTML en CSS om web-apps of webpagina's te bouwen. JavaScript wordt ondersteund door de meeste moderne webbrowsers zoals Google Chrome, Firefox, Safari, Microsoft Edge, Opera, etc. De meeste mobiele browsers voor Android en iPhone ondersteunen nu ook JavaScript.

JavaScript beheert de dynamische elementen van webpagina's. Het werkt in webbrowsers en, recenter, ook op webservers. Application Programming Interfaces (API) worden ook ondersteund door JavaScript, voor meer functionaliteit.

Inzicht in alle manieren waarop JavaScript werkt, is een beetje eenvoudiger als u begrijpt hoe webprogrammering werkt, dus laten we meer leren.

Bouwstenen van webapps

Er zijn drie componenten die websites en apps bouwen: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) en JavaScript. Elke rol speelt een rol bij het maken van een web-app.

• HTML is een opmaaktaal die het skelet van de webpagina maakt. Alle alinea's, secties, afbeeldingen, koppen en tekst zijn geschreven in HTML. De inhoud wordt op de website weergegeven in de volgorde waarin ze in HTML zijn geschreven.
• CSS bepaalt de stijl en de extra aspecten van de lay-out. CSS wordt gebruikt om het ontwerp van de website te maken en de kleuren, lettertypen, kolommen, randen, enz. Te maken. Het brengt de website van platte tekstelementen tot kleurrijke ontwerpen.
• Het derde element is JavaScript. HTML en CSS creëren de structuur, maar vanaf daar doen ze niets. JavaScript creëert dynamische activiteit in uw app. Scripting in JavaScript bepaalt de functies wanneer op knoppen wordt geklikt, hoe wachtwoordformulieren worden geverifieerd, hoe media worden beheerd.

Alle drie de delen werken in harmonie met elkaar om volledige apps te maken. Het zou een goed idee zijn om meer informatie over HTML en CSS Leer HTML en CSS met deze stapsgewijze zelfstudiesBenieuwd naar HTML, CSS en JavaScript? Als je denkt dat je handig bent in het maken van nieuwe websites - hier zijn een paar geweldige stapsgewijze tutorials die het proberen waard zijn. Lees verder als je je er niet helemaal comfortabel bij voelt.

Hoe werkt JavaScript?

Voordat u JavaScript schrijft, is het belangrijk om te weten hoe het werkt onder de motorkap. Er zijn twee belangrijke stukjes om over te leren: hoe de webbrowser werkt en het Document Object Model (DOM).

De webbrowser laadt een webpagina, ontleedt de HTML en maakt vanuit de inhoud een zogenaamd Document Object Model (DOM). De DOM geeft een live weergave van de webpagina aan uw JavaScript-code.

De browser haalt dan alles op dat gekoppeld is aan de HTML, zoals afbeeldingen en CSS-bestanden. De CSS-informatie is afkomstig van de CSS-parser.

De HTML en CSS worden door de DOM samengesteld om eerst de webpagina te maken. Vervolgens laadt de JavaScript-engine van de browser JavaScript-bestanden en inline code, maar voert de code niet onmiddellijk uit. Het wacht tot de HTML en CSS zijn geladen.

Zodra dit is gebeurd, wordt JavaScript uitgevoerd in de volgorde waarin de code is geschreven. Dit resulteert erin dat de DOM wordt bijgewerkt door JavaScript-code en wordt weergegeven door de browser.

De volgorde hier is belangrijk. Als JavaScript niet zou wachten tot de HTML en CSS klaar waren, zou het de DOM-elementen niet kunnen wijzigen.

Wat kan ik doen met JavaScript?

JavaScript is een volwaardige programmeertaal die de meeste dingen kan doen die een normale taal zoals Python kan doen. Waaronder:

• Variabelen declareren Hoe variabelen in JavaScript te declarerenOm te beginnen met JavaScript, moet u variabelen begrijpen. Hier zijn drie manieren om variabelen in JavaScript te declareren. Lees verder .
• Waarden opslaan en ophalen.
• Functies definiëren en aanroepen, inclusief pijl functies.
• JavaScript-objecten en klassen definiëren.
• Externe modules laden en gebruiken.
• Handlers voor gebeurtenissen schrijven die reageren op klikgebeurtenissen.
• Servercode schrijven.
• En nog veel meer.

Waarschuwing: Sinds JavaScript is zo'n krachtige taal JavaScript en webontwikkeling: het documentobjectmodel gebruikenDit artikel laat je kennismaken met het document-skelet waarmee JavaScript werkt. Met een grondige kennis van dit abstracte documentobjectmodel, kunt u JavaScript schrijven dat op elke webpagina werkt. Lees verder , het is ook mogelijk om malware, virussen en browserhacks te schrijven om ze de gebruikers toe te brengen. Deze variëren van het stelen van browser-cookies, wachtwoorden en creditcards tot het downloaden van virussen op uw computer.

JavaScript gebruiken

Laten we eens kijken naar enkele basisprincipes van JavaScript met codevoorbeelden.

Variabelen declareren

JavaScript wordt dynamisch getypt, wat betekent dat u het type van uw variabelen niet in uw code hoeft op te geven.

laat num = 5; let myString = "Hallo"; var interestRate = 0,25; 

operators

toevoeging

12 + 5. >> 17. 

aftrekking

20 - 8. >> 12. 

Vermenigvuldiging

5 * 2. >> 10. 

Divisie

50 / 2. >> 25. 

modulus

45 % 4. >> 1. 

arrays

laat myArray = [1,2,4,5]; let stringArray = ["hallo", "wereld"]; 

functies

JavaScript kan functies schrijven, hier is een eenvoudige functie die getallen toevoegt.

functie addNumbers (num1, num2) { retourneer num1 + num2; } >> addNumbers (10,5); >> 15.

Loops

JavaScript kan loops uitvoeren voor iteratie, loops like voor lussen en terwijl lussen.

voor (laat i = 0; i <3; i ++) {console.log ("echo!"); } >> echo! >> echo! >> echo! 

laat i = 0; terwijl (i <3) {console.log ("echo!"); i ++; } >> echo! >> echo! >> echo! 

Comments

// Een opmerking schrijven. 

/ * Een commentaar met meerdere regels schrijven. U kunt zoveel lijnen gebruiken als u wilt. om tekst op te splitsen en opmerkingen leesbaarder te maken. */

In een webpagina

De meest gebruikelijke manier om JavaScript in een webpagina te laden, is het gebruik van de script HTML-tag. Afhankelijk van uw vereisten, kunt u een van de volgende methoden gebruiken.

• Laad een extern JavaScript-bestand als volgt in een webpagina:
• U kunt als volgt de volledige URL opgeven als het JavaScript uit een ander domein dan de webpagina komt:
• JavaScript kan rechtstreeks worden ingesloten in de HTML. Hier is een.

Afgezien van deze methoden zijn er manieren om JavaScript-code op aanvraag te laden. In feite zijn er frameworks voor het laden en uitvoeren van JavaScript-modules met de juiste afhankelijkheden opgelost tijdens runtime.

Dat zijn geavanceerdere onderwerpen, nu leer je de basis.

Voorbeeld van JavaScript-codefragmenten

Hier zijn enkele eenvoudige JavaScript-codevoorbeelden om te illustreren hoe het op webpagina's wordt gebruikt. Dit zijn voorbeelden van code die werken met de DOM.

• Het volgende selecteert alles stoutmoedig elementen in het document en stelt de kleur van de eerste in op rood.

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

• Wilt u de afbeelding in een wijzigen img label? Het volgende koppelt een gebeurtenishandler voor de Klik gebeurtenis van een knop.

  Wijzig afbeelding

• Update de tekstinhoud van een paragraaf (p) element? Stel de innerHTML eigenschap van het element zoals getoond:

  Hallo Wereld
  Klik hier

Deze codevoorbeelden geven slechts een kijkje in wat u kunt doen met JavaScript op uw webpagina. Er zijn veel tutorials die je kunnen leren coderen Freebie: leer coderen met 27 uur aan videotutorialsDe ultieme codeerbundel, die vijf videocursussen en 27 uur premiuminstructie omvat, is nu GRATIS. Lees verder om je op weg te helpen. Je kunt het op elke webpagina uitproberen, zelfs deze! Open uw console en probeer wat JavaScript-code.

Nu weet je wat JavaScript doet

Hopelijk heeft deze introductie wat inzichten in JavaScript opgeleverd en word je enthousiast over webprogrammering. Je kunt het allemaal samenvatten ons handige JavaScript-spiekbriefje Het ultieme JavaScript-spiekbriefjeKrijg snel een opfriscursus over JavaScript-elementen met dit spiekbriefje. Lees verder . Er is nog veel meer te leren over JavaScript. Als je je meer op je gemak voelt, probeer het dan leer hoe het Document Object Model te gebruiken? Misschien ben jij dat ook geïnteresseerd in het leren over TypeScript Wat is TypeScript en waarom zouden ontwikkelaars het moeten proberen?Vind je het moeilijk om JavaScript aan te passen na het leren van een andere programmeertaal? Hier is hoe TypeScript u kan helpen schakelen. Lees verder .