JavaScript Info
Javascript Lesson 1


Lesson1 | History/Background | Instructions Page | Tips and Troubleshooting | Related Links

Making a dynamic web page using Javascript

Javascript is all about adding dynamic behavior to your web pages. By default web pages just show text and images that have been placed on some server by a content provider. There are two ways to make this data chage automatically without requiring someone to manually change the files on the server. One way is to have a program on the server that updates the files automatically, or automatically generates new ones as the content needs to change. The other way is to send some code along with the web page that instructs the browser that is viewing the page to do some work and make things happen based on user input or the current state of events while viewing the page and also, quite significantly, as a result of user input.
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">
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.

Enter supporting content here