function communication

[coffeecup]

Could you please assist me with some informative educational web articles or book reference that would explore the communication between the function and what is being manipulated by the function.

I find it difficult to follow a monkey see monkey do approach to learning a non tangible environment.

 

below is a example Javascript function.

 

what i am stuck on at this time is blind faith in how the statements inside of the function are communicating to the document.

there are two statements inside of the function that uses the argument word shoe, as far as i know the argument word could be any word, descriptive or not.

It is here in-between the parenthesis that a lot of "different" activity takes place, dependent of the purpose of the function as i presume from what little i have seen without much explaining of the different roles of the function.

Here in this function shown i am in the understanding that the argument acts as a variable holding a value that was "i guess" was obtained via the argument word being attached to the getAttribute method that is actually a function.

I could go on and create confusion. yet to re iterate , i need some material to read to look at the big picture and landscape of the function and as to how the statements communicate to the doc.

i can slap statements together, just need to go deeper into the communication that is not seen with the eyeballs. Thank you. 

function showPic(shoe)
{
	var source = shoe.getAttribute("href");
	var placeholder = document.getElementById("placeholder");

	placeholder.setAttribute("src", source);

	var text = shoe.getAttribute("title");
	var description = document.getElementById("descript");
	description.firstChild.nodeValue = text;
}

 

[sunfighter]

You can beat w3schools for a good start about things.

 

http://www.w3schools.com/js/default.asp

[gizmola]

Could you please assist me with some informative educational web articles or book reference that would explore the communication between the function and what is being manipulated by the function.

I find it difficult to follow a monkey see monkey do approach to learning a non tangible environment.

 

below is a example Javascript function.

 

what i am stuck on at this time is blind faith in how the statements inside of the function are communicating to the document.

there are two statements inside of the function that uses the argument word shoe, as far as i know the argument word could be any word, descriptive or not.

It is here in-between the parenthesis that a lot of "different" activity takes place, dependent of the purpose of the function as i presume from what little i have seen without much explaining of the different roles of the function.

Here in this function shown i am in the understanding that the argument acts as a variable holding a value that was "i guess" was obtained via the argument word being attached to the getAttribute method that is actually a function.

I could go on and create confusion. yet to re iterate , i need some material to read to look at the big picture and landscape of the function and as to how the statements communicate to the doc.

i can slap statements together, just need to go deeper into the communication that is not seen with the eyeballs. Thank you. 

function showPic(shoe)
{
	var source = shoe.getAttribute("href");
	var placeholder = document.getElementById("placeholder");

	placeholder.setAttribute("src", source);

	var text = shoe.getAttribute("title");
	var description = document.getElementById("descript");
	description.firstChild.nodeValue = text;
}

 

I'll try and explain the function.

 

As you stated, "shoe" in that example is a parameter.  So when the function is called, a real variable will be passed to it in the function call.  What can we tell about shoe from the context inside the function?

 

The first thing done is:

 

var source = shoe.getAttribute("href");

 

So "shoe" is assumed to be a javascript object that has the getAttribute method.

 

You can look at a javascript reference or resource like this one and see that most of the objects in the DOM have that method. 

 

Sitepoint has an excellent reference on the javascript language and using that we get this info:  http://reference.sitepoint.com/javascript/Element/getAttribute.  Interesting to note that this method is described as "badly broken" in most browsers. 

 

So clearly what this method is trying to do is get the value of an attribute (object variable) from some javascript object, that has the name 'href'.  What type of object has an attribute named 'href'?

 

Well, if we can assume that this is not a user defined class, then the obvious one that jumps out is the anchor tag.

 

Mylink

 

Then you have:

 

var placeholder = document.getElementById("placeholder");

 

getElementId() is used to locate an object in the DOM by it's id, where it would be something like:

 

 

So in essence you can break this code down as a getting the url of a link, setting the "src" attribute (img tags have the "src" attribute) another object that has the id of "placeholder", and then getting another object with the id of "descript" and taking that same link, and using it's "title" attribute to set the:

 

description.firstChild.nodeValue = text;

 

If you do some reading, you'll find that nodeValue is the attribute of text nodes, so probably this indicates that "descript" would be the id of some block element like a paragraph. So the goal of this function appears to be to take an anchor tag that also has a title= attribute in the tag, and convert that to an image tag, with a text description above or below it.

 

Basically, the way to go through this type of code, is to start at the top, and satisfy any confusion you have by doing research.  You should also have a test script you're using to see what happens when you actually implement the function.  Firefox + firebug is a great tool for exploring.