[go: up one dir, main page]
Scribd
Upload
18 views14 pages

Chapter 2 Lesson 1 PDF

Learn about exercise

Uploaded by

mokoneaujan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views14 pages

Chapter 2 Lesson 1 PDF

Learn about exercise

Uploaded by

mokoneaujan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

ICT1512

Chapter 2
Lesson 1

Working with Functions


Managing Events with
Functions
Using Built-in JavaScript
Functions
Understanding Variable
Scope
Working with Data Types
Objectives
• You will have mastered the material in this lesson
when you can:
– Write and call functions to perform actions and calculate
values.
– Associate functions with events using event handlers
and event listeners.
– Use built-in JavaScript functions.
– Understand the scope of variables and functions.
– Understand the data types supported by JavaScript and
write expressions with numeric values, text strings, and
Boolean values.
Working with Functions
• Function: a programming structure consisting of a
collection of statements that share a common purpose or
calculate a value
• Defining a function
– Syntax for a named function:
function functionName(parameters) {
statements
}
– Syntax for an anonymous function:
function (parameters) {
statements
}
– Function’s parameters are the variables it uses
– Enclosed in a command block (opening and closing curly braces)
Working with Functions Continued

• Calling a function
– JavaScript expression for calling a function:
functionName(paramValues);
– paramValues passed to a function are the arguments (actual
parameters)
• Returning a value from a function
– Syntax for a function that returns a value:
function functionName(parameters) {
statements
return value;
}
– return statement ends execution and returns a single value
Managing Events with Functions
• Using event handlers
– Most direct method of associating a function with an event
– Drawback: places JavaScript code in the HTML file
– Syntax for creating an event handler as an attribute of the HTML
element:
<elem onevent = "function()">
• Events as object properties
– Places the event handler within the JavaScript code file
– Can only specify function name, not parameter values
– Only one function can handle an event at a time
– Syntax for an event as an object property:
object.onevent = function;
Managing Events with Functions Continued
• Event listeners
– An event listener listens for an event as it propagates through a
web page, during either:
• The capture phase (event moves down the object hierarchy) or
• The bubbling phase (event moves back up the object hierarchy)
– Can attach multiple functions to the same event
– Syntax for method that attaches an event listener to an object:
object.addEventListener("event", function,
capture)
• Events and anonymous functions
– Include entire structure of anonymous function in place of function
name in an event handler or event listener
– Can pass in parameter values with this approach
Using Built-in JavaScript Functions

Figure 2-4
Understanding Variable Scope

• Scope: where a variable or function can be called within the program


– Variable/function is only recognized within scope
– Referencing elsewhere results in an error
• let and var declaration scopes
– Variables declared with let are block scoped: scope is limited to the
command block
– Variables declared with var are function scoped: scope is limited to the
function
Understanding Variable Scope Continued
• Local and global scope
– Variables/functions with local scope (e.g., local variables) are accessible
within the command block or function where they are defined
• Includes block scope and function scope
– Those with global scope (e.g., global variables) are defined outside a
block/function and thus accessible throughout the program
– Can create local and global variables with the same name but different values
• Local variable takes precedence when in scope
• Assigning a value to the local variable does not affect the global variable’s value
outside the local variable’s scope
– Global variables most useful for small applications and variables used as
constants
– Local variables preferable for values used within and changed by functions
Working with Data Types

• Data type: the specific category of information that a variable


contains
• Primitive types: data types that can be assigned only a single value

Figure 2-6
Working with Data Types Continue 1
• Strongly typed (statically typed) programming languages require
that you declare the type of data that a variable contains and do not
allow you to alter that type
• Loosely typed (duck typed, dynamically typed) programming
languages do not require you to declare the data type and allow data
types to be change
• JavaScript is loosely typed
– Data types cannot be declared when variables are created
– JavaScript interpreter determines and assigns or reassigns the variable’s data
type based on the type of data stored
– diffTypes = "Hello World!"; // String
diffTypes = 8; // Integer number
diffTypes = 5.367; // Floating-point number
diffTypes = true; // Boolean
diffTypes = null; // Null
Working with Data Types Continue 2
• Working with numeric values
– Integer: positive or negative number without decimal places
– Floating point number: positive or negative numbers containing
decimal places
• Can be written in exponential notation (scientific notation):
2.0e6 = 2 ✖️ 106 = 2,000,000
– Use integers to calculate monetary values
• Calculations on integer values, but not on floating point numbers, are the
same in binary and decimal
• Working with Boolean values
– Boolean value: a logical value of true or false
– Most often used for controlling program flow or for data
comparisons
Working with Data Types Continue 3
• Working with strings
– Text string: zero or more characters surrounded by double or
single quotation marks
– Empty string: zero-length string value
– Can use quotation marks within strings:
document.write("Welcome to 'Fan Trick
Photography’”);
document.write('Welcome to "Fan Trick
Photography”’);
– To split a text string onto a new line without causing an error:
• Use two or more strings concatenated by the addition operator (+)
• For some browsers, end a line with the \ character to indicate the string
continues
• Create a template literal by enclosing the string in backtick characters (`)
Working with Data Types Continue 4

• Escape characters and sequences


– An escape character is placed before characters within strings to indicate that
they are to be treated as regular keyboard characters, not as syntax
– JavaScript’s escape character is the backslash (\)
– Escape sequence: combination of an escape character with a specific
character, usually to carry out a special function

You might also like