C4: Session 13

Browser Events

Concept Practice: DOM Elements

Concept:
JS Code Execution

Concept: Code Execution

How does JavaScript execute code?

Two main phases of execution:

  1. Compilation - The phase when the JavaScript engine takes the code you've written and converts it into a format that can be executed by the computer.
  2. Execution - The phase after compilation when the JavaScript engine executes the code line by line. As the code is executed, variables and functions are created and stored.

Video Explanation: https://www.youtube.com/watch?v=xckH5s3UuX4

Concept: Code Execution

Execution Phase

Two key components:

  • Memory Heap - the region in memory where variables are stored. When you declare a variable in JavaScript, memory is allocated in the memory heap to store the variable's value.
  • Call Stack - a data structure that keeps track of which functions are currently being executed. The call stack is important because it ensures that functions are executed in the correct order.

Concept: Code Execution

Memory Heap

A place to store information (data like variables and objects)

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

Concept: Code Execution

Memory Heap

A place to store information (data like variables and objects)

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

x

y

Concept: Code Execution

Call Stack

The way JavaScript keeps track of where we are in the code, which functions were invoked, and which function is currently running

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

main

Concept: Code Execution

Call Stack

The way JavaScript keeps track of where we are in the code, which functions were invoked, and which function is currently running

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

main

add()

Concept: Code Execution

Call Stack

The way JavaScript keeps track of where we are in the code, which functions were invoked, and which function is currently running

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

main

Concept: Code Execution

Call Stack

The way JavaScript keeps track of where we are in the code, which functions were invoked, and which function is currently running

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

main

x

y

Concept: Code Execution

Call Stack

The way JavaScript keeps track of where we are in the code, which functions were invoked, and which function is currently running

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

main

x

y

sum

Concept: Code Execution

Call Stack

The way JavaScript keeps track of where we are in the code, which functions were invoked, and which function is currently running

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

main

multiply()

Concept: Code Execution

Call Stack

The way JavaScript keeps track of where we are in the code, which functions were invoked, and which function is currently running

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

main

Concept: Code Execution

Call Stack

The way JavaScript keeps track of where we are in the code, which functions were invoked, and which function is currently running

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

main

x

y

sum

Concept: Code Execution

Call Stack

The way JavaScript keeps track of where we are in the code, which functions were invoked, and which function is currently running

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = 2;
let y = 3;

let sum = add(x, y);
let product = multiply(sum, y);

main

x

y

sum

product

Concept Practice: Code Execution

function f1() {
  console.log('hello from f1');
}


function f2() {
  f1();
  console.log('hello from f2');
}


f2();

main

f2()

f1()

Concept Practice: Code Execution

function f1() {
  console.log('hello from f1');
}


function f2() {
  f1();
  console.log('hello from f2');
}


f2();

main

f2()

Concept Practice: Code Execution

function f1() {
  console.log('hello from f1');
}


function f2() {
  f1();
  console.log('hello from f2');
}


f2();

main

Concept:
Browser Events

Concept: Browser Events

Browser Events

An event is a signal that something has happened in the DOM 

  • Analogy: Using a remote to turn your TV on/off by hitting the power button
    • Event: The power button on the remote was clicked
    • Signal: The remote sends a signal to the TV
    • TV: If the TV is on, then turn it off. Else, turn it off. 

JavaScript Execution Phase

The event queue contains all the pending events that are waiting to be processed. 

  • If an event is in the event queue, the JavaScript engine stops the current execution and starts executing the event handler for the event. Once the event handler finishes executing, the JavaScript engine continues with the code where it left off.

Concept: Browser Events

Concept: Browser Events

Browser Events

Common DOM events:

Mouse Event Keyboard Events Window Events Input Events
click keydown scroll submit
mouseover keyup resize focus
mouseout keypress DOMContentLoaded blur
mousemove click
change

Concept: Browser Events

Browser Events

To listen or subscribe to when an event occurs in the DOM, JavaScript provides the addEventListener method which accepts two arguments:

  • The event type
  • The event handler
// Retrieve the element you want to listen on from the DOM
let button = document.getElementById('submit-button');

// Create an event listener on the element
button.addEventListener('click', function(event) {
  alert('The button was clicked');
});

Concept: Browser Events

The Event Object

The event object contains information about an event that occurred in the browser, allowing you to access information about the event and manipulate its behavior.

Concept: Browser Events

Properties of the Event Object

Here are some commonly used properties of the event object:

  • type -  indicates the type of event that has occurred, such as "click", "keydown", "load", etc

  • target - indicates the HTML element that triggered the event

  • clientX and clientY - indicate the horizontal and vertical coordinates of the mouse pointer when the event occurred

  • keyCode - indicates the numerical value of the key that was pressed during a keyboard event

Concept: Browser Events

Methods of the Event Object

Here are two commonly used methods of the event object:

  • event.preventDefault() - prevents the default behavior of the event from occurring. For example, you can use this method to prevent a link from opening a new page when clicked.

  • event.stopPropagation() - stops the event from propagating to parent elements. For example, if a click event occurs on a button inside a nav menu, calling this function will prevent the nav menu from also receiving the click event.

Concept Practice: Events

Thank You!

Made with Slides.com