Activity 4 - JavaScript

Making your webpage interactive with JS

Now that we have elements on our screen and know how to style them with CSS, let’s make our website more interesting and interactive. We may want to add animations or buttons that our site visitors can click on. We can do this by adding code logic to our page using JavaScript.

JavaScript (JS)

JavaScript is a programming language often used to make websites interactive and control their behavior. It allows you to add logic to your page, for example, if you click a button, then something on the page changes in response!

We’ll cover the very basics to get your started.

Similar to CSS, JS files work closely with HTML tags to select different items on the page.

See this example below:

See the Pen Adding JavaScript by Jessie Houghton (@houghj16) on CodePen.

Click on the “HTML” tab on the top left corner to see the HTML code, the “CSS” tab to see the CSS code, and the “JS” tab to see the JS code.

Remember how we used the class attribute or the id attribute with CSS to give the corresponding HTML tags a style? We can use that same id with JavaScript to select that element.

You’ll notice in the example above, even though we made the info div teal in exercise 2, since the JavaScript function document.getElementById(“info”).style.color = “black”; runs after the styling is applied, it changed the color back to black. Note that this is another way to change the style of an element, although CSS is preferred.

Just like CSS, JS has a syntax (or way of writing) in the JS file so the computer understands what you’re asking it to do. You’ll use special keywords like document and functions like getElementById to give the computer instructions. There are too many keywords and functions to introduce now, but an important thing to remember is to end each line with a ;. Additionally, you can add comments to your code using // to help you remember what the code is doing.

With a little practice, JavaScript can enable you to do almost anything you want with your websites such as create games, animate 2D and 3D graphics, keep track of data in a database, and much more. Here are some good resources to learn more.

• w3schools JavaScript and HTML DOM References
• JavaScript Basics from MDN Web Docs

How to add an alert button

You might’ve noticed in the example, we added a new button “Pet Benji” next to our image of Benji. When you click on it, it adds an alert on the screen that says “Thanks for the pets!” and adds a message from Benji to the page. How did we do that?

• We added a new HTML element with the unique id "pet-button" to the HTML <button id="pet-button">Pet Benji</button>
• We added an empty HTML element with the unique id "message" to the HTML <div id="message"></div>
• Then, in the JS, we used document.querySelector("#pet-button") to find the element with id "pet-button", and added a click event listener that calls the alert function with the message "Thanks for the pets!" Note that the alert may look different depending on your browser.

Activity 4 - Adding another alert button to your website

Now, it’s your turn to try it out! To complete this activity, you will need to complete the following steps:

1. Click on the try it yourself! button to open the editor
2. Add a new HTML button element to the HTML page with a unique ID. For example, <button id="my-button">Click me!</button>
3. Add the corresponding JS to the JS page to add a click event listener to the button.
4. Click on the button to see if it works!

Try it yourself!