Scribd Logo
Upload

Welcome to Scribd!

  • 5 - Dynamic HTML and Client-Side Scripting

    Uploaded by

    Mazen
    3 views41 pages

    Original Title

    5_Dynamic HTML and Client-side Scripting

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    3 views41 pages

    5 - Dynamic HTML and Client-Side Scripting

    Uploaded by

    Mazen

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 41

    TCS3224

    WEB PROJECT

    DYNAMIC HTML AND CLIENT-SIDE


    SCRIPTING

    May 4, 2024 © LMS SEGi education group


    1
    Dynamic HTML

    • Dynamic HTML (DHTML) is a collective term for a


    combination of HTML tags and options that can make
    Web pages more animated and interactive than previous
    versions of HTML.

    • DHTML is a combination of a static markup


    language (e.g. HTML), a client-side scripting language
    (e.g. JavaScript), a presentation definition language
    (e.g. CSS), and the Document Object Model (DOM).

    May 4, 2024 © LMS SEGi education group


    2
    The Concepts and Features in Dynamic
    HTML
    • Animate text and images in their document,
    independently moving any element from a starting point
    to any ending point
    • Embed a ticker or other dynamic display that

    automatically refreshes its content with the latest news,


    stock quotes, or other data.
    • Use a form to capture user input, and then process,

    verify and respond to that data without having to send


    data back to the server.
    • Include rollover buttons

    or drop-down menus.

    May 4, 2024 © LMS SEGi education group


    3
    Introduction

    • JavaScript
    • Scripting language that enhance the functionality and
    appearance of web pages.
    • Before you can run code examples with JavaScript on
    your computer, you may need to change your
    browser’s security settings.

    4
    What is a Script ?

    • A script is an executable list of commands like macro or


    batch file created by a scripting language.

    • Scripts (like PHP, Perl) which are executed on a web


    server are called server-side scripts and scripts (like
    JavaScript) which are executed on user's computer,
    interpreted by the browser is called client-side scripts.

    • As JavaScript works on the client side, It is mostly used


    for client-side web development.
    JavaScript vs. Java

    • JavaScript and Java are similar in some ways but


    fundamentally they are different.
    • Java is a server-side and static type language.
    • JavaScript is a client-side, dynamically typed language.
    • Java programs are compiled on the server and run on
    almost every platform without distribution of source code
    whereas scripts written in JavaScript are placed inside a
    HTML document and interpreted by the browser.
    • The syntax, reserved-words of JavaScript and Java are
    also different.
    Simple Program: Displaying a Line of
    Text in a Web Page
    • JavaScripts appear in the <head> section of the XHTML
    document
    • The browser interprets the contents of the <head>
    section first
    • The <script> tag indicates to the browser that the text
    that follows is part of a script.
    • Attribute type specifies the scripting language used in
    the script—such as text/javascript

    7
    Simple Program: Displaying a Line of
    Text in a Web Page (Cont.)
    • A string of characters can be contained between double
    (") or single (') quotation marks

    • A string is sometimes called a character string, a


    message or a string literal

    8
    Simple Program: Displaying a Line of
    Text in a Web Page (Cont.)
    • The parentheses following the name of a method contain
    the arguments that the method requires to perform its
    task (or its action)
    • Every statement should end with a semicolon
    • JavaScript is case sensitive
    • Not using the proper uppercase and lowercase letters

    is a syntax error

    9
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    Fig. 6.2 |
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Displaying a
    4 line of text.
    5 <!-- Fig. 6.2: welcome.html --> Specifies that we are using
    6 <!-- Displaying a line of text. --> the JavaScript language
    7 Script begins
    <html xmlns = "http://www.w3.org/1999/xhtml">
    8 <head>
    Prevents older browsers
    9 <title>A First Program in JavaScript</title>
    that do not support
    10 <script type = "text/javascript"> Writes an h1 welcome
    scripting from displaying
    11 <!-- messagethe
    in text
    the XHTML
    of the script
    document
    12 document.writeln(
    13 "<h1>Welcome to JavaScript Programming!</h1>" );
    XHTML comment
    14 // --> delimiter, commented for
    15 </script> Script ends correct interpretation by all
    16 </head><body></body> browsers
    17 </html>

    10
    1 <?xml version = "1.0" encoding = "utf-8"?> Fig. 6.3 |
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Printing one
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4
    line with
    5 <!-- Fig. 6.3: welcome2.html --> separate
    6
    7
    <!-- Printing one line with multiple statements. -->
    <html xmlns = "http://www.w3.org/1999/xhtml">
    statements.
    Two write
    8
    statements create
    <head>
    9 <title>Printing a Line with Multiple Statements</title>
    10
    11
    <script type = "text/javascript">
    <!--
    one line of
    12 document.write( "<h1 style = \"color: magenta\">" ); XHTML text
    13 document.write( "Welcome to JavaScript " +
    14
    15
    "Programming!</h1>" );
    // -->
    Concatenation
    16 </script> operator joins the
    17 </head><body></body>
    18 </html> string together, as
    it is split into
    multiple lines

    11
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Fig. 6.4 | Printing
    4 on multiple lines
    5 <!-- Fig. 6.4: welcome3.html --> with a single
    6 <!-- Printing on multiple lines with a single statement. --> statement.
    7 <html xmlns = "http://www.w3.org/1999/xhtml">
    8 <head>
    Inserts line-break
    9 <title>Printing Multiple Lines</title>
    10 <script type = "text/javascript">
    11 <!--
    12 document.writeln( "<h1>Welcome to<br />JavaScript" +
    13 "<br />Programming!</h1>" );
    14 // -->
    15 </script>
    16 </head><body></body> Inserts line-break
    17 </html>

    12
    Modifying Our First Program

    • Dialogs
    • Useful to display information in windows that “pop up”

    on the screen to grab the user’s attention


    • Typically used to display important messages to the

    user browsing the web page


    • Browser’s window object uses method alert to

    display an alert dialog


    • Method alert requires as its argument the string to

    be displayed

    13
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    Fig. 6.5 | Alert
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4 dialog
    5 <!-- Fig. 6.5: welcome4.html --> Creates a pop up box that displaying
    6 <!-- Alert dialog displaying multiple lines. --> alerts the welcome text to the
    7 <html xmlns = "http://www.w3.org/1999/xhtml"> user
    multiple lines.
    8 <head>
    9 <title>Printing Multiple Lines in a Dialog Box</title>
    10 <script type = "text/javascript">
    11 <!--
    12 window.alert( "Welcome to\nJavaScript\nProgramming!" );
    13 // -->
    14 </script>
    15 </head>
    16 <body>
    17 <p>Click Refresh (or Reload) to run this script again.</p>
    18 </body>
    19 </html>

    14
    Obtaining User Input with prompt
    Dialogs
    • Scripting
    • Gives you the ability to generate part or all of
    a web page’s content at the time it is shown to
    the user
    • Such web pages are said to be dynamic, as
    opposed to static, since their content has the
    ability to change

    15
    Obtaining User Input with prompt
    Dialogs (Cont.)
    • Keywords are words with special meaning in JavaScript
    • Keyword var
    • Used to declare the names of variables

    • All variables have a name, type and value, and should

    be declared with a var statement before they are


    used in a program
    • A variable name can be any valid identifier consisting of
    letters, digits, underscores ( _ ) and dollar signs ($) that
    does not begin with a digit and is not a reserved
    JavaScript keyword.

    16
    Obtaining User Input with prompt
    Dialogs (Cont.)
    • Declarations end with a semicolon (;) and can be split
    over several lines, with each variable in the declaration
    separated by a comma
    • Comments
    • A single-line comment begins with the characters //
    • Comments do not cause the browser to perform any

    action when the script is interpreted; rather,


    comments are ignored by the JavaScript interpreter
    • Multiline comments begin with delimiter /* and end

    with delimiter *

    17
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Fig. 6.7 | Prompt
    4 box used on a
    5 <!-- Fig. 6.7: welcome5.html --> welcome screen
    6 <!-- Prompt box used on a welcome screen. -->
    (Part 1 of 2).
    7 <html xmlns = "http://www.w3.org/1999/xhtml"> Declares a new variable
    8 <head>
    9 <title>Using Prompt and Alert Boxes</title> Sets the identifier of the
    10 <script type = "text/javascript"> variable to name
    11 <!--
    12 var name; // string entered by the user
    Inserts the value given to name
    13
    into the XHTML text
    14 // read the name from the prompt box as a string
    15 name = window.prompt( "Please enter your name" );
    16
    17 document.writeln( "<h1>Hello, " + name +
    18 ", welcome to JavaScript programming!</h1>" );
    Assigns the string entered by the
    19 // -->
    user to the variable name
    20 </script>
    21 </head>
    22 <body>
    23 <p>Click Refresh (or Reload) to run this script again.</p>
    24 </body>
    25 </html>

    19
    Fig. 6.7 | Prompt box used on a
    welcome screen (Part 2 of 2).

    20
    Fig. 6.8 | Prompt dialog displayed by the
    window object’s prompt method.

    21
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    Fig. 6.9 |
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4 Addition script
    5 <!-- Fig. 6.9: addition.html --> (Part 1 of 2).
    6 <!-- Addition script. -->
    7 <html xmlns = "http://www.w3.org/1999/xhtml">
    8 <head>
    9 <title>An Addition Program</title>
    10 <script type = "text/javascript">
    11 <!--
    12 var firstNumber; // first string entered by user
    Assigns the first input from
    13 var secondNumber; // second string entered by user
    the user to the variable
    14 var number1; // first number to add
    15 var number2; // second number to add
    firstNumber
    16 var sum; // sum of number1 and number2
    17
    Assigns the second input
    18 // read in first number from user as a string
    from the user to the variable
    19 firstNumber = window.prompt( "Enter first integer" );
    20
    secondNumber
    21 // read in second number from user as a string
    22 secondNumber = window.prompt( "Enter second integer" ); Converts the strings entered
    23
    by the user into integers
    24 // convert numbers from strings to integers
    25 number1 = parseInt( firstNumber );
    26 number2 = parseInt( secondNumber );
    27
    28 sum = number1 + number2; // add the numbers
    29

    22
    30
    31
    // display the results
    document.writeln( "<h1>The sum is " + sum + "</h1>" ); Addition
    script
    32 // -->
    33 </script>
    34 </head>
    35
    36
    <body>
    <p>Click Refresh (or Reload) to run the script again</p>
    (Part 2 of
    37 </body>
    38 </html>
    2).

    23
    Decision Making: Equality and Relational
    Operators (Cont.)
    • Date object
    • Used acquire the current local time
    • Create a new instance of an object by using
    the new operator followed by the type of the
    object, Date, and a pair of parentheses

    24
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Fig. 6.17 | Using
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    equality and
    4
    relational
    5 <!-- Fig. 6.17: welcome6.html -->
    6 <!-- Using equality and relational operators. -->
    operators (Part 1 of
    7 <html xmlns = "http://www.w3.org/1999/xhtml"> 3).
    8 <head>
    9 <title>Using Relational Operators</title>
    10 <script type = "text/javascript"> Set variable now to a new
    11 <!-- Date object
    12 var name; // string entered by the user
    13 var now = new Date(); // current date and time
    Assigns hour to the value
    14 var hour = now.getHours(); // current hour (0-23) returned by the Date
    15 object’s getHours method
    16 // read the name from the prompt box as a string
    17 name = window.prompt( "Please enter your name" );
    18 Conditional statement: checks
    19 // determine whether it is morning whether the current value of
    20 if ( hour < 12 ) hour is less than 12
    21 document.write( "<h1>Good Morning, " );
    22
    This statement will execute
    only if the previous
    condition was true

    25
    23 // determine whether the time is PM
    24 if ( hour >= 12 ) Conditional statement: checks Fig. 6.17 | Using
    25 { whether the current value of equality and
    26 // convert to a 12-hour clock hour is greater than or equal to
    relational
    27 hour = hour - 12; 12
    28 operators (Part 2
    If hour is 12 or greater (the
    29 // determine whether it is before 6 PM previous condition was true),of 3).
    30 if ( hour < 6 ) subtract 12 from the value and
    31 document.write( "<h1>Good Afternoon, " ); reassign it to hour
    32
    33 // determine whether it is after 6 PM
    34 if ( hour >= 6 ) Conditional statement: checks
    35 document.write( "<h1>Good Evening, " ); whether the current value of
    36 } // end if hour is less than 6
    37
    38 document.writeln( name +
    39 ", welcome to JavaScript programming!</h1>" );
    Conditional statement: checks
    40 // -->
    whether the current value of
    41 </script>
    hour is greater than or equal to
    42 </head>
    6
    43 <body>
    44 <p>Click Refresh (or Reload) to run this script again.</p>
    45 </body>
    46 </html>

    26
    Fig. 6.17 | Using equality and relational
    operators (Part 3 of 3).

    27
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    Fig. 8.6 |
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4 Compound
    5 <!-- Fig. 8.6: Interest.html --> interest
    6 <!-- Compound interest calculation with a for loop. -->
    7 <html xmlns = "http://www.w3.org/1999/xhtml">
    calculation
    8 <head> with a for loop
    9 <title>Calculating Compound Interest</title>
    (Part 1 of 2).
    10 <style type = "text/css">
    11 table { width: 100% }
    12 th { text-align: left }
    13 </style>
    14 <script type = "text/javascript">
    15 <!--
    16 var amount; // current amount of money
    17 var principal = 1000.0; // principal amount
    18 var rate = .05; // interest rate
    19
    20 document.writeln(
    21 "<table border = \"1\">" ); // begin the table
    22 document.writeln(
    23 "<caption>Calculating Compound Interest</caption>" );
    24 document.writeln(
    25 "<thead><tr><th>Year</th>" ); // year column heading
    26 document.writeln(
    27 "<th>Amount on deposit</th>" ); // amount column heading
    28 document.writeln( "</tr></thead><tbody>" );
    29

    28
    30 // output a table row for each year
    31 for ( var year = 1; year <= 10; ++year ) Fig. 8.6 |
    32 { Compound
    33 amount = principal * Math.pow( 1.0 + rate, year );
    34 document.writeln( "<tr><td>" + year +
    interest
    35 "</td><td>" + amount.toFixed(2) + calculation with
    Control variable year begins
    36 "</td></tr>" );
    with a value of 1 a for loop (Part 2
    37 } //end for
    of 2).
    38
    39 document.writeln( "</tbody></table>" ); Continue to execute the loop
    40 // --> while year is less than or equal
    41 </script> to 10
    42 </head><body></body>
    43 </html> After each loop iteration, increase
    the value of year by 1

    29
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    Fig. 9.2 |
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Programmer-
    4
    5 <!-- Fig. 9.2: SquareInt.html -->
    defined
    6 <!-- Programmer-defined function square. --> function
    7 <html xmlns = "http://www.w3.org/1999/xhtml">
    square (Part 1
    8 <head>
    9 <title>A Programmer-Defined square Function</title> of 2).
    10 <script type = "text/javascript">
    11 <!--
    12 document.writeln( "<h1>Square the numbers from 1 to 10</h1>" );
    13
    14 // square the numbers from 1 to 10
    15 for ( var x = 1; x <= 10; x++ )
    16 document.writeln( "The square of " + x + " is " + Calls function square with x as an
    17 square( x ) + "<br />" ); argument, which will return the value
    18 to be inserted here
    19 // The following square function definition is executed
    20 // only when the function is explicitly called.
    21
    22 // square function definition
    23 function square( y ) Begin function square
    24 {
    25 return y * y;
    26 } // end function square
    27 // -->
    Names the parameter y
    28 </script>
    End function square Returns the value of y * y (the
    29 </head><body></body>
    30 </html> argument squared) to the caller
    30
    Fig. 9.2 | Programmer-defined
    function square (Part 2 of 2).

    31
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    Fig. 9.3 |
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Programmer-
    4
    5 <!-- Fig. 9.3: maximum.html -->
    defined
    6 <!-- Programmer-Defined maximum function. --> maximum
    7 <html xmlns = "http://www.w3.org/1999/xhtml"> function (Part 1
    8 <head>
    9 <title>Finding the Maximum of Three Values</title> of 3).
    10 <script type = "text/javascript">
    11 <!--
    12 var input1 = window.prompt( "Enter first number", "0" );
    13 var input2 = window.prompt( "Enter second number", "0" );
    14 var input3 = window.prompt( "Enter third number", "0" );
    15
    16 var value1 = parseFloat( input1 );
    17
    18
    var value2 = parseFloat( input2 );
    var value3 = parseFloat( input3 ); Creates float
    19
    values from
    user input

    32
    20 var maxValue = maximum( value1, value2, value3 );
    21
    22 document.writeln( "First number: " + value1 +
    Fig. 9.3 |
    23 Variable "<br />Second number: " + value2 + Programmer-
    Calls function maximum
    24 maxValu"<br />Third number: " + value3 + defined maximum
    with arguments value1,
    25 e stores "<br />Maximum is: " + maxValue ); function (Part 2
    26 value2 and value3
    27
    the return
    // maximum function definition (called from line 20) of 3).
    28 value offunction maximum( x, y, z )
    29 the call{to Begin function maximum
    30 maximumreturn Math.max( x, Math.max( y, z ) ); with local variables x, y
    31 } // end function maximum and z
    32 // -->
    33 </script>
    Calls the Math object’s method
    34 </head>
    End function max to compare the first
    35 <body> maximum variable with the maximum of
    36 <p>Click Refresh (or Reload) to run the script again</p>
    the other two
    37 </body>
    38 </html>

    33
    Fig. 9.3 | Programmer-defined maximum function (Part 3 of 3). 34
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    Fig. 9.4 |
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Random
    4
    5 <!-- Fig. 9.4: RandomInt.html -->
    integers,
    6 <!-- Random integers, shifting and scaling. --> shifting and
    7 <html xmlns = "http://www.w3.org/1999/xhtml"> scaling (Part 1
    8 <head>
    9 <title>Shifted and Scaled Random Integers</title> of 2).
    10 <style type = "text/css">
    11 table { width: 50%;
    12 border: 1px solid gray;
    13 text-align: center }
    14 </style>
    15 <script type = "text/javascript">
    16 <!--
    17 var value; Shifts the Scales the range of
    18
    19 range of return return values by a
    document.writeln( "<table>" );
    20
    21
    values up by 1 factor of 6
    document.writeln( "<caption>Random Numbers</caption><tr>" );

    22 for ( var i = 1; i <= 20; i++ )


    23 {
    24
    25
    value = Math.floor( 1 + Math.random() * 6 );
    document.writeln( "<td>" + value + "</td>" );
    Takes the floor of
    26 the number from 1.0
    27 // start a new table row every 5 entries
    28 if ( i % 5 == 0 && i != 20 ) up to, but not
    29
    30
    document.writeln( "</tr><tr>" );
    } // end for
    including, 7.0
    31 35
    32 document.writeln( "</tr></table>" );
    33 // --> Fig. 9.4 |
    34 </script> Random
    35
    36
    </head>
    <body>
    integers,
    37 <p>Click Refresh (or Reload) to run the script again</p> shifting and
    38 </body> scaling (Part 2
    39 </html>
    of 2).

    Variable value has a


    value from 1 to 6

    36
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    Fig. 9.5 |
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Rolling a six-
    4
    5 <!-- Fig. 9.5: RollDie.html -->
    sided die 6000
    6 <!-- Rolling a Six-Sided Die 6000 times. --> times (Part 1 of
    7 <html xmlns = "http://www.w3.org/1999/xhtml"> 3).
    8 <head>
    9 <title>Roll a Six-Sided Die 6000 Times</title>
    10 <script type = "text/javascript">
    11 <!--
    12 var frequency1 = 0;
    13 var frequency2 = 0;
    14 var frequency3 = 0;
    15 var frequency4 = 0;
    16 var frequency5 = 0;
    17 var frequency6 = 0; Stores a random
    18
    integer in the range
    var face;
    19
    20
    1 – 6 to variable
    // roll die 6000 times and accumulate results
    21 for ( var roll = 1; roll <= 6000; roll++ )
    22 {
    23 face = Math.floor( 1 + Math.random() * 6 ); face
    24
    25
    26
    switch ( face )
    {
    Uses a switch
    27
    28
    case 1:
    ++frequency1;
    statement to
    29 break;
    process the results
    37
    30 case 2: Fig. 9.5 |
    31 ++frequency2;
    32 break; Rolling a
    33
    34
    case 3:
    ++frequency3;
    six-sided die
    35 break; 6000 times
    36 case 4:
    37 ++frequency4; (Part 2 of 3).
    38 break;
    39 case 5:
    40 ++frequency5;
    41 break;
    42 case 6:
    43 ++frequency6;
    44 break;
    45 } // end switch
    46 } // end for Outputs the number of
    47
    48 document.writeln( "<table border = \"1\">" );
    occurrences of each
    49 document.writeln( "<thead><th>Face</th>" + face being rolled
    50 "<th>Frequency</th></thead>" );
    51 document.writeln( "<tbody><tr><td>1</td><td>" +
    52 frequency1 + "</td></tr>" );
    53 document.writeln( "<tr><td>2</td><td>" + frequency2 +
    54 "</td></tr>" );
    55 document.writeln( "<tr><td>3</td><td>" + frequency3 +
    56 "</td></tr>" );
    57 document.writeln( "<tr><td>4</td><td>" + frequency4 +
    58 "</td></tr>" );

    38
    59 document.writeln( "<tr><td>5</td><td>" + frequency5 +
    60 "</td></tr>" ); Fig. 9.5 |
    61 document.writeln( "<tr><td>6</td><td>" + frequency6 + Rolling a six-
    62
    63
    "</td></tr></tbody></table>" );
    // -->
    sided die 6000
    64 </script> times (Part 3 of
    65 </head>
    3).
    66 <body>
    67 <p>Click Refresh (or Reload) to run the script again</p>
    68 </body>
    69 </html>

    Running the script another


    time calls Math.random
    again and (usually) results in
    different frequencies 39
    Another Example: Random Image
    Generator
    • We can use random number generation to
    randomly select from a number of images
    in order to display a random image each
    time a page loads

    40
    1 <?xml version = "1.0" encoding = "utf-8"?>
    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Fig. 9.7 |
    4
    5 <!-- Fig. 9.7: RandomPicture.html -->
    Random image
    6 <!-- Random image generation using Math.random. --> generation
    7 <html xmlns = "http://www.w3.org/1999/xhtml">
    using Math.random.
    8 <head>
    9 <title>Random Image Generator</title>
    10
    11
    <script type = "text/javascript">
    <!--
    Creates an src
    12 document.write ( "<img src = \"" + attribute by
    13 Math.floor( 1 + Math.random() * 7 ) + ".gif\" />" );
    14 // --> concatenating a
    15
    16
    </script>
    </head>
    random integer from 1
    17 <body> to 7 with “.gif\” to
    18 <p>Click Refresh (or Reload) to run the script again</p>
    19 </body> reference one of the
    20 </html>
    images 1.gif,
    2.gif, 3.gif,
    4.gif, 5.gif,
    6.gif or 7.gif

    41
    References

    • Deitel, P.J. & Deitel, H.M. (2009). Internet and World


    Wide Web: How to Program (4th ed.). New Jersey:
    Pearson Education Inc. (2008).
    • W3C.org (2008). XHTML Basic 1.1 Recommendation.
    http://www.w3.org/TR/2008/REC-xhtml-basic-20080729/

    42

    You might also like