Hello everyone, in this tutorial we are going to continue learning the basics of JavaScript. 
Introduction to JavaScript - Tutorial 3 - Functions, Event Listeners

Today, we will start our tutorial by embedding an external JavaScript file to our HTML file. In order to do this, we need to create a js file and write this function into it;


  function multiplication(x, y){
 
     var z = x * y;
     return z;
  }


Then we need to import this externalfile.js file into our HTML file by adding the following line between <head> and </head> lines.


   <head>

   <script language = "javascript" src="externalfile.js"></script>

   </head>
    

Since we imported our external javascript file and wrote our function into it, now we can use that function by calling it as follows;

   <body>
       <script language="javascript" type="text/javascript">
    <!-- JavaScript Code will be written here

        document.write("10 * 12 = " + multiplication(10,12));

    -->
       </script>
   </body>


The output is going to be the result of the multiplication if everything goes well. 

After the arrays, loops and functions, now let us move on to some fun features of JS. We will learn how to show pop-up alerts and how to track the mouse movements and events. 

The following code shows pop-ups when the page loads and when the user double-clicks on the image;

<body>
    <script language="javascript" type="text/javascript">
    <!-- JavaScript Code will be written here
  
       function alertme(){

          alert("Welcome to my Website");
          return true;
       }

       alertme();

    -->
    </script>

    <img src="logo.png" id="logo" onDblClick="alert('Double Clicked');"/>

</body>


Output:

 
 

In some applications, user input is required. In those cases, we use prompt statement. The following piece of code shows a prompt to the user;

    <script language="javascript" type="text/javascript">
    <!-- JavaScript Code will be written here

         var num = Number(prompt("Please Enter a Number", ""));
         if (!isNaN(num))
             alert("Your Number is the Square Root of " + num * num);

    -->
    </script>


Output:
 

 

In some web applications, detecting the cursor is an important process. The following code detects the coordinates(x_pos and y_pos) of the mouse cursor and prints it to the screen;


<body>
    <script language="javascript" type="text/javascript">
    <!-- JavaScript Code will be written here
  
  
        function readMouseMove(e){
           var x = document.getElementById('x_pos');
           var y = document.getElementById('y_pos');
           x.innerHTML = e.clientX;
           y.innerHTML = e.clientY;
           return true;
  }
  document.onmousemove = readMouseMove;

    -->
    </script>

    <h3>x:</h3><h2 id="x_pos">0</h2>
 <h3>y:</h3><h2 id="y_pos">0</h2>

</body>


Output:



The compatibility of HTML and JavaScript provides us an amazing flexibility. For instance, we can call a javascript function when the cursor goes on top of a text or an image, etc. Let's see an example;


<body>
    <script language="javascript" type="text/javascript">
    <!-- JavaScript Code will be written here

 function changeText(){

  document.getElementById("mytext").style.color="blue";
  document.getElementById("mytext").firstChild.nodeValue="I am a different Text!!";
  return true;

  }

 function defaultColor(){

  document.getElementById("mytext").style.color="black";
  document.getElementById("mytext").firstChild.nodeValue="I am a Text.."
  return true;
  }
    -->
    </script>

     <h3 id="mytext" onMouseOver="changeText();" onMouseOut="defaultColor();">I am a Text..</h3>
</body>


Output:




Changing the color of a text is just a single example of what we can do with the Style object. In this example, we used the color property and changed it to blue. Click to see the other properties of the Style object.

Finally we'll learn how to listen to mouse-click events. For example by listening to mouse-click events, in some webpages, users can be prevented to right click due to the copyright issues. Let's see how we can do this;


<body>
    <form name ="myform">
     <input type="text" name="click"/> Mouse Button Clicked </br>
    </form>

    <script language="javascript" type="text/javascript">
    <!-- JavaScript Code will be written here

 document.captureEvents(Event.MOUSEDOWN);
     
 document.onmousedown = mouseClicked;

  
 function mouseClicked(e){

  switch(e.button){
   case 0:
    document.myform.click.value = "Left";
    break;
   case 1:
    document.myform.click.value = "Middle";
    break;
   default:
    document.myform.click.value = "Right";
    alert("Please do not copy anything!")
    break; 
    }
   }
    -->
    </script>


</body>


Output: 
 


Continue Reading Introduction to JavaScript Tutorial 4 - Object Oriented Programming

Author:

Software Developer, Codemio Admin


Disqus Comments Loading..