Jump to content
xisto Community
Sign in to follow this  
fallenfirebanshi

[tut/mod]functions Learning The Basics

Recommended Posts

Learning Functions v1:

 

W3schools Definition:

A function contains some code that will be executed only by an event or by a call to that function.

 

You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file).

 

Functions are defined at the beginning of a page, in the <head> section.


So how the heck do you use a function?

 

well you simple start off with the function methid

 

<script>function functionname(var1,var2,...,varX){some code}</script>

Functions are useful because you can do such big things easier in smaller commands.

 

Lets take my example

 

Lets change a whole forum link/name into a google link/text

 

<script>function change(oldt,newt){var a = document.getElementsByTagName("b");for(x=0;x<a.length;x++){ if(a[x].firstChild.innerHTML == oldt){  a[x].innerHTML = newt; }}}change("Bug Reports","<a href='http://google.com'>Google</a>");</script>

alright back to what we was talking about Big things made easier

 

well lets look at the script

 

line 1 = <script>

-Starts our script out with the javascript tag

line 2 = function change(oldt,newt){

-well here we go function we just declared a new function now we give our function a name

sort of like an object and we called it "change" now we've made our new function now you ask

whats inside the round braces (*,*) well there called perimeters. There are used to define what I call "SIMPLE CODING".

With this perimeter defined we can now say what in the world we want to make. Well I said humm I want to make a custom url.

so I had to think first what did I want to do. well simple I said we need to get the old link and replace it with somthen else.

Well isn't that what i did? yes it is so we make up our varibles for the perimeters to be defined.

 

oldt and newt.

oldt is used as what I call the "OLD TEXT" and newt is what i call "NEW TEXT"

so now we cleared that up. now we can use this function over and over and over.

Whys that you ask? wat until line 4.

 

line 3 = lets get our HTML TAG what tag do we need to grab to get information from.

well we did that but using a DOM feature.So basicaly getElementByTagName means get HTML tag name but its actual tag.

such as <span> or <font> or <i> etc.. get me? so we add document. infront of that so we can get that pages tag names. Then find a accorate match.

 

line 4 = well so we have LOADS of tags on the page right? well we use the "for" method.

this will loop threw all tags we define in the line. Lets say " for(x=0;x<a.length;x++){"

 

x=0 were making that varible equal to 0 so we start at the very begining of the document to loop threw

then were saying our x is less then a's length well that simple means while we search for all the x is less then the total number of "B" tags until it ends the loop

and x++ means lets finish the x less then a part to make sure we get ALL bold tags on our page. So now we have gotten every bold tag on the page the script is on.

 

now we have to narrow the search down to access a smaller part of information to edit. So we try matching stuff.

 

line 5 = if(a[x].firstChild.innerHTML == oldt){

well to understand that you would need to see what the bold tag we are trying to access.

 

<b><a href="http://z11.invisionfree.com/DemonicScriptsv2/index.php?showforum=1">Bug Reports</a></b>

now that out the way. "B" is the parent node (most outter element) of "a". So firstChild means the first element inside the B tag

 

since its written out like this: <b><a hre....>text</a></b> a is the first element.

 

so thats "B"'s firstChild and only child. now we want to narrow the search down so we check what we are matching

 

so innerHTML is equal to "Bug Reports" so we say "if a[x].firstChild is equal to our second perimiter in our function then do somthen.

so later when we redeclair this function we define our perimeters to what we want to search for and make a perfect match.

(Cool fact remember a was our tagname we matching and x is our loop we need to put them into a array form to try and grab all tags so that looks like so a[x])

so now we grabbed our content.

So now we redeclair our second perimiter. "newt" so since we grabbed that content we force the script to make our innerHTML newt

 

so now its running the script and saying : if you find this content then we will force you to turn into somthen we tell you to be.

 

and the other lines 6-8 we are closing our tags: first line 6 = if tag,7= for loop tag,8 = function tag.

 

and Thats how we make the function. Now you should understand how its made so when putting it into action you should understand why "Bug Reports" is where it is and "our new text such as google url" is where it is.

 

then we do

 

change("Bug Reports","<a href='http://'>HAHAHA</a>");

so now we redeclared our function above and its saying to our computers browser if we match Bug Reports then change Bug Reports into a random url.

 

Hope this helps you because I spent 20 minutes on it 107 lines.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.