Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Modifying Our First Program - JavaScript(JS)

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 |

Modifying Our First Program - JavaScript(JS)

This section continues our introduction to JavaScript programming with two examples that modify the example in Fig. 6.2.

Modifying Our First Program

 

This section continues our introduction to JavaScript programming with two examples that modify the example in Fig. 6.2.


 

Displaying a Line of Colored Text

A script can display Welcome to JavaScript Programming! several ways. Figure 6.3 uses two JavaScript statements to produce one line of text in the XHTML document. This ex-ample also displays the text in a different color, using the CSS color property.

 

Most of this XHTML document is identical to Fig. 6.2, so we concentrate only on lines 12–14 of Fig. 6.3, which display one line of text in the XHTML document. The first statement uses document method write to display a string. Unlike writeln, write does

    <?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.3: welcome2.html -->

 

    <!-- Printing one line with multiple statements. -->

 

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

 

    <head>

 

    <title>Printing a Line with Multiple Statements</title>

 

      <script type = "text/javascript">

      <!--

 

      document.write( "<h1 style = \"color: magenta\">" );

 

      document.write( "Welcome to JavaScript " +

      "Programming!</h1>" );

      // -->

 

      </script>

 

      </head><body></body>

 

</html>


Fig. 6.3 | Printing one line with separate statements.

 

not position the output cursor in the XHTML document at the beginning of the next line after writing its argument. [Note: The output cursor keeps track of where the next character appears in the XHTML document, not where the next character appears in the web page as rendered by the browser.] The next character written in the XHTML document appears immediately after the last character written with write. Thus, when lines 13–14 execute, the first character written, “W,” appears immediately after the last character displayed with write (the > character inside the right double quote in line 12). Each write or writeln statement resumes writing characters where the last write or writeln statement stopped writing characters. So, after a writeln statement, the next output appears on the beginning of the next line. In effect, the two statements in lines 12–14 result in one line of XHTML text. Remember that statements in JavaScript are separated by semicolons (;). Therefore, lines 13–14 represent only one complete statement. JavaScript allows large statements to be split over many lines. However, you cannot split a statement in the middle of a string. The + operator (called the “concatenation operator” when used in this manner) in line 13 joins two strings together and is explained in more detail later in this chapter.

 

 

Note that the characters \" (in line 12) are not displayed in the browser. The back-slash (\) in a string is an escape character. It indicates that a “special” character is to be used in the string. When a backslash is encountered in a string of characters, the next char-acter is combined with the backslash to form an escape sequence. The escape sequence \" is the double-quote character, which causes a double-quote character to be inserted into the string. We use this escape sequence to insert double quotes around the attribute value for style without terminating the string. Note that we could also have used single quotes for the attribute value, as in document.write( "<h1 style = 'color: magenta'>" );, because the single quotes do not terminate a double-quoted string. We discuss escape sequences in greater detail momentarily.

 

It is important to note that the preceding discussion has nothing to do with the actual rendering of the XHTML text. Remember that the browser does not create a new line of text unless the browser window is too narrow for the text being rendered or the browser encounters an XHTML element that explicitly starts a new line—for example, <br/> to start a new line or <p> to start a new paragraph.

Displaying Multiple Lines of Text

In the next example, we demonstrate that a single statement can cause the browser to dis-play multiple lines by using line-break XHTML tags (<br/>) throughout the string of XHTML text in a write or writeln method call. Figure 6.4 demonstrates the use of line-break XHTML tags. Lines 12–13 produce three separate lines of text when the browser renders the 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.4: welcome3.html -->

 

      <!-- Printing on multiple lines with a single statement. -->

 

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

 

      <head>

 

      <title>Printing Multiple Lines</title>

 

        <script type = "text/javascript">

        <!--

 

        document.writeln( "<h1>Welcome to<br />JavaScript" +

        "<br />Programming!</h1>" );

        // -->

 

        </script>

 

        </head><body></body>

 

</html>


Fig. 6.4 | Printing on multiple lines with a single statement.

Displaying Text in an Alert Dialog

The first several programs in this chapter display text in the XHTML document. Some-times it is useful to display information in windows called dialogs (or dialog boxes) that “pop up” on the screen to grab the user’s attention. Dialogs typically display important messages to users browsing the web page. JavaScript allows you easily to display a dialog box containing a message. The program in Fig. 6.5 displays Welcome to JavaScript Pro-gramming! as three lines in a predefined dialog called an alert dialog.

 

    <?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.5: welcome4.html -->

 

    <!-- Alert dialog displaying multiple lines. -->

 

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

 

    <head>

 

    <title>Printing Multiple Lines in a Dialog Box</title>

 

      <script type = "text/javascript">

      <!--

      window.alert( "Welcome to\nJavaScript\nProgramming!" );

      // -->

 

      </script>

 

      </head>

 

      <body>

 

      <p>Click Refresh (or Reload) to run this script again.</p>

 

      </body>

 

</html>



Fig. 6.5 | Alert dialog displaying multiple lines.

 

Line 12 in the script uses the browser’s window object to display an alert dialog. The argument to the window object’s alert method is the string to display. Executing the pre-ceding statement displays the dialog shown in the first window of Fig. 6.5. The title bar of the dialog contains the string Windows Internet Explorer to indicate that the browser is presenting a message to the user. The dialog provides an OK button that allows the user to dismiss (i.e., close) the dialog by clicking the button. To dismiss the dialog, position the mouse cursor (also called the mouse pointer) over the OK button and click the mouse. Firefox’s alert dialog looks similar, but the title bar contains the text [JavaScript Application].

 

 Note that the alert dialog contains three lines of plain text. Normally, a dialog dis-plays the characters in a string exactly as they appear between the double quotes. Note, however, that the dialog does not display the characters \n. The escape sequence \n is the newline character. In a dialog, the newline character causes the cursor (i.e., the current screen position indicator) to move to the beginning of the next line in the dialog. Some other common escape sequences are listed in Fig. 6.6. The \n, \t and \r escape sequences in the table do not affect XHTML rendering unless they are in a pre element (this element displays the text between its tags in a fixed-width font exactly as it is formatted between the tags, including leading white-space characters and consecutive white-space characters). The other escape sequences result in characters that will be displayed in plain text dialogs and in XHTML.



 

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


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