Code Execution
May 3, 2002
The browser reads the page from top to bottom, so the order in which code
executes depends on the order of the script blocks. (Also note that it's not
just the browser that can read our code, the user of our web sites can view
our code too so it's not a good idea to put anything secret or sensitive in
there.) There are three script blocks in this next example:
<head>
<script language="JavaScript">
alert("First script Block");
alert("First script Block - Second Line");
</script>
</head>
<body>
<H1>Test Page</H1>
<script language="JavaScript">
alert("Second script Block");
</script>
<P>Some more HTML</P>
<script language="JavaScript">
alert("Third script Block");
function doSomething()
{
alert("Function in Third script Block");
}
</script>
</body>
</html>
If you try it out, you'll see that the alert in the first script block appears
first displaying the message First script
Block, followed by the next alert command in the second line displaying
the message First script Block - Second Line.
The interpreter continues down the page and comes to the second script block,
where the alert function displays Second script Block, and the third script block
following it with the alert statement that displays Third script Block. Although there's another
alert
command inside the function a few lines down, it doesn't execute and display
the message. This is because it's inside a function (function
doSomething)
and code inside functions will only execute when they're called.
An Aside about Functions
We'll be talking about functions in much more depth in Chapter 3, but we should
introduce them here because you can't get very far in JavaScript without an
understanding of functions. Functions are blocks of code, surrounded by curly
braces, which you create to perform a helpful task. JavaScript contains functions
that are available for us to use and perform tasks like displaying a message
to the user.
We can also create our own functions, which is what we did in the previous
code block. Let's say we create some code that works out what browser the user
has. We'd probably want to use it again and again in different situations. While
we could cut and paste code blocks wherever we wanted to use them, this approach
can make the code excessively long; if you want the same piece of code three
or four times within one page it'll also get pretty hard to decipher and debug.
So instead we can wrap the browser-checking
functionality into a function and then pass in any information that the function
needs in order to work using parameters.
A function can also return a value to the code that called the function into
action originally.
To call the function you simply write its name, but you can't do that, as
you might expect, until the script has created it. We can call it in this script
by adding it to the third script block like this:
<script language="JavaScript">
alert("Third script Block");
function doSomething()
{
alert("Function in Third script Block");
}
//call the function doSomething
doSomething();
</script>
</body>
</html>
So far in this chapter we've looked at the pros and cons of the JavaScript
language, some of the syntax rules, learned about some of the main components
of the language, albeit briefly, and run a few JavaScript scripts. We've covered
quite a lot of distance. Before we move on to a more detailed examination of
the JavaScript language in the next chapter, however, we should talk about something
key to successful JavaScript development: objects.
JavaScript in a Web Page
Practical JavaScript for the Usable Web
Objects
|
