HTML Javascript

HTML JavaScript

 
JavaScript makes HTML pages more dynamic and interactive.

<!DOCTYPE html>

<html>

<body>

 

<h1>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 <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains script 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 most often uses the document.getElementById() method.

This JavaScript example writes “Hello JavaScript!” into an HTML element with id=”demo”:

<!DOCTYPE html>

<html>

<body>

 

<h2>Use JavaScript to Change Text</h2>

<p>This example writes “Hello JavaScript!” into an HTML element with id=”demo”:</p>

 

<p id=”demo”></p>

 

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

 

</body>

</html>

Use JavaScript to Change Text

This example writes “Hello JavaScript!” into an HTML element with id=”demo”:

Hello JavaScript!

A Taste of JavaScript

Here are some examples of what JavaScript can do:

 

<!DOCTYPE html>

<html>

<body>

 

<h1>My First JavaScript</h1>

 

<p>JavaScript can change the content of an HTML element:</p>

 

<button type=”button” onclick=”myFunction()”>Click Me!</button>

 

<p id=”demo”>This is a demonstration.</p>

 

<script>

function myFunction() { 

document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;

}

</script>

 

</body>

</html>

 

My First JavaScript

JavaScript can change the content of an HTML element:

This is a demonstration.

JavaScript can change HTML styles

<!DOCTYPE html>

<html>

<body>

 

<h1>My First JavaScript</h1>

 

<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 = “red”;

document.getElementById(“demo”).style.backgroundColor = “yellow”;      

}

</script>

 

<button type=”button” onclick=”myFunction()”>Click Me!</button>

 

</body>

</html>

 

My First JavaScript

JavaScript can change the style of an HTML element.

JavaScript can change HTML attributes

<!DOCTYPE html>

<html>

<body>

<script>

function light(sw) {

  var pic;

  if (sw == 0) {

    pic = “pic_bulboff.gif”

  } else {

    pic = “pic_bulbon.gif”

  }

  document.getElementById(‘myImage’).src = pic;

}

</script>

 

<img id=”myImage” src=”pic_bulboff.gif” 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>

 

 

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:

<!DOCTYPE html>

<html>

<body>

 

<p id=”demo”></p>

 

<script>

document.getElementById(“demo”).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>

 

Hello JavaScript!

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