Foglio cheat JavaScript

JavaScript Cheat Sheet PDFDi seguito puoi trovare il cheat sheet di Javascript in formato .pdf e nel testo.


Foglio cheat JavaScript

  • Link per scaricare

Nozioni di base su JavaScript

Cominciamo con le basi: come includere JavaScript in un sito Web.

Incluso JavaScript in una pagina HTML

Per includere JavaScript all’interno di una pagina, devi inserirlo

Con questo input, il browser può identificare ed eseguire correttamente il codice.

Chiama un file JavaScript esterno

Puoi anche inserire JavaScript nel suo file e denominarlo nel tuo HTML. In questo modo, puoi mantenere diversi tipi di codice separati l'uno dall'altro, creando file meglio organizzati. Se il tuo codice è in un file chiamato MyScript.js, lo chiameresti:

Compresi commenti

I commenti sono importanti perché aiutano le altre persone a capire cosa sta succedendo nel tuo codice o ti ricordano se hai dimenticato qualcosa tu stesso. Tieni presente che devono essere contrassegnati correttamente in modo che il browser non tenti di eseguirli.

In JavaScript hai due diverse opzioni:

  • Commenti a riga singola - Per includere un commento limitato a una sola riga, precederlo con //
  • Commenti su più righe - Nel caso in cui desideri scrivere commenti più lunghi tra più righe, includilo / * e * / per evitare che venga eseguito

Variabili in JavaScript

Le variabili sono valori stand-in che è possibile utilizzare per eseguire operazioni. Dovresti avere familiarità con loro durante le lezioni di matematica.

var, const, permettere

Hai tre diverse possibilità per dichiarare una variabile in JavaScript, ognuna con le proprie specialità:

  • var - La variabile più comune. Può essere riassegnato ma è accessibile solo all'interno di una funzione. Variabili definite con var passa all'inizio quando viene eseguito il codice.
  • const - Non può essere riassegnato e non accessibile prima che compaiano nel codice.
  • permettere - Simile a const, il permettere la variabile può essere riassegnata ma non ri-dichiarata.

Tipi di dati

Le variabili possono contenere diversi tipi di valori e tipi di dati. Usate = per assegnarli:

  • Numeri - età var = 23
  • Variabili - var x
  • Testo (stringhe) - var a = "init"
  • Operazioni - var b = 1 + 2 + 3
  • Dichiarazioni vere o false - var c = true
  • Numeri costanti - const PI = 3.14
  • Oggetti - var name = {firstName: "John", lastName: "Doe"}

Ci sono più possibilità. Si noti che le variabili fanno distinzione tra maiuscole e minuscole. Questo significa cognome e cognome sarà gestito come due diverse variabili.

Oggetti

Gli oggetti sono determinati tipi di variabili. Sono variabili che possono avere valori e metodi propri. Queste ultime sono azioni che è possibile eseguire sugli oggetti.

var person = {
firstName: "John",
cognome: "Doe",
Età: 20,
nazionalità: "tedesca"
};

Il livello successivo: array

Il prossimo nel nostro cheat sheet JavaScript sono gli array. Le matrici fanno parte di molti linguaggi di programmazione diversi. Sono un modo di organizzare variabili e proprietà in gruppi. Ecco come crearne uno in JavaScript:

var fruit = ["Banana", "Apple", "Pear"];

Ora hai un array chiamato frutta che contiene tre elementi che è possibile utilizzare per operazioni future.

Metodi di matrice

Dopo aver creato gli array, ci sono alcune cose che puoi fare con loro:

  • concat () - Unire più array in uno
  • indice di() - Restituisce la prima posizione in cui un dato elemento appare in un array
  • aderire() - Combina gli elementi di un array in una singola stringa e restituisce la stringa
  • lastIndexOf () - Fornisce l'ultima posizione in cui un dato elemento appare in un array
  • pop() - Rimuove l'ultimo elemento di un array
  • Spingere() - Aggiungi un nuovo elemento alla fine
  • inversione() - Ordina gli elementi in ordine decrescente
  • cambio() - Rimuovere il primo elemento di un array
  • fetta() - Estrae una copia di una porzione di un array in un nuovo array
  • ordinare() - Ordina gli elementi in ordine alfabetico
  • splice () - Aggiunge elementi in un modo e una posizione specificati
  • accordare() - Converte gli elementi in stringhe
  • unshift () : Aggiunge un nuovo elemento all'inizio
  • valore di() - Restituisce il valore di base dell'oggetto specificato

operatori

Se hai variabili, puoi usarle per eseguire diversi tipi di operazioni. Per fare ciò, hai bisogno di operatori.

Operatori di base

  • + - Aggiunta
  • - - Sottrazione
  • * - Moltiplicazione
  • / - Divisione
  • (...) - Operatore di raggruppamento, le operazioni tra parentesi vengono eseguite prima di quelle esterne
  • % - Modulo (resto)
  • ++ - Incrementa i numeri
  • -- - Decrementa i numeri

Operatori di confronto

  • == - Uguale a
  • === - Valore uguale e tipo uguale
  • != - Non uguale
  • !== - Valore non uguale o tipo non uguale
  • > - Più grande di
  • < - Meno di
  • > = - Maggiore o uguale a
  • <= - Minore o uguale a
  • ? - Operatore ternario

Operatori logici

  • && - Logico e
  • || - Logico o
  • ! - Logico no

Operatori bit a bit

  • & - Dichiarazione AND
  • | - Dichiarazione OR
  • ~ - NO
  • ^ - XOR
  • << - Tasto maiuscolo di sinistra
  • >> - Spostamento a destra
  • >>> - Zero fill spostamento a destra

funzioni

Le funzioni JavaScript sono blocchi di codice che eseguono una determinata attività. Una funzione di base è simile alla seguente:

nome della funzione (parametro1, parametro2, parametro3) {
// cosa fa la funzione
}

Come puoi vedere, è composto da funzione parola chiave più un nome. I parametri della funzione sono tra parentesi e hai parentesi graffe attorno a ciò che la funzione svolge. Puoi crearne uno tuo, ma per semplificarti la vita - ci sono anche una serie di funzioni predefinite.

Emissione dei dati

Un'applicazione comune per le funzioni è l'output di dati. Per l'output, hai le seguenti opzioni:

  • mettere in guardia() - Output dei dati in una casella di avviso nella finestra del browser
  • Confermare() - Apre una finestra di dialogo sì / no e restituisce vero / falso a seconda del clic dell'utente
  • console.log () - Scrive informazioni sulla console del browser, utile per scopi di debug
  • document.write () - Scrivi direttamente nel documento HTML
  • richiesta() - Crea un dialogo per l'input dell'utente

Funzioni globali

Le funzioni globali sono funzioni integrate in ogni browser in grado di eseguire JavaScript.

  • decodeURI () - Decodifica a Uniform Resource Identifier (URI) creato da encodeURI o simili
  • decodeURIComponent () - Decodifica un componente URI
  • encodeURI () - Codifica un URI in UTF-8
  • encodeURIComponent () - Lo stesso ma per i componenti URI
  • eval () - Valuta il codice JavaScript rappresentato come una stringa
  • isFinite () - Determina se un valore passato è un numero finito
  • isNaN () - Determina se un valore è NaN o meno
  • Numero() —- Restituisce un numero convertito dal suo argomento
  • parseFloat () - Analizza un argomento e restituisce un numero in virgola mobile
  • parseInt () - Analizza il suo argomento e restituisce un numero intero

Cicli JavaScript

I loop fanno parte della maggior parte dei linguaggi di programmazione. Consentono di eseguire blocchi di codice desiderati il ​​numero di volte con valori diversi:

per (ciclo prima; condizione per ciclo; esegui ciclo dopo) {
// cosa fare durante il ciclo
}

Hai diversi parametri per creare loop:

  • per - Il modo più comune per creare un ciclo in JavaScript
  • mentre - Imposta le condizioni in cui viene eseguito un loop
  • fare mentre - Simile al mentre loop ma viene eseguito almeno una volta ed esegue un controllo alla fine per verificare se la condizione è soddisfatta per essere eseguita nuovamente
  • rompere —Usato per arrestare ed uscire dal ciclo a determinate condizioni
  • Continua - Salta parti del ciclo se sono soddisfatte determinate condizioni

Se - Altro dichiarazioni

Questi tipi di dichiarazioni sono facili da capire. Usandoli, puoi impostare le condizioni per l'esecuzione del tuo codice. Se si applicano determinate condizioni, viene fatto qualcosa, in caso contrario - viene eseguito qualcos'altro.

if (condizione) {
// cosa fare se la condizione è soddisfatta
} altro {
// cosa fare se la condizione non è soddisfatta
}

Un concetto simile a se altro è il interruttore dichiarazione. Tuttavia, utilizzando l'opzione si seleziona uno dei numerosi blocchi di codice da eseguire.

stringhe

Le stringhe sono ciò che JavaScript chiama al testo che non esegue una funzione ma può apparire sullo schermo.

var person = "John Doe";

In questo caso, John Doe è la stringa.

Personaggi di fuga

In JavaScript, le stringhe sono contrassegnate da virgolette singole o doppie. Se si desidera utilizzare le virgolette in una stringa, è necessario utilizzare caratteri speciali:

  • \' - Singola citazione
  • \" - Doppia citazione

A parte questo, hai anche altri personaggi di escape:

  • \\ - Backslash
  • \ b - Backspace
  • \ f - Feed modulo
  • \ n - Nuova linea
  • \ r - Ritorno a capo
  • \ t - Tabulatore orizzontale
  • \ v - Tabulatore verticale

Metodi di stringa

Esistono molti modi diversi di lavorare con le stringhe:

  • charAt () - Restituisce un carattere in una posizione specificata all'interno di una stringa
  • charCodeAt () - Ti dà l'unicode di un personaggio in quella posizione
  • concat () - Concatena (unisce) due o più stringhe in una
  • fromCharCode () - Restituisce una stringa creata dalla sequenza specificata di unità di codice UTF-16
  • indice di() - Fornisce la posizione della prima occorrenza di un testo specificato all'interno di una stringa
  • lastIndexOf () - Uguale a indice di() ma con l'ultima occorrenza, cercando all'indietro
  • incontro() - Recupera le corrispondenze di una stringa rispetto a un modello di ricerca
  • sostituire() - Trova e sostituisci il testo specificato in una stringa
  • ricerca() - Esegue una ricerca per un testo corrispondente e ne restituisce la posizione
  • fetta() - Estrae una sezione di una stringa e la restituisce come nuova stringa
  • Diviso() - Divide un oggetto stringa in una matrice di stringhe in una posizione specificata
  • substr () - Simile a fetta() ma estrae una sottostringa in base a un numero specificato di caratteri
  • substring () - Anche simile a fetta() ma non può accettare indici negativi
  • toLowerCase () - Converti le stringhe in lettere minuscole
  • toUpperCase () - Converti le stringhe in maiuscolo
  • valore di() - Restituisce il valore di base (che non ha proprietà o metodi) di un oggetto stringa

Sintassi delle espressioni regolari

Le espressioni regolari sono schemi di ricerca utilizzati per abbinare le combinazioni di caratteri nelle stringhe. Il modello di ricerca può essere utilizzato per la ricerca di testo e il testo per sostituire le operazioni.

Modificatori di motivi

  • e - Valutare la sostituzione
  • io - Esegue una corrispondenza senza distinzione tra maiuscole e minuscole
  • g - Esegui la corrispondenza globale
  • m - Esegue la corrispondenza di più righe
  • S - Tratta le stringhe come un'unica riga
  • X - Consenti commenti e spazi bianchi nel modello
  • U - Schema non gradevole

Parentesi

  • [Abc] - Trova uno dei caratteri tra le parentesi
  • [^ Abc] - Trova qualsiasi personaggio che non sia tra parentesi
  • [0-9] - Usato per trovare qualsiasi cifra compresa tra 0 e 9
  • [A-Z] - Trova qualsiasi carattere dalla maiuscola A alla z minuscola
  • (A | B | c) - Trova una delle alternative separate da |

metacaratteri

  • . - Trova un singolo carattere, ad eccezione di newline o terminatore di riga
  • \ w - Carattere di parole
  • \ W - Carattere non verbale
  • \ d - Una cifra
  • \ D - Un carattere non cifra
  • \S - Carattere spazi bianchi
  • \S - Carattere non bianco
  • \ b - Trova una corrispondenza all'inizio / alla fine di una parola
  • \ B - Una corrispondenza non all'inizio / alla fine di una parola
  • \ 0 - Carattere NUL
  • \ n - Un nuovo carattere di linea
  • \ f - Carattere feed feed
  • \ r - Carattere di ritorno a capo
  • \ t - Carattere tab
  • \ v - Carattere tab verticale
  • \ xxx - Il carattere specificato da un numero ottale xxx
  • \ xdd - Carattere specificato da un numero esadecimale dd
  • \ uXXXX - Il carattere Unicode specificato da un numero esadecimale XXXX

quantificatori

  • n+ - Corrisponde a qualsiasi stringa che contiene almeno un n
  • n * - Qualsiasi stringa che contiene zero o più occorrenze di n
  • n? - Una stringa che contiene zero o una ricorrenza di n
  • n {X} - Stringa che contiene una sequenza di X n
  • n {X, Y} - Stringhe che contengono una sequenza da X a Y n
  • n {X,} - Corrisponde a qualsiasi stringa che contiene una sequenza di almeno X n
  • n $ - Qualsiasi stringa con n alla fine di essa
  • ^ n - Stringa con n all'inizio di esso
  • ?= n - Qualsiasi stringa seguita da una stringa specifica n
  • ?!n - Stringa che non è seguita da una stringa specifica ni

Numeri e matematica

In JavaScript, puoi anche lavorare con numeri, costanti ed eseguire funzioni matematiche.

Proprietà numeriche

  • MAX_VALUE - Il valore numerico massimo rappresentabile in JavaScript
  • MIN_VALUE - Il valore numerico positivo più piccolo rappresentabile in JavaScript
  • NaN - Il valore "Non un numero"
  • NEGATIVE_INFINITY - Il valore infinito negativo
  • POSITIVE_INFINITY - Valore infinito positivo

Metodi numerici

  • toExponential () - Restituisce la stringa con un numero arrotondato scritto come notazione esponenziale
  • toFixed () - Restituisce la stringa di un numero con un numero specificato di decimali
  • toPrecision () - Stringa di un numero scritto con una lunghezza specificata
  • accordare() - Restituisce un numero come stringa
  • valore di() - Restituisce un numero come numero

Proprietà matematiche

  • E - Il numero di Eulero
  • LN2 - Il logaritmo naturale di 2
  • LN10 - Logaritmo naturale di 10
  • LOG2E - Logaritmo in base 2 di E
  • LOG10E - Logaritmo in base 10 di E
  • PI - Il numero PI
  • SQRT1_2 - Radice quadrata di 1/2
  • SQRT2 - La radice quadrata di 2

Metodi matematici

  • abs (x) - Restituisce il valore assoluto (positivo) di x
  • acos (x) - L'arcocosina di x, in radianti
  • asin (x) - Arcsine di x, in radianti
  • atan (x) - L'arcotangente di x come valore numerico
  • atan2 (y, x) - Arctangente del quoziente dei suoi argomenti
  • ceil (x) - Valore di x arrotondato per eccesso all'intero più vicino
  • cos (x) - Il coseno di x (x è in radianti)
  • exp (x) - Valore di EX
  • piano (x) - Il valore di x arrotondato per difetto all'intero più vicino
  • log (x) - Il logaritmo naturale (base E) di x
  • max (x, y, z, ..., n) - Restituisce il numero con il valore più alto
  • min (x, y, z, ..., n) - Lo stesso vale per il numero con il valore più basso
  • pow (x, y) - X alla potenza di y
  • casuale() - Restituisce un numero casuale compreso tra 0 e 1
  • round (x) - Il valore di x arrotondato al suo intero più vicino
  • sin (x) - Il seno di x (x è in radianti)
  • sqrt (x) - Radice quadrata di x
  • tan (x) - La tangente di un angolo

Gestire le date in JavaScript

Puoi anche lavorare con e modificare date e ora con JavaScript. Questo è il prossimo capitolo del cheat sheet di JavaScript.

Date di impostazione

  • Data() - Crea un nuovo oggetto data con la data e l'ora correnti
  • Data (2017, 5, 21, 3, 23, 10, 0) - Crea un oggetto data personalizzato. I numeri rappresentano un anno, mese, giorno, ora, minuti, secondi, millisecondi. Puoi omettere tutto ciò che vuoi tranne un anno e un mese.
  • Data ( "2017/06/23") - Dichiarazione della data come stringa

Tirare i valori di data e ora

  • getDate () - Ottieni il giorno del mese come numero (1-31)
  • getDay () - Il giorno della settimana come numero (0-6)
  • getFullYear () - Anno come numero di quattro cifre (aaaa)
  • getHours () - Ottieni l'ora (0-23)
  • getMilliseconds () - Il millisecondo (0-999)
  • getMinutes () - Ottieni il minuto (0-59)
  • getMonth () - Mese come numero (0-11)
  • getSeconds () - Ottieni il secondo (0-59)
  • prendi tempo() - Ottieni i millisecondi dal 1 ° gennaio 1970
  • getUTCDate () - Il giorno (data) del mese nella data specificata in base all'ora universale (disponibile anche per giorno, mese, anno intero, ore, minuti ecc.)
  • parse - Analizza una rappresentazione in formato stringa di una data e restituisce il numero di millisecondi dal 1 ° gennaio 1970

Imposta parte di una data

  • impostare la data() - Imposta il giorno come un numero (1-31)
  • setFullYear () - Imposta l'anno (facoltativamente mese e giorno)
  • setHours () - Imposta l'ora (0-23)
  • setMilliseconds () - Imposta millisecondi (0-999)
  • setMinutes () - Imposta i minuti (0-59)
  • setMonth () - Imposta il mese (0-11)
  • setSeconds () - Imposta i secondi (0-59)
  • tempo impostato() - Imposta l'ora (millisecondi dal 1 gennaio 1970)
  • setUTCDate () - Imposta il giorno del mese per una data specificata in base all'ora universale (disponibile anche per giorno, mese, anno intero, ore, minuti ecc.)

Modalità DOM

Il DOM è il Document Object Model di una pagina. È il codice della struttura di una pagina web. JavaScript ha molti modi diversi per creare e manipolare elementi HTML (chiamati nodi).

Proprietà nodo

  • attributi - Restituisce una raccolta live di tutti gli attributi registrati su un elemento
  • baseURI - Fornisce l'URL di base assoluto di un elemento HTML
  • childNodes - Fornisce una raccolta di nodi figlio di un elemento
  • Primogenito - Restituisce il primo nodo figlio di un elemento
  • ultimo bambino - L'ultimo nodo figlio di un elemento
  • nextSibling - Ti dà il nodo successivo allo stesso livello dell'albero dei nodi
  • nodeName : Restituisce il nome di un nodo
  • nodeType - Restituisce il tipo di un nodo
  • nodeValue - Imposta o restituisce il valore di un nodo
  • ownerDocument - L'oggetto documento di livello superiore per questo nodo
  • parentNode - Restituisce il nodo padre di un elemento
  • previousSibling - Restituisce il nodo immediatamente precedente a quello corrente
  • textContent - Imposta o restituisce il contenuto testuale di un nodo e dei suoi discendenti

Metodi di nodo

  • appendChild () - Aggiunge un nuovo nodo figlio a un elemento come ultimo nodo figlio
  • cloneNode () - Clona un elemento HTML
  • compareDocumentPosition () - Confronta la posizione del documento di due elementi
  • getFeature () - Restituisce un oggetto che implementa le API di una funzione specificata
  • hasAttributes () - Restituisce vero se un elemento ha degli attributi, altrimenti falso
  • hasChildNodes () - Restituisce vero se un elemento ha nodi figlio, altrimenti falso
  • insertBefore () - Inserisce un nuovo nodo figlio prima di un nodo figlio esistente specificato
  • isDefaultNamespace () - Restituisce vero se un namespaceURI predefinito è predefinito, altrimenti falso
  • isEqualNode () - Verifica se due elementi sono uguali
  • isSameNode () - Verifica se due elementi sono lo stesso nodo
  • è supportato() - Restituisce vero se una funzione specificata è supportata sull'elemento
  • lookupNamespaceURI () - Restituisce l'URI dello spazio dei nomi associato a un determinato nodo
  • lookupPrefix () - Restituisce un DOMString contenente il prefisso per un determinato URI dello spazio dei nomi, se presente
  • normalizzare() - Unisce nodi di testo adiacenti e rimuove nodi di testo vuoti in un elemento
  • removeChild () - Rimuove un nodo figlio da un elemento
  • replaceChild () - Sostituisce un nodo figlio in un elemento

Metodi dell'elemento

  • getAttribute () - Restituisce il valore dell'attributo specificato di un nodo elemento
  • getAttributeNS () - Restituisce il valore stringa dell'attributo con lo spazio dei nomi e il nome specificati
  • getAttributeNode () - Ottiene il nodo dell'attributo specificato
  • getAttributeNodeNS () - Restituisce il nodo dell'attributo per l'attributo con lo spazio dei nomi e il nome indicati
  • getElementsByTagName () - Fornisce una raccolta di tutti gli elementi figlio con il nome tag specificato
  • getElementsByTagNameNS () - Restituisce un HTMLCollection live di elementi con un determinato nome di tag appartenente allo spazio dei nomi indicato
  • hasAttribute () - Restituisce vero se un elemento ha degli attributi, altrimenti falso
  • hasAttributeNS () - Fornisce un valore vero / falso che indica se l'elemento corrente in un determinato spazio dei nomi ha l'attributo specificato
  • removeAttribute () - Rimuove un attributo specificato da un elemento
  • removeAttributeNS () - Rimuove l'attributo specificato da un elemento all'interno di un determinato spazio dei nomi
  • removeAttributeNode () - Elimina un nodo dell'attributo specificato e restituisce il nodo rimosso
  • setAttribute () - Imposta o modifica l'attributo specificato su un valore specificato
  • setAttributeNS () - Aggiunge un nuovo attributo o modifica il valore di un attributo con lo spazio dei nomi e il nome indicati
  • setAttributeNode () - Imposta o modifica il nodo dell'attributo specificato
  • setAttributeNodeNS () - Aggiunge un nuovo nodo attributo spaziato a un nome a un elemento

Lavorare con il browser dell'utente

Oltre agli elementi HTML, JavaScript è anche in grado di prendere in considerazione il browser dell'utente e incorporare le sue proprietà nel codice.

Proprietà finestra

  • chiuso - Verifica se una finestra è stata chiusa o meno e restituisce vero o falso
  • defaultStatus - Imposta o restituisce il testo predefinito nella barra di stato di una finestra
  • documento - Restituisce l'oggetto documento per la finestra
  • montatura - Restituisce tutto