in

Introduction to HTML javascript and How to Use Them

In this tutorial we will be learning about html javascript and how you can easily use them on HTML web documents.

In our previous tutorial we learnt about HTML style sheet where we explained different methods used in styling the HTML document using style sheet. If you haven’t gone through the tutorial you can check that using the link below

Read previous tutorial on:   Tutorial 25# Introduction to HTML Style Sheet and How to Use Them

Understanding HTML JavaScript

Over here we try to link the javascript to the HTML document using different methods. Javascript helps us add additional functionalities to the web document. Without javascript or any other script or codes our HTML web document can’t perform functions. There are different ways of adding javascript to web documents and they include:

  • External method
  • Internal method

External method of adding javascript

In this method we structure the javascript in an external folder and link it to the HTML document using the <script> tag. This method is widely used by most developers and its preferable when you intend using a script function on different web pages.

Example shown below

Lets define an external javascript file containing a function that alerts us with “hello Develoferd student”

 function Hello() {
   alert("Hello, Develoferd Student");
}
      

Now we link this function to a web document with a button

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script method</title>
      <script src='develoferd/script.js' type='text/javascript'> 
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click here" />
   </body>

</html>

Result

Javascript External Script method

Internal method of adding javascript

The internal method of adding javascript allows developers add the javascript inside the head section of the same HTML web document. Recall that this method is useful only when you need the script function for only one web document. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript Internal Script method</title>
      

      <script>
         function Hello() {
   alert("Hello, Develoferd Student");
}
      
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click here" />
   </body>

</html>

Result

Javascript External Script method

Event Handlers in HTML

Event handlers are used to carry out simple functions when ever the keyboard or mouth undergoes an event such as hovering, clicking etc. Lets illustrate using a simple event handler that alerts us when the mouse hovers over a text on the web document. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript eventHandler</title>
      

      <script>
         function eventHandler() {
   alert("Hello, Buddy");
}
      
      </script>
   </head>

   <body>
      <p onmouseover="eventHandler()"; > please hover over me</p>
      
   </body>

</html>

Result

Javascript eventHandler

please hover over me

Hiding Javascript from old web browser

Some old web browsers do not support javascript but not all. If the web browser does not support javasript, it will display the script instead to the user which is not good. We can prevent this by hiding the javascript from browsers that do not support this script. instead of showing the script codes it will display a comment. Example shown below

//syntax for hiding javascript
<script type = "text/JavaScript">
   <!--
      document.write("Hello There is an unsupported JavaScript file here !");
   //-->
</script>

The <noscript> HTML element

we can also display something different to users having browsers that do not support javascript using the <noscript> tag. Example shown below

//syntax using the <noscript> tag
<script type = "text/JavaScript">
   <!--
      document.write("Hello Buddie");
   //-->
</script>

The above code will print out “Hello buddie” when the browser doesn’t support the javascript.

Conclusion

Now you understand the HTML JAVASCRIPT in web Documents and you are really doing great. Lets move on to the next tutorial on HTML LAYOUT

What do you think?

HTML style sheet

Introduction to HTML Style Sheet and How to Use Them

Download the Standard MP3 Tag Source Code