JavaScript Tip of the Week for October 21, 1996: The Art of Dynamic HTML Creation | Source Code | WebReference

JavaScript Tip of the Week for October 21, 1996: The Art of Dynamic HTML Creation | Source Code

JavaScript Tip of the Weekfor October 21, 1996: Source Code: The Art of Dynamic HTML Creation

This code goes in the right before the main FRAMESET:

/* This code is Copyright (c) 1996 Nick Heinle and Athenia Associates, 
 * all rights reserved. In order to receive the right to license this 
 * code for use on your site the original code must be copied from the
 * Web site webreference.com/javascript/. License is granted to user to 
 * reuse this code on their own Web site if and only if this entire copyright
 * notice is included. Code written by Nick Heinle of webreference.com.
 */
function baseHREF() {
pathURL = window.location + ''; //little bug with URLs and strings
pathDir = pathURL.lastIndexOf ('/', pathURL.length);
pathBase = pathURL.substring (0, pathDir + 1);
return pathBase;
}
function createPage () {
var name = parent.main.document.survey.user_name.value;
var level = parent.main.document.survey.user_level.selectedIndex;
var learn = parent.main.document.survey.user_learn.selectedIndex;
        if (learn == 0) how_to = 'play sounds';
        if (learn == 1) how_to = 'save space';
        if (learn == 2) how_to = 'play with images'; 
  
        if (level == 0) {
        comment = 'Since you are just beginning to learn JavaScript';
                if (learn == 0) tip = 'The <A HREF = "../960826/sound_music.html" TARGET = "_top">LiveAudio</A> Tip.';
                if (learn == 1) tip = 'The <A HREF = "../960923/part01.html" TARGET = "_top">Simple Select Menu</A> Tip.';
                if (learn == 2) tip = 'The <A HREF = "../960902/image_object.html" TARGET = "_top">Image Object</A> Tip.';
        }
        if (level == 1) {
        comment = 'Since you have been using JavaScript for a while';
                if (learn == 0) tip = 'The <A HREF = "../960916/part02.html" TARGET = "_top">LiveConnect</A> Tip.';
                if (learn == 1) tip = 'The <A HREF = "../960902/select_boxes.html" TARGET = "_top">Modifiable Select Menus</A> Tip.';
                if (learn == 2) tip = 'The <A HREF = "../960930/index.html" TARGET = "_top">Highlighted Menus</A> Tip.';
        }
        if (level == 2) {
        comment = 'Since you are experienced in JavaScript';
                if (learn == 0) tip = 'The <A HREF = "../960916/part02.html" TARGET = "_top">LiveConnect</A> Tip.';
                if (learn == 1) tip = 'The <A HREF = "../960902/select_boxes.html" TARGET = "_top">Modifiable Select Menus</A> Tip.';
                if (learn == 2) tip = 'The <A HREF = "../960923/part02.html" TARGET = "_top">Animated Billboard</A> Tip.';
        }
newPage = '<BASE HREF = "' + baseHREF() + '">' +
          '<HTML><HEAD><TITLE>Your Tip</TITLE></HEAD>' +
          '<BODY BGCOLOR = "#FFFFFF" TEXT = "#000000" LINK = "#B8860B" ALINK = "#8B0000" VLINK = "#B8860B">' +
          '<TABLE BORDER = 0 CELLPADDING = 5><TR><TD ALIGN = CENTER BGCOLOR = "#EDEDED"><FONT SIZE = 4>Your Tip:</FONT></TD></TR>' +
          '<TR><TD>Welcome to JavaScript Tip of the Week ' + name + '. ' + comment + ' and you want to learn how to ' + how_to + ', I suggest:</TD></TR><TR><TD BGCOLOR = "#EDEDED"> ' + tip + '<TD></TR></TABLE>' + 
          '</BODY></HTML>';
parent.draw.location = 'javascript:parent.newPage';
}
function init() {
blankFrame = '<HTML><BODY BGCOLOR = "#FFFFFF"></BODY></HTML>';
parent.draw.location = 'javascript:parent.blankFrame';
}
Then, right after the code include this FRAMESET:
    <FRAMESET onLoad = "init()" COLS = "30%, 60%" FRAMEBORDER = NO BORDER = 0>
    <FRAME 
     SCROLLING=AUTO
     SRC = "javascript:parent.blankFrame"
     NAME = "draw"
     MARGINWIDTH = 2 
     MARGINHEIGHT = 2>
    <FRAME 
     SCROLLING=AUTO
     SRC = "part01_index.html"
     NAME = "main" 
     MARGINWIDTH = 2 
     MARGINHEIGHT = 2>
    </FRAMESET>


These are the forms that were used to control the app:

    <FORM NAME = "survey">
    First Name: <INPUT TYPE = TEXT NAME = "user_name"></TD></TR>
    Expertise in JavaScript:
    <SELECT NAME = "user_level">
    <OPTION>Beginner
    <OPTION>Intermediate
    <OPTION>Advanced</SELECT>
    I want to learn how to:
    <SELECT NAME = "user_learn">
    <OPTION>Play Sound
    <OPTION>Save Space
    <OPTION>Play with Images</SELECT>
    <INPUT TYPE = BUTTON VALUE = "Find Tip"
     onClick = "if (parent.draw) parent.createPage();">
    <INPUT TYPE = BUTTON VALUE = "Lose the Frames"
     onClick = "parent.location  = 'part02_index.html'">
    <FORM>