Javascript Status Bar

JavaScript gives you the ability to modify the status bar. For example it can be useful to display information about a link, when the user moves his mouse over it or you can display a small amount of information about the page the user is on in the status bar. You can also trick people into clicking a link, so be careful how you use it. If you play too many tricks on your visitors, they might not come back.

Status Bar Example:

<html>
<head>
<title>JavaScript Status Bar</title></head>
<body onLoad="window.status='Welcome!';return true">
  
</body>
</html>

onLoad tells the browser that as soon as your page finished loading, it will display in your current window’s status bar (window.status) the message “Welcome!”. The return true is necessary because with out, it won’t work.

Status Bar Example:

<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
  <a href="http://www.htmlcenter.com"
   onMouseOver="window.status='HTMLcenter';return true"
   onMouseOut="window.status='';return true">

  HTMLcenter

  </a>
</body>
</html>

Our second script listening shows how to modify the status bar using onMouseOver and onMouseOut with links. When the user moves his mouse over the link, it will display “HTMLcenter” in the status bar. When he moves his mouse away from the link the status bar will display nothing.

You could also have another message displayed in the status bar, when the user moves his mouse cursor away from the link. You have to change the onMouseOut statement in the link to for example: onMouseOut=”window.status=’You moved your cursor away from the link.’;return true”.

Javascript No Frames

This script is very important for you, if you have problems protecting your own pages and their content. People will just link your page in a frameset and make it seem that it is their own work. To break out of their frameset we use the following script.

Break Out of Frames:

<html>
<head>
<title>JavaScript - Break out of frames</title>
<script>
<!-- Hide Script
	if (top.location != self.location) {
	  top.location = self.location
	}
//End Hide Script-->
</script>
</head>
<body>
  A very important page,
  which you don't want to
  have stolen.
</body>
</html>

if (top.location != self.location), the script checks if the location of the current (self) page is the top most in the browsers window hierarchy. If so, there’s no need to change anything.

But if it does not match, your script will assign self.location to top.location (top.location = self.location) and make the current window reload and display your page and your page only! You can see a nice working example, if you try to load CNN’s site in a frame. You will see that the page reloads and displays CNN only.

Javascript Values

A piece of information in JavaScript is a value. There are different kinds of values, for example numbers or string. A string value is a word or words enclosed in quotation marks.

Variables contain values. For example variable siteName is assigned the string ‘HTMLcenter’. Another way to express is siteName = HTMLcenter, where the equals means ‘set to’, the variable siteName now contains the value HTMLcenter.

Keep in mind that JavaScript is case sensitive. Variable MyName is not the same as myName or myname. Variables can not contain spaces and you shouldn’t choose one of the JavaScript reserved words as name for a variable.

Values

TYPE

Number

String

Boolean

Null

Object

Function


DESCRIPTION

Any numeric value

Characters in quotes

True or False

Empty / No meaning

Any value associated with an object

Value returned by a function


EXAMPLES

1.23456789

“Hi, HTMLcenter!”

False

Javascript Redirection

The redirecting is a good way to check for the presence of JavaScript and in this case also for the version of JavaScript the user has.

window.location=”js_test_true.html”) resets the location property of the current browser window. In this case it sets it to “js_test_true.html”.

If the user doesn’t have the version of JavaScript required, which is JavaScript 1.1 in order to redirect, or JavaScript is turned off, it will display “Your browser doesn’t support JavaScript, it’s turned of in your browsers preferences or you don’t the latest version of JavaScript.”.

To specify the minimum requirement you just have to set language in the <script> tag as you can see in the Script Listening above. You can have different language versions in different scripts on your page, but there’s no way to say that for example our redirection script should only run with JavaScript 1.1, it will run with JavaScript 1.1 and greater.

Redirection Example:

<html>
<head>
<title>JavaScript Redirection</title>
<script language=javascript1.1>
<!-- Hide Script
	window.location="js_test_true.html")
//End Hide Script-->
</script>
</head>
<body>
  Your browser doesn't support JavaScript,
  it's turned off in your browsers preferences
  or you don't the latest version of JavaScript.
</body>
</html>

Javascript Operators

Operators are the symbols which are used to work with variables. You are already familiar with simple arithmetic operators, plus and minus.

Important: While the x++ and ++x operators both add one to x, they are not identical. x++ increments x after the assignment and ++x before. If x is 4, y = x++ results in y is 4 and x is 5. y = ++x sets y = 5 and x = 5. The x– and –x operators work similar.

If you mix numeric and string values when adding to values together, the result is a string. HTMLcenter + 69 results in HTMLcenter69.



Operators

OPERATOR

x + y (numbers)

x + y (string)

x – y

x * y

x / y

x % y

x++, ++x

x–, –x

-x


WHAT IT DOES

Adds x + y

Adds x and y string

Subtracts y from x

Multiplies x and y

Divides x by y

Remainder of x / y

Adds one to x

Subtracts one from x

Reverses the sign of x

Javascript Image Rollovers

An image rollover is basically two different images. One is displayed after the page loaded up, the other one is displayed only when the user moves his mouse over the first one. Image rollovers are often used for a site’s interface. Currently this is the most popular JavaScript function.

The following script listening shows you how create your own.

Image Rollover Examples:

<html>
<head>
<title>JavaScript Image Rollovers</title></head>
<body>
  <a href="link.html"
   onMouseOver="document.image1.src='onImage.gif'"
   onMouseOut="document.image1.src='outImage.gif'">

   <img src="outImage.gif" name="image1">

  </a>
</body>
</html>

This is the easiest rollover there is. onMouseOver=”document.image1.src=’onImage.gif'” replaces “outImage.gif” with “onImage.gif”. onMouseOut=”document.image1.src=’outImage.gif'” swapps “outImage.gif” back when the user moves his mouse away from it.

The image tag defines the source of the original image and contains the very important “name” option (name=”image1″).

The disadvantages of this kind of rollover are, that although it is simple, it produces an error message in older browsers, such as Netscape 2.0, Internet Explorer 3.0 and earlier and America Online 2.7 browser. Also, because the second image is downloaded from the server at the same time, there can be a delay when the user rolls over the first image, before it’s replaced with the second.

Rather than using the first method, we suggest you take a look on the next script and use this one.

Image Rollover Example:

<html>
<head>
<title>JavaScript Image Rollovers</title>
<script>
<!-- Hide Script
	function move_in(img_name,img_src) {
	document[img_name].src=img_src;
	}

	function move_out(img_name,img_src) {
	document[img_name].src=img_src;
	}
//End Hide Script-->
</script>
</head>
<body>
  <a href="link.html"
   OnMouseOver="move_in('image1','image_on.gif')"
   OnMouseOut="move_out('image1','image_out.gif')">

  <img src="image_out.gif"
   alt="Move your mouse over here!" name="image1">

  </a>
</body>
</html>

We define two functions, “move_in” and “move_out”. Inside those we set the parameters img_name (image name) and img_src (image source) to be able later to identify the image and its rollover.

Next we have to give our image a name (name=”image1″) in order to be able a apply an rollover to it. To complete the rollover we use onMouseOver, to call the function “move_in”, which includes the source for the rollover image, and onMouseOut, to call the function “move_out”, which includes the information for the initial image and kind of resets the situation, when you move your mouse away from the image.

Pages: