Passing Parameters in JavaScript

modeler1 · Jun 17, 2001

I was wondering if anyone could clear up the technique of passing parameters for me. I have read many books on C, C++, JavaScript, CGI/Perl and still do not understand how this is done. I must be thick. For example...here is a tiny JavaScript code...

<HTML>
<TITLE> A text Area Example</TITLE>
<BODY>
<CENTER>
<FORM>
<TEXTAREA NAME="Textarea" COLS=30 ROWS=10></TEXTAREA>
<BR>
<BR>
<INPUT TYPE=BUTTON Value="Display Message" onClick="DisplayMessage(this.form)">
</FORM>
</CENTER>

</BODY>

<SCRIPT LANGUAGE=JavaScript>
function DisplayMessage(form1)
{
form1.Textarea.value="Hello World"
}
</SCRIPT>
</HTML>

OK...when the user clicks on the button, this calls the function DisplayMessage(???)
What the (this.form) does, I have a general idea but not specific. I think it saying that the "this" is saying that the DisplayMessage function should
display something in particular. Something indicated in between the <FORM> and the </FORM> tags of THIS section of code, versus say, ANOTHER section of code.
OK...this is just a CALL a function.
When we get to the actual function, (I think it is just now being declared). But what is the form1 argument for? I have already been told what to display in the onClick line. Why is it in two places. There is nothing else in the code called "form1".

Why can't it be done like this so people could understand it?

<HTML>
<TITLE> A text Area Example</TITLE>
<BODY>
<CENTER>
<FORM 1>
<TEXTAREA NAME="Textarea" COLS=30 ROWS=10></TEXTAREA>
<BR>
<BR>
<INPUT TYPE=BUTTON Value="Display Message" onClick="DisplayMessage()">
</FORM 1>
</CENTER>

</BODY>

<SCRIPT LANGUAGE=JavaScript>
function DisplayMessage()
{
"Hello World"
}
</SCRIPT>
</HTML>

Now I can see whats going on. The user clicks the button and calls DisplayMessage(). The computer now searches out DisplayMessage() and sees the text to display in the brackets { }. Why are they going thru all this passing stuff. I don't even know who it is being passed to.

Thanks for looking at this.
Rocky Shepheard

anorakgirl · Jun 17, 2001

um i'll try...

the "this" keywork refers to the thing which is calling the action i.e. in this code :

Code:

<INPUT TYPE=BUTTON Value=&quot;Display Message&quot; onClick=&quot;DisplayMessage(this.form)&quot;>

the "this" is a reference to the input button. so this.form is a reference to the form which the input button is in. and in the function which is called:

Code:

<SCRIPT LANGUAGE=JavaScript>
    function DisplayMessage(form1)
    {
        form1.Textarea.value=&quot;Hello World&quot;
    }
</SCRIPT>

the variable "form1" then contains a reference to the form which you passed in when you called the function. so it saves you from having:

Code:

document.formname.Textarea.value=&quot;Hello World&quot;

for example, if you have a function like this:

Code:

<SCRIPT LANGUAGE=JavaScript>
    function setText(itm)
    {
        itm.value=&quot;Hello World&quot;
    }
</SCRIPT>

you can then call it like this

Code:

<INPUT TYPE=BUTTON Value=&quot;Clickme&quot; onClick=&quot;setText(this.form.textarea1)&quot;>

this means you can use the same function many times to set different bits of text depending upon the item you pass a reference to.

your code like this:

Code:

<SCRIPT LANGUAGE=JavaScript>
    function DisplayMessage(form1)
    {
        form1.Textarea.value=&quot;Hello World&quot;
    }
</SCRIPT>

doesn't really make best use of the reference because it would only be reusable if you had more than one form that contained a text area called "Textarea".

if its not going to be reused, you might as well just rewrite your code as:

Code:

<SCRIPT LANGUAGE=JavaScript>
    function DisplayMessage()
    {
        document.mainform.Textarea.value=&quot;Hello World&quot;
    }
</SCRIPT>

and then call it like this:

Code:

<FORM name=&quot;mainform&quot;>
<TEXTAREA NAME=&quot;Textarea&quot; COLS=30 ROWS=10></TEXTAREA>
<BR>
<BR>
<INPUT TYPE=BUTTON Value=&quot;sometext&quot; onClick=&quot;DisplayMessage()&quot;>
</FORM>

think i'm prob rambling and not being v clear now... does it make any sense?

anorakgirl

haslo · Jun 17, 2001

Think of a function as a unit that does not change and knows nothing of its surroundings. There are global and class variables in most languages, but they are something special - they can be looked at as variables that are passed implicitly to every function in their scope. Global: the scope is the aplication, class: the scope is the class. But those topics are a little more advanced...

Then: If you want anything to happen, you'll have to make it somewhere. You can't simply say "Hello, I'd like to have you writing my name" to a computer - you'll have to explain in every detail what you want it to do. If the computer sees "Hello World" as you proposed, it will have no idea what to do with it. A computer basically understands "0" and "1". How would you act if some alien being would give you a five-dimensional object that's self-explaining for the alien (because it can "see" those five dimensions)??
So this form1 is just the name for the parameter this function RECEIVES from above, where "this.form" is PASSED to the function. You could copy the <form>...</form> part and paste it again in any other place and it would still work (using the according text area) with only one occurence of the function (try this, please!). Writing the function again would even lead to a duplicate function definition, just confusing the computer.
"this.form" means: Look here in the code (this), seek out the "form" part at this position and pass it to the function. So the form part in this place is passed - the "this" is only used as a means to this end.

Well, so the function is being passed the form. It then accesses the form it received, seeks out the element called "Textarea" and sets its value (see?) to "Hello World". The brackets structure your code and tell the interpreter (the client's browser) where the function begins and ends.
Brackets can also set further validity scopes - at least in any "normal" language (I think JavaScript's a little lazy here, if you really want to learn how to program I propose using another language like Java, C++ or even Pascal - programming languages in contrast to a scripting language like JavaScript...).
There can be many other elements on the form - and how should the computer know you don't want to set the value of the <input...> element? Or you want to popup a message? Or you want to store your text "Hello World" in a variable for future use?

Try hacking your way through a tutorial for Java or C++ (these languages are pretty modern, well-structured and they also have the OOP approach that nowadays is pretty standard) and coding the examples as well. Programming is experience. Programming is not possible without experience. Books are a means to further understanding and a tool for you to see where you can learn more by coding the things that are shown and explained in the advanced books. You can only learn how things work in a book, but not how you should do it and make it work. It's like you can't read a book about building houses and build a house afterwards.

Hope this helps...

allow thyself to be the spark that lights the fire
haslo@haslo.ch - www.haslo.ch

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Passing Parameters in JavaScript

modeler1

Technical User

anorakgirl

Programmer

haslo

Programmer

Similar threads

Part and Inventory Search

Sponsor