JavaScript

JavaScript
JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.

1) Syntax and Basic Constructs
- READ: W3Schools – JavaScript Tutorial
  https://www.w3schools.com/js/

- READ: The Modern JavaScript Tutorial
  https://javascript.info/

- WATCH: JavaScript Crash Course for Beginners
  https://youtu.be/hdI2bqOjy3c?t=2

- WATCH: Build a Netflix Landing Page Clone with HTML, CSS & JS
  https://youtu.be/P7t13SGytRk?t=22

2) DOM Manipulation
The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.

- READ: What is the DOM?
  https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/

- READ: JavaScript HTML DOM
  https://www.w3schools.com/js/js_htmldom.asp

- READ: JavaScript DOM
  https://www.javascripttutorial.net/javascript-dom/

- WATCH: What is DOM, Shadow DOM and Virtual DOM?
  https://www.youtube.com/watch?v=7Tok22qxPzQ

- WATCH: JavaScript DOM Crash Course
  https://www.youtube.com/watch?v=0ik6X4DJKCc

3) Fetch API
Ajax is the technique that lets us send and receive the data asynchronously from the servers e.g. updaing the user profile or asynchronously fetch the list of searched products without reloading the page.

- READ: Fetch API MDN Docs
  https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

- WATCH: JavaScript Fetch API
  https://www.youtube.com/watch?v=-ZI0ea5O2oA


4) ES6+ and modular JavaScript
ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming language. It is the first major update to the language since ES5 which was standardized in 2009. You should look at the features introduced with ES6 and onwards.

- READ ES6 Tutorial
  https://www.javascripttutorial.net/es6/

- WATCH: Learn Modern JavaScript in 1 Hour
  https://www.youtube.com/watch?v=NCwa_xi0Uuc

- WATCH: JavaScript ES6, ES7, ES8
  https://www.youtube.com/watch?v=nZ1DMMsyVyI


5) JavaScript Concepts
Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM and strict.

- READ: JavaScript Hoisting
  https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

- READ: Event Bubbling and Capturing
  https://javascript.info/bubbling-and-capturing

- READ: Scope in JavaScript
  https://developer.mozilla.org/en-US/docs/Glossary/Scope

- READ: Var, Let and Const — What's the difference?
  https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

- READ: Inheritance and Prototype Chain
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

- READ: JavaScript Strict Mode
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

- READ: JavaScript Visualized (7 Part Series)
  https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

- WATCH: DOM vs Shadow DOM vs Virtual DOM
  https://www.youtube.com/watch?v=7Tok22qxPzQ