Online Documentation Server
 ПОИСК
ods.com.ua Web
 КАТЕГОРИИ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ПОДПИСКА

 О КОПИРАЙТАХ
Вся предоставленная на этом сервере информация собрана нами из разных источников. Если Вам кажется, что публикация каких-то документов нарушает чьи-либо авторские права, сообщите нам об этом.




Previous Table of Contents Next

Chapter 4
JavaScript and HTML

Page Layout

Layout refers to transforming the plain text directives of HTML into graphical display on your computer. Generally speaking, layout is done sequentially. The browser starts from the top of the document and works its way down to the bottom. It transforms the plain HTML tags and text to a graphical interface. The browser recognizes many tags that instruct it how to perform the layout. There are tags that refer to images, tags that refer to forms, and many other tags. Obviously, the layout also occurs from left to right, so you may put an entire page on one line.

The browser deals with JavaScript code like it handles HTML code, scanning the source from left to right and from top to bottom. JavaScript has “tags” of its own by which it instructs the browser and determines the layout. However, JavaScript is not read exactly like HTML. In HTML, the browser acts immediately according to the elements it recognizes. Not all JavaScript code refers to actions that take place while the page is loading. Some parts are just kept in memory until they are called. For instance, if you write a function and do not call it, the browser does not do anything with it. This part of the script stays in memory, and can be invoked later.

Command Blocks

Command blocks are units of JavaScript commands. Although a command block acts exactly like a single one, it can actually perform many tasks. Commands are read and interpreted in the same way the browser interprets commands in the main scripting zone. Blocks are used in functions, loops, if-else statements, and many other JavaScript statements. They allow you to reference more than one command in a single statement. A command block looks like this:

{
  first command
  second command
  third command
  .
  .
  .
}

All commands are enclosed in curly braces ({ and }). In order to remember the closing brace after the set, it is a good practice to type both braces first, and only then add the commands in between. Command blocks can also be interleaved (nested). Take a look at the following structure:

{
  first command of main block
  second command of main block
  third command of main block
  .
  .
  .
  {
first command of nested block
second command of nested block
third command of nested block
.
.
.
  }
  .
  .
  .
}

As shown in this example, it is a common practice to indent each nested block, according to its nesting level. The JavaScript interpreter is not influenced by these spaces (or tabs).

Functions

Functions allow you to group commonly used code into a compact unit that can be used repeatedly. Functions are a fundamental element in almost all programs. Each function consists of a set of JavaScript statements which are executed as if they were a separate program.

You define a function somewhere in the script, and call it later. Take a look at the syntax of a function:

function functionName([parameters]) {
  [statements]
}

The name of the function must be a set of letters, digits, and underscores (_), provided that the first character of the name is not a digit. In order to call the function (and execute the statements located in it), you need to specify its name. Example 4-1 shows how to define and invoke a function:

<HTML>
<HEAD>
<TITLE>Calling a function</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

printText()
function printText() {
  document.write("I am now inside the function.<BR>")
}

// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Example 4-1 (ex4-1.htm). A simple function with one statement.

The function printText() includes only one command (the document.write() method). When the function is called, all the command function blocks are interpreted. The output of this script is the same as the output of a script containing only the printing line inside the function; its output is shown in Example 4-1.


Example 4-1.  HTML content generated by a function.

Defining and Calling a Function

When the browser interprets scripts placed within <SCRIPT> tags, it stores functions in memory until they are called. You can call a function from within a script tag or from an event handler. Defining a function consists of first naming it and then assigning some commands to it, as shown in Example 4-1. It is important to understand the difference between defining a function and calling it, because it influences the way you build your document.

This often reminds me of the following situation. Mike tells Joe that he should take an umbrella with him and also provides him with instructions on how to use it. This is similar to the definition of a function. Now, Joe knows exactly how to use the umbrella, and he is prepared to do so. Two hours later, it begins to rain. The falling rain reminds Joe that he should use the umbrella, in the same manner as Mike taught him. The falling rain resembles the function call. Until now, the function was stored in memory, but it was not called, and therefore it was not executed. Just as certain events trigger a function call, rain calls for an umbrella. If someone instructed Joe to use the umbrella, as Mike taught him earlier of course, that would be like calling the function from within another script, rather than from an event handler.

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us