JavaScript Tutorial => Iniziare con JavaScript

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 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 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.