JavaScript Lab Assignment 1
Figure: Snap shot of the solution
We are intending to create an application in which two text boxes display the X and Y
coordinates of the mouse on the browser. By moving the mouse over document you
can observe the changes in X and Y coordinates. Also as a background image we
will embed a map. You can download the map image from:
http://www.nationsonline.org/maps/continents_map_sm.jpg
<!-- EE1081 JavaScript Assignment 1:
Instruction:
1. Create a new HTML document.
2. Make sure the file map.jpg is located in the same folder as your HTML file.
3. Type in the code below into the HTML document.
4. Complete the code where there are *** with JavaScript and HTML code to
achieve the requested functionalities.
5. Test your code until you are happy with results.
6. Upon completion raise your hand and demonstrate your work to your
instructor.
The Code:
-->
<html>
<head>
<title>My First JavaScript Game</title>
<style type="text/css">
body {margin:0px; color:#fff; font-weight:bold;}
#bg { width: 100%; height: 100%;left: 0px;top: 0px;position: absolute;z-index: 0;}
#form {z-index: 1; position: absolute;}
</style>
</head>
<body>
<div id="bg">
<!Create an image item and use the following parameters for the style
width: 100%; height 100% -->
*** TYPE IN THE CODE HERE***
</div>
<div id="form">
<!-- Create an HTML Form object called " Mouse_Coordinates" -->
*** TYPE IN THE CODE HERE***
<!-- Create an HTML text input and assign a coordinate -->
X <input type="text" name="Mouse_Coordinate_X" value="0" size="5"><br>
<!-- Write the code for the Y coordinate "Mouse_Coordinate_Y" with initial
value of 0 and size 5 -->
*** TYPE IN THE CODE HERE***
<!-- Close the form tag -->
*** TYPE IN THE CODE HERE***
<!-- Create the JavaScript Block -->
<script language="JavaScript1.2">
<!-- Create a variable with the name 'Browser' and assign the value
'document.all?true:false' to the variable -->
*** TYPE IN THE CODE HERE***
<!-- Read the two line of codes below and explain in a comment statement what
it does -->
if (!Browser) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = Get_Mouse_Coordinates;
*** INSERT YOUR COMMENT ABOUT THE LINE ABOVE HERE***
<!-- Declare two variables Current_X and Current_Yand assign the initial value
0 to them -->
*** TYPE IN THE CODE HERE***
<!-- Declare a function called Get_Mouse_Coordinates (e) -->
*** TYPE IN THE CODE HERE***
<!-- Explain the code below in a comment statement (explain what it does) -->
if (Browser) { // grab the x-y pos.s if browser is Browser
Current_X = event.clientX + document.body.scrollLeft;
tCurrent_Y = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is something else
Current_X = e.pageX;
Current_Y = e.pageY;
}
<!-- insert an if statement here to check if the value of the variable 'Browser'
was not true,
- then assign 'e.pageX' and 'e.pageY' to the variables 'Current_X' and
'Current_Y' respectively,
- check if the value of the variable 'Current_X' is negative, then reset it to zero
- do the same with the variable 'Current_Y' -->
<!-- Explain the code below in a comment statement (explain what it does) -->
document. Mouse_Coordinates.Mouse_Coordinate_X.value = Current_X;
document. Mouse_Coordinates.Mouse_Coordinate_Y.value = Current_Y;
return true;
}
<!-- Close the script tag -->
*** TYPE IN THE CODE HERE***
</div>
</body>
</html>
