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 Iframes

HTML Other Lists

HTML Block and Inline Elements

HTML class Attribute

HTML id Attribute


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.


0 Comments

Leave a Reply

Avatar placeholder