Teoría
Teoría

¿Por qué necesitas JavaScript?

Hola, ¿has decidido aprender JavaScript? ¡Buena elección! Es uno de los lenguajes de programación más populares y demandados, por lo que será muy útil para cualquier desarrollador web.

El código JavaScript se denomina script. Se guarda en un archivo independiente con la extensión js (por ejemplo, script.js) y, para ejecutarlo, se conecta este archivo a la página. HTML tiene una etiqueta especial para añadir JavaScript:

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

El script suele insertarse al final de la página, antes de la etiqueta de cierre </body>. Por ejemplo:

<body>
    <!-- Contenido de la página -->
    
    <script src="script.js"></script>
</body>

Tenemos la página principal de un sitio de noticias y el script escrito para ella. Puedes ver el código en el editor de la izquierda, y la propia página se muestra a la derecha en el mini-navegador. Conectemos el script y veamos lo que podemos hacer con JavaScript.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="ru"> <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">Menú</button> <nav class="main-menu"> <ul> <li> <a href="#">Columna del Editor</a> </li> <li> <a href="#">Contactos</a> </li> <li> <a href="#">Suscripción</a> </li> </ul> </nav> </div> </header> <main class="index-main"> <div class="container"> <h1 class="visually-hidden">Portal de noticias FlashNews</h1> <div class="news-view"> <button class="row-view view-checked" type="button">Lista</button> <button class="tile-view" type="button">Mosaico</button> </div> <section class="news-list"> <h2 class="visually-hidden">Todas las noticias</h2> <article class="new-block"> <img src="img/new-graph.jpg" alt=""> <div class="new-block-text"> <h3>Nueva biblioteca para crear gráficos</h3> <p>Ahora puedes crear un cuadro de mando en cuestión de segundos.</p> <time datetime="2019-10-16">16 de octubre de 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-robot.jpg" alt=""> <div class="new-block-text"> <h3>¿Qué pasa con los robots?</h3> <p>Se están haciendo muchas cosas interesantes en robótica, esta noticia podría haber tratado de eso, pero no.</p> <time datetime="2019-10-15">15 de octubre de 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-loop.jpg" alt=""> <div class="new-block-text"> <h3>Ciclos interminables: es hora de ponerse manos a la obra</h3> <p>Científicos británicos han descubierto que el rendimiento del software depende directamente de la presencia de bucles infinitos en él.</p> <time datetime="2019-10-14">14 de octubre de 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-drone.jpg" alt=""> <div class="new-block-text"> <h3>¡Sorpresa! Imágenes secretas del dron espía.</h3> <p>Nadie esperaba que eso pasara detrás de las paredes.....</p> <time datetime="2019-10-13">13 de octubre de 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-research.jpg" alt=""> <div class="new-block-text"> <h3>Desde el mundo de la psicología</h3> <p>Los estudios demuestran que si haces más, puedes hacer más.</p> <time datetime="2019-10-12">12 de octubre de 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-cat.jpg" alt=""> <div class="new-block-text"> <h3>De repente.</h3> <p>Resulta que no hace falta ser un gato para empezar a aprender JavaScript.</p> <time datetime="2019-10-11">11 de octubre de 2019.</time> </div> </article> </section> </div> </main> <aside class="cookies-agreement"> <p>Mientras está en nuestro sitio web y lee las noticias, utilizamos sus cookies. Esperamos que no le importe.</p> <button class="button" type="button">Aceptar, continuar</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'); };

ObjetivosRealizado

Descomenta el código <script src="script.js"></script> de la línea 107, eliminando los caracteres .
En el mininavegador, abra el menú haciendo clic en el icono de la hamburguesa situado en la esquina superior derecha.
En el mininavegador, haz clic en el botón "Mosaico".
En el mininavegador, cierre la advertencia de cookies haciendo clic en el botón "Aceptar, continuar".