HCDD 411 — Interactive Web Technologies

Distributed Object Computing

HCDD 411 · Penn State University · Md Touhidul Islam

💡 These slides can run code.
Every lecture is a self-contained HTML file. Students can write and execute JavaScript, jQuery, and API calls directly inside the slides — no IDE, no switching tabs, no copy-paste. Hit the arrow to see a live example.

Course Modules

🌐 Client-Server Architecture

HTTP, REST, databases, APIs — the conceptual foundation.

17 slides

⚡ JavaScript Part 1

Variables, types, operators, control flow, functions.

15 slides · 12 playgrounds

🧩 JavaScript Part 2

Objects, arrays, ES6 — map, filter, classes, arrow functions.

16 slides · 13 playgrounds

🧩 JavaScript Practice Problems

20 Problems

💲 jQuery

Selectors, DOM manipulation, events, animations.

19 slides · 17 playgrounds

🧩 JQuery Practice Problems

12 Problems

🔌 APIs & Async JS

AJAX, jQuery $.ajax, Fetch, Axios, async/await.

27 slides · 24 playgrounds

🧩 API Practice Problems

20 Problems

🖥️ Node.js Backend

Build a full REST API with Express, step by step.

17 slides · 15 playgrounds

JavaScript Variables

Declaring Variables

Use var keyword (older style)
Use let keyword (modern, recommended)
Use const for constants — cannot be reassigned
No need to declare a data type!

⚠️ Variable Naming Rules:

Case sensitive: myVar ≠ myvar
Can contain: letters, numbers, $, _
Cannot start with a number
Cannot use reserved keywords (like if, for, etc.)

PLAYGROUND: Create Your Variables

// Try creating your own variables!
var numberOfStudents = 30;
let studentName = "Sam";
const COURSE_NAME = "IST 411"; // Constants use UPPER_CASE

console.log("Students:", numberOfStudents);
console.log("Name:", studentName);
console.log("Course:", COURSE_NAME);

// Variables can change (except const)
numberOfStudents = 35;
studentName = "Alex";
console.log("Updated students:", numberOfStudents);
console.log("Updated name:", studentName);

// Try adding your own variables below:

Output:

Array Method: filter()

Creates a new array with only the elements that pass a test

How it works:
filter() runs a function on each item. If the function returns true, the item is kept. If false, it's removed. The original array is never modified.

Takes a callback function that returns true or false
Returns a new array — the original is unchanged
Perfect for finding items that match a condition

EXPERIMENT: Filter an Array

const grades = [72, 88, 95, 61, 83, 90, 77, 45, 91];

// Keep only passing grades (>= 70)
const passing = grades.filter(grade => grade >= 70);
console.log("All grades:", grades);
console.log("Passing grades:", passing);

// Chain with map() to convert to letter grades
const letterGrades = passing.map(g => {
    if (g >= 90) return "A";
    if (g >= 80) return "B";
    return "C";
});
console.log("Letter grades:", letterGrades);

// Try it: filter grades above 85
const highScores = grades.filter(g => g > 85);
console.log("High scores:", highScores);

Output: