Learning the JavaScript Language from the Internet
Resources:
- JS Course & Github Repo for JS by Jonas Schmedtmann
- You Don't Know JS by Kyle Simpson (getify)
- JS Docs by MDN
More resources will be added depending on the usefulness of the resource.
Syntax - <topic name>: <html file> | <JavaScript file>
-
- Hello World!:
- Inline Script: hello_i.html
- External Script: hello_e.html | hello.js
- Variables & Data Types: var_dt.html | var_dt.js
- Variable Mutation & Type Coercion: vm_tc.html | vm_tc.js
- Basic Operators: operators.html | operators.js
- Coding Challenge I: challenge_1.html | challenge_1.js
- Control Structures & Boolean Logic: cs_bl.html | cs_bl.js
- Coding Challenge II: challenge_2.html | challenge_2.js
functions - Declarations & Expressions: functions.html | functions.jsArrays: arrays.html | arrays.js- Coding Challenge III: challenge_3.html | challenge_3.js
Objects - Properties & Methods: objects.html | objects.js- Coding Challenge IV: challenge_4.html | challenge_4.js
- Looping & Iteration: loops.html | loops.js
- Coding Challenge V: challenge_5.html | challenge_5.js
- Hello World!:
-
- Execution Context & Execution Stack: exec.html | exec.js
- Exectution Context in Detail
- Hoisting: hoisting.html | hoisting.js
- Scoping & Scope Chain: scope.html | scope.js | scope.pdf - view or download
- The
thisKeyword: this.html | this.js
-
- Common Markup for ii-vii: index.html & style.css
- DOM Access & Manipulation: app.js
- Events & Event Handling: app.js
- Adding, Removing & Toggling HTML Classes: app.js
- DRY Principle & More DOM Manipulation: app.js
- Creating Initialization Function for the Game: app.js
- Adding Game State: app.js final version (Easy) | Play the game @CodeSandBox
-
Pig Game: app.js final version (Hard) | Play the game @Repl.it | Updated Markup - index.html & style.css
-
ObjectCreation, Inheritence &prototypeChain: obj.html | obj.js | prototypeChain.pdf - view or download- Primitives vs. Objects: prim_vs_obj.html | prim_vs_obj.js
- First Class Functions: first_class_functions.html | first_class_functions.js
- Immediately Invoked Function Expressions (IIFE): iife.html | iife.js
- Closures: closure.html | closure.js | closure.pdf - view or download
bind(),call()&apply(): bind_call_apply.html | bind_call_apply.js- Coding Challenge VII: challenge_7.html | challenge_7.js
- Event Bubbling, Target Element & Event Delegation: eventDelegation.html | eventDelegation.pdf - view or download. Reading of eventDelegation.pdf required before understanding the code from Budgety App (k) and thereafter.
-
- Common Markup: index.html & style.css
- Module Pattern, Encapsulation & Separation of Concerns: app.js
keypressEvents &eventObject: app.js- Reading
HTMLInput Data w. Separation of Concerns: app.js - Adding the Initialization Function: app.js
- Function Constructors and Data Structures for Incomes & Expenses: app.js
- Avoiding Data Structure Conflicts & Passing Data from One Module to Another: app.js
- Usage of
innerAdjacentHTML()method &replace()method: app.js - Usage of
querySelectorAll()method, Conversion ofNodeListtoArray& the usage offorEach()method: app.js - Converting HTML Field Inputs to Numbers & Preventing False Item Inputs: app.js
- Creating functions for a singular purpose: app.js
- Event Delegation in Practice - The
parentNodeproperty: app.js - Usage of
map()andsplice()methods on an array: app.js - How to remove an element from the DOM using
removeChild(): app.js - Usage of
prototypeto define a method in a predefined function constructor: app.js - How to implement a
forEach()for NodeList instead of array: app.js - How to use different String methods to manipulate strings: app.js
- How to get the current date using the
Dateobject constructor: app.js - How and when to use
changeevents: app.js -
Budgety App: app.js (final version) | Use the app @netlify
-
- List of New Concepts in ES6: es6.html
- Variables declared using
let&const: let_const.html | let_const.js - Blocks & IIFEs: block_iife.html | block_iife.js
- Strings & String Functions: strings.html | strings.js
- Arrow Functions Intro: arrow_func.html | arrow_func.js
- Arrow Functions - Lexical
thisKeyword: arrow_func_this.html | arrow_func_this.css | arrow_func_this.js - Destructuring: destructuring.html | destructuring.js
- Arrays in ES6 (ES2015): arrays.html | arrays.css | arrays.js
- The Spread
...Operator: spread.html | spread.css | spread.js - Function Parameters
- Rest Parameters: rest.html | rest.js
- Default Parameters: default.html | default.js
- The
MapData Structure: map.html | map.js classes (Syntactic Sugar): class.html | class.js- Inheritance - Classes & Subclasses (ES5 -
Object.create()/ ES6 -extends): inheritance.html | inheritance.js - Challenge VIII: challenge8.html | challenge8.js
-
- An Example of Asynchronous JavaScript: intro.html
- Understanding Asynchronous JS, The Event Loop: event_loop.html | event_loop.pdf - view or download
- Callback Hell - The Old Way: callback_hell.html
- From Callback Hell to
Promises: promise.html | promise.pdf - view or download - From
Promises toasync/awaitin ES8/ES2017: async_await.html - AJAX & API - What do they mean? : ajax_api.html | ajax_api.pdf - view or download