JavaScript Programming: Basics

As mentioned earlier , JavaScript is a full featured programming language. It allows the developer to create web sites that are more interactive, far beyond what is capable by simply clicking on links. The resource I've used to learn JavaScript is called JavaScript - The Definitive Guide by David Flannigan, published by O'Reilly Press. When you are ready to get into JavaScript, I highly recommend this book.

Since JavaScript is very intensive, getting a real understanding of it is capabilities is beyond the scope of this class. But that certainly does not stop us from exploring a couple of JavaScript methods that you may wish to use for your web site.

Some Basics
JavaScript is normally placed within the <HEAD> </HEAD> tag of an HTML document, but this can really depend on what you are trying to accomplish with it.

Here is an example of where JavaScript is placed within the <HEAD> tag

<head>
<title>My First JavaScript</title>

YOUR JAVASCRIPT HERE

-->

</script>

</head>

Some older versions of web browsers do not work with JavaScript. We hide the script from these browsers by enclosing the script within the comment tags .

Here is an example of a very simple JavaScript

Example #1

Example #1 used a method called alert to open an alert box with a message that can be defined by the developer. Here is the JavaScript used to make it happen.

<script>
<!--

alert("This is my first JavaScript, please be kind.")

-->
</script>

This method is simply alert. The information in the brackets is called a string. This string is referred to as an argument for the alert method.

Here is another example using a method called prompt.

Example #2

Here is the JavaScript for Example #2

<script>
<!--

prompt("What is your name.", "Type your name here")

-->
</script>

This method is prompt. Unlike the alert method, there are two arguments for the prompt method. The first is the string that asks the question. The second string is the default text to appear within the input box.

Variables
Variables are used to hold information. They are essentially containers into which we may define the content or change the content as we see fit. Variables can contain numbers or letters (strings). Strings must always be surronded by quotation marks. Either single or double will do.

Example #3

alert(x*y)

-->
</script>

We first declare the variable x as being equal to 5 and the variable y being equal to 6. The alert method is then used to show the result of multiplying the two variables. In this case, each variable holds numerical information.

Let's look at an example using strings within the variables instead of numbers.

Example #4

firstName=prompt("What is your first name?","")
lastName=prompt("What is your last name?","")

fullName = firstName + " " + lastName

alert(fullName)

-->
</script>

We first declare two varibles. One for each part of the name. The value of each of these variables is determined by what the user enters when prompted for their information. The variable fullName is determined by putting both strings together. Concatenating is the term used for combining strings. In example 4, a blank space is concatenated between the two variables. This is done so that there will be a physical space between the first and last name. Finally, we use the alert method to display the variable fullName, which is now the first and last name of the user.

Welcoming the User
So up to now, we have developed the ability to do a simple calculation and query the user for some basic information. How can we use this information to impact our HTML document though?

Example #5

The alert that showed the fullName variable has been removed. The above script was added into the body of our HTML document. The method writeln is a method of the document object. The alert and prompt are methods of the window object. Since window is the default top object, we did not have to reference it as such. We could have just as easily stated window.alert("Hi There"). If this script occurs between <B> </B> tags, the text written by writeln will be bold. As such, all formatting that can be done with regular HTML can be applied to what is written by the writeln method. Below is the full source HTML code from an HTML document similiar to example 5.

<html>
<head>
<title>Example 5</title>
<script>
<!--
var firstName = ""
var lastName = ""

firstName=prompt("What is your first name?","")
lastName=prompt("What is your last name?","")

fullName = firstName + " " + lastName

-->
</script>
</head>

<body bgcolor="#9999FF">
<b>JavaScript Example #5</b>
<div align="center">
<font size="6">
<script>

</script>
</font>

</div>
</body>
</html>

Learning More
If this has got you excited, here is how you can learn more:

If you see something you like on a site, view the source and see if you can use it
Take this full blown tutorial courtesy of Web Monkey - Thau's JavaScript Tutorial.

I highly recommend Thau's excellent tutorial.

Conclusion
As stated above, JavaScript is a full featured programming language and is capable of a great many things. A caveat to JavaScript is that it does not work the same way on all browsers, or even on different versions of the same browser. As it is with all web development, ensure you thoroughly test your work on all the paltforms and browsers that you intend your audience to be using.

created: 2006-11-05