SE371 · Chapter 5 · Annotated SlidesJavaScript in the Front End: DOM and Events
Original
Overview

JavaScript in the Front End: DOM and Events

The Document Object Model, nodes and NodeLists, selecting elements (getElementById, querySelector), changing styles and content (innerHTML vs. textContent), DOM manipulation methods, the dataset property, event handling with addEventListener, the event object, capture, bubbling and delegation, event types, and form validation with regular expressions.

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 58 slides
  1. 1 Web Engineering SE371
  2. 2 JavaScript Output ( third-party libraries ): sweetalert
  3. 3 The Document Object Model (DOM)
  4. 4 Document Object
  5. 5 DOM Nodes and NodeLists
  6. 6 Some Essential Node Object Properties
  7. 7 document object Methods: Selection
  8. 8 document object Methods: Query Selection
  9. 9 Element Node Object
  10. 10 Extra Properties for Certain Tag Types
  11. 11 Accessing elements and their properties
  12. 12 Changing an Element‟s Style
  13. 13 How CSS styles can be programmatically manipulated in JavaScript
  14. 14 InnerHTML vs textContent vs DOM Manipulation
  15. 15 Exercise 2 (innerHTML + functions)
  16. 16 DOM family relations
  17. 17 DOM Manipulation Methods
  18. 18 Visualizing the DOM modification
  19. 19 Visualizing the DOM modification (ii)
  20. 20 Same Exercise p65 (DOM manipulation)
  21. 21 Using the Dataset Property
  22. 22 Slide 22
  23. 23 DOM Timing
  24. 24 JavaScript Event Handling
  25. 25 Implementing an Event Handler
  26. 26 Handling events with anonymous functions
  27. 27 Event handling with NodeList arrays
  28. 28 Page Loading and the DOM
  29. 29 Wrapping DOM code within a DOMContentLoaded event handler
  30. 30 Event Object
  31. 31 Event Object Example
  32. 32 Event Propagation
  33. 33 Event capture and bubbling
  34. 34 Problems with event propagation
  35. 35 Stopping event propagation
  36. 36 g1
  37. 37 Event Delegation (ii)
  38. 38 Event Delegation (iii)
  39. 39 Event Types
  40. 40 Mouse Events
  41. 41 Keyboard Events
  42. 42 Form Events
  43. 43 Handling the submit event
  44. 44 Forms in JavaScript
  45. 45 Responding to form movement events
  46. 46 to Form
  47. 47 Validating a Submitted Form
  48. 48 Empty Field Validation
  49. 49 Determining which items in multiselect list are selected
  50. 50 Javascript validation examples
  51. 51 Number Validation
  52. 52 Submitting Forms using JS
  53. 53 Javascript validation examples (2)
  54. 54 Javascript validation examples (3)
  55. 55 g1
  56. 56 Regular Expression Syntax (ii)
  57. 57 Matches any string such that: Matches any string such that:
  58. 58 /pattern/modifier : /[a-z][0-9]/ ig
Slide 1 / 58

Web Engineering SE371

Slide 1: Web Engineering SE371
Slide 2 / 58

JavaScript Output ( third-party libraries ): sweetalert

Slide 2: JavaScript Output ( third-party libraries ): sweetalert
Slide 3 / 58

The Document Object Model (DOM)

Slide 3: The Document Object Model (DOM)

Notes

  1. DOM: the browser’s tree of objects representing the page; JavaScript reads and changes it.

Slide 4 / 58

Document Object

Slide 4: Document Object
Slide 5 / 58

DOM Nodes and NodeLists

Slide 5: DOM Nodes and NodeLists
Slide 6 / 58

Some Essential Node Object Properties

Slide 6: Some Essential Node Object Properties
Slide 7 / 58

document object Methods: Selection

Slide 7: document object Methods: Selection

Notes

  1. Select: getElementById, getElementsByClassName, querySelector (first match), querySelectorAll (NodeList of all matches).

Exam angle

PredictionQ1

document.querySelector(".item") returns:

Slide 8 / 58

document object Methods: Query Selection

Slide 8: document object Methods: Query Selection
Slide 9 / 58

Element Node Object

Slide 9: Element Node Object
Slide 10 / 58

Extra Properties for Certain Tag Types

Slide 10: Extra Properties for Certain Tag Types
Slide 11 / 58

Accessing elements and their properties

Slide 11: Accessing elements and their properties
Slide 12 / 58

Changing an Element‟s Style

Slide 12: Changing an Element‟s Style

Notes

  1. element.style.color = "red" sets inline style; better: element.classList.add/remove/toggle.

Slide 13 / 58

How CSS styles can be programmatically manipulated in JavaScript

Slide 13: How CSS styles can be programmatically manipulated in JavaScript
Slide 14 / 58

InnerHTML vs textContent vs DOM Manipulation

Slide 14: InnerHTML vs textContent vs DOM Manipulation

Notes

  1. innerHTML parses HTML (XSS risk with user input); textContent sets plain text safely.

  2. Trap Never put user input into innerHTML: use textContent.

Exam angle

PredictionQ1

Which is safest for inserting user-typed text into the page?

Slide 15 / 58

Exercise 2 (innerHTML + functions)

Slide 15: Exercise 2 (innerHTML + functions)
Slide 16 / 58

DOM family relations

Slide 16: DOM family relations
Slide 17 / 58

DOM Manipulation Methods

Slide 17: DOM Manipulation Methods
Slide 18 / 58

Visualizing the DOM modification

Slide 18: Visualizing the DOM modification
Slide 19 / 58

Visualizing the DOM modification (ii)

Slide 19: Visualizing the DOM modification (ii)
Slide 20 / 58

Same Exercise p65 (DOM manipulation)

Slide 20: Same Exercise p65 (DOM manipulation)
Slide 21 / 58

Using the Dataset Property

Slide 21: Using the Dataset Property
Slide 22 / 58

Slide 22

Slide 22: Slide 22
Slide 23 / 58

DOM Timing

Slide 23: DOM Timing
Slide 24 / 58

JavaScript Event Handling

Slide 24: JavaScript Event Handling
Slide 25 / 58

Implementing an Event Handler

Slide 25: Implementing an Event Handler

Notes

  1. element.addEventListener("click", handler): many handlers per event, can be removed.

Slide 26 / 58

Handling events with anonymous functions

Slide 26: Handling events with anonymous functions
Slide 27 / 58

Event handling with NodeList arrays

Slide 27: Event handling with NodeList arrays
Slide 28 / 58

Page Loading and the DOM

Slide 28: Page Loading and the DOM

Notes

  1. Run DOM code after the page loads: DOMContentLoaded, or place the script at the end / use defer.

Slide 29 / 58

Wrapping DOM code within a DOMContentLoaded event handler

Slide 29: Wrapping DOM code within a DOMContentLoaded event handler
Slide 30 / 58

Event Object

Slide 30: Event Object

Notes

  1. The event object: e.target (the element clicked), e.type, e.preventDefault(), e.stopPropagation().

Slide 31 / 58

Event Object Example

Slide 31: Event Object Example
Slide 32 / 58

Event Propagation

Slide 32: Event Propagation
Slide 33 / 58

Event capture and bubbling

Slide 33: Event capture and bubbling

Notes

  1. Propagation: capture phase (down from the window) → target → bubbling phase (back up). Handlers run in the bubbling phase by default.

Exam angle

PredictionQ1

By default, addEventListener handlers run during the:

Slide 34 / 58

Problems with event propagation

Slide 34: Problems with event propagation
Slide 35 / 58

Stopping event propagation

Slide 35: Stopping event propagation
Slide 36 / 58

g1

Slide 36: g1

Notes

  1. Event delegation: one listener on a parent handles events from many children (using e.target), including children added later.

Exam angle

PredictionQ1

Attaching one listener to a <ul> to handle clicks on all its <li> items is:

Slide 37 / 58

Event Delegation (ii)

Slide 37: Event Delegation (ii)
Slide 38 / 58

Event Delegation (iii)

Slide 38: Event Delegation (iii)
Slide 39 / 58

Event Types

Slide 39: Event Types

Notes

  1. Types: mouse (click, mouseover), keyboard (keydown, keyup), form (submit, change, input, focus, blur), page (load, DOMContentLoaded).

Slide 40 / 58

Mouse Events

Slide 40: Mouse Events
Slide 41 / 58

Keyboard Events

Slide 41: Keyboard Events
Slide 42 / 58

Form Events

Slide 42: Form Events
Slide 43 / 58

Handling the submit event

Slide 43: Handling the submit event

Notes

  1. Handle the form’s submit event; call e.preventDefault() to stop sending invalid data.

Slide 44 / 58

Forms in JavaScript

Slide 44: Forms in JavaScript
Slide 45 / 58

Responding to form movement events

Slide 45: Responding to form movement events
Slide 46 / 58

to Form

Slide 46: to Form
Slide 47 / 58

Validating a Submitted Form

Slide 47: Validating a Submitted Form
Slide 48 / 58

Empty Field Validation

Slide 48: Empty Field Validation
Slide 49 / 58

Determining which items in multiselect list are selected

Slide 49: Determining which items in multiselect list are selected
Slide 50 / 58

Javascript validation examples

Slide 50: Javascript validation examples
Slide 51 / 58

Number Validation

Slide 51: Number Validation
Slide 52 / 58

Submitting Forms using JS

Slide 52: Submitting Forms using JS
Slide 53 / 58

Javascript validation examples (2)

Slide 53: Javascript validation examples (2)
Slide 54 / 58

Javascript validation examples (3)

Slide 54: Javascript validation examples (3)
Slide 55 / 58

g1

Slide 55: g1
Slide 56 / 58

Regular Expression Syntax (ii)

Slide 56: Regular Expression Syntax (ii)

Notes

  1. Regular expressions: /pattern/flags; ^ start, $ end, [a-z], \d digit, + one or more, * zero or more, {n} exactly n. regex.test(str).

Exam angle

PredictionQ1

/^\d{4}$/ matches:

Slide 57 / 58

Matches any string such that: Matches any string such that:

Slide 57: Matches any string such that: Matches any string such that:
Slide 58 / 58

/pattern/modifier : /[a-z][0-9]/ ig

Slide 58: /pattern/modifier : /[a-z][0-9]/ ig