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>  </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'); };

ObiettiviFatto

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