JS Tutoriaal

JS TUIS JS Inleiding JS Waarheen JS Uitset JS Verklarings JS sintaksis JS Kommentaar JS veranderlikes JS Laat JS Konst JS-operateurs JS Rekenkunde JS Opdrag JS datatipes JS Funksies JS Voorwerpe JS Events JS Strings JS String Metodes JS String Soek JS String Templates JS nommers JS-nommermetodes JS Skikkings JS Skikking Metodes JS Array Sorteer JS Skikking Iterasie JS Array Konst JS Datums JS Datum Formate JS Datum Kry Metodes JS Datum Stel Metodes JS Wiskunde JS Random JS Booleans JS Vergelykings JS Voorwaardes JS Skakelaar JS Loop Vir JS Loop For In JS Loop Vir Van JS Loop Terwyl JS Break JS Iterables JS-stelle JS Kaarte JS tipe JS Tipe Omskakeling JS Bitwise JS RegExp JS foute JS Bestek JS Hysing JS Streng modus JS hierdie sleutelwoord JS Arrow Funksie JS Klasse JS JSON JS Ontfouting JS Stylgids JS Beste Praktyke JS foute JS prestasie JS Voorbehou Woorde

JS weergawes

JS weergawes JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS Geskiedenis

JS Voorwerpe

Voorwerpdefinisies Voorwerp Eienskappe Voorwerp Metodes Voorwerp vertoon Voorwerptoebehore Voorwerpkonstrukteurs Voorwerpprototipes Object Iterables Voorwerpstelle Voorwerpkaarte Voorwerpverwysing

JS Funksies

Funksie definisies Funksie parameters Funksie Aanroep Funksie oproep Funksie Pas toe Funksie sluitings

JS Klasse

Klasintro Klas Erfenis Klas Staties

JS Async

JS Terugbelle JS Asynchroon JS Beloftes JS Async/Wag

JS HTML DOM

DOM Inleiding DOM Metodes DOM-dokument DOM Elemente DOM HTML DOM-vorms DOM CSS DOM-animasies DOM-geleenthede DOM Gebeurtenis Luisteraar DOM-navigasie DOM nodusse DOM Versamelings DOM Node lyste

JS Browser BOM

JS venster JS skerm JS ligging JS Geskiedenis JS Navigator JS Popup Alert JS Tydsberekening JS koekies

JS Web API's

Web API Inleiding Webvorms API Webgeskiedenis API Webberging API Webwerker API Web haal API Web Geolocation API

JS AJAX

AJAX Intro AJAX XMLHttp AJAX-versoek AJAX-reaksie AJAX XML-lêer AJAX PHP AJAX ASP AJAX-databasis AJAX toepassings AJAX voorbeelde

JS JSON

JSON Inleiding JSON-sintaksis JSON vs XML JSON-datatipes JSON Ontleed JSON Stringify JSON-voorwerpe JSON-skikkings JSON-bediener JSON PHP JSON HTML JSON JSONP

JS vs jQuery

jQuery keurders jQuery HTML jQuery CSS jQuery DOM

JS grafika

JS grafika JS Canvas JS Plot JS Chart.js JS Google Chart JS D3.js

JS Voorbeelde

JS Voorbeelde JS HTML DOM JS HTML-invoer JS HTML-voorwerpe JS HTML-geleenthede JS Blaaier JS Redakteur JS Oefeninge JS Vasvra JS Sertifikaat

JS Verwysings

JavaScript-voorwerpe HTML DOM-voorwerpe


JavaScript veranderlikes

4 maniere om 'n JavaScript-veranderlike te verklaar:

  • Met behulp van var
  • Met behulp van let
  • Met behulp van const
  • Gebruik niks

Wat is veranderlikes?

Veranderlikes is houers vir die stoor van data (berging van datawaardes).

In hierdie voorbeeld is x, y, en z, veranderlikes, verklaar met die varsleutelwoord:

Voorbeeld

var x = 5;
var y = 6;
var z = x + y;

In hierdie voorbeeld is x, y, en z, veranderlikes, verklaar met die letsleutelwoord:

Voorbeeld

let x = 5;
let y = 6;
let z = x + y;

In hierdie voorbeeld is x, y, en z, onverklaarde veranderlikes:

Voorbeeld

x = 5;
y = 6;
z = x + y;

Uit al die voorbeelde hierbo kan jy raai:

  • x stoor die waarde 5
  • y stoor die waarde 6
  • z stoor die waarde 11

Wanneer om JavaScript var te gebruik?

Verklaar altyd JavaScript-veranderlikes met var, let, of const.

Die varsleutelwoord word in alle JavaScript-kodes van 1995 tot 2015 gebruik.

Die sleutelwoorde leten constis in 2015 by JavaScript gevoeg.

As jy wil hê dat jou kode in ouer blaaier moet loop, moet jy var.


Wanneer om JavaScript-konst te gebruik?

As jy 'n algemene reël wil hê: verklaar veranderlikes altyd met const.

As jy dink die waarde van die veranderlike kan verander, gebruik let.

In hierdie voorbeeld is price1, price2, en total, veranderlikes:

Voorbeeld

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

Die twee veranderlikes price1en price2 word verklaar met die constsleutelwoord.

Dit is konstante waardes en kan nie verander word nie.

Die veranderlike totalword verklaar met die letsleutelwoord.

Dit is 'n waarde wat verander kan word.


Net soos Algebra

Net soos in algebra, hou veranderlikes waardes:

let x = 5;
let y = 6;

Net soos in algebra, word veranderlikes in uitdrukkings gebruik:

let z = x + y;

Uit die voorbeeld hierbo kan jy raai dat die totaal op 11 bereken word.

Let wel

Veranderlikes is houers vir die stoor van waardes.



JavaScript-identifiseerders

Alle JavaScript- veranderlikes moet met unieke name geïdentifiseer word .

Hierdie unieke name word identifiseerders genoem .

Identifiseerders kan kort name (soos x en y) of meer beskrywende name (ouderdom, som, totaalVolume) wees.

Die algemene reëls vir die bou van name vir veranderlikes (unieke identifiseerders) is:

  • Name kan letters, syfers, onderstrepings en dollartekens bevat.
  • Name moet met 'n letter begin
  • Name kan ook begin met $ en _ (maar ons sal dit nie in hierdie tutoriaal gebruik nie)
  • Name is hooflettersensitief (y en Y is verskillende veranderlikes)
  • Gereserveerde woorde (soos JavaScript sleutelwoorde) kan nie as name gebruik word nie

Let wel

JavaScript-identifiseerders is hooflettergevoelig.


Die Opdragoperateur

In JavaScript is die gelykteken ( =) 'n "toewysing"-operateur, nie 'n "gelyk aan"-operateur nie.

Dit is anders as algebra. Die volgende maak nie sin in algebra nie:

x = x + 5

In JavaScript maak dit egter volkome sin: dit ken die waarde van x + 5 aan x toe.

(Dit bereken die waarde van x + 5 en plaas die resultaat in x. Die waarde van x word met 5 verhoog.)

Let wel

Die "gelyk aan" operateur word geskryf soos ==in JavaScript.


JavaScript-datatipes

JavaScript-veranderlikes kan getalle soos 100 en tekswaardes soos "John Doe" bevat.

In programmering word tekswaardes teksstringe genoem.

JavaScript kan baie soorte data hanteer, maar dink vir eers net aan getalle en stringe.

Strings word binne dubbele of enkel aanhalingstekens geskryf. Getalle word sonder aanhalingstekens geskryf.

As jy 'n nommer tussen aanhalingstekens plaas, sal dit as 'n teksstring behandel word.

Voorbeeld

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

Verklaar 'n JavaScript-veranderlike

Die skep van 'n veranderlike in JavaScript word genoem om 'n veranderlike te "verklaar".

Jy verklaar 'n JavaScript-veranderlike met die varof die letsleutelwoord:

var carName;
of:
let carName;

Na die verklaring het die veranderlike geen waarde nie (tegnies is dit undefined).

Om 'n waarde aan die veranderlike toe te ken , gebruik die gelyke teken:

carName = "Volvo";

Jy kan ook 'n waarde aan die veranderlike toeken wanneer jy dit verklaar:

let carName = "Volvo";

In die voorbeeld hieronder skep ons 'n veranderlike genaamd carNameen ken die waarde "Volvo" daaraan toe.

Dan "uitvoer" ons die waarde binne 'n HTML-paragraaf met id="demo":

Voorbeeld

<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

Let wel

Dit is 'n goeie programmeringspraktyk om alle veranderlikes aan die begin van 'n skrif te verklaar.


Een stelling, baie veranderlikes

Jy kan baie veranderlikes in een stelling verklaar.

Begin die stelling met varen skei die veranderlikes deur komma :

Voorbeeld

let person = "John Doe", carName = "Volvo", price = 200;

'n Verklaring kan oor verskeie reëls strek:

Voorbeeld

let person = "John Doe",
carName = "Volvo",
price = 200;

Waarde = ongedefinieerd

In rekenaarprogramme word veranderlikes dikwels sonder 'n waarde verklaar. Die waarde kan iets wees wat bereken moet word, of iets wat later verskaf sal word, soos gebruikersinvoer.

'n Veranderlike wat sonder 'n waarde verklaar word, sal die waarde hê undefined.

Die veranderlike carName sal die waarde hê undefinedna die uitvoering van hierdie stelling:

Voorbeeld

let carName;

Herverklaar JavaScript-veranderlikes

As jy 'n JavaScript-veranderlike wat met verklaar is weer verklaar var, sal dit nie sy waarde verloor nie.

Die veranderlike carNamesal steeds die waarde "Volvo" hê na die uitvoering van hierdie stellings:

Voorbeeld

var carName = "Volvo";
var carName;

Let wel

Jy kan nie 'n veranderlike wat met letof verklaar is, weer verklaar nie const.

Dit sal nie werk nie:

let carName = "Volvo";
let carName;

JavaScript Rekenkunde

Soos met algebra, kan jy rekenkunde doen met JavaScript-veranderlikes, deur operateurs soos =en te gebruik +:

Voorbeeld

let x = 5 + 2 + 3;

Jy kan ook stringe byvoeg, maar stringe sal aaneengeskakel word:

Voorbeeld

let x = "John" + " " + "Doe";

Probeer ook hierdie:

Voorbeeld

let x = "5" + 2 + 3;

Let wel

As jy 'n nommer tussen aanhalingstekens plaas, sal die res van die nommers as stringe behandel word, en aaneengeskakel word.

Probeer nou hierdie:

Voorbeeld

let x = 2 + 3 + "5";

JavaScript dollarteken $

Aangesien JavaScript 'n dollarteken as 'n letter hanteer, is identifiseerders wat $ bevat geldige veranderlike name:

Voorbeeld

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

Die gebruik van die dollarteken is nie baie algemeen in JavaScript nie, maar professionele programmeerders gebruik dit dikwels as 'n alias vir die hooffunksie in 'n JavaScript-biblioteek.

In die JavaScript-biblioteek jQuery, byvoorbeeld, word die hooffunksie $gebruik om HTML-elemente te kies. In jQuery $("p");beteken "kies alle p-elemente".


JavaScript-onderstreep (_)

Aangesien JavaScript onderstreep as 'n letter hanteer, is identifiseerders wat _ bevat geldige veranderlike name:

Voorbeeld

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

Die gebruik van die onderstreep is nie baie algemeen in JavaScript nie, maar 'n konvensie onder professionele programmeerders is om dit as 'n alias vir "private (versteek)" veranderlikes te gebruik.


Toets jouself met oefeninge

Oefening:

Skep 'n veranderlike genoem carNameen ken die waarde Volvodaaraan toe.

var  = "";