JavaScript 101: Writing Your First Script

Article
05/23/2005

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.

Comments

Anonymous
July 13, 2005
The comment has been removed
Anonymous
July 13, 2005
The comment has been removed
Anonymous
July 13, 2005
The comment has been removed
Anonymous
July 13, 2005
The comment has been removed
Anonymous
July 13, 2005
The comment has been removed
Anonymous
July 13, 2005
The comment has been removed
Anonymous
July 13, 2005
The comment has been removed
Anonymous
July 13, 2005
The comment has been removed
Anonymous
July 13, 2005
The comment has been removed
Anonymous
July 13, 2005
The comment has been removed
Anonymous
July 14, 2005
The comment has been removed
Anonymous
July 14, 2005
The comment has been removed
Anonymous
October 14, 2005
全球最流行礼物---<A HREF="http://www.lovemodo.com" TARGET=_blank>爱情魔豆魔蛋批发销售代理公司网站</A>
Anonymous
May 08, 2006
Good design!
[url=http://anukdciw.com/amrp/ezls.html]My homepage[/url] | [url=http://lqmwgjhh.com/eqjs/yfsu.html]Cool site[/url]
Anonymous
May 08, 2006
Good design!
[url=http://anukdciw.com/amrp/ezls.html]My homepage[/url] | [url=http://lqmwgjhh.com/eqjs/yfsu.html]Cool site[/url]
Anonymous
June 02, 2006
[url=http://www.hpbq.com]水晶批发公司[/url]
[url=http://www.mo-jie-gou.com]膜结构专家-苏州景观膜结构[/url]
[url=http://www.njtong.com]南京生活消费美食娱乐资讯平台[/url]
Anonymous
June 28, 2006
Thank you!
[url=http://xbpzsxhm.com/tnog/czwe.html]My homepage[/url] | [url=http://yhiqwafm.com/aijw/hiup.html]Cool site[/url]
Anonymous
July 02, 2006
Good design!
[url=http://xywspnzr.com/pwqf/qoxf.html]My homepage[/url] | [url=http://rotrweui.com/gnzx/wdis.html]Cool site[/url]
Anonymous
July 06, 2006
Nice site!
[url=http://concerta6.coz.in/]order concerta[/url] | [url=http://ativan8.coz.in/]generic ativan[/url] | [url=http://meridia7.coz.in/]buy meridia[/url] | [url=http://bontril3.coz.in/]buy bontril[/url] | [url=http://vicodin1.coz.in/]vicodin online[/url]
Anonymous
July 06, 2006
Nice site!
[url=http://valium7.coz.in/]buy valium online[/url] | [url=http://ambien7.coz.in/]cheap ambien[/url] | [url=http://tramadol1.coz.in/]buy tramadol[/url] | [url=http://hydrocodone4.coz.in/]buy hydrocodone online[/url]
Anonymous
July 14, 2006
I just don't have anything to say , but shrug. So it goes. Not much on my mind recently. I can't be bothered with anything recently.
Anonymous
July 18, 2006
I haven't been up to anything recently, but so it goes. Such is life. What can I say? Pretty much not much exciting going on to speak of. I haven't gotten much done lately, but I don't care.
Anonymous
July 18, 2006
I haven't been up to much today. I've just been letting everything happen without me. Basically nothing seems worth bothering with. I've just been hanging out doing nothing. I just don't have anything to say right now. More or less nothing happening.
Anonymous
July 18, 2006
I just don't have anything to say , but shrug. So it goes. Not much on my mind recently. I can't be bothered with anything recently.
Anonymous
July 18, 2006
I've just been staying at home not getting anything done. I guess it doesn't bother me. Shrug. I haven't been up to anything. I haven't gotten much done today.
Anonymous
July 18, 2006
My life's been pretty dull recently. Shrug. My mind is like a void. I haven't gotten anything done lately. I can't be bothered with anything recently.
Anonymous
July 19, 2006
I haven't been up to anything today. I don't care. I've just been staying at home not getting anything done. Basically not much happening right now. Maybe tomorrow. I guess it doesn't bother me.
Anonymous
July 20, 2006
Basically nothing noteworthy happening right now, but eh. Today was a complete loss. I haven't been up to much recently. I've pretty much been doing nothing worth mentioning.
Anonymous
July 21, 2006
My life's been basically bland today. More or less nothing seems worth thinking about. My mind is like an empty room. I've more or less been doing nothing to speak of. Not much on my mind recently.
Anonymous
July 21, 2006
retty much nothing seems worth thinking about. My life's been completely dull , not that it matters. I've just been staying at home waiting for something to happen.
Anonymous
July 21, 2006
I haven't gotten anything done today. I feel like a fog, but what can I say? I've just been letting everything wash over me lately, not that it matters. Shrug.
Anonymous
July 21, 2006
My life's been basically bland today. More or less nothing seems worth thinking about. My mind is like an empty room. I've more or less been doing nothing to speak of. Not much on my mind recently.
Anonymous
July 21, 2006
I haven't been up to much today. I've just been letting everything happen without me. Basically nothing seems worth bothering with. I've just been hanging out doing nothing. I just don't have anything to say right now. More or less nothing happening.
Anonymous
July 22, 2006
Not much on my mind these days, but what can I say? It's not important. I just don't have much to say lately. I've just been letting everything pass me by recently, but eh.
Anonymous
July 23, 2006
I haven't gotten anything done recently. I've just been hanging out doing nothing. I haven't been up to anything these days, but it's not important. Today was a total loss.
Anonymous
July 23, 2006
I've just been staying at home not getting anything done. I guess it doesn't bother me. Shrug. I haven't been up to anything. I haven't gotten much done today.
Anonymous
July 24, 2006
I haven't been up to anything today. I can't be bothered with anything recently. Nothing seems worth thinking about. I haven't gotten anything done recently, but oh well. Not much noteworthy going on worth mentioning.
Anonymous
July 24, 2006
Not much on my mind lately. My life's been completely boring these days. I've just been hanging out not getting anything done. So it goes.
Anonymous
August 16, 2006
I didn't expect to see a javascripting tutorial on msdn. Thanks:)

I see a bunch of tutorials after this so I guess this marks the start of my trail...
Anonymous
September 22, 2006
Thank you!
[url=http://dlfjfegu.com/fbtw/uxus.html]My homepage[/url] | [url=http://ntqrlnef.com/ofop/scvv.html]Cool site[/url]
Anonymous
September 22, 2006
Well done!
<a href="http://dlfjfegu.com/fbtw/uxus.html">My homepage</a> | <a href="http://cpgjhulg.com/wdob/mkay.html">Please visit</a>
Anonymous
September 22, 2006
Good design!
http://dlfjfegu.com/fbtw/uxus.html | http://qkfojphl.com/fdkf/jsqc.html

Partager via

JavaScript 101: Writing Your First Script

Comments

Ressources supplémentaires