FULL STACK DEVELOPMENT – II
LAB MANUAL
[Link] to Modern JavaScript and DOM:
JavaScript is a high-level, interpreted programming language used to make web pages
interactive.
Modern JavaScript (ES6 and later versions) introduced many powerful features such as let,
const, arrow functions, template literals, classes, modules, promises, and async/await,
making code simpler and more efficient.
The Document Object Model (DOM) is a programming interface for HTML and XML
documents. It represents a web page as a tree of objects, allowing JavaScript to access,
modify, add, or delete HTML elements dynamically.
Together, JavaScript and the DOM enable developers to build interactive and responsive web
applications.
1.a). Write a JavaScript program to Link JavaScript file with the HTML page?
Aim
To create an HTML page and link an external JavaScript file to it, demonstrating how
JavaScript adds interactivity to a web page.
Procedure
1. Open a text editor such as Visual Studio Code or Notepad++.
2. Create a new HTML file and save it as [Link].
3. Create a new JavaScript file and save it as [Link].
4. Write the HTML code in [Link].
5. Link the JavaScript file using the <script src="[Link]"></script> tag before the
closing </body> tag.
6. Write the JavaScript code in [Link].
7. Save both files in the same folder.
8. Open [Link] in a web browser.
9. Click the button to verify that the linked JavaScript file executes successfully.
Source Code
HTML File ([Link])
<!DOCTYPE html>
<html>
<head>
<title>Link JavaScript with HTML</title>
</head>
<body>
<h2>JavaScript External File Example</h2>
<button onclick="showMessage()">Click Here</button>
<script src="[Link]"></script>
</body>
</html>
JavaScript File ([Link])
function showMessage()
{
alert("JavaScript file is successfully linked with the HTML page.");
}
Input
User Action:
Click the "Click Here" button on the web page.
Output
JavaScript file is successfully linked with the HTML page.
(The above message appears in an alert box when the button is clicked.)
Result
The external JavaScript file was successfully linked with the HTML page. When the user
clicked the button, the JavaScript function executed and displayed an alert message,
confirming that the HTML page and JavaScript file were correctly connected.
1.b) Write a JavaScript program to select the elements in HTML page using
selectors?
Aim
To write a JavaScript program to select HTML elements using different DOM selectors such
as getElementById(), getElementsByClassName(), getElementsByTagName(), and
querySelector().
Procedure
1. Open any text editor (Visual Studio Code, Notepad++, etc.).
2. Create an HTML file named [Link].
3. Add HTML elements such as heading, paragraph, and button.
4. Create a JavaScript file named [Link].
5. Link the JavaScript file to the HTML page using the <script> tag.
6. Use different DOM selector methods to select HTML elements.
7. Modify the selected elements using JavaScript.
8. Save both files and open [Link] in a web browser.
9. Observe the changes displayed on the webpage.
Source Code
[Link]
<!DOCTYPE html>
<html>
<head>
<title>HTML Element Selectors</title>
</head>
<body>
<h1 id="heading">Welcome to JavaScript</h1>
<p class="message">This is the first paragraph.</p>
<p class="message">This is the second paragraph.</p>
<button onclick="changeContent()">Click Here</button>
<script src="[Link]"></script>
</body>
</html>
[Link]
function changeContent() {
// Select element by ID
[Link]("heading").innerHTML = "DOM Selectors Example";
// Select element by Class Name
[Link]("message")[0].[Link] = "blue";
// Select element by Tag Name
[Link]("p")[1].[Link] = "bold";
// Select element using querySelector
[Link](".message").[Link] = "yellow";
}
Input
User clicks the "Click Here" button.
Output
Heading changes to:
DOM Selectors Example
First paragraph:
Text color becomes Blue.
Background color becomes Yellow.
Second paragraph:
Text becomes Bold.
Result
The JavaScript program was successfully executed. HTML elements were selected using
different DOM selectors (getElementById(), getElementsByClassName(),
getElementsByTagName(), and querySelector()), and their properties were modified
successfully.
1.c) Write a JavaScript program to implement the event listeners?
Aim
To write a JavaScript program to implement event listeners using the addEventListener()
method and perform an action when the user clicks a button.
Procedure
1. Open a text editor such as Visual Studio Code or Notepad.
2. Create an HTML file named [Link].
3. Add a heading and a button to the HTML page.
4. Create a JavaScript file named [Link].
5. Link the JavaScript file with the HTML page using the <script> tag.
6. Use the addEventListener() method to attach a click event to the button.
7. Write a JavaScript function to change the heading text when the button is clicked.
8. Save both files.
9. Open the [Link] file in a web browser.
10. Click the button and observe the output.
Source Code
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Event Listener Example</title>
</head>
<body>
<h2 id="message">Welcome to JavaScript</h2>
<button id="btn">Click Me</button>
<script src="[Link]"></script>
</body>
</html>
[Link]
// Select the button element
let button = [Link]("btn");
// Add an event listener to the button
[Link]("click", function () {
[Link]("message").innerHTML = "Button Clicked Successfully!";
});
Input
User clicks the "Click Me" button.
Output
Before Clicking the Button:
Welcome to JavaScript
[Click Me]
After Clicking the Button:
Button Clicked Successfully!
Result
The JavaScript program was successfully executed. The addEventListener() method was used
to handle the click event, and the heading text changed successfully when the button was
clicked.
1.d). Write a JavaScript program to handle the click events for the HTML
buttons elements?
Aim
To write a JavaScript program to handle click events for HTML button elements and perform
different actions when each button is clicked.
Procedure
1. Open a text editor such as Visual Studio Code or Notepad.
2. Create an HTML file named [Link].
3. Add a heading and two buttons to the HTML page.
4. Create a JavaScript file named [Link].
5. Link the JavaScript file with the HTML page using the <script> tag.
6. Select the button elements using getElementById().
7. Use the addEventListener() method to handle the click events of the buttons.
8. Write JavaScript functions to change the heading text when the buttons are clicked.
9. Save both files and open [Link] in a web browser.
10. Click the buttons and observe the changes.
Source Code
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Button Click Event Example</title>
</head>
<body>
<h2 id="message">Welcome to JavaScript</h2>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<script src="[Link]"></script>
</body>
</html>
[Link]
// Select the buttons
let button1 = [Link]("btn1");
let button2 = [Link]("btn2");
// Handle click event for Button 1
[Link]("click", function () {
[Link]("message").innerHTML = "Button 1 Clicked!";
});
// Handle click event for Button 2
[Link]("click", function () {
[Link]("message").innerHTML = "Button 2 Clicked!";
});
Input
User clicks Button 1.
User clicks Button 2.
Output
Before Clicking the Buttons:
Welcome to JavaScript
[Button 1] [Button 2]
After Clicking Button 1:
Button 1 Clicked!
After Clicking Button 2:
Button 2 Clicked!
Result
The JavaScript program was successfully executed. The click events for the HTML button
elements were handled using the addEventListener() method, and the heading text changed
according to the button clicked.
1.e). Write a JavaScript program to with three types of functions
i). Function Declaration
ii). Function definition
iii).Arrow functions
Aim
To write a JavaScript program demonstrating three types of functions: Function Declaration,
Function Expression (Function Definition), and Arrow Function, and display their outputs.
Procedure
1. Open a text editor such as Visual Studio Code or Notepad.
2. Create an HTML file named [Link].
3. Add a heading and a button to the HTML page.
4. Create a JavaScript file named [Link].
5. Link the JavaScript file with the HTML page using the <script> tag.
6. Define a Function Declaration, a Function Expression, and an Arrow Function.
7. Call all three functions when the button is clicked.
8. Display the results in the HTML page.
9. Save both files and open [Link] in a web browser.
10. Click the button and observe the output.
Source Code
[Link]
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Functions Example</title>
</head>
<body>
<h2>Types of JavaScript Functions</h2>
<button onclick="displayFunctions()">Show Output</button>
<p id="output"></p>
<script src="[Link]"></script>
</body>
</html>
[Link]
// Function Declaration
function greet() {
return "Function Declaration: Welcome to JavaScript!";
}
// Function Expression (Function Definition)
const message = function () {
return "Function Expression: Learning JavaScript Functions.";
};
// Arrow Function
const arrow = () => {
return "Arrow Function: JavaScript is Easy!";
};
// Display all function outputs
function displayFunctions() {
[Link]("output").innerHTML =
greet() + "<br>" +
message() + "<br>" +
arrow();
}
Input
User clicks the "Show Output" button.
Output
Before Clicking the Button:
Types of JavaScript Functions
[Show Output]
After Clicking the Button:
Function Declaration: Welcome to JavaScript!
Function Expression: Learning JavaScript Functions.
Arrow Function: JavaScript is Easy!
Result
The JavaScript program was successfully executed. The three types of functions—Function
Declaration, Function Expression (Function Definition), and Arrow Function—were
implemented successfully, and their outputs were displayed on the web page when the
button was clicked.
[Link] of React. Js: