bacnd / javascript-fundamental

A list of lessons talking about javascript fundamental

Javascript Course Agenda

S1 - Introduction to JS

VARIABLES

• Use const for unchanged variable
• Use let for changing variable
• Don't use the old var

DATA TYPES

• number
• string
• boolean
• object: Math, Number, String, Array, Date, Symbol, ...
• symbol
• null vs undefined

FUNCTION

S2 - Data types

NUMBER

• Two types of numbers: integer and float
• Infinite and NaN
• How to write a number with many zeroes
• Operators
• Imprecise calculation: toFixed()
• Convert number to string: toString()
• Parse a string to number: parseInt(), parstFloat()
• Math library
  • Rouding: Math.round(), Math.floor(), Math.ceil(), Math.trunc()
  • Min, max: Math.min(), Math.max()
  • Random: Math.random()

STRING

• Single or double quoted
• Using backticks for formating string, span multiple lines
• Escape ' " back slash
• String length
• Strings are immutable
• Access to characters, loop through all characters in a string: for...of
• Changing case: toLowerCase(), toUpperCase()
• Searching a substring: indexOf(), lastIndexOf()
• Check if contains a substring: includes, startsWith, endsWith
• Get a substring: slice, substring
• String comparison
• Split string into chunks by delimeter

S3 - Array

• What is array?
• How to create an array?
• How to loop through each item in array?
• How to add/remove an item?
• How to find an item?
• What is split and join?
• Some cool method?

S4 - Object

• What is object?
• Example of an object?
• What is JS built-in object?
• Loop through all properties of an object
• Clone object
• ES6 arrow function
• Rest operator and spread operator in object and array
• Introduction to OOP
• Class properties and method
• Inheritance
• Polymorphism
• Some examples: Shape, Rectangle, Circle

S5 - Introduction to DOM

• Introduction to DOM
• Simple todo app: render a list of todo (simple text) and remove a todo when click on a todo.

S6 - DOM in practice - TODO App

• Build a full CRUD TODO App
• Add a new todo
• Update a todo
• Remove a todo
• Render list of todo

S7 - Tic tac toe game

• How to use DOM to build a tic tac toe game

S8 - Promise

• Callback
• Sync and Async code
• Promise

S9 - Working with API

• Promise vs Async await
• Calling API via fetch
• Setup fetchClient
• Setup baseApi
• Setup postApi
• Use postApi to fetch a post data and render post detail page

S10 - Support

• Final project guideline & support