CHS Web Design Track

JavaScript for Web Warriors, 7e Chapter 2: Working with Functions, Data Types, and Operators

Objectives

  • 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.
  • Create expressions using arithmetic, assignment, comparison, logical, string, and special operators.
  • Understand order precedence and associativity of operations.
  • Work with events and values associated with form controls.
  • Access your browser's debugging console.

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:
      zunction (parameters) {
    statements
}
    • Function's parameters are the variables it uses
    • Enclosed in a command block (opening and closing curly braces)
To open the fan trick photography page:
  1. Use your code editor to go to the js02 > chapter folder of your data files.
  2. Open the js02_txt.html file in your code editor.
  3. Enter your name and the date in the comment section of the file.
  4. Scroll through the document to familiarize yourself with its contents.
  5. Save the file as js02.html and load the file in your browser.
  6. Add the following values to the web form using the controls on the form: # of photographers: 1, # of hours 2, click the Memory book checkbox to indicate that a memory book should be part of the purchase, and finally enter an travel distance in miles of 25.
  7. Refresh or reload the web page and notice that by refreshing or reloading the page, your values are erased.
To create the setupform() function
  1. Open the js02_txt.js file in your code editor.
  2. Enter your name and the date in the comment section of the file and the save the file as js02.js.
  3. Below the initial comment section, add code for the following function as shown in Figure 2-2:
    // set the form's default values
function setupForm() {
document.getElementById("photoNum").value = 1;
document.getElementById("photoHrs").value = 2;
document.getElementById("makeBook").checked = false;
document.getElementById("photoRights").checked = false;
document.getElementById("photoDist").value = 0;
}
     Next, link the web page to this external script file.
  4. Return to the js02.html file in your code editor.
  5. Directly above the closing </head> tag insert the following element to load the js02.js script file, deferring the loading of the file until after the entire page has loaded.<script src="js02.js" defer></script>
  6. Save your changes to the file.
Calling a function
Returning a value from a function

Managing Events with Functions

Using event handlers

Events as object properties
Event listeners
Events and anonymous functions
To create an event listener for the load event:
  1. Return to the js02.js file in your code editor.
  2. Above the code for the setupForm() function insert the following event listener as shown in Figure 2-3:
    // setup the form when the page loads
window.addEventListener("load", setupForm);
  3. Save your changes to the file and then reload js02.html in your web browser.
  4. Verify that the page opens with the number of photographs set to 1, the number of hours set to 2, the two checkboxes unselected, and the distance set to 0.

Using Built-in JavaScript Functions

FunctionDescription
decodeURI (string) Decodes text strings encoded with encodeURI()
decodeURIComponent (string) Decodes text strings encoded with encodeURIComponent()
encodeURI (string) Encodes a text string so it becomes a valid URI
encodeURIComponent (string) Encodes a text string so it becomes a valid URI component
eval (string) Evaluates expressions contained within strings
isFinite (number) Determines whether a number is finite
isNaN (number) Determines whether a value is the special value NaN (Not a Number)
parseFloat (string) Converts string literals to floating-point numbers
parseInt (string) Converts string literals to integers

Example of using built-in function to verify the socialSecurityNumber variable is not a number:

∖let socialSecurityNumber = “123-45-6789”;
let checkVar = isNaN(socialSecurityNumber);
document.write(checkVar);

Classroom Activities

Class Discussion

What are the similarities between a function and a procedure?

Quick Quiz 1

  1. The lines of code that make up a function are called the ____. (2.1)
  2. Sending arguments to the parameters of a called function is called ____. (2.1)
  3. A(n) ____ statement is a statement that returns a value to the statement that called the function. (2.1)

Understanding Variable Scope

To declare global constants:
  1. Return to the js02.js file in your code editor.
  2. Directly below the initial comment section, enter the following code declaring global constants (see Figure 2-5):
    // declare global constants for the application
const EMP_COST = 100; //cost of photographers per hour
const BOOK_COST = 350; //cost of memory book
const REPRO_COST = 1250; //cost of reproduction rights
const TRAVEL_COST = 2; //cost of travel per mile
  3. Save your changes to the file.

Activity 2.1: Knowledge Check

Describe the syntax for creating and then calling a function.

  1. Syntax for a named function:
  2. Syntax for an anonymous function:
  3. Syntax for calling a function:
  4. What type(s) of scope do the variables in this code sample have?
Quick Quiz 2
  1. A(n) ____ variable is one that is declared outside a function and is available to all parts of your program. (2.4)
  2. A(n) ____ variable is one that is declared inside a command block or function and is only available within the command block or function in which it is declared. (2.4)

Working with Data Types

Data Type Description
number A positive or negative number with or without decimal places, or a number written using exponential notation
Boolean A logical value of true or false
string Text such as “Hello World!”
undefined An unassigned, undeclared, or nonexistent value
null An empty value
diffTypes = “Hello World!”; // String
diffTypes = 8;              // Integer number
diffTypes = 5.367;          // Floating-point number
diffTypes = true;           // Boolean
diffTypes = null;           // Null

Working with numeric values

Working with Boolean values

Working with strings

Escape characters and sequences

Escape Sequence Character
∖∖ Backslash
∖b Backspace
∖r Carriage return
∖" Double quotation mark
∖f Form feed
∖t Horizontal tab
∖n Newline
∖0 Null character
∖' Single quotation mark (apostrophe)
∖v Vertical tab
∖xXX Latin−1 character specified by the XX characters, which represent two hexadecimal digits
∖uXXXX Unicode character specified by the XXXX characters, which represent four hexadecimal digits

Classroom Activities

Quick Quiz 3

  1. A(n) ____ is the specific category of information that a variable contains. (2.5)
  2. A(n) ____ is a positive or negative number with no decimal places. (2.5)
  3. True or False: Empty strings are valid values for literal strings. (2.5)
  4. In JavaScript, the escape character is the ____. (2.5)
  5. When you combine the escape character with other characters, the combination is called a(n) ____. (2.5)

Quick Check 2

  1. What is the difference between block scope and function scope?
  2. What is the scope of variables declared with the let keyword?
  3. What are the possible values for a Boolean variable?
  4. What is the difference between a strongly typed and a loosely typed language? Which is JavaScript?
  5. What is the escape sequence for the newline character?

Using Operators to Build Expressions

Operator Description ExpressionReturns
+ Combines or adds two items 12 + 3 15
− Subtracts one item from another 12 − 3 9
* Multiplies two items 12*3 36
/ Divides one item by another 12/3 4
% Returns the remainder (modulus) after dividing one integer by another integer 18%5 3
** Raising a value to a power 3**2 9
Operator Description Expression Returns
++ Increases a value by 1 12++ 13
−− Decreases a value by 1 12−− 11
− Changes the sign of a value −12 −12

Assignment operators

Operator Example Equivalent to
= x = y x = y
+= x += y x = x + y
−= x −= y x = x − y
*= x *= y x = x * y
/= x /= y x = x/y
%= x %= y x = x % y
**= x **= y x = x**y
Operator Example Description
== x == y Tests whether x is equal in value to y
=== x === y Tests whether x is equal in value to y and has the same data type
!= x != y Tests whether x is not equal to y or has a different data type
!== x !== y Tests whether x is not equal to y and/or doesn't have the same data type
> x > y Tests whether x is greater than y
>= x >= y Tests whether x is greater than or equal to y
< x < y Tests whether x is less than y
<= x <= y Tests whether x is less than or equal to y

Logical operators

Operator Definition Example Description
&& and (x === 5) && (y === 8) Tests whether x is equal to 5 and y is equal to 8
|| or (x === 5) || (y === 8) Test whether x is equal to 5 or y is equal to 8
! not ! (x < 5) Test whether x is not less than 5

Special Operator

Name Special Operator Description
Property access . Appends an object, method, or property to another object
Array index [] Accesses an element of an array
Function call () Calls up functions or changes the order in which individual operations in an expression are evaluated
Comma , Separates multiple expressions in the same statement
Conditional expression ?: Executes one of two expressions based on the results of a conditional expression
Delete delete Deletes array elements, variables created without the var keyword, and properties of custom objects
Property exists in Returns a value of true if a specified property is contained within an object
Object type instanceof Returns true if an object is of a specified object type
New object new Creates a new instance of a user−defined object type or a predefined JavaScript object type
Data type typeof Determines the data type of a variable
Void void Evaluates an expression without returning a result

Classroom Activities

Quick Quiz 4

  1. True or False: You can use the compound assignment operator (+=) to combine two strings. (2.6)
  2. ____ are variables and literals contained in an expression. (2.6)
  3. True or False: A unary operator requires an operand before and after the operator. (2.6)
  4. True or False: A prefix operator is placed before a variable. (2.6)
  5. ____ operators are used for assigning a value to a variable. (2.6)
  6. ____ operators are used when combining two expressions that will result in a Boolean value or when negating a Boolean value. (2.6)

Activity 2.2: Think, Pair, and Share

Understanding Operator Precedence

  • Operator precedence determines the order in which operations in an expression are evaluated
  • Associativity determines precedence for operators with equal intrinsic precedence
  • Examples:
    • 5 + 2 * 8 evaluates to 21
    • 30 / 5 * 2 evaluates to 12
    • let x = 3;let y = 2;x = y *= ++x; // Value of both x and y is 8
    • (5 + 2) * 8 evaluates to 56
OPERATORS DESCRIPTION ASSOCIATIVITY
. Objects—highest precedence Left to right
[] Array elements—highest precedence Left to right
() Functions/evaluation—highest precedence Left to right
new New object—highest precedence Right to left
++ Increment Right to left
−− Decrement Right to left
− Unary negation Right to left
+ Unary positive Right to left
! Not Right to left
typeof Data type Right to left
void Void Right to left
delete Delete object Right to left
** Exponentiation Left to right
* / % Multiplication/division/modulus Left to right
+ − Addition/concatenation and subtraction Left to right
, ,5 . .5 Comparison Left to right
instanceof Object type Left to right
in Object property Left to right
== != === !== Equality Left to right
&& Logical And Left to right
|| Logical Or Left to right
?: Conditional Right to left
5 Assignment Right to left
+= −= *= /= %= Compound assignment Right to left
, Comma—lowest precedence Left to right

Using Expressions with Web Form Controls

To retrieve values from the web form:
  1. Return to the js02.js file in your code editor.
  2. At the bottom of the file insert the following getEstimate() function:
    // estimate the total cost of the service
function getEstimate() {
let totalCost = 0;
let photographers = document.getElementById("photoNum").value;
let hours = document.getElementById("photoHrs").value;
let distance = document.getElementById("photoDist").value;
}
To add calculations to the getEstimate() function:
  1. Add the following commands to the getEstimate() function as shown in Figure 2-19:
    // Add the cost of photographers for the hours covered
totalCost += photographers * hours * EMP_COST;
// Add the cost of distance per photographer per mile
totalCost += photographers * distance * TRAVEL_COST;
  2. Save your changes to the file.
To create variables for checkbox controls:
  1. Below the statement declaring the distance variable in the getEstimate() function, add the following statement to determine whether the makeBook checkbox has been checked:
    let buyBook = document.getElementById("makeBook").checked;
  2. Next add the following statement to determine whether the photoRights checkbox has been checked. Figure 2-20 shows the newly added code in the function.
    let buyRights = document.getElementById("photoRights").checked;
To add the cost of the memory book and digital rights:
  1. At the bottom of the getEstimate() function, insert the following statements:
    // Add the cost of the book if purchased
totalCost += buyBook ? BOOK_COST : 0;
// Add the cost of photo rights if purchased
totalCost += buyRights ? REPRO_COST: 0;
  2. Save your changes to the file.
To calculate and display the total cost estimate:
  1. At the bottom of the getEstimate() function, add the following code:
    // Display the total cost estimate
document.getElementById("estimate").innerHTML = "$" + totalCost;
  2. Scroll up to the setupForm() function and at the end of the function insert the following command to call thegetEstimate() function as shown in Figure 2-23.
    getEstimate();
  3. Save your changes to the file and then reload the js02.html file in your web browser. As shown in Figure 2-24, the initial page should show a total cost estimate of $200 for the default options entered the webform.
To add onchange event handlers to the form controls:
  1. Return to the js02.js file in your code editor.
  2. At the bottom of the setupForm() function add the following statements:
    // Add event handlers for each input control
document.getElementById("photoNum").onchange = getEstimate;
document.getElementById("photoHrs").onchange = getEstimate;
document.getElementById("photoDist").onchange = getEstimate;
document.getElementById("makeBook").onchange = getEstimate;
document.getElementById("photoRights").onchange = getEstimate;
  3. Save your changes to the file and then reload the js02.html file in your browser.
  4. Test the form, verifying that as you change the plan options the total cost estimate automatically updates. Note that you may have to tab out of a form control to trigger the change event. Figure 2-26 shows the total estimate for a project that involves two photographers working for 3 hours traveling 30 miles to the event with both the memory book and photographic rights purchased by the customer. The total cost of the job would be $2320.

Locating Errors with the Browser Console

BROWSERKEYBOARD SHORTCUTMENU STEPS
Google Chrome"SHIFT | CTRL | J (Windows)
Option |⌘ | J (Macintosh)"
  1. Click the Chrome menu in the upper−right corner
  2. Click More Tools
  3. Click Developer Tools
  4. Click Console from the Developer pane
SafariOption |⌘ | C
  1. Enable the Developer tab by going into the Safari Menu . Preferences window, going to the Advanced tab and selecting Show Develop menu in menu bar checkbox
  2. Click the Developer tab in the Safari menu
  3. Click Show JavaScript Console
Microsoft EdgeF12 and then click Console from the Developer pane menu
  1. Click the Edge menu in the upper−right corner
  2. Click More Tools
  3. Click Developer Tools
  4. Click Console from the Developer pane
FirefoxSHIFT | CTRL | J (Windows)
Option |⌘ | J (Macintosh)
  1. Click the Firefox menu in the upper−right corner
  2. Click Web Developer
  3. Click Web Console

Classroom Activities

Quick Quiz 4
  1. Operator ____ is the order in which operators of equal precedence execute. (2.7)
Activity 2.3: Discussion Questions
  1. What are the similarities between a function and a procedure?
  2. Why does there need to be a set order of precedence for the JavaScript operators?
Self−Assessment
  1. What role will functions play in the JavaScript programs that you write?
  2. How do you plan to use your knowledge of variable and function scope to avoid errors and keep your code easy to understand and maintain?
  3. Name some ways you can use JavaScript operators that were new to you when you read this chapter or that you find especially useful.