Chapter 6: JavaScript & AngularJS — पेज को Interactive बनाना

जब कोई user webpage खोलता है, browser HTML, CSS व JavaScript download करके execute करता है। HTML structure देता है, CSS design देता है, JavaScript webpage में interactivity लाती है।

✨ Features of Client-Side Scripting

• Runs on Browser: code user के browser पर चलता है, server पर नहीं।
• Fast Execution: network communication की ज़रूरत नहीं, speed तेज़।
• Interactive UI: animation, validation व user interaction जोड़ता है।
• Lightweight: logic local browser में चलने से page size छोटा रहता है।
• Limited Access: local files/system data directly access नहीं कर सकता — security बनी रहती है।

<button onclick="showMessage()">Click Me</button>

<script>
  function showMessage() {
    alert("Hello! This runs in your browser.");
  }
</script>

🔄 DOM Manipulation Example

JavaScript webpage के content को runtime पर बदल सकता है — इसे DOM Manipulation कहते हैं।

<p id="demo">Original text.</p>
<button onclick="changeText()">Change Text</button>

<script>
  function changeText() {
    document.getElementById("demo").innerHTML = "Content changed by script!";
  }
</script>

⚖️ Client-Side vs Server-Side

🧠 Declare करने के 3 तरीके

var name = "Rahul";
let age = 21;
const country = "India";

document.getElementById("output").innerHTML =
  "Name: " + name + "<br>Age: " + age + "<br>Country: " + country;

🔭 Variable Scope

Global Scope: variable पूरे script में accessible। Local (Block) Scope: केवल उस block/function के अंदर accessible।

let globalVar = "I am global!";

function testScope() {
  let localVar = "I am local!";
  console.log(globalVar + " " + localVar);
}

📋 Naming Rules

• Letter, underscore (_) या $ से शुरू होता है।
• बीच/अंत में numbers आ सकते हैं, शुरुआत में नहीं।
• Case-sensitive होते हैं (name ≠ Name)।
• Reserved keywords (var, if, function) नाम नहीं बन सकते।

// ✅ Valid
let firstName = "Aman";
let _count = 10;

// ❌ Invalid
let 1name = "Ravi";     // digit से शुरू नहीं हो सकता
let var = "Hello";      // reserved keyword

1️⃣ Arithmetic Operators

let a = 10, b = 5;
console.log(a + b);  // 15
console.log(a % b);  // 0

2️⃣ Assignment Operators

let x = 10;
x += 5;   // x = x + 5 → 15
x -= 3;   // x = x - 3 → 12

3️⃣ Comparison Operators

4️⃣ Logical Operators

let x = 10, y = 3;
console.log(x > 5 && y < 10);  // AND — true
console.log(x > 5 || y > 10);  // OR — true
console.log(!(x > 5));         // NOT — false

5️⃣ Conditional (Ternary) Operator

if-else का short form: condition ? value_if_true : value_if_false

let age = 18;
let result = (age >= 18) ? "Eligible to Vote" : "Not Eligible";

1️⃣ if Statement

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

2️⃣ if...else Statement

let marks = 40;
if (marks >= 50) {
  console.log("You Passed!");
} else {
  console.log("You Failed!");
}

3️⃣ if...else if...else Ladder

let percentage = 75, grade;
if (percentage >= 90) { grade = "A+"; }
else if (percentage >= 75) { grade = "A"; }
else if (percentage >= 60) { grade = "B"; }
else { grade = "Fail"; }

4️⃣ switch Statement

जब एक variable की कई values के अनुसार अलग-अलग code चलाना हो — if...else if का विकल्प।

let day = 3, dayName;
switch(day) {
  case 1: dayName = "Monday"; break;
  case 2: dayName = "Tuesday"; break;
  case 3: dayName = "Wednesday"; break;
  default: dayName = "Invalid Day";
}

1️⃣ alert() Box

Simple message दिखाने के लिए।

function showAlert() {
  alert("Welcome to JavaScript!");
}

2️⃣ confirm() Box

OK व Cancel दो buttons होते हैं। OK पर true, Cancel पर false return होता है।

function deleteItem() {
  let result = confirm("Are you sure you want to delete this?");
  if (result == true) {
    console.log("Item deleted!");
  } else {
    console.log("Action cancelled.");
  }
}

3️⃣ prompt() Box

User से text input लेने के लिए। User जो type करता है वह return value के रूप में मिलता है।

let name = prompt("Please enter your name:");
if (name != null && name != "") {
  console.log("Hello " + name + "!");
}

🔹 Common Event Types

🖱️ onClick Example

<button onclick="showMessage()">Click Me</button>
<p id="msg"></p>

<script>
  function showMessage() {
    document.getElementById("msg").innerHTML = "You clicked the button!";
  }
</script>

🖱️ Mouse Hover Events

<div onmouseover="hoverIn()" onmouseout="hoverOut()">Hover Here</div>

<script>
  function hoverIn() { document.querySelector('div').style.background = "lightgreen"; }
  function hoverOut() { document.querySelector('div').style.background = "lightgray"; }
</script>

⌨️ Keyboard Event

<input type="text" onkeyup="showKey(event)">

<script>
  function showKey(event) {
    console.log("You pressed: " + event.key);
  }
</script>

🔹 Types of Validation

• Required Field: field खाली न हो।
• Email Validation: सही format हो (example@gmail.com)।
• Password Validation: पर्याप्त लंबा/secure हो।
• Number Validation: केवल numbers allow हों।

📋 Registration Form Validation Example

function validateForm() {
  let name = document.forms["myForm"]["username"].value;
  let email = document.forms["myForm"]["email"].value;
  let password = document.forms["myForm"]["password"].value;
  let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

  if (name == "") {
    alert("Name must be filled out!");
    return false;
  }
  if (!email.match(emailPattern)) {
    alert("Please enter a valid email address!");
    return false;
  }
  if (password.length < 6) {
    alert("Password must be at least 6 characters!");
    return false;
  }
  return true;
}

🔢 Number Validation

function checkNumber() {
  let num = document.getElementById("num").value;
  if (isNaN(num) || num == "") {
    alert("Please enter a valid number!");
  } else {
    alert("Valid Number: " + num);
  }
}

✨ Key Features

• Two-Way Data Binding
• MVC (Model-View-Controller) Architecture
• Reusable Components
• Dependency Injection
• Directives & Expressions

📍 AngularJS को Project में जोड़ना

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

1️⃣ AngularJS Expressions

Data को HTML में display करने के लिए — curly braces {{ }} के अंदर लिखा जाता है।

<html ng-app>
<body>
  <p>Addition: {{ 5 + 5 }}</p>
  <p>Text: {{ 'Boosting' + 'Skills' }}</p>
</body>
</html>

2️⃣ AngularJS Modules

Module AngularJS application का container है — इसमें controllers, directives व services define होते हैं।

<html ng-app="myApp">
<body ng-controller="myCtrl">
  <p>Hello {{ name }}!</p>

  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.name = "BoostingSkills Student";
    });
  </script>
</body>
</html>

3️⃣ AngularJS Directives

Directives HTML elements को नया behaviour देने वाले special attributes हैं।

<body ng-controller="demoCtrl">
  <input type="text" ng-model="userName">
  <p>Welcome, <span ng-bind="userName"></span>!</p>

  <ul>
    <li ng-repeat="course in courses">{{ course }}</li>
  </ul>

  <script>
    var app = angular.module("demoApp", []);
    app.controller("demoCtrl", function($scope) {
      $scope.userName = "Student";
      $scope.courses = ["HTML", "CSS", "JavaScript", "AngularJS"];
    });
  </script>
</body>

• Client-side scripting = browser में चलती है (JavaScript); server-side (PHP) server पर चलती है।
• Variables: var (function scope), let/const (block scope); const reassign नहीं हो सकता।
• Operators: Arithmetic (+,-,*,/,%), Comparison (==, ===), Logical (&&,||,!), Ternary (? :)।
• Conditional: if/if-else/if-else-if/switch — switch सिर्फ equality check करता है।
• Popup boxes: alert() (message), confirm() (true/false), prompt() (input value)।
• Events: onclick, onmouseover/out, onkeyup/down, onload, onsubmit।
• Form Validation: required field check, email regex, isNaN() number check, password length।
• AngularJS: Google (2010); MVC architecture; Expressions {{ }}; Modules (angular.module); Directives (ng-app, ng-model, ng-repeat, ng-bind)।

❓ A. Multiple Choice Questions (50)

📝 B. 15 Theory Questions (Short Answers)

1. Client-Side Scripting Language क्या है? उदाहरण दीजिए।Client-Side Scripting Language browser में run होती है, server की ज़रूरत नहीं होती। उदाहरण — JavaScript, VBScript। यह webpage को interactive बनाती है।
2. Client-Side और Server-Side scripting में अंतर लिखिए।Client-side browser पर चलती है (JavaScript), page interaction/validation के लिए। Server-side server पर चलती है (PHP), database व backend logic के लिए। Client-side तेज़ होती है।
3. var, let व const में अंतर बताइए।var — function scope, reassign हो सकता है, hoisted होता है (पुराना)। let — block scope, reassign हो सकता है (modern)। const — block scope, reassign नहीं हो सकता (constant values के लिए)।
4. == और === में अंतर लिखिए उदाहरण सहित।== सिर्फ value compare करता है, type conversion कर लेता है (5=="5" → true)। === value व type दोनों check करता है (5==="5" → false)। एग्ज़ैक्ट comparison के लिए === बेहतर है।
5. Ternary operator क्या है? Syntax व example दीजिए।यह if-else का shorthand है। Syntax: condition ? value_if_true : value_if_false। उदाहरण: let result = (age>=18) ? "Eligible" : "Not Eligible";
6. switch statement कैसे काम करता है?switch किसी variable की value को अलग-अलग case values से match करता है। Match होने पर वह block चलता है (break तक)। कोई match न हो तो default block चलता है। यह केवल equality check करता है।
7. alert(), confirm() व prompt() में अंतर लिखिए।alert() सिर्फ message दिखाता है, कोई return value नहीं। confirm() OK/Cancel देता है, true/false return करता है। prompt() input field देता है, user का typed text (या null) return करता है।
8. JavaScript में कोई 4 events के नाम व उनका काम लिखिए।onclick (क्लिक होने पर), onmouseover (mouse ऊपर आने पर), onkeyup (key release पर), onload (page load होने पर)।
9. Form validation क्यों ज़रूरी है? कोई 2 validation types लिखिए।Form validation से गलत/अधूरा data server तक जाने से पहले रुक जाता है, जिससे errors व security issues कम होते हैं। Types — required field validation (खाली न हो), email validation (सही format हो)।
10. isNaN() function का उपयोग समझाइए।isNaN() check करता है कि value एक valid number है या नहीं — अगर value number नहीं है तो true return करता है। Number input validation में उपयोगी है।
11. AngularJS क्या है? इसे किसने बनाया?AngularJS एक open-source JavaScript framework है जो dynamic single-page web applications बनाने के लिए उपयोग होता है — Google द्वारा 2010 में develop किया गया। यह MVC architecture व two-way data binding देता है।
12. AngularJS Expressions क्या हैं? उदाहरण दीजिए।Expressions data को HTML में display करने के लिए curly braces {{ }} में लिखी जाती हैं। उदाहरण: {{ 5+5 }} output में 10 दिखाएगा।
13. AngularJS Module क्या है?Module AngularJS application का मुख्य container है जिसमें controllers, directives व services define होते हैं। इसे angular.module("appName", []) से बनाया जाता है।
14. AngularJS Directives क्या हैं? कोई 4 directives लिखिए।Directives special HTML attributes हैं जो elements को नया behaviour देते हैं। उदाहरण — ng-app (application define), ng-model (data binding), ng-repeat (list repeat), ng-bind (data display)।
15. AngularJS में MVC architecture समझाइए।Model data represent करता है ($scope से), View HTML में display करता है, Controller business logic handle करता है और Model व View के बीच connection बनाता है — इससे code clean व structured रहता है।