Chapter 2: Cascading Style Sheets and JavaScript 🎨
This cheat sheet covers CSS syntax and JavaScript basics for Chapter 2 of the GSEB Std 12 Computer Studies syllabus.
🎯 Key Concepts
- CSS (Cascading Style Sheets): Separates document content from presentation.
- JavaScript: An interpreted, client-side scripting language for logic and validation.
🎨 Cascading Style Sheets (CSS)
1. Types of Selectors
| Selector | Syntax | Example | Description |
|---|---|---|---|
| Element | tag | h1 | Targets all tags of that type. |
| ID | #id | #main | Targets a single unique element. |
| Class | .class | .red | Targets multiple elements with that class. |
| Universal | * | * | Targets all elements on the page. |
2. Methods of Applying CSS
- Inline Style: Used within a specific HTML tag (highest priority).
- Internal (Embedded) Style: Placed inside
<style>tag in the<head>section. - External Style Sheet: Saved as a
.cssfile and linked using the<link />tag.
📜 JavaScript (JS) Core Features
1. Variables and Data Types
- Variables: Declared with
var. E.g.,var age = 12;. - Data Types: Number, String, Boolean (true/fase), Object, Null, Undefined.
2. Essential JS Functions
alert("msg"): Simple popup with an OK button.isNaN(value): Returnstrueif the value is NOT a number (very common in MCQs).parseInt("string"): Converts a string into an integer.parseFloat("string"): Converts a string into a decimal number.confirm("msg"): Returnstrueif user clicks OK;falseotherwise.
3. Events (Trigger Actions)
onclick: Mouse click on an element.onmouseover: Mouse pointer moves over an element.onfocus: Element (like an input) becomes active.onblur: Element loses focus.onsubmit: Triggered when a form's submit button is clicked.
🖥️ JavaScript Form Access Logic
Accessing elements is the core of form validation:
- By ID:
document.getElementById("name").value; - By Index:
document.forms[0].elements[1].value; - By Name:
document.form1.name.value;
💡 Board Focus: High-Weightage Points 👔
- MCQ Alert: CSS properties and values are separated by a colon
:. - MCQ Alert: JavaScript uses the
+operator for string concatenation. - MCQ Alert: The
NaNfunction stands for Not-a-Number. - MCQ Alert: Comments in JS:
//for single line,/* ... */for multiple lines. - MCQ Alert: To focus on an element automatically, use the
focus()method.
Common Mistake
The isNaN() function is tricky! isNaN(123) is false, but isNaN("ABC") is true.