Week 4 - Functions, Objects, and Event Listeners

Flashcards on JavaScript functions, objects, DOM, and event handlers.

Functions

Reusable blocks of code that perform specific tasks, helping to organize code and make it more maintainable.

Function Name

A unique identifier given to a function by the developer.

Parameters/Arguments

Values passed into a function to provide input.

Function Body

The block of statements within a function that gets executed.

Object

An entity with properties, consisting of key-value pairs representing related data in an unordered fashion.

How to Create Function?

using either a function declaration or a function expression.

Function Declaration

Can be used to create objects. It is defined by using the ‘function’ keyword followed by the function name.

Function Expression

Created by assigning a function to a variable and not hoisted, requiring definition before calling. Can be used to create objects but must be defined before they are used.

DOM (Document Object Model)

Represents a web page as a tree structure and allows programs to interact with and manipulate the document’s structure, style, and content.

Events

Actions or occurrences that happen in the browser, triggered by user interactions or the browser itself.

Event Handler

Allow you to respond to specific events that occur in the browser, attached to HTML elements using event attributes or addEventListener() method.

addEventListener()

JavaScript method that attaches event handlers to HTML elements. The syntax is document.addEventListener(event, function).

onchange

Fired when an HTML element has been changed, useful for handling user input changes.

onclick

Triggered when the user clicks an HTML element, commonly used for button clicks and other interactive elements.

onmouseover

Fired when the user moves the mouse pointer over an HTML element, useful for creating hover effects.

onmouseout

Triggered when the user moves the mouse away from an HTML element, often used to revert styles after a hover effect.

onkeydown

Occurs when the user pushes a keyboard key, useful for capturing keyboard input.

onload

Fired when the browser has finished loading the page, useful for initializing scripts or fetching data.

onsubmit

Triggered when a form is submitted, allows validation and form handling.

onfocus

Occurs when an element receives focus, useful for enhancing accessibility.

onblur

Fired when an element loses focus, often used for form validation.

onresize

Triggered when the browser window is resized, useful for responsive design adjustments.