WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




Beginner's Guide to JavaScript: Part 2

Beginner's Guide to JavaScript: Part 2

Forms Manipulation

Let's take this script a step further and verify the data (if a user enters a non-number, we're going to get a script error). And while we're at it, let's say that a user shouldn't be able to enter a number greater than 100 or less than 0. To do this, we're going to have to do some kind of verification to decide whether the INPUT is valid or not. So let's add this wrapper type function around our function.

In addition, let's do some form manipulation too. Instead of an alert box, let's make it display the answer in our form.

function AddNumber3(x,y)
{
answer=eval(x)+eval(y);
return answer;
}
function CheckData(x,y)
{
answer="";
if(isNan(x) || isNan(y) || x =="" || y =="")
alert("The values you entered are invalid.");
else
{
if(x > 100 || x < 0 || Y > 100 || y < 0)
alert("Values are outside of valid 0-100 limits");
else
Answer=addnumber3(X,Y);
}
return answer;
}

Try entering invalid numbers and characters and see what happens.

This script is pretty simple. Basically, we check to see if a number is valid with isNan().

if(isNan(x) || isNan(y))

We show appropriate message boxes for each error. The only thing we do is:

<INPUT TYPE="button" onClick="this.form.Answer.value=CheckData(this.form.Value1.value,this.form.Value2.value)" value="Answer!">

Notice how we get the answer to the answer box. AddNumber3 returns the answer to CheckData, which then returns it to whatever is calling it. In this case, we say that this.form.Answer.value takes the value of whatever CheckData returns. As we follow the code, it is what AddNumber3 returns. And just like that, you can have the answer on screen.

There are other types of form data that require verification, most notably valid phone numbers and email addresses. These are accomplished the same way--by writing a wrapper class. Methods are different (such as for email addresses where you have to check for an @ symbol), but JavaScript gives us functions to accomplish them. Let's take a quick look how.

function CheckEmail(x)
{
if (x.indexOf("@",0) > 0 )
alert(x + " is a valid email");
else
alert(x + " is not a valid email address");
}

In this example we use the indexOf() function that returns the index of a specific character, in this case the @ symbol. Basically, we are checking to see if it returns an index; if it doesn't return a value greater than 0, we know it wasn't found. Piece of cake!

Frames Manipulation

Frame manipulation is probably one of the most talked about topics of JavaScript. It works like everything else in JavaScript. Once you learn the object model, it should be the same throughout. Let's look at your typical FRAMESET.

<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="page1.html" NAME="page1">
<FRAME SRC="page2.html" NAME="page2">
</FRAMESET>
<FRAME SRC="page3.html" NAME="page3">
</FRAMESET>

In this example, there are going to be three separate frames. Now let's say we want to click on a link on one page and have both frames change to something else. But before we do that, let's understand the heirarchy of the object model involved.

self.* means current window.
parent.* means the parent of current window.

To put this into perspective: if we created a FRAMESET with our index.html file, each of the separate frames would have to call its parent if it were to manipulate the location.href (the property of each window).

Now, the question is how to do this. Well, with JavaScript we can write a function that will interact with the other two frames! Let's see how to do this now. First, we have three pages, named page1.html, page2.html, and page3.html. The first two pages are pointless here since they are just blank holder pages; however, page three is the location of our scripting function, so let's look at it.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

function Switchframes(how)
{
if (how == "reverse")
{
parent.page1.location.href="page2.html";
parent.page2.location.href="page1.html";
}
else
{
parent.page1.location.href="page1.html";
parent.page2.location.href="page2.html";
}
}

</SCRIPT>
</HEAD>


This is page three.

Click <A HREF="JavaScript:Switchframes('reverse')">here</A> to reverse pages.

Click <A HREF="JavaScript:Switchframes('original')">here</A> to switch pages back to original.


</HTML>

We write a function here that is going to check a parameter to see how we handle the frames. As you can see, this is pretty straightforward. We check the parameter that gets passed in to see if it says reverse or original, and then we use our object model to point our frames where we want to!

Notice that most of this is very similar to what we have been doing--however, we called our script in a different way this time. It is being called inside an anchor tag. You can call any of your scripts with a JavaScript: moniker. This makes it possible to call scripts from image links and any other anchors that you want to use!

[ < Beginner's Guide to JavaScript:
Part 1 ]
[ Beginner's Guide to JavaScript:
Part 3 > ]




HTML5 Development Center


Recent Articles