HTML JavaScript

HTML JavaScript

HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Display Date and Time.</button>

<p id="demo"></p>

</body>
</html> 

Output :

My First JavaScript


The HTML <script> Tag

  • The <script> tag is used to define a client-side script (JavaScript).
  • The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
  • Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
  • To select an HTML element, JavaScript very often use the document.getElementById(id) method.
  • This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":
 <script>
document.getElementById("demo1").innerHTML = "Hello JavaScript!";
</script>

Output :

A Taste of JavaScript

Here are some examples of what JavaScript can do :

JavaScript can change HTML content

document.getElementById("w3p").innerHTML = "Hello JavaScript!"; 

Output :

My First JavaScript

JavaScript can change the content of an HTML element :

This is a demonstration.


JavaScript can change HTML styles

document.getElementById("w3pro").style.fontSize = "25px";
document.getElementById("w3pro").style.color = "red";

Output :

My First JavaScript

JavaScript can change the style of an HTML element.


JavaScript can change HTML attributes

<!DOCTYPE html>
<html>
<body>
<script>
function color(change) {
    var logo;
    if (change == 0) {
        logo = "W3Professors-Logo-1.png"
    } else {
        logo = "W3Professors-Logo-2.png"
    }
    document.getElementById('w3professorslogo').src = logo;
}
</script>

<img id="w3professorslogo" src="W3Professors-Logo-1.png" width="100" height="180">

<p>
<button type="button" onclick="color(1)">Color Blue</button>
<button type="button" onclick="color(0)">Color Green</button>
</p>

</body>
</html>

Output :


The HTML <noscript> Tag

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripts :

Example

 <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>
<!DOCTYPE html>
<html>
<body>

<p id="W3Pro"></p>

<script>
document.getElementById("W3Pro").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
 
</body>
</html>

Output :

A browser without support for JavaScript will show the text written inside the noscript element.


HTML Script Tags

Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scripts