Iniziare con JavaScript

Download javascript eBook

Osservazioni

JavaScript (da non confondere con Java ) è un linguaggio dinamico, debolmente tipizzato utilizzato per il lato client e per lo scripting lato server.

JavaScript è un linguaggio sensibile al maiuscolo / minuscolo. Ciò significa che la lingua considera le lettere maiuscole come diverse dalle loro controparti minuscole. Le parole chiave in JavaScript sono tutte in minuscolo.

JavaScript è un'implementazione comunemente citata dello standard ECMAScript.

Gli argomenti in questo tag si riferiscono spesso all'uso di JavaScript nel browser, se non diversamente specificato. I file JavaScript non possono essere eseguiti direttamente dal browser; è necessario incorporarli in un documento HTML. Se hai qualche codice JavaScript che vorresti provare, puoi incorporarlo in un contenuto segnaposto come questo e salvare il risultato come example.html :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    Inline script (option 1):
    <script>
      // YOUR CODE HERE
    </script>
    External script (option 2):
    <script src="your-code-file.js"></script>
  </body>
</html>

Versioni

Versione Data di rilascio
1 1997/06/01
2 1998/06/01
3 1998-12-01
E4X 2004-06-01
5 2009-12-01
5.1 2011-06-01
6 2015/06/01
7 2016/06/14
8 2017/06/27

Utilizzo di console.log ()

introduzione

Tutti i moderni browser Web, NodeJs e quasi tutti gli altri ambienti JavaScript supportano la scrittura di messaggi su una console utilizzando una suite di metodi di registrazione. Il più comune di questi metodi è console.log() .

In un ambiente browser, la funzione console.log() viene utilizzata principalmente per scopi di debug.


Iniziare

Apri la Console JavaScript nel tuo browser, digita quanto segue e premi Invio :

console.log("Hello, World!"); 

Ciò registrerà quanto segue alla console:

Output del registro della console in Google Chrome

Nell'esempio sopra, la funzione console.log() stampa Hello, World! alla console e restituisce undefined (mostrato sopra nella finestra di output della console). Questo perché console.log() non ha alcun valore di ritorno esplicito.


Variabili di registrazione

console.log() può essere usato per registrare variabili di qualsiasi tipo; non solo stringhe. Basta passare la variabile che si desidera visualizzare nella console, ad esempio:

var foo = "bar";
console.log(foo);
 

Ciò registrerà quanto segue alla console:

console.log () può essere utilizzato con variabili

Se si desidera registrare due o più valori, è sufficiente separarli con virgole. Gli spazi verranno aggiunti automaticamente tra ogni argomento durante la concatenazione:

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar); 
Ciò registrerà quanto segue alla console:

Console Concat


segnaposto

Puoi usare console.log() in combinazione con i segnaposto:

var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);
 

Ciò registrerà quanto segue alla console:

inserisci la descrizione dell'immagine qui


Registrazione degli oggetti

Di seguito vediamo il risultato della registrazione di un oggetto. Questo è spesso utile per registrare le risposte JSON dalle chiamate API.

console.log({
    'Email': '', 
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2',
    'PrincipalType': 1,
    'Title': 'user2'
}); 

Ciò registrerà quanto segue alla console:

Oggetto registrato nella console


Registrazione di elementi HTML

Hai la possibilità di registrare qualsiasi elemento esistente all'interno del DOM . In questo caso registriamo l'elemento body:

console.log(document.body);
 

Ciò registrerà quanto segue alla console:

inserisci la descrizione dell'immagine qui


Nota finale

Per ulteriori informazioni sulle funzionalità della console, consultare l'argomento Console .

Utilizzo dell'API DOM

DOM sta per D ocument O bject M odel. È una rappresentazione orientata agli oggetti di documenti strutturati come XML e HTML .

L'impostazione della proprietà textContent di un Element è un modo per stampare il testo su una pagina Web.

Ad esempio, considera il seguente tag HTML:

<p id="paragraph"></p>
 

Per modificare la proprietà textContent , possiamo eseguire il seguente codice JavaScript:

document.getElementById("paragraph").textContent = "Hello, World";
 

Questo selezionerà l'elemento con il paragraph id e ne imposterà il contenuto in "Hello, World":

<p id="paragraph">Hello, World</p>
 

(Vedi anche questa demo)


È inoltre possibile utilizzare JavaScript per creare un nuovo elemento HTML a livello di codice. Ad esempio, considera un documento HTML con il seguente corpo:

<body>
   <h1>Adding an element</h1>
</body> 
 

Nel nostro JavaScript, creiamo un nuovo tag <p> con una proprietà textContent e lo aggiungiamo alla fine del corpo html:

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM
 

Ciò cambierà il tuo corpo HTML al seguente:

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>
 

Si noti che per manipolare gli elementi nel DOM utilizzando JavaScript, il codice JavaScript deve essere eseguito dopo che l'elemento pertinente è stato creato nel documento. Questo può essere ottenuto inserendo i tag <script> JavaScript dopo tutto il tuo altro contenuto <body> . In alternativa, puoi anche utilizzare un listener di eventi per ascoltare ad es. L'evento onload window , aggiungendo il codice a quel listener di eventi, ritarderà l'esecuzione del codice fino a quando non sarà stato caricato l'intero contenuto della pagina.

Un terzo modo per assicurarsi che tutto il tuo DOM sia stato caricato, è di avvolgere il codice di manipolazione DOM con una funzione di timeout di 0 ms . In questo modo, questo codice JavaScript viene re-accodato alla fine della coda di esecuzione, che offre al browser la possibilità di terminare alcune cose non JavaScript che sono state in attesa di completare prima di partecipare a questo nuovo pezzo di JavaScript.

Utilizzo dell'API DOM (con testo grafico: Canvas, SVG o file immagine)

Usando elementi di tela

HTML fornisce l'elemento canvas per la creazione di immagini basate su raster.

Per prima cosa costruisci una tela per contenere informazioni sui pixel dell'immagine.

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

Quindi seleziona un contesto per il canvas, in questo caso bidimensionale:

var ctx = canvas.getContext('2d');
 

Quindi imposta le proprietà relative al testo:

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);
 

Quindi inserisci l'elemento canvas nella pagina per avere effetto:

document.body.appendChild(canvas);
 

Utilizzando SVG

SVG è per la costruzione di grafica vettoriale scalabile e può essere utilizzato all'interno di HTML.

Prima crea un contenitore di elementi SVG con dimensioni:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;
 

Quindi crea un elemento di text con le caratteristiche di posizionamento e carattere desiderate:

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';
 

Quindi aggiungi il testo effettivo da visualizzare nell'elemento di text :

text.textContent = 'Hello world!';
 

Infine aggiungi l'elemento text al nostro contenitore svg e aggiungi l'elemento contenitore svg al documento HTML:

svg.appendChild(text);
document.body.appendChild(svg);
 

File immagine

Se hai già un file immagine contenente il testo desiderato e lo hai messo su un server, puoi aggiungere l'URL dell'immagine e quindi aggiungere l'immagine al documento come segue:

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
 

Usare window.alert ()

Il metodo di alert visualizza una finestra di avviso visiva sullo schermo. Il parametro del metodo di avviso viene visualizzato all'utente in testo normale :

window.alert(message);
 

Poiché la window è l'oggetto globale, puoi chiamare anche usare la seguente stenografia:

alert(message);
 

Quindi cosa fa window.alert() ? Bene, prendiamo il seguente esempio:

alert('hello, world');
 

In Chrome, ciò produrrebbe un pop-up come questo: mettere in guardia

Gli appunti

Il metodo di alert è tecnicamente una proprietà dell'oggetto window , ma dal momento che tutte le proprietà della window sono automaticamente variabili globali, possiamo usare alert come variabile globale anziché come proprietà della window , il che significa che puoi usare direttamente alert() invece di window.alert() .

Diversamente dall'utilizzo di console.log , l' alert funge da prompt modale, il che significa che l' alert chiamata a codice si interromperà fino a quando non verrà risposto al prompt. Tradizionalmente questo significa che nessun altro codice JavaScript verrà eseguito fino a quando l'avviso non viene eliminato:

alert('Pause!');
console.log('Alert was dismissed');
 

Tuttavia, la specifica consente effettivamente ad altri codici attivati ​​da eventi di continuare a essere eseguiti anche se viene ancora visualizzata una finestra di dialogo modale. In tali implementazioni, è possibile che venga eseguito un altro codice mentre viene visualizzata la finestra di dialogo modale.

Ulteriori informazioni sull'utilizzo del metodo di alert sono disponibili nell'argomento modalità modali .

L'uso di avvisi di solito è scoraggiato a favore di altri metodi che non impediscono agli utenti di interagire con la pagina - al fine di creare un'esperienza utente migliore. Tuttavia, può essere utile per il debug.

A partire da Chrome 46.0, window.alert() è bloccato all'interno di un <iframe> meno che il suo attributo sandbox abbia il valore allow-modal .

Usare window.confirm ()

Il metodo window.confirm() visualizza una finestra di dialogo modale con un messaggio opzionale e due pulsanti, OK e Annulla.

Ora, prendiamo il seguente esempio:

result = window.confirm(message);
 

Qui, il messaggio è la stringa opzionale da visualizzare nella finestra di dialogo e il risultato è un valore booleano che indica se OK o Annulla è stato selezionato (true significa OK).

window.confirm() viene in genere utilizzato per chiedere la conferma dell'utente prima di eseguire un'operazione pericolosa come l'eliminazione di qualcosa in un pannello di controllo:

if(window.confirm("Are you sure you want to delete this?")) {
    deleteItem(itemId);
}
 

L'output di tale codice sarebbe simile a questo nel browser:

La finestra di dialogo di conferma è molto semplice: Messaggio, OK, Annulla

Se ne hai bisogno per un uso successivo, puoi semplicemente memorizzare il risultato dell'interazione dell'utente in una variabile:

var deleteConfirm = window.confirm("Are you sure you want to delete this?");
 

Gli appunti

  • L'argomento è facoltativo e non richiesto dalle specifiche.
  • Le finestre di dialogo sono finestre modali: impediscono all'utente di accedere al resto dell'interfaccia del programma fino alla chiusura della finestra di dialogo. Per questo motivo, non si deve abusare di alcuna funzione che crea una finestra di dialogo (o una finestra modale). E a prescindere, ci sono ottime ragioni per evitare l'uso di finestre di dialogo per la conferma.
  • A partire da Chrome 46.0 questo metodo è bloccato all'interno di un <iframe> meno che il suo attributo sandbox abbia il valore allow-modal.
  • È comunemente accettato di chiamare il metodo di conferma con la notazione della finestra rimossa poiché l'oggetto finestra è sempre implicito. Tuttavia, si consiglia di definire esplicitamente l'oggetto finestra in quanto il comportamento previsto potrebbe cambiare a causa dell'implementazione a un livello di ambito inferiore con metodi con nomi simili.

Utilizzare window.prompt ()

Un modo semplice per ottenere un input da un utente è utilizzando il metodo prompt() .

Sintassi

prompt(text, [default]);
  • testo : il testo visualizzato nella finestra del prompt.
  • default : un valore predefinito per il campo di input (opzionale).

Esempi

var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user

Casella di richiesta

Se l'utente fa clic sul pulsante OK , viene restituito il valore di input. Altrimenti, il metodo restituisce null .

Il valore restituito del prompt è sempre una stringa, a meno che l'utente non faccia clic su Annulla , nel qual caso restituisce null . Safari è un'eccezione in quanto quando l'utente fa clic su Annulla, la funzione restituisce una stringa vuota. Da lì, puoi convertire il valore di ritorno in un altro tipo, come un numero intero .

Gli appunti

  • Mentre viene visualizzata la finestra di richiesta, all'utente viene impedito l'accesso ad altre parti della pagina, poiché le finestre di dialogo sono finestre modali.
  • A partire da Chrome 46.0 questo metodo è bloccato all'interno di un <iframe> meno che il suo attributo sandbox abbia il valore allow-modal.

Stats

15071 Contributors: 179
Monday, August 7, 2017
Autorizzato sotto: CC-BY-SA

Non affiliato con Stack Overflow
Rip Tutorial: info@zzzprojects.com

Scarica eBook