Step 1: Learn About JavaScript
JavaScript can be written in a .js file separate from your HTML document, like this:
function changeBG(elem) {
elem.style.color = "#000000";
elem.style.background = "#f0f0f0";
}
That would change the text color of the given element to black, and the background color to light gray.
To link a JavaScript script to your HTML document, you add a <script> tag in the <head> tag:
<head>
<script src="my_script.js"></script>
</head>
Notice that unlike the <link> tag used for linking CSS, the <script> tag needs to be closed.
Each of those sections in angle brackets <> defines formatting for a certain type of tag. In this case, we defined special formatting for the body tag (all page content), top-level headings, and regular paragraphs of text.
What about tags (or format properties) that we don't define? They default to whatever the browser default is. In-tag JavaScript overrides document JavaScript and imported JavaScript, which overrides browser defaults.
In-tag is quick but can get repetitive and messy. In-document is better; you'd just put something like the above in a <style> tag. The cleanest and most flexible option is to have a separate file for JavaScript. This is what I've done for this activity, in my_script.js. You can open it up and take a look at it.
To tell the HTML document to use a certain script, you add a link inside the <head> tag of the document:
<head>
<script src="my_script.js"></script>
</head>
This links my_script.js into the document and tells it that it's a script. Having external JavaScript like this can make it easier to manage your HTML content and change the styling quickly. Of course, you can also add in-document or in-tag styling which will override the script.
This page gives more detailed explanations of this. It's not long, so give it a look before moving on.
Step 2: I Baked You Some Code
Open my_script.js and look it over. Look up what each of the properties mean (here is a good, quick reference.) Open up my_homepage.html in a browser and see how it looks. Try changing the JavaScript file, then refreshing the page. You should see your changes take effect.
Step 3: Make it Your Own
Use this reference to make components of your web page interactive, and modify them in my_script.js. You can also use in-tag (inline) or in-document scripting, depending on what’s useful.
Some ideas to try:
Make a picture that changes when you click on it
Create sections of your site that expand and collapse
Create a search bar that filters what page content is shown
Find something interesting online, inspect the source of the page (Ctrl Shift I), and look at the JavaScript files used in the “Sources” tab at the top. You can use parts of that as a template, or modify and “save” it to temporarily change how the site behaves (this will only take effect for you.)
