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.

Read More
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

Read More
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>
Read More
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

Read More
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.

Read More
Javascript Events

Events are actions that the user performs while visiting your site. Submitting a form or moving the mouse over an image are two examples for events.

JavaScript applies commands called Event Handlers to these events. An action of a user is recognized by an Event Handler in your script. For example, if the user clicks the button to abort loading your page, the Event Handler onAbort() will take a notice of it and perform whatever action you have assigned.

When you write a script you don’t have to define scenarios for every possible action there is. An image button will display just fine without using onMouseOver and onMouseOut. But if you want to add a little more excitement to your page’s interface, you should try it.


Event Handlers

EVENT

onAbort

onBlur

onChange

onClick

onError

onFocus

onLoad

onMouseOver

onMouseOut

onSelect

onSubmit

onUnload


WHAT IT HANDLES

User aborted page loading.

User left the object.

User changed the object.

User clicked on an object.

Script encountered an error.

User made an object active.

Object finished page loading.

Cursor moved over an object.

Cursor moved off an object.

User selected content of a page.

User submitted a form.

User left window.

Read More
Javascript Comparisons

Often you want to compare a value of one variable with one of another variable, or the value of a variable against a literal value, for example the value in an if-statement.

Example for a comparison is if you want to compare the value of the day of week to “Sunday”, you can do this by checking todaysDate == “Thursday”.

Don’t mix up ‘=’ with ‘==’, the first is an assignment, the second one is a comparison.

Comparisons

COMPARISON
x == y

x != y

x > y

x >= y

x < y

x <= y

x && y

x || y

!x


WHAT IT DOES
True if x and y are equal

True if x and y are not equal

True if x is greater than y

True if x is greater or equal to y

True if x is less than y

True if x is less or equal to y

True if x and y are true

True if x or y are true

True if x is false

Read More
Javascript Assignments

When you try to put a value in a variable you try to assign the value to the variable. To assign it, you have to use an assignment operator to get the job done. For example, use the equals to create an assignment, such as siteName = “HTMLcenter”.

Besides the equals sign, the other assignment operators serve as shortcuts for modifying the value of a variable. For example the shortcut for x = x + 5 is to use x += 5. If you don’t like the short way, just use the long version, it will not change the outcome, just a little more to type.

Assignments

ASSIGNMENT

x = y

x += y

x -= y

x *= y

x /= y

x %= y


WHAT IT DOES

Sets x to the value of y

x = x + y

x = x – y

x = x * y

x = z / y

x = x % y

Read More
Javascript Alert

Alert boxes are used to provide the user with important information. When users enter your site and you want to make sure that they sign your guestbook, you can use an alert box to remind them. Keep in mind, that overusing this function can get very annoying and your visitors might decide not to come back.

Alert Box Example:

<html>
<head>
<title>Alert Boxes</title>
<script>
<!-- Hide Script
	alert("My Own JavaScript Alert Box!")
//End Hide Script-->
</script>
</head>
<body>
<noscript>
  This page uses JavaScript.
  Please enable it or upgrade your browser.
</noscript>
</body>
</html>

alert(“My Own JavaScript Alert Box!”), that’s the code for your alert box. Put any text inside the quotation marks in alert() and it will pop up next time you load the page.

The JavaScript alert box will always say “JavaScript Application” and there’s no way to code around it. We suppose it’s a security feature so that a site owner can’t trick visitors into something using an alert box.

You might have seen that we used the <noscript> tag above. That’s because in non-JavaScript browsers (JavaScript turned off or not supported) a message will show up saying “This page uses JavaScript. Please enable it or upgrade your browser.”.

Read More
Hello World!

“Hello World!” is generally the first program you learn to write when you start with a programming or scripting language. Are you are new to JavaScript? In this tutorial you will learn how to use the document.write function to place text on a page using JavaScript. This tutorial will also show you, how to hide your scripts from older browsers and how to place comments in your scripts.

Hello World Example:

<html><head><title>Hello World</title></head>

<body>

<script>

 document.write("Hello, World!")

</script>

</body>

</html>

Our script is in between the <script> tags; <script> tells the browser to expect our JavaScript, </script> tells the browser to expect HTML again. You can have as many scripts as you want in your source code, this also means you can therefore run multiple scripts on the same page.

document.write(“Hello, World!”) is your JavaScript. It takes the document window and writes “Hello, World!” into it.

Of course your script can not be interpreted by old browsers, such as Netscape 1.x, Internet Explorer 3.x and earlier, and the America Online browser before version 4. While well working browsers are told to ignore what they do not “understand”, we use a technique to make sure.

Script Listening 1.2:

<html><head><title>Hello World</title></head>

<body>

<script><!-- Hide Script

 document.write("Hello, World!")

//End Hide Script-->

</script>

</body>

</html>

This will look like a comment to older browser and they will simply ignore it and not produce an error. In case you want to display a message to your site?s user if his browser doesn?t support JavaScript, add your message into the <noscript> tag.

The more advanced your scripts get, the more it becomes necessary for you to write comments inside your scripts. For example we could forget what a certain statement means and in order not to need to look it up in a book or here at HTMLcenter, you can write a comment next to it which explains what it does. If you distribute your scripts on your website, you could use comments to write a short notice, that tells who it was written by and where to find it, and other scripts.

Script Listening 1.3:

<html><head><title>Hello World</title></head>

<body>

<script>/* Script name: Hello, World!

   HTMLcenter - JavaScript Tutorial

   Date: 03-07-1999

*/

<!-- Hide Script

 document.write("Hello, World!")

// document.write prints text on the screen

//End Hide Script-->

</script>

</body>

</html>

There are two different ways to write comments. You can use “/*” and “*/” if the comments are more than one single line, instead of writing “//” at the beginning of each. We use “//” if your comments fit on one single line.

This is the end of our “Hello World” tutorial. You learned how to print a message on the screen, how to hide your scripts from older browsers or browsers that have JavaScript turned off, and you learned how to write comments inside your JavaScript. We suggest that you check out our next JavaScript tutorial and keep on scripting!

Please note, that if any of the HTML tags, you have read while going over this tutorial confuse you, or you are not quite sure about their meaning, please check out our HTML tutorials (Basics) at HTMLcenter.

Read More