Class 12 Computer Science Web Technology - II (CSS, JavaScript, PHP) Notes and Important Questions

Class 12 Web Technology - II (CSS, JavaScript, PHP) Notes (Computer Science)

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.1 Introduction to Scripting A script is a small program written to automate tasks or add interactivity to web pages.

Key points

• NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting Unit 3 Client Side & Server Side Scripting NEB Grade XII
• Computer Science Complete Handwritten-Style Study Notes Syllabus Topics Covered 3.1 Introduction to Scripting 3.2 Server-side & Client-side Scripting 3.3 Introduction of Internet Technology 3.4 Adding JavaScript to HTML Page 3.5 JavaScript Fundamentals 3.6 JavaScript Data Types 3.7 Variables and Operators 3.8 Functions & Control Structures 3.9 Object-based Programming & Event Handling 3.10 Image, Event and Form Objects 3.11 Form Validation & jQuery 3.12–3.25 Server Side Scripting using PHP These notes are aligned with the official NEB Class 12 Computer Science syllabus. Focus on understanding concepts + practice coding examples. — 1 — Study Notes
• Handwritten Style NEB Grade XII

• NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting Unit 3 Client Side & Server Side Scripting NEB Grade XII
• Computer Science Complete Handwritten-Style Study Notes Syllabus Topics Covered 3.1 Introduction to Scripting 3.2 Server-side & Client-side Scripting 3.3 Introduction of Internet Technology 3.4 Adding JavaScript to HTML Page 3.5 JavaScript Fundamentals 3.6 JavaScript Data Types 3.7 Variables and Operators 3.8 Functions & Control Structures 3.9 Object-based Programming & Event Handling 3.10 Image, Event and Form Objects 3.11 Form Validation & jQuery 3.12–3.25 Server Side Scripting using PHP These notes are aligned with the official NEB Class 12 Computer Science syllabus. Focus on understanding concepts + practice coding examples. — 1 — Study Notes
• Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.1 Introduction to Scripting A script is a small program written to automate tasks or add interactivity to web pages. Scripting languages are interpreted (not compiled) and usually embedded in or called from HTML. Scripts make web pages dynamic and interactive. They run either in the browser (client) or on the web server. Popular scripting languages: JavaScript (client), PHP, Python, Ruby (server). 3.2 Server-side vs Client-side Scripting Client-side Scripting Code is executed in the user's web browser. The browser downloads the script along with the HTML page and runs it locally. Language: mainly JavaScript (also TypeScript, etc.) Used for: form validation, animations, DOM manipulation, interactive UI Advantages: fast response, reduces server load, better user experience Disadvantages: source code is visible, security is limited, depends on browser Server-side Scripting Code is executed on the web server. The server processes the request, runs the script, and sends only the resulting HTML to the browser. Languages: PHP, Python (Django/Flask), Node.js, ASP.NET, Ruby on Rails Used for: database access, user authentication, business logic, generating dynamic pages Advantages: code is hidden, more secure, can access databases & files Disadvantages: every request hits the server, slower if not optimized Comparison Table Feature Client-side Server-side Execution Browser Web Server Visibility Source visible Source hidden Languages JavaScript PHP, Python, etc. DB Access No (directly) Yes Security Lower Higher Speed Faster (local) Depends on server — 2 — Study Notes • Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.3 Introduction of Internet Technology Internet technologies form the foundation of web development. Key components: HTML – structure of web pages CSS – styling and layout JavaScript – client-side interactivity HTTP/HTTPS – communication protocol Web Server – Apache, Nginx, IIS Database – MySQL, PostgreSQL, MongoDB Server-side languages – PHP, Python, Node.js A typical web request: Browser HTTP Request Web Server Script + Database HTML Response Browser renders page. 3.4 Adding JavaScript to HTML Page There are three common ways to include JavaScript in an HTML document: 1. Inline JavaScript Inline event handler <button onclick="alert('Hello!')">Click Me</button> 2. Internal JavaScript (inside <script> tag) <!DOCTYPE html> <html> <head> <title>JS Example</title> <script> function greet() { alert("Welcome to NEB Class 12!"); } </script> </head> <body> <button onclick="greet()">Greet</button> </body> </html> 3. External JavaScript file <!-- in HTML --> <script src="script.js"></script> // script.js function greet() { document.getElementById("msg").innerHTML = "Hello!"; } — 3 — Study Notes • Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting Best practice: Prefer external JS files. Place <script> just before </body> for better page load performance. — 4 — Study Notes • Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.5 JavaScript Fundamentals JavaScript is a lightweight, interpreted, object-oriented scripting language. It was created by Brendan Eich in 1995 and is now standardized as ECMAScript. Key Features Case-sensitive language Statements usually end with semicolon (;) – optional but recommended Comments: // single line /* multi-line */ Dynamically typed – variable type is decided at runtime Supports functional + object-oriented programming Basic Syntax Example // This is a comment var name = "Ram"; // variable declaration console.log("Hello " + name); /* Multi-line comment */ let age = 18; const PI = 3.1416; 3.6 JavaScript Data Types JavaScript has primitive and non-primitive (reference) data types. Primitive Types Type Example Description Number 42, 3.14 Integer or floating point String "Hello" Text enclosed in quotes Boolean true/false Logical true or false Undefined undefined Variable declared but no value Null null Intentional empty value Symbol Symbol() Unique identifier (ES6) BigInt 123n Large integers (ES2020) Non-Primitive (Reference) Types Object – collection of key-value pairs Array – ordered list of values Function – callable object let student = {name: "Sita", grade: 12}; // Object let marks = [85, 90, 78, 92]; // Array function add(a, b) { return a + b; } // Function — 5 — Study Notes • Handwritten Style NEB Grade XII

• NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.7 Variables and Operators Declaring Variables Three ways to declare variables in modern JavaScript: var x = 10; // function-scoped, can be re-declared let y = 20; // block-scoped, can be re-assigned const z = 30; // block-scoped, cannot be re-assigned Prefer let and const over var in modern code. Use const by default; use let only when the value needs to change. Operators in JavaScript
• 1. Arithmetic Operators Operator Meaning Example + Addition 5 + 3 8 - Subtraction 5 - 3 2 * Multiplication 5 * 3 15 / Division 15 / 3 5 % Modulus (remainder) 17 % 5 2 ** Exponentiation 2 ** 3 8 ++ Increment x++ or ++x -- Decrement x-- or --x
• 2. Assignment Operators x = 10; // simple assignment x += 5; // x = x + 5 x -= 3; // x = x - 3 x *= 2; // x = x * 2 x /= 4; // x = x / 4 x %= 3; // x = x % 3 — 6 — Study Notes
• Handwritten Style NEB Grade XII

• NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting
• 3. Comparison Operators Operator Meaning Example == Equal to (loose) 5 == '5' true === equal value & type 5 === '5' false != not equal 5 != 3 true !== not equal value/type 5 !== '5' true > greater than 7 > 5 true < less than 3 < 5 true >= greater or equal 5 >= 5 true <= less or equal 4 <= 5 true ! Always prefer === and !== over == and != to avoid unexpected type coercion.
• 4. Logical Operators true && false // AND → false true || false // OR → true !true // NOT → false
• 5. String Operator let full = "Ram" + " " + "Bahadur"; // "Ram Bahadur" let msg = `Hello ${name}`; // Template literal Operator Precedence (High to Low) () Parentheses ** Exponentiation * / % Multiplication, Division, Modulus + - Addition, Subtraction Comparison operators (< > <= >=) Equality (== === != !==) Logical AND (&&) Logical OR (||) Assignment (= += -= etc.) — 7 — Study Notes
• Handwritten Style NEB Grade XII

• NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.8 Functions and Control Structures Functions A function is a reusable block of code that performs a specific task. // Function Declaration function add(a, b) { return a + b; } // Function Expression const multiply = function(a, b) { return a * b; }; // Arrow Function (ES6) const divide = (a, b) => a / b; console.log(add(5, 3)); // 8 console.log(multiply(4, 2)); // 8 console.log(divide(10, 2)); // 5 Control Structures
• if – else if – else let marks = 75; if (marks >= 80) { console.log("Distinction"); } else if (marks >= 60) { console.log("First Division"); } else if (marks >= 45) { console.log("Second Division"); } else { console.log("Fail"); }
• switch – case let day = 3; switch(day) { case 1: console.log("Sunday"); break; case 2: console.log("Monday"); break; case 3: console.log("Tuesday"); break; default: console.log("Invalid"); } — 8 — Study Notes
• Handwritten Style NEB Grade XII

• NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting Loops in JavaScript
• for loop for (let i = 1; i <= 5; i++) { console.log("Number: " + i); } // Output: Number: 1 ... Number: 5
• while loop let i = 1; while (i <= 5) { console.log(i); i++; }
• do…while loop let i = 1; do { console.log(i); i++; } while (i <= 5); // Executes at least once even if condition is false
• for…of and for…in let fruits = ["Apple", "Mango", "Banana"]; for (let fruit of fruits) { console.log(fruit); // values } let student = {name: "Hari", age: 17}; for (let key in student) { console.log(key + ": " + student[key]); } break exits the loop immediately. continue skips the current iteration and moves to the next one. — 9 — Study Notes
• Handwritten Style NEB Grade XII

• NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.9 Object-based Programming & Event Handling Objects in JavaScript Almost everything in JavaScript is an object. Objects store data as properties and actions as methods. let person = { firstName: "Sita", lastName: "Sharma", age: 18, fullName: function() { return this.firstName + " " + this.lastName; } }; console.log(person.firstName); // Sita console.log(person.fullName()); // Sita Sharma SVG Programming with JavaScript SVG (Scalable Vector Graphics) can be manipulated with JavaScript to create interactive graphics. <svg id="mySvg" width="200" height="100"> <circle id="c1" cx="50" cy="50" r="40" fill="blue" /> </svg> <script> let circle = document.getElementById("c1"); circle.addEventListener("click", function() { circle.setAttribute("fill", "red"); }); </script> Event Handling Events are actions that happen in the browser (click, load, keypress, submit, etc.). We can respond to them using event handlers.
• Common Events onclick – mouse click onload – page or image finished loading onmouseover / onmouseout – mouse enter/leave onkeydown / onkeyup – keyboard onsubmit – form submission onchange – value of input changed — 10 — Study Notes
• Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting // Method 1: HTML attribute <button onclick="alert('Clicked!')">Click</button> // Method 2: DOM property btn.onclick = function() { alert("Clicked!"); }; // Method 3: addEventListener (preferred) btn.addEventListener("click", function() { alert("Clicked!"); }); — 11 — Study Notes • Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.10 Image, Event and Form Objects Image Object The Image object represents an HTML <img> element. We can change its source, size, or react to load events. <img id="photo" src="cat.jpg" width="200"> <script> let img = document.getElementById("photo"); img.src = "dog.jpg"; // change image img.width = 300; img.onload = function() { console.log("Image loaded"); }; </script> Event Object When an event occurs, an Event object is automatically passed to the handler. It contains useful information. document.addEventListener("click", function(e) { console.log(e.type); // "click" console.log(e.target); // element clicked console.log(e.clientX); // mouse X position e.preventDefault(); // stop default action }); Form Object The Form object represents an HTML <form>. We can access its elements and control submission. <form id="regForm" name="regForm"> <input type="text" name="username" id="user"> <input type="password" name="pass"> <input type="submit" value="Register"> </form> <script> let form = document.getElementById("regForm"); console.log(form.elements.length); console.log(form.username.value); form.onsubmit = function() { // validation logic here return true; // allow submit }; </script> — 12 — Study Notes • Handwritten Style NEB Grade XII

• NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.11 Form Validation & jQuery Client-side Form Validation Validation checks user input before sending data to the server. It improves UX and reduces invalid requests. function validateForm() { let name = document.getElementById("name").value; let email = document.getElementById("email").value; let pass = document.getElementById("pass").value; if (name === "") { alert("Name is required"); return false; } if (email.indexOf("@") === -1) { alert("Invalid email"); return false; } if (pass.length < 6) { alert("Password must be at least 6 characters"); return false; } return true; } ! HTML5 also provides built-in validation with attributes: required, type="email", minlength, pattern, etc. Always validate on the server too! Introduction to jQuery jQuery is a popular, lightweight JavaScript library that simplifies DOM manipulation, event handling, and AJAX. <!-- Include jQuery from CDN --> <script src="https://code.jquery.com/jquery-3.7.1.min.js"> </script> <script> $(document).ready(function() { // Change text $("#title").text("Hello jQuery"); // Click event $("#btn").click(function() { $("p").hide(); }); // Add class $("div").addClass("highlight"); }); </script>
• Useful jQuery Selectors & Methods $("p") – select all <p> elements — 13 — Study Notes
• Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting $("#id") – select by ID $(".class") – select by class .hide() / .show() / .toggle() .html() / .text() / .val() .addClass() / .removeClass() .click() / .on("event", handler) — 14 — Study Notes • Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.12 Server Side Scripting using PHP PHP (Hypertext Preprocessor) is a widely-used open-source server-side scripting language designed especially for web development. PHP code is embedded into HTML and executed on the server. 3.13 Hardware & Software Requirements Software Requirements Web Server: Apache, Nginx, or IIS PHP Interpreter (version 7.4+ or 8.x recommended) Database: MySQL / MariaDB (most common) Text Editor / IDE: VS Code, Sublime, PhpStorm Local package: XAMPP, WAMP, LAMP, or MAMP Hardware (basic) Any modern PC or laptop Minimum 2 GB RAM (4 GB+ preferred) Internet connection (for downloading packages & testing) XAMPP is the easiest way for beginners: it installs Apache + MySQL + PHP + phpMyAdmin in one package. 3.14 Object Oriented Programming with PHP PHP supports both procedural and object-oriented programming (OOP). OOP concepts help organize large applications. <?php class Student { public $name; public $grade; function __construct($name, $grade) { $this->name = $name; $this->grade = $grade; } function introduce() { return "I am $this->name from grade $this->grade"; } } $s1 = new Student("Ram", 12); echo $s1->introduce(); ?> — 15 — Study Notes • Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.15 Basic PHP Syntax PHP code is written inside <?php ... ?> tags. Files usually have .php extension. <!DOCTYPE html> <html> <body> <h1>My first PHP page</h1> <?php echo "Hello, NEB Class 12!"; // This is a single-line comment /* Multi-line comment */ ?> </body> </html> 3.16 PHP Data Types Type Example Notes String "Hello" Text Integer 42 Whole numbers Float 3.14 Decimal numbers Boolean true / false Logical values Array array(1,2,3) Ordered collection Object new Class() Instance of a class NULL NULL No value Resource fopen() External resource 3.17 Basic Programming in PHP <?php echo "Welcome<br>"; print "to PHP<br>"; // Variables start with $ $name = "Sita"; $age = 17; echo "Name: $name, Age: $age"; ?> 3.18 Operators in PHP PHP operators are very similar to JavaScript: Arithmetic: + - * / % ** Assignment: = += -= *= /= %= Comparison: == === != !== > < >= <= Logical: && || ! (also and or xor) String: . (concatenation) .= (append) — 16 — Study Notes • Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting <?php $a = 10; $b = 3; echo $a + $b; // 13 echo $a % $b; // 1 echo "Hello " . "World"; // Hello World ?> — 17 — Study Notes • Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.19 Variables Manipulation PHP variables are loosely typed. You can change the type at any time. <?php $x = "Hello"; // string $x = 25; // now integer $x = 3.14; // now float // Variable variables $name = "Ram"; $$name = "Bahadur"; // creates $Ram = "Bahadur" echo $Ram; // Bahadur // Constants define("PI", 3.1416); const SITE = "NEB"; ?> 3.20 – 3.21 Database Connectivity PHP commonly connects to MySQL using the MySQLi extension or PDO. Connecting with MySQLi (Object-oriented) <?php $server = "localhost"; $user = "root"; $pass = ""; $db = "school"; $conn = new mysqli($server, $user, $pass, $db); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } echo "Connected successfully"; ?> 3.22 Making SQL Queries — 18 — Study Notes • Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting <?php // SELECT query $sql = "SELECT id, name, marks FROM students"; $result = $conn->query($sql); // INSERT query $sql = "INSERT INTO students (name, marks) VALUES ('Hari', 88)"; $conn->query($sql); // UPDATE $sql = "UPDATE students SET marks=90 WHERE id=1"; $conn->query($sql); // DELETE $sql = "DELETE FROM students WHERE id=3"; $conn->query($sql); ?> — 19 — Study Notes • Handwritten Style NEB Grade XII

NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.23 Fetching Data Sets After running a SELECT query we can fetch rows in different ways. <?php $sql = "SELECT * FROM students"; $result = $conn->query($sql); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { echo "ID: " . $row["id"] . " - Name: " . $row["name"] . " - Marks: " . $row["marks"] . "<br>"; } } else { echo "0 results"; } $conn->close(); ?> Getting Data about Data (Metadata) <?php // Number of rows echo $result->num_rows; // Field information $fields = $result->fetch_fields(); foreach($fields as $field) { echo $field->name . " (" . $field->type . ")<br>"; } ?> 3.24 Creating SQL Database with PHP <?php $conn = new mysqli("localhost", "root", ""); // Create database $sql = "CREATE DATABASE school"; $conn->query($sql); // Select database and create table $conn->select_db("school"); $sql = "CREATE TABLE students ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50) NOT NULL, marks INT )"; $conn->query($sql); echo "Database and table created"; ?> — 20 — Study Notes • Handwritten Style NEB Grade XII

• NEB Class 12 | Computer Science | Unit 3 Client & Server Side Scripting 3.25 Displaying Queries in Tables We can output database results inside an HTML table for a clean presentation. <?php $conn = new mysqli("localhost", "root", "", "school"); $sql = "SELECT * FROM students ORDER BY marks DESC"; $result = $conn->query($sql); ?> <table border="1" cellpadding="8"> <tr> <th>ID</th><th>Name</th><th>Marks</th> </tr> <?php while($row = $result->fetch_assoc()) { ?> <tr> <td><?php echo $row["id"]; ?></td> <td><?php echo $row["name"]; ?></td> <td><?php echo $row["marks"]; ?></td> </tr> <?php } ?> </table> <?php $conn->close(); ?> Quick Revision Checklist Client-side = browser (JS), Server-side = server (PHP) JS: variables (let/const), data types, operators, functions, loops JS Events: click, submit, load – use addEventListener Form validation on client + always on server PHP tags: <?php ... ?>, variables start with $ MySQLi: connect query fetch_assoc close Always sanitize user input before using in SQL (prepared statements) Practice: Create a simple student registration form with JS validation + PHP + MySQL to store and display data in a table. This covers almost the entire unit! End of Notes – All the Best for Exams! NEB Class 12
• Computer Science
• Unit 3 — 21 — Study Notes
• Handwritten Style NEB Grade XII