Use a Cabeça! HTML5 Programming   Ingles
610 pág.

Use a Cabeça! HTML5 Programming Ingles

DisciplinaDesenvolvimento de Software2.058 materiais17.809 seguidores
Pré-visualização50 páginas
in the dialog.
Remember, functions aren\u2019t required 
to return a value. But in this case, 
the bark function does return a value.
118 Chapter 4
importance of functions and objects
I keep tellin\u2019 you, all of the 
HTML5 APIs are chock-full of 
functions, objects and all that 
advanced JavaScript stuff...
If we could have another moment to talk...
We know, we know, by Chapter 4 you thought you\u2019d be flying in an 
HTML5 jetpack by now, and we\u2019ll get there. But before we do, you 
really need to understand the underpinnings of the HTML5 JavaScript 
APIs, and we\u2019re going to do that in this chapter. 
So what are these underpinnings? Think of the HTML5 JavaScript 
APIs as made up of objects, methods (otherwise known as functions) 
and properties. And so to really get in and master these APIs, you 
need to understand those things pretty well. Sure, you could try to 
get by without knowing them, but you\u2019ll always be guessing your 
way around the APIs while failing to use them fully (not to mention 
making lots of mistakes and writing buggy code).
So we just wanted to drop you a note before you got too far into this 
chapter to tell you what we are up to. Here\u2019s the great thing: by the 
end of this chapter you\u2019re going to understand objects, functions, 
methods and a lot of other related things better than about 98% of 
JavaScript scripters out there. Seriously.
you are here 4 119
javascript functions and objects
Head First: Welcome Function! We\u2019re looking 
forward to digging in and finding out what you\u2019re 
all about.
Function: Glad to be here.
Head First: Now we\u2019ve noticed many people 
who are new to JavaScript don\u2019t tend to use you a 
lot. They just get in and write their code, line by 
line, top to bottom. Why should they take a look at 
Function: Yes, and that is unfortunate, because 
I\u2019m powerful. Think about me like this: I give you 
a way to take code, write it once, and then reuse it 
over and over.
Head First: Well, excuse me for saying this, but 
if you\u2019re just giving them the ability to do the same 
thing, over and over...that\u2019s a little boring isn\u2019t it?
Function: No no, functions are parameterized\u2014
in other words, each time you use the function, you 
pass it arguments so that you can get back results 
that vary, depending on what you pass in.
Head First: Err, example?
Function: Let\u2019s say you need to tell your 
users how much the items in their shopping 
cart are going to cost, so you write a function 
computeShoppingCartTotal. Then you 
can pass that function different shopping carts 
belonging to different users and each time you get 
the appropriate cost of the shopping cart. 
...By the way, back to your comment about 
new coders not using functions; that\u2019s simply 
not true, they use them all the time: alert, 
document.getElementById, Math.random. 
They just aren\u2019t defining their own functions.
Head First: Well, right, alert, that makes sense, 
but the other two don\u2019t look quite like functions.
Function: Oh they\u2019re functions, you see... hold on 
just a sec... 
...oh, I was just told the readers haven\u2019t learned 
about those kinds of functions yet, but they\u2019re 
getting there in a few pages. Anyway, functions are 
Head First: So, one thing a function has to do is 
return a value, right? I mean, what if I don\u2019t have 
a value I want to return?
Function: Many functions return values, but a 
function doesn\u2019t have to. Lots of functions just do 
something like update the DOM and then return 
without any value, and that\u2019s just fine.
Head First: So in those functions I just don\u2019t 
have a return statement?
Function: You got it.
Head First: Well, what about naming your 
functions, I\u2019ve heard you don\u2019t have to do that 
either, if you don\u2019t want to.
Function: Okay, let\u2019s not freak the audience out 
too much. How about we come back to that topic 
after they know a bit more about me?
Head First: As long as you give me an exclusive?
Function: We\u2019ll talk...
The Function Exposed
This week\u2019s interview: a few 
things you didn\u2019t know...
120 Chapter 4
parameters and arguments
I\u2019m not sure I get the 
difference between a parameter 
and an argument\u2014are they just two 
names for the same thing?
No, they\u2019re different.
When you define a function you can define it with one or 
more parameters. 
function cook(degrees, mode, duration) {
 // your code here
Here we\u2019re defining three 
parameters: degrees, mode 
and duration.
When you call a function, you call it with arguments:
cook(425.0, "bake", 45);
These are arguments. There are three 
arguments, a floating point number, a 
string and an integer.
cook(350.0, "broil", 10);
So you\u2019ll only define your parameters once, but you\u2019ll probably call 
your functions with a lot of different arguments.
You define a function with parameters, 
you call a function with arguments.
You\u2019d be amazed how many people get this 
wrong\u2014even books get it wrong, so if you read 
it differently elsewhere, now you know better....
you are here 4 121
javascript functions and objects
Now that you know how to define and call a function, let\u2019s make sure we\u2019ve got 
the syntax down cold. Here are all the parts of a function\u2019s anatomy:
Anatomy of a Function
function addScore ( level , score ) {
 var bonus = level * score * .1;
 return score + bonus;
Always start with the 
keyword \u201cfunction\u201d. 
Follow the function keyword with 
the name of your function.
Even if your function has no 
parameters, you still need 
an opening and closing set of 
parens, like ().
And then zero or more 
comma separated parameters 
between parentheses.
The body sits between two 
curly braces and contains a set 
of statements (just like the 
statements you\u2019re used to).
A function can include a 
statement with the return 
keyword, but it doesn\u2019t have to.
The return statement includes an 
expression, which is returned as a 
result of calling the function.Here\u2019s the closing brace of the body.
Q: Why don\u2019t the parameter names 
have var in front of them? A parameter is 
a new variable right?
A: Efffectively yes. The function does all 
the work of instantiating the variable for you, 
so you don\u2019t need to supply the var keyword 
in front of your parameter names. 
Q: What are the rules for function 
A: The rules for naming a function are the 
same as the rules for naming a variable.
Q: I\u2019m passing a variable to my 
function\u2014if I change the value of the 
corresponding parameter in my function 
does it also change my original variable?
A: No. When you pass a primitive value 
it is copied into the parameter. We call this 
\u201cpassing by value.\u201d So if you change the 
value of the parameter in your function body 
it has no affect on our original argument\u2019s 
value. The exception to this is passing an 
array or object, and we\u2019ll get to that in a bit. 
Q: So how can I change values in a 
A: You can only change the values of 
global variables (those defined outside of 
functions), or variables you\u2019ve explictly 
defined in your function. We\u2019re going to talk 
about that in a little more detail shortly.
Q: What does a function return if it 
doesn\u2019t have a return statement?
A: A function without a return statement 
returns undefined.
122 Chapter 4
exercise on parameters
Use your knowledge of functions and passing arguments to parameters 
to evaluate the code below. After you\u2019ve traced through the code, write 
the value of each variable below. Check your answers with the solution 
at the end of the chapter before you go on.
function dogsage(age) {
 return age * 7;
var myDogsage = dogsage(4);
function rectanglearea(width,