February 9, 2020

Javascript - some easy first things to try

I am working with the chrome browser on a linux system, and have a linux hosted website using the almost universal apache webserver. I use the vim editor to edit the html and javascript files on my web server, and I edit them live which scares some people but actually works just fine.

Alternately, if you don't have a handy web server like I do, you could put these files in your home directory and aim your browser at them using a URL such as file://simple.html.

Resources

There are a million javascript tutorials online, and I guess this will soon turn into yet another of them. Frankly, most of them suck because they either have no well defined starting point, or they assume you are just going to fool around with some console mode in your browser, which I always find irritating and stupid. The following are some selected resources that I have found useful:

Caching and other tips

It is too bad we have to talk about this up front, but if we don't you will trip over it almost immediately and be quite frustrated. I recommend that while you are learning javascript, that you do not use a separate ".js" file, but instead enclose you javascript as part of your html file within "script" tags. Just trust me and do this if you don't want to worry about this yet.

The reason is that most (maybe all) browsers will load a ".js" file once the first time they encounter it. Then you will edit the file and wonder why your changes aren't working. The browser is still stuck on that first copy of the file it encountered!!

While this is great for performance on a stable website, it is a huge pain in the ass for a developer, There seems to be no easy workaround for this. Even restarting the browser does not solve the problem.

A simple hello world

Every language tutorial should begin with a "Hello world" tutorial. This is not simply to honor tradition, but the point is to get the reader "in the grove" with whatever they need to do to get the simplest possible thing to work on their system. The goal is to learn how to use an editor to generate files, figure out where to put them on your system, how to compile them (not part of the javascript game), how to run them, and so forth.

What I do is to put the file "hello.html" on my server, include the javascript inside of "script" tags and aim my browser at that page. The following simple file was the first thing that actually worked. It is not quite the "hello world" application that I wanted, as it uses the "alert" function which may not be included in all javascript implementations.

Note that if you click on the above link, it will run my code. You should get a popup with the hello world message. You will need to use the right mouse button to get a menu, and select "view page source" to see the source.

Here is another way, using document.write rather than alert. This simply adds the message to the document. Where in the document? I depends on where the script tags are.

And here is a significanctly more complex, but realistic version of hello world. Here you must click a button to see the greeting.

This is worth some study. We use a form to enclose a button, as is required by html. The button has an "onclick" which actually specifies a bit of javascript in quotes. This bit of javascript just calls a function "myfunc" which is in the script section. This is a typical bit of "event driven programming". Something happens (namely the user clicks on a button) and some code is specified to handle the event.

An html "div" provides a place with a name to receive the text generated by the javascript. The javascript code in the myfunc function uses the document.getElementById("greeting") function to find this place and then sets the "innerHTML" attribute of this thing to the text we want to see.

Developer Console

This is as good a reason as any to be using chrome as your browser for Javascript development. Hit the F12 key and you get a javascript debugger called the "developer console". There is a tab labeled "Console" that will show you errors you would never otherwise know about. This is worth its weight in gold and is very powerful. I won't go into detail here, but mention it so you are aware of it and can learn how to use it via information in the links above.
Have any comments? Questions? Drop me a line!

Adventures in Computing / tom@mmto.org