PART 1

FULLSTACK WEB DEV

JAVASCRIPT
MASYNCTECH MASYNCTECH [Link]
JAVASCRIPT
OVERVIEW
GETTING STARTED
 WHAT IS JAVASCRIPT?

Deep Dive

High-Level Explanation - JavaScript: Evolved from web interactivity to versatile use

- Server-side, mobile apps, etc.
- JavaScript: Enables interactivity, dynamism on websites
- Runs in browsers, no extra software
- Create interactive forms, animations, games in browsers
- Manipulates HTML, CSS, dynamic content
- Handles events, fetches real-time data

When to use?
Analogue
- JavaScript in various domains:
- Imagery: JavaScript as magic sauce - Web Development: Interactivity
- Transforms static pages into interactive experiences - Server-Side Development: Backend with [Link]
- Click buttons, see real-time changes, no page reloads - Mobile App Development: React Native, Ionic
- Data Analysis: [Link] and data science

Summary

- Versatile JavaScript: Interactive websites to data science

- Web, server, mobile, data roles
- Easy start, mastery needs best practices, principles

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
SETTING
DEVELOPMENT
ENVIRONMENT

GETTING STARTED
YOUR
FIRST
JS CODE

GETTING STARTED
WAYS OF INCLUDING

JS IN
HTML
GETTING STARTED
 WAYS OF INCLUDING JS IN HTML

High-Level Explanation

- Include JavaScript in HTML:

- `<script>` tag
- External `.js` file link
- Inline JavaScript in HTML elements
- `async` and `defer` attributes for external file control

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
 WAYS OF INCLUDING JS IN HTML

High-Level Explanation Deep Dive

- Include JavaScript in HTML: - Embedded JavaScript: Code within `<script>` tags, runs where located.
- `<script>` tag - External JavaScript with `async`: `<script async src="[Link]">`
- External `.js` file link - Downloads and executes immediately.
- Inline JavaScript in HTML elements - External JavaScript with `defer`: `<script defer src="[Link]">`
- `async` and `defer` attributes for external file control - Downloads, executes after HTML parsing.
- Inline JavaScript: Within HTML element attributes, e.g., `onclick`, `onload`.

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
 WAYS OF INCLUDING JS IN HTML

High-Level Explanation Deep Dive

- Include JavaScript in HTML: - Embedded JavaScript: Code within `<script>` tags, runs where located.
- `<script>` tag - External JavaScript with `async`: `<script async src="[Link]">`
- External `.js` file link - Downloads and executes immediately.
- Inline JavaScript in HTML elements - External JavaScript with `defer`: `<script defer src="[Link]">`
- `async` and `defer` attributes for external file control - Downloads, executes after HTML parsing.
- Inline JavaScript: Within HTML element attributes, e.g., `onclick`, `onload`.
Analogue

- Party analogy for JavaScript inclusion:

- Embedded JavaScript: Live band playing as guests arrive.
- External JavaScript with `async`: Early friend interrupting, mingling.
- External JavaScript with `defer`: Special guest waiting, grand entrance.
- Inline JavaScript: Magic trick for individual guests.

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
 WAYS OF INCLUDING JS IN HTML

High-Level Explanation Deep Dive

- Include JavaScript in HTML: - Embedded JavaScript: Code within `<script>` tags, runs where located.
- `<script>` tag - External JavaScript with `async`: `<script async src="[Link]">`
- External `.js` file link - Downloads and executes immediately.
- Inline JavaScript in HTML elements - External JavaScript with `defer`: `<script defer src="[Link]">`
- `async` and `defer` attributes for external file control - Downloads, executes after HTML parsing.
- Inline JavaScript: Within HTML element attributes, e.g., `onclick`, `onload`.
Analogue

- Party analogy for JavaScript inclusion: When to use?

- Embedded JavaScript: Live band playing as guests arrive.
- Embedded JavaScript: Quick tests, prototypes.
- External JavaScript with `async`: Early friend interrupting, mingling.
- External JavaScript with `async`: Independent scripts.
- External JavaScript with `defer`: Special guest waiting, grand entrance.
- External JavaScript with `defer`: DOM-dependent scripts.
- Inline JavaScript: Magic trick for individual guests.
- Inline JavaScript: Simple, one-off actions.

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
 WAYS OF INCLUDING JS IN HTML

High-Level Explanation Deep Dive

- Include JavaScript in HTML: - Embedded JavaScript: Code within `<script>` tags, runs where located.
- `<script>` tag - External JavaScript with `async`: `<script async src="[Link]">`
- External `.js` file link - Downloads and executes immediately.
- Inline JavaScript in HTML elements - External JavaScript with `defer`: `<script defer src="[Link]">`
- `async` and `defer` attributes for external file control - Downloads, executes after HTML parsing.
- Inline JavaScript: Within HTML element attributes, e.g., `onclick`, `onload`.
Analogue

- Party analogy for JavaScript inclusion: When to use?

- Embedded JavaScript: Live band playing as guests arrive.
- Embedded JavaScript: Quick tests, prototypes.
- External JavaScript with `async`: Early friend interrupting, mingling.
- External JavaScript with `async`: Independent scripts.
- External JavaScript with `defer`: Special guest waiting, grand entrance.
- External JavaScript with `defer`: DOM-dependent scripts.
- Inline JavaScript: Magic trick for individual guests.
- Inline JavaScript: Simple, one-off actions.

Important Rules

- Embedded JavaScript: Minimal, demos, testing.

- External JavaScript with `async`: DOM-independent scripts.
- External JavaScript with `defer`: For fully-loaded DOM.
- Inline JavaScript: Avoid for cleaner alternatives.

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
 WAYS OF INCLUDING JS IN HTML

High-Level Explanation Deep Dive

- Include JavaScript in HTML: - Embedded JavaScript: Code within `<script>` tags, runs where located.
- `<script>` tag - External JavaScript with `async`: `<script async src="[Link]">`
- External `.js` file link - Downloads and executes immediately.
- Inline JavaScript in HTML elements - External JavaScript with `defer`: `<script defer src="[Link]">`
- `async` and `defer` attributes for external file control - Downloads, executes after HTML parsing.
- Inline JavaScript: Within HTML element attributes, e.g., `onclick`, `onload`.
Analogue

- Party analogy for JavaScript inclusion: When to use?

- Embedded JavaScript: Live band playing as guests arrive.
- Embedded JavaScript: Quick tests, prototypes.
- External JavaScript with `async`: Early friend interrupting, mingling.
- External JavaScript with `async`: Independent scripts.
- External JavaScript with `defer`: Special guest waiting, grand entrance.
- External JavaScript with `defer`: DOM-dependent scripts.
- Inline JavaScript: Magic trick for individual guests.
- Inline JavaScript: Simple, one-off actions.

Important Rules
Summary
- Embedded JavaScript: Minimal, demos, testing.
- External JavaScript with `async`: DOM-independent scripts. - JavaScript inclusion methods vary with use-cases.
- External JavaScript with `defer`: For fully-loaded DOM. - `async` and `defer` usage controls script execution, enhances performance.
- Inline JavaScript: Avoid for cleaner alternatives.

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
JS
VARIABLES
OVERVIEW
VARIABLES & OPERATORS
 JS VARIABLES OVERVIEW

Value/Items
Syntax

How to declare a variable?

let/const
var
keyword

Variable Name/Container

MASYNCTECH M A S Y N C T E C H M A S Y N C T EwCwHw . m a s y n c t e c h . c o m [Link]

 JS VARIABLES OVERVIEW
Syntax

Reserved Keyword Any Identifier Value

eg: var,let,const

MASYNCTECH M A S Y N C T E C H M A S Y N C T EwCwHw . m a s y n c t e c h . c o m [Link]

 JS VARIABLES OVERVIEW

High-Level Explanation Deep Dive

- JavaScript variables: Data containers for code manipulation. - JavaScript variables: Hold data values or references.
- Keywords: `var`, `let`, `const`.
- `var`: Function-scoped, redeclarable, updatable.
- `let`: Block-scoped, updatable, not redeclarable.
Analogue - `const`: Block-scoped, not updatable, not redeclarable.

- Imagery: JavaScript variables as backpack pockets

- Pockets (variables) hold stuff (data)
- Dynamic typing: Pockets hold various stuff types When to use?
- `let`: Zippers to replace stuff
- var: Older code, or when function-scoping is needed.
- `const`: Sealed, stuff can't be changed
- let: Variable value changes.
- const: Variable value remains constant.

Important Rules

- Default to `const`, unless reassignment needed. Summary

- Avoid `var` in new code; use `let` or `const`.
- JavaScript variables: Data storage and management.
- Use descriptive, camelCase variable names for readability.
- Use `var`, `let`, or `const` based on needs.
- Select based on best practices and specific use-cases.

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
DIFFERENCES BETWEEN

VAR, LET &

CONST
VARIABLES & OPERATORS
 DIFFERENCES BETWEEN VAR,LET & CONST

High-Level Explanation Deep Dive

- Imagery: Variable types as boxes - `var`: Function-scoped, hoisted, less predictable.

- `var`: Old, changeable box - `let`: Block-scoped, not hoisted, more predictable.
- `let`: Modern, changeable with rules - `const`: Block-scoped, immutable (not reassignable).
- `const`: Locked, unchangeable box

Analogue
When to use?
- Imagery: Lunchboxes representing variables
- `var`: Opens, spills unpredictably. - `var`: Less common, function-scoped.
- `let`: Smart, stays shut, changeable. - `let`: Value changes, block-specific.
- `const`: Locked, unchangeable, choose wisely. - `const`: Value constant, consistent.

Important Rules Summary

- `var`: Avoid, prefer `let` and `const`. - `var`, `let`, and `const`: Variable declaration.
- `let`: Changeable variables. - `var`: Function-scoped, older, avoid.
- `const`: Immutable variables for clarity. - `let`: Changeable, block-scoped.
- `const`: Immutable, block-scoped.

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
DATA
TYPES
VARIABLES & OPERATORS
 DATA TYPES

Value/Items
Syntax

How to declare a variable?

let/const
var
keyword

Variable Name/Container

MASYNCTECH M A S Y N C T E C H M A S Y N C T EwCwHw . m a s y n c t e c h . c o m [Link]

 WHAT ARE DATA TYPES

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
 WHAT ARE DATA TYPES

High-Level Explanation Deep Dive

- JavaScript data types: Containers for storing items - JavaScript: Dynamically typed
- Hold numbers, words, lists, etc. - Two data type categories:
- Primitive Types: Immutable, single value
- Number, String, Boolean, Undefined, Null, BigInt, Symbol
- Non-Primitive Types: Mutable, multiple values
- Objects, Arrays

Analogue
When to use?
- Primitive Types: Solo cups for individual drinks
- Non-Primitive Types: Punch bowls for mixing and customization - Primitive Types: Single, unchangeable values (e.g., user info, settings)
- Non-Primitive Types: Complex data (e.g., book list, user account configs)

Important Rules

- Use `const` for immutability Summary

- Select appropriate data type (e.g., String vs. Number)
- JavaScript data types: Primitive (Number, String, Boolean) for single, immutable
- Understand mutability of Objects and Arrays
values, and non-primitive (Objects, Arrays) for complex, mutable data.
- Crucial to choose the right type for effective coding.

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
JS
OPERATORS
OVERVIEW
VARIABLES & OPERATORS
 OPERATORS IN JAVASCRIPT OVERVIEW

High-Level Explanation Deep Dive

- JavaScript operators: Symbols for operations JavaScript operators are categorized into:
- Tools in math-like equations - Arithmetic Operators: Math calculations
- Compare, calculate, assign, and more - Comparison Operators: Value comparisons
- Logical Operators: Boolean logic
- Assignment Operators: Variable value setting
- Unary Operators: Single operand operations
- Ternary Operator: Short conditional operation
- Bitwise Operators: Binary representation level operations

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
 OPERATORS IN JAVASCRIPT OVERVIEW

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
ARITHMETIC
OPERATORS

VARIABLES & OPERATORS

 ARITHMETIC OPERATORS

High-Level Explanation Deep Dive

- JavaScript arithmetic operators: Perform math operations - Addition (`+`) : Add two numbers.
- Examples: Addition, subtraction, multiplication, division - Subtraction (`-`) : Subtract right from left operand.
- Multiplication (`*`) : Multiply two numbers.
- Division (`/`) : Divide left by right operand.
- Modulus (`%`) : Get remainder after division.
- Increment (`++`) : Increase value by one.
- Decrement (`--`) : Decrease value by one.
Analogue

- Arithmetic operators: Fundamental math tools When to use?

- Perform tasks like addition, division remainder, and decrement
- Apply addition, subtraction, multiplication, division for math.
- Employ modulus for remainders, useful in logic.
- Use increment/decrement for quick value adjustments, like in loops.
Important Rules

- Operate on numbers or numeric strings. Summary

- Use increment/decrement wisely; readability matters in
- JavaScript arithmetic operators: Crucial for math in coding
complex expressions.
- Fundamental for algorithms, logic in apps

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
COMPARISON
OPERATORS

VARIABLES & OPERATORS

 COMPARISON OPERATORS

High-Level Explanation Deep Dive

- JavaScript comparison operators: Compare values, yield true/false - Equal to (`==`): Check equal values after type conversion.
- Determine truth of comparisons - Not equal to (`!=`): Check unequal values after type conversion.
- Strictly equal (`===`): Verify equal values and types.
- Strictly not equal (`!==`): Confirm unequal values or types.

Analogue - Greater than (`>`): Examine if left is greater than right.

- Less than (`<`): Examine if left is less than right.
- Comparison operators: Like game referees - Greater than or equal to (`>=`): Check if left is greater than or equal to right.
- Compare, make true/false calls - Less than or equal to (`<=`): Check if left is less than or equal to right.

Important Rules
When to use?

- Favor `===` and `!==` to prevent type conversion surprises. - Equal to (`==`) and Not equal to (`!=`) for type-agnostic comparisons.
- Ensure appropriate data types for comparisons. - Strict comparisons (`===`, `!==`) for type-aware comparisons, preventing type
conversion surprises.

Summary

- JavaScript comparison operators: Enable value comparisons

- Aid decision-making by returning boolean results

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
LOGICAL
OPERATORS

VARIABLES & OPERATORS

 LOGICAL OPERATORS

High-Level Explanation Deep Dive

- JavaScript logical operators: Perform logic on values There are mainly three logical operators:
- Determine relationships between conditions - AND (`&&`): Returns true if both operands are true.
- OR (`||`): Returns true if at least one operand is true.
- NOT (`!`): Returns true if the operand is false and false if it’s true.

Analogue

- Analogy for logical operators:

- AND (`&&`): You and your friend agree When to use?
- OR (`||`): Either you or your friend agree
- AND (`&&`): All conditions must be true.
- NOT (`!`): Important
DisagreementRules
with your friend
- OR (`||`): At least one condition must be true.
- NOT (`!`): Reverse truth value of operand.
- Ensure logical conditions align with your goal's context.
- Logical operators yield booleans for conditionals.

Summary

- Logical operators: Powerful for multi-condition decisions

- Return booleans based on applied logic

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
ASSIGNMENT
OPERATORS

VARIABLES & OPERATORS

 ASSIGNMENT OPERATORS

High-Level Explanation Deep Dive

- JavaScript assignment operators: Assign values to variables - `=`: Assigns a value to a variable.
- Used for setting variable values - `+=`: Adds right value to the left variable.
- `-=`: Subtracts right value from the left variable.
- `*=`: Multiplies left variable by right value.
- `/=`: Divides left variable by right value.
- `%=`: Finds modulus of left variable and right value.

Analogue
When to use?
- Assignment operators: Combine calculation and assignment.
- Utilize assignment operators for concise, readable code.
- Shortcut math for updating variable values in one step.
- Streamline variable calculations and assignments.

Important Rules Summary

- Assignment operators in JavaScript: Efficient for calculations and variable

- Declare the variable before assignment.
assignments.
- Consider order of operations in complex calculations.
- Streamline code for better readability and efficiency.

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]
TERNARY
OPERATORS

VARIABLES & OPERATORS

 TERNARY OPERATOR

High-Level Explanation Deep Dive

- Ternary operator: Shortened if-else statement - Ternary operator parts: Condition, Value if true, Value if false.
- Checks a condition - Format: `condition ? valueIfTrue : valueIfFalse;`
- Returns one value if true, another if false

Analogue
When to use?
- Analogy: Ternary operator as a decision maker
- Ternary operator ideal for simple, one-line decisions.
- Condition: "Is it raining?"
- Use for straightforward conditions and value choices.
- Value if true: "Take an umbrella"
- Best for concise, readable code.
- Value if false: "Take sunglasses"

Summary

Important Rules - Ternary operator: Concise for conditional statements.

- Suitable for simple decisions in code.
- Ternary operator for simple, concise conditionals. - Efficient and readable.
- Avoid nested ternary operators for code readability.

MASYNCTECH M A S Y N C T E C H M A S Y NwCwT w
EC.m
H a s y n c t e c h . c o m [Link]