...rows/columns...

...rows/columns...

/* border color and style for the table */
table, td, th {
    border-color : #000000;
    border-style : solid;
}

/* the widths of the border */
table {
    border-width : 1px 0 0 1px;
}
td, th {
    border-width : 0 1px 1px 0;
}

var theform = document.testForm;

var theform = document.testForm;
var formitem1 = theform.formitem1;

var theform = document.testForm;
var eles = document.testForm.elements;
for(var a=0;aMake sure to note that this assumes that an element would match "foo," otherwise you could encounter errors.



Now, it is possible to perform a similar search through forms. Let's say we know a form contains "bar" in the name, but we aren't sure of the exact name. We could search through the forms property of the document object.



var tosearch = document.forms;
for(var a=0;aI'm not going too far into detail on these, as they aren't a fairly important part of this tutorial, despite being helpful.



Note: There are numerous ways to access a form or form elements. I've only explained a few.



One last thing I want to mention before moving into the actual tutorial. You can use the "form" property of a form element to obtain the form for that element. For example, "checkbox.form" would return the form that contains a checkbox.











Input - type="text"

Let's start off with the most basic, of the basic. An input with type="text". For this example, we'll be using this input:



First off, we're going to cover the basics of grabbing information that a user enters. Whenever a user enters information, it is sent into the "value" property of the input. So, taking the default input, if we alerted the value of document.testForm.inputtext.value, we'd get "Default Value" since that's the current value.



Let's take a look at making a simple "Click on this and the text inside disappears, but if blank reappears." In this case, we're going to work with simple events and we'll be making this similar to something that one might use if a search box.




Now, let's break down the code. First off, we have our input itself. Then, we move to the script tag. The third line grabs the search box itself. Now we get to where we assign the events that will manage the clearing of and filling in of the "Search" text. We're using two basic events functions: onfocus and onblur. onfocus activates whenever the object in question obtains the focus of the user. onblur activates whenever the object in question loses the focus of the user. (Note that it doesn't activate if the item did not already have the focus of the user.) We assign two simple events and then in the events, we check specific properties of the value, and then change value depending on if the check returns true. This is a basic, and quite straightforward method of doing a box that auto-clears itself. You could also have assigned the events inline in the input tag. These inputs also support the "disabled" property via javascript (input.disabled = "true") and are used with that for a characters left item typically. Disabled elements can have their values changed by a script, but not by the user.



Another quick note: type="hidden" inputs generally share a similar usage to type="text", except that they have no disabled property since they aren't visible.











Input - type="checkbox"

Checkboxes are some of the most useful form items, then again, all of them are useful really. There's only three things that really need to be mentioned: the "checked" property, the "disabled" property, and the "click" function. checkbox.disabled works in the same way as it does with a type="text" element, so we'll skip right to the "checked" property.



checkbox.checked is a boolean value and you can use it to either change whether or not the checkbox is checked or you can use it to check if the box is checked. Those are the basic uses. You never need to use the "value" property of a checkbox, because it returns "1" whether it is checked or not.



checkbox.click() is the last useful function of a checkbox. What it does is act as if the user clicked on the checkbox. Assuming the box is enabled, it is the same as saying "checkbox.checked = !checkbox.checked" which would invert the value of it being checked. If the box is disabled, it does nothing.











Input - type="submit" - type="button" - type="reset"

Oh joy, the buttons of forms. At this point, I assume you know what each button does by itself. There's not much else to discuss on these buttons besides mentioning that they support the "disabled" property and that doing anything with their "value" property will update the text on the button. I'll give an example of a helpful function/event to use on your buttons in a script however. 




I will not break down this code, as you should be able to understand it just by having read this tutorial. I did however leave two comments to help you out.











Textareas

A textarea is one of the stranger form elements. Despite being setup without a value property in the HTML and making it look like innerHTML would return whatever is between the  and , it doesn't. What is between those two tags is actually the value property. You can change this property, but it is recommended that you do not attempt to ever change the innerHTML of a textarea, unless you want to experience some weird changes to your webpage.



Also, textareas support the "disabled" method, which can come in handy.











Selects

Note that I'm not going to cover selects with multiple="multiple", just a basic select. To begin things off, selects support the disabled property. Also, for all examples, we'll be using the following select:




   Option 1
   Option 2
   Option 3
As you can see, we have three options within our select. If we were to alert the "length" property of our select, it'd return 3 since there's three options. We can also use this method to access the options. For example, document.testForm.theSel[0] would return a node reference to the first option. You can also access options through the "options" property, which happens to be an array.



Now, let's figure out how to get the value. Calling the "value" property on the select will return the value, and you can set the value this way too. But setting the value that way has problems. For example, if you attempt to set the value to something that doesn't have a corresponding option with that value, it won't update the select at all. This is where we're going to mention selectedIndex. selectedIndex is a property that contains a number corresponding to the placement of the currently selected option in the theSel.options array. So, theSel.options[theSel.selectedIndex].value is the same as theSel.value.



selectedIndex is most useful when having to reorder or remove items from a select. Say for example, you want to remove an item from a select once a user selects it. The code might look like this.




   Option 1
   Option 2
   Option 3
That way when you remove the select, if you don't know the value of the first item, you can still set it to that item. This code itself would have problems since you couldn't select to remove the first item, but that's something we'll fix another day.



Now we're going to delve into adding, removing, and checking the selection on options. To add an option, it is easiest to use a simple DOM method.



Now we've created an option, we can also remove it.



That's a nice easy way to remove an option from the select. Now, let's try removing the option only if it's selected. I'll show two methods.



Both ways of removal work equally well. This concludes the select section.











Well, hopefully this tutorial helped some future coders out there to learn the basics of form manipulation. :P There's much more that can be done, but this will at least help you get a basic understanding and set you on your way to manipulating basic forms. If you need any help, feel free to post/comment.]]>
		Tue, 03 Mar 2009 07:39:33 +0000
		6
		cddude229
		4
	
	
		
		http://www.prowebforums.com/tutorials/article/5-documentcreateattribute/
		document.createAttribute()



A long time ago (see: 2005), I released a tutorial covering this same subject. However, I decided it's time to completely revise the tutorial and actually correct the numerous mistakes I had on this function. So, here we go...



To begin with, document.createAttribute() is similar to the DOM functions of document.createElement(), document.createDocumentFragment(), and document.createComment(). It creates an "attribute" node as opposed to an element node (createElement), a document fragment (createDocumentFragment), or a comment node (createComment) however. Seeing a pattern yet? I see one.



I will not discuss what an attribute node is since it is fairly straight forward if I just show this example:

cell content
A quick thing to mention is that the nodeType of an attribute node is 2. The most amazing part is that both IE and Fx recognize this. IE conforming to standards? Amazing, I know.



Anyways, back to the task at hand. document.createAttribute() is most commonly used as an alternative to element.setAttribute("name", "value"); It's a bit longer, but is more of a true DOM method. I'll now show you an example of usage and then break it down for you. (Also, Code 1 and Code 2 are essentially equivalent.)



// Code 1:
var newAttr = document.createAttribute("attrname");
newAttr.nodeValue = "new_value";
element.setAttributeNode(newAttr);

// Code 2:
element.setAttribute("attrname", "new_value");
BREAK IT DOWN... no seriously, I'm going to break this code down for you guys. :P



var newAttr = document.createAttribute("attrname");
Well, this line is straight forward mostly. We're creating a new attribute node and assigning it to a variable for reference.



newAttr.nodeValue = "new_value";
Now that we've created the attribute, it kinda needs a value. We alter this using the nodeValue property. Assign it to whatever you want the new value to be.



element.setAttributeNode(newAttr);
And here we finally set the attribute node into the actual element. If we were to use getAttribute("attrname") on this element now, we'd find the value of "new_value" that we just recently assigned to it.





That's really all there is to document.createAttribute(). Honestly, I'd recommend using the alternative setAttribute() method, but this one can work just as well (besides taking up a bit more script room.)]]>
		Tue, 03 Mar 2009 07:37:10 +0000
		5
		cddude229
		4
	
	
		
		http://www.prowebforums.com/tutorials/article/4-javascript-cookies/
		Cookies



This tutorial will cover a few basic things about cookies, including setting and updating a cookie, grabbing the cookie's value, and deleting a cookie. Take note that there are a few things I won't bother mentioning, such as the extra, optional properties you can use or things like the expiration date being optional and it becoming a session cookie if left off.



To start off, we'll be covering how to set a cookie. Let's take a look at the basic syntax for one.



document.cookie = "NAMEHERE=VALUEHERE; expires=DATE";



Starting with the colors, here's a break down. (Note: All non-colored parts are just designating the end of a line, a space, or a quote.)



Blue - This is designating the fact that we're setting a cookie. The cookie is a property of the document object, so first we grab it. Then we add an equals sign saying we're setting it equal to something, but a cookie behaves differently. It actually is saying we're updating the cookie property with this specific cookie.

Red - This starts off by saying that we're about to designate the name of the cookie. The equals sign denotes the end of the cookie's name.

Orange - This is the value. Everything up until the semi-colon is the value of the cookie. If you want to use a semi-colon in the value, escape() or encodeURIComponent() it first. (Make sure to unescape() or decodeURIComponent() it when retrieving the value.)

Green - This is saying that we're about to set the expiration date of the cookie.

Purple - This is the date the cookie will expire on. For this, its easiest to use JS Date object and then call toGMTString() upon the object. You can use set time to accordingly adjust the time to what you want it to be.



Now that we have the layout for it down, let's give a few examples.



var d = new Date();
d = d.toGMTString();
d = d.replace(/d{4}/,"2050");
document.cookie = "cookiesrock=Yes they do;expires="+d;
Taking a look at it line by line, you'll get a general idea of how this works.



var d = new Date();
We create a new date object. This is needed to get the date format we want.



d = d.toGMTString();
This takes the date object and turns it into a string, technically, a string in the GMT format and time zone.



d = d.replace(/d{4}/,"2050");
Now we're going to replace the first match of 4 numbers in the date string with "2050". What gets replaced is the year actually, so we're setting this cookie to expire in the year 2050.



document.cookie = "cookiesrock=Yes they do;expires="+d;
This line just creates the cookie, which you should have gotten from the break down before. You can also see where d (the date object converted) is used in the code.







Now that we've covered the basics of setting a cookie, I'm going to tell you that updating a cookie is done the exact same way. So yes, you just learned two things at once. Have fun with that. =)







Moving on, we're going to cover grabbing the value of a cookie. Let's use these cookies as an example.

1. cookiesrock=Yes they do

2. woot=Whee

3. smilies=\m/ >.< \m/



If you alert the document.cookie object, you'll get a string that looks something like this:

cookiesrock=Yes they do;woot=Whee;smilies=m/ >.< m/
Note that they removed the dates you might have inserted. You might think this is annoying, but in the case of grabbing data, its quite useful. If you look, you see the data is all there, but we need someway to grab it. I prefer the RegExp. method personally, so I'll be teaching that.



if(document.cookie.match(/woot=(.+?)(;|$)/)){
      var cookievalue = RegExp.$1;
}
Looking at a quick break down of that, you'll see I'm checking document.cookie to match the RegExp /woot=(.+?)(;|$)/. Then if its matched, I assign the first RegExp parenthetical match to cookievalue. This effectively just grabbed the cookie's value for you.









Moving on to deleting cookies. Deleting a cookie is as easy as setting one, literally. Set the value of the cookie to a blank (put the semi-colon following the equals sign right away), and then set the expiration date for some time in the past. =)





Now that I've covered the basics of cookies, here's some helpful little functions that you may use. They might save you a bit of time when developing your codes.





function setCookie(_name,_value){
    document.cookie = _name+"="+escape(_value)+";expires="+(new Date()).toGMTString().replace(/d{4}/,"2050");
}

function getCookie(_name){
    if(document.cookie.match(new RegExp(_name+"=(.+?)($|;)","gi")))
        return unescape(RegExp.$1);
    return null;
}

function getCookie2(_name){
    if(document.cookie.indexOf(_name) == -1)
        return null;
    var _c = document.cookie.substring(document.cookie.indexOf(_name));
    return unescape(_c.substring(_c.indexOf("=")+1,(_c.indexOf(";") == -1?_c.length:_c.indexOf(";"))));
}

function deleteCookie(_name){
    document.cookie = _name+"=;expires="+(new Date()).toGMTString().replace(/d{4}/,"2004");
}
]]>
		Tue, 03 Mar 2009 07:35:45 +0000
		4
		cddude229
		4
	
	
		
		http://www.prowebforums.com/tutorials/article/2-rowindex-and-cellindex/
		rowIndex and cellIndex



Its that time again. Time to learn about some of the most useful properties that you may not have known about. The kinds of properties that will make you say "Oh my god, how did I not know that before?! This will make my code so much faster!"



This tutorial covers the two properties that belong to rows and cells: rowIndex and cellIndex respectively.



First question that probably comes to mind is: "What do they do?" Well, what they do, is they tell you where a row/cell is in the parent object. Specifically, they tell you what row or what cell they are in the parent (remember, Javascript starts counting at zero however).



The next question may be: "How is this useful?" Well, there's a few things that I've found this useful for. Here's a brief list:

1. Use with insertRow and insertCell to insert a row/cell before/after the current one.

2. Use with deleteRow and deleteCell to remove the current one or remove one that is before/after the current one.

3. Use with moveRow (IE only) to move a row before/after the current one.



As you can see, it has its uses, just like every Javascript function/object/method/property. The uses just need to be found.



Now, let's take a look at an example of how this could be used. Here's an example table.




Cell 1
Cell 2
Cell 4
Now, let's analyze this. We'll notice that "row3" is missing. Now, we want to insert this row to fix this. But, let's say this table is dynamically generated via PHP (just for usage's sake). We'll say we know row3 is never there, but row2 and row4 are always there, and sometimes other rows are there (row0, row1, row5, row6, etc.)



We need a quick and easy solution to insert a new row without constantly looping through all the rows. Not to mention, it'd be a bit harder since the table doesn't currently have an ID.



Now, since I've explained the basic usage for rowIndex, let's use it to insert row3 and "Cell 3". Our script will look something like this:



var r2 = document.getElementById("row2"); // Grab "row2"
var r3 = r2.parentNode.insertRow(r2.rowIndex+1); // Insert "row3"
r3.id = "row3"; // Assign the ID to be consistent
var c3 = r3.insertCell(0); // Insert the cell
c3.innerHTML = "Cell 3"; // Add the cell's innerHTML
Now, how about a break down for you guys?



var r2 = document.getElementById("row2");
First off, we need to get our row to call rowIndex off of. We use this to grab the row.



var r3 = r2.parentNode.insertRow(r2.rowIndex+1);
Now, let's use rowIndex to insert a row after our current one. We first need to grab the tbody/table element to use insertRow on, then we need to get the rowIndex+1 for where the cell would be inserted.



r3.id = "row3";
This part could just as easily be removed from the code. I only did this to be consistent.



var c3 = r3.insertCell(0);
Now, we're going to insert our cell into "row3".



c3.innerHTML = "Cell 3";
And now, we insert the innerHTML for "Cell 3".



So there's one method of doing it. There is an alternate method that could be used. That method uses "row4" instead of "row2" to insert the row, but it doesn't matter which you use. They'd produce similar results.



Anyways, hope this helps some of you guys. Enjoy. :)]]>
		Tue, 03 Mar 2009 07:32:55 +0000
		2
		cddude229
		4
	
	
		
		http://www.prowebforums.com/tutorials/article/3-insertrow-and-insertcell/
		insertRow and insertCell



One of the most common questions among beginners is this: "How do I insert a new row to the table?" And the answer? Simple. "Use insertRow and insertCell."



But what are these? Well, that's what I'm here to tell you. insertRow and insertCell are methods used to create new cells and rows in a table (or tbody technically). Let's start with a breakdown of how both are used and then we'll move onto an example.



First off, insertRow and insertCell are methods. Meaning, they are called off of an object. For a row, it'd be a tbody or table element. For a cell, it is a row. Let's take a look at the following syntax examples:



tableobject.insertRow(insertionpoint);
tbodyobject.insertRow(insertionpoint);
rowobject.insertCell(insertionpoint);
Both insertRow and insertCell accept one parameter. And this parameter is the point at which to "insert" the new row/cell. Since Javascript starts at 0, putting "0" would insert a row/cell before the first row/cell in the table/row. It's also possible to use negative numbers. Negative numbers actually count backwards from the end of the table. But, since 0 is already taken, they start counting at -1. -1 would insert a row/cell at the end of the parent. -2 would make it second to last. etc.



Now, let's move on to an example.


R1, C1
R1, C2
R2, C1
R2, C2
Now, our goal is to insert a row into this table. Let's say, we want to make it the third row, and it'll have two cells. The first cell's innerHTML will be "R3, C1" and the second's will be "R3, C2". Now let's make the code to modify it. There's two ways to do this, so take a look at the two different ways. (They're in different code boxes.)



var newRow = document.getElementById("thetable").insertRow(2); // Insert the third row
var newCell1 = newRow.insertCell(0); // Insert the first cell
newCell1.innerHTML = "R3, C1"; // First cell's innerHTML
var newCell2 = newRow.insertCell(1); // Insert the second cell
newCell2.innerHTML = "R3, C2"; // Second cell's innerHTML
Here's method number two. This uses the rows and cells arrays and negative inserts. If you don't know what they are, they're basically arrays containing every TR that belongs to the table and every TD that belongs to a row.



var tab = document.getElementById("thetable"); // Reference the table to save space
tab.insertRow(-1); // Insert the third row as the last row. No variable assigned because we don't reference it as so later
var newCell1 = tab.rows[2].insertCell(-1); // Insert the first cell as the last cell
newCell1.innerHTML = "R3, C1"; // First cell's innerHTML
var newCell2 = tab.rows[2].insertCell(-1); // Insert the second cell as the last cell
newCell2.innerHTML = "R3, C2"; // Second cell's innerHTML
Either way works perfectly fine, its just your preference. Anyways, here's what the new HTML for the table would look similar to:


R1, C1
R1, C2
R2, C1
R2, C2
R3, C1
R3, C2
Now, for a quick breakdown of how the first code works. I won't be giving a break down for the second, as its an alternate method. If you want a challenge, break it down yourself and tell yourself how it works. :)



var newRow = document.getElementById("thetable").insertRow(2);
This line creates the new row as the third row. What we do is we have assigned an ID to the table, so we grab the table via the ID. Then, we insert the new row via the insertRow method. We also assigned a variable reference point to this new row so we can call other methods upon it later. ;)



var newCell1 = newRow.insertCell(0);
Remember how we assigned the variable to that row? Well, we're calling it here. This line is using the row stored in "newRow" to insert a new first cell for it. We also assign that cell to the variable "newCell1" for later uses.



newCell1.innerHTML = "R3, C1";
Here's that variable. All we do here is add the innerHTML for newCell1. How fun. :P



var newCell2 = newRow.insertCell(1);
newCell2.innerHTML = "R3, C2";
This is almost the same thing as the last two sections. Except, this is for the second cell instead.



Anyways, hopefully this tutorial helps some novices again. This is one of the most useful table functions I've found, and I use it quite a bit whenever I use DOM for codes or make profile editable codes. So, enjoy. :D]]>
		Tue, 03 Mar 2009 07:32:02 +0000
		3
		cddude229
		4
	
	
		
		http://www.prowebforums.com/tutorials/article/7-arguments-in-javascript/
		


I expect you to know the following things before reading this tutorial.



- Arrays and ".length"

- if()

- for()

- functions



That should be all you NEED to know, but an extensive knowledge can always help.



Now that that is out of the way, I'm gonna explain to you this code.

And then I'll explain why its better then this one.



Now first off, we have the standard opening line. Go ahead and ignore that and the ending line for now.



The next line is the line creating the function, called writeThis. Now, if you look where there is normally the list of parameters (arguments), there are none. You may be thinking, "What? Why are there no parameters if they call parameters later?"



First off, the answer to that is this. There are no parameters defined, because I'm teaching you a different way.



Now, we go to the next line. Its an if() statement, containing "arguments.length > 0" Well, here's where the knowledge of arrays come in. You should know,t hat ".length" is used to say how many different levels there are in an array. Now, that means "arguments" is an array.... but for what?



Its an array containing all parameters set to the function. So, basically, it contains all parameters listed. Now, onto its point. It currently is saying that there are parameters, cause its greater then 0.



Now, onto the next line. Its just a for() loop, and it goes through the loop of the arguments.



The next line just writes what the parameter actually is, and then after that we have the 3 ending brackets. Last two lines contain the calling function, and then the final calls the script end tag.



Now, we'll compare it to the other code. The other code, is extremely simple, and shorter. But less efficient. Say you wanted to add more parameters to the code. Well, the first one would work fine, but the second one would mess up and you'd have some problems.]]>
		Tue, 03 Mar 2009 07:31:14 +0000
		7
		cddude229
		4