HTML JavaScript
A Script is a small program that is used with HTML to make web pages more attractive, dynamic, and interactive, such as an alert popup window on mouse click. Currently, the most popular using scripting language is JavaScript used for websites.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date and Time example</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
OUTPUT:
HTML <script> Tag:
The HTML <script> tag is used to provide a client-side script. It may be an internal or external JavaScript which contains scripting statements, hence we can place <script> tag within <body> or <head> section.JavaScript uses document.getElementById() method to select an HTML element.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello I2tutorials";
</script>
</body>
</html>
OUTPUT:
HTML events with JavaScript:
HTML provides event handler attributes which work with JavaScript code ( client-side script ) and can perform some action on an event.
Syntax:
<element event = "JS code">
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Click Event Example</h2>
<input type="button" value="Click" onclick="alert('Hi,how are you')">
</body>
</html>
OUTPUT:
HTML can have the following events such as:
- Form events: reset, submit, etc.
- Select events: text field, text area, etc.
- Focus event: focus, blur, etc.
- Mouse events: select, mouse up, mouse move, mouse down, click, dblclick, etc.
1) JavaScript can change HTML content:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Click Event Example</h2>
<input type="button" value="Click" onclick="alert('Hi,how are you')">
</body>
</html>
OUTPUT:
2) JavaScript can change HTML style:
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "brown";
document.getElementById("demo").style.backgroundColor = "lightgreen";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
OUTPUT:
3) JavaScript can change HTML attributes:
Example:
<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "/htmlpages/images/pic_lightoff.png"
} else {
pic = "/htmlpages/images/pic_lighton.png"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="/htmlpages/images/pic_lightoff.png" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>
OUTPUT:
Use External Script:
Suppose, you have various HTML document which should have the same script, then we can put our JavaScript code in a separate file and can call in HTML file. Save JavaScript external files using .js extension.
Syntax:
<script type="text/javascript" src="URL "></script>
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=""></script>
</head>
<body>
<h2>External JavaScript Example</h2>
<form onsubmit="fun()">
<label>Enter your name:</label><br>
<input type="text" name="uname" id="frm1"><br>
<label>Enter your Email-address:</label><br>
<input type="email" name="email"><br>
<input type="submit">
</form>
</body>
</html>
Javascript:
function fun() {
var x = document.getElementById("frm1").value;
alert("Hi"+" "+x+ "you have successfully submitted the details");
}
OUTPUT:
