Updated JavaScript Crash Course for Beginners :books:

Introduction

• Welcome to the updated JavaScript crash course for beginners.
• The content includes modern syntax and better overall structure.
• This is the first course to watch for learning JavaScript basics.
• Covers basic syntax and JavaScript fundamentals.

What is JavaScript?

• High-Level Interpreted Language: No need for memory management like C/C++.
• Interpreted: Executed directly without a compiler.
• Follows ECMAScript specification.
  • Other implementations: JScript, ActionScript.
• Multi-paradigm: Allows Object-Oriented and Functional Programming.
• The Language of the Browser: Used for interactive elements on web pages.
• Server-Side JavaScript: Run on the server with Node.js.

Why Learn JavaScript?

• Client-Side Programming: No other language runs directly in the browser.
• Interactive Interfaces: Use frameworks like React, Angular, and Vue.js.
• Full-Stack Development: Use Node.js for full-stack applications.
• Mobile and Desktop Apps: Build using React Native, NativeScript, Electron.
• JS is fast, powerful, and easy to learn.

Topics Covered in the Crash Course

• Data types, variables, arrays, objects, loops, conditionals, functions.
• Object-Oriented Programming (OOP).
• DOM selection and events.
• Basic form validation.

Setting Up the Environment

• Suggest using Visual Studio Code.
• Live Server Extension for auto-refreshing browser.
• JavaScript is added at the bottom of HTML right above the </body> tag.

JavaScript Basics

Variables

• Use let and const instead of var.
  • let: Reassignable.
  • const: Not reassignable.

Data Types

• Primitive Data Types: String, Number, Boolean, Null, Undefined.
  • Example: let age = 30; const name = 'John';
• typeof Operator: Used to determine the data type.

Strings

• Concatenation: Using + or template literals ${}.
• String Methods: length, toUpperCase(), toLowerCase(), substring(), split().

Arrays

• Created using array literal [] or new Array().
• Array Methods: push(), unshift(), pop(), indexOf(), isArray().
• Mixed Data Types: Allowed in arrays.

Object Literals

• Key-Value pairs.
• Example:

  const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    hobbies: ['music', 'sports'],
    address: { street: '50 Main St', city: 'Boston' }
  }
  

• Accessing properties using dot notation or destructuring.

JSON (JavaScript Object Notation)

• Format to structure data.
• Methods: JSON.stringify() to convert object to JSON.

Loops

• For Loop, While Loop, For Of Loop for arrays.
• High-Order Array Methods: forEach(), map(), filter().

Conditionals

• If-Else-If Statements.
• Logical Operators: &&, ||.
• Ternary Operator: condition ? expr1 : expr2.
• Switch Statements.

Functions

• Function Declaration and Arrow Functions.
  • Example:

  const addNums = (num1, num2) => num1 + num2;
  

Object Oriented Programming (OOP)

Constructor Functions

• Create object templates with methods using prototypes.
• Example:

  function Person(firstName, lastName, dob) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.dob = new Date(dob);
  }
  

ES6 Classes

• Simplified syntax for constructor functions.
• Example:

  class Person {
    constructor(firstName, lastName, dob) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.dob = new Date(dob);
    }
    getBirthYear() {
      return this.dob.getFullYear();
    }
  }
  

DOM Manipulation

Selection and Traversal

• Single Element Selectors: getElementById(), querySelector().
• Multiple Element Selectors: getElementsByClassName(), querySelectorAll().
• Traversal: firstElementChild, lastElementChild, children.

Manipulation

• Changing Content: textContent, innerHTML.
• Changing Styles: style.property.
• Events: addEventListener(), preventDefault().
  • Click, mouseover, mouseout events.

Example Project

• Simple form to add users and display them dynamically.
• Use DOM manipulation to show/hide elements, handle form submissions, and update the user interface.

Conclusion

• This crash course covers the essentials of JavaScript.
• Recommends further learning through various available courses and tutorials.

Additional Resources:

• YouTube channel with hundreds of free videos.
• 21-hour Udemy course: Modern JavaScript from the Beginning.
• Other specific tutorials on DOM, JavaScript frameworks like React, Angular, Vue, and more.