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 Beste Praktyke


Vermy globale veranderlikes, vermy new, vermy ==, vermyeval()


Vermy globale veranderlikes

Minimaliseer die gebruik van globale veranderlikes.

Dit sluit alle datatipes, voorwerpe en funksies in.

Globale veranderlikes en funksies kan deur ander skrifte oorgeskryf word.

Gebruik eerder plaaslike veranderlikes en leer hoe om sluitings te gebruik .


Verklaar altyd plaaslike veranderlikes

Alle veranderlikes wat in 'n funksie gebruik word, moet as plaaslike veranderlikes verklaar word.

Plaaslike veranderlikes moet verklaar word met die var sleutelwoord of die letsleutelwoord, of die constsleutelwoord, anders sal hulle globale veranderlikes word.

Streng modus laat nie onverklaarde veranderlikes toe nie.


Verklarings bo-op

Dit is 'n goeie koderingspraktyk om alle verklarings boaan elke skrif of funksie te plaas.

Hierdie sal:

  • Gee skoner kode
  • Verskaf 'n enkele plek om na plaaslike veranderlikes te soek
  • Maak dit makliker om ongewenste (geïmpliseerde) globale veranderlikes te vermy
  • Verminder die moontlikheid van ongewenste herverklarings
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price - discount;

Dit geld ook vir lus veranderlikes:

for (let i = 0; i < 5; i++) {


Inisialiseer veranderlikes

Dit is 'n goeie koderingspraktyk om veranderlikes te inisialiseer wanneer jy dit verklaar.

Hierdie sal:

  • Gee skoner kode
  • Verskaf 'n enkele plek om veranderlikes te inisialiseer
  • Vermy ongedefinieerde waardes
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};

Inisiasie van veranderlikes verskaf 'n idee van die beoogde gebruik (en beoogde datatipe).


Verklaar voorwerpe met konst

Deur voorwerpe met const te verklaar sal enige toevallige verandering van tipe voorkom:

Voorbeeld

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

Verklaar Skikkings met konst

Deur skikkings met const te verklaar sal enige toevallige verandering van tipe voorkom:

Voorbeeld

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

Moenie nuwe voorwerp () gebruik nie

  • Gebruik ""in plaas vannew String()
  • Gebruik 0in plaas vannew Number()
  • Gebruik falsein plaas vannew Boolean()
  • Gebruik {}in plaas vannew Object()
  • Gebruik []in plaas vannew Array()
  • Gebruik /()/in plaas vannew RegExp()
  • Gebruik function (){}in plaas vannew Function()

Voorbeeld

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

Pasop vir outomatiese tipe omskakelings

JavaScript is los getik.

'n Veranderlike kan alle datatipes bevat.

'n Veranderlike kan sy datatipe verander:

Voorbeeld

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

Pasop dat getalle per ongeluk omgeskakel kan word na stringe of NaN(Nie 'n nommer nie).

Wanneer wiskundige bewerkings gedoen word, kan JavaScript getalle na stringe omskakel:

Voorbeeld

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

Om 'n string van 'n string af te trek, genereer nie 'n fout nie, maar gee terug NaN(Nie 'n Getal):

Voorbeeld

"Hello" - "Dolly"    // returns NaN

Gebruik === Vergelyking

Die ==vergelykingsoperateur skakel altyd om (na ooreenstemmende tipes) voor vergelyking.

Die ===operateur dwing vergelyking van waardes en tipe af:

Voorbeeld

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

Gebruik parameter verstek

As 'n funksie geroep word met 'n ontbrekende argument, word die waarde van die ontbrekende argument op gestel undefined.

Ongedefinieerde waardes kan jou kode breek. Dit is 'n goeie gewoonte om verstekwaardes aan argumente toe te ken.

Voorbeeld

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}

ECMAScript 2015 laat verstekparameters toe in die funksiedefinisie:

function (a=1, b=1) { /*function code*/ }

Lees meer oor funksieparameters en argumente by Funksieparameters


Beëindig jou skakelaars met verstek

Eindig altyd jou switchstellings met 'n default. Al dink jy dit is nie nodig nie.

Voorbeeld

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

Vermy Getal, String en Boole as voorwerpe

Behandel altyd getalle, stringe of booleans as primitiewe waardes. Nie as voorwerpe nie.

Deur hierdie tipes as voorwerpe te verklaar, vertraag die uitvoeringspoed en veroorsaak dit nare newe-effekte:

Voorbeeld

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

Of nog erger:

Voorbeeld

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

Vermy die gebruik van eval()

Die eval()funksie word gebruik om teks as kode uit te voer. In byna alle gevalle behoort dit nie nodig te wees om dit te gebruik nie.

Omdat dit toelaat dat arbitrêre kode uitgevoer word, verteenwoordig dit ook 'n sekuriteitsprobleem.