Learn everything about Javascript in one course

Course welcome

We are pleased to have you in this course. Javascript is the most popular language of the world (Github). There are abundant of well paid jobs with Javacript skill (Hired). We want to congratulate you on making a good career choice and hope you enjoy the course.

Prerequisite

None. This course is designed for complete beginner. You don't need any prior coding experience or computer science background to learn.

Course outcome

• Success definition: you can use Javascript to freely express your thoughts with 5 skills: read, write, listen, speak + unblock yourself.
• Read: you can understand any given Javascript code.
• Write: you can correctly express any of your thought as writing Javascript code.
• Listen: you can understand discussions about Javascript.
• Speak: you can contribute meaningfully in conversation about Javascript.
• Unblock yourself: know where to look for to unblock yourself if you run into problem using those above 4 skills.

How course designed

• As short and complete as possible.
• Each piece of knowledge is isolated and presented with possible simplest example.
• Language chosen to desribe a subject is as less technical and more relevant as possible.
• Course content is what a Javascript software engineer literally see everyday on her/his job.
• Each video/tutorial length is around 10 minutes. The idea is you can learn anywhere, anywhen.
• Videos are meant to show detailed explanation.
• Tutorials are to solidify videos contents and used as lecture notes for future reference.

How to be successful

• Watch the video first then read the tutorial (repeat if you need to).
• Practice the concepts/problems at least 3 times.
• Minimum expected time spent = 1x learn + 3x practice = 4x total learn time

🎯 🎯 🎯 Be persistent! Motivation is what gets you started. Habit is what gets you there. Always remind yourself of the reason that you started this course.

🏋️ 🏋️ 🏋 Practice, practice, practice. What you hear, you will forget. What you see, you will remember. What you do, you will understand.

Textbooks & references

Textbooks are optional. We already extracted the best, relevant knowledge of the books to put in the videos/tutorials.

1. JavaScript: The Good Parts - Douglas Crockford (172 pages)
2. Understanding ECMAScript 6, the definitive guide for Javascript developers - Nicholas C. Zakas (355 pages)
3. Eloquent JavaScript - Marijn Haverbeke (447 pages)
4. JavaScript: The Definitive Guide - David Flanagan (1,098 pages)

Useful, approved online references:

1. MDN Web Docs contains documentation and standards of Javascript.
2. w3school contains additional examples of Javascript usage.

Sample code

Along with the tutorials can be found on sesv-tutorial github.

Course outline

Individual topics are purposely listed so you can come back and reference them easily.

Lecture 1: Programming with Javascript in a big picture

• What is computing?
• The role of a programming language in computing
• What does it mean to learn a programming language?
• What kind of applications can be programmed with Javascript?
• Why programming job is paying so well?
• Impress your friend: latest iPhone model on sale for $99

Lecture 2: Setting up your study environment and mentality

• Install node, nodemon and VScode
• Run Javascript code with Node.js
• Input - Process - Output (IPO) - It's that simple. Don't overthink!
• Programming means processing information
• Setting a theme of studying throughout this course

Lecture 3: Basic Javascript lexicon and syntax

• Whitespace
• Comments // comment
• Optional semi-colon ;
• Identifier
• Case sensitive identifier
• Reserved words
• Variable declaration
• Literal
• Function declaration
• use strict directive

Lecture 4: Javascript built-in data tructure - Number

• What is a data structure?
• Declare number variable with literal (input)
• Manipulate number variable with math (process)
• Return some useful information (output)
• Global object in Javascript
• console.log() is the most useful method for learning
• Object method
• Object property
• Convert number to string
• Min, max and safe presentation of Number
• Convert string to number

Lecture 5: Javascript built-in data tructure - String

• Declaring a string variable
• String template
• String length
• Get to a character in string with index
• UTF-16 table to lookup character code
• Get UTF-16 code at an index
• Split string into array of shorter strings
• Get a substring with 2 indices
• Lower case all character in string
• Upper case all character in string

Lecture 6: Pattern matching and Regular Expression in Javascript

• Pattern matching for string
• Powerful pattern matching with Regular Expression
• Creating a regular expression in Javascript
• Modifiers in Regular Expression
• Create pattern with literal character
• Create pattern with character classes
• Create pattern with position specifiers
• Create pattern to match a range of characters with brackets
• Create pattern with quantifiers
• Create pattern with alternation, grouping, and references
• Create pattern with preserved characters
• Pattern matching examples

Lecture 7: Run pattern matching with built-in Javascript Regex and String methods

• String built-in matching method: match
• String built-in matching method: matchAll
• String built-in matching method: replace()
• String built-in matching method: search()
• Regex built-in matching method: exec()
• Regex built-in matching method: test()

Lecture 8: Javascript built-in data structure - Array, part 1/3

• What is array and what it's used for?
• Ways to create an array
• Array global object
• Javascript constructor
• Check if a variable is an array, method isArray()
• Fill array with given value, method fill()
• Presentation of matrix with array
• Use array to contain information of screen display
• Get an element in array using index
• Modify an element in array

Lecture 9: Javascript built-in data structure - Array, part 2/3

• Get length of an array, property length
• Empty array is different from sparse array
• Removes the last element from an array, method pop()
• Removes the first element from an array, method shift()
• Adds element(s) to the end of an array, method push()
• Adds element(s) to the beginning of an array, method unshift()
• Adds and/or removes elements from an array, method splice()
• Sorts the elements of an array, method sort()
• Reverses the order of the elements of an array, method reverse()
• Concatenate array with other array(s) and/or value(s), method concat()

Lecture 10: Javascript built-in data structure - Array, part 3/3

• Filter array values with given condition, method filter()
• Determines if the array contains a value, method includes()
• Search the first index of a value in an array, method indexOf()
• Search the last index of a value in an array, method lastIndexOf()
• Joins all elements of an array into a string, method join()
• Extracts a section of an array, method slice()
• Loop through each element of array, method forEach()
• Mapping array to a new array, method map()
• Loop through all element and reduce, method reduce()
• Check if at least one element satisifies given condition, method some()

Lecture 11: Javascript built-in data structure - Set

• What is set and what it's used for?
• Ways to create a set
• Get the count of values in Set, property size
• Add value to Set, method add()
• Check if a value in Set, method has()
• Delete a value in Set, method delete()
• Remove all values in Set, method clear()
• Loop through all values in Set, method forEach()

Lecture 12: Javascript built-in data structure - null and undefined

Lecture 13: Javascript built-in data structure - Boolean

Lecture 14: Javascript built-in data structure - Object

• What is Javascript object?
• Object is a powerful way to represent real life object
• Access/invoke (read/run) object property/method
• Add new and update object property/method
• Delete object property/method
• Check if object has a property or method
• In Javascript, object without method is JSON data
• Convert JSON object to string, JSON.stringify()
• Convert a string to an object, JSON.parse()

Lecture 15: Javascript function part 1/4

• Function is a "first-class" citizen in Javascript
• Object function is diffrerent from arrow function
• The "this" keyword refers to current context object
• The "new" operator is used to create an object based on blueprint
• "Arrow" in arrow function used as return shorthand
• Self invoking function, declare and run function right away
• Two variable scopes: global scope and function scope
• Bind given variable to function's "this", method bind()

Lecture 16: Javascript function part 2/4: closure

• What is closure?
• What is closure used for?
• setTimeout()to run a function after specified time
• Javascript closure example 1: delay calling a function
• Javascript closure example 2: memoization

Lecture 17: Javascript function part 3/4: synchronous and asynchronous

• Simple defintion of synchronous and asynchronous operations
• Defintion of synchronous and asynchronous functions
• Callback function, call me when you are done
• Javascript Promise, flatten callback hell
• Promise.all(), wait for a all given promises to finish
• async/await syntax to improve code readability of async logic

Lecture 18: Javascript function part 4/4: generator, high-order function and handy syntax

• Generator function, function can be paused and continued
• Generator object, object to control to pause and continue Generator function
• High-order function
• The "arguments" object in function holds all of its arguments
• Spread syntax ..., spead given value into list
• Destructuring assignment syntax to unpack values into distinct variables
• Set default argument value for a function
• Destructuring and default value for function argument

Lecture 19: Javascript constructor and inheritance: build your own data structure

• Purpose to create object blueprint with "object function" and "class"
• Create object blueprint using "class"
• Create new blueprint based on another blueprint with "extends"
• Enhance object function blueprint with "prototype"

Lecture 20: Javascript operators: compare, modify and see your data type

• Arithmetic Operators: + - * / ** % ++ --
• Assignment Operators: = += -= *= /= %= **=
• String Operators: + +=
• Conditional Operators: ternary and if shorthand
• Logical Operators: and &&, or ||, not !
• Bitwise Operators
• Get to know the type of your variable: operator typeof, instanceof
• Delete an object property: operator delete
• Check if a property exists in an object: operator in

Lecture 21: Javascript expression and statement: compose your complete program

• Expression is equivalent to "phrase"
• Declaration & assignment statement, statement is equivalent to "sentence"
• Conditional statement: "if", "if...else", "if...else if"
• Conditional statement: "switch...case"
• Loop statement: "do...while" and "while"
• Loop statement: "for", full control of your loop
• Loop statement: "for...in", loop through properties of object
• Loop statement: "for...of", loop through elements of array
• Jump statement: "break", break out of a loop anytime
• Jump statement: "continue", continue the loop from the beginning

Lecture 22: Exception and error handling

• Exception is represented by "Error" object
• Use "try...catch" to catch error and handle it
• Use ".catch(error)" to catch error from a promise and handle it
• Use "try...catch" to catch and handle "async/await" error

Lecture 23: Javascript module: package and reuse code

• Why do we package and reuse code?
• Package (export) your code with CommonJS syntax
• Reuse (import) your code with CommonJS syntax
• Package (export) your code with ES Module syntax
• Reuse (import) your code with ES Module syntax

Lecture 24: Frequently used built-in global objects in Javascript

• Math object, tool to assist with mathematics and numbers
• Date object, tool to do date and time related work
• setInterval(), run a function every specified period of time
• Full list of global objects and functions in Javascript

Lecture 25: Writing your first program

Lecture 26: Unblock yourself

• Debug your code
• I see something I've never seen before, what do I do?
• The Newton's method

Lecture 27: Stay updated with Javascript news

Lecture 28: Closing remark