This is a demo of writing to various windows: (you can see how it works in the right paired frame by clicking a button at the bottom of this page) To be safe include your JavaScript above the </head> tag as below: _________________________________________________________ </TITLE><HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript - Always include your JavaScript here! // - End of JavaScript - --> </SCRIPT> </HEAD> ___________________________________________ The <!-- above tells a non JavaScript browser that what follows //is a comment. The --> ends the comment. The // hides that line from a JavaScript enabled browser. BEGIN TUTORIAL: __________________________________________________________ <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript - // Anything behind a // is hidden.; // A semi-colon ";" marks the end of a line, not always necessary,; // but always safe.; // You can write to a page before it is loaded using; // document.write("your text goes here").; // Most keyboard formatting will produce an error.; // You can use \r to produce a carriage return and \t a tab; // providing you include them in a <PRE></PRE> tag.; // See below where the same thing is written three different ways.; // Actual commands that will execute are included between.; // ==========, everything else is superfluous; //============================================================ document.write("1.This is it"+"2.This \r is \t\t it"+"<pre>3.This \r is \t\t it</pre>"); //============================================================ // document.write(), writes to a HTML page, anything in "" is called; // literal text. Thus the above statement is told to write; // three literal expressions.; // Only the third one will have formatting!; // The program line above will appear to run on because a carriage return will; // produce an error.; // You can have limited formatting however using HTML; // as in below; //============================================================ document.write("4.This is it"+"<BR>5.This <BR> is \t\t it"+"<pre>6.This \r is \t\t it</pre>"); //============================================================ // To be safe you should use the following with your last "write" to a HTML; // window; //============================================================ document.close(); //============================================================ // On the other hand the alert window behaves differently.; //============================================================ alert("7.This \r is it"); alert("8.This <BR> is it"); //============================================================ // The first above will format withouy the <PRE></PRE> tags,; // the second will not be formatted but will include the <BR> as text.; // An "if" statement is a conditional with the form; // if(condition is true){do this}else{do this}.; // It is a good match to the confirm() window which asks the user; // to say whether something is true or not,as in the following.; // (you can also use conditions like a<b or a!=b [a not equal b]; // or a==b[ a identical to b]); //============================================================= if(confirm("do you want to \r go on")){ var say=prompt("what do you want to say",""); //============================================================= // The ,"" allows for the specification of a default value // Providing the user has agreed to the confirm; // "var say" defines "say" as a variable containing what the user; // has typed in response to the prompt.; // The following opens a new window and; // prints what the user has said.; //============================================================= var msg=open("","NewWindow"); msg.document.write("<html><head></head><body>"+say+"<FORM><INPUT TYPE=Button VALUE='OK' onClick='self.close()'></FORM><BR>"); msg.document.close(); }else{alert("BYE")}; //============================================================= // The first statement above opens a new window and gives; // it the variable name "msg".; // The second statement writes the opening HTML code for the; // page followed by the contents of the variable 'say' [NO QUOTES]; // and then appends a JavaScript button which will; // close the window.; // Note that within the "" marks of document.write(); // you must use ' wherever " would normally occur. // You can also control the size of the new window and; // whether the window has scrollbars, toolbar, etc.; // The third line assures that all the data is written to the window.; // This is particularly important if you include an image. ; // The fourth line, "}else..." closes the first "if(confirm)" response and .; // gives what happens if the user does not agree to the confirm.; // The <BR> is appended to the end of the message because without it // sometimes, unpredictably, the last line may not display. // - End of JavaScript - --> </SCRIPT> ______________________________________________________________________________ END JavaScript TUTORIAL 1 </HEAD>
The button at the right will run the function "showit()" in the right frame (note for MSIE users) , which contains the JavaScript code shown above. The code for the button and associated material is shown below.
The page you are on is a frameset page. The code for the page is:
<FRAMESET Cols="75%,25%"> <FRAME SRC="write.htm" Name="write" Scrolling="yes"> <FRAME SRC="write2.htm" Name="write2" Scrolling="no"> </FRAMESET>. This page is called the "parent", write.html is put in the left side of the page, and is called frames[0] and write2.htm on the right is frames[1].
The code for the button is <INPUT TYPE=Button VALUE="see it work" onClick="parent.frames[1].showit()">, which says when the button is clicked the function showit() in frames[1], i.e., the second frame. (There are different ways to address this.)
As you study the above script you will want to run the code on the right several times. You can't do it by clicking the above button because you can't (in general) write to a page which is already in existence. You can't reset the right window by pressing "reload" in your browser (try it), but you can by clicking . The code for this is:
<INPUT TYPE=Button VALUE="reload" onClick="parent.location.reload()">
This is sometimes called a hard reload. If you omit "parent." you would only reload this frame. ( This works with NS 4.03, 3.01 and MSIE 3.01 but does not work with NS 2.01)


Next lesson:Functions

© Carl Adler 1997











Microsoft did not licence JavaScript from NetScape but, instead developed there own version, JScript, which has some "holes" in it. With some versions of MSIE the following button might not work, though the script will work if entered in a page before it is opened . IE does not like to write to an existing page even if blank. BACK.