JavaScript Fundamentals

// Basic JavaScript example demonstrating its interpretive nature
console.log("Hello, JavaScript!");

function greetUser(name) {
    return `Welcome, ${name}!`;
}

// This code is interpreted and executed directly by the browser
alert(greetUser("Developer"));

// var: Function or globally scoped
var age = 25;

// let: Block-scoped, can be updated
let name = "John";

// const: Block-scoped, cannot be reassigned
const PI = 3.14159;

// Valid variable names
let name = "John";
let age123 = 25;
let _privateVar = "secret";
let $specialVar = "special";
let firstName = "John";
let user_name = "jane";

// Invalid variable names
let 123name = "John";  // Cannot start with a number
let first-name = "John";  // Cannot use hyphens
let class = "JavaScript";  // Cannot use reserved keywords
let #specialVar = "test";  // Cannot use special characters except $ and _

// Examples of using keywords
let name = "John";  // 'let' is a keyword for variable declaration
const PI = 3.14159;  // 'const' is a keyword for constant declaration
if (age >= 18) {  // 'if' is a control flow keyword
  console.log("You are an adult");
}
function greet() {  // 'function' is a keyword for defining functions
  return "Hello!";
}

// Practical example of arithmetic operators
let a = 10;
let b = 3;

console.log(a + b);  // Addition: 13
console.log(a - b);  // Subtraction: 7
console.log(a * b);  // Multiplication: 30
console.log(a / b);  // Division: 3.333
console.log(a % b);  // Modulus: 1
console.log(a ** b); // Exponentiation: 1000

// Assignment Operator Examples
let x = 10;

// Basic assignment
x = 20;  // x is now 20

// Compound assignment operators
x += 5;  // Equivalent to x = x + 5, x is now 25
x -= 3;  // Equivalent to x = x - 3, x is now 22
x *= 2;  // Equivalent to x = x * 2, x is now 44
x /= 4;  // Equivalent to x = x / 4, x is now 11
x %= 3;  // Equivalent to x = x % 3, x is now 2

// Practical example in a real-world scenario
let score = 100;
let penalty = 20;

score -= penalty;  // Deduct penalty from score
console.log(score);  // 80

// Relational Operators Examples
let x = 10;
let y = 5;

console.log(x > y);     // true
console.log(x == "10"); // true (loose comparison)
console.log(x === 10);  // true
console.log(x !== "10"); // true

// Logical Operators Examples
let isAdult = true;
let hasLicense = false;

console.log(isAdult && hasLicense);  // false
console.log(isAdult || hasLicense);  // true
console.log(!isAdult);               // false

// Syntax of Conditional Operator
condition ? expressionIfTrue : expressionIfFalse;

// Simple Conditional Operator Examples
let age = 20;

// Basic usage
let status = age >= 18 ? "Adult" : "Minor";
console.log(status);  // "Adult"

// More complex example
let canVote = age >= 18 ? true : false;
console.log(canVote);  // true

// Nested conditional operator
let message = age < 13 ? "Child" 
          : age < 20 ? "Teenager" 
          : "Adult";
console.log(message);  // "Adult"

// Using with functions or expressions
function checkDiscount(age) {
  return age >= 65 ? 0.2 : 
         age >= 18 ? 0.1 : 0;
}

let discount = checkDiscount(70);
console.log(discount);  // 0.2 (20% senior discount)

// Real-world examples
let username = "";
let displayName = username ? username : "Anonymous";
console.log(displayName);  // "Anonymous"

// Simple conditional rendering in React-like logic
let isLoggedIn = true;
let greeting = isLoggedIn 
  ? `Welcome back, ${username}!`
  : "Please log in";
console.log(greeting);  // "Please log in"

// Conditional assignment
let score = 85;
let grade = score >= 90 ? "A" 
        : score >= 80 ? "B"
        : score >= 70 ? "C"
        : score >= 60 ? "D"
        : "F";
console.log(grade);  // "B"

// Primitive Data Types Examples
// Number
let age = 25;
let price = 19.99;

// String
let name = "John Doe";
let greeting = 'Hello, World!';

// Boolean
let isStudent = true;
let hasLicense = false;


// Typeof demonstration
console.log(typeof age);          // "number"
console.log(typeof name);          // "string"
console.log(typeof isStudent);     // "boolean"

// document.write() method
document.write("Hello, World!");  // Writes directly to the HTML document

// document.writeln() method
document.writeln("This is a line of text");  // Writes a line with an automatic line break

// Single-line comment
// This is a single-line comment explaining the code

/* Multi-line comment
This comment can span
multiple lines */

// Example with actual code
let x = 5;  // Declaring a variable
/* 
Complex calculation
Multiplying x by 2 
*/
let result = x * 2;

// Alert Box
alert("This is an alert message!");

// Confirm Box
let result = confirm("Are you sure you want to continue?");
if (result) {
console.log("User clicked OK");
} else {
console.log("User clicked Cancel");
}

// Prompt Box
let name = prompt("Please enter your name:", "John Doe");
if (name != null) {
console.log("Hello, " + name + "!");
}

// Basic structure of conditional statements
if (condition) {
    // code to be executed if condition is true
}

// Simple if statement
let age = 18;

if (age >= 18) {
    console.log("You are eligible to vote!");
}

// If statement with multiple conditions
let score = 85;
let attendance = 90;

if (score >= 80 && attendance >= 85) {
    console.log("You qualify for honors!");
}

// Basic if...else structure
let age = 15;

if (age >= 18) {
    console.log("You can vote!");
} else {
    console.log("You are too young to vote.");
}

// Practical example
let onlineStatus = true;

if (onlineStatus) {
    console.log("User is online");
} else {
    console.log("User is offline");
}

// Multiple conditions with else if
let score = 85;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else if (score >= 70) {
    console.log("Grade: C");
} else {
    console.log("Grade: F");
}

// Practical example
let time = 14;

if (time < 12) {
    console.log("Good morning!");
} else if (time < 18) {
    console.log("Good afternoon!");
} else {
    console.log("Good evening!");
}

// Nested if statement example
let age = 25;
let hasLicense = true;

if (age >= 18) {
    if (hasLicense) {
        console.log("You can drive a car");
    } else {
        console.log("You need to get a license first");
    }
} else {
    console.log("You are too young to drive");
}

// Complex nested example
let username = "admin";
let password = "12345";
let isActive = true;

if (username === "admin") {
    if (password === "12345") {
        if (isActive) {
            console.log("Login successful");
        } else {
            console.log("Account is inactive");
        }
    } else {
        console.log("Incorrect password");
    }
} else {
    console.log("Invalid username");
}

// AND operator examples
let age = 25;
let hasLicense = true;
let hasClearRecord = true;

// All conditions must be true
if (age >= 21 && hasLicense && hasClearRecord) {
    console.log("You can rent a car");
}

// Complex AND condition with comparisons
let score = 85;
let attendance = 95;
if (score >= 80 && attendance >= 90) {
    console.log("Student qualifies for honors");
}

// OR operator examples
let isEmployee = false;
let isMember = true;
let isVIP = false;

// Any condition can be true
if (isEmployee || isMember || isVIP) {
    console.log("Access granted");
}

// Complex OR condition with comparisons
let creditScore = 650;
let income = 50000;
if (creditScore > 700 || income > 60000) {
    console.log("Loan pre-approved");
}

// Complex combinations
let age = 25;
let hasID = true;
let isWeekend = true;
let isMember = false;

// Complex condition with both && and ||
if ((age >= 21 && hasID) && (isWeekend || isMember)) {
    console.log("Welcome to the club");
}

// Using parentheses for proper grouping
let temperature = 75;
let isRaining = false;
let isHoliday = true;
if ((temperature > 70 && !isRaining) || isHoliday) {
    console.log("Let's go to the park");
}

// Basic while loop structure
let count = 0;
while (count < 5) {
    console.log("Count is: " + count);
    count++;
}

// While loop with conditional break
let number = 1;
while (true) {
    console.log(number);
    if (number >= 5) break;
    number++;
}

// Example 1: Password attempt checker
let correctPassword = "secret123";
let attempt = prompt("Enter password:");
let attempts = 1;

while (attempt !== correctPassword && attempts < 3) {
    attempt = prompt("Wrong password. Try again:");
    attempts++;
}

// Example 2: Number guessing game
let targetNumber = Math.floor(Math.random() * 100) + 1;
let guess;
let tries = 0;

while (guess !== targetNumber) {
    guess = Number(prompt("Guess a number between 1 and 100:"));
    tries++;
    
    if (guess > targetNumber) {
        console.log("Too high!");
    } else if (guess < targetNumber) {
        console.log("Too low!");
    }
}

// Example 3: Processing array elements
let fruits = ["apple", "banana", "orange", "grape"];
let i = 0;

while (i < fruits.length) {
    console.log("Processing fruit: " + fruits[i]);
    i++;
}

// Basic Switch Statement Structure
switch(expression) {
    case value1:
        // code block
        break;
    case value2:
        // code block
        break;
    default:
        // code block
}

let day = new Date().getDay();
document.write("<h3>Today is: </h3>");

switch(day) {
    case 0:
        document.write("Sunday");
        break;
    case 1:
        document.write("Monday");
        break;
    case 2:
        document.write("Tuesday");
        break;
    case 3:
        document.write("Wednesday");
        break;
    case 4:
        document.write("Thursday");
        break;
    case 5:
        document.write("Friday");
        break;
    case 6:
        document.write("Saturday");
        break;
    default:
        document.write("Invalid day");
}

// Function Declaration
function functionName(parameters) {
    // code to be executed
    return value;
}

// Function Expression
const functionName = function(parameters) {
    // code to be executed
    return value;
}

// Arrow Function (ES6)
const functionName = (parameters) => {
    // code to be executed
    return value;
}

function calculateArea(length, width) {
    return length * width;
}

document.write("Area of rectangle: " + calculateArea(5, 3));

// Math Functions Examples
document.write("<h3>Math Function Examples:</h3>");
document.write("Absolute value of -5: " + Math.abs(-5) + "<br>");
document.write("e raised to power 2: " + Math.exp(2) + "<br>");
document.write("Floor of 5.7: " + Math.floor(5.7) + "<br>");
document.write("Ceiling of 5.1: " + Math.ceil(5.1) + "<br>");
document.write("Sine of 90 degrees: " + Math.sin(Math.PI/2) + "<br>");
document.write("Square root of 16: " + Math.sqrt(16) + "<br>");
document.write("2 raised to power 3: " + Math.pow(2,3) + "<br>");
document.write("Maximum of (2,5,1): " + Math.max(2,5,1) + "<br>");
document.write("Minimum of (2,5,1): " + Math.min(2,5,1) + "<br>");

let str = "Hello, World!";

// String Function Examples using document.write()
let text = "JavaScript";
document.write("<h3>String Function Examples:</h3>");
document.write("Original text: " + text + "<br>");
document.write("Length: " + text.length + "<br>");
document.write("Uppercase: " + text.toUpperCase() + "<br>");
document.write("Lowercase: " + text.toLowerCase() + "<br>");
document.write("Character at index 0: " + text.charAt(0) + "<br>");
document.write("Index of 'a': " + text.indexOf('a') + "<br>");
document.write("Last index of 'a': " + text.lastIndexOf('a') + "<br>");
document.write("Substring (0,4): " + text.substring(0,4) + "<br>");

// HTML Formatting Examples
document.write(text.bold() + "<br>");
document.write(text.italics() + "<br>");
document.write(text.fontcolor("blue") + "<br>");
document.write("Normal text with " + text.sup() + " superscript<br>");
document.write("Normal text with " + text.sub() + " subscript<br>");

           function name(parameter1, parameter2, parameter3) {
  // code to be executed
}  
            
            // Basic function declaration
function sayHello() {
    console.log("Hello!");
}

// Function with parameters
function add(a, b) {
    return a + b;
}

// Calling functions
sayHello();           // Output: Hello!
let sum = add(5, 3);  // sum = 8

// Click Event Example
<button onclick="changeColor()">Change Color</button>

function changeColor() {
    document.body.style.backgroundColor = 'lightblue';
}

// Focus and Blur Example
<input type="text" 
    onfocus="this.style.backgroundColor='yellow'"
    onblur="this.style.backgroundColor='white'"
    placeholder="Type here...">

// Mouse Over/Out Example
<div onmouseover="this.style.color='red'"
     onmouseout="this.style.color='black'">
    Hover over me!
</div>

// Form Submit Example
<form onsubmit="return validateForm()">
    <input type="text" id="username">
    <button type="submit">Submit</button>
</form>

function validateForm() {
    let username = document.getElementById("username").value;
    if (username === "") {
        alert("Please enter a username");
        return false;
    }
    return true;
}

// < button onclick="this.style.backgroundColor='yellow'" > onclick < /button >