A Beginner's Guide to JavaScript
{- BACK -}
What is JavaScript
JavaScript can be thought of as an extension to HTML which allows authors to incorporate some functionality in their web pages. So now, whenever the user presses the SUBMIT button, you don't necessarily have to invoke a cgi script to do the processing. If it is something simple, you can do the processing locally using JavaScript and give back the results. JavaScript can also be used in a number of ways to spice up your page!
Who is the beginner?
No, it's not you. It's me. By the title, all I meant was that this is my Guide to JavaScript. I hope that you will find this page useful and learn something. Just thought I'd warn you...
Whom this page is for
In its present form, this page is for the absolute beginner to JavaScript. Some knowledge of HTML is assumed. For more information on HTML, check out my HTML Page. Further on, familiarity with C++ will also be useful since these two are somewhat similar in syntax and also because JavaScript is Object Oriented.
The Java Scripts page contain some very simple but useful JavaScript samples along with explanations. You can use them without knowing much about JavaScript at all! On this page you'll find some simple codes (around 4 to 8 lines each). On the HTML Help page, you will find links to lots of JavaScript related resources on the web and if that's not enough, you can buy a couple of JavaScript books from your local Bookstore.
If you have problems with any of these samples, please mail me !
JavaScript Examples
Here are some things that you can do to enhance your pages without knowing much about JavaScript.
Putting text on the status bar
The first example demonstrates how to manipulate text on the status bar. When you move the cursor over a hyperlink, the status bar shows the destination URL. This is not very helpful. Fortunately, it is very easy to put our own brief description there.
The normal HTML code for a hyperlink might be something like this:
<A HREF="mylink.htm">Click here</A>
To display something on the status bar when the mouse is moved over this link, you need to add a little more:
<A HREF="mylink.htm"
onMouseOver="window.status='Click
here to know more about me!'; return true">Click here</A>
The above code will produce a link like this. Don't click on it. It doesn't lead anywhere!
The "onMouseOver" is the event and the string part is our event handler. Keep in mind that JavaScript is case-sensitive. Microsoft Internet Explorer is more forgiving than Netscape Navigator, so it's better to use Navigator for checking your pages.
Displaying "Last Updated" date on documents This is somewhat longer than the previous example. The JavaScript required to achieve this is given below:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Last updated :");
document.write(document.lastModified);
// -->
</SCRIPT>
Insert this code into the HTML document at the point where you want it to be displayed. The source is within <!-- ... --> so that it doesn't cause problems even if the browser does not support JavaScript. Also notice the // (JavaScript style) comment for -->. This is required for some browsers to interpret it properly.
Displaying a message in a pop-up window
JavaScript has a function called alert()which pops up a window with the message you pass to alert() as parameter. The simplest example of using this function is to display a message when your page loads. To do this just put the following code right after the <BODY> tag (or within the <HEAD> tag or where ever you want). <SCRIPT LANGUAGE="JavaScript"> <!-- Hide from older browsers alert("Press Ok to start formatting your hard disk"); // end hiding --> </SCRIPT> This is a great way to scare off visitors to your page but let us see if it's possible to something more useful. What if we want to pop-up a message box when the user clicks on a link. It so happens that this is indeed possible. You can try clicking here. To understand what is going on, take a look at how the link is coded. <A HREF="JavaScript: alert('your message here!')"> The "JavaScript:" part tells the browser that it should execute the given JavaScript statement when the link is clicked.
It is also possible
to pop-up a message when a button is clicked. Here is how to do it! <FORM>
<INPUT TYPE=BUTTON VALUE="Click me" onClick="alert('your
message here')">
</FORM>
Notes:
You might have noticed that the syntax used in each of the examples are very different. While the first one was embedded within another tag (<A HREF=...> in this case), the second one was within a SCRIPT tag. Another difference is that the first one is executed only when the specified event (MouseOver in this case) occurred whereas the second one is executed as soon as it is encountered in the HTML document.
The real power of JavaScript comes from its ability to define and call functions! I hope this gives you a better understanding of how and what Java really is!
{- BACK -}
Comments: rickshelp@telus.net
Copyright © 1997-98 Rick's Web Page Help!
