Web 003: Basics of JavaScript

This will help you:

Use JavaScript to define the behavior of your web content.

JavaScript enables interactive content in websites, like moving and changing elements, as well as a lot more. If HTML is like the nouns of a website, and CSS is the adjectives, then JavaScript is the verbs. JavaScript is actually a real programming language, and there's a lot you can do with it, but we'll just create some basic functionality here.

Time: 1 hour / Level: A3

You should already:

Get the code and resources for this activity by clicking below. It will allow you to download the files from a Google Drive folder. Unzip the folder and save it in a sensible location.

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.)