Table of Contents
Inline Javascript
How does Inline JavaScript work with HTML? Whenever a content tag is utilized in the HTML document, it is called inlining. This implies no outside JS document is utilized rather javascript is placed into a HTML record.
Present day code has moved from manual coding and modified designs to formats that give a system to compelling code creation processes. Particularly for front end code. Composing inline javascript is one of the numerous things you need to would when you like to fiddle with HTML.
Why inline javascript?
It is prescribed to inline javascript to decrease the quantity of javascript records that the program needs to download prior to showing the page.
What to consider is that a large portion of the documents are minuscule and have a couple of lines of code. It is proposed to connection such documents to the HTML.
Whenever you need to add an outside JavaScript sheet, you utilize the <script src = “”> tag, regarding where you are in the document.
A Browser will peruse your HTML record through and through, drag and burden your JavaScript document into spot, and start the content as needs be. This really intends that assuming you place your JavaScript bring in the extremely top and head region, your content will be executed preceding the DOM loads.
For a few outer contents, all DOM components should be stacked first, and it is hence prescribed to put the content src call at the base.
At the point when you compose inline JavaScript, how you are treating the content is like the src tag, then again, actually the code is by and large inside the HTML record, rather than being called remotely.
You simply need to duplicate the substance of your outside javascript document and glue them between the content labels of your HTML record.
<script> YOUR JAVASCRIPT HERE </script>
How does Inline JavaScript work with HTML?
Inline JavaScript can be accomplished by utilizing Script tag inside the body of the HTML, and on second thought of determining the source(src=”… “) of the JavaScript record in the Script tag, we need to compose all the JavaScript code inside the Script tag.
When we enter a name and press the submit button, the JavaScript code inside the content label will be set off and we will receive a spring up message with our name and hello message.
Note: Using Inline JavaScript is an awful practice and it isn’t suggested. It very well may be utilized for show purposes so the demonstrator doesn’t need to manage 2 separate documents all at once. It is prescribed to compose JavaScript code in a different .js record and afterward interface a similar utilizing src property in the content tag.
Syntax:
<script>
// JavaScript Code
</script>
Example:
<!DOCTYPE html> <html> <head> <title>Inline JavaScript</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= </head> <body> <div class="container"> <h1 style="text-align:center;color:green;"> GeeksforGeeks </h1> <form> <div class="form-group"> <label for="">Enter Your Name:</label> <input id="name" class="form-control" type="text" placeholder="Input Your Name Here"> </div> <div class="form-group"> <button id="btn-alert" class="btn btn-success btn-lg float-right" type="submit"> Submit </button> </div> </form> </div> <script> var user_name = document.getElementById("name"); document.getElementById("btn-alert").addEventListener("click", function(){ var value=user_name.value.trim(); if(!value) alert("Name Cannot be empty!"); else alert("Hello, " + value + "!\nGreetings From GeeksforGeeks."); }); </script></body> </html> |
Output:
eevibes
Enter Your Name