Here's a fact you might find surprising: JavaScript does stuff. Languages like HTML and CSS tell a web-page what to look like, but JavaScript actually makes the page do stuff, like tell the time or bounce around like a mental patient in one of those rooms with all the white cushions everywhere and stuff. Now that I mention it, I'm considering pretending to be insane just so I can live in a bouncy castle. Wouldn't that be so much fun? It'd be awesome! What were we talking about again? Oh yeah, we were on how JavaScript can be used to do stuff.

So how do I use JavaScript? Edit

JavaScript can be written directly into a HTML page without having to tell the page you're using JS, however you can also create a separate file with the .js extension then link to the script in the HTML file. Take the following example, which displays the date and time when a button is clicked:

<!DOCTYPE html>



<h1>JavaScript page</h1>

<button type="button" id="time" onClick="document.getElementById('time').innerHTML = Date()"> Click to display the current date and time. </button>



If you've been paying attention to our HTML pages (which if you plan to use JavaScript in a webpage you definitely should be), you'll know what most of this means: <!DOCTYPE>, <body>, <h1> and so on. However, this example introduces a new attribute to the <button> tag introduced in the advanced formatting page: "onClick".

Setting "onClick" makes the button do stuff when it's clicked. Specifically, the following JavaScript reads "document.getElementById('time').innerHTML = Date()". Confused? Well, let's do the obvious thing and go through it step by step. Actually, it would be more obvious just to freak out and run away, but you take my point.

  1. "document" is how ALL JavaScript starts when writing webpages. Any other use of JS will almost NEVER use "document". This is because when writing JS, everything becomes a node, and nodes are contained within other nodes. Being that the document contains everything on the webpage, it is, of course, going to be the uppermost node. Just remember to start with "document" and you should be A-okay.
  2. "getElementById" finds the element with the ID specified, in this case "time". Here, the element with the ID "time" is the button itself, meaning when clicked, the button will display the date and time on the button. We could change this by giving something else the ID "time" - a <span> or a <p> would work fine for this. Never give two elements the same ID. There are classes, which allow you to group IDs, but that's not the point of this example.
  3. "innerHTML" tells JS to edit part of the page through HTML, confusingly enough. This example shows that "innerHTML = Date()", which means JS should change the selected element to your device's current date and time. Spooky.

All that explanation when you could have just looked at a clock... dammit. Suddenly I'm not a fan of doing stuff.