Teoría
Teoría

¿Para qué sirve JavaScript?

Hola. ¿Quieren empezar a aprender JavaScript? Es una muy buena elección. Es uno de los lenguajes de programación más usados y más solicitados, así que le viene bien a cualquier persona que desarrolle para la web.

Al código escrito en JavaScript se le suele llamar script. Se guarda en un archivo aparte con la extensión js, por ejemplo script.js. Para ejecutarlo, hay que enlazar ese archivo con la página. En HTML hay una etiqueta especial para hacerlo:

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

Normalmente el script se conecta al final de la página, justo antes de la etiqueta de cierre </body>. Por ejemplo:

<body>
  <!-- Contenido de la página -->

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

Aquí tienen la página principal de un sitio de noticias y el script escrito para ella. A la izquierda pueden ver el código en el editor y, a la derecha, la propia página en el mini navegador. Conecten el script y vean qué se puede hacer con JavaScript.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="es"> <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="Logotipo del portal 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">Cuadrícula</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="Nueva biblioteca"> <div class="new-block-text"> <h3>Nueva biblioteca para crear gráficos</h3> <p>Ahora es posible crear un panel en cuestión de segundos.</p> <time datetime="2019-10-16">16 oct 2019</time> </div> </article> <article class="new-block"> <img src="img/new-robot.jpg" alt="¿Qué pasa con los robots?"> <div class="new-block-text"> <h3>¿Qué pasa con los robots?</h3> <p>En la robótica están pasando muchas cosas interesantes; esta noticia podría tratar de eso, pero no.</p> <time datetime="2019-10-15">15 oct 2019</time> </div> </article> <article class="new-block"> <img src="img/new-loop.jpg" alt="Bucles infinitos"> <div class="new-block-text"> <h3>Bucles infinitos: ya es hora de superarlos</h3> <p>Científicos británicos descubrieron que el funcionamiento del software depende directamente de la presencia de bucles infinitos.</p> <time datetime="2019-10-14">14 oct 2019</time> </div> </article> <article class="new-block"> <img src="img/new-drone.jpg" alt="Imágenes de un dron"> <div class="new-block-text"> <h3>¡IMPACTANTE! Imágenes secretas de un dron de reconocimiento</h3> <p>Nadie esperaba que detrás de los muros ocurriera ALGO ASÍ...</p> <time datetime="2019-10-13">13 oct 2019</time> </div> </article> <article class="new-block"> <img src="img/new-research.jpg" alt="Investigación reciente"> <div class="new-block-text"> <h3>Novedades del mundo de la psicología</h3> <p>Las investigaciones muestran que, cuanto más se hace, más se puede lograr.</p> <time datetime="2019-10-12">12 oct 2019</time> </div> </article> <article class="new-block"> <img src="img/new-cat.jpg" alt="Aprender JavaScript"> <div class="new-block-text"> <h3>Resulta que</h3> <p>Resulta que para empezar a aprender JavaScript no hace falta ser un gato.</p> <time datetime="2019-10-11">11 oct 2019</time> </div> </article> </section> </div> </main> <aside class="cookies-agreement"> <p>Mientras visitan nuestro sitio y leen las noticias, usamos cookies. Esperamos que no les moleste.</p> <button class="button" type="button">De acuerdo, continúen</button> </aside> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <a class="footer-logo"> <img src="img/white-logo.svg" alt="Logotipo del portal 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

// Menú let menu = document.querySelector('.menu'); menu.onclick = function () { menu.classList.toggle('menu-open'); menu.classList.toggle('menu-close'); }; // Vista 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'); }; // Cookies let cookies = document.querySelector('.cookies-agreement'); let cookiesButton = document.querySelector('.button'); cookiesButton.onclick = function () { cookies.classList.add('cookies-agreement-closed'); };

ObjetivosRealizado

Descomenten el código <script src="script.js"></script> en la línea 107. Para hacerlo, eliminen los símbolos .
En el mini navegador, abran el menú haciendo clic en el icono de hamburguesa de la esquina superior derecha.
En el mini navegador, hagan clic en el botón «Cuadrícula».
En el mini navegador, cierren el aviso sobre cookies haciendo clic en el botón «De acuerdo, continúen».