Note: Before using this tutorial, you need to know basic HTML and some CSS is suggested.
Table of Contents1) Basics
2) Variables
3) Location Checks
4) Hiding Tables
5) Changing Table Content - i.e: innerHTML
6) Comments
1) BasicsWe have to start somewhere, so we start at the easiest point possible. This portion will teach you how to write text.
To write text you use:
<script type="text/Javascript">
document.write("Hello")
</script>The starting tag, <script is used to start the code, and the ending line </script> is to end the code. By using document.write you are starting a string, and text that is non-variables, etc. need to be enclosed in " or '. If you need to use an apostraphe inside the string it will break it if you use the same one you start and close the string with. So if you put, document.write("Hel"lo") the string will not function. If it is neccessary to use the same apostraphe, be sure to put a \
before the apostraphe, i.e: document.write("Hel\"lo").
Now we can make this part more functional using variables. . .
2) Variables<script type="text/Javascript">
var myVariable = "My Variable Content";
document.write(myVariable)
</script>This is simple, you start your variable with 'var'. It is not neccessary to use var and you can just put
myVariable = "My Variable Content";. This is quicker but really makes no difference. Also note that a variable works as a string just like document.write - So if you put the same apostraphe be sure to put the \ before it. And in document.write you do not need to put apostraphes. If you wish to add text and variables, put this:
<script type="text/Javascript">
var myVariable = "My Variable Content";
document.write("Before " + myVariable + " After ")
</script>Note, you start the document.write off as usual using apostraphes, then you end the apostraphes and put a plus sign to indicate adding a variable, then you put your variable name, then the plus sign and the apostraphe, then put your text and add the finishing apostraphe. Variables are really simple.
3) Location Checks
<script type="text/Javascript">
if(location.href.match(/index.cgi?action=viewprofile$/i))
{
document.write('This will only show on the view profile page')
}
</script>
Easy? Very. This will make the text only show on a certain page, in this case on the view profile page. Now we start the if statement, and always include the attributes needed inside parenthesis. In this case we use location.href.match to see the the location matches the contents inside the second set of parenthesis. The second set of parenthesis actually is starting a Regular Expression. The first slash is to start the Regular Expression. Since the url of a view profile page is 'index.cgi?action=viewprofile' then we put that in the Regular Expression, note that it doesn't have to be a full URL. Then we put the $, the $ is only to say that the Regular Expression ends, so if the link was 'index.cgi?action=viewprofile&id=whatever' that page wouldn't be included. Next we end the Regular Expression with a / and the 'i' is to say that the contents inside are not case sensitive. Now the rest is simple, we commence the statement using a bracket { and we put the contents that we want to happen inside the brackets. In this case we just want text to show, so document.write is what we use, as learned earlier. We end the statement with a closing bracket } and end the script with </script>
4) Hiding Tables<script type="text/Javascript">
var td = document.getElementsByTagName('TD')
for(loop = 0; loop<td.length;loop++)
{
if(td[loop].innerHTML.match(/Info Center/i) && td[loop].className.match(/titlebg/i))
{
td[loop].parentNode.style.display="none"
}
}
</script>First we start the script as tought earlier. Next we define the variable td, td is short for table data and that's how I named it. We say that the variable equals the Tag 'TD'. So we do just that, get an element by its tag name. Straight forward. Then we start the loop, it's simple, just say that the loop equals zero and define the rest of it. Then we proceed with the statement with the bracket {. Next we say that the variable 'td' is looping, and it is basically counting the table data number. At this point loop can be anything, so we have to change that. We say that if the table data contains the text Info Center and it's class is 'titlebg'. You can find this info by viewing a script on any default proboard. And we proceed on with the statement by using the bracket {. And we say that the td's parent Node won't be displayed. The td's parentNode is tr or table row. So that won't be displayed, thus far hiding the info center title bar. And we close off the code with the }'s. We used two brackets in the code, and we have to close it off with the same number. And we have to close the script next. Should be easy thus far. Don't be intimidated at the long tutorial.
5) Changing Table Content<script type="text/Javascript">
var td = document.getElementsByTagName('TD')
for(loop = 0; loop<td.length;loop++)
{
if(td[loop].innerHTML.match(/Info Center/i) && td[loop].className.match(/titlebg/i))
{
td[loop].innerHTML="My Info Center"
}
}
</script>Below I am just copying what I said before to a certain degree, as the code is basically the same except for the fact that we don't remove the table data, we just change the contents.
First we start the script as tought earlier. Next we define the variable td, td is short for table data and that's how I named it. We say that the variable equals the Tag 'TD'. So we do just that, get an element by its tag name. Straight forward. Then we start the loop, it's simple, just say that the loop equals zero and define the rest of it. Then we proceed with the statement with the bracket {. Next we say that the variable 'td' is looping, and it is basically counting the table data number. At this point loop can be anything, so we have to change that. We say that if the table data contains the text Info Center and it's class is 'titlebg'. You can find this info by viewing a script on any default proboard. And we proceed on with the statement by using the bracket {.
Now we change the innerHTML of the td defined earlier. If you use innerHTML+= instead of innerHTML= it will add innerHTML instead of replacing it. And we end the code with two brackets and the </script> tag.
6) Comments
<script type="text/Javascript">
/* This is a multi-line comment.
This can be more than one line. */
//This is a one line comment.
</script>You can use /* to start a comment that can be more then one line, and */ to end it. And // is just to start a one-line comment, it doesn't need to be ended.
Tutorial Copyright n1 Concepts ©
Last Edit: Sept 21, 2006 21:47:58 GMT by dev7
∞
