Around the Web in Eighty Kilobytes

Home Old Issues Examples
 PreviousIssues : 18 - August 4
Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com


AROUND THE WEB IN EIGHTY KILOBYTES 1.35 - 1.36
   ATWI80KB 18

August 4, 2000

1) More Javascript Commands
2) Loops
Example


1) MORE JAVASCRIPT COMMANDS
   There's a useful thing Javascript which lets you go to another page - 'location.href'.
eg. location.href="http://www.hotmail.com";

This can be used along with a text box to make an address bar like the ones used in web browsers! Put this in the head...
    <script language="Javascript">
    <!--
    function goAway() {
       var url=document.addressForm.addressBox.value;
       location.href=url }
    //-->
    </script>
...and put this in the body:
       <form name="addressForm" onSubmit="goAway()">
       Address:<input type="text" name="box">
       <input type="submit" value="GO!">
       </form>
Opening Windows:
   To open a window with Javascript, use:
   window.open(URL_of_new_window,window_name)
There's a separate thingy for controlling window properties, but that's a bit more advanced.
   You can refer to another window with:
   top.window_name.whatever;

For alerts etc, there's another step:
   top.window_name.window.alert('Surprise!');


2) LOOPS
   There are three types of loop in Javascript:
  • 'if' loop.
  • 'for' loop.
  • 'while' loop.
'if' loops are executed as long as a condition is met. Here's how they're written:
    if(cow==1) {
       /* Type some Javascript code here to be executed if 'cow' is equal to one */
    }
There are meant to be two '='s. It could also be '!=', '>', '<', '>=' or '<='.
Here's what they mean:
==    Equal to
!=    Not equal to
>    Greater than
<    Less than
>=    Greater than or equal to
<=    Less than or equal to

If there are two conditions to be met,

   if((cow==1) && (goat>3)) { whatever }
This means 'cow' has to be 1 AND 'goat' has to be less than three.

   if((cow==1) || (goat>3)) { whatever }
This means 'cow' has to be 1 OR 'goat' has to be less than three.

Always make sure 'if' is in lower case.

'for' loops are a bit confusing. Here's how they're written:
    for(cow=4; cow<11; cow++) {
    nbsp;  //Whatever
    }
Before the first semi-colon, declare the value of the variable.
Between the first and second semi-colons, say while what conditions are to be met for the loop to continue.
After the second semi-colon, say what to do with the variable. '++' means add '1', '--' means subtract '1'.

   In the example, cow is given a value of 4. While cow is less than 11, the loop continues. '1' is added to 'cow' every time.

'while' loops mean go on repeating the code in the wiggly brackets while the conditions in the normal brackets are fulfilled.
eg. while(donkey<10) {
       donkey=donkey+2;
       alert("Little Donkey!");
    }
    alert('Big Donkey!');

This'll go on repeating the code in the wiggly brackets until donkey gets a value of 10, when it'll say 'Big Donkey!'
EXAMPLE
<html>
<head>
<title>End of Javascript</title>
</head>

<script language="JavaScript">
<!--
function newThingy() {
   var where=prompt("Where do you want to go enter the URL?","http://atwi80kb.homepage.com");
   var what=prompt("What do you want to call the window?","");
   window.open(where,what);
}

function countdown() {
   var num=document.InputTheVar.TheVar.value;
   num=Math.round(num);

   for (thingy=num; thingy>-1; thingy--){
      alert(thingy);
   }
}
//-->
</script>

<body bgcolor="#FFFFFF">
<hr><br>

To open a new window, click <a href="javascript:newThingy()">here</a>
<!-- Look at how you can make the browser execute a function. Here's another way: -->
or <a href="#" onclick="newThingy();">here</a><br>


<!-- Use the link above to open a new window and see what happens if you call it 'window2' -->

<br>

Click <a href="#" onclick="window.open('http://atwi80kb.homepage.com','window2');">here</a>.

<form name="InputTheVar" onSubmit="return false;">
Enter a number and watch the countdown:<br>
<input type="text" name="TheVar">
<input type="button" value="OK" onClick="countdown();"
</form>

</body>
</html>


See you in a week!
Aniruddh Nath


Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.