Mystery Script

[kuau]

Can someone please tell me what this script does? The top two functions seem to change the color of something if you click on it and then again when you stop clicking, but what is "element"? The third, I have no idea. Thanks! kuau

<!--
function onleftbutton(element){
element.style.backgroundColor="#E2E2E2";
element.style.color='#285276';
}
function offleftbutton(element){
element.style.backgroundColor="#F8F8F8";
element.style.color='#000000';
}
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
//-->

[Twey]

The top two functions seem to change the color of something if you click on it and then again when you stop clicking, but what is "element"?

Whatever is passed.

The third, I have no idea.

It's a completely pointless function that opens a window, probably from Dreamweaver.

[kuau]

Dear Twey: Thanks for your feedback. I can't find anywhere on the page where this script is included that refers to "element". How do I identify what is passed to the function? Sorry javascript is all Greek to me, as they say.

I'm trying to clean extraneous garbage out of the files I inherited. Almost every page has this on it: <script language="JavaScript" src="/js/style.js"></script>

The entire contents of style.js is copied above. I am trying to determine whether I can remove the above line from the files. What would it look like in the html if this script were being called? I would like to identify where it is actually being used. The server seems to be down right now so I can't even look at the live page, but when it comes back up, the site is at www.carrentalhawaii.com if you want to see my dilemma.

Thanks very much. Aloha, kuau

[jscheuer1]

All HTML tags are elements.

[kuau]

Dear John: I'm afraid I'm not 100% sure what that means. To me it implies that if you click anywhere on the web page, whatever you click on will change color, but the only place I see this happening is in the drop-down menus on the home page. Yet I see no code anywhere on the page that calls the function "onleftbutton." How does Javascript control (or indicate) what it acts upon? I don't see why the programmer even put this script there - doesn't seem to do much that is useful. But I'm afraid to remove or change something that I don't totally understand. Sorry for being a js dummy.

Thanks for your help. Aloha, erin

[Trinithis]

I'll try explaining in math terms of what a function is.

Let's say you have an equation:

y = 2x + 3

To find what y equals, you ask something like "What is y when x equals 4?" (Answer: 2(4)+3 = 11)

Instead of saying it verbally like that, people working with functions don't want to write "what is y when x = ..." all the time. So we have a different notation:

f(x) = 2x + 3

To say "What is y when x equals 4?" (or more accurately, "What is f when x = 4"), one can simply write "f(4)". The function in this case is called f, but it could be called anything you want, such as

g(x) = 2x + 3
y(x) = 2x + 3
f(z) = 2z + 3
elephant(x) = 2x + 3

// all these are the same!

Examples:

f(4) = 2(4) + 3 = 11
g(1) = 2(1) + 3 = 5
y(0) = 2(0) + 3
elephant(e) = 2(e) + 3 = 2e + 3

In the functions that you presented element is like the independent variable x. By itself, element means nothing. Just like how x means nothing. It's just a placeholder. Only when a value is passed, like in

f(x) = 2x + 3

passing 4 to f :

f(4) 

x now takes on the characteristics of 4

2x + 3  ->  2(4) + 3  ->  11

does the varible have meaning

[jscheuer1]

I was hoping the light would go on. If it hasn't yet, when I say:

All HTML tags are elements.

I mean exactly that. They are elements. However, only the one being passed to the function will change color or do whatever the function does to or with an element.

Let's take the one function:

function onleftbutton(element){
element.style.backgroundColor="#E2E2E2";
element.style.color='#285276';
}

And lets take one tag:

<span>Hello</span>

If we want the function to be active for that tag, we could:

<span onmousedown="onleftbutton(this);">Hello</span>

The word element is actually arbitrary, it could have as easily have been:

function onleftbutton(blah){
blah.style.backgroundColor="#E2E2E2";
blah.style.color='#285276';
}

It is known as an argument. Arguments are passed to the function. In this case, the type of argument expected is an HTML element, so it makes sense to use the word element to represent it. With the exception of a number of reserved words, the argument can be any word or word like set of characters.

[kuau]

Dear Trinithis & John: Thank you so much for explaining functions and arguments. Never occurred to me that it was math. I understood all of it (I hope) up until ...

<span onmousedown="onleftbutton(this);">Hello</span>

Not sure where the "(this)" came from. It appears to be an argument but does not look like an html element (to me)(?). In any case, I may have discovered the main reason why the style.js script didn't make sense to me. The effect on the drop-down lists (background of selected item turning blue until you click elsewhere) which I was attributing to the script turns out possibly to be simply a characteristic of IE, because I tried removing the script from the page and nothing changed. Then I noticed that in FF the effect doesn't exist with or without the script. Probably explains why there was no "onleftbutton" anywhere on the page, which is what was confusing me. So here is my tentative conclusion based on the above:

If there is a javascript file referenced in the <head> section of a web page and that file contains only function definitions, then that external file reference can be safely removed IF there are no calls to any of those functions anywhere on the page, ie. no arguments are ever passed to the functions.

If that conclusion sounds correct to you (?), then perhaps I can ask a second question in another thread. Thanks very much for your patience and expertise.

Aloha, erin PS. Mele kalikimaka!

[jscheuer1]

As to your first question. When writing a function, the word representing an argument is arbitrary. When calling a function, the argument must represent the thing being passed to the function, so in:

<span onmousedown="onleftbutton(this);">Hello</span>

The reserved keyword this represents the thing itself, in this case the span.

As to your second question, generally yes, but there could be exceptions.

[kuau]

Dear John: Oh, I get it. In this case if you clicked on the word "Hello" (what is enclosed by span tags) the background color of Hello would change because "span" would be the value assigned to "element" which is the argument passed to the onleftmouse function.

??