Activity: Web Foundations & JavaScript Fundamentals

How the web works and JavaScript as the brain of the browser

Grade XII • Computer Science ⏱️ ~40 min

Brief Intro — Web Foundations & JavaScript Fundamentals

HTML & CSS build the structure and style of web pages, but JavaScript makes them think and respond. Understanding how the web works and mastering JavaScript fundamentals is essential for creating interactive, dynamic web experiences.

In this activity, you'll explore web technology concepts, learn how to include JavaScript in your pages, understand JavaScript syntax, variables, operators, functions, and control structures through hands-on experiments.

Part 1 Web Technology Foundations

Understanding the infrastructure that powers the World Wide Web and how web pages are delivered.

Task 1: Internet vs WWW & Web Components

What is the difference between the Internet and the World Wide Web, and what are the key components?

Internet: Massive network of networks connecting millions of computers worldwide using protocols like HTTP, SMTP, FTP
WWW: System of interlinked hypertext documents accessed via Internet using HTTP
Components: Web Pages (displayed in browsers), Web Sites (collections of pages), Web Servers (host websites on Internet)
Check Answer

Answer: Internet is the network infrastructure; WWW is the system of hypertext documents on it. Components include web pages, web sites, and web servers.

Task 2: Dynamic vs Static Pages & Scripting

What is the difference between static and dynamic pages, and client-side vs server-side scripting?

Static Pages: Show same content each time viewed
Dynamic Pages: Content can change each time accessed; written in scripting languages like PHP, Perl, ASP, JSP
Client-Side Scripting: Processed within browser (e.g., JavaScript); small programs downloaded and run by browser
Server-Side Scripting: Processed on web server when user requests information; needed for dynamic data like login details (PHP, Python, Ruby, Java)
Check Answer

Answer: Static pages show fixed content; dynamic pages change. Client-side scripts run in browsers; server-side scripts run on servers for dynamic data processing.

Part 2 Introduction to JavaScript

JavaScript is the scripting language that brings interactivity to web pages.

Task 3: What is JavaScript & Ways to Include It

What is JavaScript and how can you include it in HTML pages?

Definition: Scripting language designed to add interactivity to HTML pages; lightweight, interpreted, embedded directly into HTML
Ways to Include: Inline script in body, internal script section, external .js file with script src
Why Study: One of 3 languages all web developers must learn (HTML for content, CSS for layout, JavaScript for behavior)
Check Answer

Answer: JavaScript is a lightweight interpreted language for web interactivity. Include via inline script, internal script section, or external .js file.

Task 4: JavaScript Frameworks

What role do JavaScript frameworks play in modern web development?

Frameworks: Pre-written JavaScript libraries that make development easier and faster
Examples: React, Angular, Vue.js, jQuery (provide ready-made functions and components)
Check Answer

Answer: JavaScript frameworks are pre-written libraries that simplify development by providing ready-made functions and components.

Part 3 JavaScript Fundamentals

The building blocks of JavaScript programming.

Interactive Simulator: JS Value Lab

Type a JavaScript expression and click Run to see the result. Experiment with operators, variables, and functions.

Result will appear here

Task 5: Statements, Comments & Keywords

What are JavaScript statements, comments, and keywords?

Statements: Programming instructions executed in order; separated by semicolons (optional but recommended)
Comments: Single-line with //, multi-line with /* */; ignored by JavaScript, used for explanation
Keywords: Reserved words that identify JavaScript actions (var, let, const, if, switch, function, return, try, etc.); cannot be used as variable names
Check Answer

Answer: Statements are programming instructions. Comments (// or /* */) are ignored. Keywords are reserved words like var, let, const, if, function.

Task 6: Variables & Data Types

How do you declare variables in JavaScript and what are the data types?

Variable Declaration: var, let, const; equal sign assigns values
Primitive Types: number (with or without decimals), string (text in quotes), boolean, null, undefined
Identifiers: Names for variables; must start with letter, underscore, or dollar sign; case-sensitive; camelCase recommended
Check Answer

Answer: Declare variables with var/let/const. Primitive types: number, string, boolean, null, undefined. Identifiers start with letter/_/$ and are case-sensitive.

Task 7: Operators

What are the different types of operators in JavaScript?

Arithmetic: +, -, *, **, /, %, ++, --
Assignment: =, +=, -=, *=, /=, %=, **=
String: + for concatenation (e.g., "Hello" + " World")
Comparison: ==, ===, !=, !==, >, <, >=, <=, ? :
Logical: && (and), || (or), ! (not)
Type: typeof (returns type of variable), instanceof
Check Answer

Answer: JavaScript has arithmetic, assignment, string (concatenation), comparison, logical, and type operators.

Part 4 JavaScript Functions

Functions allow code reuse and are fundamental to JavaScript programming.

Task 8: What is a Function?

What is a JavaScript function and why are they useful?

Definition: Block of code designed to perform a particular task; executed when invoked (called)
Syntax: function name(parameter1, parameter2) { code to be executed }
Why Functions: Reuse code (define once, use many times); use same code with different arguments to produce different results
Check Answer

Answer: Functions are reusable code blocks that perform specific tasks. They allow code reuse and can produce different results with different arguments.

Task 9: Writing & Calling Functions

How do you write and call a function with parameters and return values?

Parameters vs Arguments: Parameters are listed in function definition; arguments are values received when function is invoked
Return: When JavaScript reaches return statement, function stops executing and returns value to caller
Example: function add(a, b) { return a + b; } — call with add(5, 3) returns 8

Check Answer

Answer: Define functions with parameters; they behave as local variables. Use return to send values back. Call functions with arguments to execute them.

Part 5 Control Structures & Loops

Control structures allow programs to make decisions and repeat actions.

Task 10: Decision Control

What are the decision control structures in JavaScript?

if: Execute block if condition is true
else: Execute block if condition is false
else if: Specify new condition if first is false
switch: Select one of many code blocks to execute based on expression value
Check Answer

Answer: Decision structures include if (condition true), else (condition false), else if (new condition), and switch (many alternatives).

Task 11: Looping Structures

What are the different types of loops in JavaScript?

for: Loop through code a number of times (statement 1; condition; statement 3)
for/in: Loop through properties of an object
for/of: Loop through values of an iterable object
while: Loop while condition is true
do/while: Loop while condition is true (executes at least once)
break/continue: break exits loop; continue skips to next iteration
Check Answer

Answer: JavaScript supports for, for/in, for/of, while, and do/while loops. break exits loops; continue skips to next iteration.

Task 12: Loop Practice

Predict the output of this loop, then test it in the JS Value Lab: for (let i = 0; i < 5; i++) { console.log(i); }

Prediction: The loop will print numbers 0, 1, 2, 3, 4
Why: i starts at 0, increments by 1 each iteration, stops when i reaches 5 (condition i < 5 becomes false)

Check Answer

Answer: Output: 0, 1, 2, 3, 4. The loop runs 5 times (i = 0, 1, 2, 3, 4) then stops when i becomes 5.

Ready to test your knowledge?

Take the Assessment →