Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
Paul_808

How To View Global Variables In Debugging Tool, Invoking Vs Calling Functions And When To Use .Value Property

Recommended Posts

Hello,

On pg 260 #6 says to view the global variables. Is this something I can do with Firebug and if so how? When I use Firefox's default debugger it says no variables to display?

 

Also two other questions I have are

1. What's the difference between calling and invoking a function? What's the difference between using or not using parenthesis after calling/invoking a function?

2. Why sometimes when using an element do you need to add .value and other times not?

 

 

Any advice would be very much appreciated. Thanks!

Share this post


Link to post
Share on other sites

1. Ref. PG 245.

 

var getTwo = function() { return 2; }

 

Calling getTwo function:

 

getTwo() Returns result of 2

 

Invoking getTwo

 

getTwo (Returns function() { return 2; })

 

So with our regular examples in the book with window.onload = init don't you see here that we are invoking the function not calling it directly.

 

2. If you you do not add value you would be storing a reference to the object element for later use, so you could then access it later to fetch a value. Adding .value to the end will take out the value at the specific selected element.

 

Firebug you may be able to find a YouTube tutorial on how to use that correctly.

Share this post


Link to post
Share on other sites

To answer your questions:

 

1) I don't know if Firebug is able to display global variables or not. You'll have to check the Firebug documentation on that one. If not though, you can write a simple for-in loop on the window object to view all global variables. Something like:

 

for (var prop in window) {

 // Display globals here. You might want to use the hasOwnProperty method to more accurately find what you're looking for.

}

 

2) "Calling" vs. "invoking" are terms that are often used interchangeably, but if you want to get technical, you "invoke" methods and "call" functions. The reason why is because methods are invoked from an "invocant" (generally an object or a class). The following link explains this in more detail:

 

http://english.stack...rmatics-context

 

I wouldn't worry about the semantics too much though, as people use these terms quite interchangeably. Similarly, people often mix up "argument" and "parameter", even though they are technically different as well.

As for using parentheses versus not using parentheses, there is a huge difference in meaning. As Larry probably mentions in the book, functions are variables in JS. As such, simply writing a function name without parentheses simply references that function, whereas writing a function name with parentheses after it immediately calls the function, which causes a value to be returned. To give an example, imagine we have the following function:

 

function giveMeFive() {

 return 5;

}

 

If we write the following event handler assignment, then the number 5, not the function, will be assigned to the event handler, which will actually cause an error (and can't be done):

 

window.onload = giveMeFive();

 

The reason why this can't be done is because parentheses after a function name immediately calls a function and returns the result, which is then stored in the event handler (and only function references can be assigned to event handlers). Note that a function that does not explicitly return a value in JS implicitly returns undefined.

Now, if we were to do the same thing without parentheses:

 

window.onload = giveMeFive;

 

This is valid, because instead of assigning the value returned by the function to the event handler, you are assigning the function itself (i.e., a reference to the function) to the event handler. While this is valid, it is admittedly useless, as when the window object loads, the number 5 will be returned (by I digress, as I think you get the point).

 

3) The simple answer to why you sometimes use the value property and sometimes you don't is because some JS objects are defined with the value property and others aren't. That's all there is to it. Really, it becomes a matter of simply memorizing (or always looking up) which JS objects have the value property and which don't. After enough practice though, you get used to it. For example, at this point, I have remembered that all form text input objects have the value property, and that the value property for those objects contains the current text in the text inputs on the screen.

 

Well, as always, hope that sheds some light on your questions.

  • Upvote 2

Share this post


Link to post
Share on other sites

An extension of the words from my mouth. I think to be honest that you have to have done a reasonable amount of practice with Object Orientated programming before you can really understand the Document Object Model.

 

You can call a function from the properties of the object you are using, but as Hartley and i showed you can only invoke functions from object methods, yes if they are called you will get an error. For example

 

Assigning a function call to a object property: Assuming public.

 

var watchthis = function() { return 1; };

 

document.getElementById('result').value = watchthis();

Share this post


Link to post
Share on other sites

Thank you very much guys. Your feedback was very helpful.

 

The answers brought up a new question which is the difference between functions and methods. I thought they where the same. I did a bit of googleing which helped somewhat. I understand that a method is a type of function invoked from an "invocant" (generally an object or a class) but I am having a hard time visualizing what that actually means. I wonder if you could show an example of function and a method.

  • Upvote 1

Share this post


Link to post
Share on other sites

Functions are methods but they are in objects. Each object contains different functions and properties. The best thing to do is practice some object orientated programming then you will understand it. The difference between functions is they arebstand alone, methods arebpart of an object.

Share this post


Link to post
Share on other sites

I think best thing is you get Larry's 3rd edition PHP book there is lots of object orientated practice in there. If you read that you will understand.

Share this post


Link to post
Share on other sites

Paul_808, as you suggested, probably the best way to demonstrate the difference between a function and a method is through actual code. (With that said though, I should warn you that the line between a function and a method is somewhat blurred in JS, which I will explain in a minute.)

 

First, let's make a simple function call in JS:

 

var num = parseInt('25');

 

parseInt above is a function by definition because it is not attached to a class or an object. In other words, you can execute it by simply writing parseInt with a set of parentheses and a string argument (which is then converted to a number and stored in the variable num).

 

Now, let's make a simple method invocation (to use the proper term; I quite often say "method call" though):

 

var arr = [4, 789, 2, 3];

arr.push(10); // arr is now [4, 789, 2, 3, 10].

 

In this example, we're creating an array with four number elements, and after that, we're calling the push method of the arr object to add another element to the arr variable.

push is a method because, by definition, it must be attached to an Array object (in this case, the variable arr) to work. In other words, the following would not work:

 

push(10);

 

This would cause an error because JS would basically get confused and say, "Hey, WHAT do you want me to push 10 onto the end of?!"

That is the key: Methods need something to act on, and they know what to act on because they are always attached to a specific object.

Functions on the other hand do not need to be attached to an object, so the necessary information must be provided via the argument(s).

 

Now, where things get kind of hairy in JS is when you realize that all functions in JS are actually methods.

The reason this is the case is because when you call a "function" like parseInt in JS, you're actually calling the parseInt method of the window object. As such, the more complete way to invoke the parseInt method in JS is the following:

 

var num = window.parseInt('25');

 

With that said though, people rarely append the "window." part onto methods attached to the window object. It's not necessary (because the developers of JS decided it was pointless and wanted to save users a lot of typing).

Likewise (and I'm not sure if Larry's book explains this or not), but whenever you declare a global variable or function, that variable or function is implicitly attached to the window object. As such, if I defining the following name variable, I can reference it by attaching it to the window object as follows:

 

var name = 'Sally';

alert(window.name); // Alerts 'Sally'.

alert(name); // Also alerts 'Sally'.

 

So, yeah, I can't think of much more to say on the matter other than:

1) All functions in JS are technically methods, but people still generally differentiate between the two.

2) By definition, methods are attached to a class/object (in JS, there are no classes though), and functions are not attached to a class/object.

3) The difference between functions and methods really has to do with the difference between more traditional procedural-based programming (i.e., just calling a bunch of functions in a row to do something) and OOP (i.e., using classes to define objects, from which methods are called in order to get the objects to interact with each other).

 

Please ask if you have any additional questions.

  • Upvote 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...