X hits on this document

Word document

JavaScript Tutorial: bouncing ball - page 4 / 7





4 / 7

In the head section, we define an area for styles.  For this application, there will only be one style, one that relates to the div with id equal to "ball".

<style type="text/css">

#ball {position: absolute; top: 100px; left: 200px; }


The style tag sets up a style of type text/css.  This is the only type we will use.  The particular style included is for the items of id equal to ball.  The style specification, the stuff in the curly brackets, specifies the positioning of the ball div. It is absolute positioning, as opposed to relative to its normal place in the HTML document.  The absolute positioning is 100 pixels from the top and 200 pixels from the left.  


Before going on, create the following HTML file:

<html><head><title>bouncing ball </title>

<style type="text/css">

#ball {position: absolute; top: 100px; left: 200px; }




<div id="ball">

<img src="ball.gif">



Open this file in a browser.  See where the ball is.  Now change the 100px to something else and/or change the 200px to something else.  Do this many times. See if you can predict the new position of the ball each time.  Try making the left to be 800px and create a small window.  You will see a horizontal scroll bar at the bottom of the window.  

Repeat: the particular mechanics of moving objects as displayed on Web pages is unique to HTML and JavaScript.  However, the concepts of horizontal and vertical dimensions, origin and unit apply to many different programming environments, including Flash and ActionScript.

Accessing document elements

At this point, you may think you ready to start implementation. However, alas, we need to provide additional background relating to accessing the div element described earlier.  The different browsers have slightly different ways of organizing the HTML document.  The good news (in this sad state of affairs) is that the browsers all implement the following trick.  You can use an if statement to check if a feature exists. The get Obj function given here can be used to create an object that holds pointers to the element in the HTML document with the indicated name:

Document info
Document views5
Page views5
Page last viewedTue Jan 12 08:41:57 UTC 2016