Week 1: Introduction to Interactive Programming and JavaScript

Environment

 Overview of interactive programming

 Human-Computer Interaction (HCI) and event-driven programming
 JavaScript in the modern web development ecosystem
 Setting up development tools (browser, text editor, console)

Week 2: JavaScript Basics I – Syntax, Variables, and Data Types

 JavaScript syntax and basic structure

 Declaring and using variables (let, const, var)
 Data types (Number, String, Boolean, Null, Undefined, Object)

Week 3: JavaScript Basics II – Operators, Input/Output, and Comments

 Comments in JavaScript (single-line, multi-line)

 Input/output: alert(), prompt(), console.log(), basic HTML interaction
 Operators: arithmetic, comparison, logical, assignment

Week 4: Control Flow and Error Handling

 Conditional statements (if, else, switch)

 Looping constructs (for, while, do-while)
 Error handling basics: try, catch, finally

Week 5: Arrays and JavaScript Functions

 Defining and manipulating arrays

 Looping through arrays (for, forEach)
 Defining and invoking functions (declaration, expression, arrow functions)
 Scope and closures

Week 6: Object-Oriented Programming in JavaScript

 Creating and using objects

 Object properties and methods
 Introduction to Classes and OOP principles: encapsulation, inheritance,
polymorphism
Week 7: Document Object Model (DOM) and Events

 What is the DOM?

 Accessing elements (getElementById, querySelector, etc.)
 Modifying DOM content and styles
 Handling events (onclick, onchange, addEventListener)

Week 8: JavaScript in the Client-Side Environment

 JavaScript and HTML/CSS integration

 Form validation
 Client-side scripting best practices
 Responsive design basics using JS

Week 9: JavaScript in Server-Side and Peer-to-Peer Systems

 Overview of server-side JavaScript

 Introduction to Node.js and basic server creation
 Understanding Peer-to-Peer systems
 JavaScript interaction in distributed code environments

Week 10: JavaScript Frameworks Overview

 Role of frameworks in modern JS development

 Introduction to Node.js: architecture and use cases
 Introduction to React: components, JSX basics
 Introduction to Angular: TypeScript, components, modules

Week 11: Mini Project and Practical Lab Integration

 Building a small interactive web app combining DOM, forms, and simple back-end
using Node.js
 Applying concepts learned from Weeks 1–10
 Debugging and deploying basic web apps

Week 12: Revision, Integration, and Assessment Preparation

  Recap of course content
 Best practices and coding conventions
 Sample assessment questions
 Final Q&A and project feedback

Notes:

 Practical/Lab Hours (PH 30) should align with Weeks 2–11, integrating hands-on
sessions to reinforce weekly topics.
 Frameworks like React and Angular can be taught at an introductory level in Week
10 and optionally expanded in the lab/project.
 Assessment can include both code walkthroughs and interactive project demos.

Week 1: Introduction to Interactive Programming and JavaScript Environment

Lecture Title: Introduction to Interactive Programming and JavaScript

Environment

Learning Objectives:

By the end of this lecture, students should be able to:

 Understand the concept of interactive programming.

 Describe the role of JavaScript in modern web development.
 Set up a development environment using basic tools.
 Write and run their first simple JavaScript code in an HTML document.

1. Introduction to Interactive Programming

Definition: Interactive programming is a style of programming where the flow of the

program is determined by user inputs and events. Unlike static pages, interactive applications
respond to user actions like clicks, key presses, and mouse movements.

Examples of interactivity:

 A web form that validates input as the user types.

 A button that changes the background color of the page when clicked.
  A dropdown menu that reveals options on hover.

Why interactivity matters:

 Improves user engagement and experience.

 Makes applications dynamic and responsive.
 Essential in modern web development where user interfaces (UIs) must be intuitive
and responsive.

2. JavaScript in Web Development

What is JavaScript? JavaScript is a lightweight, interpreted programming language

primarily used to create dynamic and interactive effects within web browsers.

Key features:

 Runs in the browser (client-side)

 Event-driven and asynchronous
 Can manipulate HTML and CSS
 Used for form validation, animations, data updates, and more

Relationship with HTML and CSS:

 HTML is used to structure content.

 CSS is used for styling.
 JavaScript is used to add interactivity and control behavior.

Example:

<!DOCTYPE html>
<html>
<head>
<title>First JS Example</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<button onclick="changeText()">Click Me</button>
<p id="demo">This text will change.</p>

<script>
function changeText() {
document.getElementById("demo").innerHTML = "Text changed using
JavaScript!";
}
</script>
</body>
</html>

3. Setting Up the Development Environment

Tools Required:

 Text Editor: VS Code, Brackets, or Notepad++

 Web Browser: Chrome, Firefox, Edge

Steps:

1. Create a folder for your projects (e.g., JSProjects)

2. Open the folder in your text editor (e.g., VS Code)
3. Create a new file and name it index.html
4. Write basic HTML with JavaScript inside <script> tags
5. Save and open the file in a browser

Tip: Use the Live Server extension in VS Code for real-time preview.

4. Writing Your First JavaScript Code

Syntax Basics:

 Statements end with ;

 Case-sensitive
 Comments: // for single-line, /* */ for multi-line

Examples:

// Display a message
alert("Welcome to JavaScript!");

// Log to the console

console.log("This is logged to the browser console.");

Including JavaScript in HTML:

1. Inline: Within HTML elements using onclick, onchange, etc.

2. Internal: Inside <script> tags in the HTML file.
3. External: Linking to a .js file using <script src="script.js"></script>

5. Summary

 Interactive programming allows applications to respond to user inputs.

 JavaScript is the language that brings interactivity to web pages.
 You can write JavaScript inside HTML documents using <script> tags.
 Development setup is simple: a text editor and a browser.
Assignments / Activities:

1. Set up a project folder and create an index.html file.

2. Write a simple HTML document with a button that changes text using JavaScript.
3. Practice using alert(), console.log(), and basic DOM manipulation.

Next Week Preview:

Topic: JavaScript Basics I – Syntax, Variables, and Data Types

 Introduction to JavaScript variables

 Working with different data types
 Basic operators

Week 1 Lecture: Introduction to Interactive Programming and

JavaScript Environment

Learning Objectives

By the end of this lecture, students should be able to:

 Understand the concept of interactive programming.

 Explain the importance of JavaScript in web development.
 Describe how human-computer interaction is supported through JavaScript.
 Set up a basic JavaScript development environment using a browser and code editor.
 Write and run their first JavaScript program.

1. What is Interactive Programming?

Definition:

Interactive programming is a style of programming where a user interacts with a running

program through mouse clicks, key presses, form inputs, or other UI elements in real-
time.

Examples:
  Clicking a button to reveal more content
 Typing in a form and getting instant validation feedback
 Drag-and-drop file uploads
 Games and calculators on the web

Why is it important?

Modern applications aim for high usability. Users expect websites and apps to respond
dynamically to their actions. JavaScript makes this possible on web platforms.

2. Human-Computer Interaction (HCI) and Event-Driven

Programming

HCI in Context:

HCI focuses on designing user-friendly systems. For the web, it means making applications
that users can:

 Click,
 Hover over,
 Type into,
 And get feedback from immediately.

Event-Driven Programming:

JavaScript supports event-driven programming, where code executes in response to user

actions (events).

Examples of events:
Event Type Description

onclick User clicks a button or element

onchange User changes a value in a form input

onmouseover User hovers over an element

Code Example:
html
CopyEdit
<button onclick="sayHello()">Click Me</button>

<script>
function sayHello() {
alert("Hello, user!");
}
</script>
3. Introduction to JavaScript

What is JavaScript?

JavaScript is a lightweight, interpreted programming language used to make web pages

interactive.

Features:

 Runs in web browsers (client-side)

 Supports event-driven and object-oriented programming
 Can also run on servers (e.g., Node.js)

Real-World Uses:

 Web forms and validation

 Animations and transitions
 Games and media players
 Chat systems and real-time updates

4. JavaScript Development Environment Setup

Tools Needed:

Tool Purpose

Web browser To run JavaScript

Text editor To write code

Recommended tools:

 Browser: Google Chrome / Firefox / Edge

 Text Editor: Visual Studio Code / Brackets / Notepad++

Setup Instructions:

1. Open your text editor.

2. Create a new file called index.html.
3. Insert the following starter code:

html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>My First JS Page</title>
</head>
<body>
<h1>Welcome to JavaScript</h1>
<p>Open the console to see the message.</p>

<script>
console.log("Hello from JavaScript!");
</script>

</body>
</html>

4. Save the file and open it in your browser.

5. Press F12 and click on the Console tab to view the message.

5. Live Demonstration

In-class demo:

 Show how to create and run the above file.

 Demonstrate how clicking a button can trigger a JavaScript function.

6. Summary of Key Concepts

 Interactive programming enables real-time user interaction.

 JavaScript is the standard for interactive web programming.
 It uses an event-driven model to respond to user actions.
 Students should be familiar with basic tools like a browser and code editor.

Practical/Lab Session for Week 1

Objectives:

 Set up your JavaScript environment.

 Write and run a basic script that interacts with the user.

Instructions:

1. Open a new HTML file and add:

html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Interactive Welcome</title>
</head>
<body>
<h2>Welcome!</h2>
<button onclick="welcomeUser()">Click Me</button>

<script>
function welcomeUser() {
let name = prompt("What is your name?");
alert("Nice to meet you, " + name + "!");
}
</script>

</body>
</html>

2. Save and open the file in your browser.

3. Click the button and interact with the prompt.

📝 Homework/Exercise

 Modify the example to ask for the user's age and display a message like:

"Hi John, you’ll be 25 next year!"

 Add comments to each part of your code.

Quiz Questions

1. What is interactive programming?

2. Name two tools needed to run JavaScript.
3. What event is triggered when a user clicks on an element?
4. What JavaScript function is used to display output in the browser console?
5. What tag is used to include JavaScript in HTML?