Lecture 6: Advanced Javascript

Question 1

What are functions?

Answer 1

Functions are reusable blocks of code
− are defined by the key word function
− have a unique function name
− can have parameters and/or return values
− need to be called to execute the code

Question 2

Function syntax

Answer 2

function greet(person) {
let greeting = “Hello “ + person + “!”;
return greeting;
}
// calls the function once, store the return value
let greetingText = greet(“Venkat”);

Question 3

Scope

Answer 3

What the function sees and has access to

Question 4

Global Scope

Answer 4

accessible everywhere
Example: const x = 1 is declared outside of the function

Question 5

Calling variables that the global scope cannot see

Answer 5

Reference Error

Question 6

Events

Answer 6

functions that are called by Javascript on interactions

Question 7

You define the function that should be executed

Answer 7

Event Handler / Callback function

Question 8

And declare, when it should be called

Answer 8

Event Listener

Question 9

Event Example

Answer 9

const container = document.querySelector(‘#container’);
container.addEventListener(‘click’, onClick);

Question 10

Event Parameters

Answer 10

You must know what event types are available in Javascript
Example: Click
Resource: mdn web docs
(‘click’, onClick); = (event type, event handler)

Question 11

Mouse Event Properties

Answer 11

Target: which HTML element threw the event
Button: which buttons were pressed
clientX / clientY: relative to current view/browser (generally useful)
screenX / screenY: relative to screen
pageX / pageY: relative to page, incl. Scrolled contents

Question 12

Types of Events

Answer 12

The user selects, clicks, or hovers the cursor over a certain element <= common
The user chooses a key on the keyboard <= common
The user resizes or closes the browser window

Question 13

Object

Answer 13

collection of related data and/or functionality

Question 14

Object Literal

Answer 14

const objectName = {
member1Name: member1Value,
member2Name: member2Value,
member3Name: member3Value
};

Question 15

Multiple objects

Answer 15

create a function that
creates and returns a new objec

Question 16

Calling a constructor

Answer 16

− create a new object
− bind this to the new object, so you can refer to it
− run the code in the constructor
− return the new object.
Constructors, by convention, start with a capital letter and are named for the
type of object they create

Question 17

Constructor example

Answer 17

const salva = new Person(‘Salva’);
salva.name;
salva.introduceSelf();
//Hi! I’m Salva.

Question 18

This

Answer 18

this refers to the current object the code is being written inside
▪ in this case: this this is equivalent to Person
− enables you to use the same method definition for every object you create