In this lesson, we will learn how to write some javascript that shows us the current time. It uses the current time on the viewers machine, however, because the javascript is actually just an instruction that the browser is downloading that tells the users computer to look up the current time and display it.

 

Here's how you do this:

 

open your favorite text editor, such as notepad.

 

type the following into a new file:

 

<script language="Javascript">

</script>

 

then save the file as "time.html", you might want to in fact include the double quotes in the dialog box, to ensure that your file is not save instead as "time.html.txt"

 

now, find your file on your computer (you should know where you saved it, if not, repeat the step above and save on your desktop, where you can easily view its icon). Double click. Your browser should open and show.. nothing!

If so, you have actually performed the first step correctly - it was designed to just show you the minimal amount of code you need in an html file to create a javascript program within it. This program doesn't do anything. But our next one will!

 

Now, we are going to write some real code to put inside of our script tags. Not all Javascript code has to go inside of the script tag pair in order to be executed, but if we want code to be executed right away when we load the page, then it does. And in this case we do - we want the current time to show up right away when we load the page (imagine a web site maintainer frantically rewriting the html to do this every second and then saving it just in time so that viewers will see the correct time! Though this process can be automated by the server machine to more accurately show the time than your own computer might do - somehow it seems much simpler just to tell the browser to ask its own computer for the time)

 

Now, even inside of script tags, javascript is not really very good html. And some browsers do not understand javascript or allow users to ignore it. For this reason, it is a good idea to take the actual code you right, even inside the script tags and enclose it in html comment tags, so that it will never appear directly on the screen, but only create output when (and if!) the code is actually run.

 

here's how to do that.

 

inside your script tags add this pair of tags (with some room to add your code inside when you are done)

 

<!--

 

-->

 

note that the first tag inludes an exclamation point, but the second doesn't. By the way, you can use this pair anywhere in your html code to put in invisible text that may help you understand your html later - or to be uncommented at some later date if needed, for example. You can try this out below your script tags, if you want, and include some text there - unfortunately after the next step, anything you put there will dissapear. However, we will explore this issue further and set that as an exercise to try in lesson2. So you can also just wait till then.

 

Now between the html comments, add the following code:

 

document.write(new Date());

 

save your file again and double click (or refresh) in your browser to view it.

 

voila, you have written your first bit of javascript.

 

In the next lesson, we will talk about what that code is and how it does what it does, but for now, go get a drink of water and pat yourself on the back (not neccessarily in that order!(), you have done well - and, in fact, have finished lesson 1! Congratulations.