Module 3 : First JavaScript Program.
📘 What is JavaScript?
JavaScript is a high-level, interpreted programming language used to make websites interactive. While HTML creates structure and CSS styles it, JavaScript adds behavior—like showing messages, validating forms, animating elements, etc.
🔧 Setting Up: No Installation Needed!
All you need is:
A web browser (Chrome, Firefox, Edge)
A text editor (VS Code, Sublime Text, or even Notepad)
🖥️ Writing Your First JavaScript Program
✅ Step-by-Step: Hello, World!
1. HTML + JavaScript File
Create a file called index.html with the following content:
html
code
<!DOCTYPE html> <html> <head> <title>My First JS Program</title> </head> <body> <h1>Welcome to JavaScript</h1> <script> // This is your first JavaScript program console.log("Hello, World!"); alert("Welcome to JavaScript Programming!"); </script> </body> </html>
2. Explanation
<script>: Tag used to write or link JavaScript code.
console.log("Hello, World!"): Outputs message to the browser console.
alert(...): Shows a popup message box in the browser.
🛠️ Detailed Breakdown of the Code
Line
Code
Explanation
<script>
Start writing JavaScript inside HTML
console.log(...)
Logs data to the browser’s console (for developers)
alert(...)
Shows a popup box with your message
</script>
End of JavaScript code block
🧪 1: Modify Output
Change the text in console.log() and alert() to your name.
Add a second console.log() line that prints your favorite color.
Example:
javascript
code
console.log("Hello, my name is Ayesha!"); console.log("My favorite color is blue."); alert("JavaScript is fun!");
Expected Output:
Console shows:
pgsql
Copy code
Hello, my name is Ayesha!
My favorite color is blue.
Popup shows: "JavaScript is fun!"
💡 Understanding:
practicing how to:
Write string values
Execute statements in order
🧪 2: Variables and Concatenation
Create a greeting using variables.
javascript
code
let name = "Ali"; let age = 22; console.log("Hello, my name is " + name + " and I am " + age + " years old.");
Explanation:
let: Used to declare a variable.
"Hello, my name is " + name: This combines a string with the value stored in the variable.
🧠 Insight: Why "Hello, World"?
"Hello, World" is a tradition in programming. It:
Confirms the environment is set up correctly
Is the simplest program to demonstrate output
Originated from the book The C Programming Language (Kernighan & Ritchie, 1978)
🧪 3: Input from User
Task:
Take user input and display it.
javascript
code
let userName = prompt("What is your name?"); console.log("Nice to meet you, " + userName + "!"); alert("Welcome, " + userName + "!");
Explanation:
prompt(): Asks user for input
Output is shown in both the console and alert box.
🔁 Practice Exercise
Write a script that:
Asks the user’s favorite food
Stores it in a variable
Displays a message like: “You love Pizza? Me too!”
javascript
code
let food = prompt("What is your favorite food?"); console.log("You love " + food + "? Me too!");
🧠 Deep Dive: JavaScript Program Flow
javascript
code
// Step 1: Declare variables let name = "Sara"; // Step 2: Output using console console.log("Hi " + name); // Step 3: Alert alert("Welcome, " + name);
🧪 Flow Explanation:
Variable is created.
Value is combined into a string.
Console logs it.
Popup shows the same message.
📊 Application
Even the most complex apps—like Instagram or Google Maps—use JavaScript at their core to:
Load content dynamically
Respond to user actions
Connect to servers and databases via APIs
🔍 Learning: Cognitive Load Theory
When beginners see long code, they often feel overwhelmed. Breaking it down:
Chunking info (like console.log, then alert) helps understanding.
Step-by-step align with constructivist learning, allowing learners to build knowledge incrementally.
Source: Sweller, J. (1988). Cognitive Load During Problem Solving: Effects on Learning
✅ Summary
learned:
How to create and run your first JavaScript program
The purpose of console.log() and alert()
How to use variables and take input
How JavaScript connects with HTML
📚 Homework & Practice
1. Write a program that:
Asks user’s name and age
Calculates what year they were born
Displays it in an alert
javascript
code
let name = prompt("Enter your name:"); let age = prompt("Enter your age:"); let birthYear = 2025 - age; alert(name + ", you were born in " + birthYear);
🧠 Reflection Questions
What does console.log() help you with?
How is prompt() different from alert()?
How does JavaScript make websites dynamic?
No comments:
Post a Comment