Scribd
Upload
24 views18 pages

FSD - Experiment - VI - For II-II-CSE-A - 6abcd

The document provides a comprehensive guide on applying JavaScript in web pages, covering internal and external JavaScript embedding, various output methods, input techniques, and creating a voter eligibility check webpage. It includes source code examples for each topic, demonstrating how to use JavaScript functions, HTML forms, and event listeners effectively. The final section outlines a practical application where user input is collected via prompts and displayed in a table format, indicating voter eligibility based on age.

Uploaded by

DEVIKA G
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views18 pages

FSD - Experiment - VI - For II-II-CSE-A - 6abcd

The document provides a comprehensive guide on applying JavaScript in web pages, covering internal and external JavaScript embedding, various output methods, input techniques, and creating a voter eligibility check webpage. It includes source code examples for each topic, demonstrating how to use JavaScript functions, HTML forms, and event listeners effectively. The final section outlines a practical application where user input is collected via prompts and displayed in a table format, indicating voter eligibility based on age.

Uploaded by

DEVIKA G
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

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:
This program is how to embed both internal JavaScript and external JavaScript in a web page.

1. Internal JavaScript:
o The <script> tag inside the HTML <body> contains a JavaScript function named
internalFunction().
o This function modifies the text of the <p> element with the id="message" when the
corresponding button is clicked.
2. External JavaScript:
o The <script src="external-script.js"></script> in the <head> links to the external
JavaScript file.
o The external-script.js file contains the externalFunction(), which also updates the same
paragraph element when its button is clicked.
3. Styling:
o Basic CSS is used to style the buttons for better visual presentation.

Source Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Internal and External JavaScript Example</title>

<!-- Link to External JavaScript File -->

<script src="external-script.js"></script>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

.button {

margin: 10px 0;

padding: 10px 20px;

background-color: #007bff;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

.button:hover {

background-color: #0056b3;

}
</style>

</head>

<body>

<h1>Internal and External JavaScript Example</h1>

<p id="message">Click the buttons to see the JavaScript in action!</p>

<!-- Button for Internal JavaScript -->

<button class="button" onclick="internalFunction()">Run Internal JavaScript</button>

<!-- Button for External JavaScript -->

<button class="button" onclick="externalFunction()">Run External JavaScript</button>

<!-- Internal JavaScript -->

<script>

function internalFunction() {

document.getElementById('message').innerText = 'Internal JavaScript executed!';

</script>

</body>

</html>

External JavaScript File: external-script.js

function externalFunction() {

document.getElementById('message').innerText = 'External JavaScript executed!';


}

How It Works:

1. Save the external JavaScript code in a file named external-script.js in the same directory as the
HTML file.
2. Open the HTML file in a web browser.
3. Click the "Run Internal JavaScript" button to execute the internal JavaScript function.
4. Click the "Run External JavaScript" button to execute the external JavaScript function.

Result: This program executed successfully and Each button click will update the message displayed in
the <p> element.

Output:
b. Write a program to explain the different ways for displaying output
Description:

Output Methods:

1. alert():
oDisplays a pop-up message to the user.
oUsed for simple notifications or warnings.
oExample: Clicking the "Show Alert Output" button will trigger an alert box.
2. console.log():
o Logs messages to the browser's developer console.
o Useful for debugging and monitoring code behavior.
o Example: Clicking the "Show Console Output" button will log a message to the console
(accessible with developer tools).
3. innerHTML:
o Dynamically updates the content of an HTML element.
o Often used to modify content within specific elements on the page.
o Example: Clicking the "Display Output in Page" button updates the text in the div with
id="innerHTMLOutput".
4. document.write():
o Writes content directly to the document.
o Commonly used in simple examples but not recommended for modern development
(especially after the document is fully loaded).
o Example: Clicking the "Write to Page Directly" button updates the div with
id="documentWriteOutput".

Source Code:

Inner .html

<html>

<body>

<h1>My Web Page</h1>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "<h2>Hello World</h2>";

</script>

</body>
</html>

Output:

Using innerText

To access an HTML element, use the document.getElementById(id) method.

Then use the innerText property to change the inner text of the HTML element:

<html>
<body>
<h1>My Web Page</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerText = "Hello World";
</script>
</body>
</html>
Output:

Using document.write()
For testing purposes, it is convenient to use document.write():
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">add elements click here</button>
</body>
</html>
Output:
Using window.alert()
You can use an alert box to display data

<!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>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

line-height: 1.6;

.output {

margin: 10px 0;

padding: 10px;

border: 1px solid #ccc;

background-color: #f9f9f9;

</style>
</head>

<body>

<h1>JavaScript Output Methods</h1>

<!-- For document.write() -->

<div class="output" id="documentWriteOutput"></div>

<!-- For innerHTML -->

<div class="output" id="innerHTMLOutput"></div>

<!-- Buttons to demonstrate output methods -->

<button onclick="useAlert()">Show Alert Output</button>

<button onclick="useConsoleLog()">Show Console Output</button>

<button onclick="useInnerHTML()">Display Output in Page</button>

<button onclick="useDocumentWrite()">Write to Page Directly</button>

<script>

// 1. Alert box

function useAlert() {

alert("This is an alert message! It is used for showing simple pop-up notifications.");

// 2. Console.log

function useConsoleLog() {
console.log("This is output displayed in the browser's console.");

// 3. Writing into an HTML element using innerHTML

function useInnerHTML() {

document.getElementById("innerHTMLOutput").innerHTML = "This output is written using


innerHTML!";

// 4. Writing directly to the document using document.write

function useDocumentWrite() {

document.getElementById("documentWriteOutput").innerHTML = "This content was written


using document.write!";

</script>

</body>

</html>

Output:
How to Use:

1. Open the file in a browser.


2. Click each button to see the corresponding output method in action:
o Alert: Displays a pop-up notification.
o Console Log: Outputs a message to the developer console.
o innerHTML: Updates content on the page.
o Document Write: Writes content to the page directly.

Result: This program executed successfully how different output methods are used based on specific use
cases.

c. Write a program to explain the different ways for taking input.


Description:

Input Methods:

1. Using prompt():
o A pop-up dialog box appears, asking the user to input text.
o The input is captured in a variable and displayed on the page.
o Example: Clicking the "Input via Prompt" button triggers the prompt.
2. Using HTML Form:
o A form contains an input field and a button.
o The value of the input field is retrieved when the button is clicked.
o Example: Typing into the text box and clicking "Submit" displays the input below.
3. Using Event Listener:
o An input event listener is attached to a text field.
o The listener captures and displays the input as the user types.
o Example: As the user types in the "Type something" field, the text is displayed in real-
time.

Source Code:
<!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>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
}
.output {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
input, button {
margin: 5px 0;
padding: 8px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>JavaScript Input Methods</h1>

<!-- Input using prompt() -->


<button onclick="usePrompt()">Input via Prompt</button>
<div class="output" id="promptOutput"></div>

<!-- Input using HTML Form -->


<h2>Input using HTML Form</h2>
<form id="formInput">
<label for="textInput">Enter Text:</label>
<input type="text" id="textInput" placeholder="Type something..." />
<button type="button" onclick="useFormInput()">Submit</button>
</form>
<div class="output" id="formOutput"></div>

<!-- Input using Event Listener -->


<h2>Input using Event Listener</h2>
<label for="listenerInput">Type something:</label>
<input type="text" id="listenerInput" placeholder="Start typing..." />
<div class="output" id="listenerOutput"></div>
<script>
// 1. Taking Input using prompt()
function usePrompt() {
const userInput = prompt("Enter your name:");
if (userInput) {
document.getElementById("promptOutput").innerText = `You entered: ${userInput}`;
} else {
document.getElementById("promptOutput").innerText = "No input provided.";
}
}

// 2. Taking Input using HTML Form


function useFormInput() {
const userInput = document.getElementById("textInput").value;
if (userInput.trim() !== "") {
document.getElementById("formOutput").innerText = `You entered: ${userInput}`;
} else {
document.getElementById("formOutput").innerText = "Please enter some text.";
}
}

// 3. Taking Input using Event Listener


document.getElementById("listenerInput").addEventListener("input", function (event) {
const userInput = event.target.value;
document.getElementById("listenerOutput").innerText = `You are typing: ${userInput}`;
});
</script>
</body>
</html>

Output:
How to Use:

1. Open the file in a browser.


2. Test each input method:
o Prompt: Click the "Input via Prompt" button, type in the prompt dialog, and see the
result.
o HTML Form: Type into the form field, click "Submit," and see the input displayed.
o Event Listener: Start typing into the "Type something" field, and see real-time feedback
below it.

Result: This program executed successfully how to take user input in various ways, suitable for different
scenarios.
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:

a webpage that uses a prompt dialog box to collect a voter's name and age, then displays the information
in a table along with a message indicating whether the voter is eligible to vote.

How It Works:

1. Prompts:
o The checkVoter() function uses the prompt() method to collect the voter's name and age.
o If the user enters invalid data (e.g., blank name or non-numeric age), an alert is displayed,
and the process ends.
2. Eligibility Check:
o If the voter's age is 18 or above, they are considered eligible to vote; otherwise, they are
not eligible.
o Eligibility is determined using a simple conditional check (age >= 18).
3. Dynamic Table:
o The voter's details (name, age, and eligibility status) are dynamically added as a new row
to the table using innerHTML.
4. Styling:
o The table and eligibility messages are styled using CSS.
o Eligible voters are displayed in green, while those not eligible are displayed in red.

Source Code:

<!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;
margin: 20px;
line-height: 1.6;
}
table {
width: 50%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
.eligible {
color: green;
font-weight: bold;
}
.not-eligible {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Voter Eligibility Check</h1>
<button onclick="checkVoter()">Enter Voter Details</button>

<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Eligibility</th>
</tr>
</thead>
<tbody id="voterTableBody">
<!-- Voter information will be appended here -->
</tbody>
</table>

<script>
function checkVoter() {
// Prompt the user for name and age
const name = prompt("Enter your name:");
const age = prompt("Enter your age:");

if (!name || !age || isNaN(age)) {


alert("Please provide valid name and age.");
return;
}

// Determine voter eligibility


const eligibility = age >= 18 ? "Eligible to Vote" : "Not Eligible to Vote";
const eligibilityClass = age >= 18 ? "eligible" : "not-eligible";

// Append the information to the table


const tableBody = document.getElementById("voterTableBody");
const row = `
<tr>
<td>${name}</td>
<td>${age}</td>
<td class="${eligibilityClass}">${eligibility}</td>
</tr>
`;
tableBody.innerHTML += row;
}
</script>
</body>
</html>

Output:
How to Use:

1. Open the file in a browser.


2. Click the "Enter Voter Details" button.
3. Enter the voter's name and age in the prompt dialog boxes.
4. The information will be displayed in the table, including whether the voter is eligible to vote.

Result: This program executed successfully and repeat this process for multiple voters to see their details
added to the table.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy