Window Play and Some Important DOM Methods
The getdivelementsfourways-w3cdom.html file looks at many document object methods that relate to dynamic web page alterations. The file also deals with windows and alert dialog box usage, with opening and closing windows as well as writing to them and putting images and even animated gifs in them.
The four main methods of changing document element property styles using the DOM are getElementById(), getElementsByName(), getElementsByTagName(), and changing an element’s class name (we do it two ways in this file) to alter its style property values.
A fifth way relates only to DOM arrays. There are five document object arrays which can be addressed: images, applets, links, forms, and anchors. We change all image source values in the document at once in our byimagearray() function. We don’t consider this one of the four main methods of changing document elements, since how often will you need to replace all the image sources on a page at once? (That’s quite a rollover!) And if you only want to change some of them, how will you know which are which? Image array numbers aren't that helpful. Also, one of the other four ways of changing document element property styles is bound to be better than this. Node-based JavaScript routines are even worse, for most normal website creation purposes, however much they may be fun to fool with.
There are open(), close(), write(), writeln() document object methods in addition to the document object methods getElementById(), getElementsByName(), and getElementsByTagName(). We’ll be exploring them all here.
First, let’s look at the byclass() function, which is one of our two class changing functions. Note the f flag, which alternates between 0 and 1 every other time the first image is clicked. It moderates the resizing of all five images at once from class c to class d alternately. The relevant CSS style rules from the styling section are shown below the function. This function happens to be set up to alternate the class name value for all images whose id is from n1 to n5. The idletter value sent to the function as a parameter is n and the value of i in the for loop is allowed to increment to 5 but no higher. When you concatenate the two together and make it a string you get from n1 to n5. Only one element can have a certain id, so the getElementById() method is best at changing one particular element at a time. But if you want all the classes changed on many elements at once that don’t necessarily have the same tags or names, a range of id names will do it. The reason this entire function is so powerful is that you can pick and choose some but not all of a certain type of element and choose to change from one to dozens of its style property values all at once without knowing any document object array numbers. We could have combined name and class rather than id and class and got an equally powerful function—it depends on your needs.
A warning is in order about using class changing functions. If they're the only type of element changing functions you'll be using, then there's nothing to be concerned about. But if you'll be mixing other methods with class changing ones, be aware that in some cases class changes won't work if you’ve used other methods first. It’s why our class changing function byclass() is first. Try out this getdivelementsfourways-w3cdom.html file and you'll soon learn that even though if you click the first image several times it will change all images alternately bigger and smaller like it’s programmed to do, the minute you click any of the other images, the first image will be unresponsive from then on. This is because of the specificity aspect of the CSS cascade rules which say class is less specific than id so it loses any contest.
function byclass(idletter,classofnextwidth){ if(!f){f=1}else{f=0;classofnextwidth="c";}
for(var i=1;i<6;i++){q=(idletter + i).toString();
var e=document.getElementById(q);
e.className = classofnextwidth;}
}
.c {width:72px;}
.d {width:100px;}
Here's the other class changing function, and if there were id-based span tag changers in the page code, they would win any contests with this function because of what we've already discussed. It changes all span tags alternately between classes u and v, which takes the word "bottom" (the only word between span tags) and changes it between black and red—sort of like when a young would-be rapper’s mother catches him using the "b" word to refer to women. We know, don’t quit our day jobs. This function changes all tags of a type to a new class. The CSS style rules are given below the function. Its comprehensiveness powers are obvious, but it might often be overkill in that it would be too comprehensive.
function byclassintag(thetag, thenewclassvalue) {if(!h){h=1}else{h=0;thenewclassvalue='u';}
var e=document.getElementsByTagName(thetag);
for(var i=0;i<e.length;i++){e[i].className = thenewclassvalue;}
}
.u {color:black;}
.v {color:red;}
The getElementById() method is the most-used DOM method. If you dump the second line of the function, you'd see its normal configuration. But here it’s being used to change one style property value of all the elements with ids of n1 to n5. One would, in practice, be more likely to use the name attribute on a selection of elements and change them all—like the function below byid()—than make the getElementById() method do it. But for our demonstration purposes, we wanted you to see how the five page images could use any of five methods to change all of them at once.
function byid(idletter,nextwidth){
for(var i=1;i<6;i++){q=(idletter + i).toString();
var e=document.getElementById(q);
e.style.width=nextwidth;}
}
The byname() function is perfect for changing a style property value on a selection of elements that aren't necessarily all of one HTML tag type or all of the elements that have a certain HTML tag. No, we didn’t just repeat ourselves—read it again. Here the elements with a certain name are all to be found in a convenient array so you can deal with them en masse.
function byname(thename,nextwidth){
var e=document.getElementsByName(thename);
for(var i=0;i<e.length;i++){e[i].style.width = nextwidth;}
}
The bytag() function is perfect for any time you wish to change property style values of all the tags of one type, such as <img>, <div>, <p>, <input>, <span>, etc. The elements with one tag type are found in an array so a simple for loop can process them efficiently.
function bytag(thetag,nextwidth){
var e=document.getElementsByTagName(thetag);
for(var i=0;i<e.length;i++){e[i].style.width = nextwidth;}
}
A less common method of getting at all the images in a document is to use the image array—one of the five document object arrays. Here the source image for all the page’s images is switched, and the g flag assures that the n101.jpg image alternates with the n116.jpg image when the button gets depressed.
function byimagearray(newimage){if(!g){g=1}else{g=0;newimage='n101.jpg';}
var e=document.getElementsByTagName("img");
for(var i=0;i<e.length;i++){document.images[i].src = newimage;}
}
Next we have the divs with the pictures of website buttons in them. They all have class b (the class b CSS rules are at the conclusion of the divs below). They're wide to accommodate the text next to the buttons. The one inline style we felt appropriate for this demonstration is the one that gives the vertical position of each div. Class b covers the other necessities. The divs have onClick event handlers that activate the images, running the various functions and passing the needed parameters. Note that all the images have name, id, src, and class attributes that the functions use to deal with the whole set of images.
<div class="b" style="top:40px;" onClick="javascript:byclass('n','d')"><img src="n101.jpg" id="n1" name="n" class="c"><b> click for change by class</b></div>
<div class="b" style="top:110px;" onClick="javascript:byid('n','120px')"><img src="n101.jpg" id="n2" name="n" class="c"><b> click for change by id</b></div>
<div class="b" style="top:180px;" onClick="javascript:byname('n','140px')"><img src="n101.jpg" id="n3" name="n" class="c"><b> click for change by name</b></div>
<div class="b" style="top:250px;" onClick="javascript:bytag('img','160px')"><img src="n101.jpg" id="n4" name="n" class="c"><b> click for change by tag</b></div>
<div class="b" style="top:320px;" onClick="javascript:byimagearray('n116.jpg')"><img src="n101.jpg" id="n5" name="n" class="c"><b> click for change by image array</b></div>
.b {position:absolute; height:28px; width:400px; left:200px;}
And now we’ll consider the other common way to activate functions besides graphics links: text links. The word javascript tells the link to find its target in the JavaScript functions, not on some other HTML page or an anchor on this page. Note the span tag with its class u which we've already discussed above—the text color of the word BOTTOM alternates. The link that runs the span tag is next. The next two links open and close a window with an image in it. The next two links open and close a window with a bit of text followed by an animated gif. If you click the link in IE, the window moves. But in Nutscape 7, it loads the big window’s content into the little window; this is a serious browser bug, so if any of you out there can figure out a work-around, contact us ASAP. The next two links open and close a window with for-loop-generated text followed by an image of a blank popup menu.
<P>CLICK FROM TOP TO <span class="u">BOTTOM</span>, ONCE EACH</P>
<a HREF="javascript:byclassintag('span', 'v')">change BOTTOM</a><br>
<a HREF="javascript:pictureWindow()">open picture window</a><br>
<a HREF="javascript:shutWindow()">close picture window</a><br>
<a HREF="javascript:createWindow()">open tiny window</a><br>
<a HREF="javascript:dumpWindow()">close tiny window</a><br>
<a HREF="javascript:openWindow()">open window</a><br>
<a HREF="javascript:closeWindow()">close window</a><br>
The next two links open alert dialog boxes. The first is small and the second one shows that you can display a huge amount of material in such a box if you want to. But both boxes illustrate the fact that the alert box is a great tool for 1001 uses.
If you're debugging and want to find out what your JavaScript variable values are at a certain place in your code, this is a way to stop the action and peruse the values. You simply use code like alert(x + ":" + y + ":" + z); to see your x, y, and z values. Or if you need to see how the values change and you don’t know when a weird change is occurring, either use a step-through debugger or the status bar. Tracking values there means you can see them change as it happens. Use code like window.status= x + ":" + y + ":" + z; or if you actually think you might be enough of a hair-brain to forget what you're tracking, use window.status= "x:" + x + ", y:" + y + ", z:" + z;. If you use the document.write() method in debugging, you'll have to hit the back button to get back to the page you were testing. We prefer the status bar and alert box strategies.
<a HREF="javascript:alerted()">alert box</a><br>
<a HREF="javascript:alerting()">bigger alert box</a><br><br>
This link starts writing a new document, so it isn't that hot a tool for changing text on a the page you're on, dynamically, without leaving the page. But, not to worry, you can use obj=document.getElementById(q); obj.innerHTML= "here's the replacement text"; anytime you need to mess with your current web page’s text on the fly. You don’t need document.write() for that!
<a HREF="javascript:documentwrite()">document writing</a><br>(press the back<br>button once you<br>leave here . . .)
After a quick browser sniff—since later we will need to know if Microsoft or Nutscape is to blame for the browser, here are the functions that perform all the wonders we just got through discussing:
var Netscape=(navigator.appName.indexOf("Netscape") != -1);
Note that we give the URL of the window contents here in the first parameter instead of an empty string since we want a specific image in window object w. The second parameter, ww, is just a name we can use to reference window object w in link or something. And the third parameter is just a sequence of window parameters that must not have any spaces in it:
function pictureWindow(){w=window.open("circuitboard-smallblue.jpg","ww","top=117,left=540,width=170,height=132");}
Here we close window w and avoid errors by making sure it exists and isn't already closed:
function shutWindow(){if(w && !w.closed) w.close();}
The next function is IE only, although we don’t know anything about Nutscape that should prevent a moveTo() window method from working like it should rather than abandoning its contents and opting to jam the big window’s contents into itself. I smell B-U-G! If any of you geniuses out there discover a work-around, tell us, and if the solution is simple and obvious, please don’t use the word "dumb" in your reply! Everyone is entitled to a brain fart occasionally without teasing! So the question then becomes: Is it our brain fart or Nutscape’s? and why does it work great in IE? Don’t forget to remove the ! before Netscape for testing your fix on Nutscape.
function createWindow(){if (!Netscape) { var aa="<html><head><\/head><body><p>imagine all the great stuff you can stick in here<\/p><a HREF=\'#\' onClick=\'javascript:moveTo(644,344);\'><img src=\'anim3.gif\' width=\'72\' height=\'28\'><\/a><\/body><\/html>"; r = window.open("","rr","top=117,left=540,width=100,height=160");
r.document.write(aa);r.document.close();}
else
{alert("the moveTo will mess up on Netscape; contact us if you know why!");}}
function dumpWindow(){if(r && !r.closed) r.close();}
As you can see when you test functions like the following, both IE and Netscape can use the document.write() method to create windows on the fly, with both text and images in them, without bombing, doing weird things, or every voting for Bush again (actually, that in and of itself qualifies as a weird thing so we were redundant there). Observe that the writeln() method is used because the <br> won't do much without a carriage return in such a situation, and that’s what this method does.
function openWindow(){newWindow = window.open("","w","top=117,left=540,width=220,height=400");
newWindow.document.write("<html><head><\/head><body><p>here comes some junk<\/p>");
for(i=0;i<11;i++){newWindow.document.writeln("loop is at number " + i + "<br>");}
newWindow.document.write("<br><img src='r14.gif' width='88' height='115'><\/body><\/html>")
newWindow.document.close();}
function closeWindow(){if(newWindow && !newWindow.closed) newWindow.close();}
This alert box argument merely states the obvious: countless uses for message delivering to website visitors or JavaScript programmers are possible with this simple tool. The \n is an "escaped" new line command. Escaped means put in a backslash so the following character will not be wrongly interpreted.
function alerted(){alert("variable without quotes or\n message in quotes");}
This nutty alert box in no way proves we were high when we wrote the code. Nor does it prove we weren't! The numbers one gets when one leaves randomly generated numbers the way they are, rather than using the Math.floor() or parseInt() methods on them, have 12 decimal places. So alert() methods can have thousands of characters worth of data in them, enough for a lengthy monologue about whatever it is you’ve been dying to get off your chest, even defective silicone implants, you JavaStrippers. Or would that be a lengthy mamologue? Oops, we seem to be giving away the answer to the high-or-not-high question here. A thousand pardons . . .
function alerting(){b="start";a="make a long string using a for loop and some numbers converted to strings, and concatenated strings";
for(i=0;i<101;i++){b=b+" " + (i*Math.random()*999).toString();}
thestring=b+"------" + a;
alert(thestring);}
If you use this method, you'll get a new document on a new page, but won't lose your current one unless you forgot how back buttons work.
function documentwrite(){document.write("See? You've written a new page. (Press BACK button.)");}