Cose da fare
Familiarità con JavaScript1/16
Torna all'elenco delle attività
  1. 1. Perché avete bisogno di JavaScript?
  2. 2. Familiarizzare con i temi di commutazione
  3. 3. Trovare un elemento usando querySelector
  4. 4. Invia l'elemento alla console
  5. 5. Rimuovere una classe usando classList.remove
  6. 6. Aggiungere una classe usando classList.add
  7. 7. Dichiarare una variabile
  8. 8. Conoscere il gestore di eventi
  9. 9. Per cambiare il tema, fare clic su
  10. 10. Conoscere classList.toggle
  11. 11. Finalizzazione del cambio di tema
  12. 12. Conoscere la proprietà textContent
  13. 13. Modifica del contenuto del testo dell'elemento
  14. 14. Decommentiamo il codice
  15. 15. Ottenere i dati dal campo di input utilizzando input.value
  16. 16. Utilizzo della concatenazione
Compito successivo
  • Corsi
  • Registrazione
  • Accedi

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

Perché avete bisogno di JavaScript?

Avete deciso di imparare JavaScript? Ottima scelta! È uno dei linguaggi di programmazione più popolari e richiesti, quindi sarà utile per ogni sviluppatore web.

Il codice JavaScript è chiamato script. Viene salvato in un file separato con estensione js (ad esempio, script.js) e per eseguirlo si inserisce questo file nella pagina. L'HTML ha un tag speciale per aggiungere JavaScript:

<script src="script.js"></script>

Lo script viene solitamente inserito alla fine della pagina, prima del tag di chiusura </body>. Ad esempio:

<body>
  <!-- Contenuto della pagina -->

  <script src="script.js"></script>
</body>

Abbiamo la pagina principale di un sito di notizie e lo script scritto per essa. Il codice è visibile nell'editor a sinistra, mentre la pagina stessa è visualizzata a destra nel mini-browser. Inseriamo lo script e vediamo cosa possiamo fare con JavaScript.

  • index.html
  • style.css
  • script.js
HTML
<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> <title>FlashNews!</title> </head> <body class="page light-theme"> <header class="page-header"> <div class="container"> <a class="header-logo"> <img src="img/main-logo.svg" width="67" height="29" alt="FlashNews!"> </a> <button class="menu menu-open" type="button">Menu</button> <nav class="main-menu"> <ul> <li> <a href="#">Colonna dell'editore</a> </li> <li> <a href="#">Contatti</a> </li> <li> <a href="#">Abbonamento</a> </li> </ul> </nav> </div> </header> <main class="index-main"> <div class="container"> <h1 class="visually-hidden">Portale di notizie FlashNews!</h1> <div class="news-view"> <button class="row-view view-checked" type="button">Elenco</button> <button class="tile-view" type="button">Tile</button> </div> <section class="news-list"> <h2 class="visually-hidden">Tutte le notizie</h2> <article class="new-block"> <img src="img/new-graph.jpg" alt=""> <div class="new-block-text"> <h3>Nuova libreria per la creazione di grafici</h3> <p>Ora è possibile creare una dashboard in pochi secondi.</p> <time datetime="2019-10-16">16 ottobre 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-robot.jpg" alt=""> <div class="new-block-text"> <h3>Cosa succede ai robot?</h3> <p>Ci sono molte cose interessanti che stanno accadendo nel campo della robotica, questa notizia avrebbe potuto riguardare anche questo, ma no.</p> <time datetime="2019-10-15">15 ottobre 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-loop.jpg" alt=""> <div class="new-block-text"> <h3>Cicli infiniti: è ora di darsi da fare</h3> <p>Gli scienziati britannici hanno scoperto che le prestazioni del software dipendono direttamente dalla presenza di loop infiniti al suo interno.</p> <time datetime="2019-10-14">14 ottobre 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-drone.jpg" alt=""> <div class="new-block-text"> <h3>Scioccante: le riprese segrete del drone spia.</h3> <p>Nessuno si aspettava che ciò accadesse dietro i muri...</p> <time datetime="2019-10-13">13 ottobre 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-research.jpg" alt=""> <div class="new-block-text"> <h3>Dal mondo della psicologia</h3> <p>Le ricerche dimostrano che se si fa di più, si può fare di più.</p> <time datetime="2019-10-12">12 ottobre 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-cat.jpg" alt=""> <div class="new-block-text"> <h3>Improvvisamente.</h3> <p>È emerso che non è necessario essere un gatto per iniziare a imparare JavaScript.</p> <time datetime="2019-10-11">11 ottobre 2019.</time> </div> </article> </section> </div> </main> <aside class="cookies-agreement"> <p>Mentre siete sul nostro sito web e leggete le notizie, utilizziamo i vostri cookie. Ci auguriamo che non vi dispiaccia.</p> <button class="button" type="button">Ok, continua</button> </aside> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <a class="footer-logo"> <img src="img/white-logo.svg" alt="FlashNews!"> </a> </div> </footer> <!-- <script src="script.js"></script> --> </body> </html>
CSS
/* Light theme */ .light-theme { color: #333333; background-color: #eae9f2; } .light-theme .page-header { background-color: #ffffff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .light-theme .header-link { color: #6653d9; } .light-theme .header-link::before { background: url("img/arrow-back-light.svg") no-repeat 0 0; } .light-theme .theme-button { color: #6653d9; border: 1px solid #6653d9; } .light-theme .theme-button::before { background-image: url("img/moon-normal.svg"); } .light-theme .theme-button:focus, .light-theme .theme-button:hover { color: #ffffff; background-color: #6653d9; } .light-theme .theme-button:focus::before, .light-theme .theme-button:hover::before { background-image: url("img/moon-hover.svg"); } .light-theme .menu-open { background-color: #ffffff; background-image: url("img/menu-open-light.svg"); } .light-theme .menu-open:focus, .light-theme .menu-open:hover { background-color: #6653d9; background-image: url("img/menu-open-dark.svg"); } .light-theme .menu-close { background-color: #6653d9; } .light-theme .menu-close:focus, .light-theme .menu-close:hover { background-color: #473c8d; } .light-theme .main-menu { background-color: #6653d9; color: #ffffff; } .light-theme .main-menu a:focus, .light-theme .main-menu a:hover { background-color: #473c8d; } .light-theme .news-view button { border: 1px solid #6653d9; color: #6653d9; } .light-theme .news-view button:focus, .light-theme .news-view button:hover, .light-theme .news-view button:active, .light-theme .news-view .view-checked { background-color: #6653d9; color: #ffffff; } .light-theme .news-view .row-view:focus::before, .light-theme .news-view .row-view:hover::before, .light-theme .news-view .row-view:active::before { background-image: url("img/rows-light-checked.svg"); } .light-theme .news-view .tile-view:focus::before, .light-theme .news-view .tile-view:hover::before, .light-theme .news-view .tile-view:active::before { background-image: url("img/tiles-light-checked.svg"); } .light-theme .row-view::before { background-image: url("img/rows-light.svg"); } .light-theme .tile-view::before { background-image: url("img/tiles-light.svg"); } .light-theme .row-view::before { background-image: url("img/rows-light.svg"); } .light-theme .row-view.view-checked::before { background-image: url("img/rows-light-checked.svg"); } .light-theme .tile-view.view-checked::before { background-image: url("img/tiles-light-checked.svg"); } .light-theme .new-block { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .new-block time { color: #aaaaaa; } .light-theme .cookies-agreement { background-color: #fdeacd; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2); } .light-theme .button { background-color: #6653d9; color: #ffffff; } .light-theme .button:focus, .light-theme .button:hover { background-color: #473c8d; } .light-theme .page-footer { background-color: #6653d9; color: #ffffff; } .light-theme .subscription { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .subscription-message { background-color: #6653d9; color: #eae9f2; } .light-theme .subscription-message::before { background-image: url("img/icon-ok-light.svg"); } .light-theme .subscription-label { color: #6653d9; } .light-theme .subscription-email { border-bottom: 1px solid #6653d9; color: #333333; } /* Dark theme */ .dark-theme { color: #f2f2f2; background-color: #17161a; } .dark-theme .page-header { background-color: #373540; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); } .dark-theme .header-link { color: #9484f2; } .dark-theme .header-link::before { background: url("img/arrow-back-dark.svg") no-repeat 0 0; } .dark-theme .theme-button { color: #9484f2; border: 1px solid #9484f2; } .dark-theme .theme-button::before { background-image: url("img/sun-normal.svg"); } .dark-theme .theme-button:focus, .dark-theme .theme-button:hover { color: #17161a; background-color: #9484f2; } .dark-theme .theme-button:focus::before, .dark-theme .theme-button:hover::before { background-image: url("img/sun-hover.svg"); } .dark-theme .menu-open { background-color: #373540; background-image: url("img/menu-open-dark.svg"); } .dark-theme .menu-open:focus, .dark-theme .menu-open:hover { background-color: #473c8d; background-image: url("img/menu-open-dark.svg"); } .dark-theme .menu-close { background-color: #473c8d; } .dark-theme .menu-close:focus, .dark-theme .menu-close:hover { background-color: #6653d9; } .dark-theme .main-menu { background-color: #473c8d; color: #f2f2f2; } .dark-theme .main-menu a:focus, .dark-theme .main-menu a:hover { background-color: #6653d9; } .dark-theme .news-view button { border: 1px solid #9484f2; color: #9484f2; } .dark-theme .news-view button:focus, .dark-theme .news-view button:hover, .dark-theme .news-view button:active, .dark-theme .news-view .view-checked { background-color: #9484f2; color: #17161a; } .dark-theme .news-view .row-view:focus::before, .dark-theme .news-view .row-view:hover::before, .dark-theme .news-view .row-view:active::before { background-image: url("img/rows-dark-checked.svg"); } .dark-theme .news-view .tile-view:focus::before, .dark-theme .news-view .tile-view:hover::before, .dark-theme .news-view .tile-view:active::before { background-image: url("img/tiles-dark-checked.svg"); } .dark-theme .row-view::before { background-image: url("img/rows-dark.svg"); } .dark-theme .tile-view::before { background-image: url("img/tiles-dark.svg"); } .dark-theme .row-view.view-checked::before { background-image: url("img/rows-dark-checked.svg"); } .dark-theme .tile-view.view-checked::before { background-image: url("img/tiles-dark-checked.svg"); } .dark-theme .new-block { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .new-block time { color: #888888; } .dark-theme .cookies-agreement { background-color: #473c8d; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .button { background-color: #9484f2; color: #17161a; } .dark-theme .button:focus, .dark-theme .button:hover { background-color: #b6aaff; } .dark-theme .page-footer { background-color: #0a0910; color: #f2f2f2; } .dark-theme .subscription { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .subscription-message { background-color: #9484f2; color: #17161a; } .dark-theme .subscription-message::before { background-image: url("img/icon-ok-dark.svg"); } .dark-theme .subscription-label { color: #9484f2; } .dark-theme .subscription-email { border-bottom: 1px solid #9484f2; color: #f2f2f2; }
JavaScript
// Меню let menu = document.querySelector('.menu'); menu.onclick = function () { menu.classList.toggle('menu-open'); menu.classList.toggle('menu-close'); }; // Раскладка let rowViewButton = document.querySelector('.row-view'); let tileViewButton = document.querySelector('.tile-view'); let newsList = document.querySelector('.news-list'); rowViewButton.onclick = function () { rowViewButton.classList.add('view-checked'); tileViewButton.classList.remove('view-checked'); newsList.classList.remove('list-tiles-view'); }; tileViewButton.onclick = function () { rowViewButton.classList.remove('view-checked'); tileViewButton.classList.add('view-checked'); newsList.classList.add('list-tiles-view'); }; // Кукис! Ом-ном-ном... let cookies = document.querySelector('.cookies-agreement'); let cookiesButton = document.querySelector('.button'); cookiesButton.onclick = function () { cookies.classList.add('cookies-agreement-closed'); };

Il codice è cambiato, fai clic su "Aggiorna" o attiva l'esecuzione automatica.

Sei passato a un'altra pagina

Fare clic all'interno del mini-browser per evidenziare questa finestra.

100%
Consola
ObiettiviFatto
0
    1. Togliere il commento al codice <script src="script.js"></script> alla riga 107, rimuovendo i caratteri <!-- e -->.
    2. Nel mini-browser, aprire il menu facendo clic sull'icona dell'hamburger nell'angolo in alto a destra.
    3. Nel mini-browser, fare clic sul pulsante "Tile".
    4. Nel mini-browser, chiudere l'avviso sui cookie facendo clic sul pulsante "Ok, continua".

    © 2023-2024, codegym.study