JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


Aanbevolen procedures voor JavaScript


Vermijd globale variabelen, vermijd new, vermijd ==, vermijdeval()


Vermijd globale variabelen

Minimaliseer het gebruik van globale variabelen.

Dit omvat alle gegevenstypen, objecten en functies.

Globale variabelen en functies kunnen worden overschreven door andere scripts.

Gebruik in plaats daarvan lokale variabelen en leer hoe u sluitingen gebruikt .


Altijd lokale variabelen declareren

Alle variabelen die in een functie worden gebruikt, moeten als lokale variabelen worden gedeclareerd.

Lokale variabelen moeten worden gedeclareerd met het var trefwoord of het lettrefwoord, of het consttrefwoord, anders worden het globale variabelen.

In de strikte modus zijn niet-gedeclareerde variabelen niet toegestaan.


Verklaringen bovenaan

Het is een goede coderingspraktijk om alle declaraties bovenaan elk script of elke functie te plaatsen.

Dit zal:

  • Geef schonere code
  • Zorg voor één plek om naar lokale variabelen te zoeken
  • Maak het gemakkelijker om ongewenste (impliciete) globale variabelen te vermijden
  • Verminder de kans op ongewenste heraangiften
// 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 geldt ook voor lusvariabelen:

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


Variabelen initialiseren

Het is een goede coderingspraktijk om variabelen te initialiseren wanneer u ze declareert.

Dit zal:

  • Geef schonere code
  • Zorg voor een enkele plaats om variabelen te initialiseren
  • Vermijd ongedefinieerde waarden
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};

Het initialiseren van variabelen geeft een idee van het beoogde gebruik (en het beoogde gegevenstype).


Declareer objecten met const

Door objecten met const te declareren, wordt elke onbedoelde wijziging van het type voorkomen:

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

Arrays declareren met const

Door arrays met const te declareren, wordt elke onbedoelde wijziging van het type voorkomen:

Voorbeeld

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

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

Gebruik geen nieuw object()

  • Gebruik ""in plaats vannew String()
  • Gebruik 0in plaats vannew Number()
  • Gebruik falsein plaats vannew Boolean()
  • Gebruik {}in plaats vannew Object()
  • Gebruik []in plaats vannew Array()
  • Gebruik /()/in plaats vannew RegExp()
  • Gebruik function (){}in plaats 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

Pas op voor automatische typeconversies

JavaScript is losjes getypt.

Een variabele kan alle gegevenstypen bevatten.

Een variabele kan zijn gegevenstype wijzigen:

Voorbeeld

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

Pas op dat getallen per ongeluk kunnen worden geconverteerd naar tekenreeksen of NaN(Geen getal).

Bij het uitvoeren van wiskundige bewerkingen kan JavaScript getallen naar tekenreeksen converteren:

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

Het aftrekken van een string van een string, genereert geen fout maar retourneert NaN(geen getal):

Voorbeeld

"Hello" - "Dolly"    // returns NaN

Gebruik === Vergelijking

De ==vergelijkingsoperator converteert altijd (naar overeenkomende typen) vóór vergelijking.

De ===operator dwingt vergelijking van waarden en type af:

Voorbeeld

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

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

Standaardinstellingen voor parameters gebruiken

Als een functie wordt aangeroepen met een ontbrekend argument, wordt de waarde van het ontbrekende argument ingesteld op undefined.

Ongedefinieerde waarden kunnen uw code breken. Het is een goede gewoonte om standaardwaarden aan argumenten toe te kennen.

Voorbeeld

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

ECMAScript 2015 staat standaardparameters toe in de functiedefinitie:

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

Lees meer over functieparameters en argumenten bij Functieparameters


Beëindig uw schakelaars met standaardinstellingen

Sluit je switchuitspraken altijd af met een default. Ook als je denkt dat het niet nodig is.

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";
}

Vermijd getallen, tekenreeksen en booleaans als objecten

Behandel getallen, strings of booleans altijd als primitieve waarden. Niet als objecten.

Het declareren van deze typen als objecten vertraagt ​​de uitvoeringssnelheid en veroorzaakt vervelende bijwerkingen:

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.

Vermijd het gebruik van eval()

De eval()functie wordt gebruikt om tekst als code uit te voeren. In bijna alle gevallen zou het niet nodig moeten zijn om het te gebruiken.

Omdat hiermee willekeurige code kan worden uitgevoerd, vormt het ook een beveiligingsprobleem.