HTML Tutorial

HTML JavaScript

JavaScript is the client-scripting language for a webpage.

It makes a webpage dynamic, user-friendly, and fun! The analog clock below is made with JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
  Do It Yourself

JavaScript Examples

More JavaScript Examples

JavaScript can be used for image manipulation, form validation, and dynamic change of webpage contents.

How to Write a JavaScript Code

A JavaScript code is embedded into an HTML webpage using the <script> tag. The <script> element either contains a client-side script, or it rather points to an external script file through the src attribute.

<script>
// some javascript codes
</script>

The <script> tag is usually placed in the <head> section of an HTML document, but can also be placed in the <body> element.

We are going to take full tutorial of JavaScript in our JavaScript Tutorial Section.

We have lots of JavaScript examples compiled to help you along while learning.

Using JavaScript to Manipulate the Inner Content of an Element

The example below writes Hello World! in an HTML element with the id="test".

Example 1

<script>
document.getElementById("test").innerHTML="Hello World!";
</script>
 
  Do It Yourself

How Does It Work?

  • The document.getElementById("test") method gets an HTML element with the id="test"
  • The .innerHTML property writes directly into the gotten element

Using JavaScript to Manipulate an Image Source

The example below changes the src attribute value of an image when clicked.

Click on the image below to turn the switch on/off.

Example 2

  Do It Yourself

How Does It Work?

  • The JavaScript onclick event handler executes the JavaScript code when it user clicks on the image
  • The action then performs based on the value of the event handler(onclick)
a

Using JavaScript to throw a Popup Message

JavaScript can also be used to throw a popup message to a user.
This message can be thrown using three different popup functions. They are alert(), confirm() and prompt().

We are only giving an example of the alert popup in this lesson, all the procedures to perform the rest will be taught in our JavaScript Tutorial Section

The example below greets the user according to the time of the day, using a JavaScript alert

  Do It Yourself

How Does It Work?

  • The JavaScript onclick event handler executes the JavaScript code when it user clicks on the image
  • The action then performs based on the value of the event handler(onclick)

More on JavaScript

Our JavaScript main tutorial page teaches JavaScript in full, click the button below to learn JavaScript in full. Note: HTML and CSS are prerequisites for learning JavaScript, if you are yet to cover both, please ignore the link below and continue to the 'Next Chapter'.

Full JavaScript Tutorial

What You Should Know at the End of This Lesson

  • You should know how to embed a JavaScript code into an HTML document using the <script> tag.
  • You should know how JavaScript works when an event handler is declared in an HTML element.
  • You should know the JavaScript popup alerts.
Previous Chapter Next Chapter

Related Examples