Assignment 01-02: Getting Started - JavaScript (Page Two)

You should have done page one already and are used to the idea of using a workbook and looking at the HTML. Now we'll add some JavaScript programming.

This page is less about JavaScript, and more to check that you understand some of the details as to how we connect JavaScript programs to web pages.

A secondary goal of this page is to make sure that you know how to use the tools for JavaScript programming. So please try to follow the instructions - we can't check that you did, but we'll find out soon enough when you can't do the basic things to write programs in the coming weeks.

Box 1: Where does my code go?

You can put JavaScript code right into your HTML.

For example, I can use a <script> tag and just put JavaScript right in the middle of a paragraph like this one. Look into the HTML to find that JavaScript.

You should have noticed that snippet of JavaScript used the function console.log to write a message to the console. This is a good time to make sure that you know about the console! Open the console of your web browser, and make sure that you see the message. (It will say Box01 says an initial message to the console). To open the console in Chrome and FireFox on my Windows laptop it's CTRL-SHIFT-I (the letter I). If you're using Visual Studio Code with connected debugging, you can see the console right in a VSCode window.

You can also stick JavaScript code right into elements that use them. Here, I'll put a button right into this paragraph and attach some JavaScript to it. You should look at the HTML to see the JavaScript right inline on the button. You should see what the button does (get used to looking at the console!).

While you can stick JavaScript code right into HTML (I just did, obviously), you generally, should not do it. For little one liners, it might be OK. But, for anything more complicated, having the JavaScript in a separate file makes things much easier to keep track of.

Box02: JavaScript Files

Since I told you not to put JavaScript into the HTML files, the next question is where to put it.

We will put JavaScript programs into separate files - dividing them up into smaller chunks (roughly "modules"), but that will come later. By convention, I will always name my JavaScript files with ".js", although other people will do other things (for example, we might name the files with ".es6" to signify that we're using the ES6 version of JavaScript).

We load JavaScript files into our HTML page using the same <script> tag that we used in Box01. Except that rather than putting the code inline, the tag gives the file name to load. Look at the HTML, since I stuck it right into this paragraph. You will also want to look at the file that got loaded ("two.js") and check the console (since, like Box1, the code writes there).

If you're curious (and you should be) the type="module" in the tag tells the browser that we want the ES6 version of JavaScript.

Box03: When to run code

A cool thing about the web browser is that many things are asynchronous. You don't have to wait for one thing to finish before starting the next. So, for example, when we load a JavaScript program, we don't know when it will finish loading. It could load immediately, or it could take some time (if it has to be fetched over the network, or the compiler takes some time). This creates a potential problem: we want our JavaScript program to access our web page, but we don't know if the web page has finished loaded (and is ready to be accessed) when our program is run.

The answer to this will be to delay running our JavaScript program until after we're sure that the web page is loaded. To do this, we'll put out program (the place to go when we want to "start") as a function, and set this function to be called after the window finishes loading. Inside the HTML file for this paragraph, you'll see an example. (inside the script tag) - remember you are supposed to read this!

Notice how I defined a function (called main, that prints something), and then assigned this function to the onload member of the window object. If you look in the console, you'll see that print statement occurs after all of the stuff that gets run during the loading (like the other console.log statement).

Make sure that you're comfortable to the idea of defining functions (like we did here) and treating them as objects (such as assigning them to variables to be called later).

Box04: Multiple start functions

In box 3, we defined a function that got called when the window finished loading. If we wanted to do something else (like have a start function for this box) we can't just change window.onload again - since we'd over-write what we put there last time. Instead, we need to store whatever the previous value was and make sure it gets called as well. An example of how to do this is in the box. It uses a closure - which is something that you will learn about as you learn to program in JavaScript. We'll talk about them in class, and you can read about them if you aren't already familiar with them.

In the future, we will give you addStart - but I wanted to explain why you needed it, and to give you a first exposure to code with closures. While those few lines of code are short and simple, they use some important functional programming concepts. We will use similar things a lot in this class.

And, in the future, don't put JavaScript into your HTML files like that.

Box05: What to do with buttons?

In the first button example, we stuck code right into the button's handler when we created the button. That's not a good place to put code. Instead, what we will do to attach JavaScript to buttons is to write JavaScript that finds the button on the page and changes it. Of course, that code cannot be run until after the page is loaded (since we need to make sure that the button has been created before we change it).

Here is a . Look at the code (which is in the HTML file) to see how the handler is set up (and of course, check the console to see that it works).

Here is . The code to set it up does the same thing, it's just written in a different style. Read the code an make sure you see how it works.

And while you're looking at code... Here's . This one does something slightly more complicated, and makes use of a closure. Look at the console to figure out what is happeneing.

This (the "yet another button") example uses another closure, so you can start to figure out how closures work.

But, I want you to do one other thing with this example: use it as a chance to try out the debugger in the browser that you are using. Try to put a break point in the code to stop the program when the button is clicked. This program is so simple that you won't need a debugger, but soon, we'll be writing bigger programs, and you'll be happy that you know how to use the debugger.

Box 06: One more thing with buttons...

So far, we've made the buttons in HTML and attached JavaScript to them. However, we can also make the buttons right in JavaScript using JavaScript functions that create HTML elements and place them in the DOM (the tree of objects).

Here is an example that places a button right in this paragraph. Be sure to look at the code and understand the basic ideas. Notice how we directly manipulate the "tree" of elements (here we add more children to the paragraph).

Here is another, more complicated example creating multiple buttons and using closures to give them some behavior. This is a good chance to try to learn to read code that uses closures. This time, the actual code is in the "two.js" file.

Summary

Hopefully, seeing this gave you some ideas as to how we connect web pages and JavaScript programs. Now we can move on to the third page (three.html) and try to use JavaScript to actually do something.