6.
Applying JavaScript – internal and external, I/O, Type Conversion
a. Write a program to embed internal and external JavaScript in
a web page.
b. Write a program to explain the different ways for displaying output.
c. Write a program to explain the different ways for taking input.
d. Create a webpage which uses prompt dialogue box to ask a voter for his name and
age.
Display the information in table format along with either the voter can vote or not
a. Write a program to embed internal and external JavaScript in
a web page.
Steps to Implement
1. Create the HTML file (index.html).
2. Write Internal JavaScript inside <script> tags.
3. Create an External JavaScript file (script.js) and link it.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embed Internal and External JavaScript</title>
<script>
// Internal JavaScript
function internalMessage() {
alert("Hello from Internal JavaScript!");
</script>
</head>
<body>
<h1>JavaScript Embedding Example</h1>
<button onclick="internalMessage()">Click for Internal JS</button>
<button onclick="externalMessage()">Click for External JS</button>
<!-- Linking External JavaScript -->
<script src="script.js"></script>
</body>
</html>
script.js
// External JavaScript
function externalMessage() {
alert("Hello from External JavaScript!");
Output
1. Clicking the first button shows an alert: "Hello from Internal JavaScript!"
2. Clicking the second button shows an alert: "Hello from External JavaScript!"
Outputs:
b. Write a program to explain the different ways for displaying output.
Steps to Implement
1. Create the HTML file (index.html).
2. Write Internal JavaScript inside <script> tags.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Output Methods</title>
</head>
<body>
<h1>JavaScript Output Methods</h1>
<button onclick="showAlert()">Show Alert</button>
<button onclick="writeToDocument()">Write to Document</button>
<button onclick="updateInnerHTML()">Update HTML</button>
<button onclick="logToConsole()">Log to Console</button>
<p id="output">This text will be updated.</p>
<script>
// 1. Display output using alert()
function showAlert() {
alert("This is an alert box!");
// 2. Display output using document.write()
function writeToDocument() {
document.write("This text is written using document.write()");
// 3. Display output using innerHTML
function updateInnerHTML() {
document.getElementById("output").innerHTML = "Updated using innerHTML!";
// 4. Display output using console.log()
function logToConsole() {
console.log("This is a console message.");
</script>
</body>
</html>
Output
1. Clicking “Show Alert” → Displays an alert box.
2. Clicking “Write to Document” → Overwrites the entire page with a message.
3. Clicking “Update HTML” → Updates the <p> element text.
4. Clicking “Log to Console” → Prints a message in the browser console.
c. Write a program to explain the different ways for taking input.
Steps to Implement
1. Create the HTML file (index.html).
2. Write Internal JavaScript inside <script> tags.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Input Methods</title>
</head>
<body>
<h1>JavaScript Input Methods</h1>
<button onclick="usePrompt()">Take Input using Prompt</button>
<button onclick="useConfirm()">Take Input using Confirm</button>
<br><br>
<!-- Input field -->
<label for="userInput">Enter your name: </label>
<input type="text" id="userInput" placeholder="Type something">
<button onclick="getInputValue()">Submit</button>
<p id="output"></p>
<script>
// 1. Taking input using prompt()
function usePrompt() {
let name = prompt("Enter your name:");
if (name) {
document.getElementById("output").innerHTML = "You entered: " + name;
} else {
document.getElementById("output").innerHTML = "You did not enter anything.";
}
// 2. Taking input using an HTML input field
function getInputValue() {
let inputValue = document.getElementById("userInput").value;
document.getElementById("output").innerHTML = "Input value: " + inputValue;
// 3. Taking input using confirm()
function useConfirm() {
let response = confirm("Do you like JavaScript?");
if (response) {
document.getElementById("output").innerHTML = "You clicked OK! 😊";
} else {
document.getElementById("output").innerHTML = "You clicked Cancel. 😢";
</script>
</body>
</html>
Outputs:
d. Create a webpage which uses prompt dialogue box to ask a voter for his name and age.
Display the information in table format along with either the voter can vote or not
Steps to Implement
1. Create the HTML file (index.html).
2. Write Internal JavaScript inside <script> tags.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voter Eligibility Check</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
table {
margin: 20px auto;
border-collapse: collapse;
width: 50%;
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
th {
background-color: #f2f2f2;
</style>
</head>
<body>
<h1>Voter Eligibility Checker</h1>
<script>
// Ask user for Name and Age
let name = prompt("Enter your name:");
let age = prompt("Enter your age:");
// Convert age to number
age = Number(age);
// Determine voter eligibility
let eligibility = (age >= 18) ? "Eligible to Vote ✅" : "Not Eligible to Vote ❌";
// Display the result in a table format
if (name && !isNaN(age)) {
document.write(`
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Voting Eligibility</th>
</tr>
<tr>
<td>${name}</td>
<td>${age}</td>
<td>${eligibility}</td>
</tr>
</table>
`);
} else {
document.write("<p style='color:red;'>Invalid input. Please refresh and enter valid
details.</p>");
</script>
</body>
</html>
Outputs:
