Change language
Python.Engineering Wiki Console Javascript

Console Javascript

__del__ | __main__ Python module | ast Python module | cmd Python module | code Python module | COM PHP module | dis Python module | DOM PHP module | Ev PHP module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | logging Python module | Lua PHP module | os Python module | PS PHP module | Python Development | Python functions | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | tty Python module | UI PHP module | uu Python module | warnings Python module
Michael Zippo Michael Zippo 04.11.2021

Scrivere codice, mentre è divertente, può anche diventare piuttosto noioso.

Ci sono giorni in cui inizi a scrivere codice, ti rendi conto che qualcosa non funziona e ti senti molto frustrato. Ancora più fastidioso è quando il tuo codice viene eseguito, ma non riesci a capire perché non funziona correttamente; quando c’è qualcosa nel tuo codice che devi correggere.

Ecco dove la console JavaScript può essere utile. La console ti consente di tenere traccia di ciò che sta accadendo nel tuo codice. In questo modo è facile capire cosa non va nel tuo codice.

In questa guida, discuteremo come utilizzare la console JavaScript. Forniremo anche un esempio di un’applicazione che utilizza la console in modo da poter padroneggiare rapidamente la console JavaScript.

La console JavaScript

Sviluppatore, ti presento la console. Trascorrerai molto tempo nella console durante il tuo periodo come sviluppatore, quindi è qualcosa con cui dovrai familiarizzare.

La console è un luogo in cui puoi visualizzare i messaggi mentre la tua applicazione è in esecuzione e dove puoi manipolare il contenuto di una pagina web.

Puoi dire al tuo codice di registrare i messaggi nella console e questi verranno visualizzati quando hai indicato loro a. Puoi anche utilizzare la console per modificare variabili, valori e ispezionare i valori memorizzati in una variabile.

Per visualizzare la tua console, devi aprire gli strumenti per sviluppatori. In Chrome, puoi farlo usando Ctrl + Maiusc + I su Windows o Cmd + Alt + I su Mac. In Firefox, puoi aprire gli strumenti per sviluppatori utilizzando Comando + Opzione + K.

Quando lo fai, un finestra come questa si aprirà:

TLj9KUG2pZw3HEqt1Kd SIV W S3Q7V6c ENnQRQE3n6NLVfYCr8zKt87A6nme3UmpfmSQTH23pRMpqIpTae3nm6ynDMkbHfBJnd5ukbHBxsW8edoMJJGT4iwEZDZ6nNrXDsIlk> Tutti i browser moderni hanno un proprio numero di strumenti. Per questo tutorial, ci concentreremo solo sulla console.</p> </a></div><h2>Introduzione alla console</h2> <p>Inizieremo visualizzando un messaggio nella console. Possiamo farlo senza nemmeno avere una pagina Web aperta. Tutto quello che devi fare è aprire la console del browser e scrivi le istruzioni JavaScript che desideri eseguire.<br></p> <p>Ci sono tre metodi principali che utilizzerai nella console:<br></p> <ul><li>console .log(): visualizza un messaggio sulla console.</li><li>console.warn(): visualizza un avviso nella console.</li><li>console.error(): visualizza un errore nella console.</li></ul> <p>Prima di continuare, non dovresti incollare nulla nella tua console senza prima sapere cosa fa il codice. Molti siti moderni ti avvertono di questo dato che ci sono truffe che usano la console. per accedere a informazioni sensibili dell’utente.<br></p> <p>Detto questo, cominciamo! Per visualizzare un messaggio sulla console, possiamo n usa questo codice:<br></p> <p>Non appena esegui questo comando, verrà restituito quanto segue:<br></p><p>Puoi anche visualizzare errori e avvisi sulla console. La differenza tra errori e avvisi e un’istruzione <code>log()</code> tradizionale è che gli errori e gli avvisi vengono visualizzati rispettivamente in arancione e rosso:<br></p> <p>Il nostro codice restituisce:<br></p> <figure class= GXz6eGAaJ96el M5cfzcRpa196fdNovCUxjUJQ2PhfTS6qzu40XrYivl5mtxBeUZGiTWoAe PIwF4SarOiG4St KfpQwMepeoqJTBjs0T52cxigKuo1REijuG64gSJJRuc9s5Zhn

Utilizzo di console in un’applicazione

" re costruire un’app modellata sul cookie clicker per mostrare l’oggetto console in azione. Questa app mostrerà un contatore che ci mostra quante volte è stata cliccata l’immagine di una tazza di tè. Registreremo ogni clic sulla console in modo da poter tenere traccia di quando si verificano.

Sviluppo del front-end

Il nostro primo passo è sviluppare il front-end del nostro applicazione. Crea un file chiamato "index.html" e incolla il seguente codice:

Questo codice mostra quattro elementi sulla nostra pagina web: un titolo, una descrizione del gioco, l’immagine di una tazza di tè e un messaggio che informa l’utente quanti volte hanno cliccato sulla tazza di tè.

Aggiungiamo anche alcuni stili al nostro codice per renderlo attraente. Crea un file chiamato "styles.css" e incolla questo codice:

Questi stili creano una scatola per il nostro gioco clicker del tè, impostano il colore del contatore dei clic su giallo e creano angoli arrotondati per la nostra immagine. Ecco come appare ora la nostra pagina web:

T5 Hj ZcpMbx8o CMhBJCxX1CE76C2XWBL4o1 Lo0U FaQ2ahJ VFrLo hf8UuMQdJUgMu1lg A1njeVWMndLb88CHdD7VFZSCUNFrYnZ9d GXD8y1XQQ6EYTBoUpqsH1Gfe3unA

Quando fai clic sulla tazza da tè, non succede nulla. Questo perché non abbiamo ancora aggiunto il nostro codice JavaScript. Scriviamo il codice JavaScript per la nostra applicazione.

Aggiunta di funzionalità utilizzando JavaScript

Quando l’utente fa clic sulla tazza di tè, il contatore dovrebbe aumentare di uno. Prima di poter incrementare il nostro contatore, dobbiamo selezionare gli elementi DOM con cui lavoreremo: l’immagine e il contatore. Gli elementi DOM, o Document Object Model, sono tag nella nostra pagina web.

Imposteremo anche una variabile che tiene traccia di quante volte è stata cliccata la tazza di tè:

Il nostro prossimo passo è creare una funzione che registri quando il nostro pulsante è stato cliccato e incrementa il nostro contatore di uno. Possiamo farlo usando il seguente codice:

La prima riga stamperà il messaggio della console "Il pulsante è stato cliccato" alla console. Successivamente, aggiungiamo 1 ai nostri "clic" contatore. Quindi modifichiamo il contenuto del testo nel nostro tag per riflettere il conteggio dei clic aggiornato utilizzando il metodo innerText.

Vediamo la nostra pagina web e facciamo clic sull’immagine della tazza di tè:

EIKDPoZ9JdR7K2z9gO1tF3EgmA SiXEKFGhG1IX2582CL9fAqROhwvP5GUrKZ2hJRxU O5PDdjUonsg6FUhmM7xwziHS1teOdzM8LqZV Sofm0 NnTl2mJPEDot4bvH64ElzOQm3

Come si è visto, quando si clicca la tazza di tè nostri incrementi contatore di uno. Oltre a , il messaggio che abbiamo specificato nel nostro codice viene stampato sulla console. Questo ci aiuta a capire quando l’utente fa clic sulla tazza di tè.

Anche se questa è un’implementazione di base del console.log(), in un’applicazione più grande potresti vedere che la registrazione è ampiamente utilizzata. Per la maggior parte, i registri sono solo mantenuto nelle versioni di sviluppo delle applicazioni. Questo perché gli utenti non hanno bisogno di vedere cosa sta succedendo dietro le quinte. Detto questo, il logging è ancora uno strumento incredibilmente prezioso per gli sviluppatori.

Conclusione

La console è uno strumento che puoi usare per imparare come funziona il tuo codice. Puoi usarlo per visualizzare messaggi di debug durante l’esecuzione del codice o per tenere traccia di avvisi ed errori.

Dovresti utilizzare le istruzioni di registrazione solo se stai sviluppando la tua applicazione o se desideri creare messaggi di errore personalizzati per il tuo codice che puoi utilizzare per il debug. Non dovresti conservare troppi log in un’applicazione web disponibile online.