HTML JavaScript
HTML
The <script> makes HTML elements live in a document.
The HTML <script> tag is used to embed executable client-side scripts, usually JavaScript, within an HTML document.
It can be used in two primary ways: embedding JavaScript directly(also called internal script) or linking to an external JavaScript file(also called external script).
Scripting in HTML
JavaScript makes HTML elements capable of doing user interactions.
Script can be internal in the document or external from the document.
Internal script overwrites external script if applied on the same elements.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Internal Script
HTML internal script refers to JavaScript code embedded directly within an HTML document using the <script> tag.
This method is suitable for small scripts specific to a single HTML page.
The internal script overwrites the external script when applied to the same element.
<script>
var elmnt = document.getElementById("id1");
elmnt.innerHTML = "Element is Changed by JavaScript";
elmnt.style.backgroundColor = "#505050";
elmnt.style.padding = "20px";
elmnt.style.color = "#fff";
</script>
Internal Script
The text and style of the element changes when the page loads and the script runs.
Example
<!DOCTYPE html>
<html>
<!-- Example: JavaScript Tag -->
<head>
<title>Internal Script Example</title>
</head>
<body>
<p>Internal Script Example.</p>
<h1>Welcome to w3context.</h1>
<p id="id1">Hello World!</p>
<script>
var elmnt = document.getElementById("id1");
elmnt.innerHTML = "Element is Changed by JavaScript";
elmnt.style.backgroundColor = "#505050";
elmnt.style.padding = "20px";
elmnt.style.color = "#fff";
</script>
</body>
</html>
Click on the "See output" button to see how it works.
Internal Script
The text and style of the element changes when the button clicks and the script runs.
Example
<!DOCTYPE html>
<html>
<!-- Example: JavaScript Tag -->
<head>
<title>Internal Script Example</title>
<style>
input[type="button"] {
background-color: #a005a0;
color:#fff;
border-radius:5px;
padding: 15px;
}
</style>
</head>
<body>
<p>Internal Script Example.</p>
<h1>Welcome to w3context.</h1>
<p id="id1">Hello World!</p>
<input type="button" onclick="m1();" value="Click Here"/>
<script>
function m1(){
var elmnt = document.getElementById("id1");
elmnt.innerHTML = "Element is Changed by JavaScript";
elmnt.style.backgroundColor = "#505050";
elmnt.style.padding = "20px";
elmnt.style.color = "#fff";
}
</script>
</body>
</html>
Click on the "See output" button to see how it works.
Internal Script
Add two numbers when the mouse hover on a element.
Example
<!DOCTYPE html>
<html>
<!-- Example: JavaScript Tag -->
<head>
<title>Internal Script Example</title>
<style>
input[type="button"] {
background-color: #a005a0;
color: #fff;
border-radius: 5px;
padding: 15px;
}
input[type="text"] {
background-color: #c2dcff;
color: #000;
border-radius: 5px;
margin: 5px 0 5px 0;
padding: 15px;
}
</style>
</head>
<body>
<p>Internal Script Example.</p>
<h4>Enter Numbers in the text fields and hover on the result.</h4>
<input type="text" id="t1" placeholder="Enter a number" value="15" /><br>
<input type="text" id="t2" placeholder="Enter a number" value="10" /><br>
<p id="id1" onmouseover="m1();">Result:</p>
<script>
var elmnt = document.getElementById("id1");
elmnt.style.backgroundColor = "#505050";
elmnt.style.padding = "20px";
elmnt.style.color = "#fff";
function m1() {
var n1 = parseInt(document.getElementById("t1").value);
var n2 = parseInt(document.getElementById("t2").value);
elmnt.innerHTML = "Result: " + (n1 + n2);
}
</script>
</body>
</html>
Click on the "See output" button to see how it works.
Internal Script
Add two numbers when the mouse click on a button.
Example
<!DOCTYPE html>
<html>
<!-- Example: JavaScript Tag -->
<head>
<title>Internal Script Example</title>
<style>
input[type="button"] {
background-color: #a005a0;
color: #fff;
border-radius: 5px;
padding: 15px;
}
input[type="text"] {
background-color: #c2dcff;
color: #000;
border-radius: 5px;
margin: 5px 0 5px 0;
padding: 15px;
}
</style>
</head>
<body>
<p>Internal Script Example.</p>
<h4>Enter Numbers in the text fields and click button to see the result.</h4>
<input type="text" id="t1" placeholder="Enter a number" value="15" /><br>
<input type="text" id="t2" placeholder="Enter a number" value="10" /><br>
<input type="button" onclick="m1();" value="Add Number" />
<p id="id1">Result:</p>
<script>
var elmnt = document.getElementById("id1");
elmnt.style.backgroundColor = "#505050";
elmnt.style.padding = "20px";
elmnt.style.color = "#fff";
function m1() {
var n1 = parseInt(document.getElementById("t1").value);
var n2 = parseInt(document.getElementById("t2").value);
elmnt.innerHTML = "Result: " + (n1 + n2);
}
</script>
</body>
</html>
Click on the "See output" button to see how it works.
External Script
Using External Script add two numbers when the mouse hover on a text.
Example
<!DOCTYPE html>
<html>
<!-- Example: JavaScript External -->
<head>
<title>External Script Example</title>
<style>
input[type="button"] {
background-color: #a005a0;
color: #fff;
border-radius: 5px;
padding: 15px;
}
input[type="text"] {
background-color: #c2dcff;
color: #000;
border-radius: 5px;
margin: 5px 0 5px 0;
padding: 15px;
}
</style>
</head>
<body>
<p>External Script Example.</p>
<h4>Enter Numbers in the text fields and hover on the result.</h4>
<input type="text" id="t1" placeholder="Enter a number" value="15"/><br>
<input type="text" id="t2" placeholder="Enter a number" value="10"/><br>
<p id="id1" onmouseover="m1();">Result:</p>
<script src="externalscript.js" type="text/javascript"></script>
</body>
</html>
Click on the "Try it Now" button to see how it works.