---

JavaScript Naming Conventions and Best Practices:

• naming convention for javascript variables and functions: camelCase
  • example: myVariableName, changeTextFunction


• best practice: use const and let instead of var
  • const for variables that won't be reassigned


• pascal case for class names: MyClassName
  • best practice: use semicolons at the end of statements


• snake case for file names: my_script_file.js
  • best practice: keep file names lowercase


• variable are start with letter, underscore(_), dollar sign($)
  • cannot start with number
  • cannot use reserved keywords as variable name

---

Data Types in JavaScript:

1. Primitive Data Types: This data types are immutable and hold single values.
   • There are 7 primitive data types in JavaScript:
   • Number : Integer, Float, etc.
   • String : Text enclosed in single or double quotes
   • Boolean : true or false
   • Null : Represents intentional absence of any object value
   • Undefined : Variable that has not been assigned a value
   • Symbol : Unique and immutable data type used as identifier for object properties
   • BigInt : Represents integers with arbitrary precision


2. Non-Primitive Data Types: This data types are mutable and can hold multiple values.
   • There are 3 non-primitive data types in JavaScript:
   
   
   • Object : Collection of key-value pairs
     • Example
     • const person = {
     •   name: "John",
     •   age: 30
     • };
   
   
   • Array : Ordered list of values
     • Example
     • const numbers = [1, 2, 3, 4, 5];
   
   
   • Function : Block of code designed to perform a particular task
     • Example
     • function greet() {
     •   console.log("Hello, World!");
     • }
   
   

---

Type Casting in JavaScript:

• Type casting is the process of converting a value from one data type to another.


• There are two types of type casting in JavaScript:


• Implicit Type Casting: JavaScript automatically converts one data type to another when performing operations involving different data types.
  • Example:
  • let result = '5' + 10; // result will be '510' (string)


• Explicit Type Casting: The programmer manually converts a value from one data type to another using built-in functions.
  • Example:
  • let num = Number('5'); // num will be 5 (number)

---

Operators in JavaScript:

• Arithmetic Operators: +, -, *, /, %, ++, --


• Assignment Operators: =, +=, -=, *=, /=, %=
  • Example:
  • let x = 10;
  • x += 5; // x is now 15


• Comparison Operators: ==, ===, !=, !==, >, <, >=, <=


• Logical Operators: && (AND), || (OR), ! (NOT)


• Bitwise Operators: &, |, ^, ~, <<, >>, >>>


• Ternary Operator: condition ? expression1 : expression2


• String Operators: + (concatenation)

---

Control statements in JavaScript are commands that alter the normal sequential flow of program execution, allowing the code to make decisions, repeat tasks, and jump between different parts of a program based on specific conditions. They are typically categorized into three main types:

1. Conditional Statements

   These statements allow the program to make decisions and execute specific blocks of code only if a condition or set of conditions is true.

   • if statement: Executes a code block if a specified condition evaluates to true.
     • if (condition) { // Code to execute if condition is true }
   
   
   • if...else statement: Executes one block of code if the condition is true, and another block if it is false.
     • if (condition) { // Code for true condition } else { // Code for false condition }
   
   
   • else if statement: Used to specify a new condition to test if the previous if or else if conditions are false.
     • Multiple else if statements can be chained together
   
   
   • switch statement: Evaluates an expression once and compares its value against a series of case labels.
     • Often a cleaner alternative to long if...else if chains
   
   
   • Ternary operator (?:): A shorthand for a simple if...else statement.
     • let result = (condition) ? "Value if True" : "Value if False";


2. Iterative Statements (Loops)

   These statements are used to repeatedly execute a block of code as long as a specified condition remains true.

   • for loop: Repeats a code block a specific number of times
     • for (initialization; condition; increment/decrement) { // Code to execute repeatedly }
   
   
   • while loop: Executes a code block as long as a condition is true
     • while (condition) { // Code to execute repeatedly }
   
   
   • do...while loop: Executes a code block at least once before checking the condition
     • do { // Code to execute } while (condition);
   
   
   • for...in loop: Iterates over the properties of an object
     • for (let key in object) { // Code to execute }
   
   
   • for...of loop: Iterates over iterable objects like arrays or strings
     • for (let value of iterable) { // Code to execute }


3. Jump Statements

   These statements change the flow of execution within loops or functions.

   • break: Exits the current loop or switch statement
   
   
   • continue: Skips the current loop iteration and proceeds to the next
   
   
   • return: Exits a function, optionally returning a value
   
   
   • throw: Creates a user-defined exception

---

All Events in JavaScript :

• Mouse Events: click, dblclick, mouseover, mouseout, mousemove, mousedown, mouseup
  • click: Triggered when an element is clicked - onclick()
  • dblclick: Triggered when an element is double-clicked - ondblclick()
  • mouseover: Triggered when the mouse pointer moves over an element - onmouseover()
  • mouseout: Triggered when the mouse pointer moves out of an element - onmouseout()
  • mousemove: Triggered when the mouse pointer moves within an element - onmousemove()
  • mousedown: Triggered when a mouse button is pressed down on an element - onmousedown()
  • mouseup: Triggered when a mouse button is released over an element - onmouseup()


• Keyboard Events: keydown, keyup, keypress
  • keydown: Triggered when a key is pressed down - onkeydown()
  • keyup: Triggered when a key is released - onkeyup()
  • keypress: Triggered when a key is pressed and released (deprecated) - onkeypress()


• Form Events: submit, change, focus, blur, input
  • submit: Triggered when a form is submitted - onsubmit()
  • change: Triggered when the value of an input element changes - onchange()
  • focus: Triggered when an element gains focus - onfocus()
  • blur: Triggered when an element loses focus - onblur()
  • input: Triggered when the value of an input element is changed - oninput()


• Window Events: load, unload, resize, scroll
  • load: Triggered when the entire page has loaded - onload()
  • unload: Triggered when the user leaves the page - onunload()
  • resize: Triggered when the window is resized - onresize()
  • scroll: Triggered when the user scrolls the page - onscroll()


• Clipboard Events: copy, cut, paste
  • copy: Triggered when content is copied to the clipboard - oncopy()
  • cut: Triggered when content is cut to the clipboard - oncut()
  • paste: Triggered when content is pasted from the clipboard - onpaste()


• Drag and Drop Events: dragstart, dragover, drop
  • dragstart: Triggered when the user starts dragging an element - ondragstart()
  • dragover: Triggered when a dragged element is over a drop target - ondragover()
  • drop: Triggered when a dragged element is dropped on a drop target - ondrop()


• Touch Events: touchstart, touchmove, touchend
  • touchstart: Triggered when a touch point is placed on the touch surface - ontouchstart()
  • touchmove: Triggered when a touch point is moved along the touch surface - ontouchmove()
  • touchend: Triggered when a touch point is removed from the touch surface - ontouchend()


• Media Events: play, pause, ended
  • play: Triggered when media starts playing - onplay()
  • pause: Triggered when media is paused - onpause()
  • ended: Triggered when media playback ends - onended()


• Other Events: error, contextmenu
  • error: Triggered when an error occurs while loading an external file - onerror()
  • contextmenu: Triggered when the context menu is opened (right-click) - oncontextmenu()

---

Functions in JavaScript:

• Function Declaration: A named function that can be called before its definition due to hoisting.
  • Example:
  • function greet() {
  •   console.log("Hello, World!");
  • }


• Function Expression: An anonymous function assigned to a variable. It cannot be called before its definition.
  • Example:
  • const greet = function() {
  •   console.log("Hello, World!");
  • };


• Arrow Function: A shorter syntax for writing functions, introduced in ES6. It does not have its own 'this' context.
  • Example:
  • const greet = () => {
  •   console.log("Hello, World!");
  • };

---

Maps in JavaScript:

• Map is a built-in object that allows you to store key-value pairs where keys can be of any data type.


• Creating a Map:
  • const myMap = new Map();


• Adding Key-Value Pairs:
  • myMap.set('key1', 'value1');
  • myMap.set(2, 'value2');


• Accessing Values:
  • const value1 = myMap.get('key1'); // 'value1'


• Checking Existence of a Key:
  • const hasKey = myMap.has('key1'); // true


• Removing Key-Value Pairs:
  • myMap.delete('key1');


• Getting Size of the Map:
  • const size = myMap.size; // Number of key-value pairs


• Iterating Over a Map:
  • for (let [key, value] of myMap) {
  •   console.log(key, value);
  • }

---

Set in JavaScript:

• Set is a built-in object that allows you to store unique values of any data type.


• Creating a Set:
  • const mySet = new Set();


• Adding Values:
  • mySet.add(1);
  • mySet.add('Hello');


• Checking Existence of a Value:
  • const hasValue = mySet.has(1); // true


• Removing Values:
  • mySet.delete(1);


• Getting Size of the Set:
  • const size = mySet.size; // Number of unique values


• Iterating Over a Set:
  • for (let value of mySet) {
  •   console.log(value);
  • }

---

Regex, Search, and Replace in JavaScript:

• Regular Expressions (Regex): Patterns used to match character combinations in strings.
  • Creating a Regex:
    • const regex = /pattern/flags;
    • or
    • const regex = new RegExp('pattern', 'flags');
    • const regex = /hello/i; // case-insensitive match for "hello"
  
  
  • Common Flags:
    • g: global search ,Example: /hello/g
    • i: case-insensitive search ,Example: /hello/i
    • m: multi-line search ,Example: /hello/m
    • d: generate indices for substring matches ,Example: /hello/d


• Regular Expression patterns: uses method - .match(), .test(), .search(), .replace(), .replaceAll() Common Patterns:
  • . : Matches any single character except newline
  • \d : Matches any digit (0-9)
  • \D : Matches any non-digit character
  • \w : Matches any word character (alphanumeric + underscore)
  • \W : Matches any non-word character
  • \s : Matches any whitespace character (spaces, tabs, line breaks)
  • \S : Matches any non-whitespace character
  • ^ : Matches the start of a string
  • $ : Matches the end of a string
  • * : Matches 0 or more occurrences of the preceding element
  • + : Matches 1 or more occurrences of the preceding element
  • ? : Matches 0 or 1 occurrence of the preceding element
  • {n} : Matches exactly n occurrences of the preceding element
  • {n,} : Matches n or more occurrences of the preceding element
  • {n,m} : Matches between n and m occurrences of the preceding element
  • [abc] : Matches any one of the characters a, b, or c
  • [^abc] : Matches any character except a, b, or c
  • (...) : Groups multiple tokens together and creates a capture group
  
  
• Searching Strings:
  • Using test() method:
    • const result = regex.test(string); // returns true or false
  
  
  • Using match() method:
    • const matches = string.match(regex); // returns an array of matches or null
  • Using search() method:
    • const index = string.search(regex); // returns the index of the first match or -1


• Replacing Substrings:
  • Using replace() method:
    • const newString = string.replace(regex, 'replacement');
  • Using replaceAll() method:
    • const newString = string.replaceAll(regex, 'replacement');

---

Sychronous, Asynchronous, Promises, Async/Await with all methods and examples in JavaScript:


• Synchronous JavaScript:
  • Code is executed line by line, blocking further execution until the current operation completes.
  • Example:
    • console.log("Start");
    • console.log("Middle");
    • console.log("End");


• Asynchronous JavaScript:
  • Code can execute without blocking the main thread, allowing other operations to run concurrently.
  • Example using setTimeout:
    • console.log("Start");
    • setTimeout(() => { console.log("Middle"); }, 1000);
    • console.log("End");


• Promises:
  • A Promise represents a value that may be available now, in the future, or never.
  • Example:
    • const myPromise = new Promise((resolve, reject) => {
    •   setTimeout(() => { resolve("Promise resolved!"); }, 1000);
    • });
    • myPromise.then(value => console.log(value));


• Async/Await:
  • A syntactic sugar built on Promises that allows writing asynchronous code in a synchronous manner.
  • Example:
    • async function fetchData() {
    •   const response = await fetch('https://api.example.com/data');
    •   const data = await response.json();
    •   console.log(data);
    • }
    • fetchData();

---

---

JavaScript Programs

1. Number Greater Than 10: Check if a number is greater than 10. Print "Greater than 10" or "10 or less."

Check

---

2. Even or Odd: Check if a number is even or odd using an if-else statement.

Check

---

3. Positive, Negative, or Zero: Check if a number is positive, negative, or zero and print the message.

Check

---

4. Password Verification: Check if entered password is "admin123." Print "Login successful" or "Incorrect password."

Login

---

5. Student Grade: Enter a score (0-100) and get grade: A (90+), B (80-89), C (70-79), F (below 70).

Get Grade

---

6. Voting Eligibility: Check if a person is eligible to vote (age 18 or above).

Check

---

7. Larger Number: Enter two numbers and find the larger one. If equal, print "Both numbers are equal."

Compare

---

8. Leap Year: Check if a given year is a leap year (divisible by 4, but not by 100 unless also divisible by 400).

Check

---

9. Vowel or Consonant: Check if a given character is a vowel (a, e, i, o, u) or a consonant.

Check

---

10. Discount Calculator: Store offers 10% discount if total bill is greater than $100. Calculate final amount.

Calculate

---

11. Print statements using for loop

Print

---

Displaying the object using object.entries method

Display Object

Create your own object: Input your first, last name, phone no., age, gender, profession

Create Object

Interactive Demo: Promises, Async/Await, and setTimeout

Run Promise Demo