A request by a member of at proboards support, he wanted a coder to break up a code and explain every line in order for others to learn. Well I did so with a recent code I made, it's very simple and I did my best to explain everything in detail. Enjoy

Full code:

---

<script type='text/javascript'>
/* Auto board locked icons.
created by CrAzY_J
do not redistribute this code without the creator's permission*/

var check = /Locked/i;
var icon = 'locked icon url';

if( !document.postForm && this.location.href.match( /\.com(\/(index\.cgi(#\w+|\?(action=home|board=\w+(&\w+=\d+)?)?)?)?)?$/ ) )
{
   var rows = document.body.getElementsByTagName('tr');
   for(var r=0;r<rows.length;r++){
      if(rows[r].cells.length == 5 && rows[r].cells[0].width == '8%' && rows[r].cells[1].getElementsByTagName('font')[1] && check.test( rows[r].cells[1].getElementsByTagName('font')[1].firstChild.data ) ){
         if(/^\[(\s|\*)\]$/.test(rows[r].cells[0].firstChild.data))
            rows[r].cells[0].firstChild.data = '[L]';
         else
            rows[r].cells[0].firstChild.src = icon;
      }
   }
}

</script>

---

Maybe I should start of with explaining what the code exactly does eh? Well whenever an admin or anyone with admin powers adds "Locked" to a board description, that board's on/off icons will receive a Locked icon.

Now let's start. I'm sure I don't have to explain the opening javascript tags and the copyright comments/headers.
The first lines are two variables:var check = /Locked/i;
var icon = 'locked icon url';
The first one is a regular expressions object. Inside the forward slashes you see "Locked". Because I am looking for "Locked" inside the board description I put it in a regular expressions object so I could use it later to check if it's in the board description and so users could edit it if they'd like.
The second variable is the variable holding the url to the image of the locked icon. The variable is at the top so the user using the code could access it easily and edit it.


If you're making a code, you have an idea what the code should do and where the code should work/run. You could use a location check to run the code only where you want it to. Because the boards/sub-boards are on the main page and inside the boards, we want the code to run on those pages and on those pages only.
if( !document.postForm && this.location.href.match( /\.com(\/(index\.cgi(#\w+|\?(action=home|board=\w+(&\w+=\d+)?)?)?)?)?$/ ) )
{
So that long piece of code is to check if the user browsing around in the forum is on the main page or in a board, I won't bother explaining all of it because that'll take too long. All you need to know is that this.location.href.match( /\.com(\/(index\.cgi(#\w+|\?(action=home|board=\w+(&\w+=\d+)?)?)?)?)?$/ )
that part checks if you're on the main page or in the boards. The !document.postForm is to make sure you're not on the posting page. Because if you preview a post the url changes to "/index.cgi". Hope you understand what I'm trying to tell you, it's kind of confusing to explain ^_^.


The proboards pages are pure HTML tables, so everything you see is usually inside table cells and rows. So if we want to grab the cells with the on/off icons and the board name/description we could just grab the row it's in, because both cells are in the same row.
We use the "document.getElementsByTagName()" method, this method receives one parameter, the name of the HTML tag you want to grab. It then grabs all the occurrences of that HTML tag on the page and inserts it into an array.
var rows = document.body.getElementsByTagName('tr');
So the variable "rows" holds an array of all the "tr", row, tags of the page.



But we don't want all the rows of the page, because we only want the rows with the on/off icon cell and the board name/description cell.
So what we need to do is go through ALL the rows (which are inside the rows variable) and "pick out" the ones that contain the on/off icon cell and the board name/description cell.
for(var r=0;r<rows.length;r++){
     if(rows[r].cells.length == 5 && rows[r].cells[0].width == '8%' && rows[r].cells[1].getElementsByTagName('font')[1] && check.test(rows[r].cells[1].getElementsByTagName('font')[1].firstChild.data)){
The for loop goes through all the rows, and with the if statement we find the rows we want. And the rows we want are the ones with the on/off icons cell, the board name/description cells AND in the board name/description the first variable, "check" with it's regular expressions object should be found.
The last part is probably not the best way to explain it, but you remember what was in the forward slashes right? "Locked", so we need to look for exactly that inside the board descriptions.

I'll break that if statement down even further so you could understand it better. First we check if the row we're going through (remember we're looping through all of them) has 5 cells, that's what rows[r].cells.length == 5 is for. The first cell is the on/off icons cell, the second is the board name/description cells, the third is the topics cell, the fourth is the posts cell and the last/fifth is that Last post cell. So that's 5 in total right?

After that we make sure that the first cell has a width of 8%, why? Because the on/off icons cell always has a width of 8%, so now we're sure we have to rows with the on/off icons cells.

Because we want to check the board description for "Locked" (actually whatever is inside the forward slashes of the variable "check") we want to grab the second font tag, because the board description is always in the second font tag.
Before we can do that we have to check if there is even a second font tag, sometimes there is no board description and looking for "Locked" in the second font tag will return a error because there is no second font tag.
So if there IS a second font tag we check it with the "check" variable and the "test()" method. The test method returns true or false. (you can google it if you want to learn more about it).



So now we've cleared the second if statement !!
The third if statement checks if the on/off icon is an image or not, because users have the option to disable images on a forum. We check it with a regular expressions object and the "test" method again. So if there isn't any image for the on/off icons we just add "[L]" for a locked icon. If there IS a on/off icon image, we change the source of the image to the locked icon image url which is stored in the "icon" variable.

The End

---

I hope this helped some of you guys, if you have any question please post here. And if you find any flaws in the "tutorial" please point out so I can fix it. ^_^