Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why do we Use JavaScript in HTML?
First, we will learn about what JavaScript is. When a web website does more than sit there and present you with static information, such as showing timely content updates, interactive maps, animated 2D/3D visuals, scrolling video jukeboxes, etc. JavaScript will almost certainly be used. In addition, you can add advanced functionality to websites by using the scripting or programming language JavaScript. The first two layers of the layer cake made up of standard web technologies were HTML and CSS. This layer is the third one.
Layers of a Web Page
The markup language we use to structure and define the meaning of our web content is called HTML. Using HTML, we can define paragraphs, headings, and data tables and embed images and videos into web pages.
CSS, which stands for Cascading Style Sheets, is a language of style rules we use to apply styling to our HTML content, such as establishing background colors and fonts and organizing it into numerous columns.
JavaScript is a scripting language that enables you to do everything, including building dynamically updated material, managing multimedia, and animating graphics. What you can accomplish with a few lines of JavaScript code is remarkable.
Uses of JavaScript in Web Development
JavaScript is a computer language used on the web. JavaScript can be used to update and modify HTML and CSS. It can be used to calculate, alter, and validate data. Users can interact with web pages using JavaScript. There are practically no limitations on what you may accomplish with JavaScript; the following are just a few examples of usage for it on a web page −
You can disclose or hide more information by pressing a button.
The color of a button changes when the mouse is over it.
The website has a carousel of images that you can scroll through.
Zooming in or out on a photo, using a timer or countdown on a website,
Playing audio and video content within a page,
Animating and displaying, using a hamburger drop-down menu, and more.
Purpose of JavaScript on a Webpage
You are executing your code (the HTML, CSS, and JavaScript) inside an execution environment when you load a web page in your browser (the browser tab). This is similar to a factory that inputs raw materials (the code) and produces a finished good (the web page).
Through the Document Object Model API, JavaScript is frequently used to edit HTML and CSS to update a user experience dynamically. Remember that your web documents' code typically loads and runs in the order it appears on the page. If JavaScript is loaded and run before the HTML and CSS, it is meant to modify, errors could happen.
How can JavaScript be Added to a Page?
Similar to how CSS is applied to your HTML page, JavaScript is also. However, JavaScript needs one tag of HTML, the <script>.
In the example below, we will learn how users can embed the JavaScript code inside the head tag using the script element in the HTML file.
Example
As shown in the example below, we have embedded JavaScript in an HTML file to modify HTML. Inside the script tag, we have taken a function called "ParaChange." We have created a "Click Here" button inside the body tag. The ParaChange function will be invoked by on click event of the button. The function manipulates the p tag using the document.getElementById() of DOM and changes the statement.
<html>
<head>
<script>
// inside the head tag is a script tag.
// The onclick event calls the parachange function
function ParaChange() {
document.getElementById("para").innerHTML = "The line has changed.";
}
</script>
</head>
<body>
<h2>Including JavaScript in HTML document in <i>Head tag</i></h2>
<p id="para">The is a line</p>
<button type="button" onclick="ParaChange()">Click Here</button>
</body>
</html>
Users may notice that the paragraph line inside the p tag for the click event has changed due to clicking the button. This is because the "ParaChange" function, which is written inside the script tag in the head tag, is called during this click event.
In this way, we can use JavaScript in HTML by writing complex code to create our page of flexible and dynamic.
944 Views
