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.
DESCRIPTION:
JavaScript: JavaScript (JS) is a lightweight, interpreted, object-based scripting language used
to make web pages interactive and dynamic.
It runs on the client side (browser) and is widely used to:
Respond to user actions (clicks, input, etc.)
Validate forms
Manipulate HTML and CSS
Display dynamic content without reloading the page
JavaScript works along with HTML (structure) and CSS (design) to create complete web
applications.
JavaScript in HTML
JavaScript can be included in an HTML document in two main ways:
Internal JavaScript is written inside the <script> tag within the HTML file itself.
It is useful for small scripts that are used only in a single web page.
External JavaScript is written in a separate .js file and linked to the HTML file using
the <script src=""> tag.
It improves code reusability, readability, and maintenance, especially for large projects.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<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="[Link]"></script>
</body>
</html>
[Link]
// External JavaScript
Aditya College of Engineering and Technology (A) Reg. No.:
function externalMessage() {
alert ("Hello from External JavaScript!");
}
OUTPUT:
b. Write a program to explain the different ways for displaying output.
DESCRIPTION:
JavaScript provides multiple ways to show results, each useful in different situations:
1. innerHTML
The innerHTML property is used with the HTML element. JavaScript can be used to
select an element using the [Link](id) method, and then use the
innerHTML property to display the output on the specified element (selected element).
2. [Link]()
Shows output in the browser console (Developer Tools).
Mostly used for debugging during development.
3. [Link]()
Writes text directly to the web page while the page is loading.
If used after the page load, it can overwrite the entire page content.
4. [Link]()
Displays output in a popup alert box that the user must close.
5. Additional methods
[Link]() opens the browser print dialog.
[Link]() asks user input (not exactly output).
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<button onclick="printPage()">Print Page</button>
<p id="output">This text will be updated using innerHTML.</p>
<script>
// 1. Display output using alert()
function showAlert() {
alert("This is an alert box!");
}
// 2. Display output using [Link]()
function writeToDocument() {
[Link]("This text is written using [Link]()");
}
// 3. Display output using innerHTML
function updateInnerHTML() {
[Link]("output").innerHTML = "Updated using innerHTML!";
}
// 4. Display output using [Link]()
Aditya College of Engineering and Technology (A) Reg. No.:
function logToConsole() {
[Link]("This is a console message.");
}
// 5. Display output using [Link]()
function printPage() {
[Link]();
}
</script>
</body>
</html>
OUTPUT:
c. Write a program to explain the different ways for taking input.
DESCRIPTION:
JavaScript is a client-side scripting language that allows interaction with users by taking
input dynamically.
Taking user input is important to make web pages interactive and responsive.
JavaScript provides several ways to take input from users depending on the
requirement.
The prompt() method is used to take textual input through a dialog box.
The confirm() method is used to take user input in the form of confirmation (OK or
Cancel).
User input can also be taken using HTML input elements such as text boxes, where
values are accessed using the .value property.
Conditional statements are used to handle and process the input provided by the user.
These input methods help in collecting user data and performing appropriate actions
based on the input.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<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)
{
Aditya College of Engineering and Technology (A) Reg. No.:
[Link]("output").innerHTML = "HELLO! " + name;
}
else
{
[Link]("output").innerHTML = "You did not enter anything.";
}
}
// 2. Taking input using an HTML input field
function getInputValue()
{
let inputValue = [Link]("userInput").value;
[Link]("output").innerHTML = "Input value: " + inputValue;
}
// 3. Taking input using confirm()
function useConfirm()
{
let response = confirm("Do you like JavaScript?");
if (response)
{
[Link]("output").innerHTML = "You clicked OK! ";
}
else
{
[Link]("output").innerHTML = "You clicked Cancel. ";
}
}
</script>
</body>
</html>
OUTPUT:
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.
DESCRIPTION:
JavaScript is a client-side scripting language used to make web pages interactive by
allowing communication between the user and the browser. One of the simplest ways to
collect user input in JavaScript is by using the prompt() dialog box, which allows users to
enter data at runtime.
In this program, the prompt() dialog box is used to ask the voter for name and age. The
entered values are processed using conditional statements to determine whether the voter
is eligible to vote or not based on the voting age criteria (18 years and above).
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Voter Eligibility Check</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
Aditya College of Engineering and Technology (A) Reg. No.:
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)) {
[Link](`
<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
{
[Link]("<p style='color:red;'>Invalid input. Please refresh and enter valid
details.</p>");
}
</script>
Aditya College of Engineering and Technology (A) Reg. No.:
</body>
</html>
OUTPUT:
Aditya College of Engineering and Technology (A) Reg. No.:
