Experiment – 6
Applying JavaScript - internal and external, I/O, Type Conversion
6.A)AIM: Write a program to embed internal and external JavaScript in a web page.
DESCRIPTION: In this program, we will demonstrate how to embed JavaScript
both internally (within the HTML file) and externally (through an external .js file).
JavaScript is commonly used for enhancing the functionality of web pages, handling
events, validating forms, etc.
[Link] JavaScript: This involves writing JavaScript code directly within the HTML file.
The script is included using the <script> tag.
The <script> tag in the <head> section contains JavaScript code that defines a function
showMessage().
When the button is clicked, the showMessage() function is called, which shows an alert
message.
[Link] JavaScript: This involves writing JavaScript code in a separate file (with .js
extension) and linking it to the HTML file using the <script> tag with the src attribute.
The external JavaScript file [Link] is linked using the <script
src="[Link]"></script> tag in the body of the HTML.
The function showExternalMessage() is defined inside the external file and can be called
similarly (you could create another button to trigger it).
File name: jsdemo/[Link]
<html>
<head>
<title>Internal and External JavaScript</title>
<script>
// Internal JavaScript Function
function showInternalMessage() {
alert("This is an alert from the internal JavaScript block!");
</script>
</head>
<body>
<h1>Internal and External JavaScript Demo</h1>
<p>Click the buttons below to see the internal and external JavaScript in action.</p>
<!-- Button for Internal JavaScript -->
<button onclick="showInternalMessage()">Run Internal JavaScript</button>
<!-- Button for External JavaScript -->
<button onclick="showExternalMessage()">Run External JavaScript</button>
<!-- Link to External JavaScript -->
<script src="[Link]"></script>
</body>
</html>
File name: jsdemo/[Link]
// External JavaScript Function
function showExternalMessage() {
alert("This is an alert from the external JavaScript file!");
}
6.B)AIM: Write a program to explain the different ways for displaying output.
DESCRIPTION : In this program, we will explore different ways to display output in a
web page using JavaScript. JavaScript provides several methods for displaying information to
the user, including:
1. alert(): A simple popup box to display information.
2. [Link](): Directly writes content to the HTML document.
3. [Link](): Logs information to the browser's console.
4. Modifying HTML Content (via DOM manipulation): Using JavaScript to change the
content of an HTML element.
PROGRAM:
<html>
<head>
<title>Output in JavaScript</title>
</head>
<body>
<h1>Output in JavaScript</h1>
<!-- Placeholder for innerHTML output -->
<div id="innerHtmlOutput" style="border: 1px solid #000; padding: 10px; margin-
bottom: 10px;">
<!-- Content will be added here using JavaScript -->
</div>
<!-- Placeholder for [Link] demonstration -->
<p>Open the browser's console to see the <strong>[Link]()</strong>
output.</p>
<!-- Button to demonstrate alert -->
<button onclick="showAlert()">Click to See Alert</button>
<!-- Script with examples -->
<script>
// Example 1: Using [Link]()
[Link]("<p><strong>Document Write:</strong> This text is written directly
to the document.</p>");
// Example 2: Using innerHTML
[Link]("innerHtmlOutput").innerHTML =
"<strong>InnerHTML:</strong> This text is inserted into a specific HTML
element.";
// Example 3: Using alert()
function showAlert() {
alert("This is an alert box message!");
// Example 4: Using [Link]()
[Link]("Console Log: This message is displayed in the browser console.");
</script>
</body>
</html>
6.C)AIM: Write a program to explain the different ways for taking input.
DESCRIPTION: In JavaScript, there are various ways to take input from the user. These
methods allow you to interact with the user, such as getting data from forms, prompts, or through
the URL. Here are the most common methods of taking input in JavaScript:
1. prompt(): A simple dialog box that prompts the user for input.
2. HTML Forms: Using input fields in HTML forms to gather user data.
3. [Link](): Not natively supported in browsers, but used in [Link] for server-side
input.
4. Event Listeners for user interaction: Capturing input via events such as clicks,
keypresses, etc.
PROGRAM:
<html>
<head>
<title>Input in JavaScript</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1 class="text-3xl text-center">Input in JavaScript</h1>
<div class="p-4">
<!-- Input using prompt -->
<button class="bg-green-500 text-white p-2 rounded hover:bg-green-700"
onclick="takeInputUsingPrompt()">Take Input using Prompt</button>
<p id="promptOutput" class="font-semibold"></p>
<!-- Input using form elements -->
<h3 class="mt-4">Input using Form Elements:</h3>
<form id="inputForm">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name" class="bg-gray-
200 outline-none rounded p-2">
<button class="bg-green-500 text-white p-2 rounded hover:bg-green-700"
type="button" onclick="takeInputFromForm()">Submit</button>
</form>
<p id="formOutput" class="font-semibold"></p>
<!-- Input using event listeners -->
<h3 class="mt-4">Input using Event Listener:</h3>
<input type="text" id="eventInput" placeholder="Type something..."
oninput="displayEventInput([Link])" class="bg-gray-200 outline-none rounded p-2">
<p id="eventOutput" class="font-semibold"></p>
</div>
<script>
// Example 1: Taking input using `prompt()`
function takeInputUsingPrompt() {
let input = prompt("Enter your name:");
if (input) {
[Link]("promptOutput").innerText = "You entered: " +
input;
} else {
[Link]("promptOutput").innerText = "No input provided.";
// Example 2: Taking input from form elements
function takeInputFromForm() {
let name = [Link]("name").value;
if (name) {
[Link]("formOutput").innerText = "Form input: " + name;
} else {
[Link]("formOutput").innerText = "Please enter a name.";
}
// Example 3: Taking input using event listeners (real-time input tracking)
function displayEventInput(value) {
[Link]("eventOutput").innerText = "Event input: " + value;
</script>
</body>
</html>
6.D)AIM: 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: In this program, we will create a webpage that uses a prompt() dialog box
to ask the user for their name and age. After collecting this information, we will display the data
in a table format along with a message indicating whether the user is eligible to vote based on
their age.
1. HTML: Defines the structure of the webpage, including a table for displaying the
information.
2. JavaScript: Uses the prompt() dialog box to collect input (name and age) and
checks if the user is eligible to vote (age 18 or above).
PROGRAM:
<html>
<head>
<title>Voter Eligibility Check</title>
<script src="[Link]
<style type="text/tailwindcss">
body {
@apply bg-orange-200 flex flex-col items-center p-8;
h1 {
@apply text-orange-500 text-5xl font-bold;
form {
@apply bg-white rounded p-4 m-4 flex flex-col w-1/3;
input {
@apply outline-none border-black border-2 p-2 px-4 mb-4;
button {
@apply bg-orange-500 text-center p-2 font-semibold;
p{
@apply text-green-800 border border-green-500 bg-green-200 p-4 rounded-lg;
</style>
</head>
<body>
<h1>Voter Eligibility Check</h1>
<form onsubmit="checkEligibility(event)">
<label for="age">Enter your age:</label>
<input type="number" id="age" name="age" placeholder="age" required>
<button type="submit">Check Eligibility</button>
</form>
<p id="result" class="invisible"></p>
<script>
function checkEligibility(event) {
[Link](); // Prevent form submission
const age = [Link]('age').value;
const resultElement = [Link]('result');
[Link]("invisible")
if (age >= 18) {
[Link] = "You are eligible to vote!";
} else {
[Link] = "You are not eligible to vote!";
</script>
</body>
</html>