HOME        BACK

Tutorial 5: Example 1

Form and Image array objects. Reference to a JavaScript objects.

Input:

<p>Internet Explorer 3 and Netscape 5 and previous require Document object.</p>
<FORM NAME="form_1">
<INPUT NAME="input_button_0" TYPE="button" VALUE="button1">
<INPUT NAME="input_text_1" TYPE="text" VALUE="Text data">
<TEXTAREA NAME="textdata_2" rows="1" cols="20">This is text area data</TEXTAREA>
<INPUT NAME="input_submit_3" TYPE="submit" VALUE="SUBMIT HERE">
</FORM>

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

with (document) {
  writeln("<BR>Form array:<BR>");
  for (var count = 0; count < form_1.length; count++) {
    writeln("form_1[" + count + "].name = " + form_1[count].name + "<BR>");
    writeln("form_1[" + count + "].value = " + form_1[count].value + "<BR>");
    writeln("form_1[" + form_1[count].name + "].value = " + form_1[form_1[count].name].value + "<BR>");
  }
}

// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>

Output:

Internet Explorer 3 and Netscape 5 and previous require Document object.

 

Input:

<IMG NAME="image_name_1" SRC="image/GoldPetals.jpg" ALT="images/GoldPetals.jpg" WIDTH="50" HEIGTH="50">
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS

with (document) {
  writeln("<BR>Image array:<BR>");
  for (attribute in image_name_1) {
    writeln("image_name_1[" + attribute + "] = " + image_name_1[attribute] + "<BR>");
  }
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>

Output:

images/GoldPetals.jpg

 

Input:

<FORM NAME="form_2">
<INPUT NAME="input_button_0" TYPE="button" VALUE="button1">
<INPUT NAME="input_text_1" TYPE="text" VALUE="Text data">
<TEXTAREA NAME="textdata_2" rows="1" cols="20">This is text area data</TEXTAREA>
<INPUT NAME="input_submit_3" TYPE="submit" VALUE="SUBMIT HERE">
</FORM>
<p>Internet Explorer 4 and Netscape 6 and later do not require Document object.
If you have Internet Explorer 3 or Netscape 5 or previous,
you will not see the result of Form array form_2 in the following example:</p>

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

document.writeln("<BR>Form array:<BR>");
for (var count = 0; count < form_2.length; count++) {
  document.writeln("form_2[" + count + "].name = " + form_2[count].name + "<BR>");
  document.writeln("form_2[" + count + "].value = " + form_2[count].value + "<BR>");
  document.writeln("form_2[" + form_2[count].name + "].value = " + form_2[form_2[count].name].value + "<BR>");
}

// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>

Output:

Internet Explorer 4 and Netscape 6 and later do not require Document object. If you have Internet Explorer 3 or Netscape 5 or previous, you will not see the result of Form array form_2 in the following example:

Window Object

Input:

<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
document.writeln("Window object propeties:<BR>");
for (prop in window) {
  document.writeln("prop = " + prop + ";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
  document.writeln("window[" + prop + "] = " + window[prop] + "<BR>");
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>

Output:

 

window.open() and window.location() functions

Input:

<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
function open_function() {
  open_new_window = window.open();
  open_new_window.document.writeln("<BR>Open object propeties:<BR>");
  for (prop in open_new_window) {
    open_new_window.document.writeln("prop = " + prop + ";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
    open_new_window.document.writeln("open_new_window[" + prop + "] = " +     open_new_window[prop] + "<BR>");
  }
  open_new_window.document.writeln("<BR><BR><FORM><BR>");
  open_new_window.document.writeln("<INPUT TYPE=button NAME='quit' " +
"VALUE='Close this window' " + "onClick='self.close();'><BR>");
  open_new_window.document.writeln("<INPUT TYPE=button NAME='quit_parent' " +
"VALUE='Close this window eventhough use self.parent.close()' " + "onClick='self.parent.close();'><BR>");
  open_new_window.document.writeln("</FORM><BR>");
}

// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>


<FORM NAME="form_3">
CREATE A NEW EMPTY WINDOW: onClick=&quot;window.open();&quot;<BR>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open();"><BR><BR>

CREATE A NEW EMPTY WINDOW WITH NAME=window_1:<BR>
onClick=&quot;window.open('', 'window_1');&quot;<BR>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('', 'window_1');"><BR><BR>

CREATE A NEW PAGE WINDOW WITH SAME NAME window_1:<BR>
onClick="window.open('Tutorial5Ex1.html', 'window_1');"<BR>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('Tutorial5Ex1.html', 'window_1');"><BR><BR>

CREATE A NEW EMPTY WINDOW, FOCUS STILL IN THIS MAIN WINDOW:<BR>
onClick="window.open(); self.focus();"<BR>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open(); self.focus();"><BR><BR>

GET A NEW PAGE ON THE SAME WINDOW<BR>
onClick="window.open('Tutorial5.html', '_self');"<BR>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('Tutorial5.html', '_self');"><BR><BR>

RELOAD THE SAME PAGE<BR>
onClick="window.location.reload();"<BR>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.location.reload();"><BR><BR>

WINDOW LOCATION HREF SET TO NEW PAGE<BR>
onClick="window.location.href='Tutorial5.html';"<BR>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.location.href='Tutorial5.html';"><BR><BR>

WINDOW LOCATION HREF = WINDOW LOCATION HREF. SAME AS RELOAD THE SAME PAGE<BR>
onClick="window.location.href=window.location.href;"<BR>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.location.href=window.location.href;"><BR><BR>

CREATE A NEW EMPTY WINDOW AND PRINT OPEN() PROPERTIES USE NEW_WINDOW_TARGET_NAME<BR>
open_new_window = window.open();<BR>
open_new_window.close(); self.close();<BR>
<INPUT TYPE="button" VALUE="CLICK HERE TO OPEN open_new_window"
onClick="open_function();"><BR>
<INPUT TYPE="button" VALUE="CLICK HERE TO CLOSE open_new_window"
onClick="open_new_window.close();"><br><br>

CREATE A NEW EMPTY WINDOW WITH EMPTY OPTIONS<br>
onClick="window.open('','','');"<br>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('','','');"><BR><BR>

CREATE A NEW EMPTY WINDOW WITH OPTIONS<br>
onClick="window.open('','','width=100,height=100');"<br>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('','','width=100,height=100');"><BR><BR>

CREATE A NEW EMPTY WINDOW WITH OPTIONS<br>
onClick="window.open('','','directories=yes');"<br>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('','','directories=yes');"><BR><BR>

CREATE A NEW EMPTY WINDOW WITH OPTIONS<br>
onClick="window.open('','','location=yes');"<br>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('','','location=yes');"><BR><BR>

CREATE A NEW EMPTY WINDOW WITH OPTIONS<br>
onClick="window.open('','','menubar=yes');"<br>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('','','menubar=yes');"><BR><BR>

CREATE A NEW EMPTY WINDOW WITH OPTIONS<br>
onClick="window.open('','','resizable=yes');"<br>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('','','resizable=yes');"><BR><BR>

CREATE A NEW EMPTY WINDOW WITH OPTIONS<br>
onClick="window.open('','','scrollbars=yes');"<br>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('','','scrollbars=yes');"><BR><BR>

CREATE A NEW EMPTY WINDOW WITH OPTIONS<br>
onClick="window.open('','','status=yes');"<br>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('','','status=yes');"><BR><BR>

CREATE A NEW EMPTY WINDOW WITH OPTIONS<br>
onClick="window.open('','','toolbar=yes');"<br>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('','','toolbar=yes');"><BR><BR>

CREATE A NEW EMPTY WINDOW WITH OPTIONS<br>
onClick="window.open('','','directories=yes,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,toolbar=yes');"<br>
<INPUT TYPE="button" VALUE="CLICK HERE"
onClick="window.open('','','directories=yes,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,toolbar=yes');"><BR><BR>

<BR><BR>

</FORM>

Output:

CREATE A NEW EMPTY WINDOW: onClick="window.open();"


CREATE A NEW EMPTY WINDOW WITH NAME=window_1:
onClick="window.open('', 'window_1');"


CREATE A NEW PAGE WINDOW WITH SAME NAME window_1:
onClick="window.open('Tutorial5Ex1.html', 'window_1');"


CREATE A NEW EMPTY WINDOW, FOCUS STILL IN THIS MAIN WINDOW:
onClick="window.open(); self.focus();"


GET A NEW PAGE ON THE SAME WINDOW
onClick="window.open('Tutorial5.html', '_self');"


RELOAD THE SAME PAGE
onClick="window.location.reload();"


WINDOW LOCATION HREF SET TO NEW PAGE
onClick="window.location.href='Tutorial5.html';"


WINDOW LOCATION HREF = WINDOW LOCATION HREF. SAME AS RELOAD THE SAME PAGE
onClick="window.location.href=window.location.href;"


CREATE A NEW EMPTY WINDOW AND PRINT OPEN() PROPERTIES USE NEW_WINDOW_TARGET_NAME
open_new_window = window.open();
open_new_window.document.writeln("<BR>Open object propeties:<BR>");
open_new_window.close(); self.close();



CREATE A NEW EMPTY WINDOW WITH EMPTY OPTIONS
onClick="window.open('','','');"


CREATE A NEW EMPTY WINDOW WITH OPTIONS
onClick="window.open('','','width=100,height=100');"


CREATE A NEW EMPTY WINDOW WITH OPTIONS
onClick="window.open('','','directories=yes');"


CREATE A NEW EMPTY WINDOW WITH OPTIONS
onClick="window.open('','','location=yes');"


CREATE A NEW EMPTY WINDOW WITH OPTIONS
onClick="window.open('','','menubar=yes');"


CREATE A NEW EMPTY WINDOW WITH OPTIONS
onClick="window.open('','','resizable=yes');"


CREATE A NEW EMPTY WINDOW WITH OPTIONS
onClick="window.open('','','scrollbars=yes');"


CREATE A NEW EMPTY WINDOW WITH OPTIONS
onClick="window.open('','','status=yes');"


CREATE A NEW EMPTY WINDOW WITH OPTIONS
onClick="window.open('','','toolbar=yes');"


CREATE A NEW EMPTY WINDOW WITH OPTIONS
onClick="window.open('','','directories=yes,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,toolbar=yes');"




Document Object

Input:

<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
document.writeln("Document object propeties:<BR>");
for (prop in document) {
  document.writeln("prop = " + prop + ";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
  document.writeln("document[" + prop + "] = " + document[prop] + "<BR>");
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>

Output:

Location Object

Input:

<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
document.writeln("<BR>Location object propeties:<BR>");
for (prop in window.location) {
  document.writeln("prop = " + prop + ";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
  document.writeln("window.location[" + prop + "] = " + window.location[prop] + "<BR>");
}

document.writeln("window.location = " + window.location + "<BR>");

document.writeln("escape(window.location) = " + escape(window.location) + "<BR>");
document.writeln("unescape(window.location) = " + unescape(window.location) + "<BR>");
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>

Output:

History Object

Input:

<script language="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
document.writeln("<BR>History object propeties:<BR>");
for (prop in window.history) {
  document.writeln("prop = " + prop + ";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
  document.writeln("window.history[" + prop + "] = " + window.history[prop] + "<BR>");
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>

Output:

Save (Copy) this page address then goto a different page, then goto the previous saved (Paste) address. Then, you can click the following buttons:

 

Navigator Object

Input:

<script language="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
document.writeln("<BR>Navigator object propeties:<BR>");
for (prop in window.navigator) {
  document.writeln("prop = " + prop + ";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
  document.writeln("window.navigator[" + prop + "] = " + window.navigator[prop] + "<BR>");
}

with (navigator) {
  document.writeln("navigator.appCodeName=" + appCodeName + "<BR>");
  document.writeln("navigator.appName=" + appName + "<BR>");
  document.writeln("navigator.appVersion=" + appVersion + "<BR>");
  document.writeln("navigator.platform=" + platform + "<BR>");
  document.writeln("navigator.userAgent=" + userAgent + "<BR>");
  document.writeln("navigator.javaEnabled()=" + javaEnabled() + "<BR>");
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>

Output:

 

// Netscape does not support the following JavaScript built-in functions
//document.writeln("encodeURI(window.location) = " + encodeURI(window.location) + "<BR>");
//document.writeln("encodeURIComponent(window.location) = " + encodeURIComponent(window.location) + "<BR>");
//document.writeln("decodeURI(window.location) = " + decodeURI(window.location) + "<BR>");
//document.writeln("decodeURIComponent(window.location) = " + decodeURIComponent(window.location) + "<BR>");

HOME        BACK

Hosted by www.Geocities.ws

1