Theory
Theory
Comments

Why is JavaScript necessary?

Hi, there! Have you decided that you want to learn JavaScript? Excellent choice!

The JavaScript programming language was invented specifically for the purpose of creating interactive websites. These are websites that respond to user actions. You use interactive features all the time—when you click on the “heart” icon to like something, or upload new posts to your social media feed, when you get to the end of the page, or when you receive new message alerts. You need JavaScript in order to do these things. Today JavaScript is one of the most popular programming languages, so it will come in handy for every web developer.

In this chapter we will be working with layout. If you don’t yet know how web pages are structured, then we recommend that you take the “Introduction to HTML and CSS” chapter first.

We call JavaScript code a “script”, a computer science term for a language that runs inside a special environment — in our case, the browser. It is saved in a separate file with the extension js (e.g., myScript.js or awesome-effects.js). In order to run this script, this file needs to be included in a page. HTML has a special tag for adding JavaScript:

<script src="file_address"></script>

The script is usually included at the very end of the page, before the closing tag </body>. For example:

<body>
  <!-- Page contents -->

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

Let’s explore the main page of a news site as well as the script that was written for it. You can see the code in the editor to the left, and the page itself is displayed on the right in the mini-browser. Let’s include the script and see what can be done using JavaScript.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="en"> <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! portal logo"> </a> <button class="menu menu-open" type="button">Menu</button> <nav class="main-menu"> <ul> <li> <a href="#">Editorial</a> </li> <li> <a href="#">Contact us</a> </li> <li> <a href="#">Subscribe</a> </li> </ul> </nav> </div> </header> <main class="index-main"> <div class="container"> <h1 class="visually-hidden">FlashNews news portal!</h1> <div class="news-view"> <button class="row-view view-checked" type="button">List</button> <button class="tile-view" type="button">Tile</button> </div> <section class="news-list"> <h2 class="visually-hidden">All news</h2> <article class="new-block"> <img src="img/new-graph.jpg" alt="New library"> <div class="new-block-text"> <h3>New graphics library</h3> <p>Now you can create a dashboard in just a matter of seconds.</p> <time datetime="2019-10-16">October 16, 2019</time> </div> </article> <article class="new-block"> <img src="img/new-robot.jpg" alt="What is going on with robots?"> <div class="new-block-text"> <h3>What is going on with robots?</h3> <p>A lot of interesting things are happening in robotics. This could be a piece of news about the latest developments, but that is not what this is.</p> <time datetime="2019-10-15">October 15, 2019</time> </div> </article> <article class="new-block"> <img src="img/new-loop.jpg" alt="Infinite loops"> <div class="new-block-text"> <h3>Infinite loops: It’s time to end them</h3> <p>British scientists have discovered that the ability of software to function directly depends on the presence of infinite loops in it.</p> <time datetime="2019-10-14">October 14, 2019</time> </div> </article> <article class="new-block"> <img src="img/new-drone.jpg" alt="Aerial footage taken by drone"> <div class="new-block-text"> <h3>THE SHOCKING TRUTH! Secret aerial footage taken by a reconnaissance drone</h3> <p>No one expected that THIS was going on behind the walls…</p> <time datetime="2019-10-13">October 13, 2019</time> </div> </article> <article class="new-block"> <img src="img/new-research.jpg" alt="Story 5"> <div class="new-block-text"> <h3>From the world of psychology</h3> <p>Studies show that if you do more, you can actually get more done.</p> <time datetime="2019-10-12">October 12, 2019</time> </div> </article> <article class="new-block"> <img src="img/new-cat.jpg" alt="Story 6"> <div class="new-block-text"> <h3>An unexpected discovery.</h3> <p>It turns out that in order to start learning JavaScript, you don’t have to be a cat.</p> <time datetime="2019-10-11">October 11, 2019</time> </div> </article> </section> </div> </main> <aside class="cookies-agreement"> <p>We use cookies on your device while you are reading the news on our site. We really hope that you don’t mind.</p> <button class="button" type="button">OK, Continue</button> </aside> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <a class="footer-logo"> <img src="img/white-logo.svg" alt="FlashNews! portal logo"> </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

// Menu let menu = document.querySelector('.menu'); menu.onclick = function () { menu.classList.toggle('menu-open'); menu.classList.toggle('menu-close'); }; // Layuot 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! Om-nom-nom... let cookies = document.querySelector('.cookies-agreement'); let cookiesButton = document.querySelector('.button'); cookiesButton.onclick = function () { cookies.classList.add('cookies-agreement-closed'); };

Click inside the mini browser to put the focus in this window.

Goalscompleted

Uncomment the code <script src="script.js"></script> on line 107. To do this, delete the characters .
In the mini-browser, open the menu by clicking the “hamburger” icon in the upper right corner.
In the mini-browser, click the “Tile” button.
In the mini-browser, close the cookie warning dialog by clicking the “OK, Continue” button.

Why is JavaScript necessary?

Comments

Log in

Sign up

Restore access