Introduction to JavaScript

Introduction to JavaScript
Part 6

I receive a lot of mails about the problem how two pages can be loaded with only one mouse click. Basically there are three different solutions to this problem. The first possiblity is to create a button which calls a function when the user presses it. This function loads the two pages into different frames or opens new windows. This is not too difficult if you have a look at our examples in the other parts of this introduction. We have all elements we already need.

We create three frames. The first one is used for the button. The first html-page is just needed for openening the frames and giving names to them. This is nothing new since we used this technique in part 3 in order to work with frames. I'll show it to you anyway. (I don't know whether this happens to you as well- but everytime an author of a computer book thinks that something hasn't got to be printed because it is so easy - this is exactly the part I'm having trouble with. So here we go:)

frames2.htm

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET COLS="295,*"> 
  <FRAMESET ROWS="100%,*"> 
    <FRAME SRC="loadtwo.htm" NAME="fr1"> 
      </FRAMESET> 
  <FRAMESET ROWS="75%,25%"> 
    <FRAME SRC="cell.htm" NAME="fr2"> 
    <FRAME SRC="cell.htm" NAME="fr3"> 
      </FRAMESET> 
</FRAMESET> 
</HTML>

loadtwo.htm is loaded to the first frame. This is the frame with the button.

loadtwo.htm

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
  function loadtwo(page2, page3) {
     parent.fr2.location.href=page2;
     parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
     <INPUT TYPE="button" VALUE="2 in a row" onClick="loadtwo('frtest1.htm','frtest2.htm')">
</FORM>
</BODY>
</HTML>

The function loadtwo() is called when the button is pressed. Two strings are passed to the function. If you look at the loadtwo() function you see that the second frame fr2 loads the page that is defined by the first string in the function call. If you have different buttons opening different pages you can reuse this function. You only have to pass the different URLs (addresses) of the pages.

The second technique uses hyperlinks. Some examples floating around the Internet have something like this:
<a href="yourlink.htm onCLick="yourfunction()">
This technique seems not to work on all platforms. So you better don't use it. I'm not sure if it is supposed to work at all - but we don't have to worry because there is another method how we can implement this. We can call a JavaScript- function the following way:

<a href="javascript:myfunction()">My Link</a>

This is really easy and seems to work fine on all browsers. You just have to write javascript: and then the name of your function as your 'link'. If you call the 'loadtwo()'- function from the example above you can update two frames with one single click on a hyperlink.

The third technique for loading two pages on one mouse click can be combined either with buttons or normal hyperlinks. We could do this with the second technique shown above but this approach here might be more appropriate sometimes. What we can do is to load one HTML- page to one frame. This is done by
<a href="getfr2.htm" target"fr2">Click here!</a>
We know this already. What we do now is to add a onLoad property to the loaded file. The getfr2.htm file could look like this:

<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.htm'; return true;">
bla bla bla
</body>
</html>

Of course you have to add this to every document that is loaded into the second frame.

Another often seen problem is how new pages can be loaded to a new window. The window shall pop up when the user clicks on a link. You just have to add the target- property to your tag again. This looks like this:
<a href="goanywhere.html" target="Resource Window">Go!</a>

Now we will have a look at different operators you might use in JavaScript. Operators are a powerful technique to shorten and improve your script. For example you want to test if a variable x is larger than 3 and you want to see if it is smaller than 10. You might want to write it this way:

if (x>3) 
  if (x<10)
    doanything();

The function doanything() is called if x>3 and x<10. There is a faster way to write this though:

if (x>3 && x<10) doanything();

The && is called AND- operator. Then there is an OR- operator. You can use this for example if you want to check if one variable x is equal 5 or another variable y is equal 17:

if (x==5 || y==17) doanything();

The function doanything() is called when x==5 or y==17. It is also called if both comparisons are true.
Comparisons are done via the == operator in JavaScript (Of course there are also <,>,<= and >=). If you know C/C++, this is the same. A single = is used to store a value in a variable. (If you know Pascal this may be a little bit confusing. Assigning a value to a variable is done in Pascal via := and comparisons with a single =)

If you want to see if a variable does not equal a certain number, this might get a little bit complicated without operators. This is done with a simple !=. So this would look like this for example: x != 17.

There are many more interesting operators which can make your programs more efficiently. Look at the documentation provided by Netscape to get a full overview of all operators you can use in JavaScript.

frames2.htm

loadtwo.htm

Index - Part 1 - Part 2 - Part 3 - Part 4 - Part 5 - Part 7