JavaScript and AngularJS – NIELIT O Level (M2-R5)

इस chapter में हम सीखेंगे कि JavaScript क्या है, इसे web page में कैसे use किया जाता है, variables, operators, events, popup boxes और form validation जैसे basic concepts को detail में समझेंगे। साथ ही हम AngularJS का परिचय भी करेंगे जिसमें expressions, modules और directives को practically सीखेंगे।

🏠 Home 📘 Paid PDF 🧩 Mock Test

Chapter 1: Introduction to Web Design Chapter 2: Editors Chapter 3: HTML Basics Chapter 4: CSS Chapter 5: CSS Framework Chapter 6: JavaScript & AngularJS Chapter 7: Photo Editor Chapter 8: Web Publishing & Browsing

👉 Swipe to see more

1️⃣ Introduction to Client-Side Scripting Language (JavaScript)

Introduction to Client-Side Scripting Language (JavaScript)

Web development में दो तरह की scripting languages होती हैं — Client-Side और Server-Side। Client-Side Scripting Language वो होती है जो user के browser में run होती है, यानी code execute होने के लिए server की ज़रूरत नहीं होती। इसका सबसे प्रसिद्ध example है — JavaScript।

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

📘 Definition

“A Client-Side Scripting Language is a language that runs on the client’s web browser and controls the behavior and content of web pages dynamically.”

सरल शब्दों में — यह language webpage को dynamic और interactive बनाती है। जब आप किसी button पर click करते हैं या form में error message देखते हैं — यह सब client-side script की वजह से होता है।

✨ Features of Client-Side Scripting (मुख्य विशेषताएँ)

💻 Runs on Browser: Code user के browser पर execute होता है, server पर नहीं।
⚡ Fast Execution: Network communication की आवश्यकता नहीं होने से speed तेज होती है।
🧠 Interactive UI: Pages पर animation, validation और user interaction जोड़ता है।
📦 Lightweight: Page size छोटा रहता है, क्योंकि logic local browser में चलता है।
🔒 Limited Access: यह local files या system data को directly access नहीं कर सकता — जिससे security बनी रहती है।

🔹 Common Client-Side Languages

JavaScript – सबसे प्रसिद्ध और widely used language।
VBScript – पुरानी scripting language (अब deprecated)।
TypeScript – JavaScript का modern superset।

💡 Remember: JavaScript ही web browsers की default scripting language है। लगभग सभी browsers (Chrome, Edge, Firefox, Safari) इसे support करते हैं।

🧩 Example: First JavaScript Program

नीचे एक simple example है जिसमें JavaScript का उपयोग client-side interaction के लिए किया गया है।


<!DOCTYPE html>
<html>
<head>
  <title>My First JavaScript Example</title>
  <meta charset="UTF-8">
</head>
<body>

  <h2>Client Side Scripting Example</h2>
  <p>Click the button to see an alert message.</p>

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

  <script>
    function showMessage() {
      alert("Hello! This is a Client-Side Script running in your browser.");
    }
  </script>

</body>
</html>

▶️ Try Live

🧩 Example: Dynamic HTML Content Using JavaScript

JavaScript webpage के content को runtime पर change कर सकता है। इसे DOM Manipulation कहा जाता है।


<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Content Example</title>
  <meta charset="UTF-8">
</head>
<body>

  <h2>Change Content Dynamically</h2>
  <p id="demo">This is original text.</p>
  <button onclick="changeText()">Change Text</button>

  <script>
    function changeText() {
      document.getElementById("demo").innerHTML = "This content is changed by Client-Side Script!";
    }
  </script>

</body>
</html>

▶️ Try Live

📊 Advantages of Client-Side Scripting

✅ Fast execution because scripts run in the browser.
✅ Reduces load on the web server.
✅ Provides instant feedback to users (e.g., form validation).
✅ Makes web pages dynamic and interactive.

⚠️ Limitations of Client-Side Scripting

❌ Security issues – Users can view or modify the script using browser tools.
❌ Dependent on browser support – Some scripts behave differently in older browsers.
❌ Cannot access server-side files or databases directly.

🧠 O Level Exam Tip:

“Client-Side Script” और “Server-Side Script” के बीच अंतर अक्सर 2 marks question के रूप में पूछा जाता है। नीचे इसका summary comparison दिया गया है।

Client-Side Scripting	Server-Side Scripting
Browser पर run होती है।	Server पर run होती है।
Page interaction और validation के लिए।	Database और backend logic के लिए।
Example: JavaScript, VBScript	Example: PHP, ASP, Node.js
Faster execution	Comparatively slower (server communication needed)

💡 Remember: Client-Side Scripting Language = “Logic running on the browser.” यह web page को responsive, dynamic और user-friendly बनाता है।

2️⃣ Variables in JavaScript (वेरिएबल्स इन जावास्क्रिप्ट)

Variables in JavaScript (वेरिएबल्स क्या होते हैं?)

Programming में Variable एक ऐसा नामित स्थान (Named Memory Location) होता है जहाँ हम data temporarily store करते हैं ताकि बाद में उसे use किया जा सके। सरल शब्दों में — Variable data को memory में रखने का एक तरीका है।

JavaScript में variables का उपयोग किसी value (जैसे number, string, boolean आदि) को store करने, उसे process करने और display करने के लिए किया जाता है।

📘 Definition:

“A variable is a named container used to store data values in memory during the execution of a program.”

🧠 Syntax (Syntax of Declaring Variable):

var variableName = value;
let variableName = value;
const variableName = value;

💡 JavaScript में Variables Declare करने के 3 तरीके:

Keyword	Description
var	पुराना तरीका (ES5 तक) – function scope variable बनाता है।
let	Modern तरीका (ES6 में आया) – block scope variable बनाता है।
const	Constant variable बनाता है जिसकी value बाद में बदली नहीं जा सकती।

💡 Remember: हमेशा modern JavaScript में let और const का प्रयोग करें, क्योंकि ये ज्यादा सुरक्षित (block scoped) होते हैं।

🔹 Example 1: Using var, let, and const


<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Variables Example</title>
</head>
<body>

  <h2>JavaScript Variables Demo</h2>
  <p id="output"></p>

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

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

</body>
</html>

▶️ Try Live

🔹 Example 2: Variable Scope (Global vs Local)

Variable scope यह बताता है कि variable को कहाँ तक access किया जा सकता है। JavaScript में दो main scopes होते हैं —

Global Scope: Variable पूरे script में accessible होता है।
Local (Block) Scope: Variable केवल उस block या function के अंदर accessible होता है।


<!DOCTYPE html>
<html>
<head>
  <title>Variable Scope Example</title>
</head>
<body>

  <h2>Variable Scope in JavaScript</h2>
  <p id="result"></p>

  <script>
    let globalVar = "I am global!";

    function testScope() {
      let localVar = "I am local!";
      document.getElementById("result").innerHTML =
        globalVar + "<br>" + localVar;
    }

    testScope();
  </script>

</body>
</html>

▶️ Try Live

🔹 Example 3: const Variable (Constant Value)

const variables को declare करने के बाद उनकी value बदली नहीं जा सकती। अगर आप change करने की कोशिश करेंगे तो error मिलेगा।


<!DOCTYPE html>
<html>
<head>
  <title>Constant Variable Example</title>
</head>
<body>

  <h2>Using const in JavaScript</h2>
  <p id="constOutput"></p>

  <script>
    const PI = 3.1416;
    let radius = 5;
    let area = PI * radius * radius;

    document.getElementById("constOutput").innerHTML =
      "Radius: " + radius + "<br>Area of Circle: " + area;
  </script>

</body>
</html>

▶️ Try Live

📊 JavaScript Variable Naming Rules:

Variable name हमेशा letter, underscore (_) या $ से शुरू होता है।
Numbers (0–9) बीच या अंत में आ सकते हैं, लेकिन शुरू में नहीं।
Variable names case-sensitive होते हैं (name ≠ Name).
Reserved keywords (जैसे var, let, if, function आदि) को variable name के रूप में use नहीं किया जा सकता।

💡 Example of Valid and Invalid Variable Names:


// ✅ Valid
let firstName = "Aman";
let _count = 10;
let $price = 99.5;

// ❌ Invalid
let 1name = "Ravi";     // cannot start with number
let var = "Hello";      // reserved keyword

📘 Summary Table:

Keyword	Scope	Reassignable	Hoisted
var	Function Scope	Yes ✅	Yes ✅
let	Block Scope	Yes ✅	No ❌
const	Block Scope	No ❌	No ❌

💡 Exam Tip: NIELIT O Level paper में “Difference between var, let and const” अक्सर पूछा जाता है। हर keyword का use, scope और limitation याद रखें।

3️⃣ Operators in JavaScript (ऑपरेटर्स इन जावास्क्रिप्ट)

Operators in JavaScript (ऑपरेटर्स क्या होते हैं?)

Operators ऐसे symbols या keywords होते हैं जिनकी मदद से हम values या variables पर operations perform करते हैं। जैसे — addition (+), subtraction (-), comparison (==), logical AND (&&), आदि। JavaScript में operators का उपयोग गणना (calculation), तुलना (comparison), और decision making के लिए किया जाता है।

📘 Definition:

“An operator is a symbol that tells the compiler or interpreter to perform specific mathematical, relational, or logical operations and produce a result.”

🔹 JavaScript Operator Types:

JavaScript में operators को उनके कार्य (functionality) के अनुसार कई प्रकारों में बाँटा गया है:

1️⃣ Arithmetic Operators
2️⃣ Assignment Operators
3️⃣ Comparison Operators
4️⃣ Logical Operators
5️⃣ String Operators
6️⃣ Conditional (Ternary) Operator
7️⃣ Type Operators

1️⃣ Arithmetic Operators (अंकगणितीय ऑपरेटर्स)

Arithmetic operators का उपयोग संख्यात्मक (numeric) गणनाओं के लिए किया जाता है — जैसे जोड़, घटाना, गुणा, भाग इत्यादि।

Operator	Description	Example
+	Addition	10 + 5 = 15
-	Subtraction	10 - 5 = 5
*	Multiplication	10 * 5 = 50
/	Division	10 / 2 = 5
%	Modulus (Remainder)	10 % 3 = 1
++	Increment	x = 5 → x++ = 6
--	Decrement	x = 5 → x-- = 4


<!DOCTYPE html>
<html>
<head>
  <title>Arithmetic Operators</title>
</head>
<body>

  <h2>Arithmetic Operators Example</h2>
  <p id="arith"></p>

  <script>
    let a = 10, b = 5;
    let result = "";
    result += "Addition: " + (a + b) + "<br>";
    result += "Subtraction: " + (a - b) + "<br>";
    result += "Multiplication: " + (a * b) + "<br>";
    result += "Division: " + (a / b) + "<br>";
    result += "Modulus: " + (a % b);
    document.getElementById("arith").innerHTML = result;
  </script>

</body>
</html>

▶️ Try Live

2️⃣ Assignment Operators (असाइनमेंट ऑपरेटर्स)

Assignment operators का उपयोग किसी variable में value को store या modify करने के लिए किया जाता है।

Operator	Description	Example
=	Assign value	x = 10
+=	Add and assign	x += 5 → x = x + 5
-=	Subtract and assign	x -= 5 → x = x - 5
*=	Multiply and assign	x = 5 → x = x 5
/=	Divide and assign	x /= 5 → x = x / 5

3️⃣ Comparison Operators (तुलनात्मक ऑपरेटर्स)

Comparison operators दो values की तुलना (comparison) करने के लिए प्रयोग किए जाते हैं। इनका परिणाम हमेशा true या false होता है।

Operator	Description	Example
==	Equal to	5 == "5" → true
===	Equal value and type	5 === "5" → false
!=	Not equal	5 != 10 → true
>	Greater than	10 > 5 → true
<	Less than	3 < 8 → true
>=	Greater or equal	10 >= 10 → true
<=	Less or equal	5 <= 7 → true

4️⃣ Logical Operators (लॉजिकल ऑपरेटर्स)

Logical operators का उपयोग दो या अधिक conditions को जोड़ने के लिए किया जाता है। इनका परिणाम भी true या false होता है।

Operator	Description	Example
&&	AND	(x>5 && y<10)
\|\|	OR	(x>5 \|\| y<3)
!	NOT	!(x>5)

5️⃣ String Operator (स्ट्रिंग ऑपरेटर)

String concatenation के लिए + और += का उपयोग किया जाता है।


<!DOCTYPE html>
<html>
<head>
  <title>String Operators</title>
</head>
<body>

  <h2>String Concatenation</h2>
  <p id="stringOut"></p>

  <script>
    let firstName = "Aman";
    let lastName = "Singh";
    let fullName = firstName + " " + lastName;

    document.getElementById("stringOut").innerHTML = "Full Name: " + fullName;
  </script>

</body>
</html>

▶️ Try Live

6️⃣ Conditional (Ternary) Operator

यह operator if-else का short form होता है। Syntax इस प्रकार है:

condition ? value_if_true : value_if_false;


<!DOCTYPE html>
<html>
<head><title>Ternary Operator</title></head>
<body>
  <h2>Ternary Operator Example</h2>
  <p id="ternary"></p>

  <script>
    let age = 18;
    let result = (age >= 18) ? "Eligible to Vote" : "Not Eligible";
    document.getElementById("ternary").innerHTML = result;
  </script>
</body>
</html>

▶️ Try Live

🧠 O Level Exam Tip:

अक्सर exam में पूछा जाता है — “Difference between == and ===” या “Write a program using arithmetic and comparison operators.” इसलिए प्रत्येक operator का practical syntax याद रखें।

💡 Remember: Operators JavaScript की backbone हैं। हर calculation, condition, और decision में इनका उपयोग होता है।

4️⃣ Conditional Statements in JavaScript (शर्तीय कथन)

Conditional Statements in JavaScript (शर्तीय कथन)

Conditional statements ऐसे statements होते हैं जिनकी मदद से program विभिन्न conditions के अनुसार अलग-अलग tasks perform करता है। यानी अगर कोई शर्त (condition) पूरी होती है तो एक code block execute होता है, अन्यथा कोई दूसरा block run होता है।

📘 Definition:

“Conditional statements are used to perform different actions based on different conditions in a program.”

JavaScript में decision लेने के लिए हम if, else if, else और switch statements का उपयोग करते हैं।

🔹 Types of Conditional Statements:

1️⃣ if Statement
2️⃣ if...else Statement
3️⃣ if...else if...else Ladder
4️⃣ switch Statement

1️⃣ if Statement

यह सबसे simple conditional statement है। यदि (if) condition true होती है तो block execute होता है।

if (condition) {
   // code to execute if condition is true
}


<!DOCTYPE html>
<html>
<head><title>if Statement Example</title></head>
<body>
  <h2>if Statement Example</h2>
  <p id="demo1"></p>

  <script>
    let age = 20;
    if (age >= 18) {
      document.getElementById("demo1").innerHTML = "You are eligible to vote.";
    }
  </script>
</body>
</html>

▶️ Try Live

2️⃣ if...else Statement

इसका उपयोग तब किया जाता है जब हमें दो अलग-अलग actions लेने हों — एक जब condition true हो और दूसरा जब false हो।

if (condition) {
   // code if true
} else {
   // code if false
}


<!DOCTYPE html>
<html>
<head><title>if else Example</title></head>
<body>
  <h2>if...else Example</h2>
  <p id="demo2"></p>

  <script>
    let marks = 40;
    if (marks >= 50) {
      document.getElementById("demo2").innerHTML = "You Passed!";
    } else {
      document.getElementById("demo2").innerHTML = "You Failed!";
    }
  </script>
</body>
</html>

▶️ Try Live

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

जब हमें कई conditions को check करना होता है तो हम if...else if...else ladder का उपयोग करते हैं। यह multiple choice decision बनाने के लिए helpful है।


if (condition1) {
   // code block 1
} else if (condition2) {
   // code block 2
} else {
   // default code block
}


<!DOCTYPE html>
<html>
<head><title>if else if Example</title></head>
<body>
  <h2>if...else if...else Example</h2>
  <p id="demo3"></p>

  <script>
    let percentage = 75;
    let grade;

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

    document.getElementById("demo3").innerHTML = "Grade: " + grade;
  </script>
</body>
</html>

▶️ Try Live

4️⃣ switch Statement

जब हमें किसी एक variable की कई values के अनुसार अलग-अलग code चलाना हो, तो switch statement का प्रयोग किया जाता है। यह कई if...else if के विकल्प के रूप में काम करता है।


switch(expression) {
  case value1:
    // code block 1
    break;
  case value2:
    // code block 2
    break;
  default:
    // code block when none matches
}


<!DOCTYPE html>
<html>
<head><title>Switch Statement</title></head>
<body>
  <h2>Switch Statement Example</h2>
  <p id="demo4"></p>

  <script>
    let day = 3;
    let dayName;

    switch(day) {
      case 1: dayName = "Monday"; break;
      case 2: dayName = "Tuesday"; break;
      case 3: dayName = "Wednesday"; break;
      case 4: dayName = "Thursday"; break;
      case 5: dayName = "Friday"; break;
      case 6: dayName = "Saturday"; break;
      case 7: dayName = "Sunday"; break;
      default: dayName = "Invalid Day";
    }

    document.getElementById("demo4").innerHTML = "Today is: " + dayName;
  </script>
</body>
</html>

▶️ Try Live

📊 Comparison Summary:

Statement	Usage
if	Single condition check
if...else	True/False दोनों स्थिति में अलग output
if...else if...else	Multiple conditions check करने के लिए
switch	कई fixed values के अनुसार code run करने के लिए

💡 Remember: - “switch” केवल equality check करता है (==) - “if” statement complex logical expressions handle कर सकता है। - NIELIT O Level में अक्सर program-based questions पूछे जाते हैं जैसे “Find grade using if...else if ladder”.

5️⃣ JavaScript Popup Boxes (पॉपअप बॉक्सेज़)

JavaScript Popup Boxes (पॉपअप बॉक्सेज़)

JavaScript popup boxes user और web page के बीच direct interaction का तरीका हैं। ये छोटे dialog boxes होते हैं जो message दिखाने, confirmation लेने या user से input लेने के लिए उपयोग किए जाते हैं।

📘 Definition:

“Popup boxes are dialog boxes that appear on the screen to display messages or take input from the user.”

🔹 Types of JavaScript Popup Boxes:

1️⃣ alert() — Message दिखाने के लिए।
2️⃣ confirm() — Yes/No (OK/Cancel) confirmation लेने के लिए।
3️⃣ prompt() — User से text input लेने के लिए।

💡 Remember: Popup boxes हमेशा browser window के ऊपर दिखाई देते हैं और page interaction को temporarily रोक देते हैं जब तक user कोई response नहीं देता।

1️⃣ alert() Box

alert() box simple message दिखाने के लिए use किया जाता है। यह user को कोई information या warning देने के लिए helpful है।

alert("This is an alert message!");


<!DOCTYPE html>
<html>
<head>
  <title>Alert Box Example</title>
</head>
<body>

  <h2>Alert Box Example</h2>
  <button onclick="showAlert()">Show Alert</button>

  <script>
    function showAlert() {
      alert("Welcome to JavaScript Alert Box!");
    }
  </script>

</body>
</html>

▶️ Try Live

2️⃣ confirm() Box

confirm() box का उपयोग user से confirmation लेने के लिए किया जाता है। इसमें दो buttons होते हैं — OK और Cancel। अगर user “OK” क्लिक करता है तो function true return करता है, और “Cancel” क्लिक करने पर false।

confirm("Are you sure you want to delete this?");


<!DOCTYPE html>
<html>
<head>
  <title>Confirm Box Example</title>
</head>
<body>

  <h2>Confirm Box Example</h2>
  <button onclick="deleteItem()">Delete Item</button>
  <p id="msg"></p>

  <script>
    function deleteItem() {
      let result = confirm("Are you sure you want to delete this item?");
      if (result == true) {
        document.getElementById("msg").innerHTML = "Item deleted successfully!";
      } else {
        document.getElementById("msg").innerHTML = "Action cancelled.";
      }
    }
  </script>

</body>
</html>

▶️ Try Live

3️⃣ prompt() Box

prompt() box user से text input लेने के लिए प्रयोग किया जाता है। इसमें एक message और text input field होता है। जो भी user type करता है, वह function के return value के रूप में store होता है।

let name = prompt("Enter your name:");


<!DOCTYPE html>
<html>
<head>
  <title>Prompt Box Example</title>
</head>
<body>

  <h2>Prompt Box Example</h2>
  <button onclick="askName()">Enter Your Name</button>
  <p id="greet"></p>

  <script>
    function askName() {
      let name = prompt("Please enter your name:");
      if (name != null && name != "") {
        document.getElementById("greet").innerHTML = "Hello " + name + "! Welcome to JavaScript.";
      } else {
        document.getElementById("greet").innerHTML = "You cancelled or left it blank.";
      }
    }
  </script>

</body>
</html>

▶️ Try Live

📊 Comparison of All Popup Boxes:

Popup Type	Function	Use
alert()	Shows information	For warning or notification
confirm()	Takes confirmation (OK/Cancel)	For delete or submit confirmation
prompt()	Takes user input	For asking name, email, etc.

💡 Exam Tip: O Level paper में अक्सर पूछा जाता है — “Differentiate between alert(), confirm() and prompt() with example.” इसलिए syntax और return values याद रखें।

6️⃣ JavaScript Events (इवेंट्स इन जावास्क्रिप्ट)

JavaScript Events (इवेंट्स क्या होते हैं?)

JavaScript में Events ऐसे actions होते हैं जो किसी user interaction या browser action के कारण होते हैं। उदाहरण के लिए: जब user कोई button click करता है, mouse move करता है, या कोई key दबाता है।

📘 Definition:

“An event is an action or occurrence that happens in the system you are programming, which the system tells you about so your code can respond to it.”

🔹 Common Types of JavaScript Events:

1️⃣ Mouse Events — जैसे click, dblclick, mouseover, mouseout
2️⃣ Keyboard Events — जैसे keydown, keyup, keypress
3️⃣ Form Events — जैसे submit, change, focus, blur
4️⃣ Window Events — जैसे load, resize, scroll

💡 Remember: Event तब activate होता है जब browser या user कोई action perform करता है। JavaScript उस action के जवाब में function को run कर देता है।

1️⃣ onClick Event (जब user क्लिक करे)

onClick event तब trigger होता है जब कोई user किसी element (जैसे button या image) पर click करता है।

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


<!DOCTYPE html>
<html>
<head>
  <title>onClick Event Example</title>
</head>
<body>

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

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

</body>
</html>

▶️ Try Live

2️⃣ onMouseOver and onMouseOut Events

onMouseOver तब चलता है जब mouse किसी element के ऊपर जाता है। onMouseOut तब चलता है जब mouse उस element से बाहर जाता है।


<!DOCTYPE html>
<html>
<head><title>Mouse Events</title></head>
<body>

  <h2>Mouse Events Example</h2>
  <div id="box" 
       onmouseover="hoverIn()" 
       onmouseout="hoverOut()" 
       style="width:200px;height:100px;background:lightgray;text-align:center;line-height:100px;">
    Hover Here
  </div>

  <script>
    function hoverIn() {
      document.getElementById("box").style.background = "lightgreen";
      document.getElementById("box").innerHTML = "Mouse Over!";
    }
    function hoverOut() {
      document.getElementById("box").style.background = "lightgray";
      document.getElementById("box").innerHTML = "Hover Here";
    }
  </script>

</body>
</html>

▶️ Try Live

3️⃣ onKeyUp and onKeyDown Events

ये events तब होते हैं जब user keyboard से कोई key दबाता या छोड़ता है। Form input validation या typing detection में यह बहुत काम आते हैं।


<!DOCTYPE html>
<html>
<head><title>Keyboard Events</title></head>
<body>

  <h2>Keyboard Events Example</h2>
  <input type="text" onkeyup="showKey(event)" placeholder="Type something...">
  <p id="keyOut"></p>

  <script>
    function showKey(event) {
      document.getElementById("keyOut").innerHTML = "You pressed: " + event.key;
    }
  </script>

</body>
</html>

▶️ Try Live

4️⃣ onLoad Event

onLoad event तब trigger होता है जब पूरा web page load हो जाता है। इसका प्रयोग अक्सर initialization या welcome messages के लिए किया जाता है।


<!DOCTYPE html>
<html>
<head>
  <title>onLoad Event</title>
  <script>
    function welcomeMsg() {
      alert("Page Loaded Successfully!");
    }
  </script>
</head>
<body onload="welcomeMsg()">

  <h2>onLoad Event Example</h2>
  <p>This alert appears when the page is fully loaded.</p>

</body>
</html>

▶️ Try Live

📊 Common Event Attributes:

Event	Description
onclick	When user clicks on an element
ondblclick	When user double-clicks
onmouseover	When mouse is over an element
onmouseout	When mouse leaves an element
onkeydown	When key is pressed down
onkeyup	When key is released
onload	When page or image has loaded
onchange	When input value changes
onsubmit	When form is submitted

💡 Exam Tip: O Level paper में questions आते हैं जैसे — “Explain onClick and onMouseOver events with example.” इसलिए syntax और practical program दोनों याद रखें।

7️⃣ Basic Form Validations in JavaScript (फॉर्म वेलिडेशन)

Basic Form Validations in JavaScript (फॉर्म वेलिडेशन)

Form validation का अर्थ है user द्वारा दिए गए input data की सही या गलत जांच करना। JavaScript validation का उपयोग करके हम यह check कर सकते हैं कि सभी आवश्यक fields भरे गए हैं, email सही format में है, password पर्याप्त strong है, इत्यादि।

📘 Definition:

“Form validation is the process of checking whether the user's input is correct or not before submitting the form.”

🔹 Types of Validation:

1️⃣ Required Field Validation — यह check करता है कि field खाली न हो।
2️⃣ Email Validation — email format सही हो (example@gmail.com)।
3️⃣ Password Validation — password पर्याप्त लंबा और secure हो।
4️⃣ Number Validation — केवल numbers ही allow हों।

💡 Remember: JavaScript validation client-side होती है, जबकि server-side validation backend में होती है। हमेशा दोनों validations का प्रयोग करें।

📍 Example: Basic Form Validation

नीचे दिए गए example में हमने एक registration form बनाया है जो user name, email और password की जांच करता है।


<!DOCTYPE html>
<html>
<head>
  <title>Form Validation Example</title>
  <script>
    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 long!");
        return false;
      }

      alert("Form submitted successfully!");
      return true;
    }
  </script>
</head>
<body>

  <h2>Registration Form</h2>
  <form name="myForm" onsubmit="return validateForm()">
    Name: <input type="text" name="username"><br><br>
    Email: <input type="text" name="email"><br><br>
    Password: <input type="password" name="password"><br><br>
    <input type="submit" value="Submit">
  </form>

</body>
</html>

▶️ Try Live

📍 Example: Number Validation

यह check करता है कि input केवल numbers से बना हो।


<!DOCTYPE html>
<html>
<head>
  <title>Number Validation</title>
  <script>
    function checkNumber() {
      let num = document.getElementById("num").value;
      if (isNaN(num) || num == "") {
        alert("Please enter a valid number!");
      } else {
        alert("Valid Number Entered: " + num);
      }
    }
  </script>
</head>
<body>

  <h2>Number Validation Example</h2>
  <input type="text" id="num" placeholder="Enter a number">
  <button onclick="checkNumber()">Check</button>

</body>
</html>

▶️ Try Live

📊 Common Validation Functions:

Validation Type	JavaScript Method	Example
Empty Field	if (x == "")	Check for blank input
Email Format	match(regex)	/^[^ ]+@[^ ]+\.[a-z]{2,3}$/
Number Check	isNaN()	Check if not a number
Password Length	length	if (password.length < 6)

💡 Exam Tip: O Level में अक्सर पूछा जाता है — “Write a JavaScript program to validate a form with name, email, and password fields.” इस example को अच्छे से याद कर लीजिए।

8️⃣ Introduction to AngularJS: Expressions, Modules and Directives

Introduction to AngularJS (AngularJS का परिचय)

AngularJS एक open-source JavaScript framework है जो web applications को dynamic और interactive बनाने के लिए उपयोग किया जाता है। इसे Google द्वारा 2010 में develop किया गया था।

📘 Definition:

“AngularJS is a JavaScript framework used for creating single-page web applications with two-way data binding and MVC architecture.”

🔹 Key Features of AngularJS:

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

💡 Remember: AngularJS HTML को एक programming language की तरह treat करता है और उसमें new attributes (directives) जोड़ता है।

📍 How to Include AngularJS in Your Project:

आप AngularJS को दो तरीकों से include कर सकते हैं:

Online CDN से:

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

या इसे download करके local file से use करें।

1️⃣ AngularJS Expressions (AngularJS अभिव्यक्तियाँ)

AngularJS expressions का उपयोग data को HTML में display करने के लिए किया जाता है। इन्हें curly braces {{ }} के अंदर लिखा जाता है।

{{ expression }}


<!DOCTYPE html>
<html ng-app>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <title>AngularJS Expressions</title>
</head>
<body>

  <h2>AngularJS Expressions Example</h2>
  <p>Addition: {{ 5 + 5 }}</p>
  <p>Name: {{ 'Boosting' + 'Skills' }}</p>

</body>
</html>

▶️ Try Live

2️⃣ AngularJS Modules (AngularJS मॉड्यूल्स)

Module AngularJS application का container होता है। इसमें controllers, directives, filters, और services define किए जाते हैं।

var app = angular.module("myApp", []);


<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <title>AngularJS Module Example</title>
</head>
<body ng-controller="myCtrl">

  <h2>AngularJS Module Example</h2>
  <p>Hello {{ name }}!</p>

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

</body>
</html>

▶️ Try Live

3️⃣ AngularJS Directives (AngularJS निर्देश)

Directives वे special attributes होते हैं जो HTML elements को नया behavior देते हैं। AngularJS में predefined directives होते हैं जैसे:

ng-app: Application define करता है।
ng-model: Input fields को data से bind करता है।
ng-bind: Data को HTML elements में display करता है।
ng-repeat: Arrays या lists को repeat करने के लिए।
ng-show / ng-hide: किसी condition के अनुसार element को दिखाता या छुपाता है।


<!DOCTYPE html>
<html ng-app="demoApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <title>AngularJS Directives Example</title>
</head>
<body ng-controller="demoCtrl">

  <h2>AngularJS Directives Example</h2>
  
  <label>Enter Name: </label>
  <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>
</html>

▶️ Try Live

📊 Summary Table:

Concept	Description
Expression	Display data inside {{ }}
Module	Defines the main application container
Directive	Gives HTML new powers (like ng-model, ng-bind)

💡 Exam Tip: O Level में अक्सर पूछा जाता है — “Explain AngularJS Expressions, Modules and Directives with example.” इसलिए syntax और output याद रखें।