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
Disqus Comments Loading..