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 algemene foute


Hierdie hoofstuk wys 'n paar algemene JavaScript-foute uit.


Gebruik per ongeluk die opdragoperateur

JavaScript-programme kan onverwagte resultate genereer as 'n programmeerder per ongeluk 'n opdragoperateur ( =), in plaas van 'n vergelykingsoperateur ( ==) in 'n if-stelling gebruik.

Hierdie ifstelling gee terug false(soos verwag) omdat x nie gelyk is aan 10 nie:

let x = 0;
if (x == 10)

Hierdie ifstelling keer terug true(dalk nie soos verwag nie), want 10 is waar:

let x = 0;
if (x = 10)

Hierdie ifstelling gee terug false(dalk nie soos verwag nie), want 0 is onwaar:

let x = 0;
if (x = 0)

'n Werkopdrag gee altyd die waarde van die werkopdrag terug.


Verwag Los Vergelyking

In gereelde vergelyking maak datatipe nie saak nie. Hierdie ifstelling gee waar:

let x = 10;
let y = "10";
if (x == y)

In streng vergelyking maak datatipe wel saak. Hierdie ifstelling gee onwaar:

let x = 10;
let y = "10";
if (x === y)

Dit is 'n algemene fout om te vergeet dat switchstellings streng vergelyking gebruik:

Dit case switchsal 'n waarskuwing vertoon:

let x = 10;
switch(x) {
  case 10: alert("Hello");
}

Dit case switchsal nie 'n waarskuwing wys nie:

let x = 10;
switch(x) {
  case "10": alert("Hello");
}


Verwarrende optelling en samevoeging

Optelling gaan oor die optel van getalle .

Aaneenskakeling gaan oor die byvoeging van stringe .

In JavaScript gebruik beide bewerkings dieselfde +operateur.

As gevolg hiervan sal die byvoeging van 'n getal as 'n getal 'n ander resultaat lewer as om 'n getal as 'n string by te voeg:

let x = 10;
x = 10 + 5;       // Now x is 15

let y = 10;
y += "5";        // Now y is "105"

Wanneer twee veranderlikes bygevoeg word, kan dit moeilik wees om die resultaat te verwag:

let x = 10;
let y = 5;
let z = x + y;     // Now z is 15

let x = 10;
let y = "5";
let z = x + y;     // Now z is "105"

Misverstand Floats

Alle getalle in JavaScript word gestoor as 64-bis swewende punt nommers (floats).

Alle programmeertale, insluitend JavaScript, het probleme met presiese swaaipuntwaardes:

let x = 0.1;
let y = 0.2;
let z = x + y            // the result in z will not be 0.3

Om die probleem hierbo op te los, help dit om te vermenigvuldig en te deel:

Voorbeeld

let z = (x * 10 + y * 10) / 10;       // z will be 0.3

Breek 'n JavaScript-string

JavaScript sal jou toelaat om 'n stelling in twee reëls te verdeel:

Voorbeeld 1

let x =
"Hello World!";

Maar om 'n stelling in die middel van 'n string te breek, sal nie werk nie:

Voorbeeld 2

let x = "Hello
World!";

Jy moet 'n "backslash" gebruik as jy 'n stelling in 'n string moet breek:

Voorbeeld 3

let x = "Hello \
World!";

Misplasing van die kommapunt

As gevolg van 'n misplaaste kommapunt, sal hierdie kodeblok uitgevoer word ongeag die waarde van x:

if (x == 19);
{
  // code block 
}

Breek 'n Opgawestaat

Dit is 'n verstek JavaScript-gedrag om 'n stelling outomaties aan die einde van 'n reël toe te maak.

As gevolg hiervan sal hierdie twee voorbeelde dieselfde resultaat lewer:

Voorbeeld 1

function myFunction(a) {
  let power = 10 
  return a * power
}

Voorbeeld 2

function myFunction(a) {
  let power = 10;
  return a * power;
}

JavaScript sal jou ook toelaat om 'n stelling in twee reëls te verdeel.

As gevolg hiervan sal voorbeeld 3 ook dieselfde resultaat gee:

Voorbeeld 3

function myFunction(a) {
  let
  power = 10; 
  return a * power;
}

Maar, wat sal gebeur as jy die terugkeerstaat in twee reëls soos hierdie breek:

Voorbeeld 4

function myFunction(a) {
  let
  power = 10; 
  return
  a * power;
}

Die funksie sal terugkeer undefined!

Hoekom? Omdat JavaScript gedink het jy bedoel:

Voorbeeld 5

function myFunction(a) {
  let
  power = 10; 
  return;
  a * power;
}

Verduideliking

As 'n stelling onvolledig is soos:

let

JavaScript sal probeer om die stelling te voltooi deur die volgende reël te lees:

power = 10;

Maar aangesien hierdie stelling volledig is:

return

JavaScript sal dit outomaties toemaak soos volg:

return;

Dit gebeur omdat afsluiting (eind) stellings met kommapunte opsioneel is in JavaScript.

JavaScript sal die terugkeerstelling aan die einde van die reël toemaak, want dit is 'n volledige verklaring.

Moet nooit 'n opgawestaat breek nie.


Toegang tot skikkings met benoemde indekse

Baie programmeertale ondersteun skikkings met benoemde indekse.

Skikkings met benoemde indekse word assosiatiewe skikkings (of hashes) genoem.

JavaScript ondersteun nie skikkings met benoemde indekse nie.

In JavaScript gebruik skikkings genommerde indekse :  

Voorbeeld

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;       // person.length will return 3
person[0];           // person[0] will return "John"

In JavaScript gebruik voorwerpe benoemde indekse .

As jy 'n benoemde indeks gebruik, wanneer toegang tot 'n skikking verkry word, sal JavaScript die skikking herdefinieer na 'n standaardvoorwerp.

Na die outomatiese herdefinisie sal skikkingsmetodes en -eienskappe ongedefinieerde of verkeerde resultate lewer:

Voorbeeld:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;      // person.length will return 0
person[0];          // person[0] will return undefined

Eindig definisies met 'n komma

Volgende kommas in objek- en skikkingsdefinisie is wettig in ECMAScript 5.

Voorwerp Voorbeeld:

person = {firstName:"John", lastName:"Doe", age:46,}

Skikking voorbeeld:

points = [40, 100, 1, 5, 25, 10,];

WAARSKUWING!!

Internet Explorer 8 sal ineenstort.

JSON laat nie agterste kommas toe nie.

JSON:

person = {"firstName":"John", "lastName":"Doe", "age":46}

JSON:

points = [40, 100, 1, 5, 25, 10];

Ongedefinieerd is nie nul nie

JavaScript-objekte, veranderlikes, eienskappe en metodes kan undefined.

Boonop kan leë JavaScript-objekte die waarde hê null.

Dit kan dit 'n bietjie moeilik maak om te toets of 'n voorwerp leeg is.

You can test if an object exists by testing if the type is undefined:

Example:

if (typeof myObj === "undefined") 

But you cannot test if an object is null, because this will throw an error if the object is undefined:

Incorrect:

if (myObj === null) 

To solve this problem, you must test if an object is not null, and not undefined.

But this can still throw an error:

Incorrect:

if (myObj !== null && typeof myObj !== "undefined") 

Because of this, you must test for not undefined before you can test for not null:

Correct:

if (typeof myObj !== "undefined" && myObj !== null)