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
