Autoplay
Autocomplete
HTML5
Flash
Player
Speed
Previous Lecture
Complete and continue
Practical JavaScript
Introduction
What is Practical JavaScript? (3:13)
The voice in your ear (4:41)
Is this course right for you? (1:13)
Everything is a todo list (3:53)
What you'll build (3:25)
The development process (3:35)
Approach (6:48)
Browser (1:18)
A very short story
A harsh taskmaster
Version 1 - Arrays
Requirements (1:46)
It should have a place to store todos (4:08)
It should have a way to display todos (3:20)
It should have a way to add new todos (2:17)
It should have a way to change a todo (4:03)
It should have a way to delete a todo (2:48)
Review (3:04)
Version 2 - Functions
Functions are just recipes (3:36)
Customizing functions (6:45)
More on customizing functions (2:15)
Requirements (2:12)
It should have a function to display todos (3:54)
It should have a function to add new todos (5:41)
It should have a function to change a todo (6:08)
It should have a function to delete a todo (3:01)
Review (4:15)
Interlude - Functions and variables
Observations (4:18)
Circles and arrows (2:51)
Applying what we've learned (3:58)
Interlude - editor setup
Editor (1:22)
File structure (2:22)
Tabs and font size (1:35)
HTML (8:12)
Important note (1:25)
Version 3 - Objects
What is an object? (5:30)
Objects and functions (4:46)
Requirements (0:52)
It should store the todos array on an object (3:27)
It should have a displayTodos method (3:11)
It should have an addTodo method (3:13)
It should have a changeTodo method (3:10)
It should have a deleteTodo method (3:28)
Review (1:15)
Interlude - Success is the process
Ability = Process * Time (3:41)
The most important part of your process (6:56)
Version 4 - Booleans
Requirements (1:10)
todoList.addTodo should add objects (5:14)
todoList.changeTodo should change the todoText property (4:27)
todoList.toggleCompleted should flip the completed property (6:06)
Review (1:39)
Version 5 - Loops of Logic
The for loop (7:01)
Looping over arrays (4:26)
Requirements (0:40)
displayTodos should show .todoText (6:36)
displayTodos should tell you if .todos is empty (6:58)
displayTodos should show .completed (6:11)
Review (1:29)
Version 6 - Thinking in Code
Requirements (3:05)
.toggleAll: If everything's true, make everything false (6:44)
.toggleAll: Otherwise, make everything true (4:02)
Review (2:05)
Interlude - Data types and comparisons
Data types overview (3:36)
Comparisons with primitives (2:51)
Comparisons with objects (7:16)
Comparisons review (2:56)
How are primitives and objects stored inside of variables? (0:47)
Code example 1 (2:00)
Code example 2 (2:23)
Code example 3 (3:59)
Code example 4 (5:03)
Code example 5 (3:02)
Version 7 - HTML and the DOM
Requirements (1:28)
What's the DOM? (6:44)
There should be a “Display todos” button and a “Toggle all” button in the app (5:07)
Clicking “Display todos” should run todoList.displayTodos (8:19)
Clicking “Toggle all” should run todoList.toggleAll (3:34)
Review (1:55)
Interlude - Don't wonder about things the debugger can tell you
todoList.displayTodos (5:27)
todoList.addTodo (4:19)
todoList.changeTodo (2:09)
todoList.deleteTodo (2:04)
todoList.toggleCompleted (2:25)
todoList.toggleAll (4:37)
Use the debugger all the time (1:54)
Focus on understanding, not building from scratch (3:02)
Version 8 - Getting data from inputs
Our first refactoring (9:45)
More on refactoring (3:29)
Requirements (1:15)
There should be a button for adding todos (7:51)
There should be a button for changing todos (6:17)
There should be a button for deleting todos (3:47)
There should be a button for toggling a todo (4:04)
Review (2:20)
Version 9 - Escape from the console
Requirements (2:29)
Inserting li elements into the DOM (7:34)
There should be an li element for every todo (8:48)
Each li element should contain .todoText (2:49)
Each li element should show .completed (7:38)
Escaping the console (5:57)
Review (3:49)
Interlude - Functions inside of functions
runWithDebugger (6:04)
setTimeout (2:03)
forEach (7:10)
addEventListener (4:50)
Buzzwords: Higher order functions and callback functions (4:17)
Version 10 - Click to delete
The 'return' statement (3:10)
Requirements (1:48)
There should be a way to create delete buttons (3:56)
There should be a delete button for each todo (2:05)
Each li should have an id that has the todo position (2:58)
Delete buttons should have access to the todo id (6:14)
Clicking delete should update todoList.todos and the DOM (8:39)
Cleanup and Review (3:48)
Version 11 - Destroy all for loops
Requirements (0:37)
todoList.toggleAll should use forEach (10:30)
view.displayTodos should use forEach (7:20)
Review (2:51)
Interlude - Understanding *this*
The cheatsheet (2:09)
Case 1: In a regular function (2:11)
Case 2: When a function is called as a method (1:15)
Case 3: When a function is called as a constructor (5:11)
Case 4: When you explicitly set the value of `this` with bind, apply, or call (10:41)
Case 5: When you're in a callback function (10:32)
Next steps
Congratulations!
It should have an addTodo method
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock