30 Days Of JavaScript

Day 15: DOM Manipulation

Lesson 5: JavaScript

So we have an index.html file with the words 'Hello World' displayed on screen and some CSS that allows us to style it.

You may be wondering where the JavaScript is?!

You will have noticed that we added CSS to our page with the <style> tag, well JavaScript is added with <script> tags.

Typically tags like these are added at the top of the page before the <body> tag, however JavaScript often needs the page to be fully rendered before it can start doing it's thing so we are going to add ours to the bottom of the page. There are other ways of getting around this, but for a beginners course placing your JavaScript at the end of the page is just fine 😊

In your index.html find the closing body tag </body> and right after it, before the closing html tag </html> add the following:

1<script>
2  console.log("Hello World from JS");
3</script>

Now you won't see anything change, but if you open up your browser dev tools and look in the console you will see Hello World from JS printed there.

Remember to view those dev tools you can go to View > Developer > Developer Tools and select Console from the across the top. Or right click anywhere on your page, click Inspect Element and then choose Console from the top row.

Your final index.html should look like this:

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8
9    <style>
10      #red-text {
11        color: red;
12      }
13
14      #blue-text {
15        color: blue;
16      }
17
18      .title-large {
19        font-size: 48px;
20        font-weight: bold;
21      }
22
23      .title-small {
24        font-size: 24px;
25        font-weight: bold;
26      }
27
28      .hidden {
29        display: none;
30      }
31
32      .warning {
33        color: orangered;
34      }
35    </style>
36  </head>
37  <body>
38    <p id="red-text">Hello World</p>
39  </body>
40  <script>
41    console.log("Hello World from JS");
42  </script>
43</html>

30 Days Of JavaScript

Day 15: DOM Manipulation

Lesson 5: JavaScript

Outline

Go Pro?