SE371 · Chapter 4 · Annotated SlidesJavaScript
Original
Overview

JavaScript

What JavaScript is and where it goes, variables and data types (primitive vs. reference, let vs. const), conditionals, truthy and falsy, loops, try…catch, arrays and destructuring, objects and JSON, functions (expressions, default and rest parameters, hoisting, callbacks, arrow syntax), scope, and array functions (forEach, find, filter, map, reduce, sort).

How to read this page

Every original slide is shown unchanged. Yellow marks on a slide point to a numbered note: hover or tap a mark to jump to its note, and hover a note to see its marks. Questions tagged Past exam appeared on a real paper; Prediction questions are likely angles, not confirmed. Pick an answer to each question: a wrong pick tells you why it is wrong, so you can try again.

All 64 slides
  1. 1 Fundamentals of Web Development
  2. 2 In this chapter you will learn . . .
  3. 3 What Is JavaScript and What Can It Do?
  4. 4 Client-Side Scripting: Advantages
  5. 5 Client-Side Scripting: Disadvantages
  6. 6 JavaScript and Web 2.0
  7. 7 Where Does JavaScript Go?
  8. 8 Adding JavaScript to a page
  9. 9 Adding JavaScript to a page
  10. 10 Variables and Data Types
  11. 11 JavaScript Output
  12. 12 JavaScript Output (ii)
  13. 13 Data Types
  14. 14 Primitive Types
  15. 15 Primitive vs Reference Types
  16. 16 Let vs const
  17. 17 Built-In Objects
  18. 18 Concatenation
  19. 19 Conditionals
  20. 20 Switch statement
  21. 21 Truthy and Falsy
  22. 22 While and do . . . while Loops
  23. 23 For Loops
  24. 24 Try...catch
  25. 25 Arrays
  26. 26 Array example
  27. 27 Iterating an array using for . . . of
  28. 28 Array Destructuring
  29. 29 who will answer?
  30. 30 Objects
  31. 31 Object Creation Using Object Literal Notation
  32. 32 Object Creation Using Object Constructor
  33. 33 Objects containing other content
  34. 34 Exercise: (object creation)
  35. 35 Object Destructuring
  36. 36 You have to use the name
  37. 37 JSON
  38. 38 JSON object
  39. 39 Functions
  40. 40 Function expressions
  41. 41 Default Parameters
  42. 42 Rest Parameters
  43. 43 Home Task [ungraded]
  44. 44 Hoisting in JavaScript
  45. 45 Callback Functions
  46. 46 Exercise: map any given function to
  47. 47 Home Task [ungraded]
  48. 48 Callback Functions (ii)
  49. 49 Objects and Functions Together
  50. 50 Constructors as functions
  51. 51 Arrow Syntax
  52. 52 Scope in JavaScript
  53. 53 Block scope
  54. 54 Function/Local Scope
  55. 55 Fundamentals of Web Development
  56. 56 Array Functions
  57. 57 Array forEach
  58. 58 Array find
  59. 59 Array filter, and map
  60. 60 Reduce
  61. 61 Sort
  62. 62 Examples
  63. 63 Home Task [ungraded]
  64. 64 Array syntax overview
Slide 1 / 64

Fundamentals of Web Development

Slide 1: Fundamentals of Web Development
Slide 2 / 64

In this chapter you will learn . . .

Slide 2: In this chapter you will learn . . .
Slide 3 / 64

What Is JavaScript and What Can It Do?

Slide 3: What Is JavaScript and What Can It Do?
Slide 4 / 64

Client-Side Scripting: Advantages

Slide 4: Client-Side Scripting: Advantages

Notes

  1. Client-side scripting: runs in the browser: responsive, less server load. Downsides: can be disabled, browser differences, code is visible.

Slide 5 / 64

Client-Side Scripting: Disadvantages

Slide 5: Client-Side Scripting: Disadvantages
Slide 6 / 64

JavaScript and Web 2.0

Slide 6: JavaScript and Web 2.0
Slide 7 / 64

Where Does JavaScript Go?

Slide 7: Where Does JavaScript Go?
Slide 8 / 64

Adding JavaScript to a page

Slide 8: Adding JavaScript to a page

Notes

  1. Add JS inline (attributes), embedded (<script>), or external (<script src>), usually at the end of body or with defer.

Slide 9 / 64

Adding JavaScript to a page

Slide 9: Adding JavaScript to a page
Slide 10 / 64

Variables and Data Types

Slide 10: Variables and Data Types
Slide 11 / 64

JavaScript Output

Slide 11: JavaScript Output
Slide 12 / 64

JavaScript Output (ii)

Slide 12: JavaScript Output (ii)
Slide 13 / 64

Data Types

Slide 13: Data Types
Slide 14 / 64

Primitive Types

Slide 14: Primitive Types

Notes

  1. Primitives: number, string, boolean, null, undefined, symbol, bigint. Objects (arrays, functions) are reference types.

Slide 15 / 64

Primitive vs Reference Types

Slide 15: Primitive vs Reference Types
Slide 16 / 64

Let vs const

Slide 16: Let vs const

Notes

  1. let: block-scoped, can be reassigned. const: block-scoped, can’t be reassigned (but a const object’s contents CAN change). Avoid var.

  2. Trap const arr = [1]; arr.push(2) is fine: the binding is constant, not the array.

Exam angle

PredictionQ1

const x = {a: 1}; x.a = 2; results in:

Slide 17 / 64

Built-In Objects

Slide 17: Built-In Objects
Slide 18 / 64

Concatenation

Slide 18: Concatenation
Slide 19 / 64

Conditionals

Slide 19: Conditionals

Notes

  1. converts types before comparing; = compares value AND type. "5" 5 is true, "5" = 5 is false.

Exam angle

PredictionQ1

"5" === 5 evaluates to:

Slide 20 / 64

Switch statement

Slide 20: Switch statement
Slide 21 / 64

Truthy and Falsy

Slide 21: Truthy and Falsy

Exam angle

PredictionQ1

Which value is falsy?

Slide 22 / 64

While and do . . . while Loops

Slide 22: While and do . . . while Loops
Slide 23 / 64

For Loops

Slide 23: For Loops
Slide 24 / 64

Try...catch

Slide 24: Try...catch
Slide 25 / 64

Arrays

Slide 25: Arrays
Slide 26 / 64

Array example

Slide 26: Array example
Slide 27 / 64

Iterating an array using for . . . of

Slide 27: Iterating an array using for . . . of
Slide 28 / 64

Array Destructuring

Slide 28: Array Destructuring
Slide 29 / 64

who will answer?

Slide 29: who will answer?
Slide 30 / 64

Objects

Slide 30: Objects
Slide 31 / 64

Object Creation Using Object Literal Notation

Slide 31: Object Creation Using Object Literal Notation

Notes

  1. Object literal: const p = {name: "Ali", age: 20}; access with p.name or p["name"].

Slide 32 / 64

Object Creation Using Object Constructor

Slide 32: Object Creation Using Object Constructor
Slide 33 / 64

Objects containing other content

Slide 33: Objects containing other content
Slide 34 / 64

Exercise: (object creation)

Slide 34: Exercise: (object creation)
Slide 35 / 64

Object Destructuring

Slide 35: Object Destructuring

Notes

  1. Object destructuring uses the property NAMES: const {name, age} = p;

Slide 36 / 64

You have to use the name

Slide 36: You have to use the name
Slide 37 / 64

JSON

Slide 37: JSON

Notes

  1. JSON: text format for data. JSON.stringify(obj) → string; JSON.parse(str) → object. Keys must be double-quoted.

Exam angle

PredictionQ1

Which converts a JSON string into a JavaScript object?

Slide 38 / 64

JSON object

Slide 38: JSON object
Slide 39 / 64

Functions

Slide 39: Functions
Slide 40 / 64

Function expressions

Slide 40: Function expressions
Slide 41 / 64

Default Parameters

Slide 41: Default Parameters
Slide 42 / 64

Rest Parameters

Slide 42: Rest Parameters

Notes

  1. Rest parameters: function sum(...nums) collects remaining arguments into an array.

Slide 43 / 64

Home Task [ungraded]

Slide 43: Home Task [ungraded]
Slide 44 / 64

Hoisting in JavaScript

Slide 44: Hoisting in JavaScript

Notes

  1. Hoisting: function declarations are moved to the top (callable before definition); function expressions and let/const are not usable before their line.

Slide 45 / 64

Callback Functions

Slide 45: Callback Functions
Slide 46 / 64

Exercise: map any given function to

Slide 46: Exercise: map any given function to
Slide 47 / 64

Home Task [ungraded]

Slide 47: Home Task [ungraded]
Slide 48 / 64

Callback Functions (ii)

Slide 48: Callback Functions (ii)
Slide 49 / 64

Objects and Functions Together

Slide 49: Objects and Functions Together
Slide 50 / 64

Constructors as functions

Slide 50: Constructors as functions
Slide 51 / 64

Arrow Syntax

Slide 51: Arrow Syntax

Notes

  1. Arrow functions: (a, b) => a + b. Shorter; they don’t have their own this.

Slide 52 / 64

Scope in JavaScript

Slide 52: Scope in JavaScript

Notes

  1. Scope: global, function (local), block (let/const inside { }).

Slide 53 / 64

Block scope

Slide 53: Block scope
Slide 54 / 64

Function/Local Scope

Slide 54: Function/Local Scope
Slide 55 / 64

Fundamentals of Web Development

Slide 55: Fundamentals of Web Development
Slide 56 / 64

Array Functions

Slide 56: Array Functions
Slide 57 / 64

Array forEach

Slide 57: Array forEach
Slide 58 / 64

Array find

Slide 58: Array find
Slide 59 / 64

Array filter, and map

Slide 59: Array filter, and map

Notes

  1. filter returns the elements that pass a test; map returns a new array of transformed elements; find returns the FIRST match.

Exam angle

PredictionQ1

[1, 2, 3, 4].filter(n => n % 2 === 0) returns:

PredictionQ2

[1, 2, 3].map(n => n * 2) returns:

Slide 60 / 64

Reduce

Slide 60: Reduce

Notes

  1. reduce combines all elements into one value: [1, 2, 3].reduce((acc, n) => acc + n, 0) → 6.

Slide 61 / 64

Sort

Slide 61: Sort

Notes

  1. Trap Default sort is lexicographic.

Slide 62 / 64

Examples

Slide 62: Examples
Slide 63 / 64

Home Task [ungraded]

Slide 63: Home Task [ungraded]
Slide 64 / 64

Array syntax overview

Slide 64: Array syntax overview