JavaScript Course Notes with Code

Examples

1. Introduction to JavaScript
 JavaScript is a client-side scripting language used to create dynamic and interactive web
pages.
 Runs inside web browsers but can also run on servers ([Link]).
 It’s loosely typed and interpreted.

2. Basic Syntax & Variables

 JavaScript statements end with a semicolon ; (optional but recommended).
 Variables can be declared with var, let, or const.

javascript
CopyEdit
// Variable declarations
var name = "Alice"; // function-scoped, old style
let age = 25; // block-scoped, preferred
const PI = 3.14; // constant, block-scoped

[Link](name, age, PI);

3. Data Types
 Common types: Number, String, Boolean, Null, Undefined, Object, Array, Function.

javascript
CopyEdit
let number = 10; // Number
let message = "Hello!"; // String
let isActive = true; // Boolean
let empty = null; // Null
let notDefined; // Undefined

[Link](typeof number); // "number"

[Link](typeof message); // "string"

4. Operators
  Arithmetic: +, -, *, /, %
 Assignment: =, +=, -=, etc.
 Comparison: ==, ===, !=, !==, <, >, <=, >=
 Logical: &&, ||, !

5. Control Structures
if / else
javascript
CopyEdit
let score = 85;

if (score >= 90) {

[Link]("Grade A");
} else if (score >= 75) {
[Link]("Grade B");
} else {
[Link]("Grade C or below");
}

switch
javascript
CopyEdit
let fruit = "apple";

switch (fruit) {
case "banana":
[Link]("Banana is yellow");
break;
case "apple":
[Link]("Apple is red");
break;
default:
[Link]("Unknown fruit");
}

6. Loops
for loop
javascript
CopyEdit
for (let i = 0; i < 5; i++) {
[Link]("Number:", i);
}
while loop
javascript
CopyEdit
let count = 0;
while (count < 3) {
[Link]("Count is", count);
count++;
}

7. Functions
javascript
CopyEdit
// Function declaration
function greet(name) {
return "Hello " + name + "!";
}

[Link](greet("Alice"));

// Arrow function (ES6)

const add = (a, b) => a + b;

[Link](add(3, 4));

8. Arrays & Associative Arrays (Objects)

Array
javascript
CopyEdit
let fruits = ["apple", "banana", "cherry"];
[Link](fruits[0]); // apple

// Loop through array

[Link]((fruit) => [Link](fruit));

Object (Associative Array)

javascript
CopyEdit
let person = {
name: "Bob",
age: 30,
city: "New York"
};

[Link]([Link]); // Bob
[Link](person["age"]); // 30
9. String Manipulation
javascript
CopyEdit
let text = "Hello, World!";

[Link]([Link]); // 13
[Link]([Link]()); // "HELLO, WORLD!"
[Link]([Link]()); // "hello, world!"
[Link]([Link]("World")); // 7
[Link]([Link](7, 12)); // "World"

10. Form Handling (GET vs POST)

 Typically done in HTML + JavaScript with event listeners.
 GET sends data via URL, POST sends data in request body.

html
CopyEdit
<form id="myForm">
<input type="text" name="username" />
<button type="submit">Submit</button>
</form>

<script>
[Link]("myForm").addEventListener("submit", function(event) {
[Link](); // Prevent form from submitting normally

let formData = new FormData([Link]);

let username = [Link]("username");
[Link]("Submitted username:", username);
});
</script>

11. Input Validation & Sanitization

javascript
CopyEdit
function isValidEmail(email) {
let regex = /^\S+@\S+\.\S+$/;
return [Link](email);
}

[Link](isValidEmail("test@[Link]")); // true
[Link](isValidEmail("bademail@.com")); // false
12. Cookies & Sessions (Basics)
 Cookies: small data stored in browser, accessible via [Link].

javascript
CopyEdit
// Set a cookie
[Link] = "username=Alice; expires=Fri, 31 Dec 2025 23:59:59 GMT;
path=/";

// Read cookies
[Link]([Link]);

 Sessions typically managed on server side ([Link]/Express, PHP, etc.).

13. Password Hashing & Authentication (Overview)

 Usually done on server side for security.
 Client sends password over secure connection (HTTPS).
 Server hashes passwords (e.g., bcrypt) before storing.
 Authentication involves verifying stored hash matches provided password.

14. Database Connection and Queries (MySQLi example in

PHP)
 JavaScript ([Link]) uses libraries like mysql or sequelize.
 Example with [Link] mysql module:

javascript
CopyEdit
const mysql = require('mysql');

const connection = [Link]({

host: "localhost",
user: "user",
password: "password",
database: "mydb"
});

[Link]((err) => {
if (err) throw err;
[Link]("Connected!");

[Link]("SELECT * FROM users", (err, results) => {

if (err) throw err;
 [Link](results);
});
});

YOUTUBE NOTES

1. JavaScript Overview
JavaScript is one of the core technologies of the web (alongside HTML and CSS).

 Purpose: It allows developers to create interactive and dynamic web pages, rather than
just static ones.
 Where it Runs:
o Browser → Front-end development (controls things like animations, forms, pop-
ups).
o [Link] → Back-end development (handles databases, APIs, authentication).
 Evolution:
o Originally, JavaScript was purely for browser use.
o Now, it can be used to create mobile apps, desktop apps, and real-time services
like chat applications.
 Why It’s Important: The language has a huge ecosystem, lots of developer support, and
frequent updates that keep it modern.
 ECMAScript Standard: JavaScript follows this specification. Think of ECMAScript as
the “rulebook” that defines how JavaScript should work.

2. Best Practices in JavaScript Development

 Script Placement:
Place <script> tags at the end of the <body> so the HTML loads first, avoiding errors
like null when trying to access elements that don’t exist yet.
 Comments:
o // → Single-line comments.
o /* ... */ → Multi-line comments.
These are for explaining your code logic without affecting execution.
 Separation of Concerns:
Keep HTML for structure, CSS for styling, and JavaScript for behavior. This improves
maintainability and makes it easier to debug.
 [Link]:
A runtime that lets you execute JavaScript outside of the browser — essential for
building APIs, servers, and handling back-end tasks.
3. Variables in JavaScript
 Declaration Rules:
o Avoid using reserved words (let, var, if, else, etc.) as variable names.
o Pick names that clearly describe what the variable stores (e.g., userName is better
than x).
 Case Sensitivity:
JavaScript treats age and Age as two different variables — consistency is key.
 Primitive Types:

1. String: Text — "Hello World".

2. Number: Numeric — 42, 3.14.
3. Boolean: True/false — true, false.
4. Undefined: Declared but no value assigned.
5. Null: Explicitly empty value.

4. Dynamic Typing
JavaScript doesn’t require you to declare variable types in advance — they can change while the
program runs.
Example:

javascript
CopyEdit
let data = "Hello"; // string
data = 42; // number

 Type Checking: The typeof operator tells you the current data type.
 Value Types:
o Primitive: Stored directly in memory (string, number, boolean, undefined, null).
o Reference: Stored as references to memory (objects, arrays, functions).

5. Objects
 Objects store data in key-value pairs.
 Example:

javascript
CopyEdit
let car = {
 brand: "Toyota",
year: 2022
};

 Keys act like labels; values can be any data type (including arrays or other objects).
 This makes data organized, like a “real-life entity” representation.

6. Arrays
 Dynamic: Can change size or type during execution.
 Example:

javascript
CopyEdit
let mix = [1, "hello", true];

 Indexing: Starts at 0. The first element is array[0].

 Special Nature: Arrays are a type of object, meaning they have built-in methods like
.push() (add item) or .pop() (remove last item).

7. Functions
 Purpose: Encapsulate reusable blocks of code to perform tasks or return values.
 Parameters: Allow functions to handle different inputs.
 Execution: Must be called for the code inside to run.
 Example:

javascript
CopyEdit
function greet(name) {
return "Hello " + name;
}
[Link](greet("Sam")); // Hello Sam

 Real applications combine many functions to work together.