Archive for December, 2002

JavaScript allows you to adding programming functions to your web pages. Browsers will read the HTML and interpret the JavaScript. JavaScript can also produce dynamic effects using variables. JavaScript can also react to events, write HTML code and validate data.

The key parts of JavaScript are functions and events. Functions are mini scripts that can be executed by an event such as a timer or a user clicking on a link. Take a look at this basic script that brings up a gray dialog box saying ‘Yay! javaScript Rules!’

<script language="JavaScript">
<!--

function yay() {
alert('Yay! JavaScript rules!');
}

// -->
</script>

The java is in a standard script tag (which you will read about next) and also has comment tags around it. This hides the script from old browsers who don’t understand JavaScript.

In this tutorial I’m going to show you how to create a pop up window using java script. There are many tools to do this but most of them create pop up windows that open when a page loads. These are fine for pop up ads but what do you do when you want to open up a pop up window when a user clicks a link? This tutorial will show you how to write a function to do this.

This will be a function and it will be embedded in a standard java script tag.

<script LANGUAGE="JavaScript">
</script>

Now before we start lets look at the whole source code, then I will explain it all

function launch(){
jim=window.open("http://www.hardwaretutorials.com/","Hardware Tutorials","width=400,height=300,top=0,left=0,resizable=no,
scrollbars=yes,menubar=no,toolbar=no,status=no,location=no")}

Thats the function in full. Lets start at the beginning. The variable name is ‘Jim.’ Inside the window.open part there are all the configurable components of the pop up window. Lets start with the address. In our example I used http://www.microsoft.com but you could relace this with ‘www.yoursite.com’ or ‘information/popuppage.htm’.

The name for the window (the name that will appear before the title appears) for my example is Microsoft. Now is the window settings. You can set the width and the height as well as the top and left margin. You can also choose whether the window is resizable, scrollbars, a menu bar, a tool bar, a status bar and a location bar.

Once you have configured these just put them in a standard tag, in either the body or head tag.

<script LANGUAGE="JavaScript">
function launch(){
jim=window.open("http://www.microsoft.com","microsoft","width=400,height=300,top=0,left=0,resizable=no,
scrollbars=yes,menubar=no,toolbar=no,status=no,location=no")} 
</script>

Thats the full code. Now all you need to do is create a link ‘javascript:launch().’ If you want to change the java script to ‘function whatever()’ instead of function launch(). You must do this if you have more than one pop up scripts on one page as you will need each hyperlink to activate a different pop up script.

This will show you how to make a password page. This should never be used for anything! Ever! It’s purely just to show you how it could be done. But it is literally less lecture than leaving your front door wide open.

In you you put in your password and if it is correct you go the another page. If you are incorrect you go to a wrong password page. Take a look at the script.

<script language="JavaScript">
function passwordOK(anystring) {
anystring = anystring.toUpperCase()

if (anystring == "GREEN" || anystring == "BLUE" || anystring
== "RED" || anystring == "YELLOW") {
/*Add more passwords if you'd like, but ALL PASSWORDS MUST BE IN CAPS!*/
alert('You got it right!')
alert('Now taking you to the hidden page.')
location="page2.htm"
//Change page2.htm to your hidden page
}


else {
alert ("Please enter the CORRECT password next time.")
location="wrongpage.htm"
/*substitute your own wrong page for wrongpage.htm*/
}
}
</script>
<form>
Password:
<input type="password" name="pass" Size="20" onChange="passwordOK(this.value)" />
</form>

As you can see the input box triggers the javascript function ‘passwordOK.’ Below the function name, in the next paragraph and what to do if the password is correct. Below that is the alert if the password is incorrect. Have a play around with the script and see what you can do. The whole thing can be copied in the body tag of your page.