Scribd
Upload
4 views27 pages

Web Programming Complete Study Guide

This document is a comprehensive study guide for web programming, covering essential topics such as HTML, CSS, JavaScript, AngularJS, Node.js, and MySQL, aimed at achieving an 80-90% exam score. It includes detailed explanations of HTML structure, CSS styling techniques, and JavaScript functionalities, along with exam tips and code examples. The guide is designed for students preparing for final and re-exams at SVKM's NMIMS School of Technology Management & Engineering for the academic years 2022-2025.

Uploaded by

sisodia.amartya
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views27 pages

Web Programming Complete Study Guide

This document is a comprehensive study guide for web programming, covering essential topics such as HTML, CSS, JavaScript, AngularJS, Node.js, and MySQL, aimed at achieving an 80-90% exam score. It includes detailed explanations of HTML structure, CSS styling techniques, and JavaScript functionalities, along with exam tips and code examples. The guide is designed for students preparing for final and re-exams at SVKM's NMIMS School of Technology Management & Engineering for the academic years 2022-2025.

Uploaded by

sisodia.amartya
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

WEB PROGRAMMING

Complete Theory & PYQ Study Guide

SVKM's NMIMS — School of Technology Management & Engineering


Covers: Final Exam 2024-25 | Final Exam 2023-24 | Re-Exam 2022-23

Topics: HTML • CSS • JavaScript • AngularJS • [Link] • MySQL

Designed for 80–90% Exam Score


CHAPTER 1: HTML — HyperText Markup Language

1.1 What is HTML?


HTML is the standard language for creating web pages. A browser reads HTML and renders it visually. HTML uses
tags (angle-bracket keywords) to describe structure and meaning.
★ IMPORTANT: HTML is NOT a programming language — it is a markup language. It defines structure, not logic.

1.2 Basic HTML Document Structure


<!DOCTYPE html> <!-- Declares HTML5 -->
<html> <!-- Root element -->
<head> <!-- Metadata section (not visible) -->
<title>Page Title</title>
</head>
<body> <!-- Visible content -->
<h1>Hello World</h1>
</body>
</html>
■ NOTE: Every HTML file must start with . The section holds meta info, CSS links, JS links. The holds visible content.

1.3 Headings & Paragraphs


<h1>Biggest Heading</h1>
<h2>Second Level</h2>
...
<h6>Smallest Heading</h6>
<p>This is a paragraph.</p>
h1 is the most important heading (biggest), h6 is the least important (smallest). Use one h1 per page.

1.4 Text Formatting Tags


<b>Bold text</b> or <strong>Bold (semantic)</strong>
<i>Italic text</i> or <em>Italic (semantic)</em>
<u>Underline</u>
<s>Strikethrough</s>
<sub>Subscript</sub> e.g. H<sub>2</sub>O
<sup>Superscript</sup> e.g. x<sup>2</sup>
<br> Line break (self-closing)
<hr> Horizontal rule (self-closing)
<abbr title="HyperText">HTML</abbr> Abbreviation with tooltip
■ EXAM TIP: sub/sup are frequently asked in exams. H■SO■ → H2SO4. x²+y² → x2+y2

1.5 Images
<img src="[Link]" alt="Description" width="200" height="150">
src = path to image. alt = alternative text (shown if image fails). width/height in pixels.

1.6 Hyperlinks
<a href="[Link] Google</a>
<a href="[Link] target="_blank">Open in new tab</a>
<a href="[Link] us</a>
■ NOTE: target="_blank" opens link in a new browser tab. Use target="frameName" to load in a frame.

1.7 Lists
<!-- Unordered List (bullets) -->
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>

<!-- Ordered List (numbers) -->


<ol type="A" start="12"> <!-- Capital alphabets starting from L -->
<li>Item L</li>
<li>Item M</li>
</ol>

<!-- type values: "1" (default), "A" (uppercase), "a" (lowercase), "I" (Roman), "i" -->
<!-- start: where counting begins (12 = L for type A) -->
★ IMPORTANT: Ordered list starting from 'L': type="A" start="12" — A=1,B=2,...,L=12

1.8 Tables
<table border="1" cellpadding="6">
<tr> <!-- Table row -->
<th>Name</th> <!-- Header cell (bold, centered) -->
<th colspan="2">Subjects</th> <!-- Span 2 columns -->
</tr>
<tr>
<td>James</td> <!-- Data cell -->
<td>English</td>
<td rowspan="2">Science</td> <!-- Span 2 rows -->
</tr>
</table>
colspan merges columns horizontally. rowspan merges rows vertically. border adds border. cellpadding adds
space inside cells.

1.9 Forms — Complete Reference


<form action="[Link]" method="get">
<!-- Text input -->
<input type="text" name="uname" maxlength="10" placeholder="Max 10 chars" required>

<!-- Password -->


<input type="password" name="pwd">

<!-- Email -->


<input type="email" name="email">

<!-- Number -->


<input type="number" name="age" min="18">

<!-- Date picker -->


<input type="date" name="dob">

<!-- Radio buttons (only one selectable per name group) -->
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female

<!-- Checkboxes (multiple selectable) -->


<input type="checkbox" name="edu" value="SSC" checked> SSC
<input type="checkbox" name="edu" value="HSC"> HSC

<!-- Dropdown -->


<select name="zip">
<option value="400001">400001</option>
<option value="400002" selected>400002</option>
</select>

<!-- Multi-line text -->


<textarea name="address" rows="3" cols="30"></textarea>

<!-- Buttons -->


<input type="submit" value="Submit">
<input type="reset" value="Clear">
</form>
■ EXAM TIP: checked (for checkbox/radio) preselects the option. selected (for option) preselects dropdown. required
validates on submit.

1.10 Frames & Framesets (Legacy but in Syllabus)


<!-- [Link] (frameset) -->
<frameset rows="*,*,*"> <!-- 3 equal rows -->
<frame src="[Link]" name="mainFrame">
<frame src="[Link]" name="sub1Frame">
<frame src="[Link]" name="sub2Frame">
</frameset>

<!-- OR side-by-side: -->


<frameset cols="30%,70%">
<frame src="[Link]" name="navFrame">
<frame src="[Link]" name="displayFrame">
</frameset>
■ NOTE: To load a page inside a specific frame, use the target attribute with the frame name.

1.11 Marquee (Scrolling Text)


<marquee behavior="scroll" direction="left" style="font-size:24px; color:green;">
Form submitted Successfully!
</marquee>
Used on success page after form submission. direction can be left/right/up/down.

1.12 Fieldset & Legend


<fieldset>
<legend>Personal Information</legend>
First Name: <input type="text">
</fieldset>
fieldset groups related form elements with a box. legend is the box title.
CHAPTER 2: CSS — Cascading Style Sheets

2.1 What is CSS?


CSS controls the visual presentation of HTML. Without CSS, pages are plain black text on white. CSS separates
structure (HTML) from design.

2.2 Three Ways to Add CSS


<!-- 1. INLINE — inside the tag directly -->
<h1 style="color:red; font-size:20px;">Hello</h1>

<!-- 2. INTERNAL — inside <style> in <head> -->


<head>
<style>
h1 { color: red; }
p { font-size: 14px; }
</style>
</head>

<!-- 3. EXTERNAL — separate .css file (BEST PRACTICE) -->


<head>
<link rel="stylesheet" href="[Link]">
</head>
★ IMPORTANT: External CSS is preferred. For exam questions asking for 'external stylesheet', create a .css file and
link it.

2.3 CSS Selectors


/* Element selector */ h1 { color: blue; }
/* Class selector (.class) */ .box { background: red; }
/* ID selector (#id) */ #header { font-size: 24px; }
/* Universal selector */ * { margin: 0; padding: 0; }
/* Descendant */ div p { color: gray; }
/* Group */ h1, h2, p { font-family: Arial; }

2.4 Color Properties


color: red; /* text color */
color: #1a237e; /* hex code */
color: rgb(25, 35, 126); /* RGB */
color: rgba(0, 0, 0, 0.5); /* RGB with transparency */
background-color: cyan;
background-color: orange;
background: linear-gradient(135deg, #1565c0, #42a5f5); /* gradient */

2.5 Font Properties


font-family: Arial, sans-serif; /* font type */
font-size: 16px; /* size */
font-weight: bold; /* bold / normal / 700 */
font-style: italic; /* italic / normal */
text-align: center; /* left / right / center / justify */
text-decoration: underline; /* underline / none */
text-transform: uppercase; /* uppercase / lowercase */
letter-spacing: 3px;
line-height: 1.5;
2.6 Box Model — Critical Concept
/* Every HTML element is a box:
Content → Padding → Border → Margin */

.box {
width: 120px;
height: 120px;
padding: 10px; /* space inside border */
border: 4px dotted black;/* border style */
margin: 20px; /* space outside border */
box-sizing: border-box; /* include padding+border in width */
}
■ EXAM TIP: border types: solid, dotted, dashed, double. dotted border question appears in every exam paper!

2.7 Display & Layout


display: flex; /* flexible layout */
justify-content: center; /* horizontal alignment */
align-items: center; /* vertical alignment */
gap: 20px; /* space between flex items */
flex-direction: column; /* stack vertically */

/* Grid layout */
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */

/* Center a div */
margin: 0 auto; /* horizontal centering */
height: 100vh; /* full viewport height */

2.8 Positioning
position: fixed; /* stays fixed even on scroll */
position: relative; /* relative to its normal position */
position: absolute; /* relative to nearest positioned ancestor */
top: 0; left: 0;
z-index: 100; /* stack order (higher = on top) */

2.9 Pseudo-classes (Hover, Link States)


a:link { color: blue; } /* unvisited link */
a:visited { color: purple; } /* visited link */
a:hover { color: red; text-decoration: underline; } /* on mouseover */
a:active { color: orange; } /* while clicking */

button:hover { background: #0d47a1; } /* button hover */


li:hover { background: lightgreen; box-shadow: 2px 2px 6px black; }

2.10 Three Colored Boxes — Frequently Asked


body {
background-color: orange;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
margin: 0;
}
.box {
width: 120px;
height: 120px;
border: 4px dotted black;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: white;
}
.red { background-color: red; }
.yellow { background-color: yellow; color: black; }
.green { background-color: green; }
■ NOTE: This exact question appeared in Paper 1 Q5(b). Orange background + 3 colored boxes + dotted border.

2.11 CSS Gradient Background (Register Form)


body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #1565c0, #42a5f5);
}
.form-container {
background: white;
padding: 30px 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
width: 300px;
}
■ EXAM TIP: Blue gradient background + white form with rounded corners + button hover effect = Q7(a) type question.
Know this pattern!
CHAPTER 3: JavaScript — Client-Side Scripting

3.1 What is JavaScript?


JavaScript (JS) is a programming language that runs in the browser. It makes web pages interactive — responding
to user actions, validating forms, calculating values, updating content without reloading.

3.2 Adding JavaScript to HTML


<!-- Internal JS (inside <script> tag) -->
<script>
alert("Hello World!");
</script>

<!-- External JS file -->


<script src="[Link]"></script>

<!-- Inline JS (inside element attribute) -->


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

3.3 Variables & Data Types


var x = 10; // Number
var name = "Alice"; // String
var flag = true; // Boolean

// Get value from input field:


var val = [Link]("myInput").value;

// Convert string to number:


var num = parseFloat(val); // for decimals: "3.14" → 3.14
var num = parseInt(val); // for integers: "42" → 42
var num = Number(val); // general conversion

3.4 Operators & Conditionals


// Arithmetic: + - * / % (modulus)
// Comparison: == != < > <= >=
// Logical: && (and) || (or) ! (not)

// If-else
if (basic > 20000) {
hra = basic * 0.05; // 5%
} else {
hra = basic * 0.04; // 4%
}

// Ternary operator (shorthand if-else)


var hra = (basic > 20000) ? basic * 0.05 : basic * 0.04;

// Switch-case
switch (op) {
case '+': result = n1 + n2; break;
case '-': result = n1 - n2; break;
case '*': result = n1 * n2; break;
case '/':
result = (n2 === 0) ? "Cannot divide by 0" : n1 / n2;
break;
default: result = "Invalid";
}

3.5 DOM Manipulation — Getting & Setting Elements


// Get element by id
var el = [Link]("myId");

// Get its value (for input fields)


var val = [Link]("name").value;

// Set text content


[Link]("result").innerText = "Hello";

// Set HTML content (can include tags)


[Link]("result").innerHTML = "<b>Total: ■500</b>";

// Show/hide
[Link]("msg").[Link] = "block";
[Link]("msg").[Link] = "none";

3.6 Functions
// Named function
function calcSalary() {
var basic = parseFloat([Link]("basic").value);
if (isNaN(basic) || basic <= 0) {
alert("Enter valid salary!"); return;
}
var hra = (basic > 20000) ? basic * 0.05 : basic * 0.04;
var total = basic + hra;
[Link]("result").innerHTML =
"Basic: ■" + [Link](2) + "<br>" +
"HRA: ■" + [Link](2) + "<br>" +
"<b>Total: ■" + [Link](2) + "</b>";
}
■ EXAM TIP: toFixed(2) rounds to 2 decimal places. isNaN() checks if value is Not a Number.

3.7 Loops
// For loop
for (var i = 0; i <= 100; i++) {
// code
}

// While loop
var i = 0;
while (i < 10) { i++; }

// forEach (for arrays)


[Link](function(item) { [Link](item); });

3.8 Arrays & Strings


// Array
var arr = [10, 20, 30, 40, 50];
[Link](60); // add to end
[Link]; // 6
arr[0]; // 10

// String operations
var str = "12345";
[Link](''); // ["1","2","3","4","5"]
[Link]('').reverse().join(''); // "54321" — reverse string/number!
parseInt("54321"); // 54321 (removes leading zeros)

3.9 Form Validation with Regular Expressions


function validateForm() {
var valid = true;

// Name: only letters, min 3 chars


var name = [Link]("name").[Link]();
if (!/^[A-Za-z]{3,}$/.test(name)) {
[Link]("nameErr").innerText = "Name: letters only, min 3 chars";
valid = false;
}

// Email: must have @ and .


var email = [Link]("email").[Link]();
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (![Link](email)) {
[Link]("emailErr").innerText = "Enter valid email";
valid = false;
}

// Password: min 6 chars


var pwd = [Link]("pwd").value;
if ([Link] < 6) {
[Link]("pwdErr").innerText = "Min 6 characters";
valid = false;
}

// Confirm password match


var cpwd = [Link]("cpwd").value;
if (cpwd !== pwd) {
[Link]("cpwdErr").innerText = "Passwords do not match";
valid = false;
}

// Phone: exactly 10 digits


var phone = [Link]("phone").[Link]();
if (!/^[0-9]{10}$/.test(phone)) {
[Link]("phoneErr").innerText = "10 digits only";
valid = false;
}

// Password 5-10 chars


if (!/^.{5,10}$/.test(pwd)) { ... }

if (valid) {
[Link]("successMsg").innerText = "Registration Successful!";
}
return false; // prevent page reload
}
★ IMPORTANT: Regular Expressions Cheatsheet: ^[A-Za-z]+$ = only letters ^[0-9]{10}$ = exactly 10 digits ^.{5,10}$ =
5 to 10 any chars ^[^@]+@[^@]+\.[^@]+$ = valid email

3.10 Counter (Increment/Decrement)


var count = 0;

function increment() {
count++;
[Link]("counter").innerText = count;
}
function decrement() {
count--;
[Link]("counter").innerText = count;
}

// HTML:
// <h1 id="counter" style="font-size:50px; color:red;">0</h1>
// <button onclick="increment()">Add Count</button>
// <button onclick="decrement()">Delete Count</button>

3.11 Prime Numbers in Interval


function isPrime(n) {
if (n < 2) return false;
for (var i = 2; i <= [Link](n); i++) {
if (n % i === 0) return false;
}
return true;
}

function findPrimes() {
var start = parseInt([Link]("start").value);
var end = parseInt([Link]("end").value);
var primes = [];
for (var i = start; i <= end; i++) {
if (isPrime(i)) [Link](i);
}
[Link]("result").innerText =
"Primes: " + ([Link] ? [Link](", ") : "None");
}
CHAPTER 4: AngularJS — MVC Framework

4.1 What is AngularJS?


AngularJS (version 1.x) is a JavaScript MVC framework by Google that extends HTML with new attributes. It
allows two-way data binding, dependency injection, routing, and more. It runs entirely in the browser.
■ NOTE: Always include the CDN script:

4.2 Core Concepts


ng-app → Defines the AngularJS application boundary (on <html> tag)
ng-controller → Binds a controller to a section of HTML
ng-model → Two-way data binding (input ↔ $scope variable)
ng-init → Initializes variables inline in HTML
ng-repeat → Loops over an array to create repeated elements
ng-click → Calls a function on click
ng-show → Shows element if expression is true
ng-hide → Hides element if expression is true
ng-if → Adds/removes element from DOM
ng-disabled → Disables element if expression is true
ng-pattern → Validates input against regex
{{ expr }} → Expression — displays value of variable/expression

4.3 Basic AngularJS App Structure


<!DOCTYPE html>
<html ng-app="myApp"> <!-- ng-app on <html> -->
<head>
<script src="[Link]"></script>
</head>
<body ng-controller="MyCtrl"> <!-- ng-controller on body or div -->
<p>{{ greeting }}</p>

<script>
[Link]('myApp', [])
.controller('MyCtrl', function($scope) {
$[Link] = "Hello, AngularJS!";
});
</script>
</body>
</html>

4.4 ng-init — Variables, Array, Object


<div ng-init="a=10; b=5;
arr=[11,22,33,44,55,66];
obj={Name:'Alice', age:21, city:'Mumbai'}">
<p>Addition: {{ a + b }}</p>
<p>Subtraction: {{ a - b }}</p>
<p>Multiplication: {{ a * b }}</p>
<p>Division: {{ a / b }}</p>
<p>5th element: {{ arr[4] }}</p> <!-- index 4 = 5th element -->
<p>Name: {{ [Link] }}</p>
<p>Age: {{ [Link] }}</p>
</div>
■ EXAM TIP: Array index starts at 0. So 5th element is arr[4]. This exact question is Q1(a) in the 2024-25 paper.
4.5 ng-repeat — Displaying Lists & Tables
<!-- In Controller -->
$[Link] = [
{Name:'Alice', Department:'HR', Experience: 3},
{Name:'Bob', Department:'IT', Experience: 5},
];

<!-- In HTML -->


<tr ng-repeat="emp in employees">
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
</tr>

<!-- With filter -->


<tr ng-repeat="emp in employees | filter:{Department: deptFilter}">

4.6 Filters in AngularJS


{{ price | currency }} → $1,234.56
{{ name | uppercase }} → ALICE
{{ name | lowercase }} → alice
{{ arr | orderBy:'name' }} → sorted ascending
{{ arr | orderBy:'name':true }} → sorted descending
{{ arr | filter:'search' }} → filtered by value
{{ arr | filter:{key:val} }} → filtered by property

4.7 Sorting Table (orderBy filter)


<button ng-click="reverse=false">Sort A-Z</button>
<button ng-click="reverse=true">Sort Z-A</button>

<tr ng-repeat="p in persons | orderBy:'Firstname':reverse">


<td>{{ [Link] }}</td>
</tr>

<!-- Controller -->


$[Link] = false;
$[Link] = [
{Firstname:'Priya', Lastname:'Sharma', Age:24},
{Firstname:'Arun', Lastname:'Singh', Age:32},
];

4.8 Services & Dependency Injection


A Service is a reusable singleton object. You define it once, then inject it into controllers using Dependency
Injection (DI). The framework automatically provides the service to the controller.
var app = [Link]('ManipulatorApp', []);

// Define service
[Link]('NumberService', function() {
[Link] = function(n) { return n * n; };
[Link] = function(n) {
if (n <= 1) return 1;
return n * [Link](n - 1);
};
});

// Inject into controller


[Link]('SquareController', function($scope, NumberService) {
$[Link] = 0;
$[Link] = '';
$[Link] = function() {
$[Link] = [Link]($[Link]);
};
});
■ NOTE: Dependency Injection = passing a service as a parameter to a controller function. AngularJS reads the
parameter name and automatically provides the matching service.

4.9 Math Calculator with DI (MathService)


[Link]('MathService', function() {
[Link] = function(a,b){ return a + b; };
[Link] = function(a,b){ return a - b; };
[Link] = function(a,b){ return a * b; };
[Link] = function(a,b){ return b === 0 ? "Div by zero" : a / b; };
});

[Link]('CalcCtrl', function($scope, MathService) {


$scope.a = 0; $scope.b = 0; $[Link] = '';
$[Link] = function(op) {
$[Link] = MathService[op]($scope.a, $scope.b);
};
});

<!-- HTML -->


<button ng-click="calc('add')">Add</button>
<button ng-click="calc('sub')">Subtract</button>

4.10 AngularJS Form Validation


<form name="myForm" novalidate>
First Name:
<input type="text" name="fname" ng-model="[Link]" required>
<span ng-show="[Link].$touched && [Link].$[Link]">
First Name is required.
</span>

Email:
<input type="email" name="email" ng-model="[Link]" required>
<span ng-show="[Link].$touched && [Link].$[Link]">
Email is required.
</span>
<span ng-show="[Link].$touched && [Link].$[Link]">
Enter a valid email.
</span>

Mobile (10 digits):


<input type="text" name="mobile" ng-model="[Link]"
ng-pattern="/^[0-9]{10}$/">
<span ng-show="[Link].$touched && [Link].$[Link]">
Must be exactly 10 digits.
</span>

Age (>=18):
<input type="number" name="age" ng-model="[Link]" required ng-min="18">
<span ng-show="[Link].$touched && [Link].$[Link]">
Age must be >= 18.
</span>

<button ng-disabled="myForm.$invalid">Submit</button>
<p ng-show="myForm.$valid" style="color:green">Form is VALID ✔</p>
</form>
★ IMPORTANT: Key form validation properties: $touched = user interacted with field $[Link] = required field is
empty $[Link] = invalid email format $[Link] = regex pattern not matched $[Link] = value below
minimum $invalid = form has errors $valid = all fields valid

4.11 Two-Way Data Binding


User Name: <input type="text" ng-model="[Link]">
User Age: <input type="number" ng-model="[Link]">
Courses:
<input type="checkbox" ng-model="[Link]"> Python
<input type="checkbox" ng-model="[Link]"> Java

<button ng-click="submit()">Submit</button>

<div ng-show="submitted">
<table>
<tr><td>Name</td><td>{{ [Link] }}</td></tr>
<tr><td>Age</td><td>{{ [Link] }}</td></tr>
</table>
</div>
Two-way binding means the HTML and the JavaScript $scope variable stay in sync automatically. Change the
input → $scope updates. Change $scope → input updates.

4.12 Food Order Table with Total


$[Link] = [
{name:'Pizza', price:100, qty:1},
{name:'Pasta', price:150, qty:1},
{name:'Bread', price:170, qty:1},
{name:'Sandwich',price:200, qty:1},
{name:'Ice Cream',price:250,qty:1}
];
$[Link] = 0;
$[Link] = function() {
$[Link] = 0;
$[Link](function(item) {
$[Link] += [Link] * [Link];
});
};
CHAPTER 5: [Link] — Server-Side JavaScript

5.1 What is [Link]?


[Link] is a runtime environment that lets you run JavaScript on the server (outside the browser). It uses an
event-driven, non-blocking I/O model making it fast and efficient. [Link] is used for building APIs, web servers,
command-line tools, and database operations.

5.2 User-Defined Modules ([Link])


// [Link] — MODULE file
function area(l, b) {
return l * b;
}
function perimeter(l, b) {
return 2 * (l + b);
}
[Link] = { area, perimeter }; // export functions

// [Link] — MAIN file


const rect = require('./rectangle'); // import module (use ./ for local)

const length = 8, breadth = 5;


[Link]("Area :", [Link](length, breadth)); // 40
[Link]("Perimeter :", [Link](length, breadth)); // 26
■ NOTE: [Link] makes functions/objects available to other files. require() imports them. Use ./ for files in
same folder.

5.3 File System Module (fs)


const fs = require('fs');

// Write/Create a file
[Link]('[Link]', 'Hello from [Link]!', function(err) {
if (err) throw err;
[Link]("File created successfully!");

// Read the file (inside callback to ensure it exists)


[Link]('[Link]', 'utf8', function(err, data) {
if (err) throw err;
[Link]("File contents:", data);
});
});
■ EXAM TIP: [Link] uses callbacks (functions passed as arguments) because I/O is asynchronous. Always handle
errors with if(err) throw err.

5.4 MySQL Database with [Link]


const mysql = require('mysql');

// Step 1: Create connection


const con = [Link]({
host: 'localhost',
user: 'root',
password: ''
});
// Step 2: Connect
[Link](function(err) {
if (err) throw err;
[Link]("Connected to MySQL!");

// Step 3: Create database


[Link]("CREATE DATABASE IF NOT EXISTS ProductDB", function(err) {
if (err) throw err;

// Step 4: Use database


[Link]("USE ProductDB", function(err) {
if (err) throw err;

// Step 5: Create table


const createTable = `
CREATE TABLE IF NOT EXISTS products (
ProductID INT AUTO_INCREMENT PRIMARY KEY,
ProductName VARCHAR(100),
Category VARCHAR(50),
Price DECIMAL(10,2),
Stock INT
)`;
[Link](createTable, function(err) {
if (err) throw err;

// Step 6: Insert records


const inserts = [
['Laptop', 'Electronics', 55000, 10],
['Mouse', 'Electronics', 800, 50],
['Desk Chair','Furniture', 12000, 8],
['Notebook', 'Stationery', 50,200],
['USB Hub', 'Electronics', 1500, 30]
];
const sql = "INSERT INTO products (ProductName,Category,Price,Stock) VALUES ?";
[Link](sql, [inserts], function(err) {
if (err) throw err;
[Link]("5 products inserted.");
[Link](); // always close connection
});
});
});
});
});
★ IMPORTANT: Database patterns in exams: 1. ProductDB → products table (ProductID, ProductName, Category,
Price, Stock) 2. EmployeeDB → employee table (Eid, Ename, Designation, Salary) 3. StudentDB → student table (Rno,
Sname, Percentage)

5.5 EmployeeDB (2023-24 Q1a)


// Same pattern, different table
const createTable = `
CREATE TABLE IF NOT EXISTS employee (
Eid INT AUTO_INCREMENT PRIMARY KEY,
Ename VARCHAR(100),
Designation VARCHAR(50),
Salary DECIMAL(10,2)
)`;

const data = [
['Alice', 'Developer', 60000],
['Bob', 'Manager', 80000],
['Carol', 'Designer', 55000],
['David', 'Tester', 50000],
['Eve', 'HR', 45000]
];
[Link]("INSERT INTO employee (Ename,Designation,Salary) VALUES ?", [data], ...)

5.6 StudentDB (Re-Exam Q1b)


// Student table
const createTable = `
CREATE TABLE IF NOT EXISTS student (
Rno INT AUTO_INCREMENT PRIMARY KEY,
Sname VARCHAR(100),
Percentage DECIMAL(5,2)
)`;

// After insert, SELECT and display:


[Link]("SELECT * FROM student", function(err, results) {
[Link](r => {
[Link](`Rno: ${[Link]}, Name: ${[Link]}, %: ${[Link]}`);
});
});
■ NOTE: Template literals use backticks (`) and ${} for variable interpolation. Very common in [Link] code.
CHAPTER 6: Complete PYQ Quick-Reference

6.1 Topic-to-Question Mapping


The table below maps every important topic to which exam paper & question it appeared in, so you can prioritize:

Topic Paper(s) Marks

AngularJS: ng-init (vars, array, object) 2024-25 Q1a 10

HTML: image, checkbox, lists, sub/sup, table 2024-25 Q1b 10

JS: Salary calculator (HRA) 2024-25 Q2a 10

AngularJS: Employee table with filter 2024-25 Q2b / 2023-24 10

AngularJS: ManipulatorApp (NumberService) 2024-25 Q3a 10

HTML: Personal details form 2024-25 Q3b 10

AngularJS: Form validation 2024-25 Q4a / Re-Exam Q5a 10

HTML+CSS: About Me page (external CSS) 2024-25 Q4b 10

[Link]: [Link] module 2024-25 Q5a / Re-Exam Q6a 10

CSS: 3 colored boxes (dotted, orange bg) 2024-25 Q5b 10

[Link]: ProductDB MySQL 2024-25 Q6a 10

HTML: Frames (main + 3 sub frames) 2024-25 Q6b / Re-Exam 10

CSS: Blue gradient register form 2024-25 Q7a 10

JS: Registration form validation 2024-25 Q7b / 2023-24 Q3b 10

[Link]: EmployeeDB MySQL 2023-24 Q1a 10

HTML: Form with scrolling success page 2023-24 Q1b 10

HTML+CSS: New Arrivals book list 2023-24 Q2a 10

AngularJS: Student marks list 2023-24 Q2b 10

AngularJS: Table sort A-Z / Z-A 2023-24 Q3a 10

JS: Switch-case math calculator 2023-24 Q4a 10

AngularJS: DI Math Calculator 2023-24 Q5a / Re-Exam Q6b 10

HTML: Online order table (colspan/rowspan) 2023-24 Q5b 10

[Link]: Create and read a file 2023-24 Q6a 10

JS: Increment/Decrement counter 2023-24 Q6b 10

HTML+CSS: America Amazing Tour (20 marks) 2023-24 Q7 20

HTML+CSS: Online Courses web layout Re-Exam Q1a 10

[Link]: StudentDB MySQL Re-Exam Q1b 10

JS: Reverse a number Re-Exam Q2a 10

AngularJS: Food Order Table Re-Exam Q2b 10

AngularJS: Two-way binding registration Re-Exam Q4b 10


HTML: NMIMS Campus Frames+iframes Re-Exam Q5b 10

HTML+CSS: ALtech Web Design (20 marks) Re-Exam Q7 20

6.2 Most Repeated Patterns (Must Know)


These patterns appear across multiple papers — master them first:

• AngularJS employee/student table with ng-repeat and filter — 3 papers


• AngularJS form validation with $[Link], $[Link], $[Link] — 3 papers
• JavaScript form validation using regex — 3 papers
• [Link] MySQL database creation and insertion — 3 papers
• CSS styled forms (gradient background, rounded corners, hover) — 2 papers
• HTML frames/framesets (main + sub frames) — 2 papers
• [Link] rectangle module (area + perimeter) — 2 papers
CHAPTER 7: Key Theory — Definitions & Concepts

7.1 What is a Web Application?


A web application is software that runs on a web server and is accessed through a web browser over the internet.
It consists of a client side (HTML, CSS, JS in browser) and server side ([Link], PHP, etc. on server).

7.2 Client-Side vs Server-Side


Client-Side (Front-End):
- Runs in the user's BROWSER
- Languages: HTML, CSS, JavaScript, AngularJS
- Handles: UI, form validation, user interaction

Server-Side (Back-End):
- Runs on the SERVER
- Languages: [Link], PHP, Python, Java
- Handles: Database operations, business logic, authentication

7.3 MVC Architecture (AngularJS)


Model → Data ($scope variables, services)
View → HTML template (what user sees)
Controller → JavaScript logic (connects model & view)

Example:
Model: $[Link] = [...]
View: <tr ng-repeat="emp in employees">
Controller: .controller('EmpCtrl', function($scope) {...})

7.4 HTTP Methods


GET → Retrieves data from server; parameters in URL
Example: form action="[Link]" method="get"
POST → Sends data to server; parameters in body (more secure)
Example: form method="post"
PUT → Update existing resource
DELETE → Remove resource

7.5 DOM (Document Object Model)


DOM is a tree-like representation of an HTML page. JavaScript uses the DOM to access and modify HTML
elements. Every tag is a 'node' in the tree. [Link]() is the most common way to access nodes.

7.6 Synchronous vs Asynchronous ([Link])


Synchronous: code runs line by line; each step waits for previous
[Link]("1");
[Link]("2"); // runs after line above

Asynchronous: doesn't wait; uses callbacks


[Link]('[Link]', function(err, data) {
// this runs AFTER file is read, not immediately
[Link](data);
});
[Link]("This may print BEFORE file is read!");
■ NOTE: [Link] is non-blocking by default. Database queries, file operations, and HTTP requests are all
asynchronous, which is why they use callback functions.

7.7 Two-Way Data Binding (AngularJS)


Traditional HTML: change input → must manually read with JS. Two-way binding: change input → model updates
automatically. Change model → input updates automatically. Achieved with ng-model directive in AngularJS.

7.8 Dependency Injection (AngularJS)


DI is a design pattern where an object receives its dependencies from an external source rather than creating them
itself. In AngularJS, services are injected into controllers by listing them as function parameters. AngularJS reads
the parameter names and provides matching services automatically.

7.9 CSS Box Model


Every HTML element is a rectangular box with 4 layers (from inside out): Content → Padding (space inside border)
→ Border (the visible line) → Margin (space outside border). box-sizing: border-box makes width include padding
and border.

7.10 Responsive Design


A website that adapts to different screen sizes (desktop, tablet, mobile). Achieved using CSS media queries,
flexible units (%, vw, vh), Flexbox, and CSS Grid.

7.11 CSS Flexbox Quick Reference


Parent container:
display: flex;
flex-direction: row; /* row (default) or column */
justify-content: center; /* main axis alignment */
align-items: center; /* cross axis alignment */
flex-wrap: wrap; /* allow wrapping */
gap: 20px; /* space between items */

Child items:
flex: 1; /* grow to fill available space */

7.12 SQL Basics (for [Link] Questions)


CREATE DATABASE IF NOT EXISTS dbName;
USE dbName;
CREATE TABLE IF NOT EXISTS tableName (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
salary DECIMAL(10,2)
);
INSERT INTO tableName (name, salary) VALUES ('Alice', 50000);
INSERT INTO tableName (name, salary) VALUES ? -- bulk insert
SELECT * FROM tableName;
SELECT * FROM tableName WHERE salary > 50000;
UPDATE tableName SET salary=60000 WHERE id=1;
DELETE FROM tableName WHERE id=1;
CHAPTER 8: Full 20-Mark Questions

8.1 America Amazing Tour — Landing Page (Q7, 2023-24)


<!DOCTYPE html>
<html>
<head>
<title>Eforlad – America Amazing Tour</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; }

nav {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0,0,0,0.7);
padding: 15px 30px;
position: fixed; width: 100%; top: 0; z-index: 100;
}
.logo { color: white; font-size: 22px; font-weight: bold; }
nav ul { list-style: none; display: flex; gap: 20px; }
nav ul li a { color: white; text-decoration: none; font-size: 14px; }
nav ul li a:hover { color: #f39c12; }

.hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('[Link]') center/cover no-repeat;
height: 100vh;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
color: white; text-align: center; padding-top: 60px;
}
.hero h1 { font-size: 48px; letter-spacing: 3px; }
.hero h2 { font-size: 56px; font-weight: 900; }
.read-more {
margin-top: 20px; padding: 12px 30px;
background: transparent; border: 2px solid white;
color: white; border-radius: 30px; cursor: pointer;
}
.read-more:hover { background: white; color: black; }

.find-tour {
background: white; padding: 30px;
max-width: 900px; margin: -40px auto 40px;
border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.find-tour form {
display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
}
.find-tour input, .find-tour select {
padding: 8px; border: 1px solid #ccc;
border-radius: 4px; width: 100%;
}
.search-btn {
grid-column: 3; padding: 10px;
background: #1a237e; color: white;
border: none; border-radius: 4px; cursor: pointer;
}
</style>
</head>
<body>
<nav>
<div class="logo">Eforlad</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div class="hero">
<h1>AMERICA</h1>
<h2>AMAZING TOUR</h2>
<button class="read-more">Read More</button>
</div>
<div class="find-tour">
<h3>Find Your Tour</h3>
<form>
<div><label>Keywords</label>
<input type="text" placeholder="Keywords"></div>
<div><label>Category</label>
<select><option>Adventure</option><option>Cultural</option></select></div>
<div><label>Min Price</label>
<input type="number" placeholder="00.0"></div>
<div><label>Duration</label>
<select><option>Any</option><option>1-3 Days</option></select></div>
<div><label>Date</label><input type="date"></div>
<div><label>Max Price</label>
<input type="number" placeholder="00.0"></div>
<button class="search-btn" type="button">Search</button>
</form>
</div>
</body>
</html>

8.2 ALtech Web Design Page (Q7, Re-Exam 2022-23)


<!DOCTYPE html>
<html>
<head>
<title>ALtech – Web Design</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; }
nav {
display: flex; align-items: center;
justify-content: space-between;
background: #1a1a2e; padding: 12px 30px; flex-wrap: wrap; gap: 10px;
}
.nav-logo { color: #e94560; font-size: 20px; font-weight: bold; }
.nav-links { display: flex; gap: 20px; }
.nav-links a { color: white; text-decoration: none; font-size: 13px; }
.nav-links a:hover { color: #e94560; }
.nav-search { display: flex; gap: 8px; }
.nav-search input { padding: 6px; border: none; border-radius: 4px; }
.nav-search button {
padding: 6px 14px; background: #e94560; color: white;
border: none; border-radius: 4px; cursor: pointer;
}
.hero {
display: flex; justify-content: space-between; align-items: center;
padding: 80px 60px; background: #16213e;
color: white; min-height: 80vh;
}
.hero-left h1 { font-size: 42px; line-height: 1.2; }
.hero-left p { margin: 16px 0; color: #aaa; }
.join-btn {
display: inline-block; padding: 12px 30px;
background: transparent; border: 2px solid #e94560;
color: #e94560; border-radius: 30px; cursor: pointer;
}
.join-btn:hover { background: #e94560; color: white; }
.hero-right {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px; padding: 30px; min-width: 260px;
}
.hero-right input {
width: 100%; padding: 10px; margin-bottom: 14px;
border: 1px solid #555; border-radius: 6px;
background: #0f3460; color: white;
}
.login-btn {
width: 100%; padding: 10px; background: #e94560;
color: white; border: none; border-radius: 6px; cursor: pointer;
}
.login-btn:hover { background: #c0392b; }
</style>
</head>
<body>
<nav>
<div class="nav-logo">ALtech</div>
<div class="nav-links">
<a href="#">Home</a><a href="#">About</a>
<a href="#">Service</a><a href="#">Design</a><a href="#">Contact</a>
</div>
<div class="nav-search">
<input type="text" placeholder="Type to Search">
<button>Search</button>
</div>
</nav>
<div class="hero">
<div class="hero-left">
<h1>Web Design &<br>Development</h1>
<p>Let's Build your Dream Website<br>
Responsive and Modern<br>Cross Browser Compatible</p>
<button class="join-btn">JOIN US</button>
</div>
<div class="hero-right">
<input type="text" placeholder="Enter Email Here">
<input type="password" placeholder="Enter Password Here">
<button class="login-btn">Login</button>
<a href="#" style="color:#aaa;font-size:12px;display:block;
text-align:center;margin-top:10px;">
Don't Have an Account? Sign up here
</a>
</div>
</div>
</body>
</html>
CHAPTER 9: Exam Strategy — How to Get 80-90%

9.1 Exam Pattern


Total: 100 marks | Duration: 3 hours | Q1 is compulsory (20 marks). Attempt any 4 of remaining 6 questions. So 5
questions total × 20 marks each = 100 marks.
★ IMPORTANT: Q1 has two parts (a) and (b), each 10 marks. You MUST attempt Q1. For remaining 6 questions
(Q2–Q7), choose wisely based on your strengths.

9.2 Which Questions to Attempt


Choose questions based on these priorities:
• Q1 (Compulsory): HTML basics + AngularJS ng-init — both are straightforward, score full marks
• Q7 (20 marks): Always an HTML+CSS landing page — high marks, predictable pattern
• Q5: [Link] module + CSS boxes — very formulaic, easy to score
• Q2: JS/HTML + AngularJS — salary calculator pattern repeats
• Q3: AngularJS app/service + HTML form — service/DI pattern is consistent
• Q4: AngularJS form validation + HTML/CSS — validation questions repeat exactly

9.3 Writing Code in Exam — Pro Tips


• Always write at top — 1 free mark point
• Include the AngularJS CDN script tag when asked for AngularJS
• Write novalidate on any form with AngularJS validation
• For [Link] MySQL: always follow the 5-step pattern (connect → create DB → use DB → create table →
insert)
• For CSS forms: always add border-radius, box-shadow, and hover effect — examiners look for these
• Comment your code briefly — shows understanding to examiner
• For 10-mark questions, aim for at least 15-20 lines of code

9.4 Quick Revision Checklist


Before the exam, ensure you can write from memory:
• HTML form with all input types (text, email, password, radio, checkbox, date, select, textarea)
• AngularJS app structure: ng-app, ng-controller, $scope, ng-model, ng-repeat, ng-click
• AngularJS form validation: $[Link], $[Link], $[Link], ng-min, ng-disabled
• AngularJS service definition with [Link]() and injection into controller
• JavaScript validation regex: /^[A-Za-z]+$/, /^[0-9]{10}$/, /^[^\s@]+@[^\s@]+\.[^\s@]+$/
• [Link] MySQL: [Link], [Link], [Link], [Link], require()
• CSS: flexbox, gradient background, border-radius, box-shadow, :hover pseudo-class

9.5 Common Mistakes to Avoid


• Forgetting ng-app on tag — entire AngularJS app won't work
• Forgetting novalidate on AngularJS forms — browser native validation interferes
• Using type='email' when question says 'do not use type=email' — use type='text' with pattern
• Forgetting to close the MySQL connection: [Link]()
• Incorrect array index: 5th element is arr[4], not arr[5]
• Using == instead of === for strict comparison in JavaScript
• Not handling the division by zero case in calculator

9.6 Marks Distribution Summary


Focus areas for maximum ROI (Return on Investment):

Topic Appears in Expected Marks

AngularJS (all topics) Q1a, Q2b, Q3a, Q4a, Q5a, Q6b 30-40

HTML (forms, tables, lists) Q1b, Q3b, Q5b, Q6b 20-30

CSS (styling, layout) Q4b, Q5b, Q7 20-25

JavaScript (validation, calc) Q2a, Q3b, Q6b, Q7b 20-25

[Link] (modules, MySQL, fs) Q5a, Q6a, Q1a(2023) 20-25

Best of luck for your exam! You've got this. ■


Web Programming — SVKM's NMIMS STME

You might also like