Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Simple Program: Displaying a Line of Text in a Web Page

Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Introduction to Scripting

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Simple Program: Displaying a Line of Text in a Web Page

JavaScript uses notations that may appear strange to nonprogrammers. We begin by considering a simple script (or program) that displays the text "Welcome to JavaScript Programming!" in the body of an XHTML document.

Simple Program: Displaying a Line of Text in a Web Page

 

JavaScript uses notations that may appear strange to nonprogrammers. We begin by considering a simple script (or program) that displays the text "Welcome to JavaScript Programming!" in the body of an XHTML document. All major web browsers contain JavaScript interpreters, which process the commands written in JavaScript. The Java-Script code and its output in Internet Explorer are shown in Fig. 6.2.

 

This program illustrates several important JavaScript features. We consider each line of the XHTML document and script in detail. As in the preceding chapters, we have given each XHTML document line numbers for the reader’s convenience; the line numbers are not part of the XHTML document or of the JavaScript programs. Lines 12–13 do the “real work” of the script, namely, displaying the phrase Welcome to JavaScript Programming! in the web page.

 

Line 8 indicates the beginning of the <head> section of the XHTML document. For the moment, the JavaScript code we write will appear in the <head> section. The browser interprets the contents of the <head> section first, so the JavaScript programs we write there execute before the <body> of the XHTML document displays. In later chapters on JavaScript and in the chapters on dynamic HTML, we illustrate inline scripting, in which JavaScript code is written in the <body> of an XHTML document.

 

    <?xml version = "1.0" encoding = "utf-8"?>

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

    <!-- Fig. 6.2: welcome.html -->

 

    <!-- Displaying a line of text. -->

 

    <html xmlns = "http://www.w3.org/1999/xhtml">

 

    <head>

 

    <title>A First Program in JavaScript</title>

 

      <script type = "text/javascript">

      <!--

 

      document.writeln(

      "<h1>Welcome to JavaScript Programming!</h1>" );

      // -->

 

      </script>

 

      </head><body></body>

 

</html>


Fig. 6.2 | Displaying a line of text.

 

Line 10 uses the <script> tag to indicate to the browser that the text which follows is part of a script. The type attribute specifies the type of file as well as the scripting lan-guage used in the script—in this case, a text file written in javascript. Both Internet Explorer and Firefox use JavaScript as the default scripting language.

 

Line 11 contains the XHTML opening comment tag <!--. Some older web browsers do not support scripting. In such browsers, the actual text of a script often will display in the web page. To prevent this from happening, many script programmers enclose the script code in an XHTML comment, so that browsers that do not support scripts will simply ignore the script. The syntax used is as follows:

 

<script type = "text/javascript"> <!--

script code here

 

// --> </script>

 

When a browser that does not support scripts encounters the preceding code, it ignores the <script> and </script> tags and the script code in the XHTML comment. Browsers that do support scripting will interpret the JavaScript code as expected. [Note: Some browsers require the JavaScript single-line comment // (see Section 6.4 for an explana-tion) before the ending XHTML comment delimiter (-->) to interpret the script properly. The opening HTML comment tag (<!--) also serves as a single line comment delimiter in JavaScript, therefore it does not need to be commented.]

Lines 12–13 instruct the browser’s JavaScript interpreter to perform an action, namely, to display in the web page the string of characters contained between the double quotation (") marks. A string is sometimes called a character string, a message or a string literal. We refer to characters between double quotation marks as strings. Individual white-space characters between words in a string are not ignored by the browser. However, if consecutive spaces appear in a string, browsers condense them to a single space. Also, in most cases, browsers ignore leading white-space characters (i.e., white space at the begin-ning of a string).

Lines 12–13 use the browser’s document object, which represents the XHTML doc-ument the browser is currently displaying. The document object allows you to specify text to display in the XHTML document. The browser contains a complete set of objects that allow script programmers to access and manipulate every element of an XHTML docu-ment. In the next several chapters, we overview some of these objects as we discuss the Document Object Model (DOM).

An object resides in the computer’s memory and contains information used by the script. The term object normally implies that attributes (data) and behaviors (methods) are associated with the object. The object’s methods use the attributes to perform useful actions for the client of the object (i.e., the script that calls the methods). A method may require additional information (arguments) to perform its action; this information is enclosed in parentheses after the name of the method in the script. In lines 12–13, we call the document object’s writeln method to write a line of XHTML markup in the XHTML document. The parentheses following the method name writeln contain the one argu-ment that method writeln requires (in this case, the string of XHTML that the browser is to display). Method writeln instructs the browser to display the argument string. If the string contains XHTML elements, the browser interprets these elements and renders them on the screen. In this example, the browser displays the phrase Welcome to JavaScript Programming! as an h1-level XHTML heading, because the phrase is enclosed in an h1 element.

 

The code elements in lines 12–13, including document.writeln, its argument in the parentheses (the string) and the semicolon (;), together are called a statement. Every state ment ends with a semicolon (also known as the statement terminator), although this prac-tice is not required by JavaScript. Line 15 indicates the end of the script.

The </head> tag in line 16 indicates the end of the <head> section. Also in line 16, the tags <body> and </body> specify that this XHTML document has an empty body. Line 17 indicates the end of this XHTML document.

 

We are now ready to view our XHTML document in a web browser—open it in Internet Explorer or Firefox. If the script contains no syntax errors, it should produce the output shown in Fig. 6.2.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.