HTML TutorialLesson #28

HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

JavaScript makes HTML pages more dynamic and interactive.


Example

My First JavaScript

Click me to display Date and Time


The HTML Tag

The HTML <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":

Example

Example Code

html
Try it Yourself
<script>

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

</script>

Tip: You can learn much more about JavaScript in our JavaScript Tutorial.


A Taste of JavaScript

Here are some examples of what JavaScript can do:

Example

Example Code

html
Try it Yourself
document.getElementById("demo").innerHTML = "Hello JavaScript!";

Example

Example Code

html
Try it Yourself
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

Example

Example Code

html
Try it Yourself
document.getElementById("image").src = "picture.gif";

The HTML Tag

The HTML <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts:

Example

Example Code

html
Try it Yourself
<script>

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

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

HTML Script Tags

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

For a complete list of all available HTML tags, visit our HTML Tag Reference.


Video: HTML and JavaScript


Interactive Code Examples

HTML Example 2

html
Try it Yourself
HTML tag syntax and structure demonstration.
<script>

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

</script>

HTML Example 3

html
Try it Yourself
HTML tag syntax and structure demonstration.
document.getElementById("demo").innerHTML = "Hello JavaScript!";

HTML Example 4

html
Try it Yourself
HTML tag syntax and structure demonstration.
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

HTML Example 5

html
Try it Yourself
HTML tag syntax and structure demonstration.
document.getElementById("image").src = "picture.gif";

HTML Example 6

html
Try it Yourself
HTML tag syntax and structure demonstration.
<script>

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

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