You can arm yourself with all the background information that you want, but the easiest way to learn JavaScript is to just jump in and start writing code. So let's start with something simple for your first script.
The window object contains all the other objects in the DOM, plus properties, methods, and events for the browser window. A common task that people want to do is specify the text for the status bar. Here's a simple bit of code that does this.
window.status = "This is a sample for changing the text on the status bar."
This example is very simple, but simple is a great way to start.
Now that you have the code, what do you do with it? This is a great beginner question. There are two ways to insert JavaScript code into your pages. (1) You can insert raw JavaScript code into a <script> tag in the HEAD section of a page. (2) You can place the code in a function and put the function in a <script> tag in the HEAD section of a page, and then add an event handler to call the function.
(1) insert raw JavaScript code
For now, let's stick with the simplicity of the first option. Use the following steps to add this code to a page.
<script language="javascript">window.status = "This is a sample for changing the text on the status bar."</script>
The second way to insert a script (i.e., place the code a function and put the function in a <script> tag in the HEAD section of a page, and then add an event handler to call the function.) requires a bit more work, so let's split it up into three separate tasks
(2) place the code in a function
Put simply, a function is a section of code that runs separately from code around it. Essentially, functions are methods that you create yourself to perform some action or series of actions. Some functions return values; other functions require values passed into them. The values that functions return are called return values; values passed into functions are called arguments.
The structure, or syntax, of a function is always the same: the function keyword identifies that what follows is a function, the text that follows the function keyword identifies the name of the function, the name of the function is followed by opening and closing parentheses (which may or may not contain arguments), and the code that applies to the function appears inside of opening and closing curly braces.
Here's a simple diagram of the syntax of a function:
For those of you who prefer to cut and paste, here's a code version of the above.
function scriptName() { //Code goes here }
Using the example above, your function might look something like the following code.
<script language="javascript"> function changeStatus() { window.status = "This is a sample for changing the text on the status bar." } </script>
When you place JavaScript code in functions, you can call the functions from event handlers. Event handlers execute code based on certain events that occur within the browser. I'll talk more about events and event handlers in my next post; for now, I want to show you how IntelliSense in FrontPage can help you write scripts.
Using IntelliSense in FrontPage
IntelliSense provides cues to options (or in this case objects, methods, properties, and events) that may be available. Let's go back to the code that we used earlier and create this again in FrontPage (without cutting and pasting the code).
Using IntelliSense to insert HTML Elements
<script language="javascript"></script>
When you use IntelliSense to insert HTML elements, FrontPage places the Insertion Point between the opening and closing tags. You can then type text or, in this case, code between the tags.
Using IntelliSense to write JavaScript code
Now that you have an opening and closing script tag, you can write your script code.
window.status
The only thing to understand about using IntelliSense for writing scripts is that IntelliSense doesn't work when you are working with variables because FrontPage doesn't know which object a variable represents. I'll tell you more about declaring and working with variables a bit later. For now, try using IntelliSense to insert your own simple scripts. Here are a few to get you started:
window.alert("here's a message");
window.resizeTo(640,480);
window.moveTo(0,0);
These are just a few simple scripts; in a future post, I'll help you understand how to write your own more complex scripts.
Here's what you learned today:
In my next post, I'll tell you more about events and how to connect a JavaScript function to an event on a Web page. For now, have fun.