This is a JavaScript course for everybody.
JavaScript is everywhere
JavaScript is the most popular programming language out there, you need to know JavaScript no matter you are a frontend developer or backend developer. YouTube tutorials are usually talking about a JavaScript features without showing how to use them.
Complete Modern JavaScript BootCamp from the beginning starts from scratch and builds up your knowledge of the JavaScript language. Yes, you’ll learn all the features of the language, but you’ll also learn how to use those features together to create a complete application.
Firestore -Real time database
Besides JavaScript, we will also learn to build web with Firebase. Cloud Firestore is also a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform.
[JS Essential] DOM manipulation
-
1VsCode setup and file setup
-
2Console
-
3Variables
In this JavaScript lecture I will teach you about JavaScript variables.
-
4let and const
In this video I cover two ways of creating a variable in JavaScript, let and const.
-
5Data types
-
6Primitive vs reference
-
7Convert to string
JavaScript provides various ways to convert a other data types into a string. In this lecture, we will demonstrate how.
-
8Convert to number
JavaScript provides various ways to convert a other data types into a number. In this lecture, we will demonstrate how.
-
9Numbers and math model
-
10String methods and concat
JavaScript automatically converts primitives to String objects, so that it's possible to use String object methods for primitive
-
11Other string methods
In this part, we continue to talk about the string methods other than the previous lecture
-
12Template literal
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. In this part, we will demonstrate how convenient it is compare with ancient ways
-
13Arrays
Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. In this lecture, we will talk about how to create a JavaScript and also its properties
-
14Array methods
Many amazing JavaScript array methods available to us. In this lecture, we will learn some of the array methods
-
15Object literals
In this lecture , we will talk about how to define (and create) a JavaScript object with an object literal, also how to access its properties.
-
16Date objects
JavaScript Date objects represent a single moment in time in a platform-independent format. In this lecture, I will also teach methods of date objects
-
17IF statement
The if/else statement executes a block of code if a specified condition is true. In this lecture, we will talk about this
-
18Logical operator
Comparison operators are used in logical statements to determine equality or difference between variables or values. In this part, we will talk about this.
-
19Switch case
In this lecture we will talk about JavaScript switch statement to perform different actions based on different conditions. We will talk about switch case for string, date and also range of numbers
-
20Function declaration
The function declaration (function statement) defines a function with the specified parameters. In this lecture, we will talk more about functions
-
21IIFE (Immediately Invoked Function Expression)
-
22General loop
-
23Loop through array
-
24Window object methods
-
25Window object properties
[JS Essential] Object Oriented Programming
-
26Document Object Properties and Methods
The HTML DOM document object is the owner of all other objects in your web page. We will talk about the properties and methods can be used on HTML documents
-
27Document Object Properties and Methods2
In this lecture, we will talk about document classList, classNames, DOM Token List and also scripts
-
28Get element by ID
In this lecture, we will talk about using document.getElementById to get the single element. Then we use it to change the style and the text.
-
29querySelector
In this lecture, we are going to use the querySelector to select single element to do manipulation
-
30Child nodes
In this part, we will talk about the javascript child nodes. By using this , we are going to add the custom id to the element.
-
31Child, Parent and Siblings
In JavaScript, we can select different elements or nodes , like their children, parent and siblings
-
32Create element
In this part, we are going to create new list by using Javascript createElement method
-
33Replace element
In this part, we are going to use Javascript replaceChild to replace the old element with new element
-
34Event listener and event object
In JavaScript, we can add event listener to the element. We can also check the element object by using event.target. Use clientX clientY, offsetX and offsetY to check the coordinates.
-
35Mouse Event: mouseover, mouseout, mouseleave, mouseenter
Javascript has mouse event, in this lecture, we will talk about the difference between mouseover, mouseenter, mouseleave and mouseout
-
36Mouse Event: click, dblclick, mousedown, mouseup, mousemove
Javascript has another set of mouse event, in this lecture, we will talk about the click, dblclick, mousedown, mouseup, mousemove
-
37Keyboard Event: keypress, keyup, keydown
In this lecture, we will talk about JavaScript keyboard events like keypress, keydown and keyup differences
-
38Keyboard Event: cut, copy, paste, input, focus, blur
In this lecture, we will talk about JavaScript keyboard events like cut, copy, paste, input, focus, blur
-
39Onchange event and submit event
In this lecture, we will talk about JavaScript other events like onchange and submit
-
40Event bubbling and event stop propagation
In this lecture, we will introduce the event bubbling and event stop propagation
-
41Event delegation
-
42LocalStorage and SessionStorage
In JavaScript, there are localStorage and sessionStorage, in this lecture, we will talk about what is the difference between these two, how to store and get the items from these storages
-
43JSON stringify and JSON parse
In this lecture, we will talk about how to stringify a JSON array and parse the string back to JSON array.
-
44querySelector and querySelectorAll vs getElementsByClassName and getElementById
[JS Essential] XHR, Ajax and fetch API
-
45Constructor and this
In this lecture we will look at the constructor function and "this" keyword in JavaScript
-
46Add function to the constructor
In this lecture, we will add a function to the constructor to calculate the age
-
47Built in constructor and typeof variable
In JavaScript, actually there are some built in constructors. In this lecture, we will discuss these and also the difference between the == and ===
-
48Other built in constructors
In this lecture, we will demonstrate other JavaScript constructors
-
49Why we need to use prototype?
In this lecture, we will talk about why we need to use JavaScript prototype instead of just adding the function directly inside the constructor.
-
50Other prototypes
Here we will show the use of hasOwnProperty of JavaScript
-
51Inheritance
-
52Object create
In this lecture, we demonstrate the use of Object.create to create an object
-
53es6 classes
es6 classes formalise the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes.
-
54es6 subclass
ES6 allows for inheritance, where one class uses another as a base, and then extends it by adding more features of its own. In this lecture, you will learn inherit properties by using subclasses
[JS Essential] Error handling and regular expression
-
55xhr object
In this lecture, we will talk about how to use the xhr object to get the data from a text file.
-
56xhr different readystate
The XMLHttpRequest.readyState property returns the state an XMLHttpRequest client is in. An XHR client exists in different states and we will discuss in this lecture
-
57xhr get json object
In this lecture, we will use the xhr to get the json object
-
58xhr get json array
In this part, we will use xhr to get json array
-
59xhr get remote data
In this part, we will use the xhr to get the remote data
-
60synchronous and asynchronous by using callback
In this part, we will learn how to create asychronous function by adding a callback function. But first, we will demonstrate the problem of synchronous function
-
61Custom http library
In this part, we will create our own http library to fetch the data
-
62Modify the http library
In this part, we will modify the http library such that it can pop up an error when there is error occur
-
63Create the post, put and delete request
In this part , we continue to create the post, put and delete request
-
64es6 promises
In this part, we will convert the previous project from using callback function to using JavaScript es6 promises
-
65fetch api to fetct text file
The Fetch API provides an interface for fetching resources (including across the network). The new API provides a more powerful and flexible feature set. In this part, we will demonstrate how to fetch the text file
-
66fetch api to fetch json
The Fetch API provides an interface for fetching resources (including across the network). The new API provides a more powerful and flexible feature set. In this part, we will demonstrate how to fetch the json file
-
67fetch remote api
The Fetch API provides an interface for fetching resources (including across the network). The new API provides a more powerful and flexible feature set. In this part, we will demonstrate how to fetch the remote data
-
68arrow function
Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax
-
69convert to arrow function
In the previous lecture, we already introduce the arrow function, so now we convert the old project by using arrow functions
-
70Custom http with fetch api
This part we will use fetch api to create the custom http library
-
71Async await
In this part we will talk about async await. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.
-
72Custom http with async await
In this part, we will apply the async await that we just learnt to modify the http library.
[Project] Regular Expression form
-
73Try catch block
Error handling in JavaScript uses the keywords: try, catch, finally, and throw. In this part, we will focus on try and catch
-
74Different types of errors
Error handling in JavaScript uses the keywords: try, catch, finally, and throw. In this part, we will focus on finally and throw. In addition, we will talk about different types of errors.
-
75Regular expression
-
76Regular expression (character selector)
-
77Regular expression (symbol)
[JS Essential] es6
Design Pattern
-
81Iterator & Generator
While custom iterators are a useful tool, their creation requires careful programming due to the need to explicitly maintain their internal state. Generator functions provide a powerful alternative. In this lecture, we will talk about both
-
82User scroll with iterator
-
83Symbol
Symbol is a primitive data type of JavaScript which is newly introduced in es6
-
84Destructuring
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
-
85Map
The Map object holds key-value pairs and remembers the original insertion order of the keys. Let's explore how we can work around them.
-
86Loop through map
We can also loop through the map object directly or convert the map object into an array. Let's explore how we can do it.
-
87Set
Set objects are collections of values. You can iterate through the elements of a set in insertion order. Let's explore it in this lecture.
-
88Iterating Sets