CSS Overflow Management

When content exceeds the dimensions of its container, the overflow property dictates how the browser handles the rendering.

• visible: The default behavior. Content renders outside the element's boundaries.
• hidden: Clipped content is hidden, and no scrollbars are provided.
• scroll: Clipped content is hidden, but scrollbars are always displayed to access the hidden material.
• auto: Scrollbars appear only if the content overflows.

Axis-specific control is possible using overflow-x and overflow-y.

CSS Positioning Schemes

• static: The default flow. Elements remain in their normal document position and cannot be offset.
• relative: The element is offset relative to its original position in the document flow.
• absolute: The element is positioned relative to its closest positioned ancestor. If none exists, it positions relative to the document body.
• fixed: The element is positioned relative to the browser viewport, remaining stationary during scrolling.

JavaScript Architecture

A complete JavaScript environment comprises three distinct components:

• ECMAScript: The core syntax and specification.
• Document Object Model (DOM): The API for interacting with HTML and CSS.
• Browser Object Model (BOM): The API for interacting with the browser environment.

Integrating JavaScript

Scripts can be embedded directly within HTML or loaded from external files.

// Inline script
<script>
  // Logic here
</script>

// External file reference
<script src="app.js"></script>

Comments

// Single line annotation

/*
  Multi-line
  annotation
*/

Variables and Constants

Identifiers can contain letters, digits, underscores, and dollar signs, but cannot start with a digit.

const MAX_LIMIT = 100; // Block-scoped constant
let currentCount = 0;  // Block-scoped variable (ES6)
var legacyState = 'old'; // Function-scoped variable (ES5)

Data Types and Type Coercion

JavaScript is dynamically typed, allowing variables to hold any data type.

let payload = 42;
payload = 'text';

Numeric Parsing

Number('123');     // 123
Number('invalid'); // NaN (Not-a-Number)
parseFloat('9.81'); // 9.81

String Operations

const text = '  Hello World  ';
text.length;               // 15
text.trim();               // 'Hello World'
text.charAt(2);            // 'H'
text.concat('!');          // '  Hello World  !'
text.indexOf('World');     // 8
text.substring(2, 7);      // 'Hello'
text.slice(-5);            // 'orld  '
text.toLowerCase();        // '  hello world  '
text.toUpperCase();        // '  HELLO WORLD  '
text.split(' ');           // ['', '', 'Hello', 'World', '', '']

Template Literals

ES6 introduced template literals for string interpolation using backticks.

const user = 'Alice';
const role = 'admin';
const message = `User ${user} has role: ${role}`;
console.log(message);

Boolean Truthiness

Values evaluating to false include: empty string (""), zero (0), null, undefined, and NaN. All other values are truthy.

let unassignedVar;
console.log(unassignedVar); // undefined

Array Manipulation

const items = ['apple', 'banana'];
items.length;             // 2
items.push('cherry');      // ['apple', 'banana', 'cherry']
items.pop();              // ['apple', 'banana']
items.unshift('mango');   // ['mango', 'apple', 'banana']
items.shift();            // ['apple', 'banana']
items.slice(0, 1);        // ['apple']
items.reverse();          // ['banana', 'apple']
items.join('-');          // 'banana-apple'
items.concat(['date']);   // ['banana', 'apple', 'date']
items.sort();             // ['apple', 'banana']
items.forEach((val) => console.log(val));
items.splice(1, 1);       // ['apple']
const upperItems = items.map(i => i.toUpperCase()); // ['APPLE']

Operators

let num = 10;
let postInc = num++; // postInc = 10, num = 11
let preInc = ++num;  // preInc = 12, num = 12

// Comparison: ==, ===, !=, !==, >, <, >=, <=
// Logical: &&, ||, !
// Assignment: =, +=, -=, *=, /=

JSON Serialization

JavaScript provides built-in methods for converting between JSON strings and objects.

const data = { id: 101, status: 'active' };

// Serialization: Object to JSON string
const jsonStr = JSON.stringify(data); // '{"id":101,"status":"active"}'

// Deserialization: JSON string to Object
const parsedObj = JSON.parse(jsonStr); // { id: 101, status: 'active' }