Q. What are the differences between Java and Javascript?
Differences
Feature Java JavaScript
Compiled or not Compiled (to bytecode) Interpreted by browsers
Platform Desktop & mobile apps Web development
Execution Runs on JVM Runs in browsers
Syntax Style Statically typed Dynamically typed
Use in websites Backend or app server Frontend (and sometimes backend)
Q. What is JavaScript?
Ans. JavaScript is a scripting language used to control the behavior of web pages.
Runs in the browser (like Chrome, Firefox)
Can respond to user actions (clicks, typing, etc.)
Used for animations, forms, popups, games, etc.
Simple Multiplication (Direct Values)
<!DOCTYPE html>
<html>
<body>
<p id="result"></p>
<script>
let a = 5;
let b = 3;
let result = a * b;
document.getElementById("result").innerText = "Result: " + result;
</script>
</body>
</html>
Why does this happen in html, not Javascript?
Node.js runs only JavaScript files (pure JS code).
Your code includes HTML tags (<!DOCTYPE html>, <script>, etc.), so Node.js gets
confused.
How to fix?
Option 1: Run the code in a browser
Save your code as an .html file, for example, index.html.
Open this file with any web browser (Chrome, Firefox, Edge, etc.).
The browser will run your JavaScript inside the HTML.
download a save
🔍 Output:
This will display:
Result: 15
Q. another way,
JavaScript Add Program
<!DOCTYPE html>
<html>
<body>
<input id="a"> + <input id="b">
<button onclick="add()">=</button>
<span id="result"></span>
<script>
function add() {
let a = +document.getElementById("a").value;
let b = +document.getElementById("b").value;
document.getElementById("result").innerText = a + b;
}
</script>
</body>
</html>
✅ How it works:
+document.getElementById(...) converts input to numbers.
When the button is clicked, it calculates the sum and shows it in the <span>.
download a save
then click then open below............
then put number and click equal. got results.
Q.
Division Program with User Input
<!DOCTYPE html>
<html>
<body>
<script>
let a = prompt("Enter first number (dividend):");
let b = prompt("Enter second number (divisor):");
a = Number(a);
b = Number(b);
if (b !== 0) {
let result = a / b;
alert("Result of Division: " + result);
} else {
alert("Division by zero is not allowed!");
}
</script>
</body>
</html>
How to Use:
1. Copy the code into Notepad
2. Save the file as division.html (select “All Files” and use .html extension)
3. Open it in a web browser
4. You’ll be prompted to enter two numbers
Output:
Q.
Multiplication
<!DOCTYPE html>
<html>
<body>
<script>
let a = prompt("Enter the first number:");
let b = prompt("Enter the second number:");
a = Number(a);
b = Number(b);
let result = a * b;
alert("Result of Multiplication: " + result);
</script>
</body>
</html>
output:
like division ar moto
Q. What are the differences between Static and Dynamic Webpage?
static vs. Dynamic Webpages
Feature Static Webpage Dynamic Webpage
Definition Fixed content; same for all users Content can change based on user or data
Feature Static Webpage Dynamic Webpage
Languages Used HTML, CSS HTML, CSS, JavaScript, server languages
Example About Us page Weather forecast, news feed
Updates Manual Automatic (from database/server)
Interactivity Low High
🔹 Static:
<h1>Welcome to My Website</h1>
🔹 Dynamic (with JS):
<h1>Welcome, <span id="user"></span></h1>
<script>
document.getElementById("user").innerText = "Ahsan";
</script>
Value of JavaScript
JavaScript is valuable because:
Makes webpages interactive
Responds to user actions (clicks, typing)
Changes content without reloading the page
Works with HTML & CSS for dynamic websites
Used in both frontend (browser) and backend (Node.js)
JavaScript Basics – Fundamental Syntax
1. Variables:
let name = "Ahsan";
const age = 20;
2. Operators:
let x = 5 + 3; // 8
3. Conditions:
if (age > 18) {
console.log("Adult");
}
4. Loops:
for (let i = 0; i < 3; i++) {
console.log(i);
}
Using Alerts and Prompts
1. alert() – show message:
alert("Welcome to the site!");
2. prompt() – get user input:
let name = prompt("What is your name?");
alert("Hello " + name);
JavaScript Events
Events are actions users take (click, hover, input, etc.).
Example: Click Event
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello from JavaScript!");
}
</script>
Short questions.
Question Answer
What makes a webpage dynamic? Use of JavaScript and/or server data
What does prompt() do? Gets input from the user
Example of an event? onclick, onmouseover, onkeyup
What is a variable in JS? A container to store values
// not need below ones
🧠 1. Gathering Additional User Input
🟢 prompt() (Basic Input)
let userName = prompt("Enter your name:");
document.body.innerHTML += `<h2>Hello, ${userName}!</h2>`;
🟢 Input via HTML Form
<input type="text" id="nameInput" placeholder="Type your name">
<button onclick="showName()">Submit</button>
<script>
function showName() {
let name = document.getElementById("nameInput").value;
alert("You entered: " + name);
}
</script>
🔄 2. Dynamically Modifying HTML
✨ Example: Change Text on Click
<p id="demo">Old Text</p>
<button onclick="changeText()">Change</button>
<script>
function changeText() {
document.getElementById("demo").innerText = "New Text!";
}
</script>
🧠 3. Testing JavaScript
You can test JavaScript in:
Browser Console (press F12, go to Console tab)
HTML files (using <script>)
Online editors (e.g., CodePen, JSFiddle)
Example to test:
console.log("Testing JavaScript Code");
✅ 4. Form Validation – Complex Forms
HTML Form:
<form onsubmit="return validateForm()">
Email: <input type="email" id="email"><br>
Password: <input type="password" id="password"><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
let email = document.getElementById("email").value;
let pass = document.getElementById("password").value;
if (email === "" || pass.length < 6) {
alert("Please enter a valid email and password (min 6 chars)");
return false;
}
return true;
}
</script>
5. Additional Features
Show/hide password
Character counters
Live preview
Date pickers
Responsive form layouts
Example: Show/Hide Password
<input type="password" id="myPass">
<input type="checkbox" onclick="togglePass()"> Show Password
<script>
function togglePass() {
let x = document.getElementById("myPass");
x.type = x.type === "password" ? "text" : "password";
}
</script>
⚙️ 6. Processing Form Data (Basic)
<form onsubmit="processData(); return false;">
Name: <input type="text" id="name">
<input type="submit" value="Process">
</form>
<script>
function processData() {
let name = document.getElementById("name").value;
document.body.innerHTML += `<p>Processed: ${name}</p>`;
}
</script>
