SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
Part A (To be referred by students)
SAVE THE FILE AND UPLOAD AS (RollNo_Name_Exp2)
Topic covered: Basics of JavaScript
Learning Objective
• Understand the basics of JavaScript.
• Learn how to use document.write() with HTML.
• Work with prompt() and alert().
• Use for loops for iteration.
• Implement if-else ladders for decision-making.
Prerequisites
1. Basic knowledge of HTML & CSS.
2. A web browser (Chrome, Firefox, Edge, etc.).
3. A text editor (VS Code, Notepad++, or Sublime Text).
Outcomes
Learn to write JavaScript code with object-oriented concepts alongside HTML tags.
Note on Filenames
To keep things consistent, use the filename format: RollNo_Name_Exp2 for both Part A and Part B submissions.
1
SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
Theory: HTML + JavaScript (with Internal CSS)
All examples below use internal CSS inside the <head> to enforce basic layout and readable typography.
1️⃣ Using document.write() with HTML
Objective: Learn how to use document.write() to display text in a webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Write Example</title>
<style>
body { font-family: Arial, sans-serif; background:#f7f9fc; margin:20px; }
.card { background:#fff; border:2px solid #222; padding:16px; border-radius:8px; box-shadow:2px 2px 8px rgba(0,0,0,0.1); }
h1 { color:#0a4b78; }
p { line-height:1.6; }
</style>
</head>
<body>
<div class="card">
<script>
document.write("<h1>Welcome to JavaScript!</h1>");
document.write("<p>This is printed using document.write().</p>");
</script>
</div>
</body>
</html>
Expected Output: A heading “Welcome to JavaScript!” and a paragraph “This is printed using document.write().”
2️⃣ Using prompt() and alert()
Objective: Take user input using prompt() and display messages using alert().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
2
SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prompt and Alert Example</title>
<style>
body { font-family: Arial, sans-serif; background:#fafafa; margin:20px; }
.info { border-left:6px solid #2e7d32; padding:12px 16px; background:#e8f5e9; }
</style>
</head>
<body>
<div class="info">
<p>Open this page and follow the dialogs.</p>
</div>
<script>
var name = prompt("Enter your name:");
alert("Hello, " + name + "! Welcome to JavaScript.");
</script>
</body>
</html>
Expected Behavior: A prompt asks for the user’s name; an alert shows a welcome message.
3️⃣ Using for Loops
Objective: Use for loops to repeat a task multiple times.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For Loop Example</title>
<style>
body { font-family: Arial, sans-serif; padding:20px; }
h2 { color:#5d4037; }
.result p { margin:6px 0; border-bottom:1px dotted #bbb; padding-bottom:4px; }
</style>
</head>
<body>
<h2>Counting from 1 to 5:</h2>
<div class="result" id="res"></div>
<script>
for (var i = 1; i <= 5; i++) {
3
SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
document.write("<p>Number: " + i + "</p>");
}
</script>
</body>
</html>
Expected Output: Number: 1 to Number: 5 listed line by line.
4️⃣ Using if-else Ladders
Objective: Understand how to use if-else ladders for decision-making.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>If-Else Ladder Example</title>
<style>
body { font-family: Arial, sans-serif; padding:20px; background:#fff3e0; }
.note { border:1px solid #e65100; background:#ffe0b2; padding:12px; }
</style>
</head>
<body>
<div class="note">
<p>Enter your marks when prompted.</p>
</div>
<script>
var marks = prompt("Enter your marks:");
marks = parseInt(marks);
if (marks >= 90) {
alert("Grade: A");
} else if (marks >= 80) {
alert("Grade: B");
} else if (marks >= 70) {
alert("Grade: C");
} else if (marks >= 60) {
alert("Grade: D");
} else {
alert("Grade: F (Fail)");
4
SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
}
</script>
</body>
</html>
Expected Behavior: User enters marks; a grade is shown via alert().
5️⃣ Using Number(), 6️⃣ parseFloat(), 7️⃣ parseInt()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Parsing Examples</title>
<style>
body { font-family: Arial, sans-serif; margin:20px; }
.card { border:2px solid #333; padding:12px; border-radius:6px; }
.line { border-bottom:1px dashed #aaa; margin:8px 0; display:inline-block; width:100%; }
</style>
</head>
<body>
<div class="card">
<script>
var str = "123";
var num = Number(str);
document.write("Converted Number: " + num + "<br>");
var invalidStr = "123abc";
var invalidNum = Number(invalidStr);
document.write("Invalid Conversion: " + invalidNum + "<span class='line'></span><br>");
var floatStr = "123.45";
var floatNum = parseFloat(floatStr);
document.write("Parsed Float: " + floatNum + "<br>");
var mixedStr = "123.45abc";
var mixedNum = parseFloat(mixedStr);
document.write("Parsed Float with Text: " + mixedNum + "<span class='line'></span><br>");
5
SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
var intStr = "456";
var intNum = parseInt(intStr);
document.write("Parsed Integer: " + intNum + "<br>");
var mixedIntStr = "456abc";
var mixedIntNum = parseInt(mixedIntStr);
document.write("Parsed Integer with Text: " + mixedIntNum + "<br>");
var binaryStr = "1010";
var binaryNum = parseInt(binaryStr, 2);
document.write("Binary to Decimal: " + binaryNum + "<br>");
</script>
</div>
</body>
</html>
Notes: Number() converts values to numbers; invalid conversions yield NaN. parseFloat() parses a floating-point number
until a non-numeric character. parseInt() parses an integer and can accept a radix (e.g., 2 for binary).
6
SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
Part B (to be completed by students)
Students must submit a single soft copy containing both Part A and Part B. The filename should be RollNo_Name_Exp2.
Student Details
Roll No.: _____________________________ Name: _____________________________
Prog/Yr/Sem: _________________________ Batch: _____________________________
Date of Experiment: ___________________ Date of Submission: _______________
7
SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
Assignment -5(with Internal CSS)
1. document.write() + heading
Create a webpage that prints “Welcome, JavaScript Learner!” using document.write() inside an <h3> tag.
Style: Heading should be blue and centered using internal CSS. Add one paragraph styled with green text
below it.
2. prompt() + alert()
Ask the user for their favorite fruit using prompt() and show an alert() with the message: “Nice choice!
[fruit] is delicious.”
Style: Add CSS to give the page a light yellow background and Verdana font.
3. For loop (iteration)
Print the first 10 odd numbers using a for loop and document.write().
Style: Each number should appear inside a dashed bordered box with a little padding.
4. Input validation with Number()
Continuously prompt the user to enter their age until a valid number is entered (use Number() and check for
NaN).
Style: Display the final valid age in a red bold paragraph using CSS.
5. Summation with parseInt()
Ask the user to enter 4 integers (one at a time). Convert each with parseInt() and display the total sum.
Style: Display the sum in a large font (20px) with a gray border around it.
6. parseFloat() + comparison
Prompt the user for a temperature (can be decimal), parse with parseFloat(), and check:
If the number is ≥ 37.5, display “High temperature”
Else, display “Normal temperature”
Style: Use CSS to make “High temperature” appear in red and “Normal temperature” in blue.
8
SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
7. Base conversion with parseInt(input, 16)
Repeatedly ask the user to enter a hexadecimal number (digits 0–9, A–F) until valid. Convert it to
decimal using parseInt(input, 16) and display the result.
Style: Use internal CSS to give the result a background color (light gray) and rounded corners.
HTML Code 1:
Paste your full HTML (with internal CSS) here:
Output (print screen) – Code 1
Insert screenshot here:
HTML Code 2:
Paste your full HTML (with internal CSS) here:
Output (print screen) – Code 2
Insert screenshot here:
9
SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
HTML Code 3:
Paste your full HTML (with internal CSS) here:
Output (print screen) – Code 3
Insert screenshot here:
Observation and Learning
Write your observations and learnings here:
Observation Questions (write in your own words)
1. Why does Number("20abc") return NaN, but parseInt("20abc") returns 20?
2. What happens when Number("0x10") is executed? How does it differ from parseInt("0x10")?
HTML & CSS Validation (Part B)
• Include internal CSS in your answers using a <style> block inside <head>.
• Run your final HTML through https://validator.w3.org/ (no or minimal errors).
• If you separate CSS into a file during testing, paste it back into <style> for submission.
• Take print-screen of outputs after fixing validation errors (attach in the output slots).
Hints for Observation Questions
• Number("20abc") → NaN because the entire string must represent a valid number; parseInt("20abc") → 20 because it
parses leading digits until a non-digit.
10
SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
PROGRAM: BTI -VII sem
COURSE: Web Programming Practical Experiment: 5
• Number("0x10") treats it as hexadecimal 0x10 and returns 16; parseInt("0x10") returns 16 in modern engines but
behavior historically varied—using parseInt("0x10", 16) is explicit and recommended.
11
