Javascript

Javascript

This is a generic JavaScript course with focus on making web pages interactive. This course starts from the absolute basics. This course may be used as a stepping stone for moving to more advanced forms of JavaScript based Frameworks such as Vue, Node etc. This course shall not be dealing with any frameworks, but pure JavaScript.

Learning Outcome

By the end of the course, the learner may be expected to:

• Understand the core basics of JavaScript
• Understand the transition to modern JavaScript
• Have a good working understanding on:
  • Variables
  • Functions
  • Arrays
  • Objects
• Object-oriented programming
• Prototypes
• JavaScript engines
• Document Object Model with JavaScript
• Event handling, asynchronous coding and Http requests
• Testing, security and deployment

Duration

• 3 days
• Medium Intensity
• Will assessments

Prerequisites

• Basic skills to develop web pages using HTML
• Basic understanding of CSS
• Filing system

Outline

1. Introduction
   1. Overview
   2. Setup
   3. SOP
2. Basics: Variables, Data Types, Operators & Functions
   1. Introducing Variables & Constants
   2. Data Types
   3. Functions
   4. Code Styles, Conventions & Syntax
   5. Returning Values
   6. Scope
   7. Functions & Scope
   8. Converting Data Types
   9. Mixing Numbers & Strings
   10. Splitting Code into Functions
   11. Connecting all Buttons to Functions
   12. Using Arrays
   13. Creating Objects
   14. Accessing Object Data
   15. Arrays & Objects
   16. undefined, null & NaN
   17. Importing Scripts Correctly with "defer" & "async"
3. Control Structures (if Statements, Loops, Error Handling)
   1. Introducing "if" Statements & Boolean (Comparison) Operators
   2. The Logical AND and OR Operators
   3. Understanding Operator Precedence
   4. if & Boolean Operators
   5. Coercion vs Conversion
   6. Validating User Input
   7. Utilizing Global Constants as Identifiers in Conditional Code
   8. Ternary Operator
   9. Working with the "switch-case" Statement
   10. Loops
   11. Controlling Iterations
   12. Error Handling
4. Functions (Advanced)
   1. Parameters vs Arguments
   2. Functions vs Methods
   3. Functions as Objects
   4. Function Expressions
   5. Anonymous Functions
   6. Functions Inside of Functions
   7. Callback Functions
   8. Working with advanced methods
5. Working with the DOM (Browser HTML Code) in JavaScript
   1. Document and Window Object
   2. Understanding the DOM and how it's created
   3. Nodes & Elements - Querying the DOM Overview
   4. Selecting Elements in the DOM
   5. Exploring and Changing DOM Properties
   6. Attributes vs Properties
   7. Selecting Multiple Elements & Summary
   8. Traversing the DOM Traversing Child Nodes
   9. Using parentNode & parentElement
   10. Selecting Sibling Elements
   11. DOM Traversal vs Query Methods
   12. Styling DOM Elements
   13. Creating Elements with JS - Overview
   14. Adding Elements via HTML in Code
   15. Adding Elements via createElement()
   16. Inserting DOM Elements
   17. Cloning DOM Nodes
   18. Live Node Lists vs Static Node Lists
   19. Removing Elements
   20. Insertion & Removal Method Summary
6. Arrays & Iterables
   1. Creating Arrays
   2. Array methods
   3. The splice() Method
   4. Selecting Ranges & Creating Copies with slice()
   5. Adding Arrays to Arrays with concat()
   6. Retrieving Indexes with indexOf() /& lastIndexOf()
   7. Finding Stuff: find() and findIndex()
   8. Alternative to for Loops: The forEach() Method
   9. Transforming Data with map()
   10. sort()ing and reverse()ing
   11. Filtering Arrays with filter()
   12. The Important reduce() Method
   13. Chaining Methods in JavaScript
   14. Arrays & Strings
   15. The Spread Operator (...)
   16. Understanding Array Destructuring
   17. Maps & Sets - Overview
   18. Working with Sets
   19. Working with Maps
   20. Maps vs Objects
   21. Understanding WeakSet
   22. Understanding WeakMap
7. Objects
   1. Objects & Primitive Values
   2. Adding, Modifying & Deleting Properties
   3. Special Key Names & Square Bracket Property Access
   4. Property Types & Property Order
   5. Dynamic Property Access & Setting Properties Dynamically
   6. Getters & Setters
8. Classes & Object-oriented Programming (OOP)
   1. Getting Started with OOP Code
   2. Working with Constructor Methods
   3. Fields vs Properties
   4. Using & "Connecting" Multiple Classes
   5. Binding Class Methods & Working with "this"
   6. Static Methods & Properties
   7. Getters & Setters
   8. Inheritance
   9. Overriding Methods and the super() Constructor
   10. super() Constructor Execution, Order & "this"
   11. Different Ways of Adding Methods
   12. Private Properties
   13. "Pseudo-Private" Properties
9. Project
10. Assessment