friendsterTalk - Friendster Forum

Oh well, i made this topic because i've seen alot of codes here being misused.

So what is a function?

functions is a block of code that perform a routine or process. it can return a value or not return anything at all, just execute a block of code. It can also accept arguments or parameters. A function must not be duplicated in a document(which may contain more that 1 javascript). However it can be called many times.

Here's some example of the syntax, foo can be anything provided it doesnt begin with number and only contains letter and underscore.

function that execute a code

function foo() {
alert("hi");
}

how to call:

foo();

will show an alert with "hi" message

function that execute a code but requires a parameter

function foo(message) {
alert(message);
}

how to call:

foo("hi");

will show an alert with "hi" message

function returns a value

function foo() {
return "hi";
}

how to call:

alert(foo());

will show an alert with "hi" message

function returns a value but requires a parameter

function foo(message) {
if(message) return true;
return false;
}

how to call:

alert(foo("hi"));

will show an alert with "true" message


so now you know how to use a function. As I said a function must not be duplicated, it will cause bugs if you do.

Why use functions?
Basically we want our code short, in practicality we use function so that we can execute the same code many times without making the same code.

What tricks here in ftalk do use functions?
All of my codes uses function. That includes addSideBar, addMainbar and wvm.

Ok here's an example how we will apply the purpose of a function, we will use addSideBar.

Here's the addSideBar function,

function addSideBar(head,htm,div_id) {

    var innerHtm=htm;
    var cont=
       
        "<div id='"+div_id+"' class='commonbox "+div_id+"'>"+
        "<h2>"+head+"</h2>"+
"<div id='content_"+div_id+"'>"+
        innerHtm+
"</div>"+
       
        "</div>";

    try {
        var obj=document.createElement("<li>");
    } catch(e) {
        var obj=document.createElement("li");
    }
    var x=document.getElementById("2");
    x.parentNode.parentNode.appendChild(obj);
    obj.innerHTML=cont;
}

Say we want to put three sidebars in our profile, each one will have an image link. Again, we only need a single block of addSideBar function for the three sidebars.

if (!attachOnLoadHandler(function(){editContent()})) parent.onload = function(){editContent()};
function editContent() {
  var html1="<a href=\"somelink1.html\"><img  src="someimage1.bmp" /></a>";
  addSideBar("Title 1",html1,"sidebar1");
  var html2="<a href=\"somelink2.html\"><img  src="someimage2.bmp" /></a>";
  addSideBar("Title 2",html2,"sidebar2");
  var html3="<a href=\"somelink3.html\"><img  src="someimage3.bmp" /></a>";
  addSideBar("Title 3",html3,"sidebar3");
}



function addSideBar(head,htm,div_id) {

    var innerHtm=htm;
    var cont=
       
        "<div id='"+div_id+"' class='commonbox "+div_id+"'>"+
        "<h2>"+head+"</h2>"+
"<div id='content_"+div_id+"'>"+
        innerHtm+
"</div>"+
       
        "</div>";

    try {
        var obj=document.createElement("<li>");
    } catch(e) {
        var obj=document.createElement("li");
    }
    var x=document.getElementById("friends_2_2");
    x.parentNode.parentNode.appendChild(obj);
    obj.innerHTML=cont;
}

wait a minute, where the hell did that attachOnLoadHandler come from?
attachOnLoadHandler is also a function, one of friendster's js(http://images.friendster.com/200706A/js…ster_v1.js) already does have this function so we do no longer need to copy the whole attachOnloadhandler code. in the code above, we only called it and passed a parameter which is also a function(editcontent). So this demonstrates why functions must not be duplicated.

I hope you get my point...

Last edited by Ephemeral (2008-03-04 13:36:27)