Web Tech Notes 🌙

What is HTML? — Basic Syntax ▼

HTML stands for HyperText Markup Language — it's the skeleton 🦴 of every webpage. It tells the browser what content to display and how to structure it.

💡 Analogy Think of HTML as the blueprint of a house — it defines where everything goes. CSS = the paint & decor. JavaScript = the electricity!

📐 Basic Tag Syntax

HTML <tagname>Content goes here</tagname>  <p>This is a paragraph</p>  <br>  <hr>  <img src="photo.jpg">

📌 Key Rules

Most tags come in pairs → opening <tag> and closing </tag>
Closing tags always have a forward slash /
Self-closing tags don't need a closing tag: <br>, <img>, <hr>, <input>
Tags are NOT case-sensitive, but lowercase is best practice
Attributes provide extra info and go inside opening tags

Standard HTML Document Structure ▼

Every HTML page must follow this standard structure. Without it, browsers may render your page incorrectly!

HTML <!DOCTYPE html>  <html lang="en">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title>  <link rel="stylesheet" href="styles.css"> </head> <body>  <h1>Hello World!</h1> <p>This is a paragraph.</p> </body> </html>

🏷️ <!DOCTYPE html>

Tells browser this is HTML5. Must be the very first line. Case insensitive.

🌐 <html>

Root element — wraps absolutely everything. lang attr helps screen readers.

🧠 <head>

Contains metadata (info about the page). Nothing here is visible to users. Links to CSS, JS go here.

👁️ <body>

Contains ALL visible content — headings, paragraphs, images, links, forms, etc.

Basic Text Markup & HTML Styles ▼

📝 Common Text Tags

<h1>–<h6> Headings <p> Paragraph <br> Line Break <strong> Bold <b> Bold <em> Italic <i> Italic <u> Underline <mark> Highlight <small> Small text <del> Strikethrough <sup> Superscript <sub> Subscript <blockquote> Quote <pre> Preformatted <code> Inline code

HTML  <h1>Main Heading</h1> <h2>Chapter Title</h2> <h3>Section Title</h3> <h4>Subsection</h4> <h5>Minor Heading</h5> <h6>Smallest Heading</h6>  <p>Normal, <strong>bold</strong>, <em>italic</em>, <u>underline</u></p> <p><mark>highlighted</mark>, <small>small text</small></p> <p>H<sub>2</sub>O and x<sup>2</sup></p>

🎨 HTML Inline Styles

Add styling directly using the style attribute. This is inline CSS — use sparingly!

HTML <p style="color: blue; font-size: 18px;">Blue 18px text</p> <p style="background-color: yellow; text-align: center;">Centered!</p> <div style="border: 2px solid red; padding: 10px;">Bordered</div>

🎯 Common Style Properties color · background-color · font-size · font-family · text-align · margin · padding · border · width · height

Elements & Attributes ▼

🧱 Elements

The building blocks of HTML. An element = opening tag + content + closing tag.

Examples: <p>, <h1>, <img>, <div>, <span>

🏷️ Attributes

Provide extra information. Always go inside the opening tag. Format: name="value"

HTML  <img src="photo.jpg" alt="A beautiful sunset" width="300" height="200"> <a href="https://google.com" title="Go to Google" target="_blank">Google</a> <p id="intro" class="main-text highlight">Hello!</p>

📋 All Common Attributes

Attribute	Purpose	Example
`id`	Unique identifier for ONE element	`id="header"`
`class`	Group identifier (reusable, multiple)	`class="btn active"`
`src`	Source file path (img, script, iframe)	`src="logo.png"`
`href`	Hyperlink destination	`href="page.html"`
`alt`	Alternative text (accessibility)	`alt="Logo image"`
`title`	Tooltip text on hover	`title="Click here"`
`style`	Inline CSS styling	`style="color:red"`
`width/height`	Element dimensions	`width="300"`
`disabled`	Disables form element	`disabled`
`required`	Field must be filled	`required`
`placeholder`	Hint text in inputs	`placeholder="Name..."`
`value`	Default/submitted value	`value="Submit"`
`target`	Where link opens	`target="_blank"`
`action`	Form submission URL	`action="process.php"`
`method`	Form HTTP method	`method="post"`
`type`	Input/button type	`type="email"`

HTML Layouts — Semantic Elements ▼

HTML5 introduced semantic layout elements — tags that carry meaning about the content they hold, improving accessibility and SEO.

HTML <header>  </header> <nav>  <a href="/">Home</a> | <a href="/about">About</a> </nav> <main> <section>  <article>  </article> </section> <aside>  </aside> </main> <footer>  </footer>  <div class="container">Block container</div> <span class="highlight">Inline container</span>

✅ Semantic vs Non-semantic Semantic: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
Non-semantic: <div>, <span> — they tell us nothing about content

iFrames — Embedding Content ▼

An iFrame (inline frame) embeds another HTML page or external resource within the current page.

HTML  <iframe src="https://www.example.com" width="600" height="400" title="Example site"> </iframe>  <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" allowfullscreen> </iframe>  <iframe src="https://maps.google.com/maps?q=Delhi&output=embed" width="100%" height="450" style="border:0"> </iframe>

⚙️ iFrame Attributes

Attribute	Description
`src`	URL of page to embed
`width/height`	Size in pixels or %
`title`	Accessibility description
`allowfullscreen`	Allows fullscreen mode
`name`	Target name for links
`sandbox`	Security restrictions
loading="lazy"`	Lazy load for performance

Images & Hypertext Links ▼

🖼️ Images

HTML  <img src="photo.jpg"  alt="Sunset at beach"  width="400" height="300" title="Beautiful sunset" loading="lazy">  <img src="photo.jpg" alt="..." style="max-width:100%">  <a href="page.html"><img src="logo.png" alt="Logo"></a>

🔗 Hypertext Links — All 4 Types

HTML  <a href="https://www.google.com" target="_blank">Visit Google</a>  <a href="about.html">About Page</a> <a href="../folder/page.html">Parent folder</a>  <a href="#section-css">Jump to CSS</a> <section id="section-css">CSS content here</section>  <a href="mailto:[email protected]?subject=Hello">Email Us</a>  <a href="tel:+911234567890">Call Us</a>

Lists & Tables ▼

• Unordered List (bullets)

<ul> <li>First item</li> <li>Second item</li> <li> Parent item <ul> <li>Nested</li> </ul> </li> </ul>

1. Ordered List (numbers)

Description List

<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl>

📊 Tables

HTML <table border="1"> <caption>Student Marks</caption>  <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>Rahul</td> <td>21</td> <td>Delhi</td> </tr> <tr> <td colspan="2">Merged Cell</td>  <td rowspan="2">Tall cell</td>  </tr> </tbody> <tfoot> <tr><td colspan="3">Total: 2 students</td></tr> </tfoot> </table>

<table> Container <caption> Title <thead> Header group <tbody> Body group <tfoot> Footer group <tr> Row <th> Header cell (bold) <td> Data cell colspan Merge columns rowspan Merge rows

Forms — Collecting User Input ▼

Forms collect user data and send it to a server for processing. Every interactive website uses forms!

HTML <form action="submit.php" method="post">  <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Enter your name" required>  <input type="email" name="email" required>  <input type="password" name="pwd" minlength="8">  <input type="number" min="1" max="100" step="1">  <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female  <input type="checkbox" name="html" checked> HTML <input type="checkbox" name="css"> CSS  <select name="city"> <option value="">Select city</option> <option value="delhi">Delhi</option> <option value="mumbai">Mumbai</option> </select>  <textarea name="message" rows="4" cols="50"></textarea>  <input type="file" accept=".jpg,.pdf">  <input type="date" name="dob">  <input type="submit" value="Submit"> <input type="reset" value="Clear"> </form>

⌨️ All Input Types

textemailpasswordnumber telurldatetime datetime-localmonthweek radiocheckboxfile rangecolorsearch submitresetbuttonimagehidden

⚡ Dynamic HTML Dynamic HTML (DHTML) combines HTML + CSS + JavaScript for interactive pages: dropdown menus, image slideshows, form validation, animated effects, content changing without page reload.

CSS — Introduction, Need & Basic Syntax ▼

❌ Without CSS Plain, boring pages · Styling mixed into HTML · Hard to maintain · No consistent look across pages · Limited design options

✅ CSS Solves Beautiful designs · Separated concerns · Easy to maintain · Consistent look · Animations · Responsive design

📐 CSS Syntax

CSS selector { property: value; property: value; } /* Parts: */ h1 { /* selector = WHAT to style */ color: blue; /* property: value pair */ font-size: 24px; /* declaration */ text-align: center; /* multiple declarations OK */ } /* entire block = rule */

📎 3 Ways to Add CSS

HTML+CSS /* 1. Inline CSS — directly in element */ <p style="color: red; font-size: 16px;">Red text</p> /* 2. Internal CSS — in <head> section */ <head> <style> p { color: red; } h1 { font-size: 2rem; } </style> </head> /* 3. External CSS — separate .css file (BEST PRACTICE!) */ <head> <link rel="stylesheet" href="styles.css"> </head>

🎯 CSS Selectors

CSS p { } /* Element selector */ .classname { } /* Class selector (.) */ #idname { } /* ID selector (#) */ * { } /* Universal selector */ div p { } /* Descendant selector */ div > p { } /* Direct child selector */ h1, h2, h3 { } /* Group selector */ a:hover { } /* Pseudo-class */ p::first-line{ } /* Pseudo-element */ [type="text"]{ } /* Attribute selector */

CSS — Backgrounds, Manipulating Text & Using Fonts ▼

🎨 Background Properties

CSS body { background-color: lightblue; /* solid color */ background-image: url('bg.jpg'); /* image */ background-repeat: no-repeat; /* repeat | repeat-x | repeat-y */ background-position: center center; /* x y position */ background-size: cover; /* cover | contain | 100px | 50% */ background-attachment: fixed; /* scroll | fixed | local */ /* Shorthand (order matters!) */ background: #fff url('bg.jpg') no-repeat center/cover fixed; } /* CSS Gradients */ .hero { background: linear-gradient(135deg, #FF85A1, #C084FC); background: radial-gradient(circle, #FF85A1, #0D0D1A); }

✏️ Text Properties

CSS p { color: navy; /* text color */ text-align: center; /* left | right | justify */ text-decoration: underline; /* none | overline | line-through */ text-transform: uppercase; /* lowercase | capitalize */ line-height: 1.6; /* space between lines */ letter-spacing: 2px; /* space between characters */ word-spacing: 5px; /* space between words */ text-shadow: 2px 2px 4px #000; /* x y blur color */ text-indent: 30px; /* first line indent */ white-space: nowrap; /* prevent wrapping */ }

🔤 Font Properties

CSS h1 { font-family: Arial, Helvetica, sans-serif; /* fallback chain */ font-size: 24px; /* px | em | rem | % | vw */ font-weight: bold; /* normal | bold | 100–900 */ font-style: italic; /* normal | oblique */ font-variant: small-caps; /* SMALL CAPS */ /* Shorthand: style variant weight size/line-height family */ font: italic bold 16px/1.5 Arial, sans-serif; } /* Google Fonts import */ @import url('https://fonts.googleapis.com/css2?family=Roboto'); /* Web-safe fonts */ /* Arial, Helvetica | Georgia | Times New Roman | Courier New | Verdana */

Borders, Box Model, Margins, Padding, Lists Styling & Positioning ▼

🔲 Borders

CSS div { border: 2px solid black; /* width style color */ border-radius: 10px; /* rounded corners */ border-radius: 50%; /* circle! */ /* Individual sides */ border-top: 1px dotted blue; border-right: 2px dashed green; border-bottom: 3px solid yellow; border-left: 4px double purple; /* border-style options: solid | dashed | dotted | double | groove | ridge | inset | outset */ outline: 2px solid red; /* outside border, doesn't take space */ }

📦 The CSS Box Model

Every HTML element is treated as a rectangular box with 4 layers. Understanding this is essential for layouts!

Margin (space outside the element)

Border (line around element)

Padding (space inside, between border and content)

Content (actual text, image, etc.)

CSS div { width: 200px; height: 100px; /* Padding — space INSIDE */ padding: 20px; /* all 4 sides */ padding: 10px 20px; /* top/bottom left/right */ padding: 10px 20px 15px; /* top left/right bottom */ padding: 10px 20px 15px 25px; /* top right bottom left (clockwise) */ padding-top: 10px; padding-right: 20px; /* Margin — space OUTSIDE */ margin: 10px; /* all sides */ margin: 0 auto; /* center horizontally! */ margin-bottom: 20px; /* Box sizing — include padding&border in width */ box-sizing: border-box; /* modern default, recommended */ box-sizing: content-box; /* old default: width + padding + border */ } /* Total width (content-box) = width + padding*2 + border*2 + margin*2 */

📝 CSS2 Features

Better positioning system (absolute, fixed, relative)
Media types for different devices (@media print, @media screen)
Downloadable fonts (@font-face)
Table layout properties (border-collapse, border-spacing)
Counters and generated content (::before, ::after, content)
Cursor property, outline property

📋 Lists Styling

CSS ul { list-style-type: disc; /* disc | circle | square | none */ list-style-position: inside; /* inside | outside */ list-style-image: url('bullet.png'); /* Shorthand */ list-style: circle inside; } ol { list-style-type: upper-roman; } /* decimal | upper-alpha | lower-alpha | ... */ ul.clean { list-style: none; padding: 0; margin: 0; } /* Remove all bullets */

📍 Positioning Using CSS

Value	Behavior	Offset from
`static`	Default. Normal document flow	N/A
`relative`	Offset from its own normal position	Itself
`absolute`	Removed from flow, positioned relative to nearest positioned ancestor	Positioned parent
`fixed`	Stays in place while scrolling	Viewport
`sticky`	Relative until scroll threshold, then fixed	Viewport

CSS .relative { position: relative; top: 10px; left: 20px; } .absolute { position: absolute; top: 0; right: 0; } .fixed-nav { position: fixed; top: 0; width: 100%; z-index: 999; } .sticky-header { position: sticky; top: 0; } /* sticks on scroll */ /* z-index controls stacking order (higher = on top) */ .modal { z-index: 1000; } .overlay { z-index: 999; }

Working with XML — DTD, Schemas, DOM & SAX ▼

🔣 What is XML?

XML (eXtensible Markup Language) is designed for storing and transporting data. Unlike HTML which displays data, XML describes data with custom tags you define yourself.

HTML	XML
Fixed predefined tags	Custom tags you define
Case insensitive	Case SENSITIVE (`<Name>` ≠ `<name>`)
Some tags can be unclosed	ALL tags MUST be closed
Focuses on presentation	Focuses on data/content
Browser renders it	Parsed by applications

XML <?xml version="1.0" encoding="UTF-8"?>  <bookstore>  <book id="1" category="web">  <title lang="en">Learning XML</title> <author>John Doe</author> <price>29.99</price> <selfClose type="empty"/>  </book> </bookstore>

📄 DTD — Document Type Definition

DTD defines the structure and legal building blocks of an XML document. It's a blueprint — says which elements/attributes are allowed.

XML  <?xml version="1.0"?> <!DOCTYPE bookstore [ <!ELEMENT bookstore (book+)>  <!ELEMENT book (title, author, price)> <!ELEMENT title (#PCDATA)>  <!ELEMENT author (#PCDATA)> <!ELEMENT price (#PCDATA)> <!ATTLIST book id CDATA #REQUIRED>  ]>  <!DOCTYPE bookstore SYSTEM "bookstore.dtd">

✅ XML Schemas (XSD)

XML Schema is a more powerful alternative to DTD. Written in XML itself. Supports data types, namespaces, and complex validation.

XSD <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs:element name="bookstore"> <xs:complexType> <xs:sequence> <xs:element name="book" maxOccurs="unbounded"> <xs:complexType> <xs:sequence> <xs:element name="title" type="xs:string"/> <xs:element name="author" type="xs:string"/> <xs:element name="price" type="xs:decimal"/> </xs:sequence> <xs:attribute name="id" type="xs:integer" use="required"/> </xs:complexType> </xs:element> </xs:sequence> </xs:complexType> </xs:element> </xs:schema>

✅ XSD Advantages over DTD Data type support (integer, decimal, date) · Better validation · Namespace support · Written in XML syntax itself · Object-oriented structure

📊 XSD Data Types xs:string · xs:integer · xs:decimal · xs:boolean · xs:date · xs:time · xs:anyURI

🌲 Document Object Model (DOM)

DOM represents XML/HTML documents as a tree structure in memory, allowing programs to access and modify any part of the document.

📄 Document

└── 🌐 <bookstore> Root Element

├── 📘 <book id="1">

├── <title> → "Learning XML"

├── <author> → "John Doe"

└── <price> → "29.99"

└── 📗 <book id="2">

🔧 DOM Methods

getElementById("id") — Find single element by ID
getElementsByTagName("p") — Find elements by tag (returns list)
getElementsByClassName("cls") — Find by class (returns list)
querySelector(".cls") — First match (CSS selector syntax)
querySelectorAll("p.note") — All matches
createElement("div") — Create new element
appendChild(elem) — Add child at end
removeChild(elem) — Remove child element
setAttribute("attr","val") — Set attribute
getAttribute("src") — Get attribute value

⚡ Parsers — DOM vs SAX

🌳 DOM Parser Loads entire document into memory · Creates tree structure · Allows random access · Can modify document · Good for small-medium files · Slower for large files

⚡ SAX Parser (Simple API for XML) Reads sequentially (line by line) · Event-driven (fires events for start/end tags) · Memory efficient (no tree) · Good for large files · Forward-only, no modification

When to use which?
Use DOM → small/medium files, need to navigate or modify document
Use SAX → very large files, only need to read/extract data once

XHTML, XML in XHTML, Meta Tags, Character Entities & Frames ▼

XHTML (eXtensible HyperText Markup Language) is HTML written according to XML rules. It's stricter, cleaner, and more maintainable than regular HTML.

HTML (Forgiving)	XHTML (Strict)
`<p>text` — unclosed OK	`<p>text</p>` — must close all tags
`<BR>` uppercase OK	`<br />` must be lowercase
`<input type=text>` no quotes	`<input type="text" />` quotes required
Attributes without values allowed	All attributes must have values
Tags can overlap	Tags must be properly nested

XHTML <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>XHTML Page</title> </head> <body> <p>All tags closed and lowercase.</p> <br />  <img src="img.jpg" alt="description" /> </body> </html>

🏷️ Meta Tags — Page Metadata

HTML <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta name="description" content="A web technology study guide">  <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">  <meta name="author" content="Your Name">  <meta http-equiv="refresh" content="30">  <meta http-equiv="refresh" content="5; url=newpage.html">  <meta http-equiv="cache-control" content="no-cache">  <meta property="og:title" content="Web Tech Notes"> <meta property="og:image" content="thumbnail.jpg"> </head>

🔣 Character Entities

Special characters that cannot be typed directly in HTML (reserved or special symbols):

Entity	Symbol	Name
`<`	<	Less than
`>`	>	Greater than
`&`	&	Ampersand
`"`	"	Double quote
`'`	'	Apostrophe
` `	(space)	Non-breaking space
`©`	©	Copyright
`®`	®	Registered trademark
`™`	™	Trademark
`€`	€	Euro sign
`£`	£	Pound sign
`©`	©	Numeric entity (decimal)
`©`	©	Hex entity

🖼️ Frames & Framesets (Legacy HTML)

Frames divide the browser window into multiple independent sections. Deprecated in HTML5 — use iframes instead.

HTML  <!DOCTYPE html> <html> <head><title>Frames Example</title></head>  <frameset cols="25%,75%"> <frame src="menu.html" name="menu" scrolling="no" noresize> <frame src="content.html" name="content"> </frameset>  <frameset rows="20%,60%,20%"> <frame src="header.html"> <frame src="main.html"> <frame src="footer.html"> </frameset>  <a href="page2.html" target="content">Open in content frame</a> </html>

Frames are deprecated in HTML5. Modern alternative: use CSS Grid/Flexbox for layouts, and <iframe> for embedding specific external content.

Introduction to JavaScript — Client-side Scripting ▼

JavaScript is a programming language that runs in web browsers, making websites interactive and dynamic. It's the language of the web!

🌟 Analogy HTML = Skeleton 🦴 CSS = Skin 🎨 JavaScript = Muscles 💪 that make things move!

⚡ Client-side means... Code runs in the user's browser, not on the server. Makes sites faster — no round-trip to server for every interaction!

🔤 JavaScript in HTML — 3 Ways

JS /* 1. Inline — directly in HTML element */ <button onclick="alert('Hello!')">Click me</button> /* 2. Internal — inside <script> tag */ <script> document.getElementById("demo").innerHTML = "Hello!"; </script> /* 3. External — separate .js file (BEST PRACTICE) */ <script src="app.js"></script> /* Place <script> just before </body> for faster page load */

📦 Variables — var, let, const

JS var name = "Rahul"; // Old. Function-scoped. Avoid! let age = 21; // Modern. Block-scoped. Re-assignable. const PI = 3.14159; // Block-scoped. CANNOT be reassigned. // let vs const let score = 0; score = 10; // ✅ OK const MAX = 100; // MAX = 200; // ❌ ERROR! console.log(name); // Output to browser console document.write(age); // Write to page (rarely used)

Objects in JavaScript ▼

Objects are containers that group related data and functions. Like a person — they have properties (name, age) and actions (talk, walk).

JS // Object literal — most common way let person = { name: "Rahul", // property: value age: 21, city: "Delhi", isStudent: true, hobbies: ["coding", "music"], // array as value address: { // nested object street: "MG Road", pin: 110001 }, greet: function() { // method (function in object) return "Hello, I'm " + this.name; // 'this' = current object }, sayAge() { // ES6 shorthand method return "I'm " + this.age; } }; // Accessing properties console.log(person.name); // dot notation: "Rahul" console.log(person["age"]); // bracket notation: 21 console.log(person.address.pin); // nested: 110001 console.log(person.greet()); // call method // Add / modify properties person.email = "[email protected]"; // add new person.age = 22; // modify delete person.city; // remove property // Check property exists console.log("name" in person); // true // Loop through properties for(let key in person) { console.log(key + ": " + person[key]); }

Primitives, Operations & Expressions ▼

🧩 Primitive Data Types

Type	Example	Notes
Number	`25`, `3.14`, `-7`, `Infinity`, `NaN`	Only ONE number type (unlike Java)
String	`"Hello"`, `'World'`, `Template`	Single, double, or backtick quotes
Boolean	`true`, `false`	Lowercase only
Undefined	`let x;`	Declared but no value assigned
Null	`let y = null;`	Intentionally empty
BigInt	`9007199254740991n`	Very large integers
Symbol	`Symbol("id")`	Unique identifiers

JS // typeof operator — check data type typeof 42 // "number" typeof "hello" // "string" typeof true // "boolean" typeof undefined // "undefined" typeof null // "object" ← known JS bug! typeof [] // "object" typeof {} // "object" typeof function(){} // "function" // Type conversion Number("42") // 42 String(42) // "42" Boolean(0) // false (falsy) Boolean("hello") // true (truthy) parseInt("42px") // 42 parseFloat("3.14") // 3.14

🔢 All Operations

JS // Arithmetic operators let a = 10, b = 3; a + b // 13 addition a - b // 7 subtraction a * b // 30 multiplication a / b // 3.33 division a % b // 1 modulus (remainder) a ** b // 1000 exponentiation a++ // post-increment (use then add) ++a // pre-increment (add then use) a-- // post-decrement // Assignment operators a += 5; // a = a + 5 a -= 2; // a = a - 2 a *= 3; // a = a * 3 a /= 2; // a = a / 2 a **= 2; // a = a ** 2 // Comparison operators (return boolean) a == b // equal value (5 == "5" → true, type coercion!) a === b // strict equal (value AND type, 5 === "5" → false) a != b // not equal a !== b // strict not equal a > b a < b a >= b a <= b // Logical operators (a > 5) && (b < 10) // AND → true only if BOTH true (a > 5) || (b > 10) // OR → true if AT LEAST ONE true !(a > 5) // NOT → inverts boolean // String operators "Hello" + " World" // "Hello World" (concatenation) `Hello ${name}!` // Template literal (ES6) // Ternary (conditional) operator let grade = score >= 60 ? "Pass" : "Fail"; // Nullish coalescing (ES2020) let name2 = username ?? "Guest"; // use username if not null/undefined // Optional chaining (ES2020) let city = user?.address?.city; // safe - won't throw if undefined

Control Statements — If/Else, Switch, Loops ▼

🔀 If-Else Statements

JS let marks = 85; // if-else if-else chain if (marks >= 90) { console.log("Grade A 🌟"); } else if (marks >= 75) { console.log("Grade B ✅"); } else if (marks >= 60) { console.log("Grade C"); } else { console.log("Grade D ❌"); }

🔄 Switch Statement

JS let day = "Monday"; switch(day) { case "Monday": console.log("Start of week 😤"); break; // MUST break or falls through! case "Friday": console.log("TGIF! 🎉"); break; case "Saturday": case "Sunday": // fall-through: both hit same code console.log("Weekend! 😴"); break; default: // if no case matches console.log("Regular day"); }

🔁 All Loop Types

JS // 1. for loop — when you know iteration count for(let i = 1; i <= 5; i++) { if(i === 3) continue; // skip iteration 3 if(i === 5) break; // stop at 5 console.log("Count: " + i); } // 2. while loop — while condition is true let count = 1; while(count <= 5) { console.log(count); count++; } // 3. do-while — executes AT LEAST ONCE let num = 0; do { console.log(num); num++; } while(num < 3); // 4. for...of — iterate array values (ES6) let fruits = ["apple", "banana", "mango"]; for(let fruit of fruits) { console.log(fruit); } // 5. for...in — iterate object keys let person = { name:"Rahul", age:21 }; for(let key in person) { console.log(key + ": " + person[key]); }

Arrays — Working with Lists ▼

Arrays are like numbered boxes — they store multiple values in a single variable. Index starts at 0!

JS // Creating arrays let fruits = ["apple", "banana", "orange"]; let numbers = [1, 2, 3, 4, 5]; let mixed = ["text", 42, true, null, {id:1}]; // can mix types // Accessing elements (0-indexed!) fruits[0] // "apple" fruits[1] // "banana" fruits[2] // "orange" fruits[fruits.length - 1] // last element // Modifying elements fruits[0] = "mango"; // replace "apple" // ===== IMPORTANT ARRAY METHODS ===== fruits.push("grape"); // add to END fruits.pop(); // remove from END, returns it fruits.unshift("kiwi"); // add to BEGINNING fruits.shift(); // remove from BEGINNING fruits.length // get size (not a method!) fruits.splice(1, 2); // remove 2 items starting at index 1 fruits.splice(1, 0, "mango"); // insert at index 1 fruits.slice(1, 3); // copy from index 1 to 2 (non-destructive) fruits.indexOf("banana") // returns index, -1 if not found fruits.includes("mango") // returns true/false fruits.join(", ") // array → "apple, banana, orange" fruits.reverse() // reverses in place fruits.sort() // sorts alphabetically (or by callback) // Higher-order array methods (ES6) let doubled = numbers.map(n => n * 2); // [2,4,6,8,10] let evens = numbers.filter(n => n % 2 === 0); // [2,4] let sum = numbers.reduce((acc, n) => acc + n, 0); // 15 let found = numbers.find(n => n > 3); // 4 (first match) numbers.forEach(n => console.log(n)); // loop (no return value) numbers.some(n => n > 4) // true (at least one) numbers.every(n => n > 0) // true (all positive)

Functions — Reusable Code Blocks ▼

Functions are reusable blocks of code — like a recipe. Write once, use many times!

JS // 1. Function Declaration (hoisted - can be called before definition) function greet(name) { return "Hello, " + name + "!"; } console.log(greet("Priya")); // Hello, Priya! // Default parameters (ES6) function greet2(name = "World") { return `Hello, ${name}!`; } greet2(); // Hello, World! greet2("Amit"); // Hello, Amit! // Multiple parameters and return value function add(a, b) { return a + b; } function noReturn() { console.log("hi"); } // returns undefined // Rest parameters (variable number of args) function sum(...nums) { return nums.reduce((a, b) => a + b, 0); } sum(1, 2, 3, 4); // 10 // 2. Function Expression (NOT hoisted) const multiply = function(a, b) { return a * b; }; multiply(4, 5); // 20 // 3. Arrow Function — ES6, concise syntax const double = n => n * 2; // one param, no braces needed const add2 = (a, b) => a + b; // two params const sayHi = () => "Hello!"; // no params const divide = (a, b) => { // multi-line with return if(b === 0) return "Error!"; return a / b; }; // 4. IIFE — Immediately Invoked Function Expression (function() { console.log("Runs immediately!"); })(); // 5. Callback Function function doOperation(a, b, callback) { return callback(a, b); } doOperation(5, 3, add2); // 8 // Closures — function remembers its scope function counter() { let count = 0; return () => ++count; // inner function has access to count } let increment = counter(); increment(); // 1 increment(); // 2 increment(); // 3

Constructors & JavaScript's Own Objects ▼

🏭 Constructors — Object Factories

JS // Constructor function (capitalize by convention) function Student(name, age, course) { this.name = name; this.age = age; this.course = course; this.introduce = function() { return `Hi, I'm ${this.name}, studying ${this.course}`; }; } // Create instances with 'new' let s1 = new Student("Amit", 20, "CS"); let s2 = new Student("Sneha", 19, "Electronics"); console.log(s1.introduce()); // Hi, I'm Amit, studying CS // ES6 Class syntax (syntactic sugar over constructors) class Animal { constructor(name, sound) { this.name = name; this.sound = sound; } speak() { return `${this.name} says ${this.sound}!`; } } class Dog extends Animal { // Inheritance! constructor(name) { super(name, "Woof"); // call parent constructor } fetch() { return "Fetching!"; } } let dog = new Dog("Bruno"); console.log(dog.speak()); // Bruno says Woof!

🧰 JavaScript's Built-in Objects

JS // ===== Date Object ===== let now = new Date(); now.getDate() // day of month (1–31) now.getMonth() // month (0–11!) January=0 now.getFullYear() // year e.g. 2024 now.getDay() // day of week (0=Sun, 6=Sat) now.getHours() // 0–23 now.getTime() // ms since Jan 1 1970 now.toLocaleDateString() // "1/15/2024" let specific = new Date(2024, 0, 15); // Jan 15 2024 // ===== Math Object ===== Math.PI // 3.14159... Math.round(4.7) // 5 Math.floor(4.9) // 4 (round down) Math.ceil(4.1) // 5 (round up) Math.abs(-5) // 5 (absolute value) Math.max(1,3,2) // 3 Math.min(1,3,2) // 1 Math.pow(2,8) // 256 Math.sqrt(16) // 4 Math.random() // 0 to 0.999... Math.floor(Math.random() * 6) + 1 // dice: 1–6 // ===== String Methods ===== let s = "Hello World"; s.length // 11 s.toUpperCase() // "HELLO WORLD" s.toLowerCase() // "hello world" s.indexOf("World") // 6 s.includes("Hell") // true s.slice(0, 5) // "Hello" s.split(" ") // ["Hello", "World"] s.replace("World", "JS") // "Hello JS" s.trim() // remove leading/trailing spaces s.startsWith("He") // true s.padStart(15, "0") // "0000Hello World" s.repeat(3) // "Hello WorldHello WorldHello World"

DOM & Web Browser Environment ▼

DOM = Document Object Model. It's how JavaScript sees, accesses, and modifies the HTML document as a tree of objects.

🌐 window (global browser object)

├── 📄 document

└── <html>

├── <head> → <title> <meta>

└── <body>

├── <div id="app">

├── <h1> "Title"

└── <p> "Content"

└── <button class="btn">

JS // ===== SELECTING ELEMENTS ===== document.getElementById("myBtn") // single element document.getElementsByTagName("p") // HTMLCollection document.getElementsByClassName("btn") // HTMLCollection document.querySelector("#demo") // first match (CSS selector) document.querySelectorAll(".card") // NodeList of all matches // ===== READING/CHANGING CONTENT ===== let el = document.getElementById("demo"); el.innerHTML // get/set HTML content el.textContent // get/set text only (safer) el.innerText // visible text el.innerHTML = "<strong>New!</strong>"; el.textContent = "Just text"; // ===== CHANGING STYLES ===== el.style.color = "red"; el.style.fontSize = "20px"; el.style.display = "none"; // hide element el.style.display = "block"; // show element // ===== CLASSES ===== el.classList.add("active"); el.classList.remove("hidden"); el.classList.toggle("dark"); // add if absent, remove if present el.classList.contains("active"); // true/false // ===== ATTRIBUTES ===== el.getAttribute("src"); el.setAttribute("src", "new.jpg"); el.removeAttribute("disabled"); // ===== CREATE & INSERT ELEMENTS ===== let newDiv = document.createElement("div"); newDiv.textContent = "New element!"; newDiv.classList.add("card"); document.body.appendChild(newDiv); // add to end of body document.body.insertBefore(newDiv, el); // add before el el.remove(); // remove element // ===== EVENTS ===== el.addEventListener("click", function(event) { event.preventDefault(); // stop default (form submit, link) event.stopPropagation(); // stop event bubbling console.log("Clicked! Target: " + event.target.id); }); // Common events: click | dblclick | mouseover | mouseout // keydown | keyup | keypress // submit | change | focus | blur | input | load // ===== BROWSER OBJECTS ===== // Window window.alert("Hello"); window.confirm("Are you sure?"); // returns true/false window.prompt("Enter name:"); // returns input string window.open("url", "_blank"); window.innerWidth; window.innerHeight; // viewport size setTimeout(() => {}, 2000); // run once after delay setInterval(() => {}, 1000); // run repeatedly // Location location.href // current URL location.hostname // domain name location.reload() // refresh page location.href = "https://google.com"; // redirect // History history.back(); // go back history.forward(); // go forward history.go(-2); // go 2 pages back

Forms & Validations ▼

JS // Complete form validation example document.getElementById("myForm") .addEventListener("submit", function(e) { e.preventDefault(); // prevent page reload let name = document.getElementById("name").value.trim(); let email = document.getElementById("email").value.trim(); let password = document.getElementById("password").value; let phone = document.getElementById("phone").value.trim(); let errors = []; // Check required fields if(name === "") errors.push("Name is required"); if(name.length < 2) errors.push("Name too short"); // Email validation if(!validateEmail(email)) errors.push("Invalid email"); // Password strength if(password.length < 8) errors.push("Password min 8 chars"); // Phone validation if(!validatePhone(phone)) errors.push("Invalid phone"); if(errors.length > 0) { document.getElementById("errors").innerHTML = errors.map(e => `<p style="color:red">❌ ${e}</p>`).join(""); } else { alert("Form submitted successfully! ✅"); } }); // Regex validation functions function validateEmail(email) { const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return pattern.test(email); } function validatePhone(phone) { const pattern = /^[0-9]{10}$/; // exactly 10 digits return pattern.test(phone); } function validateURL(url) { const pattern = /^https?:\/\/.+\..+/; return pattern.test(url); } function validateRequired(value) { return value.trim() !== ""; } // Real-time validation document.getElementById("email") .addEventListener("input", function() { const msg = document.getElementById("emailMsg"); if(validateEmail(this.value)) { msg.textContent = "✅ Valid"; msg.style.color = "green"; } else { msg.textContent = "❌ Invalid email"; msg.style.color = "red"; } });

Introduction to JSP — Anatomy & Processing ▼

JSP (Java Server Pages) creates dynamic web pages using Java. Runs on the SERVER. Combines HTML with Java code!

⚡ JavaScript Client-side · Browser · Makes UI interactive · DOM manipulation · No server needed

🖥️ JSP (Java) Server-side · Generates HTML · Database access · Session management · Business logic

🔄 JSP Processing Flow

Write .jsp

→

Translate → Servlet

→

Compile → Bytecode

→

Load & Init

→

Execute jspService()

→

HTML Response

📝 JSP Lifecycle Methods

jspInit() — Called once when JSP is first loaded
jspService() — Called on EVERY request
jspDestroy() — Called when JSP is removed from service

🧬 Anatomy of a JSP Page

JSP <%@ page language="java" contentType="text/html; charset=UTF-8" %> <!DOCTYPE html> <html> <head><title>My JSP</title></head> <body> <%-- JSP Comment (not sent to browser) --%>  <%! /* Declaration block */ %> <% /* Scriptlet block — Java code */ String message = "Hello from JSP!"; int count = 42; %> <p>Message: <%= message %></p> <%-- Expression block --%> <p>Count: <%= count %></p> </body> </html>

📋 JSP Element Types Summary

Element	Syntax	Purpose
Directive	`<%@ ... %>`	Page-level instructions to container
Declaration	`<%! ... %>`	Declare variables and methods
Scriptlet	`<% ... %>`	Any Java code (logic, loops)
Expression	`<%= ... %>`	Output value to HTML (no semicolon!)
Comment	`<%-- ... --%>`	JSP comments (not in output)
Action	`<jsp:... />`	Standard actions (useBean, include)

Declarations, Directives, Expressions & Scriptlets ▼

📌 Declarations — <%! ... %>

Declare variables and methods that belong to the Servlet class (not jspService). Available throughout the entire JSP page.

JSP <%! // Class-level variables int visitCount = 0; String siteName = "My Website"; // Methods public String getCurrentTime() { return new java.util.Date().toString(); } public int factorial(int n) { if(n <= 1) return 1; return n * factorial(n - 1); } %> <h1><%= siteName %></h1> <p>Time: <%= getCurrentTime() %></p> <p>5! = <%= factorial(5) %></p> <p>Visits: <%= ++visitCount %></p>

📋 Directives — <%@ ... %>

Special instructions for the JSP container. Processed at translation time (before execution).

JSP  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*, java.sql.*, java.io.*" session="true" <%-- use session? (default true) --%> buffer="8kb" <%-- output buffer size --%> autoFlush="true" errorPage="error.jsp" <%-- redirect to error page on exception --%> isErrorPage="false" %>  <%@ include file="header.jsp" %> <h1>Main Content</h1> <%@ include file="footer.jsp" %> <%-- Static include: file included at compile time (fast) --%> <%-- vs jsp:include action: includes at runtime (dynamic) --%>  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%-- Then use: <c:if test="${...}">, <c:forEach>, etc. --%>

✨ Expressions — <%= ... %>

Outputs a value directly to HTML. The expression is automatically converted to a String. NO semicolon!

JSP <% String name = "John"; int age = 25; double salary = 50000.50; %> <p>Name: <%= name %></p> <p>Age: <%= age %></p> <p>Salary: $<%= salary %></p> <p>Date: <%= new java.util.Date() %></p> <p>Random: <%= Math.random() %></p> <p>Adult?: <%= age >= 18 ? "Yes" : "No" %></p> <p>Upper: <%= name.toUpperCase() %></p>

💻 Scriptlets — <% ... %>

Embed any Java code for logic, loops, and conditions.

JSP <html><body> <%-- For loop --> <ul> <% for(int i = 1; i <= 5; i++) { %> <li>Item number <%= i %></li> <% } %> </ul> <%-- If-else condition --> <% int hour = java.util.Calendar.getInstance() .get(java.util.Calendar.HOUR_OF_DAY); String greeting; if(hour < 12) greeting = "Good Morning! ☀️"; else if(hour < 18) greeting = "Good Afternoon! 🌤️"; else greeting = "Good Evening! 🌙"; %> <h2><%= greeting %></h2> <%-- Array processing --> <% String[] fruits = {"Apple", "Banana", "Mango", "Orange"}; %> <h3>Fruits:</h3> <% for(String fruit : fruits) { %> <p>• <%= fruit %></p> <% } %> </body></html>

Implicit Objects in JSP ▼

JSP provides 9 pre-built objects automatically available in every JSP page. No need to create them!

Object	Type	Scope	Purpose
`request`	HttpServletRequest	Request	HTTP request data, parameters, headers
`response`	HttpServletResponse	Page	HTTP response, cookies, redirect
`session`	HttpSession	Session	User session data (across multiple pages)
`application`	ServletContext	Application	App-wide data shared by all users
`out`	JspWriter	Page	Output stream — write to response
`page`	Object	Page	Current JSP page instance (= this)
`pageContext`	PageContext	Page	Access to all other implicit objects
`config`	ServletConfig	Page	Servlet config parameters
`exception`	Throwable	Page	Exception info (error pages only)

JSP <%-- request object --> <p>Your IP: <%= request.getRemoteAddr() %></p> <p>Browser: <%= request.getHeader("User-Agent") %></p> <p>Method: <%= request.getMethod() %></p> <p>URL: <%= request.getRequestURL() %></p> <p>Param: <%= request.getParameter("username") %></p> <%-- response object --> <% response.setContentType("text/html"); response.setHeader("Cache-Control", "no-cache"); response.addCookie(new Cookie("user", "john")); // response.sendRedirect("other.jsp"); // redirect %> <%-- out object --> <% out.println("<h1>Hello World!</h1>"); out.print("Current time: " + new java.util.Date()); out.flush(); // force output immediately %> <%-- application object --> <% application.setAttribute("appName", "My Web App"); String appName = (String) application.getAttribute("appName"); // Shared by ALL users/sessions! %>

Using Beans in JSP Pages ▼

JavaBeans are simple Java classes that represent and carry data. They follow specific conventions making them easy to use in JSP.

📌 JavaBean Rules (MUST follow all 4) ① Must have a no-argument public constructor · ② All properties must be private · ③ Must have public getter and setter methods · ④ Should implement Serializable (optional but recommended)

Java // Student.java — A proper JavaBean public class Student implements java.io.Serializable { // Private fields private String name; private int age; private String course; private double marks; // Rule 1: No-argument constructor (required!) public Student() {} // Optional constructor with params public Student(String name, int age, String course) { this.name = name; this.age = age; this.course = course; } // Rule 3: Getter methods (read properties) public String getName() { return name; } public int getAge() { return age; } public String getCourse() { return course; } public double getMarks() { return marks; } // Setter methods (write properties) public void setName(String name) { this.name = name; } public void setAge(int age) { this.age = age; } public void setCourse(String course) { this.course = course; } public void setMarks(double marks) { this.marks = marks; } // Business methods public String getGrade() { if(marks >= 90) return "A"; if(marks >= 75) return "B"; return "C"; } }

JSP <%-- Using beans in JSP with standard actions --> <%-- Create or locate bean --> <jsp:useBean id="student" class="com.myapp.Student" scope="page"/> <%-- Set properties --> <jsp:setProperty name="student" property="name" value="Rahul"/> <jsp:setProperty name="student" property="age" value="20"/> <jsp:setProperty name="student" property="course" value="CS"/> <jsp:setProperty name="student" property="marks" value="85"/> <%-- Auto-set from request params (all at once!) --> <jsp:setProperty name="student" property="*"/> <%-- Get properties --> <html><body> <h1>Student Info</h1> <p>Name: <jsp:getProperty name="student" property="name"/></p> <p>Age: <jsp:getProperty name="student" property="age"/></p> <p>Grade: <%= student.getGrade() %></p> <%-- custom method --> </body></html>

📦 Bean Scopes page — current page only (destroyed after response) · request — current request, even across forward/include · session — user's session (across multiple pages) · application — all users, entire app lifecycle

Cookies & Session Tracking ▼

🍪 Cookies

Small data stored in the user's browser. Sent with every request. Max ~4KB. Not secure for sensitive data. Persist across browser sessions if max-age set.

🔐 Sessions

Data stored on the server. More secure. Browser just stores a session ID (JSESSIONID cookie). Expires when browser closes or timeout.

🍪 Cookie Example — Create, Read, Delete

JSP <% // ===== CREATING COOKIES ===== Cookie userCookie = new Cookie("username", "john_doe"); Cookie themeCookie = new Cookie("theme", "dark"); Cookie langCookie = new Cookie("lang", "en"); // Cookie properties userCookie.setMaxAge(60*60*24*30); // 30 days in seconds userCookie.setPath("/"); // available site-wide userCookie.setHttpOnly(true); // no JS access (security) userCookie.setSecure(true); // HTTPS only // Add cookies to response response.addCookie(userCookie); response.addCookie(themeCookie); response.addCookie(langCookie); %> <% // ===== READING COOKIES ===== Cookie[] cookies = request.getCookies(); String username = ""; String theme = "light"; if(cookies != null) { for(Cookie c : cookies) { if("username".equals(c.getName())) username = c.getValue(); if("theme".equals(c.getName())) theme = c.getValue(); } } %> <h1>Welcome <%= username.isEmpty() ? "Guest" : username %>!</h1> <p>Theme: <%= theme %></p> <% // ===== DELETING A COOKIE ===== Cookie del = new Cookie("username", ""); del.setMaxAge(0); // maxAge=0 deletes it! response.addCookie(del); %>

🔐 Session Tracking Example

JSP <%-- ===== login.jsp ===== --> <% String username = request.getParameter("username"); String password = request.getParameter("password"); // In real app: check against database! if("admin".equals(username) && "pass123".equals(password)) { session.setAttribute("loggedIn", true); session.setAttribute("username", username); session.setAttribute("loginTime", new java.util.Date()); session.setMaxInactiveInterval(30 * 60); // 30 min timeout response.sendRedirect("dashboard.jsp"); } else { out.println("<p style='color:red'>❌ Invalid credentials!</p>"); } %> <%-- ===== dashboard.jsp — protected page ===== --> <% // Security check — MUST be on every protected page! Boolean loggedIn = (Boolean) session.getAttribute("loggedIn"); if(loggedIn == null || !loggedIn) { response.sendRedirect("login.html"); return; } String user = (String) session.getAttribute("username"); java.util.Date t = (java.util.Date) session.getAttribute("loginTime"); %> <h1>Dashboard</h1> <p>Welcome, <%= user %>!</p> <p>Logged in: <%= t %></p> <p>Session ID: <%= session.getId() %></p> <a href="logout.jsp">Logout</a> <%-- ===== logout.jsp ===== --> <% session.removeAttribute("username"); // remove specific attr session.invalidate(); // destroy ENTIRE session response.sendRedirect("login.html"); %>

Connecting to Database in JSP — JDBC ▼

JDBC (Java Database Connectivity) lets JSP communicate with databases like MySQL, Oracle, PostgreSQL.

📊 JDBC Connection Steps

① Load JDBC Driver class

↓

② Establish Connection (URL, user, password)

↓

③ Create Statement or PreparedStatement

↓

④ Execute Query (SELECT) or Update (INSERT/UPDATE/DELETE)

↓

⑤ Process ResultSet

↓

⑥ Close all resources (in finally block!)

JSP <%@ page import="java.sql.*" %> <% // Connection details String url = "jdbc:mysql://localhost:3306/schooldb"; String dbUser = "root"; String dbPass = "password"; Connection conn = null; Statement stmt = null; ResultSet rs = null; try { // ① Load MySQL JDBC driver Class.forName("com.mysql.cj.jdbc.Driver"); // ② Create connection conn = DriverManager.getConnection(url, dbUser, dbPass); // ③ Create statement stmt = conn.createStatement(); // ④ Execute SELECT query rs = stmt.executeQuery("SELECT * FROM students ORDER BY name"); %> <table border="1"> <tr><th>ID</th><th>Name</th><th>Age</th><th>Course</th></tr> <%-- ⑤ Process results --> <% while(rs.next()) { %> <tr> <td><%= rs.getInt("id") %></td> <td><%= rs.getString("name") %></td> <td><%= rs.getInt("age") %></td> <td><%= rs.getString("course") %></td> </tr> <% } %> </table> <% } catch(ClassNotFoundException e) { out.println("<p>❌ Driver not found: " + e.getMessage() + "</p>"); } catch(SQLException e) { out.println("<p>❌ DB Error: " + e.getMessage() + "</p>"); } finally { // ⑥ ALWAYS close in reverse order in finally! try { if(rs != null) rs.close(); if(stmt != null) stmt.close(); if(conn != null) conn.close(); } catch(SQLException e) { e.printStackTrace(); } } %>

🛡️ PreparedStatement — INSERT with Safety

Always use PreparedStatement for INSERT/UPDATE with user data — prevents SQL Injection attacks!

JSP <%@ page import="java.sql.*" %> <% String name = request.getParameter("name"); String ageStr = request.getParameter("age"); String course = request.getParameter("course"); if(name != null && ageStr != null && course != null) { int age = Integer.parseInt(ageStr); Connection conn = null; PreparedStatement pstmt = null; try { Class.forName("com.mysql.cj.jdbc.Driver"); conn = DriverManager.getConnection( "jdbc:mysql://localhost:3306/schooldb", "root", "pass"); // ? placeholders prevent SQL injection! String sql = "INSERT INTO students (name, age, course) VALUES (?, ?, ?)"; pstmt = conn.prepareStatement(sql); pstmt.setString(1, name); // 1-indexed! pstmt.setInt(2, age); pstmt.setString(3, course); int rows = pstmt.executeUpdate(); // returns rows affected if(rows > 0) { out.println("<p style='color:green'>✅ Student added!</p>"); } } catch(Exception e) { out.println("<p style='color:red'>Error: " + e.getMessage() + "</p>"); } finally { try { if(pstmt != null) pstmt.close(); if(conn != null) conn.close(); } catch(SQLException e) {} } } %> <%-- ResultSet methods for reading data: --> <%-- rs.getInt("col"), rs.getString("col"), rs.getDouble("col") --> <%-- rs.getDate("col"), rs.getBoolean("col"), rs.getObject("col") --> <%-- rs.next() (forward), rs.isLast(), rs.getRow() -->

Best Practice: Use a separate DBConnection.java utility class to manage connections, and consider using a Connection Pool (like HikariCP or C3P0) in production apps for better performance!

Complete Web Technology