JavaScript Intro

Introduction to JavaScript

JavaScript is a tool for creating conditional (if...then) content. Using JavaScript, you can create a page such that

If we detect a browser that cannot read CSS, then we can present a page that does not rely on CSS, or at least warn the user that the page may not render correctly.
If the user puts the cursor over a category on our menu, then a sub-menu can drop down.
If the user starts to fill out a form incorrectly, then we can warn the user before the user submits the form. (We have not covered web forms yet. With JavaScript, we have a means for processing forms, so we will cover them in this part of the course).
If the user has visited our site before, then we can provide them with some personalized content. (For this, we use "cookies," which also will be explained in this part of the course).

In addition, in this course we will use JavaScript to illustrate how to program online calculators, search functions, and database query engines. However, in a real web site, it might be better to perform this function using programs on the server instead of JavaScript code.

Getting Ready

When you write scripts, you will want to debug them. You need to set your browser to do that. In Internet Explorer, go to tools/Internet options. Pick the "advanced" tab, and then check the box next to "Display a notification about every script error."

As with CSS, it is good practice to write your JavaScript code on a separate page from your HTML page. If you have not already done so, create a subdirectory called scripts under htdocs. From notepad, save as type "all files" a file called myjs.js under this scripts subdirectory.

Now, open up another copy of notepad for your HTML page. Save it as firstscript.html.

Your First Scripts

Here is some JavaScript code to try, along with the HTML page that uses the code:

/* This is the page that will be saved as myjs.js */
/* 1. This is our first function. All it does is say hello */
function sayhello(){
document.write ("Hello, world.<p>");
}

/* 2. This function detects the user's browser version and prints it out */
function browserReport(){
browser_version = navigator.appVersion;
document.write("Your browser is " + browser_version + "<p>");
}

/* 3. This function reacts when the user presses a button */
function alertUser(){
alert("You got me")
}

</script> </script> </script>

I will explain what is going on. First, however, copy the script page and copy the HTML page. Save the pages, and make sure that they work. When you view the HTML page through your browser, you should see some of the output of the script page. You also should see a button, and when you click the button you should see the alert message.

Note some similarities between JavaScript and CSS.

We can store scripts on a separate page, just as we can store style codes on a separate page. The user only sees the HTML page, and the scripts are executed there.
To enable the HTML page to locate the scripts, we use a tag inside the HTML header that shows where to find the script file.
In JavaScript, comments start with /* and end with */. This is the same as CSS.
We use {} to enclose script functions, just as we use them to enclose style rules in CSS
We use ; to separate lines within the {}.

However, there are some important differences between JavaScript and CSS.

We use a different syntax to launch scripts. In the example, there are two places where we call script functions by embedding them inside <script></script> tags. This is sort of like using <div></div> in CSS. However, this is not typical for the way that we use JavaScript.

The typical way that we invoke (i.e., start or launch) JavaScript is by using an on...event. For example, we use the event onClick to invoke the function alertUser().
Script functions can be much longer and more involved than CSS style codes. The short functions that we used in our first scripts are not typical.
Scripts change the content for the user. Style rules only change the look of content.