Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in...
Transcript of Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in...
![Page 1: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/1.jpg)
Lesson 3:Functions, Methods
and Events in JavaScript
![Page 2: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/2.jpg)
Objectives
• Use methods as functions• Define functions• Use data type conversion methods• Call functions• Pass arguments to functions, including argument creation, return values
and the calculateAvg() function• Return values from functions• Distinguish between global and local variables• Use the conditional operator• Identify user events and event handlers• Use built-in functions and cast variables
![Page 3: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/3.jpg)
Introduction to Functions
• Function• A named block of code that can be called when needed
• In JavaScript, a function can return a value
![Page 4: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/4.jpg)
Defining a Function
• Calling statement
• Argument
• Inserting functions into X/HTML pages
• Good coding practice
![Page 5: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/5.jpg)
Calling a Function
• Passing arguments to functions
• Returning values from functions
• Operator precedence
• Global vs. local variables
![Page 6: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/6.jpg)
User Events and JavaScript Event Handlers
• User Events
• abort
• blur
• click
• change
• error
• focus
• load
• mouseOver
• mouseOut
• reset
• select
• Submit
• unLoad
• Event Handlers
• onabort
• onblur
• onclick
• onchange
• onerror
• onfocus
• onload
• onmouseover
• onmouseout
• onreset
• onselect
• onsubmit
• onunload
• Event Objects
– button
– reset
– submit
– radio
– checkbox
– link
– form
– text
– textarea
– select
– image
– area
– window
![Page 7: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/7.jpg)
Methods as Functions
• Using built-in functions
• Casting variables
![Page 8: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/8.jpg)
Summary
Use methods as functionsDefine functionsUse data type conversion methodsCall functionsPass arguments to functions, including argument creation, return values
and the calculateAvg() functionReturn values from functionsDistinguish between global and local variablesUse the conditional operatorIdentify user events and event handlersUse built-in functions and cast variables
![Page 9: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/9.jpg)
Lesson 3 Quiz
1. The JavaScript toUpperCase() method is an example of:
a. an argument.
b. a calling statement.
c. a built-in function.
d. a user-defined function.
![Page 10: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/10.jpg)
Lesson 3 Quiz
1. The JavaScript toUpperCase() method is an example of:
a. an argument.
b. a calling statement.
c. a built-in function.
d. a user-defined function.
![Page 11: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/11.jpg)
Lesson 3 Quiz
2. Which of the following examples is an example of a JavaScript conversion
method?
a. document.write()
b. parseFloat()
c. alert()
d. function addSpace()
![Page 12: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/12.jpg)
Lesson 3 Quiz
2. Which of the following examples is an example of a JavaScript conversion
method?
a. document.write()
b. parseFloat()
c. alert()
d. function addSpace()
![Page 13: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/13.jpg)
Lesson 3 Quiz
3. In JavaScript, the return keyword is used to:
a. return a value to a function's calling statement.
b. return a value to a function.
c. return a variable to an expression.
d. return a function to an argument.
![Page 14: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/14.jpg)
Lesson 3 Quiz
3. In JavaScript, the return keyword is used to:
a. return a value to a function's calling statement.
b. return a value to a function.
c. return a variable to an expression.
d. return a function to an argument.
![Page 15: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/15.jpg)
Lesson 3 Quiz
4. Which JavaScript event occurs when a Web page is accessed and appears in the
browser?
a. submit
b. focus
c. change
d. load
![Page 16: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/16.jpg)
Lesson 3 Quiz
4. Which JavaScript event occurs when a Web page is accessed and appears in the browser?
a. submit
b. focus
c. change
d. load
![Page 17: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/17.jpg)
Lesson 3 Quiz
5. Which JavaScript event handler can respond to the checkbox object?
a. onblur
b. onsubmit
c. onmouseover
d. onselect
![Page 18: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/18.jpg)
Lesson 3 Quiz
5. Which JavaScript event handler can respond to the checkbox object?
a. onblur
b. onsubmit
c. onmouseover
d. onselect
![Page 19: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/19.jpg)
Lesson 3 Quiz
6. Consider the following JavaScript statements:
function myTest (myValue) {
if (myValue < 5) {
return true;
}else{
return;
}
}
document.write(myTest(6));
What is the result of these JavaScript statements? Why?
![Page 20: Lesson 3: Functions, Methods and Events in · PDF fileFunctions, Methods and Events in JavaScript. ... function •Return values ... Lesson 3: Functions, Methods and Events in JavaScript](https://reader031.fdocuments.net/reader031/viewer/2022021509/5a84471f7f8b9ad30c8b75e5/html5/thumbnails/20.jpg)
Lesson 3 Quiz
6. Consider the following JavaScript statements:
function myTest (myValue) {
if (myValue < 5) {
return true;
}else{
return;
}
}
document.write(myTest(6));
What is the result of these JavaScript statements? Why?
When called, the myTest() function would return undefined because nothing follows the keyword return in the else clause of the if...else statement