A: That’s right. When you use parentheses after the function name, like init(), you saying you want to call the function init. If you use its name without parentheses, then you’re assigning the function value to the onload property. It’s a subtle difference when you’re typing it in, but the ramifications are large, so pay careful attention.
Q: Which of the two ways of creating a window.onload handler is better, using a function name or an anonymous function?
A: One isn’t better than the other, they both do basically the same thing: set the value of window.onload to a function that will run when the page has loaded. If you need to call init from another function later in your program for some reason, then you’ll need to define an init function. Otherwise, it doesn’t matter which way you do it.
Q: What’s the difference between built-in objects like window and document, and the ones we make?
A: One difference is that built-in objects follow the guidelines set by specifications, so you can refer to the W3C specifications to understand all their properties and methods. In addition, many of the built-in objects, like String, may have properties that are immutable and can not be changed. Other than that, objects are objects. The nice thing about built-in objects is they’re already built for you.
So take a little R&R after this chapter, but before you go please take a quick look at the bullet points, and do the crossword
to make it all stick.
Yes, String is an object! Check out a good JavaScript reference to get all the details
of its properties and methods.
Congrats! You’ve completed our tour of objects, and made it through several chapters of JavaScript bootcamp. Now it’s time to use all that knowledge to program with HTML5 and all the new JavaScript APIs, starting in the very next chapter!
You’re leaving this
chapter knowing more about objects and functions than many people out there. Of course, you can always learn more and we encourage you to explore
(after you finish this book)!
review of functions and objects
To create a function, use the function keyword with parentheses to hold parameters, if there are any.
Functions can be named, or be anonymous.
Naming rules for functions are the same as naming rules for variables.
The body of a function goes between curly braces, and contains statements that do the work of the function.
A function can return a value with the return statement.
To invoke (or call) a function, use its name and pass any arguments it needs.
JavaScript uses pass-by-value parameter passing.
When you pass an object, like a dog, as an
argument to a function, the parameter gets a copy of the reference to the object.
Variables defined in functions, including parameters, are known as local variables.
Variables defined outside of functions are known as global variables.
Local variables are not visible outside the function in which they are defined. This is known as the scope of a variable.
If you declare a local variable with the same name as a global variable, the local variable shadows the global variable.
When you link to multiple JavaScript files from your page, all the global variables are defined in the same global space.
If you assign a new variable without using the var keyword, that variable will be global, even if you are first assigning it in a function.
Functions are values that can be assigned to variables, passed to other functions, stored in arrays, and assigned to object properties.
Objects are collections of properties.
You access an object’s properties using dot notation or the [ ] notation.
If you use [ ] notation, enclose the property’s name as a string; for example, myObject[“name”].
You can change a property’s value, delete properties, or add new properties to an object.
You can enumerate an object’s properties using a for-in loop.
A function assigned to an object property is referred to as a method.
A method can use a special keyword, this, to refer to the object on which it was invoked.
A constructor is a function that makes objects.
The job of a constructor is to create a new object and initialize its properties.
To invoke a constructor to create an object, use the new keyword. For example, new Dog().
We’ve already been using several objects in this book, including document, window, and various element objects.
The window object is the global object.
The document object is one of window’s properties.
The document.getElementById method returns an element object.
HTML5cross
It’s been a whirlwind chapter of functions, objects, properties and methods—so there’s lots to make stick.
Sit back, relax, and work the rest of your brain a little.
Here’s your Chapter 4 crossword puzzle.
1 2
3
4 5
6 7
8 9
10 11
12 13
14
15 16
17
18
Across
1. These variables are only available in functions.
4. The true global object.
6. The _________ object represents the DOM.
11. Arguments are passed by ______________.
12. Use this keyword to start a function definition.
14. Functions without return statements return this.
15. A function in an object.
17. Functions without a name.
18. What you supply in your function definition.
Down2. This kind of function makes objects.
3. Functions might or might not include this kind of statement.
5. Stringing together properties and function calls with the dot operator.
7. A property in window that we assign to a handler function.
8. What you supply in your function call.
9. The ______ operator lets you access an object’s properties and methods.
10. By convention, constructors have a name with an _________ first letter.
13. Refers to the current object in an object method.
16. Variable scope that is visible everywhere.
Across
1. These variables are only available in functions.
4. The true global object.
6. The _________ object represents the DOM.
11. Arguments are passed by ______________.
12. Use this keyword to start a function definition.
14. Functions without return statements return this.
15. A function in an object.
17. Functions without a name.
18. What you supply in your function definition.
Down
2. This kind of function makes objects.
3. Functions might or might not include this kind of statement.
5. Stringing together properties and function calls with the dot operator.
7. A property in window that we assign to a handler function.
8. What you supply in your function call.
9. The ______ operator lets you access an object’s properties and methods.
10. By convention, constructors have a name with an _________ first letter.
13. Refers to the current object in an object method.
16. Variable scope that is visible everywhere.
exercise solutions
Use your knowledge of functions and passing arguments to parameters to evaluate the code below. After you’ve traced through the code, write the value of each variable below. Here’s our solution.
function dogsage(age) { return age * 7;
}
function rectanglearea(width, height) { var area = width * height;
return area;
}
function addUp(numarray) { var total = 0;
for (var i = 0; i < numarray.length; i++) { total += numarray[i];
}
return total;
}
function getavatar(points) { var avatar;
if (points < 100) { avatar = "Mouse";
} else if (points > 100 && points < 1000) { avatar = "Cat";
} else {
avatar = "ape";
}
return avatar;
}
var myavatar = getavatar(335);
myDogsage = rectarea = theTotal = myavatar =
Write the value of each variable here...
var myDogsage = dogsage(4);
var rectarea = rectanglearea(3, 4);
var theTotal = addUp([1, 5, 3, 9]);
28 12 18 Cat
HTML5cross Solution
1L
O C2 A L
O 3R
4W
I N D O W 5C E
S H 6D 7O C U M E N T
8A
T 9D A N U
R R O I 10U 11V A L U E R
G 12F U N C T I O N P 13T O N
U C I P H A
M T 14U N D E F I N E D
15M
E T H O D 16G G R S
N R L C
T O 17A N O N Y M O U S
S B S
18P
A R A M E T E R S L
Across
1. These variables are only available in functions. [LOCAL]
4. The true global object. [WINDOW]
6. The _________ object represents the DOM. [DOCUMENT]
11. Arguments are passed by ______________. [VALUE]
12. Use this keyword to start a function definition.
[FUNCTION]
14. Functions without return statements return this.
[UNDEFINED]
15. A function in an object. [METHOD]
17. Functions without a name. [ANONYMOUS]
18. What you supply in your function definition.
[PARAMETERS]
Down2. This kind of function makes objects. [CONSTRUCTOR]
3. Functions might or might not include this kind of statement.
[RETURN]
5. Stringing together properties and function calls with the dot operator. [CHAINING]
7. A property in window that we assign to a handler function.
[ONLOAD]
8. What you supply in your function call. [ARGUMENTS]
9. The ______ operator lets you access an object’s properties and methods. [DOT]
10. By convention, constructors have a name with an _________ first letter. [UPPERCASE]
13. Refers to the current object in an object method. [THIS]
16. Variable scope that is visible everywhere. [GLOBAL]