For example, I can use a
<script> tag and just
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.
<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
Notice how I defined a function (called
main, that prints something),
and then assigned
this function to the
onload member of the
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
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).
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
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.
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.
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.