HTML JavaScript

You see other webpages that a button shows who say different things, like click me, log in, sign in and so many button show on webpages. In this session you will learn that how wo display your own buttons on your webpages.

JavaScript makes HTML pages more dynamic and interactive.

Example

My First JavaScript

Click me to display Date and Time

Sat Dec 24 2016 16:52:39 GMT+0500 (Pakistan Standard Time)

Try it Yourself »


The HTML Tag

The tag is used to define a client-side script (JavaScript).

The 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”:

Example

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

Try it Yourself »

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:

JavaScript can change HTML content

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

Try it Yourself »

JavaScript can change HTML styles

document.getElementById(“demo”).style.fontSize = “25px”;
document.getElementById(“demo”).style.color = “red”;

Try it Yourself »

JavaScript can change HTML attributes

document.getElementById(“image”).src = “picture.gif”;

Try it Yourself »


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

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

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

Try it Yourself »


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

Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »

Leave a Reply