Lecture: Introduction to JavaScript
1. What is JavaScript?
JavaScript (JS) is a programming language used to make web pages dynamic and
interactive.
While:
o HTML → Structure (skeleton of a webpage).
o CSS → Style (colors, fonts, layout).
o JavaScript → Behavior (interactivity, actions, logic).
👉 Without JS, websites are static. With JS, they can respond to clicks, inputs, animations, forms,
etc.
2. How to Use JavaScript in HTML
There are three main ways to use JS:
a) Inline JavaScript
<button onclick="alert('Hello!')">Click Me</button>
b) Internal JavaScript
<!DOCTYPE html>
<html>
<head>
<title>My First JS</title>
</head>
<body>
<h1>Welcome</h1>
<script>
alert("This is JavaScript running inside HTML!");
</script>
</body>
</html>
c) External JavaScript (Best Practice)
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>External JS</title>
<script src="script.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
// script.js
alert("Hello from external JS file!");
3. Basic JavaScript Syntax
a) Variables (to store data)
let name = "Adeel"; // modern way
var age = 25; // old way
const pi = 3.1416; // constant value
b) Data Types
String → "Hello"
Number → 10, 3.14
Boolean → true or false
Array → [1, 2, 3]
Object → {name: "Ali", age: 20}
c) Output in JavaScript
console.log("Hello World!"); // For debugging
alert("Welcome!"); // Popup message
document.write("Text on page"); // Directly writes to page
4. Functions in JavaScript
A function is a block of code that runs when called.
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Adeel"); // Output: Hello, Adeel!
5. Events in JavaScript
JS reacts to events like clicks, keypress, mouse movement, etc.
<button onclick="sayHi()">Click Me</button>
<script>
function sayHi() {
alert("Hi! You clicked the button.");
}
</script>
6. Example: Simple Calculator
<!DOCTYPE html>
<html>
<body>
<h2>Simple Calculator</h2>
<input id="num1" type="number">
<input id="num2" type="number">
<button onclick="add()">Add</button>
<p id="result"></p>
<script>
function add() {
let n1 = parseInt(document.getElementById("num1").value);
let n2 = parseInt(document.getElementById("num2").value);
document.getElementById("result").innerHTML = "Sum = " + (n1 + n2);
}
</script>
</body>
</html>
7. Why Learn JavaScript?
It’s the language of the web (runs in every browser).
Used in frontend (React, Angular, Vue) and backend (Node.js).
Can build websites, apps, games, and servers.
Summary:
JavaScript makes web pages interactive.
You can write it inline, internal, or external (best).
Variables, data types, functions, and events are the core building blocks.
Practice small projects like calculators, forms, and interactive buttons.
