Around the Web in Eighty Kilobytes

	Sign In Sign-Up

Old Issues

PreviousIssues : 17 - July 28

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.33 - 1.34
   ATWI80KB 17

July 28, 2000

1) Javascript!!!
2) Getting Input
Example

1) JAVASCRIPT!!!
   Ah, time to start learning programming. I won't be blabbering much about Javascript, I'll just tell you what it looks like. Javascript is a very simple programming language, its syntax is a simplified version of Java's. Java's syntax is based in C's and C++'s, so if you're familiar with one of those Javascript should be NO problem. Even otherwise, it's the simplest language around and a good introduction to Object Oriented Programming (whatever THAT means). You usually put javascript in the header:
<html>
<head>
<title>Whatever</title>
<script language="JavaScript">
</script>
</head>
<body>
</body>
<html>

After the <script language="Javascript"> bit, open comments with a '. the '//' is how you get a one-line comment with Javascript. To get longer comments, you can open comments with '/*' and close them with '*/'. These can be spread over many lines. BTW, you can use 'enter's and spaces in Javascript, too, and though case usually doesn't matter it's better to use small letters.

For any non-programmers reading, a variable is a little blob of information set by the programmer and used within the program.
To declare a variable in Javascript, use this:
   var variable_name=variable_value;

The variable name can be any combination of letters and numbers or just letters, though it's a bad idea to start it with a number. Make it anything easy to understand. No spaces allowed, but you can use underscores - '_'. The value can be text, a number or another variable. You can combine two bits of text or add two numbers with '+'. With numbers, you can also use '-' to subtract, '/' to divide or '*' to multiply.
eg. var number1=5;
    var number2=3;
    var answer=number1 + number2;
    document.writeln(number1 + " plus " + number2 + " is equal to" + answer + ".");

Notice the semi-colon after each line? That's important. It marks the end of each statement.
What the program above does is give the variable 'number1' a value of five, variable 'number2' a value of three, adds them, and writes:
   5 plus 3 is equal to 8.

'document.writeln' is, of course, the way to write stuff on the screen. Another way to let the page viewer know something is:
   alert('Surprise!!');

This makes a box pop up on screen like an error message and say whatever's in the brackets. You can put text and/or variables in there separated by + if there's more than one thing. It works the same as the 'document.writeln' above.

NOTE: When choosing a variable name, you can use capital letters.

2) GETTING INPUT
   There are two useful ways to get input easily. One is:
   var name=prompt("What is your name?","Enter your name here");

This makes a box appear with 'What is your name?' written in it. Underneath is a space to enter stuff. In this particular example, it says 'Enter your name here', but you can make it blank:
   var jobthingy=prompt("What is your job?","");

The variable 'name' in the first example or variable 'jobthingy' in the second example gets the value of whatever the fellow viewing the page enters. If he presses 'Cancel' the variable is given a value of 'null'. You only need to say 'var' the first time you refer to a variable, or give it a value. You can give a variable a value twice:
   var animal="Cow";
   animal="Goat";
The latest value given, i.e. 'Goat', is the value of the variable.

The other way good to get input is to use a form. I like this one better because it is WAY less irritating.

Make this form in HTML:

<form name="fish_form" onSubmit="return false;"> <input type="text" name="salmon_says"> <input type="button" onClick="getValue();"> </form>
Then put this Javascript in the head: <script language="JavaScript">  </script> ...and donkeyKong gets the value of whatever's in the text box. If you read the example above properly, you should be confused about three things: a. onSubmit="return false;" b. onClick="getValue();" c. function getValue() {...} onSubmit="return false;" is just something you're meant to put in forms when you use Javascript, never mind why. 'onClick' is an attribute you can put in most tags. It means, when the page viewer clicks in whatever has the attribute, any Javascript code there gets executed. Over here, 'getValue();' is the code being executed. It means 'do the function called 'getValue'. Like 'onClick', there's also 'onMouseOver', 'onMouseOut', 'onLoad', 'onMouseMove' and much more. Functions are going to be a bit tough to explain. Code which isn't a part of any function is executed as soon as a page loads. Code in a function is only executed when the programmer asks it to be. In this case, the programmer asked it to be executed when the viewer clicks on a button. Functions begin with '{' and end with '}'. TIP: To round off answers, use:    var whatever=Math.round(variable_to_be_rounded_off);EXAMPLE <html> <head> <title>OuchOuchOuchOuch</title> </head> <script language="JavaScript">  </script> <body bgcolor="#FFFFFF"> <form name="inputThingy" onSubmit="return false;"> Pick a number again<input type="text" name="box"> <input type="button" value="Okay" onClick="findThing();"> </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.