Break; and continue; statements are essential when working with complex loops. They can be very useful. You can use them to end a loop prematurely, or skip the rest of the loop to start over at the beginning. Here is how you implement it:

<script type="text/javascript">
//build our array
var array1 = new Array();
array1[0] = 0;
array1[1] = 1;
array1[2] = 2;
array1[3] = 3;
array1[4] = 4;

var numArray = array1.length;
for(var i=0; i<numarray ; i++){
	if (array1[i] == 2){
		continue; //skip to the end of the for loop, then start over after incrementing by 1
	}else if (array1[i] == 3){
		break; //end the for loop, and execute code after the loop
	}

	alert("still in for loop: " + i);
}
	alert("after for loop: " + i);
</script>

The above code should have created popups for the numbers “0″, “1″, and “3″. This is because the “continue;” statement makes the code skip to the end of the loop, not executing any of the rest of the loop code, then starts over at the beginning of the loop after incrementing i by 1.

The “break;” statement causes the loop to end and the code after the loop to be executed. i is NOT incremented anymore and thus remains at 3.

You can also use “return;” to just end a function prematurely.

This has been tested in FF3, IE7.
Say you wanted to add a function that would be inherent to an element, say you wanted to write an “arrayName.clone()” method (as found in java, but not JavaScript). Here’s how:

<script type="text/javascript">
Array.prototype.clone = function (){
	var newArray = new Array(this.length);

	for(var i=0; i < this.length; i++ ){
		newArray[i] = this[i];
	}

	return newArray;
}

</script>

This would have the same effect as the following code:

<script type="text/javascript">
function cloneArray(oldArray){
	var newArray = new Array(oldArray.length);

	for(var i=0; i < oldArray.length; i++ ){
		newArray[i] = oldArray[i];
	}

	return newArray;
}

</script>

The difference here being that for the prototype function you call it by using “arrayName.clone()” and for the second function you use cloneArray(arrayName). The both functions return the same thing.

Why not just use the following code below, you might ask? Because what you are doing below is just creating a new reference to the same array object. So if you made changes to oldArray, newArray would reflect those same changes. The functions above actually create and return a brand new array.

var oldArray = new Array();
var newArray = oldArray;

It seems that Firefox and IE7 can use and replace the innerHTML of a DIV just fine. However when you try it with a table or a tbody tag (among others, I’m sure), it just breaks apart miserably in IE7 (Firefox works just fine). You’ll most likely get a JavaScript error that states “Unknown runtime error” and then point to the line that uses the innerHTML of the element that isn’t a DIV.

The solution? There are 2 possible workarounds. 1) Use a DIV, or 2) use appendChild(). I will show how to use appendChild here. I’ve tested this in IE7, FF, and Safari (Mac) and it should work. Thanks to Jeremy Keith I was able to figure it out after hours of struggling.

The following code should probably be within a function you call.

<script type="text/javascript">

var output = "dynamic output from earlier should go in this variable";

//first, create the table row and the table cell
var newtr = document.createElement("tr");
var newtd = document.createElement("td");

//place the output variable within the table cell, innerHTML here works because it's not on the page yet
//then, append the cell to the row, basically places the "<td>output here</td>" tags within the <tr></tr> tags
newtd.innerHTML = output;
newtr.appendChild(newtd);

//last, append the whole thing to the element, here it'll find the element with the "tbody_one" id, go inside, and make it the last child
document.getElementById("tbody_one").appendChild(newtr);

</script>

What if you have JavaScript that only works in one browser? What if you’re using IE and Firefox. Well, you need to write one statement that will execute in IE, then another statement to run in the Firefox. This is also called a browser sniffer.
Here’s how you can do it.
First we’ll show you how to write a catch so it’ll run 1 statement if it is IE, and another if it’s any other browser.

<script type="text/javascript">
var browser = navigator.appName; //find the browser name

alert(browser); //popup with the browser name

if(browser == "Microsoft Internet Explorer"){
    alert("You are using IE");
}else{
    alert("you are using a different browser than IE");
}
</script>

Usually the code above suffices, because most JavaScript will either work in IE or the other browsers.

What if you wanted all of your elements on the page that have the same class=”" to behave the exact same way. Well, with a little JavaScript, this is possible, thanks to Netlobo.com:

Note: You must add the following onload event to your body tag: < body onload=”loadClassNames()”>

<script language="javascript" type="text/javascript">

//function that allows us to get the elements by a class name,

document.getElementsByClassName = function(clsName){

	var retVal = new Array();
	var elements = document.getElementsByTagName("*");

	for(var i = 0;i < elements.length;i++){
		if(elements[i].className.indexOf(" ") >= 0){
			var classes = elements[i].className.split(" ");

			for(var j = 0;j < classes.length;j++){
				if(classes[j] == clsName){
					retVal.push(elements[i]);
				}
			}

		}else if(elements[i].className == clsName){
			retVal.push(elements[i]);
		}
	}
	return retVal;
}

function loadClassNames(){
	//this method only works for event handlers

	var classNames= document.getElementsByClassName('test2');

	for (var i = 0; i < classNames.length; i++){
		classNames[i].onmouseover = function(){
			alert(this.id);
		}

	}
}

</script>

The first function simply adds the capability of getting an element by class name, which is not inherently possible with JavaScript. Now, what the 2nd function does, is the following. If you add loadClassNames() as an “onload” function to the body tag, when the page loads, the function will get all of the elements with a class name of ‘test2′, and assign a new “mouseover” event. In this case, it will create a popup that displays the id of the element.