Jump to content

[solved] Event Handling And Function Parameters - The Unobtrusive Way


laczfinador

Recommended Posts

Hello World!Let's look at a simple HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>	<meta http-equiv="Content-type" content="text/html;charset=utf-8" />	<link rel="stylesheet" type="text/css" href="default2.css" />	<script type="text/javascript" src="script2.js"></script></head><body><p id="text"></p></body></html>

Now, let's see the corresponding script:

var s=prompt("type a string","");window.onload=writeText;function writeText(){	document.getElementById("text").innerHTML=s;}

This script works just fine. When page is loaded, you get a prompt, where you can enter some text. Then, the text is displayed on screen, inside the paragraph element. The problem is, that if I want to store the user input in a variable, and pass this as an argument, the script doesn't work. Here is the other script:

var s=prompt("type a string","");window.onload=writeText(s);function writeText(str){	document.getElementById("text").innerHTML=str;}

As far as I know, when parenthesis are written after a function's name, it is instantly executed, and the return value is passed onto the handle - instead of being attached to the event. After pondering on this for a while, I made up a solution, that seems to work. It looks as follows:

var s=prompt("type a string","");window.onload=function(){	writeText(s);}function writeText(str){	document.getElementById("text").innerHTML=str;}

So... can someone explain to me, why does this script work, and the one before doesn't? Thanks in advance!Cheers!

Link to comment
Share on other sites

Just like what you said, when you put parentheses after a function name it executes the function, it is not a reference to the function. It immediately runs. If you want to give a reference to the function you only give the function name, so that you are passing the function itself to onload. The way you wrote at the end uses an anonymous function as the onload handler, so that entire function is being sent to onload, and the function executes your writeText function. If you want to pass parameters to a handler using traditional Javascript that's the way you do it. Some Javascript libraries will have ways to automate that. ExtJS, for example, modifies the function object to have a createDelegate method with returns a copy of the function with certain parameters, so using ExtJS you could do this:window.onload=writeText.createDelegate(this, );That executes the createDelegate method of the function object, which returns a new copy of the writeText function which will execute in the given scope (the this object) and receive the array of parameters (the array in this case only contains the s variable).

Link to comment
Share on other sites

Hey there!Thanks for the reply. Am I to understand, that my solution is actually the correct, traditional way of doing this? I could not understand clearly, if that was what you were saying... also... do you have any tips. where can I dive deeper into JavaScript, than what is in the online tutorial on w3schools? I have searched the internet for other tutorials and references, but all of them seem to talk about the basic stuff... not much about how to code efficiently and unobtrusively... and also... your avatar as cool! :)

Link to comment
Share on other sites

Yeah, that's the common way to do it.If you've moved beyond the basics and want more, it would probably be best to get a book, I prefer O'Reilly:http://oreilly.com/catalog/9780596521882/http://oreilly.com/catalog/9780596805531/http://oreilly.com/catalog/9780596802806/http://oreilly.com/catalog/9780596157142/There are some good resources here too:http://www.quirksmode.org/js/contents.htmlhttp://www.howtocreate.co.uk/tutorials/javascript/important

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...