Htaccess    html   Php    javascript   Asp   css    maths  Past Questions  Practice Tests Online

Building application with javascript tutorial Donate at flattr Flattr this





Alert! Connect with 10,000 Chating Online. Join Now

Building application with javascript


Learn Building application with javascript syntax codes and tags using the sample below.

Building application with javascript syntax



  • The Specifications
  • Building the Application
  • Moving Beyond the Basic Script

    In this chapter you are going to apply some of what you have learned to build a simple application that demonstrates how, with very basic JavaScript, it is possible to create the impression of a sophisticated interactive application.

    You are going to design an application that enables users to build their own cartoon faces out of a library of existing eyes, noses, and mouths. No drawing skill is required for the user.

    The Specifications

    The application has several basic requirements:

    • Display each piece of the face in a separate frame while the user is experimenting.
    • Provide a button to build the complete face in a separate window which the user can then print out or save as a complete HTML file which displays the face.
    • Provide a random face button which causes the script to build a random face from among the possible faces.

    Building the Application

    In order to build this face program, you need to define the frameset, which contains all the elements of the interface and application.

    To do this, use the frameset in Listing 11.1.


    Listing 11.1. The parent frameset.
    <FRAMESET ROWS="150,150,150,*">

      <FRAMESET COLS="400,*">
        <FRAME SRC="eye1.gif" NAME="eye" MARGINHEIGHT=0
       
    MARGINWIDTH=0 SCROLLING="no">
        <FRAME SRC="eyes.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
      </FRAMESET>

      <FRAMESET COLS="400,*">
        <FRAME SRC="nose1.gif" NAME="nose" MARGINHEIGHT=0
       
    MARGINWIDTH=0 SCROLLING="no">
        <FRAME SRC="noses.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
      </FRAMESET>

      <FRAMESET COLS="400,*">
        <FRAME SRC="mouth1.gif" NAME="mouth" MARGINHEIGHT=0
        
    MARGINWIDTH=0 SCROLLING="no">
        <FRAME SRC="mouths.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
      </FRAMESET>

      <FRAME SRC="build.htm">

    </FRAMESET>

    This sets up a four-row grid. The top three rows are each divided into two columns: The left side displays the current selection for the eyes, nose, or mouth, and the right side presents all the available choices.

    The bottom row is where the control buttons to build the face and generate a random face appear.

    Based on this, you need to create four other HTML files (see Listings 11.2 through 11.5) which are the basis of the program: eyes.htm, noses.htm, mouths.htm and build.htm.


    Listing 11.2. Source code for eyes.htm.
    <!-- SOURCE CODE FOR eyes.htm -->

    <HTML>

    <BODY BGCOLOR="iceblue">

      <TABLE BORDER=0>

        <TR>

          <TD><A HREF="eye1.gif" TARGET="eye">
          <IMG SRC="eye1sample.gif" BORDER=0></A></TD>

          <TD><A HREF="eye2.gif" TARGET="eye">
          <IMG SRC="eye2sample.gif" BORDER=0></A></TD>

        </TR>

        <TR>

          <TD><A HREF="eye3.gif" TARGET="eye"">
          <IMG SRC="eye3sample.gif" BORDER=0></A></TD>

          <TD><A HREF="eye4.gif" TARGET="eye">
          <IMG SRC="eye4sample.gif" BORDER=0></A></TD>

        </TR>

      </TABLE>

    </BODY>

    <
    /HTML>


    Listing 11.3. The source code for noses.htm.
    <!-- SOURCE CODE FOR noses.htm -->

    <HTML>

    <BODY BGCOLOR="iceblue">

      <TABLE BORDER=0>

        <TR>

          <TD><A HREF="nose1.gif" TARGET="nose">
          <IMG SRC="nose1sample.gif" BORDER=0></A></TD>

          <TD><A HREF="nose2.gif" TARGET="nose">
          <IMG SRC="nose2sample.gif" BORDER=0></A></TD>

        </TR>

        <TR>

          <TD><A HREF="nose3.gif" TARGET="nose">
          <IMG SRC="nose3sample.gif" BORDER=0></A></TD>

          <TD><A HREF="nose4.gif" TAGRET="nose">
          <IMG SRC="nose4sample.gif" BORDER=0></A></TD>

        </TR>

      </TABLE>

    </BODY>

    </HTML>


    Listing 11.4. The source code for mouths.htm.
    <!-- SOURCE CODE FOR mouths.htm -->

    <HTML>

    <BODY BGCOLOR="iceblue">

      <TABLE BORDER=0>

        <TR>

          <TD><A HREF="mouth1.gif" TARGET="mouth">
          <IMG SRC="mouth1sample.gif" BORDER=0></A></TD>

          <TD><A HREF="mouth2.gif" TAGRET="mouth">
          <IMG SRC="mouth2sample.gif" BORDER=0></A></TD>

        </TR>

        <TR>

          <TD><A HREF="mouth3.gif" TARGET="mouth">
          <IMG SRC="mouth3sample.gif" BORDER=0></A></TD>

          <TD><A HREF="mouth4.gif" TARGET="mouth">
          <IMG SRC="mouth4sample.gif" BORDER=0></A></TD>

        </TR>

      </TABLE>

    </BODY>

    </HTML>

    The file build.htm (Listing 11.5) provides the controls in the bottom frame:


    Listing 11.5. The source code for build.htm.
    <!-- SOURCE CODE FOR build.htm -->

    <HTML>

    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- HIDE FROM OTHER BROWSERS

    // Build the complete face in a separate window
    function buildFace() {

      var eye = parent.eye.location;
      var nose = parent.nose.location;
      var mouth = parent.mouth.location;

      var face = window.open("","builtFace","width=400,height=450");
      face.document.open("text/html");
      face.document.write('<IMG SRC="' + eye + '">');
      face.document.write('<IMG SRC="' + nose + '">');
      face.document.write('<IMG SRC="' + mouth + '">');
      face.document.close();

    }

    // Build a random face in the current window
    function randomFace() {

      var eye = "eye" + getRandom() + ".gif";
      var nose = "nose" + getRandom() + ".gif";
      var mouth = "mouth" + getRandom() + ".gif";

    parent.eye.location = eye;
    parent.nose.location = nose;
    parent.mouth.location = mouth;

    }

    // Generate a random number
    function getRandom() {

      today = new Date();
      var bigNumber = today.getSeconds() * today.getTime() *
         ÂMath.sqrt(today.getMinutes());
      var randomNum = (bigNumber % 4) + 1;

      return Math.floor(randomNum);

    }

    // STOP HIDING -->
    </SCRIPT>

    </HEAD>

    <BODY BGCOLOR="#000000" TEXT="iceblue">
    <FORM METHOD=POST>
    <CENTER>
    <INPUT TYPE="button" VALUE="Build This Face" onClick="buildFace();">
    <INPUT TYPE="button" VALUE="Make A Random Face" onClick="randomFace();">
    </CENTER>
    </FORM>
    </BODY>

    </HTML>


    The results of this application appear similar to Figures 11.1 and 11.2.

    The first thing to notice about the four HTML documents is that three of them-eyes.htm, noses.htm, and mouths.htm-are very similar.

    This is because all three files play the same role: They present options for the user to select each of three parts of the face.

    Each file displays four options in a 2¥2 table. Each of the small images displayed is, in fact, a link targeted to the appropriate frame on the left. When the user clicks on one of the sample images, the full-size version of that feature is displayed in the corresponding frame on the left.

    You use JavaScript in the build.htm document. Here you have three functions related to the two buttons displayed in the bottom frame of the frameset: buildFace(), randomFace(), and getRandom().

    buildFace() and randomFace() are called by the event handlers of the two buttons:

    <INPUT TYPE="button" VALUE="Build This Face" onClick="buildFace();">
    <INPUT TYPE="button" VALUE="Make A Random Face" onClick="randomFace();">

    The buildFace() Function

    The buildFace() function takes the three pieces of the face in the three frames and displays them in a single new window. This function needs to find out which files are displayed in each of the three left frames and then builds a single HTML file that displays the three files in a single window.

    function buildFace() {

      var eye = parent.eye.location;
      var nose = parent.nose.location;
      var mouth = parent.mouth.location;

      var face = window.open("","builtFace","width=400,height=450");
      face.document.open("text/html");
      face.document.write('<IMG SRC="' + eye + '">');
      face.document.write('<IMG SRC="' + nose + '">');
      face.document.write('<IMG SRC="' + mouth + '">');
      face.document.close();

    }

    The function starts by getting the URLs of the three selected facial features with the location property of the frame object, as in the example var eye = parent.eye.location;. You use the fact that you can address object properties by name in the structure parent.eye to reference each frame.

    Once this is done, a new window of the desired size is opened using

    var face =window.open("","builtFace","width=400,height=450");

    This command specifies the size of the window in pixels using the optional windows attributes argument. The new object for this window is called face so that you can later use commands such as face.document.write().

    After the window is open, open an HTML output stream using face.document.open("text/html") and then write out the three image tags based on the URLs you got earlier. Finally, you close the document output stream.

    The randomFace() Function

    The randomFace() function simply selects three random facial features and then opens them in the appropriate frames. This is done by calling the getRandom() function, which returns a number from 1 to 4, and then building three filenames, such as

    var eye = "eye" + getRandom() + ".gif".
    function randomFace() {

      var eye = "eye" + getRandom() + ".gif";
      var nose = "nose" + getRandom() + ".gif";
      var mouth = "mouth" + getRandom() + ".gif";

    parent.eye.location = eye;
    parent.nose.location = nose;
    parent.mouth.location = mouth;

    }

    Once this is done, the three files are opened using window.open().

    The getRandom() Function

    The getRandom() function is designed to return a random number from one to four. This is done by creating a new Date object for the current date and time, getting a large number by multiplying together different elements of the Date object, and then taking the modulus by four and adding one, as shown in the following lines.

    function getRandom() {

      today = new Date();
      var bigNumber = today.getSeconds() * today.getTime() *
        
    Math.sqrt(today.getMinutes());
      var randomNum = (bigNumber % 4) + 1;

      return Math.floor(randomNum);

    }

    The result is a pseudo-random number from one to four (because the modulus returns a number greater than or equal to zero and less than four). The use of Math.floor() ensures that the number returned is an integer.

    Note
    In Navigator 3, the Math.random() method could provide a random number. However, this will not work on all platforms in Navigator 2.

    Moving Beyond the Basic Script

    There are a couple of limitations to the current script that you might like to improve:

    • You have fixed the number of available eyes, noses, and mouths at four each. The program should be easily extendible to any number of eyes, noses, and mouths, and the number of each feature should be able to vary.
    • Each time you build a face, it opens in the same window as the last face you built. The program should open each face in a different window.
    • Users should be able to save the current face, and when they first come to the page, that face should be loaded as the default first face.

    More Than Four Choices

    In order to expand the script to support more than four choices for each feature, you need to make changes to each of the HTML files, including the parent frameset.

    You start by adding a small script to the parent frameset (Listing 11.1).

    <SCRIPT LANGUAGE="JavaScript">
    <!-- HIDE FROM OTHER BROWSERS

    var numEyes = 4;
    var numNoses = 4;
    var numMouths = 4;

    // STOP HIDING -->
    </SCRIPT>

    This script is where you set the number of options for each of the three facial features. That way, if you want to add or remove choices, you only need to change these three numbers, and the whole program will work.

    Next, you need to alter the three files eyes.htm, noses.htm, and mouths.htm (Listings 11.2 through 11.4) so that you use JavaScript to dynamically build two-row tables, regardless of the number of choices.

    By way of example, this is what eyes.htm would look like:

    <BODY BGCOLOR="iceblue">

      <TABLE BORDER=0>

        <TR>

        <SCRIPT LANGUAGE="JavaScript">
        <!-- HIDE FORM OTHER BROWSERS

        for (var i = 1; i <= Math.floor(parent.numEyes / 2); i ++) {
          document.write('<TD><A HREF="eye' + i + '.gif" TARGET="eye">');

          document.write('<IMG SRC="eye' + i + 'sample.gif" BORDER=0></A></TD>');
        }

        // STOP HIDING -->
        </SCRIPT>

        </TR>

        <TR>

        <SCRIPT LANGUAGE="JavaScript">
        <!-- HIDE FROM OTHER BROWSERS

        for (var i = Math.floor(parent.numEyes / 2) + 1;
      
    i <= parent.numEyes; i ++) {
          document.write('<TD><A HREF="eye' + i + '.gif" TARGET="eye">');

          document.write('<IMG SRC="eye' + i + 'sample.gif" BORDER=0></A></TD>');
        }

        // STOP HIDING -->
        </SCRIPT>

        </TR>

      </TABLE>

    </BODY>

    What you have added are two short scripts that build the table cells for each row of the table. The first script builds cells for each image from the first to the halfway point in the available list, and the second builds from there to the end. You use Math.floor() to ensure that you are building filenames out of integer values.

    Finally, you need to alter the randomFace() and getRandom() functions in build.htm (Listing 11.5). getRandom() now takes an argument which is the range it is supposed to return (that is, from 1 to num). randomFace() passes the appropriate variable from the parent frameset for each function call to getRandom().

    function randomFace() {

      var eye = "eye" + getRandom(parent.numEyes) + ".gif";
      var nose = "nose" + getRandom(parent.numNoses) + ".gif";
      var mouth = "mouth" + getRandom(parent.numMouths) + ".gif";

    parent.eye.location = eye;
    parent.nose.location = nose;
    parent.mouth.location = mouth;

    }

    function getRandom(num) {

      today = new Date();
      var bigNumber = today.getSeconds() * today.getTime() *
        
    Math.sqrt(today.getMinutes());
      var randomNum = bigNumber % num + 1;

      return Math.floor(randomNum);

    }

    Building Faces in Multiple Windows

    In order to build each face in a new window, you need to make far fewer changes than you made to support the variable number of choices for each facial attribute.

    All the changes are made to the file build.htm. You add a global variable called windowNumber, which you increment for each window you open. Then you make one change to the function buildFace() on the line where you open the window:

    var face = window.open("","builtFace" + windowNumber ++,"width=400,height=450");

    This builds a new window name based on the value of windowNumber and then increments windowNumber by one. Remember that the unary increment operator (++) after an expression first evaluates the expression (in this case, that is simply windowNumber) and then increments the expression.

    Note
    Navigator includes a special target _blank which, when used in conjunction with window.open(), opens a new window. For instance, window.open("","_blank") opens a new empty window.

    Summary

    To help you see all the changes you have made, here is the source code including all the changes. I am only including eyes.htm (and not noses.htm or mouths.htm) because the changes are the same in these three files.


    Listing 11.6. Final version of the application.
    <!-- SOURCE CODE FOR PARENT FRAMESET -->


    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- HIDE FROM OTHER BROWSERS

    var numEyes = 4;
    var numNoses = 4;
    var numMouths = 4;

    // STOP HIDING -->
    </SCRIPT>

    </HEAD>

    <FRAMESET ROWS="150,150,150,*">

      <FRAMESET COLS="400,*">
        <FRAME SRC="eye1.gif" NAME="eye" MARGINHEIGHT=0
      
    MARGINWIDTH=0 SCROLLING="no">
        <FRAME SRC="eyes.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
      </FRAMESET>

      <FRAMESET COLS="400,*">
        <FRAME SRC="nose1.gif" NAME="nose" MARGINHEIGHT=0
      
    MARGINWIDTH=0 SCROLLING="no">
        <FRAME SRC="noses.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
      </FRAMESET>

      <FRAMESET COLS="400,*">
        <FRAME SRC="mouth1.gif" NAME="mouth" MARGINHEIGHT=0
      
    MARGINWIDTH=0 SCROLLING="no">
        <FRAME SRC="mouths.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
      </FRAMESET>

      <FRAME SRC="build.htm">

    </FRAMESET>
    <!-- SOURCE CODE FOR build.html -->

    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- HIDE FROM OTHER BROWSERS

    var windowNumber = 1;

    // Build the face in a separate window
    function buildFace() {

      var eye = parent.eye.location;
      var nose = parent.nose.location;
      var mouth = parent.mouth.location;

      var face = window.open("","builtFace" +
        
    windowNumber ++,"width=400,height=450");
      face.document.open("text/html");
      face.document.write('<IMG SRC="' + eye + '">');
      face.document.write('<IMG SRC="' + nose + '">');
      face.document.write('<IMG SRC="' + mouth + '">');
      face.document.close();

    }

    // Display a random face in the current window
    function randomFace() {

      var eye = "eye" + getRandom(parent.numEyes) + ".gif";
      var nose = "nose" + getRandom(parent.numNoses) + ".gif";
      var mouth = "mouth" + getRandom(parent.numMouths) + ".gif";

    parent.eye.location = eye;
    parent.nose.location = nose;
    parent.mouth.location = mouth;

    }

    // Generate a random number
    function getRandom(num) {

      today = new Date();
      var bigNumber = today.getSeconds() * today.getTime() *
        
    Math.sqrt(today.getMinutes());
      var randomNum = Math.floor(bigNumber % num);

      return randomNum + 1;

    }

    // STOP HIDING -->
    </SCRIPT>

    </HEAD>

    <BODY BGCOLOR="#000000" TEXT="iceblue">
    <FORM METHOD=POST>
    <CENTER>
    <INPUT TYPE="button" VALUE="Build This Face" onClick="buildFace();">
    <INPUT TYPE="button" VALUE="Make A Random Face" onClick="randomFace();">
    </CENTER>
    </FORM>
    </BODY>
    <!-- SOURCE CODE FOR eyes.html -->

    <BODY BGCOLOR="iceblue">

      <TABLE BORDER=0>

        <TR>

        <SCRIPT LANGUAGE="JavaScript">
        <!-- HIDE FORM OTHER BROWSERS

        for (var i = 1; i <= Math.floor(parent.numEyes / 2); i ++) {
          document.write('<TD><A HREF="eye' + i + '.gif" TARGET="eye">');

          document.write('<IMG SRC="eye' + i + 'sample.gif" BORDER=0></A></TD>');
        }

        // STOP HIDING -->
        </SCRIPT>

        </TR>

        <TR>

        <SCRIPT LANGUAGE="JavaScript">
        <!-- HIDE FROM OTHER BROWSERS

        for (var i = Math.floor(parent.numEyes / 2) + 1;
      
    i <= parent.numEyes; i ++) {
    document.write('<TD><A HREF="eye' + i + '.gif" TARGET="eye">');

          document.write('<IMG SRC="eye' + i + 'sample.gif" BORDER=0></A></TD>');
        }

        // STOP HIDING -->
        </SCRIPT>

        </TR>

      </TABLE>

    </BODY>

    The resulting HTML documents look like Listing


    Listing 11.7. The final version of the parent frameset.
    <!-- SOURCE CODE OF PARENT FRAMESET -->

    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- HIDE FROM OTHER BROWSERS

    //
    //  Cookie Functions - Second Helping  (21-Jan-96)
    //  Written by:  Bill Dortch, hIdaho Design <bdortch@netw.com>
    //  The following functions are released to the public domain.
    //
    // "Internal" function to return the decoded value of a cookie
    //
    function getCookieVal (offset) {
      var endstr = document.cookie.indexOf (";", offset);
      if (endstr == -1)
        endstr = document.cookie.length;
      return unescape(document.cookie.substring(offset, endstr));
    }

    //
    //  Function to return the value of the cookie specified by "name".
    //    name - String object containing the cookie name.
    //    returns - String object containing the cookie value, or null if
    //      the cookie does not exist.
    //
    function GetCookie (name) {
      var arg = name + "=";
      var alen = arg.length;
      var clen = document.cookie.length;
      var i = 0;
      while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg)
          return getCookieVal (j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
      }
      return null;
    }

    //
    //  Function to create or update a cookie.
    //    name - String object object containing the cookie name.

    //    value - String object containing the cookie value.  May contain
    //      any valid string characters.
    //    [expires] - Date object containing the expiration data of the cookie.  
    //    If omitted or null, expires the cookie at the end of the current
      Âsession.
    //    [path] - String object indicating the path for which the cookie is
      Âvalid.
    //      If omitted or null, uses the path of the calling document.
    //    [domain] - String object indicating the domain for which the cookie
    //    is valid.  If omitted or null, uses the domain of the calling
      Âdocument.
    //    [secure] - Boolean (true/false) value
      Âindicating whether cookie transmission
    //      requires a secure channel (HTTPS).
    //
    //  The first two parameters are required.  The others, if supplied, must
    //  be passed in the order listed above.  To omit an unused optional field,
    //  use null as a place holder.  For example, to call SetCookie using name,
    //  value and path, you would code:
    //
    //      SetCookie ("myCookieName", "myCookieValue", null, "/");
    //
    //  Note that trailing omitted parameters do not require a placeholder.
    //
    //  To set a secure cookie for path "/myPath", that expires after the
    //  current session, you might code:
    //
    //      SetCookie (myCookieVar, cookieValueVar, null, "/myPath", null,
          Âtrue);
    //
    function SetCookie (name, value) {
      var argv = SetCookie.arguments;
      var argc = SetCookie.arguments.length;
      var expires = (argc > 2) ? argv[2] : null;
      var path = (argc > 3) ? argv[3] : null;
      var domain = (argc > 4) ? argv[4] : null;
      var secure = (argc > 5) ? argv[5] : false;
      document.cookie = name + "=" + escape (value) +
        ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
        ((path == null) ? "" : ("; path=" + path)) +
        ((domain == null) ? "" : ("; domain=" + domain)) +
        ((secure == true) ? "; secure" : "");
    }

    //  Function to delete a cookie. (Sets expiration date to current date/
             Âtime)
    //    name - String object containing the cookie name
    //
    function DeleteCookie (name) {
      var exp = new Date();
      exp.setTime (exp.getTime() - 1);  // This cookie is history
      var cval = GetCookie (name);
      document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
    }

    var numEyes = 4;
    var numNoses = 4;
    var numMouths = 4;

    function loadFace() {

          var eye = GetCookie("eye");
          if ((eye == null) || (eye == "")) { eye = "eye1.gif"; }
          parent.eye.location = eye;

          var nose = GetCookie("nose");
          if ((nose == null) || (nose == "")) { nose = "nose1.gif"; }
          parent.nose.location = nose;

          var mouth = GetCookie("mouth");
          if ((mouth == null) || (mouth == "")) { mouth = "mouth1.gif"; }
          parent.mouth.location = mouth;

    }

    // STOP HIDING -->
    </SCRIPT>

    </HEAD>

    <FRAMESET ROWS="150,150,150,*" onLoad="loadFace();">

      <FRAMESET COLS="400,*">
        <FRAME SRC="blank.htm" NAME="eye" MARGINHEIGHT=0
             ÂMARGINWIDTH=0 SCROLLING="no">
        <FRAME SRC="eyes.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
      </FRAMESET>

      <FRAMESET COLS="400,*">
        <FRAME SRC="blank.htm" NAME="nose" MARGINHEIGHT=0
             ÂMARGINWIDTH=0 SCROLLING="no">
        <FRAME SRC="noses.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
      </FRAMESET>

      <FRAMESET COLS="400,*">
        <FRAME SRC="blank.htm" NAME="mouth" MARGINHEIGHT=0
             ÂMARGINWIDTH=0 SCROLLING="no">
        <FRAME SRC="mouths.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
      </FRAMESET>

      <FRAME SRC="build.htm">

      <SCRIPT LANGUAGE="JavaScript">
      <!-- HIDE FROM OTHER BROWSERS


      // STOP HIDING -->
      </SCRIPT>

    </FRAMESET>


    Listing 11.8. Revised version of build.htm.
    <!-- SOURCE CODE FOR build.html -->

    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- HIDE FROM OTHER BROWSERS

    //
    //  Cookie Functions - Second Helping  (21-Jan-96)
    //  Written by:  Bill Dortch, hIdaho Design <bdortch@netw.com>
    //  The following functions are released to the public domain.
    //
    //
    // "Internal" function to return the decoded value of a cookie
    //
    function getCookieVal (offset) {
      var endstr = document.cookie.indexOf (";", offset);
      if (endstr == -1)
        endstr = document.cookie.length;
      return unescape(document.cookie.substring(offset, endstr));
    }

    //
    //  Function to return the value of the cookie specified by "name".
    //    name - String object containing the cookie name.
    //    returns - String object containing the cookie value, or null if
    //      the cookie does not exist.
    //
    function GetCookie (name) {
      var arg = name + "=";
      var alen = arg.length;
      var clen = document.cookie.length;
      var i = 0;
      while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg)
          return getCookieVal (j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
      }
      return null;
    }

    //
    //  Function to create or update a cookie.
    //    name - String object object containing the cookie name.

    //    value - String object containing the cookie value.  May contain
    //      any valid string characters.
    //    [expires] - Date object containing the expiration data of the cookie.  
    //      If omitted or null, expires the cookie at the end of the
    //    current session.
    //    [path] - String object indicating the path for which the cookie is
    //      valid.
    //      If omitted or null, uses the path of the calling document.
    //    [domain] - String object indicating the domain for which the cookie
    //      is valid.  If omitted or null, uses the domain of the calling
    //   document.
    //    [secure] - Boolean (true/false) value
    //   indicating whether cookie transmission
    //      requires a secure channel (HTTPS).
    //
    //  The first two parameters are required.  The others, if supplied, must
    //  be passed in the order listed above.  To omit an unused optional field,
    //  use null as a place holder.  For example, to call SetCookie using name,
    //  value and path, you would code:
    //
    //      SetCookie ("myCookieName", "myCookieValue", null, "/");
    //
    //  Note that trailing omitted parameters do not require a placeholder.
    //
    //  To set a secure cookie for path "/myPath", that expires after the
    //  current session, you might code:
    //
    //      SetCookie (myCookieVar, cookieValueVar, null, "/myPath", null,
    //     true);
    //
    function SetCookie (name, value) {
      var argv = SetCookie.arguments;
      var argc = SetCookie.arguments.length;
      var expires = (argc > 2) ? argv[2] : null;
      var path = (argc > 3) ? argv[3] : null;
      var domain = (argc > 4) ? argv[4] : null;
      var secure = (argc > 5) ? argv[5] : false;
      document.cookie = name + "=" + escape (value) +
        ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
        ((path == null) ? "" : ("; path=" + path)) +
        ((domain == null) ? "" : ("; domain=" + domain)) +
        ((secure == true) ? "; secure" : "");
    }

    //  Function to delete a cookie. (Sets expiration date to current date/
    //  time)
    //    name - String object containing the cookie name
    //
    function DeleteCookie (name) {
      var exp = new Date();
      exp.setTime (exp.getTime() - 1);  // This cookie is history
      var cval = GetCookie (name);
      document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
    }

    var windowNumber = 1;

    function buildFace() {

      var eye = parent.eye.location;
      var nose = parent.nose.location;
      var mouth = parent.mouth.location;

      var face = window.open("","builtFace" +
        
    windowNumber ++,"width=400,height=450");
      face.document.open("text/html");
      face.document.write('<IMG SRC="' + eye + '">');
      face.document.write('<IMG SRC="' + nose + '">');
      face.document.write('<IMG SRC="' + mouth + '">');
      face.document.close();

    }

    function randomFace() {

      var eye = "eye" + getRandom(parent.numEyes) + ".gif";
      var nose = "nose" + getRandom(parent.numNoses) + ".gif";
      var mouth = "mouth" + getRandom(parent.numMouths) + ".gif";

    parent.eye.location = eye;
    parent.nose.location = nose;
    parent.mouth.location = mouth;

    }

    function getRandom(num) {

      today = new Date();
      var bigNumber = today.getSeconds() * today.getTime() *
        
    Math.sqrt(today.getMinutes());
      var randomNum = Math.floor(bigNumber % num);

      return randomNum + 1;

    }

    function saveFace() {

      var eye = parent["eye"].location;
      var nose = parent["nose"].location;
      var mouth = parent["mouth"].location;

      var expiry = new Date;
      expiry.setTime(expiry.getTime() + 365*24*60*60*1000);

      SetCookie("eye",eye,expiry,"/");
      SetCookie("nose",nose,expiry,"/");
      SetCookie("mouth",mouth,expiry,"/");

    }

    // STOP HIDING -->
    </SCRIPT>

    </HEAD>

    <BODY BGCOLOR="#000000" TEXT="iceblue">
    <FORM METHOD=POST>
    <CENTER>
    <INPUT TYPE="button" VALUE="Build This Face" onClick="buildFace();">
    <INPUT TYPE="button" VALUE="Make A Random Face" onClick="randomFace();">
    <INPUT TYPE="button" VALUE="Save This Face" onClick="saveFace();">
    </CENTER>
    </FORM>
    </BODY>

    You may also want to extend the form in build.htm to add a button to load a saved face:

    <INPUT TYPE="button" VALUE="Load Saved Face" onClick="parent.loadFace();">

Building application with javascript code practice

Building application with javascript tutorial

Building application with javascript syntax code on this is provided for your study purpose, it will guide you to know how create and design a website using html. use it to practice and train your self online

All the tutorials on this site are free, the codes are provided for you to practice, if you want to help to improve and maintain this work, you can donate to us on.



Html tutorial guide and web design in easy steps


simple program

Events in

Functions and Objects

introduction to programming

to Java Integrating Java into

Frames Documents and Windows

Data Types in

Loops

strings maths history

insdel

Creating a Spreadsheet in

Language Reference

Building application with 1

Interactive Form object property method

Cookies read cookie set cookie get cookie

The anchor Object [C|2|3|I]

The applet Object [C|3]

The area Object [C|3]

The Array Object [C|3|I]

The button Object [C|2|3|I]

The checkbox Object [c|2|3|I]

The combo Object [C|I]

The Date Object [C|2|3|I]

The document Object [C|2|3|I]

The FileUpload Object [C|3]

The form Object [C|2|3|I]

The frame Object [C|2|3|I]

The Function Object [C|3]

The hidden Object [C|2|3|I]

The history Object [C|2|3|I]

The Image Object [C|3]

The link Object [C|2|3|I]

The location Object [C|2|3|I]

The Math Object [C|2|3|I]

The mimeType Object [C|3]

The navigator Object [C|2|3|I]

The Option Object [C|3]

The password Object [C|2|3|I]

The plugin Object

The radio Object [C|2|3|I]

The reset Object [C|2|3|I]

The select Object [C|2|3]

The String Object [C|2|3|I]

The submit Object [C|2|3|I]

The text Object [C|2|3|I]

The textarea Object [C|2|3|I]

The window Object [C|2|3|I]

Independent Functions, Operators, Variables, and Literals

All the tutorials on this site are provided for free. You can copy and print the tutorials and code on this site, but you are not allowed to reproduce this information on another website. All rights reserverd 2012
 
 
Htaccess    html   Php   javascript   Asp   css    maths  Past Questions