Internet and Web Technology (CS-504 (A)) Unit 3 Notes

How unit 3 is examined

CSS (need, syntax, ways of using, box model, positioning) and JavaScript (objects, DOM, forms, events, DHTML); the marks sit in the DOM, JavaScript own objects and forms validation, with CSS and events next.

Need for CSS

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Medium weight</span>

Definition. <mark>CSS (Cascading Style Sheets) is a style language that separates the presentation of a web page (colours, fonts, layout) from its HTML content.</mark>

Key points.

CSS separates content from presentation, so HTML holds only structure and one sheet controls the look.
One external sheet linked to many pages makes styles reusable and the site consistent.
Changing one rule changes every page, which makes maintenance easy.
The browser caches the external sheet, so pages load faster and use less bandwidth.
CSS gives layout control (box model, positioning, media queries), improving design and responsiveness.
Disadvantages: browsers render some properties differently, large sheets become complex, and the sheet is an extra download on the first visit.

Answer frame. Definition; advantages 1-5; disadvantages; close with one sheet styling a multi-page site.

Asked: [7 marks] (Nov 2019) Write down the advantages and disadvantages of using style sheets. Asked: [7 marks] (Dec 2020, Nov 2023) Explain about CSS and its advantages in brief. How will CSS improve the web page and website design layout?

Introduction to CSS

Definition. <mark>A CSS rule has a selector that picks HTML elements and a declaration block of property: value pairs that style them.</mark>

Key points.

Selectors choose elements: element (p), class (.note), id (#top), group (h1, h2) and descendant (div p).
Common properties are color, font-family, font-size, margin, padding, border and background.
Styles are applied inline, internal or external.
The box model wraps every element in content, padding, border and margin.
Cascading: when rules conflict, inline beats internal beats external, a more specific selector wins, and a later rule wins a tie.
Inheritance passes properties such as color and font from parent to child.

Answer frame. Open with the definition and rule syntax h1 { color: red; }; list properties; explain selectors, the three ways, box model and cascade; close: CSS styles content without touching the HTML.

Asked: [7 marks] (Dec 2024, Jun 2025) What is CSS? List the CSS properties and explain the concepts with a neat example. Discuss key concepts of CSS and how they style content.

Basic syntax and structure

Definition. <mark>A class selector starts with a dot and styles every element carrying that class; an id selector starts with # and must be unique in the page.</mark>

Key points.

Define with .name { ... } and apply with the class="name" attribute.
An element can carry several classes, class="big red", and gets the styles of all.
A class is reusable, whereas an id is used once; p.note limits the class to paragraphs.

Asked: [7 marks] (Jun 2020) Describe the classes in CSS.

Using CSS

Definition. <mark>CSS can be added in three ways: inline (style attribute), embedded (style element in head) and external (a .css file linked with the link element).</mark>

Key points.

Inline style sets one element's style through the style attribute and has the highest priority, but cannot be reused.
An embedded sheet is written inside <style> in <head> and applies to that one page only, using normal selectors.
Embedded needs no extra download, but its rules are not shared with other pages.
An external sheet is linked with <link rel="stylesheet" href="style.css">, and one file styles any number of pages.
If styles clash, priority is inline, then embedded, then external.

Example. Three pages, one sheet.

index.html, about.html, contact.html: each head has <link rel="stylesheet" href="style.css">
each body: <a href="index.html">Home</a> <a href="about.html">About</a> <a href="contact.html">Contact</a>

Answer frame. Embedded: define, syntax, example, advantages, limits. Three pages: links, common link element, shared style.css.

Asked: [7 marks] (Dec 2020) Design three pages of your homepage and link all of them to a single sheet. Asked: [7 marks] (Dec 2020) Explain embedded style sheet in detail.

Background images

Definition. <mark>The CSS background properties set the colour or image behind an element.</mark>

Key points.

background-color sets a solid colour, and background-image: url("bg.jpg"); places an image.
background-repeat is repeat, repeat-x, repeat-y or no-repeat.
background-position places the image (center top), and background-attachment is scroll or fixed.
Shorthand: background: #fff url(bg.jpg) no-repeat fixed center;.

Asked: [7 marks] (Nov 2019) Describe background properties of CSS.

Colors and properties

Definition. CSS colour properties set text and background colour.

Key points.

color sets text colour and background-color the background.
Values are names (red), hex (#ff0000), rgb(255,0,0) or rgba() with transparency.

Manipulating texts

Definition. Text properties control alignment and decoration of text.

Key points.

text-align is left, right, center or justify; text-decoration is underline or none.
text-transform is uppercase or lowercase; line-height controls spacing.

Using fonts (usingfonts)

Definition. Font properties choose the typeface, size and style of text.

Key points.

font-family: Arial, sans-serif; lists a font with fallbacks.
font-size uses px, em or %; font-weight is bold; font-style is italic; @font-face loads a web font.

Borders and boxes

Definition. <mark>The CSS box model treats every element as a box made of content, padding, border and margin, from the inside out.</mark>

Diagram. <figure class="ds-fig" style="margin:1.4rem 0;overflow-x:auto"><svg xmlns="http://www.w3.org/2000/svg" id="dsfig-u3-01" viewBox="0 0 392 258" width="392" height="258" role="img" aria-label="CSS box model, outside to inside: margin, border, padding, content"><style>#dsfig-u3-01 .e{stroke:#454C5A;stroke-width:1.4;fill:none}#dsfig-u3-01 .e.hi{stroke:#2340B8;stroke-width:2.6}#dsfig-u3-01 .n{fill:#FFFFFF;stroke:#16181D;stroke-width:1.4}#dsfig-u3-01 .n.hi{fill:#E3E9FC;stroke:#2340B8;stroke-width:2.2}#dsfig-u3-01 .n.rb-b{fill:#16181D;stroke:#16181D}#dsfig-u3-01 .n.rb-r{fill:#BD3227;stroke:#BD3227}#dsfig-u3-01 text{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px}#dsfig-u3-01 .t{fill:#16181D;font-weight:500}#dsfig-u3-01 .t.inv{fill:#FFFFFF;font-weight:700}#dsfig-u3-01 .kd{stroke:#16181D;stroke-width:1.2}#dsfig-u3-01 .dot{fill:#16181D}#dsfig-u3-01 .ann{fill:#2340B8;font-size:11px;font-weight:700}#dsfig-u3-01 .lbl{fill:#6F7787;font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:700}#dsfig-u3-01 .ptr{fill:#2340B8;font-size:12px;font-weight:700}#dsfig-u3-01 .ah{fill:#454C5A}#dsfig-u3-01 .ah.hi{fill:#2340B8}#dsfig-u3-01 .wl rect{fill:#FFFFFF;stroke:#DCE0E7}#dsfig-u3-01 .wl .t{font-size:12px;font-weight:700}#dsfig-u3-01 .wl.hi rect{fill:#2340B8;stroke:#2340B8}#dsfig-u3-01 .wl.hi .t{fill:#FFFFFF}html.dark #dsfig-u3-01 .e{stroke:#B1B7C3}html.dark #dsfig-u3-01 .e.hi{stroke:#8FA3FF}html.dark #dsfig-u3-01 .n{fill:#161920;stroke:#E6E8ED}html.dark #dsfig-u3-01 .n.hi{fill:#1E2748;stroke:#8FA3FF}html.dark #dsfig-u3-01 .n.rb-b{fill:#E6E8ED;stroke:#E6E8ED}html.dark #dsfig-u3-01 .n.rb-r{fill:#FF7E71;stroke:#FF7E71}html.dark #dsfig-u3-01 .t{fill:#E6E8ED}html.dark #dsfig-u3-01 .t.inv{fill:#0F1115}html.dark #dsfig-u3-01 .kd{stroke:#E6E8ED}html.dark #dsfig-u3-01 .dot{fill:#E6E8ED}html.dark #dsfig-u3-01 .ann{fill:#8FA3FF}html.dark #dsfig-u3-01 .lbl{fill:#858D9C}html.dark #dsfig-u3-01 .ptr{fill:#8FA3FF}html.dark #dsfig-u3-01 .ah{fill:#B1B7C3}html.dark #dsfig-u3-01 .ah.hi{fill:#8FA3FF}html.dark #dsfig-u3-01 .wl rect{fill:#161920;stroke:#2A2E37}html.dark #dsfig-u3-01 .wl.hi rect{fill:#8FA3FF;stroke:#8FA3FF}html.dark #dsfig-u3-01 .wl.hi .t{fill:#0F1115}</style><defs><marker id="ah5" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah" d="M0,1 L9,5 L0,9 z"/></marker><marker id="ahh5" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah hi" d="M0,1 L9,5 L0,9 z"/></marker></defs><line class="e" x1="311.5" y1="37" x2="226.5" y2="101"/><line class="e" x1="226.5" y1="101" x2="141.5" y2="165"/><line class="e" x1="141.5" y1="165" x2="56.5" y2="229"/><rect class="n" x="278" y="22" width="67" height="30" rx="8"/><text class="t" x="311.5" y="37" dy=".35em" text-anchor="middle">Margin</text><rect class="n" x="193" y="86" width="67" height="30" rx="8"/><text class="t" x="226.5" y="101" dy=".35em" text-anchor="middle">Border</text><rect class="n" x="104" y="150" width="75" height="30" rx="8"/><text class="t" x="141.5" y="165" dy=".35em" text-anchor="middle">Padding</text><rect class="n" x="19" y="214" width="75" height="30" rx="8"/><text class="t" x="56.5" y="229" dy=".35em" text-anchor="middle">Content</text></svg><figcaption style="font-size:.82em;opacity:.72;margin-top:.45rem">CSS box model, outside to inside: margin, border, padding, content</figcaption></figure>

Key points.

Content holds the text or image; padding is the space between content and border.
The border wraps the padding (border: 2px solid red;), and margin is the transparent space outside it.
Total width = width + left and right padding + border + margin.
Positioning: static (normal flow, default), relative (shifted from its normal place), absolute (placed against the nearest positioned ancestor) and fixed (placed against the window, stays on scroll).

Asked: [7 marks] (Dec 2025) Explain need for CSS and CSS box model with positioning techniques.

Margins

Definition. Margin is the space outside an element's border.

Key points.

margin-top/right/bottom/left set each side; margin: 10px 20px; is top-bottom then left-right.
margin: 0 auto; centres a block.

Padding lists

Definition. Padding is the space inside the border; list properties style bullets and numbers.

Key points.

padding uses the same one to four value shorthand as margin.
list-style-type is disc, square, decimal or none.

Positioning using CSS

Definition. The position property decides how an element is placed on the page.

Key points.

static is normal flow; relative offsets from the normal place with top/left.
absolute leaves the flow; fixed stays at the same window position; z-index sets stacking.

CSS2

Definition. CSS2 (1998) extended CSS1 with layout and media features.

Key points.

It added absolute, relative and fixed positioning and z-index.
It added media types (screen, print) and more selectors.

Overview and features of CSS3

Definition. CSS3 is the modular version of CSS that adds effects and responsive layout.

Key points.

It adds border-radius, box-shadow, gradients, transition, animation and transform.
Media queries, Flexbox and Grid give responsive layouts.

Client side scripting with JavaScript

Definition. <mark>Client-side scripting is code that runs in the user's browser; JavaScript is the standard language for it and sits in script tags in the page.</mark>

Key points.

The browser runs the code, so the page responds without a server round trip.
Conversion: inches = cm / 2.54 and cm = inches * 2.54.

Example. 170 cm = 170 / 2.54 = 66.93 in; 170 in = 431.80 cm. Page has an input h, a button calling cv() and a paragraph out.

function cv() {
  var v = parseFloat(document.getElementById("h").value);
  document.getElementById("out").innerHTML =
    v + " cm = " + (v / 2.54).toFixed(2) + " in; " + v + " in = " + (v * 2.54).toFixed(2) + " cm";
}   // input 170 -> 170 cm = 66.93 in; 170 in = 431.80 cm

Asked: [7 marks] (Nov 2022) Write a program in JavaScript to convert Height from centimeters to inches and vice-versa.

Variables

Definition. A variable is a named container for a value, declared with var, let or const.

Key points.

var is function-scoped, let is block-scoped, const cannot be reassigned.
JavaScript is dynamically typed: number, string, boolean, null, undefined, object.

Functions

Definition. A function is a named block of code that runs when called and may return a value.

Key points.

Syntax: function add(a,b){ return a+b; }; add(2,3) gives 5.
Arrow functions (a,b)=>a+b are stored in variables.

Conditions

Definition. Conditional statements run code depending on a Boolean test.

Key points.

if (c) {...} else {...} chooses one branch; switch(x){ case 1: ...; break; default: ...} chooses among values.
c ? a : b is a one-line if-else, and === compares value and type.

Loops and repetition

Definition. A loop repeats a block of code while a condition holds.

Key points.

for(i=0;i<5;i++){...} for a known count, while(c){...} tests first, do{...}while(c); runs once at least.
break exits a loop and continue skips to the next pass.

Pop up boxes

Definition. Pop up boxes are dialogs opened by the window object for messages or input.

Key points.

alert("msg") shows a message; confirm("sure?") returns true for OK, false for Cancel.
prompt("name?") returns the typed text or null.

Advance JavaScript: JavaScript and objects

Definition. <mark>A JavaScript object is a collection of properties (name: value) and methods (properties that hold functions).</mark>

Key points.

Create with a literal, var car = {brand:"Tata", speed:60};, with new Object() or with a constructor function.
Access with dot car.brand or brackets car["speed"]; call methods as car.show().
Properties can be added or deleted at run time, and this refers to the owning object.
Native (built-in) objects belong to the language: String, Array, Date, Math, Number, Boolean and RegExp.
Host objects are supplied by the browser: window, document, navigator, location, history and screen.

Example.

var car = {brand: "Tata", speed: 60,
           show: function () { return this.brand + " " + this.speed; }};
document.write(car.show());   // Tata 60

Answer frame. Definition; creation, access, script; native and host lists with one property and method each; close with the output.

Asked: [7 marks] (Nov 2023) Explain the properties and methods of objects in JavaScript with a suitable script. Asked: [7 marks] (Dec 2024) Explain the various JavaScript objects and Host objects.

JavaScript own objects

Definition. <mark>JavaScript's own (built-in) objects, namely Date, Math, Array and String, are provided by the language itself and need no browser.</mark>

Key points.

Date holds date and time: new Date() gives now; getDate(), getMonth() (0-11), getFullYear(), getHours(), getMinutes(), getSeconds() and getTime() (milliseconds since 1970) read it, and toLocaleString() formats it.
Math is static, so no new: Math.abs(-5) is 5, Math.ceil(4.2) is 5, Math.floor(4.8) is 4, Math.pow(2,3) is 8, Math.sqrt(16) is 4, Math.random() is in [0,1).
Array stores an ordered list: var a = [1,2,3]; or new Array(3); length gives the size.
Array methods: push() adds at the end, pop() removes the last, shift() and unshift() work at the front, and join(), reverse() and sort() rearrange.
Iterate with a for loop over a.length; a two-dimensional array is an array of arrays, read as m[1][0].
Digital clock: read the time from Date and refresh with setTimeout every 1000 ms from page load.

Example. Page has a paragraph with id t.

function clock() {
  document.getElementById("t").innerHTML = new Date().toLocaleString();
  setTimeout(clock, 1000);
}
window.onload = clock;   // shows e.g. 30/9/2026, 10:15:42 am, updating each second

Answer frame. Date and time: HTML skeleton, new Date(), output, result line. Math: five methods with syntax and result. Array: define, creation, length, methods, loop, 2-D, code.

Asked: [7 marks] (Nov 2019) Write any five methods of Math object of JavaScript. Asked: [7 marks] (Dec 2020, Jun 2020) Write a JavaScript which displays current date and time. Write a function in JavaScript which displays a digital clock when the HTML page is loaded. Asked: [7 marks] (Jun 2020) Discuss JavaScript array object in details.

The DOM and web browser environments

Definition. <mark>The Document Object Model (DOM) is a programming interface that represents an HTML or XML document as a tree of objects that scripts can access and change.</mark>

Diagram. <figure class="ds-fig" style="margin:1.4rem 0;overflow-x:auto"><svg xmlns="http://www.w3.org/2000/svg" id="dsfig-u3-02" viewBox="0 0 703 262" width="703" height="262" role="img" aria-label="DOM tree of a page: document, html, head and body, and their child element nodes"><style>#dsfig-u3-02 .e{stroke:#454C5A;stroke-width:1.4;fill:none}#dsfig-u3-02 .e.hi{stroke:#2340B8;stroke-width:2.6}#dsfig-u3-02 .n{fill:#FFFFFF;stroke:#16181D;stroke-width:1.4}#dsfig-u3-02 .n.hi{fill:#E3E9FC;stroke:#2340B8;stroke-width:2.2}#dsfig-u3-02 .n.rb-b{fill:#16181D;stroke:#16181D}#dsfig-u3-02 .n.rb-r{fill:#BD3227;stroke:#BD3227}#dsfig-u3-02 text{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px}#dsfig-u3-02 .t{fill:#16181D;font-weight:500}#dsfig-u3-02 .t.inv{fill:#FFFFFF;font-weight:700}#dsfig-u3-02 .kd{stroke:#16181D;stroke-width:1.2}#dsfig-u3-02 .dot{fill:#16181D}#dsfig-u3-02 .ann{fill:#2340B8;font-size:11px;font-weight:700}#dsfig-u3-02 .lbl{fill:#6F7787;font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:700}#dsfig-u3-02 .ptr{fill:#2340B8;font-size:12px;font-weight:700}#dsfig-u3-02 .ah{fill:#454C5A}#dsfig-u3-02 .ah.hi{fill:#2340B8}#dsfig-u3-02 .wl rect{fill:#FFFFFF;stroke:#DCE0E7}#dsfig-u3-02 .wl .t{font-size:12px;font-weight:700}#dsfig-u3-02 .wl.hi rect{fill:#2340B8;stroke:#2340B8}#dsfig-u3-02 .wl.hi .t{fill:#FFFFFF}html.dark #dsfig-u3-02 .e{stroke:#B1B7C3}html.dark #dsfig-u3-02 .e.hi{stroke:#8FA3FF}html.dark #dsfig-u3-02 .n{fill:#161920;stroke:#E6E8ED}html.dark #dsfig-u3-02 .n.hi{fill:#1E2748;stroke:#8FA3FF}html.dark #dsfig-u3-02 .n.rb-b{fill:#E6E8ED;stroke:#E6E8ED}html.dark #dsfig-u3-02 .n.rb-r{fill:#FF7E71;stroke:#FF7E71}html.dark #dsfig-u3-02 .t{fill:#E6E8ED}html.dark #dsfig-u3-02 .t.inv{fill:#0F1115}html.dark #dsfig-u3-02 .kd{stroke:#E6E8ED}html.dark #dsfig-u3-02 .dot{fill:#E6E8ED}html.dark #dsfig-u3-02 .ann{fill:#8FA3FF}html.dark #dsfig-u3-02 .lbl{fill:#858D9C}html.dark #dsfig-u3-02 .ptr{fill:#8FA3FF}html.dark #dsfig-u3-02 .ah{fill:#B1B7C3}html.dark #dsfig-u3-02 .ah.hi{fill:#8FA3FF}html.dark #dsfig-u3-02 .wl rect{fill:#161920;stroke:#2A2E37}html.dark #dsfig-u3-02 .wl.hi rect{fill:#8FA3FF;stroke:#8FA3FF}html.dark #dsfig-u3-02 .wl.hi .t{fill:#0F1115}</style><defs><marker id="ah6" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah" d="M0,1 L9,5 L0,9 z"/></marker><marker id="ahh6" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah hi" d="M0,1 L9,5 L0,9 z"/></marker></defs><line class="e" x1="618.5" y1="39" x2="246.5" y2="103"/><line class="e" x1="246.5" y1="103" x2="153.5" y2="167"/><line class="e" x1="246.5" y1="103" x2="432.5" y2="167"/><line class="e" x1="153.5" y1="167" x2="60.5" y2="231"/><line class="e" x1="432.5" y1="167" x2="339.5" y2="231"/><line class="e" x1="432.5" y1="167" x2="525.5" y2="231"/><rect class="n" x="577" y="24" width="83" height="30" rx="8"/><text class="t" x="618.5" y="39" dy=".35em" text-anchor="middle">document</text><rect class="n" x="220.5" y="88" width="52" height="30" rx="8"/><text class="t" x="246.5" y="103" dy=".35em" text-anchor="middle">html</text><rect class="n" x="127.5" y="152" width="52" height="30" rx="8"/><text class="t" x="153.5" y="167" dy=".35em" text-anchor="middle">head</text><rect class="n" x="31" y="216" width="59" height="30" rx="8"/><text class="t" x="60.5" y="231" dy=".35em" text-anchor="middle">title</text><rect class="n" x="406.5" y="152" width="52" height="30" rx="8"/><text class="t" x="432.5" y="167" dy=".35em" text-anchor="middle">body</text><circle class="n" cx="339.5" cy="231" r="17"/><text class="t" x="339.5" y="231" dy=".35em" text-anchor="middle">h1</text><circle class="n" cx="525.5" cy="231" r="17"/><text class="t" x="525.5" y="231" dy=".35em" text-anchor="middle">p</text></svg><figcaption style="font-size:.82em;opacity:.72;margin-top:.45rem">DOM tree of a page: document, html, head and body, and their child element nodes</figcaption></figure>

Key points.

The browser parses the page into a tree of nodes: document, element, text and attribute nodes.
Every XHTML element becomes an object and its attributes become properties (img.src, a.href, input.value; class becomes className).
The JavaScript binding is the DOM API: a script reaches nodes with getElementById(), getElementsByTagName() or querySelector() and changes them with innerHTML, createElement() and appendChild().
Communication flow: the script asks the DOM for a node, changes its property or content, and the browser redraws the page.
Role in DHTML: the DOM lets JavaScript and CSS change content and style after loading, without reloading the page.
Window is the top-level browser object. Properties: document, location, history, navigator, screen. Methods: alert(), confirm(), prompt(), open(), close(), setTimeout().
Document represents the loaded page. Properties: title, URL, forms, images, links, body. Methods: write(), getElementById(), createElement().

Example.

// page has <p id="msg">Hello</p>
document.getElementById("msg").innerHTML = "Hi DOM";   // page now shows: Hi DOM

Answer frame. What is DOM: define, tree, node types, example, role in DHTML. Window or document: define, properties, methods, example. XHTML: elements as objects, attributes as properties, example.

Asked: [7 marks] (Nov 2019) Explain in detail the window object of JavaScript. Asked: [7 marks] (Nov 2019, Dec 2024) What is DOM? What is its role in DHTML? Explain its usage with HTML with an example. Asked: [7 marks] (Dec 2020) Write short note on document object of JavaScript. Asked: [7 marks] (Nov 2022) How are XHTML elements and attributes represented in the JavaScript binding to DOM? Asked: [7 marks] (Nov 2023) Explain how to communicate DOM API?

Manipulation using DOM

Definition. <mark>DOM manipulation is using JavaScript to find nodes and change their content, attributes or style.</mark>

Key points.

Control structures (if/else, switch, for, while) decide what runs.
Find nodes with getElementById, getElementsByTagName or querySelector.
Change content with innerHTML or textContent, attributes with setAttribute(), and nodes with createElement(), appendChild() and removeChild().
Style uses the style object: el.style.color = "red";, el.style.width = "200px";, el.style.position = "relative"; el.style.left = "50px";.
Hyphenated CSS names become camelCase (backgroundColor); values are strings with units.

Answer frame. Open with the definition; show one if and one loop; then the methods; close with a colour, size and position example, e.style.color = "red"; e.style.width = "300px";.

Asked: [7 marks] (Dec 2025) Explain JavaScript control structure and DOM manipulation. Asked: [7 marks] (Jun 2025) How can you use JavaScript to dynamically manipulate CSS styles on HTML elements? Give examples for colour, size or position.

Forms and validations

Definition. <mark>Form validation is checking user input in the browser with JavaScript before the form is submitted to the server.</mark>

Key points.

Need: it catches empty or wrong input at once, saves a server round trip and reduces load; the server must still re-check.
A field is reached by name: document.f.email.value or document.forms["f"].
Validation runs from the form's onsubmit="return chk()" attribute; returning false stops the submission.
Techniques: required-field check, length check, numeric check (isNaN), regular-expression pattern check, and comparing two fields (password and confirm).
HTML5 built-in validation uses required, pattern and type="email"; custom validation uses JavaScript.
Radio buttons share one name and allow one selection; check boxes allow several. Both have name, value and checked properties, so loop over the group and read the checked one.
Email logic: text, one @, text, a dot, text, tested by /^[^\s@]+@[^\s@]+\.[^\s@]+$/.

Example. Form named f with input email.

function chk() {
  var e = document.f.email.value;
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)) { alert("Invalid email"); return false; }
  return true;
}   // "abc@x" -> alert, not sent; "[email protected]" -> submitted

Answer frame. Techniques: need, points 4-5, regex, example. Email: logic, onsubmit flow, function, output. Radio and check boxes: define, properties, loop. Functions: function f(a){ return a; }, call, then the validation program.

Asked: [7 marks] (Dec 2020) Write short note on radio buttons and check boxes object in JavaScript. Asked: [7 marks] (Jun 2020) How to use email validation in JavaScript so the user cannot enter an invalid email address? Write code. Asked: [7 marks] (Nov 2022) Discuss with examples: i) Functions ii) Form validation. Asked: [7 marks] (Dec 2025) Explain JavaScript form validation techniques.

DHTML: Combining HTML, CSS and JavaScript

Definition. <mark>DHTML (Dynamic HTML) combines HTML for structure, CSS for style, JavaScript for behaviour and the DOM to link them, so a page changes after it loads.</mark>

Key points.

Components: HTML (content), CSS (presentation), JavaScript (logic) and DOM (access to elements).
It changes content, styles and positions without contacting the server.
Event handling makes it interactive: the browser fires an event and the handler changes the page.
Data binding (Internet Explorer) ties elements to a data source: the source is named by datasrc="#id" and each field by datafld="name".

Example.

<table datasrc="#d"><tr><td><span datafld="name"></span></td></tr></table>

Answer frame. Data binding: define, source and element, datasrc/datafld example. DHTML with events: define, components, one handler per event type.

Asked: [7 marks] (Nov 2019, Dec 2020) Write short note on data binding. Explain data binding in DHTML. Asked: [7 marks] (Dec 2025) Explain DHTML and event handling with examples.

Events and buttons

Definition. <mark>An event is an action such as a click or key press, and an event handler is the code that runs when it happens.</mark>

Key points.

Mouse events: onclick, ondblclick, onmouseover, onmouseout, oncontextmenu; keyboard events: onkeydown, onkeyup, onkeypress.
Form events: onsubmit, onchange, onfocus, onblur; window event: onload.
Register a handler in HTML with onclick="f()", as a property (b.onclick = f;) or with addEventListener("click", f).
The event object gives type, target, clientX and clientY; preventDefault() cancels the default action.
Propagation: capturing moves the event down from window to target, bubbling moves it up again; stopPropagation() stops it.
Context menu: hide the browser menu with oncontextmenu plus preventDefault(), show your own absolute div at clientX/clientY, hide it on the next click.

Example. Hidden div m (display none, position absolute).

document.oncontextmenu = function (e) {
  e.preventDefault();
  var m = document.getElementById("m");
  m.style.left = e.clientX + "px"; m.style.top = e.clientY + "px"; m.style.display = "block";
};
document.onclick = function () { document.getElementById("m").style.display = "none"; };

Answer frame. Define event and handler; events by category with one example each; registration, event object, bubbling; finish with the context-menu steps and code.

Asked: [7 marks] (Jun 2020, Dec 2024) Explain DOM event handling with a context-menu example. Explain the event handlers in JavaScript with an example of each.

Last-minute revision

CSS = Cascading Style Sheets; rule is selector { property: value; }.
Three ways: inline, embedded, external; priority in that order.
Box model outside to inside: margin, border, padding, content.
Inches = cm / 2.54; cm = inches * 2.54.
DOM is a tree of document, element, text and attribute nodes.
Validation runs from onsubmit; return false blocks submit.
DHTML = HTML + CSS + JavaScript + DOM; data binding uses datasrc and datafld.

Memory hooks

Box model from outside: "My Big Pretty Cat" is Margin, Border, Padding, Content.
Positions "SRAF": Static, Relative, Absolute, Fixed.
DHTML = "H-C-J-D": HTML, CSS, JavaScript, DOM.
Bubbling rises like a bubble, from target to window.

Coverage checklist

Need for CSS: advantages and disadvantages.
introduction to CSS: what is CSS.
basic syntax andstructure: classes.
using CSS: three pages, embedded sheet.
background images: background properties.
colors and properties, manipulating texts, usingfonts: unasked, covered.
borders and boxes: box model and positioning.
margins, padding lists, positioning using CSS, CSS2, Overview and features of CSS3: unasked, covered.
Client side scriptingwith JavaScript: cm to inches.
variables, functions, conditions, loops and repetition, Pop up boxes: unasked, covered.
Advance JavaScript: Javascript and objects: object script, host objects.
JavaScript own objects: Math, date and clock, Array.
the DOM and web browser environments: window, DOM, document, XHTML binding, DOM API.
Manipulation using DOM: control structures, CSS styles.
forms and validations: radio, email, functions, techniques.
DHTML : Combining HTML, CSS andJavascript: data binding, DHTML events.
Events and buttons: DOM events, context menu.

Account

Internet and Web Technology (CS-504 (A)) - Unit 3 Short Notes

How unit 3 is examined

Need for CSS

Introduction to CSS

Basic syntax and structure

Using CSS

Background images

Colors and properties

Manipulating texts

Using fonts (usingfonts)

Borders and boxes

Margins

Padding lists

Positioning using CSS

CSS2

Overview and features of CSS3

Client side scripting with JavaScript

Variables

Functions

Conditions

Loops and repetition

Pop up boxes

Advance JavaScript: JavaScript and objects

JavaScript own objects

The DOM and web browser environments

Manipulation using DOM

Forms and validations

DHTML: Combining HTML, CSS and JavaScript

Events and buttons

Last-minute revision

Memory hooks

Coverage checklist