worldofitech
In this article, you will learn-
HTML Scripts
HTML Scripts: JavaScript makes HTML pages more dynamic and interactive.
A Script is a small program which is used with HTML to make website pages more attractive, dynamic and interactive, for example, an alert popup window on mouse click. At present, the most popular scripting language is JavaScript used for sites.
Example
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
My First JavaScript
The HTML <script> Tag
The HTML <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains script statements, or it’s points to an outside script file through the src attribute.
Common uses for JavaScript are picture manipulation, form validation, and dynamic changes of substance.
To choose a HTML element, JavaScript frequently uses the document.getElementById() technique.
This JavaScript example writes “Hello JavaScript!” into an HTML element with id=”demo”:
Example
Use JavaScript to Change Text
This example writes “Hello JavaScript!” into an HTML element with id=”demo”:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
A Taste of JavaScript
Here are a few instances of what JavaScript can do:
Example
JavaScript can change content:
My First JavaScript
JavaScript can change the content of an HTML element:
This is a demonstration.
document.getElementById("demo").innerHTML = "Hello JavaScript!";
Example
JavaScript can change styles:
My First JavaScript
JavaScript can change the style of an HTML element.
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
Example
JavaScript can change attributes:
My First JavaScript
Here, a JavaScript changes the value of the src (source) attribute of an image.
document.getElementById("image").src = "picture.gif";
The HTM <noscript> Tag
The HTML <noscript> tag defines an alternate substance to be shown to users that have disabled scripts in their browser or have a browser that doesn’t support scripts:
Example
A browser without support for JavaScript will show the text written inside the noscript element.
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
HTML Script Tags
| <script> | Defines a client-side script |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
HTML Block and Inline Elements
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.
