Lisa Wollin : JavaScript 101

JavaScript 101: Working with Events

lisawoll — Thu, 14 Jul 2005 01:50:00 GMT

It has been awhile since my last JavaScript 101 post. I apologize. I have a very lame excuse: I've been busy. But I'm back with the next installment: working with events.

Most JavaScript events are relatively simple and easy to use. For example, clicking on a button, an element, or a page. There are some more complex events that deal with data, but to keep this simple, I'll talk only about the ones that affect user interaction, such as onclick, onmouseover, onmouseout, and onfocus. There are, of course, many more events than this, but these four events seem to cover a majority of the uses that you will need ... at least to start with.

The Script

First, of course, you need a script, so here's a simple little script. All it does is display a message box. Just copy the code below, including the opening and closing <script> tags, and paste them into the HEAD section of a Web page.

<script language="javascript">
function ShowMessage(text)
{
    window.alert(text);
}
</script>

In order to call a script from an event, it must be inside a function, so the above script contains a function called "ShowMessage" that takes one argument, the text to be displayed.

Note As I mentioned in my last JavaScript 101 post, you can use IntelliSense in Code view in FrontPage to write your scripts.

The HTML

Second, you need to reference the function from an event inside of an element. I'll use a P element. Here's the HTML code that you need.

<p>Here is a sample paragraph 
with an event.</p>

Putting Them Both Together

Next, add to the P element a an event handler that calls the function. You can add it to any event, such as the onload event, but to make things simple, add it to the onclick event. Here's the code:

onclick="ShowMessage
('A little JavaScript fun!');"

Your P element should now look like the following code:

<p onclick="ShowMessage
('A little JavaScript fun!');">
Here is a sample paragraph with 
an event.</p>

And that's it. Save your page and display it in the browser. When you click on the text in the paragraph, the browser displays a message like the one in the following image.

What You've Learned

In this post you learned how to hook up a JavaScript function with an event handler for an HTML element. Now that you understand how to hook your scripts up to events to create user interaction, we can move onto writing more scripts. Next time, I'll talk about working with text—things like changing the text or HTML in an element, changing colors, formatting, etc. Until then, have fun!

JavaScript 101: Writing Your First Script

lisawoll — Mon, 23 May 2005 23:15:00 GMT

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.

Start a new page in FrontPage and switch to Code view. (You can also use the code window in Split view.)
In Code view, locate the closing </head> tag. (If you don't know HTML, there's never been a better time to learn. Check out the HTML tutorials on Office Online and HTML for Beginners on MSDN.)
Press Enter a couple times and position the Insertion Point (cursor) on one of the blank lines.
Copy the following code and paste it into FrontPage at the Insertion Point.
<script language="javascript"> window.status = "This is a sample for changing the text on the status bar." </script>
Save the page and preview it in a browser. Your page should look just like the following image (status bar text is circled in red to make it easy to locate).

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

To begin, start FrontPage and start a new page.
Switch to Code view.
Position the Insertion Point (cursor) before the closing </head> tag and press Enter a few times.
Move the Insertion Point up a couple lines and type "<s". As you type, a drop-down box, as shown in the following image, displays showing a list of elements that can be placed within the HEAD section of a Web page.

As you type, the highlighted element moves to "script"; at this point you can press the spacebar (or Enter or Tab) to insert the element into your Web page.
After you press the spacebar, you see a list of attributes that apply to the SCRIPT element. Type "langu"; again, as you type, the highlighted attribute changes from lang to language. (We need the language attribute to identify that we are using JavaScript.)
When the language attribute is highlighted, type an equals sign (=) and a double quote (").
Now you see a list of possible values for the language attribute. Type "j", and the highlighted value moves to "javascript".
Type a closing double quote (") and a closing angled bracket (>). FrontPage automatically inserts the closing </script> tag.
You should now have the following code in your Web page:
<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.

With the Insertion Point between the opening and closing <script> tags, press enter a couple times. Arrow up once so that your Insertion Point is on the line that is between the line that contains the opening script tag and the line that contains the closing script tag.
Type "window."; don't forget the period after the window. Once you press ".", FrontPage shows a drop-down list that contains all the properties, methods, and events related to the window object, as shown in the following image.
Type "st" and then press Tab. FrontPage inserts "status" into your script. Now your script should read: window.status
Press the space bar and type an opening quote.
Type "This text displays on the browser's status bar.", and then type a closing quote.

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:

Woohoo! You wrote your first scripts.
You learned how to use IntelliSense in FrontPage.
You learned how to create a JavaScript function.

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.

JavaScript 101: The JavaScript Object Model

lisawoll — Wed, 06 Apr 2005 07:41:00 GMT

If you talk to several different Web developers, each will probably see the JavaScript object model differently. To make it easiest, I'm going to split the JavaScript object model into two separate entities. One is the DOM, or Document Object Model, and the other is "everything else."

The DOM

Let's first start with the DOM. The DOM, also sometimes called the DHTML object model, is generally used to create dynamic HTML (DHTML). The DOM is made up of objects and members (by "members" I mean methods, properties, and events) that allow you to change the appearance of a Web page by using code. A drop-down menu is an example of using scripting with the DOM to manipulate the visible state of a DIV element. The following image shows the core objects in the DOM.

Periodically, I'll refer back to this image as I break down the different objects of the DOM. For now, just notice the hierarchical structure of the DOM.

Different browsers implement the DOM differently. For example, an object that you can access in one browser may not be available in another browser. The above diagram includes only core objects and not custom objects that are included only in one or a few browsers. For example, the Layer object only works in Netscape Navigator, and possibly Mozilla and Firefox by association, and not in Internet Explorer. By the same token, Internet Explorer may implement its own custom objects that are unavailable in non-Microsoft browsers. For this reason, if you want your scripts to run in all possible browsers, you should stick with the core objects and not use custom objects, which may make programming scripts easier but will cause problems for your users.

Scripting against objects or using methods, properties or events that are not implemented in all browsers causes a run-time scripting error, like the one shown in the following image, when displaying a page in a browser in which the object or member is not available.

You have probably seen similar error messages. Sometimes, the cause is that there is an error in the code, but most often, the programmer scripted against an object or member that isn't available in your browser.

Everything Else

Next, the "everything else" that I mentioned. Everything else includes objects to handle strings, numbers, and boolean values as well as mathematical functions and arrays. I generally consider these less "objects" and more as language conventions and built-in functions, but I'll explain that a bit later. For now, I'd like to focus on working with the DOM since those are the objects that most client-side JavaScript uses (although you can use the math functions to calculate numbers, which you might get from a Web form, but that's a subject that deserves its own post, so for now forget I mentioned it).

Working with the DOM

As I already said, the objects in the DOM are the objects that you would generally use to animate Web pages using client-side scripting. The main top-level object is the window object. All other objects are what are called "child" objects of this object because they exist as "children" of this object. This can be easier to understand if you think of the above diagram like a family tree. The window is the top-level "parent" object with "child" objects named document, event, history, location, navigator, and screen. The document object is a "child" object that is also a "parent" object because it has "child" objects, as does the form object.

The relationship between parent and child objects in an object model give the objects a structure that you can easily navigate, and understanding this structure helps you determine how to access child objects, which makes editing and writing scripts easier. You can work with most child objects of the window object directly without accessing them from the window object.

When you access individual objects within this hierarchical structure, you need to separate each object (and/or member) with a period (.). For example, the following code accesses the BODY element of the document object that is a child of the window object.

window.document.body

However, as I mentioned above, the document object is one of the child objects of the window object that you can access without first accessing the window object. So this code could also be written as shown in the following code.

document.body

Note You may have noticed that there isn't a body object in the object hierarchy shown in the image. This is correct. You'll also notice that I said that the code accesses the BODY "element" not the body object. The body in the above code is an accessor property that returns an element object. (If you've forgotten what an accessor property is, see my previous post JavaScript and OOP.)

All HTML elements (with the exception of the elements that have specific objects in the object model, like the STYLE and FORM elements) use the element object. However, not all elements have properties that you can use to access them directly. (In fact, most do not.) The BODY element just happens to be one of the few that does. I'll explain in a future post how to access all the other elements.

Whew! This was a lot of general, overview-type stuff to take in in one sitting, and you might be thinking what on earth you're going to do with all of it. Well, I don't expect it to gel completely just yet, but soon it will all make sense and you'll be writing your own scripts like a pro.

For now, here's what you learned today about JavaScript:

JavaScript has objects that you can use to animate Web pages (DOM) as well as objects that you can use to calculate numbers, handle strings, and work with arrays ("everything else").
The DOM contains objects that you can use to access features in a browser and elements in a Web page.
You use the DOM objects to create dynamic HTML pages.
The DOM has a hierarchical structure that is similar to a family tree and is made up of "parent" and "child" objects.
Understanding the hierarchical structure of the DOM helps you know how to access the appropriate child objects and makes writing scripts easier.
In script, you need to separate objects in the hierarchical structure with a period (.).

In my next post, we'll write a few simple scripts and I'll show you how IntelliSense in FrontPage can help you write your scripts.

JavaScript 101: JavaScript and OOP

lisawoll — Wed, 23 Mar 2005 07:25:00 GMT

As I mentioned in the previous post, JavaScript 101: An Introduction, JavaScript is an Object Oriented Programming (OOP) language, and as such, it is comprised of objects. A bunch of objects bundled together is called an object model, also called an application programming interface (API). Each object in an object model has characteristics that describe it — properties, actions that you can take against it — methods, and actions that happen in response to other actions — events.

JavaScript is admittedly not as robust as most compiled OOP languages; the object model is simple by comparison, but in order to write, modify, or even reuse someone else's JavaScript code, you should understand the basics of an object model.

Properties — Properties describe the characteristics of an object. To use the car analogy that I used in the previous post, a car has characteristics, or properties, like make, model, and color. Often, properties have a single value. For example the make property of the car object might have a value of "Dodge"; the model property might have a value of "Durango"; and the color property might have a value of "Red." Properties can also be objects. These are called "accessor properties" because they access another object. In our car analogy, the car object might have a steeringWheel property that accesses a steeringWheel object, and the steeringWheel object may have its own set of properties, methods, and events.

Methods — Methods are actions that you can take against an object. To continue the car analogy, actions that you can perform with a car might be start, drive, and get a tune up. Some methods return values; other methods require values passed into them. For example, the start method of the car object might return a true or false (boolean value), and the tuneup method might require passing in a date for when the tune up occurs. The values that methods return are called return values; values passed into methods are called arguments.

Note The term "parameters" is also often used to refer to the values passed into methods. The actual definitions of these two terms differ somewhat, but a complete discussion of these differences are beyond the scope of this discussion. I'll explain these terms a bit later.

Events — Events are actions that happen in response to other actions. The car analogy works here, also. For example, the car object might have an event named die to handle the possibility of the engine quitting unexpectedly, or it may have a crash event to handle the possibility if the car is involved in an accident.

Collections — Another part of an object model is collections. Collections are comprised of one or more instances, or copies, of the same object. For example, in the car analogy, a car object might have a tires collection that has five instances of the tire object (with one tire object having the isSpare property set to true).

Don't worry if this all seems confusing. I'll explain properties, methods, events, and collections a bit more when I discuss specific objects in the JavaScript object model. However, before I describe the objects in the JavaScript object model, there are a few things you need to understand first. I will describe some of these in greater detail later, but you will need at least a general understanding of these before moving onto the specifics of the JavaScript object model.

Variables — In programming, variables are considered temporary storage. The can represent objects or data, such as strings or numbers.

Data types — Simply put, data type indicates the type of data in a variable. The three basic data types in JavaScript are strings, numbers, and booleans. String variables contain text, number variables contain ... well ... numbers, and boolean variables indicate true/false, on/off, and yes/no conditions.

Case sensitivity — JavaScript is case sensitive. This means that JavaScript considers the word "doc" and the word "Doc" as two different words and not the same word.

Arrays — Arrays are variables that contain multiple values of the same type. For example, an array of numbers could contain the values 1, 3, 45, 50, and 69 all within the same variable name. JavaScript programmers frequently use arrays to store multiple values.

So the things you learned about JavaScript in this post are

The JavaScript object model (or application programming interface) is comprised of objects, collections, properties, methods, and events.
Properties describe characteristics of an object.
Methods perform actions against an object.
Events handle actions that are performed against an object.
Variables are temporary storage.
Data types indicate the type of data contained in variables.
JavaScript is case sensitive.
Arrays contain multiple values of the same type.

This is a lot of information, but I think we're through with the basics. Next post, I'll diagram the specific objects in the JavaScript object model.

JavaScript 101: An Introduction

lisawoll — Wed, 16 Mar 2005 17:30:00 GMT

Many visitors to the MSDN FrontPage developer portal are unfamiliar with programming, so I decided that the best way to help non-developers understand our developer content is to provide education. This is the first installment, and its purpose is to teach JavaScript to the non-developer. The JavaScript 101 series is not designed for developers, as most of our developer content is, so it may be far too simple for a seasoned JavaScript developer. However, if you are either new to JavaScript or completely unfamiliar with JavaScript, this series is for you. For a list of all the posts in this series, scroll down the page and click JavaScript 101 under Post Categories.

Before I start on the programming end of JavaScript, I wanted to explain the purpose of JavaScript and a bit of the background. Last summer, we published an article titled Introduction to Web Development that described the various languages and technologies that Web developers may encounter and need to use. After a description of what programming languages are and how they are used on the Internet, the article gave the following description for JavaScript:

JavaScript is an interpreted scripting language commonly used on the Internet for creating Web pages that respond to user actions, such as when a user moves a mouse pointer over an image or clicks a form button. Combined with HTML and CSS, JavaScript allows you to create Dynamic HTML pages.
JavaScript is generally used for client-side scripting; as a result, users can easily view JavaScript code along with the HTML code in a page. Although it may be used for server-side scripting, JavaScript works best for visual animation (such as changing an image when a user moves the mouse pointer over it) or for validating form fields.

Various browsers may implement the JavaScript scripting objects differently, but most popular browsers support JavaScript.

The biggest disadvantage of JavaScript is that users can turn it off in the browser, which makes pages that use it not function as expected.

Netscape developed the JavaScript programming language. JScript is the Microsoft implementation of ECMAScript, as defined by the specification of Ecma International. Both JavaScript and JScript are ECMAScript-compliant languages.

As the article mentions, there are basically two types of programming languages: compiled and interpreted. Most programs have .exe files. An .exe file is where the code that runs a program lives, and usually you can double-click an .exe file to start a program. (For example, if you use Windows Explorer to locate FPage.exe and double-click it, FrontPage starts.) Compiled programming languages require a language compiler to create the .exe files. Interpreted programming languages aren't compiled into .exe files but require an interpreter to understand the code.

Much like you may need an human interpreter to understand a natural language (such as Danish or Swahili), browsers need a JavaScript interpreter to understand JavaScript code. As the preceding quote mentions, JavaScript is an interpreted language and a JavaScript interpreter lives inside most browsers, so when you write JavaScript code, you don't need to buy an interpreter to run the code. Instead, the interpreter sees the code and in effect tells the browser what to do with it. Some browsers don't understand JavaScript code. For example, older browsers that were developed before JavaScript was invented obviously wouldn't support it. Plus, most browsers allow the user to turn off JavaScript. In both of these cases, the user wouldn't receive an error; your code just doesn't run.

Because JavaScript usually runs in a browser, it's also called client-side scripting. You can use other languages for client-side scripting, but no client-side language is as universally accepted as JavaScript or understood in more browsers. This is why most Web developers use JavaScript to animate their Web pages using Dynamic HTML (DHTML). DHTML allows you to respond to the actions of your users; thus the term "dynamic." For example, when a user moves her mouse over an element on a page, you may want to perform an action, such as displaying an element that was previously hidden (as is usually the case with drop-down menus). Or when a user clicks the Submit button on a form, you may want to verify that he has entered all the necessary information in the fields.

JavaScript is also termed an object-oriented programming (OOP) language. OOP is a programming paradigm that differs from traditional programming in that it separates elements of an application into discrete elements. I'll explain OOP a little bit at a time, especially as it relates to JavaScript, because it can be quite confusing when taken as a whole; however, the simplest explanation is this: OOP uses objects, and objects are basically things — specifically, things as they relate to an application. For example, think of an object, or thing, that you use every day: your car. Cars have values that describe them, such as make/model and color, and you can perform certain tasks with them, like start and drive them.

Before you begin pulling your hair out and yelling "I don't care about OOP or that JavaScript is an interpreted language; all I want to do is add this little bit of code to my page," let me assure you that this information is very important. The first JavaScript book I ever read never made one mention of OOP. I felt like I had watched a game and missed the winning play. Without this information you may be able to incorporate scripts that others have written into your page, but you will never be able to troubleshoot the code, and I promise you that you will at some point need to do that. So please bear with me. This introduction (and the one or two topics that follow) is critical to helping you understand what you need to know to not only incorporate scripts into your page but also write a few scripts of your own. However, I promise that this info won't be book-length. I'll include only the information you need to be able to move forward. Promise!

So the things you learned about JavaScript in this post are

JavaScript is an interpreted programming language.
JavaScript is a scripting language that you can use for client-side scripting.
You can use JavaScript to animate Web pages using DHTML.
JavaScript allows you to respond to user actions.
JavaScript is an OOP (object-oriented programming) language.

Next time I'll talk a little more about JavaScript as an OOP language.