Advanced Web Designing: CSS Rules and JavaScript Behaviour
What this domain tests
CSS controls presentation, JavaScript controls behaviour such as validation. The exam asks where each stylesheet type lives, how selectors and specificity work, what the box model is, and how a small script manipulates the DOM or blocks an invalid form.
CSS essentials
Three placements: inline through the style attribute (no selector), internal through style in the head, external through link rel='stylesheet' href='style.css'. Selectors: element (p), class (.note), id (#header), universal (*), grouping (h1, p) and descendant (div p). Specificity runs inline, then id, then class, then element. The box model is content → padding → border → margin, with padding inside the border and margin outside.
JavaScript essentials
Code goes in a script element or an external .js file. var is function-scoped and redeclarable; let is block-scoped; const is block-scoped and cannot be reassigned. Output via alert(), document.write(), console.log() or innerHTML. Events include onclick, onchange, onsubmit and onmouseover. DOM access uses document.getElementById('id'), then .value for form fields and .innerHTML for elements. Comparison: = assigns, == compares values with type coercion, === compares value and type.
Worked example
A form contains an input with id='name' and a submit button calling check(). The function reads document.getElementById('name').value, tests whether it equals the empty string with ===, shows alert('Name required') and returns false. The returned false cancels submission; returning true lets the form post. Marking follows the read, the test, the alert and the cancellation.
Traps
- Using .value on a div or p; use innerHTML there.
- Forgetting to return false in an onsubmit handler, so the page still submits.
- Misspelling getElementById (capital E, capital I, capital B).
- Expecting a class selector starting with a dot to be written with #.
- Using == where a strict === comparison is required.