PRDV402: Example in Action: How To Use Buttons with JavaScript

STAGE - Never been refreshed - Debugging On

This video demonstrates how to handle the click() event on a button to modify the content of an HTML page. It covers creating basic HTML pages, adding event listeners, and showcasing an IDE that may be useful if you want to try something new.

Source: SpinSpire, https://www.youtube.com/watch?v=UCdaOBWOh2c&ab_channel=SpinSpire
This work is licensed under a Creative Commons Attribution 3.0 License.

Last modified: Tuesday, August 22, 2023, 12:02 AM

Course Introduction

Course Syllabus

Unit 1: Working with Objects in JavaScript

1.1: More on Objects in JavaScript

Review: Using JavaScript Objects

Creating Multiple Objects with Constructors

1.2: Object-Oriented JavaScript

JavaScript Class-Based Object-Oriented Programming (OOP)

Introduction to Object Prototypes

Introduction to Classes in JavaScript

Example in Action: JavaScript Object Creation

1.3: Working with Built-In Objects

Introduction to Standard Built-in Objects

What Is the Global Property Infinity?

1.4 String, Math, and Date Objects in JavaScript

How to Use Text Processing with Strings

How to Use the Number Object

Built-In Mathematical Calculations

What Is the Date Object?

Example in Action: Manipulating String Objects

Practice: Displaying the Date and Time on a Web Page

Unit 1 Assessment

Unit 1 Assessment

Unit 2: JavaScript Data Structures

2.1: Array Introduction

What Is an Array?

Different Ways to Create and Manipulate an Array

Example in Action: Learn How to Create and Manipulate Arrays

Practice: Create a Guest List with Arrays

2.2: Using Array Methods

Iterating through Arrays with forEach

Searching Arrays with indexOf and lastIndexOf

Sorting Arrays with the .sort Method

Destructuring Arrays

Example in Action: push() and pop() methods

Example in Action: Useful Array Methods in JavaScript

Practice: An Array of Grades

2.3: Introduction to Maps and Sets

What Is a Set?

What Is a Map?

Example in Action: Working with Sets

Practice: Working with Map Objects

Unit 2 Assessment

Unit 2 Assessment

Unit 3: More on Working with Functions

3.1: Comparing Types of Functions

Review: Simple Functions

Review: Function Returning a Value

Review: Anonymous Functions

How to Use Function "Constructors"

3.2: Scope and Closure

What Is Scope?

What Is Closure?

Example in Action: Function Scope

Example in Action: Function Closure

Practice: Scope, Scope Chain, and Closures

3.3: Using the "this" Keyword

What Is "this"?

Using function.call to Call a Function

Calling a Function Using function.apply

Using function.bind to Create New Functions

Examples in Action: Using "this" with Functions

Practice: Using function.call and function.apply

3.4: Nested, Recursive, and High-Order Functions

What Is a Nested Function?

Using Recursive Functions

Example in Action: Recursive Functions

Higher-Order Functions Explained

Practice: Making Circles Using Functions

Unit 3 Assessment

Unit 3 Assessment

Unit 4: DOM Interfaces and Interactive JavaScript

4.1: DOM Programming Interfaces

Node Interface

Document Interface

Element Interface

HTML Interface

EventTarget Interface

4.2: JavaScript and the DOM: Commonly Used Methods

Creating New Elements with document.createElement

The <form> element

The <input> element

The <label> element

The <select> element

Using the <button> Element

Using the <text> Element