Post by ~CrAzY~™ on Jan 11, 2007 20:34:51 GMT -5
Yea, I couldn't figure out if this a Javascript, or an HTML tutorial, so I'm classifying it as Javascript.
We are going to be basically making something similar to the code found HERE.
First, let's put script tags in. Add a starting and a closing tag.
<script type="text/javascript"> basically means this will be a javascript code.
Let's add some comments now, so we can organize it as we go.
//Comment means that everything after the // on that same line will be ignore by the browser.
Let's add a simple table to work with during this tutorial. If you need help with this part, check out the table tutorials we have here.
Pretty simple so far, right?
Ok, now to get into some scripting now... Let's add a var block of coding to the script and we'll go from there.
Var, is a way to define a variable. The word that comes after it is the name of the variable. In this case, I called it width.
="400" means that the variable is that value. It can be anything you want it to be for what it needs to do, but in this case we want a number width, so we put 400.
How do we use a variable? Well, we need to set up a document.write(''); around the entire table first.
document.write is just that. It writes what is in between the (" ")'s on a page when using Javascript. If you were to put just document.write('Hello People!'), it would write those words on the page.
Alright well, let's continue...
I want to put the width of the code somehow into the table code. To do this, I will use a '+width+' tag to insert that number. I will also add a couple more bits of info to the code that you should have already learned from my previous HTML tutorial.
width="'+width+'" Normally, the width code would be width="400", but since you want to put in that number with a variable... you will replace ONLY the 400. You still need the "" tags. Just put in '+variablename+' whenever you want to replace something with a variable. '+width+' turns into 400.
Now, I'm assuming you're with me so far, if not... re-read the last couple of steps a couple times. I'm about to go a little deeper into this...
Alright, so say you want to set up a SOTW table. You want it to have their name, their image, and the SOTW number and Date in it.
Here's how the script looks with JUST the HTML adjusted to suit this table. I will also add class names and other stuff covered from my Basic Table Tutorial.
There... Now it's set up enough for us to start adding all the stuff we need.
For each change-able thing we need, I will assign a new variable.
Now we have the info we need. Nothing new on this step. Let's set up the table to use it now.
Now... If you've been trying to put this in your forum so far, you will notice it does NOT do a thing. Why? Because the document.write tag must be 1 line with no breaks. Let's take those breaks out of our table now... (Note: I mean pressing enter, not <br> or </br>)
Also for scripts: After the first script tag you need to put <!-- and before the last one you put //-->
And there you have it! Pop that code into your forum and you've got yourself an easily editable Signature of the Week table!
Any questions or comments, please post here.
Updated: Changed all breaks to <br />
We are going to be basically making something similar to the code found HERE.
First, let's put script tags in. Add a starting and a closing tag.
<script type="text/javascript">
</script>
<script type="text/javascript"> basically means this will be a javascript code.
Let's add some comments now, so we can organize it as we go.
<script type="text/javascript">
//My First Javascript variables
//I hope this turns out good
</script>
//Comment means that everything after the // on that same line will be ignore by the browser.
Let's add a simple table to work with during this tutorial. If you need help with this part, check out the table tutorials we have here.
<script type="text/javascript">
//My First Javascript variables
//I hope this turns out good
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</script>
Pretty simple so far, right?
Ok, now to get into some scripting now... Let's add a var block of coding to the script and we'll go from there.
<script type="text/javascript">
//My First Javascript variables
//I hope this turns out good
var width="400" // A Comment about this variable
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</script>
Var, is a way to define a variable. The word that comes after it is the name of the variable. In this case, I called it width.
="400" means that the variable is that value. It can be anything you want it to be for what it needs to do, but in this case we want a number width, so we put 400.
How do we use a variable? Well, we need to set up a document.write(''); around the entire table first.
<script type="text/javascript">
//My First Javascript variables
//I hope this turns out good
var width="400" // A Comment about this variable
document.write('<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>');
</script>
document.write is just that. It writes what is in between the (" ")'s on a page when using Javascript. If you were to put just document.write('Hello People!'), it would write those words on the page.
Alright well, let's continue...
I want to put the width of the code somehow into the table code. To do this, I will use a '+width+' tag to insert that number. I will also add a couple more bits of info to the code that you should have already learned from my previous HTML tutorial.
<script type="text/javascript">
//My First Javascript variables
//I hope this turns out good
var width="400" // A Comment about this variable
document.write('<center><table width="'+width+'" class="bordercolor" cellspacing="1">
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table></center>');
</script>
width="'+width+'" Normally, the width code would be width="400", but since you want to put in that number with a variable... you will replace ONLY the 400. You still need the "" tags. Just put in '+variablename+' whenever you want to replace something with a variable. '+width+' turns into 400.
Now, I'm assuming you're with me so far, if not... re-read the last couple of steps a couple times. I'm about to go a little deeper into this...
Alright, so say you want to set up a SOTW table. You want it to have their name, their image, and the SOTW number and Date in it.
Here's how the script looks with JUST the HTML adjusted to suit this table. I will also add class names and other stuff covered from my Basic Table Tutorial.
<script type="text/javascript">
//My First Javascript variables
//I hope this turns out good
var width="400" // A Comment about this variable
document.write('<center><table width="'+width+'" class="bordercolor" cellspacing="1">
<tr>
<td class="titlebg" width="100%">
<center>SOTW</center>
</td>
</tr>
<tr class="windowbg" width="100%">
<td>
</td>
</tr>
<tr>
<td class="windowbg" width="100%">
</td>
</tr>
</table></center>');
</script>
There... Now it's set up enough for us to start adding all the stuff we need.
For each change-able thing we need, I will assign a new variable.
<script type="text/javascript">
//My First Javascript variables
//I hope this turns out good
var width="400" // A Comment about this variable
var number="#1" // The SOTW number
var date="01/01/09" // The SOTW end date.
var image="http://www.yourimageurl.com" // Just the image url
var winner="CrAzY" // The name of the winner.
document.write('<center><table width="'+width+'" class="bordercolor" cellspacing="1">
<tr>
<td class="titlebg" width="100%">
<center>SOTW</center>
</td>
</tr>
<tr class="windowbg" width="100%">
<td>
</td>
</tr>
<tr>
<td class="windowbg" width="100%">
</td>
</tr>
</table></center>');
</script>
Now we have the info we need. Nothing new on this step. Let's set up the table to use it now.
<script type="text/javascript">
//My First Javascript variables
//I hope this turns out good
var width="400" // A Comment about this variable
var number="#1" // The SOTW number
var date="01/01/09" // The SOTW end date.
var image="http://www.yourimageurl.com" // Just the image url
var winner="CrAzY" // The name of the winner.
document.write('<center><table width="'+width+'" class="bordercolor" cellspacing="1">
<tr>
<td class="titlebg" width="100%">
<center>SOTW</center>
</td>
</tr>
<tr>
<td class="windowbg" width="100%">
<center><img src="'+image+'" /></center>
</td>
</tr>
<tr>
<td class="windowbg" width="100%">
<b>SOTW:</b> '+number+'<br />
<b>End Date:</b> '+date+' <br />
<b>Winner:</b> '+winner+' <br />
</td>
</tr>
</table></center>');
</script>
Now... If you've been trying to put this in your forum so far, you will notice it does NOT do a thing. Why? Because the document.write tag must be 1 line with no breaks. Let's take those breaks out of our table now... (Note: I mean pressing enter, not <br> or </br>)
Also for scripts: After the first script tag you need to put <!-- and before the last one you put //-->
<script type="text/javascript">
<!--
//My First Javascript variables
//I hope this turns out good
var width="400" // A Comment about this variable
var number="#1" // The SOTW number
var date="01/01/09" // The SOTW end date.
var image="http://www.yourimageurl.com" // Just the image url
var winner="CrAzY" // The name of the winner.
document.write('<center><table width="'+width+'" class="bordercolor" cellspacing="1"><tr><td class="titlebg" width="100%"><center>SOTW</center></td></tr><tr><td class="windowbg" width="100%"><center><img src="'+image+'" /></center></td></tr><tr><td class="windowbg" width="100%"><b>SOTW:</b> '+number+'<br /><b>End Date:</b> '+date+' <br /><b>Winner:</b> '+winner+' <br></td></tr></table></center>');
//-->
</script>
And there you have it! Pop that code into your forum and you've got yourself an easily editable Signature of the Week table!
Any questions or comments, please post here.
Updated: Changed all breaks to <br />