┌───────┴───────┐ <h1> <p> ``` JavaScript interacts with the DOM to dynamically manipulate the webpage. This allows JS to read, add, remove, or modify HTML tags and CSS styles on the fly. #### Event-Driven Programming JavaScript functions are often triggered by **events**—specific actions that occur on the webpage, such as a user clicking a button, hovering over an element, pressing a key, or resizing the window. To respond to an event, we attach an **Event Listener** to a DOM node. This listener waits for the specified event to fire, then executes a callback function in response. ```javascript // Selecting the DOM node const themeButton = document.querySelector('#toggle-btn'); // Attaching the event listener themeButton.addEventListener('click', function() { // Logic that runs when button is clicked document.body.classList.toggle('dark-mode'); }); ``` --- ## SECTION 2: REAL-WORLD EXAMPLES (SCENARIOS) To see how these technologies work together outside of textbook definitions, let’s explore three practical scenarios where coding fundamentals and web architecture solve real problems. --- ### Scenario 1: The Local E-Commerce Bakery Platform * **The Context:** An independent bakery, "Crust & Crumb," wants to sell its products online. They need a system that updates their inventory, calculates order prices, and lets users build custom pastry boxes. * **The Technical Application:** * **HTML Structure:** The site uses semantic containers like `<article class="pastry-item">` for each product. Inside, it uses headings (`<h3>Sourdough Bread</h3>`), pricing text (`<span class="price">$8.50</span>`), and user input fields for quantities. * **CSS Style:** A CSS Grid displays products in a responsive grid. Media queries ensure that on a smartphone screen, the grid collapses into a single column for easy thumb-scrolling. * **JavaScript Logic:** JavaScript uses a local array of objects to track inventory: ```javascript const menuItems = [ { id: "sourdough", name: "Sourdough Bread", price: 8.50, stock: 15 }, { id: "croissant", name: "Almond Croissant", price: 4.50, stock: 24 } ]; ``` When a customer changes the quantity input, a JS function recalculates the subtotal, adds local sales tax, and dynamically updates the order total in the DOM without requiring a page reload. --- ### Scenario 2: Smart Home Dashboard * **The Context:** A resident wants to monitor their home's energy consumption, ambient temperature, and security status from a wall-mounted tablet interface. * **The Technical Application:** * **Web Architecture (Client-Server):** The tablet runs a browser (the client) displaying a web application. A local mini-computer (the server, like a Raspberry Pi) collects raw sensor readings from smart outlets and thermometers. * **Computational Logic (Conditionals):** The dashboard interface runs a continuous control loop (using JavaScript) checking safety and comfort conditions: ```javascript let ambientTemp = getSensorReading(); // Reads current room temperature if (ambientTemp > 24) { triggerAirConditioner("ON"); updateDashboardUI("Cooling active...", "blue-text"); } else if (ambientTemp < 18) { triggerHeater("ON"); updateDashboardUI("Heating active...", "red-text"); } else { allSystemsIdle(); updateDashboardUI("Temperature Stable", "green-text"); } ``` This shows how logical expressions interact with real-world physical systems. --- ### Scenario 3: Digital Portfolio for a Creative Professional * **The Context:** A freelance graphic designer needs a high-performance, accessible digital portfolio to showcase visual work and capture client inquiries. * **The Technical Application:** * **Semantic SEO:** By wrapping their portfolio projects inside semantic `<article>` containers and applying descriptive `alt` tags to images (e.g., `alt="Minimalist brand design for coffee shop"`), the designer helps search engines correctly index their work, driving organic traffic. * **Interactivity & UX:** A JavaScript-powered filter dynamically updates the display. When a visitor clicks a "Branding" tag, JS hides non-branding elements from the DOM with a smooth CSS transition effect: ```javascript function filterPortfolio(category) { const items = document.querySelectorAll('.portfolio-item'); items.forEach(item => { if (item.dataset.category === category || category === 'all') { item.style.display = 'block'; // Show matched projects } else { item.style.display = 'none'; // Hide unmatched projects } }); } ``` --- ## SECTION 3: PRACTICAL APPLICATIONS (STEP-BY-STEP GUIDES) This section walks you through building a real, interactive web page: an **Interactive Personal Finance Budgeting Calculator**. This application allows users to log income and expenses, calculate their net balance, and receive dynamic financial health tips based on logical thresholds. ``` +-------------------------------------------------------------+ | PERSONAL FINANCE CALCULATOR | +-------------------------------------------------------------+ | [ Income Input ] $ [5000] [ Expense Input ] $ [3200] | | | | ( CALCULATE BALANCE ) | | | | Net Balance: $1800.00 | | Status Alert: Healthy Savings Rate! Keep it up. | +-------------------------------------------------------------+ ``` --- ### Step 1: Writing the Structure (HTML5) Create a file named `index.html` and add the following code. This sets up the structural elements of your calculator using semantic HTML. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Budget Tracker

# COURSE 1: PROGRAMMING FOUNDATIONS AND WEB DEVELOPMENT ESSENTIALS **Subject:** Stage 3 Computer Science & Web Technologies **Grade Level:** Senior Stage 3 (Ages 16–18 / Pre-University) **Instructional Design Focus:** Experiential Learning, Computational Thinking, and Applied Web Architecture --- ## SECTION 1: COMPREHENSIVE CORE CONCEPTS Welcome to the foundation of modern digital infrastructure. Almost every service we interact with today—from streaming platforms and social networks to financial systems and smart city dashboards—relies on web technologies and programming logic. This section unpacks how these technologies work from the ground up, starting with web infrastructure and moving through structural HTML5, expressive CSS3, and dynamic JavaScript execution. --- ### Concept 1: The Anatomy of the Web (Client-Server Architecture) To build software for the web, we must first understand the medium through which it travels. The World Wide Web operates primarily on a **Client-Server Architecture**. This model describes how two distinct computing entities communicate to share resources and display information. ``` +------------------+ HTTP Request +------------------+ | | -----------------------------------------------> | | | Client Browser | | Web Server | | (Chrome, Firefox)| <----------------------------------------------- | (Apache, Nginx) | +------------------+ HTTP Response (HTML, CSS, JS) +------------------+ ``` #### 1. The Client The client is the end-user's device and software that accesses web content. Most commonly, this is a web browser (such as Google Chrome, Mozilla Firefox, or Apple Safari) running on a laptop, smartphone, or tablet. The client’s primary job is to **render** (translate and display) raw code (HTML, CSS, and JavaScript) into an interactive, visual user interface. #### 2. The Server The server is a high-powered, specialized computer located in a data center or hosted in the cloud (e.g., AWS, Microsoft Azure, Google Cloud). Servers are built to run continuously, waiting to accept incoming requests from clients. They host the website's files, databases, and application logic. When a request arrives, the server processes it and sends back the appropriate data. #### 3. The Communication Bridge: IP Addresses, DNS, and HTTP/HTTPS * **IP Addresses:** Every device on the internet has a unique identifier known as an **Internet Protocol (IP) Address** (e.g., `192.0.2.1` or `2001:db8::1`). Computers use these numbers to locate each other. * **The Domain Name System (DNS):** Humans struggle to remember long strings of numbers. The DNS acts as the "phonebook of the internet." When you type `www.wikipedia.org` into your browser, your computer queries a DNS server to translate that human-readable domain name into its corresponding IP address. * **HTTP/HTTPS (Hypertext Transfer Protocol / Secure):** This is the standardized set of rules governing how clients and servers exchange information. When you request a webpage, your browser sends an **HTTP GET Request**. The server evaluates this request and returns an **HTTP Response** with a status code (like `200 OK` for success, or `404 Not Found` if the page doesn't exist) along with the requested HTML, CSS, and JS assets. The "S" in HTTPS stands for **Secure**, indicating that the data transmitted between the client and server is encrypted, protecting it from interception. --- ### Concept 2: Programming Fundamentals (The Logic Engine) Regardless of the programming language you use (JavaScript, Python, C++, or Java), the fundamental logical building blocks remain consistent. Developing computational thinking involves training your mind to organize data and construct sequence pathways to solve problems. ``` [Input Data] │ ▼ +───────────────+ | Variable/Data | <--- Storing and organizing state +───────────────+ │ ▼ /─────────────────\ < Conditional Test > <--- Branching logic (If/Else) \─────────────────/ │ │ Yes│ │No ▼ ▼ [Loop Action] [Alternative Path] <--- Iterative loops & fallback branches │ ▼ [Function Return] <--- Reusable block outputs result ``` #### Variables and Data Types A variable is a named storage location in a computer's memory. Think of it as a labeled box where you can store data that your program can read, manipulate, or change. To ensure our programs run efficiently, computers categorize data into specific **Data Types**: * **Strings:** Textual data enclosed in quotes. *Example:* `"Hello, World!"` or `"Stage 3 Student"`. * **Numbers:** Numeric values, which can be integers (whole numbers) or floats (decimals). *Example:* `42` or `98.6`. * **Booleans:** Binary logical values that can only be `true` or `false`. These are critical for decision-making logic. * **Arrays (or Lists):** Ordered collections of data values. *Example:* `["HTML", "CSS", "JavaScript"]`. * **Objects (or Dictionaries):** Key-value pairs that represent structured data. *Example:* `{ brand: "Toyota", year: 2022 }`. #### Control Flow: Conditionals and Loops By default, code executes line-by-line from top to bottom. Control flow mechanisms allow us to change this linear execution path. * **Conditionals (`if`, `else if`, `else`):** These allow programs to make decisions. If a specific condition evaluates to `true`, the computer runs one block of code; otherwise, it skips it or runs an alternative block. * **Loops (`for`, `while`):** Loops let us repeat a block of code a specific number of times or as long as a condition remains true. This is useful for processing items in a list, rendering repetitive visual elements, or checking system states. #### Functions A function is a reusable, self-contained block of code designed to perform a specific task. Functions prevent code repetition (a concept known in software engineering as **DRY: Don't Repeat Yourself**). Functions can take inputs (called **parameters** or arguments) and can return an output (a **return value**) back to where they were called. --- ### Concept 3: HTML5 – The Structural Skeleton of the Web **HyperText Markup Language (HTML)** is not a programming language; it is a markup language. It provides the core structure and meaning of web content by wrapping plain text in **elements** defined by **tags**. ``` +------------------+ | | +------------------+ | +-------------+-------------+ | | +------------------+ +------------------+ | | | | +------------------+ +------------------+ | Contains meta- | | Contains visible | | data, title, & | | content: headers,| | linked assets | | paragraphs, divs | +------------------+ +------------------+ ``` #### Semantic HTML5 Early versions of HTML relied heavily on generic container tags like `

` and ``. While functional, these tags carry no structural meaning. **Semantic HTML5** introduced descriptive tags that communicate the *role* of the content to browsers, search engines, and screen readers (used by visually impaired users). * `

`: Defines introductory content, such as a logo, navigation links, or search bars. * `

`: Specifically encloses navigation links. * `

`: Wraps the primary, unique content of the web document. * `

`: Groups related content together logically. * `

`: Encloses a self-contained composition (e.g., a blog post, news story, or forum reply) that could be distributed independently. * `

`: Contains content tangentially related to the main content (e.g., sidebars, callout boxes). * `

``` ```css /* THE BROKEN CSS SNIPPET */ .card { width: 500px; padding: 10px; margin: 15px; /* Visual components overflow on narrow mobile screens. How can we make it more responsive? */ } ``` ```javascript // THE BROKEN JAVASCRIPT SNIPPET const btn = document.getElementById("calc-btn"); btn.addEventListener('click', function() { // BUG WARNING: The values below are parsed as strings rather than numbers, // which leads to calculation errors when multiplying. let acres = document.getElementById("acres").value; let litersNeeded = acres * 1500; // 1500 liters recommended per acre // LOGICAL ERROR: This comparison does not work because it evaluates strings instead of numbers. if (litersNeeded = "10000") { // Check if this assignment operator is correct document.getElementById("alert").textContent = "Danger! Overconsumption limits reached."; } else { document.getElementById("alert").textContent = "Water volume approved."; } }); ``` #### Your Task: 1. **Analyze the Errors:** Identify at least three distinct bugs in the HTML, CSS, and JS code snippets above (look for syntax mistakes, incorrect variable operations, and logical comparison bugs). 2. **Rewrite the Code:** Write a corrected, fully working version of the HTML, CSS, and JavaScript. Ensure inputs are properly validated as numbers, use strict comparison operators, and design the layout to be mobile-friendly. --- ### Part C: Real-World Design Proposal Challenge Imagine you are hired as a technical consultant to design a system for a local **Community Food Bank**. They need a web portal to coordinate food donations. ``` +-------------------------------------------------------------+ | DESIGN PROPOSAL | +-------------------------------------------------------------+ | 1. Semantic Wireframe 2. Dynamic State Planning | | [Header] - User logs donation quantity | | [Main Content Grid] - Logic computes total weight | | [Footer] - DOM updates progress bars | | | | 3. Layout Architecture 4. Technical Stack Choice | | - Flexbox container alignment | | - Media queries for responsive volunteer usage | +-------------------------------------------------------------+ ``` Write a structured **Design Proposal Document** addressing the following points: 1. **Semantic Wireframe Plan:** Outline the HTML structure you would use to build the donation portal. Specify which semantic HTML5 elements you would use and explain why they are appropriate for structuring the header, main navigation, donation input cards, and footer sections. 2. **Dynamic State Planning:** Detail how your JavaScript logic would track and update donation inputs on the fly. How would you structure your variables? What event listeners would you use, and how would you update the DOM to show the total weight of food donated in real-time? 3. **Responsive Layout Strategy:** Explain how you would use CSS Flexbox or CSS Grid to make sure the portal works well for volunteers on desktop monitors in the warehouse and on mobile phones in the field. Which properties would you use to ensure a fluid, responsive layout?

Lesson Notes Library

Library

COURSE 3: BACKEND DEVELOPMENT, DATABASES, AND MODERN SOFTWARE ENGINEERING

COURSE 1: PROGRAMMING FOUNDATIONS AND WEB DEVELOPMENT ESSENTIALS