Interactivity with Javascript

Let's talk about adding interactivity to your websites!

So far, we have seen how HTML can add structure to our webpages with organizational tags and how CSS adds styling to our websites. Now, we're going to talk about Javascript, which helps us add extra functionality, such as interactivity, to our websites.

Here are some examples of things we can do with Javascript:

• Make interactive buttons
• Send notifications
• Take input from a user
• Dynamically change the HTML of a website

Buttons and Notifications

Inspect to see what's going on! The button is an html element, but we add the notification with javascript.

Challenge #1: use inspect element to modify the onclick command to send a different alert message

User Input

User input is more complicated than a button alert, so typically we will attach an external javascript file. This is done by adding a script tag at the bottom of your body (right before the closing tag).

But how do you see this javascript file? It's not in the elements or styles menues that you've been working in previously...

To find every file for a webpage, including the javascript, you can navigate to the "Sources" tab, click "Page" on the left, and then select interactivity.js

Challenge #2: write your own function which uses the user's input to display something different on the screen, and redirect the onsubmit to that command instead!

Hint: you can write your own code in the below script tag (inspect to see what I'm talking about)