Introduction to JavaScript

Table of Contents

JavaScript Basics

• 
  00:00:00 - 00:03:57

  Introduction

  Brian Holt introduces himself, and sets expectations for the next section.
• 
  00:03:58 - 00:11:06

  JavaScript Overview

  Brian starts with the basics of JavaScript syntax.
• 
  00:11:07 - 00:13:42

  Semicolons and Q&A

  Brian discusses the usage of semicolons and the choice of 'var' versus 'const' and 'let' in JavaScript code.
• 
  00:13:43 - 00:15:32

  Coding Conventions

  Brian introduces JavaScript coding conventions, which is syntax that isn't necessarily required by the language, but makes code more readable to other programmers.
• 
  00:15:33 - 00:22:04

  Writing Your First JavaScript

  Brian opens up VSCode and walks students through writing their first snippet of JavaScript code.
• 
  00:22:05 - 00:25:57

  Developer Tools Console

  Brian demonstrates how to test code using console.log and the developer tools console inside of a browser

Primitives

• 
  00:25:58 - 00:32:38

  Strings

  Brian introduces the string primitive data type.
• 
  00:32:39 - 00:38:56

  Template Strings

  Brian explains how to display JavaScript variables in strings using backticks instead of single or double quotes.
• 
  00:38:57 - 00:42:23

  Booleans

  Brian introduces booleans, which are how true and false are handled in JavaScript.
• 
  00:42:24 - 00:47:04

  Numbers

  Brian introduces the number primitive data type and gives a few things to watch out for when handling numbers.

Control Flow & Loops

• 
  00:47:05 - 00:52:24

  Control Flow

  Brian introduces the concept of control flow, the order in which individual statements are evaluated.
• 
  00:52:25 - 00:55:46

  Equality Comparisons

  Brian demonstrates usage of the strict equality operator.
• 
  00:55:47 - 00:58:29

  If Statement

  Brian begins implementing control and equality operators to carry out logic, starting out with an if statement and expression.
• 
  00:58:30 - 01:03:14

  Else If Statement

  Brian codes an 'else if' statement into the 'if' statement, an additional condition for determining evaluated statements.
• 
  01:03:15 - 01:10:54

  Loops

  Brian demonstrates how to implement a 'while' loop.
• 
  01:10:55 - 01:12:25

  Adding Comments

  Brian demonstrates how to insert comments into JavaScript code.
• 
  01:12:26 - 01:14:28

  Incrementing

  Brian gives examples of various ways to increment values in JavaScript.
• 
  01:14:29 - 01:19:43

  Incrementing in Loops

  Brian uses what was learned in the previous lesson to demonstrate how a 'for' loop is executed.
• 
  01:19:44 - 01:23:17

  Looping Exercise

  Students are instructed to to write a loop that prints a concatenated string to the console.
• 
  01:23:18 - 01:26:57

  Looping Solution

  Brian demonstrates one way of coding the solution.

Functions & Scope

• 
  01:26:58 - 01:38:38

  Functions & Parameters

  Brian illustrates examples of functions in JavaScript and highlights key syntax details.
• 
  01:38:39 - 01:44:15

  Scope

  Brian introduces how scope makes functions useful in JavaScript.
• 
  01:44:16 - 01:53:27

  Scope Examples

  Brian walks through several examples where scoping rules affect the outcome.
• 
  01:53:28 - 01:58:35

  Experimenting with Scope

  Brian alters positions of variable references and declarations to help explain how scope affects outcomes.

Builtins

• 
  01:58:36 - 02:01:00

  Builtins

  Brian introduces builtins by teaching students how to utilize MDN as a valuable resource.
• 
  02:01:01 - 02:05:54

  Math & substr

  Brian introduces additional commonly used math and string manipulation builtins.

Quiz Exercise

• 
  02:05:55 - 02:14:23

  Quiz Exercise

  Students are instructed to construct quiz questions using JavaScript that implement functions, builtins, and other concepts learned so far.
• 
  02:14:24 - 02:16:21

  Abstract Comparison

  Brian covers usage of the double equals comparison operator in JavaScript.
• 
  02:16:22 - 02:23:48

  Quiz Exercise Solution with Strings

  Brian live codes the solution to the exercise involving string manipulation.
• 
  02:23:49 - 02:33:20

  Quiz Exercise Solution with Numbers

  Brian live codes the solution to the exercise involving mathematical operations.

Objects & Arrays

• 
  02:33:21 - 02:43:12

  Objects

  Brian introduces the object data structure in JavaScript.
• 
  02:43:13 - 02:55:37

  Context

  Brian explains the behavior of the 'this' keyword and related errors that commonly occur.
• 
  02:55:38 - 02:57:56

  Global Objects

  Brian demonstrates usage of global objects, specifically the window object in the browser.
• 
  02:57:57 - 03:02:06

  Arrays

  Brian introduces the array data structure in JavaScript.
• 
  03:02:07 - 03:10:21

  Array Methods

  Brian delves into the methods that can be used to manipulate array data.
• 
  03:10:22 - 03:14:12

  Types and Q&A

  Brian mentions that types can be declared using TypeScript, and answers questions about the section so far.
• 
  03:14:13 - 03:19:19

  Looping Over Arrays

  Brian walks through the process of looping over the elements in an array.
• 
  03:19:20 - 03:29:05

  forEach Method

  Brian codes a 'forEach' statement, and explains how to use a function as an input.
• 
  03:29:06 - 03:30:56

  map Method

  Brian codes a map function and explains its usefulness.
• 
  03:30:57 - 03:41:35

  sort Method

  Brian demonstrates usage of the sort function and introduces arrow functions.
• 
  03:41:36 - 03:45:17

  Array Methods Q&A

  Brian discusses filtering and equality comparison in reference to array methods.
• 
  03:45:18 - 03:53:08

  And & Or Operators

  Brian introduces && and || comparison operators for use in control flow statements.

Testing Exercise

• 
  03:53:09 - 03:56:02

  Introduction to Testing

  Brian explains what development tests are and why they are important when writing JavaScript code.
• 
  03:56:03 - 04:04:37

  Testing Exercise

  Brian demonstrates how to make a test pass, and students are instructed to do the same with the remaining tests.
• 
  04:04:38 - 04:17:01

  Testing Solution with Arrays

  Brian live codes the array traversal section of the solution.
• 
  04:17:02 - 04:27:31

  Testing Solution with Objects

  Brian live codes the two object array sections of the solution.
• 
  04:27:32 - 04:36:11

  Readability and Performance Q&A

  Brian fields questions from students about code readability and performance in relation to previously learned methods.
• 
  04:36:12 - 04:40:53

  Testing Solution with sort

  Brian live codes the sort section of the solution, giving various ways to succeed in solving the same problem.

The DOM

• 
  04:40:54 - 04:44:34

  Introduction to the DOM

  Brian introduces the DOM by explaining the parts that make up a webpage.
• 
  04:44:35 - 04:50:35

  Interacting with the DOM

  Brian provides instruction on how to work with CSS classes and IDs. The browser developer tools are also examined.
• 
  04:50:36 - 04:54:43

  Looping Over Query Results

  A question is asked about how to use querySelectorAll to select multiple elements in the DOM and loop over them.
• 
  04:54:44 - 05:04:14

  Interacting with a Webpage

  Brian outlines ways of interacting with a webpage through modifying classes on elements.
• 
  05:04:15 - 05:11:49

  Events & Listeners

  Brian introduces events and listeners, which make webpages interactive. Screen readers are also discussed.
• 
  05:11:50 - 05:17:30

  Keyup Event

  Brian introduces the event that occurs directly after a keyboard key is released, and gives potential use cases.
• 
  05:17:31 - 05:24:04

  Event Delegation

  Brian defines event delegation, and emphasizes its usefulness through a code example.