Post by Cam on Nov 18, 2010 3:59:40 GMT
What is this tutorial about??
This is aimed at all those people who are wanting to code JavaScript for ProBoards. We will cover the PB variables, making variables, grabbing a item by its ID, writing text, comments, if statements and other things to get you on a roll so you can code your own forum!
What do I need to know before learning JavaScript?
- HTML
- CSS
- XHTML is helpful
Open and closing tags
Like any other coding language, we have opening tags which is starting the code. An example of this is <HTML> hopefully that looks familiar!!! If not go over HTML. For those that hopefully know what it is, you will know that that is the opening tag. We have the same thing in JavaScript, but we do this:
<script type="text/javascript">
That is the best way to start your code, there is other ways, but this way looks cleaner and used by more people.
Next we sometimes but
<!--
What this is is a part of the code which will hide the code from old browsers. This isn't something you have to do.
Next to close this script we will go:
//-->
</script>
So altogether we have:
<script type="text/javascript">
<!--
//-->
</script>
That is the opening and closing tags of JavaScript! HTML yes, is a bit easier, but with HTML we can make our forum or website do a lot of cool things!
Comments
Comments are things which aren't shown in your script. Only the user looking at the script can see the comments, but when the script actually running you won't see the comments.
Comments are good if you want to tell the user of the code what to modify or change in the code, or anything you want to write.
To do a single lined comment we do so:
// put your comment here, not too long though!
/* this is a
multi lined
comment! */
Comments are easy to use and is why this part was small. Ask in the support board or PM me if you are lost with comments
Open and closing tags
Like any other coding language, we have opening tags which is starting the code. An example of this is <HTML> hopefully that looks familiar!!! If not go over HTML. For those that hopefully know what it is, you will know that that is the opening tag. We have the same thing in JavaScript, but we do this:
<script type="text/javascript">
That is the best way to start your code, there is other ways, but this way looks cleaner and used by more people.
Next we sometimes but
<!--
What this is is a part of the code which will hide the code from old browsers. This isn't something you have to do.
Next to close this script we will go:
//-->
</script>
So altogether we have:
<script type="text/javascript">
<!--
//-->
</script>
That is the opening and closing tags of JavaScript! HTML yes, is a bit easier, but with HTML we can make our forum or website do a lot of cool things!
Variables
Variables are quite frankly one of the things that you almost must know in JavaScript! They are used in so many codes for different scripts and can hold information and then you can write that information!
We can do a variable very easily! All we have to write in our script is;
var variable_name;
You would change the bit which says variable_name to what you want the variable to be called.
At the current moment our variable equals nothing So now we need to make it equal something. Why not the number one!
var variable_name = '1';
So now the variable equals 1 and we can use it! There is also something called arrays which we will go over later on in the tutorial! Now we need to learn to write text and the contents of a variable
Writing text and a variables content
To write text in JavaScript you just need to do some very easy to remember steps!
document.write('Hello World! This is text!!');
That will write text, so that piece of code would write Hello World! This is text!! you can play around with writing text, it's bot hard so I haven't gone over it much
Next, writing a variable!
<script type="text/JavaScript">
var variable = 'one';
document.write(variable);
</script>
Notice we don't use " " When you want to write a variable, you do not use quotation marks, if you want to write ordinary text we use quotation marks ( " ").
So that code/script would write one. We can write multiple variables as well like thus:
<script type="text/JavaScript">
var variable = 'one';
var variable2 = 'two';
document.write(variable, variable2);
</script>
That will write one two it's not hard! We on Proboards have PB variables makes coding life a lot easier! Here is two which are used a lot:
pb_username
pb_displayname
You can use those like the other variables, just write:
document.write(pb_username');
And say your username was user101 it would write user101
Grabbing a item by it's id
So this will be really short! I'm going to show you some examples of grabbing PB tables etc ant hiding them.
document.getElementsByTagName("TD")[1].style.display ='none';
That will grab the part where the banner is and hide it, poof it's gone!
document.getElementsByTagName("TD")[3].style.display ='none';
This will grab the nav bar/menu bar and hide it so no one can see it. If we did:
document.getElementsByTagName("TD")[1];
This will grab the banner part but do nothing, most people do this:
var code = 'document.getElementsByTagName("TD")[1];'
That means that they can just use the code variable when ever to do what ever they want to the banner part.
We can also grab things from HTML codes. Like this code found here.
Look at this part of the code from that link above:
<table id="lukejcpmbar" class="bordercolor" align="center" width="92%" height="5%" cellpadding="0" cellspacing="1" style="position: relative; bottom: 1px;">
<tr>
<td id="Lukes_Cell" class="menubg" width="100%">
</td>
I bolded the bit we are going to grab. We can get this by just doing:
var Lukes_Cell=document.getElementById('Lukes_Cell');
The later on in the code we could go:
<table id="lukejcpmbar" class="bordercolor" align="center" width="92%" height="5%" cellpadding="0" cellspacing="1" style="position: relative; bottom: 1px;">
<tr>
<td id="[b]Lukes_Cell[/b]" class="menubg" width="100%">
</td>
var Lukes_Cell=document.getElementById('Lukes_Cell');
Lukes_Cell.innerHTML = 'Hi!';
We can grab things from things we make and from ProBoards. It's very easy and you can make good codes with this.
If Statments
If statements are very helpful if your wanting to make the script do something if something happens or is right! I will now show you what we would do if we were to say: if username = Proboard guest write hi:
if(pb_username=='Guest'){
document.write('Hi');
}
What that would do is write hi if the user on the pb forum is a guest, someone who is a member will not see the hi. We can make it:
if(pb_username=='admin'){
document.write('Hi');
}
So now, the username admin will be the only one who sees the hi.
We can do this with variables we have made as well
var elephant = '1';
if(elephant=='1'){
document.write('Hi');
}
Alert and confirm pop up boxes
Alert boxes are the pop up boxes which tells you something, like a warning maybe. These are usually done in JavaScript and are really easy!
alert('WARNING!!');
We can put variables in alert boxes too.
var hi = 'hellllllllo';
alert('Hello '+hi+' ');
You can do a confirm box by doing so:
confirm("sometext");
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
prompt("What is your name?","Enter name here....");
You can do more with these but, that's up to you if you want to develop your skills better there.
Thanks for reading and last comments..........
This tutorial is copyright to me This is not to be posted on other forums unless I have posted it there (no one else can post it). If you want to cover more or have any questions please PM me or ask in the coding board.
Thanks for reading this. I hope to see more coders learning JavaScript using my tutorial or others. Thanks
UPDATES:
18 NOVEMBER: Tutorial Updated to include grabbing tables you have made. Will update more as we gooooooooo......