Post by russellr on Oct 17, 2010 12:14:28 GMT
PB & vF JS Coding Basics by Russell
- Planning what you want to create.
- Creating and assigning variables.
- Loops and if statements.
- Making the edit.
- Finishing the code.
Planning what you want to create
In my mind there is much more to coding than just ‘knowing how to code’ and then making things. You need to have a clear understanding of exactly what you want to do and have a solid theory behind what you are writing.
This means you need to take into consideration the environment you are coding for be it Proboards, vForums or anything else. Each of these are made up of elements (tables, tds, trs, divs, paragraphs, images, links) most codes will involve searching through these elements to find a nearby reference point to the area you want to modify.
Say you want to create something to fix the colspan on the post splitter on vForums. You would end up with something like this:
This code simply grabs all the td elements into one array, then loops through them all until one matches with the class window2 post_splitter and has a colspan of 2. The names you see there pSc and so on will change from code to code as the coder has to define them along with the variable in the for loop in this case m. Ok this is the basic planning behind this code it will change as to what you want to do but the key is looking into the source of the page find a reference point go in there find it then kick it about a little. A helpful resource will be Firebug add-on for Firefox which you can use to quickly find a place on the page.
Creating and assigning variables
This is one of the simplest things to do with javascript so here we go.
Now as you can see the first variable is just creating a name var myvariable and then it puts some data in there “some data”; noting that last ; as most code errors are caused by little things like this being left out, don’t fall into that trap.
The second variable is another way of doing things which I use quite a lot, this will grab all of the images in the page and put them into an array.
Loops and if statements
Ok I will try to cover these in a way they will hopefully
1 - Make sense and 2 - enable you to start creating meaningful codes right away. Let’s get started then. Loops there are two main types for (loops through a block of code a specified number of times) and while (loops through a block of code while a specified condition is true). I tend to use for loops most of the time but you have to take each code as it goes.
For Loop-
As you can see it is in three parts.
Firstly r=0; now I used r here but you can use any letter as it is a variable you are starting here and setting it as 0.
The next part r < var.length; This check to see if the r value is smaller than our other variable here which is called var we put var.length to see the size of this array remember this is just like
var secondvar = document.getElementByTagName(‘img’);
From earlier on this is a way of using this array. By putting length after the variable we get a number in this case it will show us how many images on the page. So we check that r is less than the total number of images on the page.
The final part r++ will add 1 to each loop so it will keep looping this code until r is equal to the number of images on the page.
If Statements-
Ok we can use an if statement for many things, a simple example would be
This will look to see if the variable vf_username is equal to admin and if this is true will do what ever is between the { } area.
If you want to use an if statement together with a loop like in the example code at the top try it out it works just the same as this. Just with two question in the if statement by saying && it will have to match both question if you like. And If you were to put || that means or so it will only run the code if it matches one or the other.
Making the edit
Ok so you are now ready to make some code? Lets do this then:
Step One: Ask yourself what you want to edit
Step Two: Draw up a concept
Step Three: Open up the source find a reference point
Step Four: Grab / get access to the reference point
Step Five: Create new cell / modify innerHTML of the area you found
Step Six: Try again and again until its perfect
Step Seven: Step inside the code support board if you are having any problems
Step Eight: A new code all complete
Finishing the code
The final part is to decide if you will host this code and have it called by the script you put into your header or footer eg src=”url to file here” or just put it directly into the forum headers/footers, make sure you speficiy if it should go in the header or footer remember codes that modify boards/threads need to go into the footer, anything to change the welcome table or something you are creating new goes into the header generally this will always stay the same.
- Planning what you want to create.
- Creating and assigning variables.
- Loops and if statements.
- Making the edit.
- Finishing the code.
Planning what you want to create
In my mind there is much more to coding than just ‘knowing how to code’ and then making things. You need to have a clear understanding of exactly what you want to do and have a solid theory behind what you are writing.
This means you need to take into consideration the environment you are coding for be it Proboards, vForums or anything else. Each of these are made up of elements (tables, tds, trs, divs, paragraphs, images, links) most codes will involve searching through these elements to find a nearby reference point to the area you want to modify.
Say you want to create something to fix the colspan on the post splitter on vForums. You would end up with something like this:
<script type="text/javascript">
var pSc = document.getElementsByTagName('td');
for(m=0;m<pSc.length;m++){
if(pSc[m].className=="window2 post_splitter" && pSc[m].colSpan=="2"){
pSc[m].colSpan = "6";
}
}
</script> This code simply grabs all the td elements into one array, then loops through them all until one matches with the class window2 post_splitter and has a colspan of 2. The names you see there pSc and so on will change from code to code as the coder has to define them along with the variable in the for loop in this case m. Ok this is the basic planning behind this code it will change as to what you want to do but the key is looking into the source of the page find a reference point go in there find it then kick it about a little. A helpful resource will be Firebug add-on for Firefox which you can use to quickly find a place on the page.
Creating and assigning variables
This is one of the simplest things to do with javascript so here we go.
var myvariable = “some data”;
var secondvar = document.getElementByTagName(‘img’);Now as you can see the first variable is just creating a name var myvariable and then it puts some data in there “some data”; noting that last ; as most code errors are caused by little things like this being left out, don’t fall into that trap.
The second variable is another way of doing things which I use quite a lot, this will grab all of the images in the page and put them into an array.
Loops and if statements
Ok I will try to cover these in a way they will hopefully
1 - Make sense and 2 - enable you to start creating meaningful codes right away. Let’s get started then. Loops there are two main types for (loops through a block of code a specified number of times) and while (loops through a block of code while a specified condition is true). I tend to use for loops most of the time but you have to take each code as it goes.
For Loop-
for (r=0; r < var.length; r++){
}
As you can see it is in three parts.
Firstly r=0; now I used r here but you can use any letter as it is a variable you are starting here and setting it as 0.
The next part r < var.length; This check to see if the r value is smaller than our other variable here which is called var we put var.length to see the size of this array remember this is just like
var secondvar = document.getElementByTagName(‘img’);
From earlier on this is a way of using this array. By putting length after the variable we get a number in this case it will show us how many images on the page. So we check that r is less than the total number of images on the page.
The final part r++ will add 1 to each loop so it will keep looping this code until r is equal to the number of images on the page.
If Statements-
Ok we can use an if statement for many things, a simple example would be
if(vf_username == "admin"){
//to do here
}This will look to see if the variable vf_username is equal to admin and if this is true will do what ever is between the { } area.
If you want to use an if statement together with a loop like in the example code at the top try it out it works just the same as this. Just with two question in the if statement by saying && it will have to match both question if you like. And If you were to put || that means or so it will only run the code if it matches one or the other.
Making the edit
Ok so you are now ready to make some code? Lets do this then:
Step One: Ask yourself what you want to edit
Step Two: Draw up a concept
Step Three: Open up the source find a reference point
Step Four: Grab / get access to the reference point
Step Five: Create new cell / modify innerHTML of the area you found
Step Six: Try again and again until its perfect
Step Seven: Step inside the code support board if you are having any problems
Step Eight: A new code all complete
Finishing the code
The final part is to decide if you will host this code and have it called by the script you put into your header or footer eg src=”url to file here” or just put it directly into the forum headers/footers, make sure you speficiy if it should go in the header or footer remember codes that modify boards/threads need to go into the footer, anything to change the welcome table or something you are creating new goes into the header generally this will always stay the same.
Want to learn a bit more?
Suggested further reading:
www.tizag.com
www.w3schools.com/
I may have missed a few things out if you please let me know.
By Russell Barnard & TRu Visions 2010
tv.vforums.co.uk
russell.barnardcomputing.co.uk
Suggested further reading:
www.tizag.com
www.w3schools.com/
I may have missed a few things out if you please let me know.
By Russell Barnard & TRu Visions 2010
tv.vforums.co.uk
russell.barnardcomputing.co.uk
