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


Oggetti JavaScript


In JavaScript, gli oggetti sono re. Se capisci gli oggetti, capisci JavaScript.


In JavaScript, quasi "tutto" è un oggetto.

  • I booleani possono essere oggetti (se definiti con la newparola chiave)
  • I numeri possono essere oggetti (se definiti con la newparola chiave)
  • Le stringhe possono essere oggetti (se definiti con la newparola chiave)
  • Le date sono sempre oggetti
  • La matematica è sempre oggetti
  • Le espressioni regolari sono sempre oggetti
  • Gli array sono sempre oggetti
  • Le funzioni sono sempre oggetti
  • Gli oggetti sono sempre oggetti

Tutti i valori JavaScript, eccetto le primitive, sono oggetti.


Primitive JavaScript

Un valore primitivo è un valore che non ha proprietà o metodi.

Un tipo di dati primitivo è un dato che ha un valore primitivo.

JavaScript definisce 5 tipi di tipi di dati primitivi:

  • string
  • number
  • boolean
  • null
  • undefined

I valori primitivi sono immutabili (sono hardcoded e quindi non possono essere modificati).

se x = 3,14, puoi modificare il valore di x. Ma non puoi cambiare il valore di 3.14.

ValoreTipoCommento
"Ciao"corda"Ciao" è sempre "Ciao"
3.14numero3.14 è sempre 3.14
verobooleanovero è sempre vero
falsobooleanofalso è sempre falso
nullonullo (oggetto)null è sempre nullo
non definitonon definitoindefinito è sempre indefinito

Gli oggetti sono variabili

Le variabili JavaScript possono contenere valori singoli:

Esempio

let person = "John Doe";

Anche le variabili JavaScript possono contenere molti valori.

Anche gli oggetti sono variabili. Ma gli oggetti possono contenere molti valori.

I valori degli oggetti sono scritti come nome: coppie di valori (nome e valore separati da due punti).

Esempio

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Un oggetto JavaScript è una raccolta di valori denominati

È pratica comune dichiarare oggetti con la constparola chiave.

Esempio

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};


Proprietà dell'oggetto

I valori denominati, negli oggetti JavaScript, sono chiamati proprietà .

Proprietà Valore
nome di battesimo John
cognome Dai
età 50
colore degli occhi blu

Gli oggetti scritti come coppie valore nome sono simili a:

  • Array associativi in ​​PHP
  • Dizionari in Python
  • Tabelle hash in C
  • Mappe hash in Java
  • Hash in Ruby e Perl

Metodi dell'oggetto

I metodi sono azioni che possono essere eseguite sugli oggetti.

Le proprietà degli oggetti possono essere sia valori primitivi che altri oggetti e funzioni.

Un metodo oggetto è una proprietà oggetto contenente una definizione di funzione .

Proprietà Valore
nome di battesimo John
cognome Dai
età 50
colore degli occhi blu
nome e cognome function() {restituire this.firstName + " " + this.lastName;}

Gli oggetti JavaScript sono contenitori di valori denominati, chiamati proprietà e metodi.

Imparerai di più sui metodi nei prossimi capitoli.


Creazione di un oggetto JavaScript

Con JavaScript, puoi definire e creare i tuoi oggetti.

Esistono diversi modi per creare nuovi oggetti:

  • Crea un singolo oggetto, usando un oggetto letterale.
  • Crea un unico oggetto, con la parola chiave new.
  • Definire un costruttore di oggetti, quindi creare oggetti del tipo costruito.
  • Crea un oggetto usando Object.create().

Usare un oggetto letterale

Questo è il modo più semplice per creare un oggetto JavaScript.

Usando un oggetto letterale, definisci e crei un oggetto in un'unica istruzione.

Un valore letterale oggetto è un elenco di coppie nome:valore (come età:50) racchiuse tra parentesi graffe {}.

L'esempio seguente crea un nuovo oggetto JavaScript con quattro proprietà:

Esempio

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Gli spazi e le interruzioni di riga non sono importanti. Una definizione di oggetto può estendersi su più righe:

Esempio

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Questo esempio crea un oggetto JavaScript vuoto e quindi aggiunge 4 proprietà:

Esempio

const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Utilizzando la parola chiave JavaScript 'new

L'esempio seguente crea un nuovo oggetto JavaScript utilizzando new Object()e quindi aggiunge 4 proprietà:

Esempio

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Gli esempi sopra fanno esattamente lo stesso.

Ma non c'è bisogno di usare new Object().

Per leggibilità, semplicità e velocità di esecuzione, utilizzare il metodo letterale oggetto.


Gli oggetti JavaScript sono modificabili

Gli oggetti sono mutevoli: sono indirizzati per riferimento, non per valore.

Se person è un oggetto, la seguente istruzione non creerà una copia di person:

const x = person;  // Will not create a copy of person.

L'oggetto x non è una copia di person. È persona . Sia x che person sono lo stesso oggetto.

Qualsiasi modifica a x cambierà anche persona, perché x e persona sono lo stesso oggetto.

Esempio

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}

const x = person;
x.age = 10;      // Will change both x.age and person.age