Esercitazione JS

JS CASA JS Introduzione JS Dove si va Uscita JS Dichiarazioni JS Sintassi JS Commenti JS Variabili JS JS Let JS Cost Operatori JS JS aritmetica Assegnazione JS Tipi di dati JS Funzioni JS Oggetti JS Eventi JS Corde JS Metodi di stringa JS Ricerca di stringhe JS Modelli di stringhe JS Numeri JS Metodi numerici JS Matrici JS Metodi array JS Ordinamento matrice JS Iterazione dell'array JS Cost. array JS Date JS Formati data JS Metodi di acquisizione della data JS Metodi di impostazione della data JS JS matematica JS Casuale JS booleani Confronti JS Condizioni JS JS Switch Ciclo JS per JS Loop per In Ciclo JS per di JS Loop mentre JS Break Iterabili JS Insiemi JS Mappe JS Tipo JS Conversione del tipo JS JS bit a bit JS RegExp Errori JS Ambito JS JS sollevamento Modalità rigorosa JS JS questa parola chiave Funzione freccia JS Classi JS JS JSON Debug JS Guida allo stile JS Migliori Pratiche JS Errori di JS Prestazioni JS Parole riservate JS

Versioni JS

Versioni JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Storia di JS

Oggetti JS

Definizioni di oggetti Proprietà dell'oggetto Metodi dell'oggetto Visualizzazione di oggetti Accessori per oggetti Costruttori di oggetti Prototipi di oggetti Iterabili di oggetti Insiemi di oggetti Mappe degli oggetti Riferimento all'oggetto

Funzioni JS

Definizioni delle funzioni Parametri di funzione Invocazione di funzione Chiamata di funzione Funzione Applica Chiusure di funzioni

Classi JS

Introduzione alla classe Eredità di classe Classe statica

JS Async

Richiamate JS JS asincrono JS Promesse JS Async/Attendere

JS HTML DOM

DOM Introduzione Metodi DOM Documento DOM Elementi DOM DOM HTML Moduli DOM DOM CSS Animazioni DOM Eventi DOM Ascoltatore di eventi DOM Navigazione DOM Nodi DOM Collezioni DOM Elenchi di nodi DOM

Distinta base del browser JS

Finestra JS Schermo JS Posizione JS Storia di JS Navigatore JS Avviso popup JS JS tempismo Biscotti JS

API Web JS

Introduzione all'API Web API dei moduli Web API Cronologia web API di archiviazione Web API Web Worker API di recupero Web API di geolocalizzazione web

JS AJAX

Introduzione all'Ajax AJAX XMLHttp Richiesta AJAX Risposta dell'AJAX File XML AJAX AJAX PHP AJAX ASP Database AJAX Applicazioni AJAX Esempi AJAX

JS JSON

Introduzione JSON Sintassi JSON JSON contro XML Tipi di dati JSON Analisi JSON JSON Stringify Oggetti JSON Matrici JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Selettori jQuery jQuery HTML jQuery CSS jQuery DOM

Grafica JS

Grafica JS Tela JS JS Plotly JS Chart.js Grafico di Google JS JS D3.js

Esempi JS

Esempi JS JS HTML DOM Input HTML JS Oggetti HTML JS Eventi HTML JS Browser JS Editore JS Esercizi JS Quiz J.S Certificato JS

Riferimenti JS

Oggetti JavaScript Oggetti HTML DOM


Best practice JavaScript


Evita le variabili globali, evita new, evita ==, evitaeval()


Evita le variabili globali

Ridurre al minimo l'uso di variabili globali.

Ciò include tutti i tipi di dati, oggetti e funzioni.

Le variabili e le funzioni globali possono essere sovrascritte da altri script.

Usa invece le variabili locali e impara come usare le chiusure .


Dichiara sempre variabili locali

Tutte le variabili utilizzate in una funzione devono essere dichiarate come variabili locali .

Le variabili locali devono essere dichiarate con la var parola chiave o la letparola chiave, o la constparola chiave, altrimenti diventeranno variabili globali.

La modalità rigorosa non consente variabili non dichiarate.


Dichiarazioni in cima

È una buona pratica di codifica mettere tutte le dichiarazioni all'inizio di ogni script o funzione.

Questo sarà:

  • Dai un codice più pulito
  • Fornire un unico posto per cercare le variabili locali
  • Semplifica l'eliminazione di variabili globali (implicite) indesiderate
  • Ridurre la possibilità di nuove dichiarazioni indesiderate
// 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;

Questo vale anche per le variabili di ciclo:

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


Inizializza variabili

È una buona pratica di codifica inizializzare le variabili quando le dichiarate.

Questo sarà:

  • Dai un codice più pulito
  • Fornire un unico posto per inizializzare le variabili
  • Evita valori indefiniti
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};

L'inizializzazione delle variabili fornisce un'idea dell'uso previsto (e del tipo di dati previsto).


Dichiara oggetti con cost

La dichiarazione di oggetti con const impedirà qualsiasi modifica accidentale del tipo:

Esempio

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

Dichiara gli array con const

La dichiarazione di array con const impedirà qualsiasi modifica accidentale del tipo:

Esempio

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

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

Non utilizzare il nuovo Object()

  • Utilizzare ""invece dinew String()
  • Utilizzare 0invece dinew Number()
  • Utilizzare falseinvece dinew Boolean()
  • Utilizzare {}invece dinew Object()
  • Utilizzare []invece dinew Array()
  • Utilizzare /()/invece dinew RegExp()
  • Utilizzare function (){}invece dinew Function()

Esempio

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

Attenzione alle conversioni di tipo automatiche

JavaScript è digitato liberamente.

Una variabile può contenere tutti i tipi di dati.

Una variabile può cambiare il suo tipo di dati:

Esempio

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

Fai attenzione che i numeri possono essere accidentalmente convertiti in stringhe o NaN(non un numero).

Quando si eseguono operazioni matematiche, JavaScript può convertire i numeri in stringhe:

Esempio

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

Sottrarre una stringa da una stringa, non genera un errore ma restituisce NaN(non un numero):

Esempio

"Hello" - "Dolly"    // returns NaN

Usa === Confronto

L' ==operatore di confronto converte sempre (in tipi corrispondenti) prima del confronto.

L' ===operatore forza il confronto di valori e tipo:

Esempio

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

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

Usa parametri predefiniti

Se una funzione viene chiamata con un argomento mancante, il valore dell'argomento mancante viene impostato su undefined.

Valori non definiti possono violare il tuo codice. È buona abitudine assegnare valori predefiniti agli argomenti.

Esempio

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

ECMAScript 2015 consente parametri predefiniti nella definizione della funzione:

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

Maggiori informazioni sui parametri e gli argomenti delle funzioni in Function Parameters


Termina i tuoi interruttori con le impostazioni predefinite

Termina sempre le tue switchaffermazioni con un default. Anche se pensi che non ce ne sia bisogno.

Esempio

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

Evita numero, stringa e booleano come oggetti

Tratta sempre numeri, stringhe o valori booleani come valori primitivi. Non come oggetti.

Dichiarare questi tipi come oggetti, rallenta la velocità di esecuzione e produce spiacevoli effetti collaterali:

Esempio

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

O peggio ancora:

Esempio

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

Evita di usare eval()

La eval()funzione viene utilizzata per eseguire il testo come codice. In quasi tutti i casi, non dovrebbe essere necessario utilizzarlo.

Poiché consente l'esecuzione di codice arbitrario, rappresenta anche un problema di sicurezza.