Let's See What JavaScript Can Do!

Understanding the theory side of JavaScript is important, and we will get to this soon. But there is nothing like seeing exactly what it can do right in front of you.

The developer tools

To see some of the things JavaScript can do, we can open up a web page and take a look using the developer tools.

1. Visit a website of your choice (you can use this one if you want to).
2. Open up your web browser developer tools on a desktop (usually right click > inspect).
3. Click on the element inspector which will look similar to this:

This will allow you to hover over and click on any element on the web page to inspect, click on any section of text like this:

Selecting elements in the devtools

JavaScript can be used to control and make changes to any website. Don't worry, we are not permanently changing the website, all changes are only inside our browser and will be lost when we refresh the page.

The text we selected will be highlighted inside the developer tools, you will see something like this:

<p>...</p> == $0;

Notice how the element we have selected has this $0? This $0 allows us refer to this element in the console, and control it with JavaScript.

Modifying elements in the console

Click on the console tab and we can run JavaScript in the browser.

In the console, type in $0 and the selected element will be returned:

<p>...</p> == $0;

This example shoes a <p> element just as we would write in our text editor. And we can select any other element in the same way.

So, we have selected this element, but what can we do with it? Well, the list is huge and we are only going to scratch the surface here, but we will cover a lot more during the course.

We can see some of these options if we type a dot after: $0.

A drop down box in the console will show available options. A common way to change the text content is to use innerText:

$0.innerText = "new text";

Set this equal to any new value as above, press enter, and the web page will update. If we open this up in a new tab or refresh the page, the page is restored.

Refreshing tha page will also restore $0 back to undefined. We will look at undefined in more detail later but for this purpose it means no element has been assigned to $0.

Changing element styles in the console

We can apply styling just as we can with CSS, don’t worry if anything we do here is unfamiliar, we are just discovering what JavaScript can do and we will get lots of practice throughout this course.

Try some of the following examples in the console:

$0.style.fontFamily = "Cursive"; //change font

$0.style.background = "hotpink"; // change background

$0.hidden = true; // hide element

$0.hidden = false; // show element

Basic events

We can also use events to respond to something the user does, for example, if they move the mouse over our selected text, we can change the background color.

Give this a try in the console with any text selected from the page:

$0.onmouseover = function () { this.style.background = "orange"; };

This will run a function, which changes the background of the selected element when the mouse moves over it.

If you have not seen a function before, or an of the other techniques, we will cover this in more detail in this course, I just want to show you some possibilities and get you excited for what you can do with JavaScript.

Manually selecting elements

This is a way to quickly test things out in the browser, but when it comes to writing real JavaScript code in a text editor, $0 won’t work. $0 is provided by the devtools, so instead we need a way to manually grab an element we want to work with.

Imagine we had the following element on web page we wanted to work with:

<main id="content">...</main>

Outside the console, how do we go about this without using $0?

This would be how se select the main element:

document.getElementById("content");

• The document is simply our web page, so it is the HTML file which generates this page.
• getElementById() is a JavaScript method available on the document which returns the element we pass in as a string.

There are also methods available to select by a class or tag name, but more on these later. This returns the element, just as did $0, meaning we can do similar things to before such as modifying the style:

document.getElementById("content").style.opacity = 0.3; // set the opacity value

document.getElementById("content").style.background = "lightgreen"; // change the background color

You can also use these examples in the console if you have an element with an id value to work with.

JavaScript is not limited to changing web pages, there is so much it can do, such as arithmetic:

5 + 10; // 15
7 - 2; // 5
10 / 5; // 2

We can generate random numbers:

Math.random(); // 0.005983497103336122;
Math.random(); // 0.8181381453648957;
Math.random(); // 0.9652441925790358;

And so much more. I hope this has gave you a taste of some of the power of JavaScript, and there is so much more to learn as you progress through this course.