Beginning Javascript Course
Input
Prompt()
Computers would be pretty useless if they were non-interactive. What makes them powerful is the ability to allow us to input data quickly, and their ability to organize and manipulate that data quickly and reptitively.
Variables have the ability to hold integers, character strings, etc. As such, we can declare variables such as:
var NameQuestion = "What is your name?";
var AgeQuestion = " What is your age?";
Using the prompt() command (commands are otherwise known as METHODs), we can "prompt" the user with a question, allow the user to input data, then create a new variable from the user's input. The prompt METHOD will bring up a "dialogue box".
It's coded like this:
var NameQuestion = prompt ("What's your name?", "Bob Surunkle");
The prompt() command/ METHOD has two parameters. The first parameter is the question itself, the second is a "suggested answer", which can be used to let the user know what format will be expected. Notice that a comma is used to separate them. You'll notice that in the dialog box, they form the question and the default text. It is possible to leave either and/or both of these parameters blank like so: prompt("", ""). The variable name, above, becomes whatever the user types into the dialog box, or if for some reason the user doesn't change it, the default value (in this case "Bob Surunkle") is used.
Now that we have input data into the computer, we can use an operator, like a "*" or "/", to combine or work with the variables. If we are dealing with Character $trings, the "+" operator will combine the strings together. For instance:
var NameQuestion = prompt ("What is your name?", "Bob Surunkle");
var AgeQuestion = " prompt ("What is your age?", "35");
var Name = "Your name is ";
var aNdOr = "and you are ";
var Age = "years old.";
var ComBined = Name + NameQuestion + aNdOr + AgeQuestion + Age;
document.writeln(ComBined);
If the user simply clicks "OK", without making any changes, the above would translate to:
var ComBined = "Your name is Bob Surunkle, and you are 35 years old."
Output
writeln()
If it is true that "to give is better than to receive", then it must follow that if Input is good, output must be even better.
Once they are declared and defined, variables can be used to actually write or add to HTML in a web page by using the "document.writeln()" METHOD.
Methods and Objects and States, Oh My
As mentioned before, a METHOD is basically a command, but more that that - it can be an entire "chunk" of code or commands that can be re-used.
In this particular case, the "writeln()" METHOD is attached to an OBJECT. The OBJECT, in this case is "document". You may be asking yourself, "what is an OBJECT?" It may be possible that you may have heard of "Object Orientated Programming" (or OOP), but don't know exactly what an OBJECT is.
Understanding what an OBJECT is, and how it works is very important at this point. Objects in programming may be closely understood, by first understanding physical OBJECTs. Let's start with something you understand well:
You have, on your nightstand, a radio alarm clock. This clock has both STATEs and BEHAVIORs.
The radio part may have several states: On, Off, Current Volume, Current Station.
The radio part may also have several behaviors: turn on, turn off, increase volume, decrease volume, seek, scan, tune).
The clock part may also have several states: Running, Blinking, Current Time, Alarm Time, Alarm Set, Alarm Off.
The clock part may also have several behaviors: Set Time, Set Alarm, Snooze, Sleep, Die a horrible death.
Software OBJECTs also have both states and behaviors. The behaviors are almost always related to the states, in that they interact. (Improperly setting the time may adversely affect when the alarm goes off in the morning, causing you to lose your job, not pay your rent, and become a homeless bum - but I digress).
An OBJECT stores its state in VARIABLES ( AKA data or fields in some programming languages ), and changes it's behavior through METHODS (commands or functions in some programming languages). A METHOD affects an OBJECT's state and are the primary mechanism for object-to-object communication.
In older programming languages like BASIC, FORTRAN, COBOL, etc, you had to completely load the entire program before it would run. The problem with this is that it took a long time to load, and several pieces of the program may go entirely without being used - wasting memory, loading time, etc, causing the program ( and computer as a whole ) to run slower than necessary. Also, it the program was acting funny, you would have to debug the entire program, scanning through hundreds of thousands of lines of code before you found the single JNZ command that was making your database erase itself at random. Also, it took a long time to write, compile, make, load, test, debug, recompile, remake, reload, retest etc. This could be tedious if not painful to troubleshoot.
An "object oriented" program is a style of programming where, instead of writing one whole large program, several small program chunks are generated individually, then assembled on an as needed basis at runtime. This way, parts of the program that may never be used are not loaded at all, and the program as a whole can run faster. Each of these program chunks, or clusers (OBJECTS), can interact with each other and may also include other METHODs, properties, and events as well.
An interesting plus to this, is that you can hide all internal states, and require all interaction to be performed through an OBJECT's METHODs. By hiding the state (current station, volume ), and requiring all interaction to be performed via an OBJECTs METHOD (change station, change volume), the OBJECT remains in control of how the outside world is allowed to affect it. For instance... in the older tube radio's - with the string and knob - it was possible to turn the knob until the string (and indicator dial) got stuck, then you would never know what station you were really on.
Compare this, if you will, to an illegal input causing an overflow, or something else that inversely reacted with the program. By using "Encapsulated Data", you can avoid the possiblity of the user interacting directly with the states, and require that states only be changed by the allowable inputs. Thus you can tell them "volumes between 1 and 10", and if a 0 or 19 is given, the program can be designed to just ignore those incorrect inputs.
Therefore - we have 4 benifits to bundling code into individual OBJECTs:
- Modularity: The source code for an OBJECT can be written and maintained independently of the rest of the source code for other OBJECTs. Once an OBJECT is created, it becomes a plug and play device - placed anywhere within the program it is wanted (reminescent of the old GOSUB commands
- Code Re-Use: If an OBJECT already exists, you can use that OBJECT in your program - even if it is written by someone else. This cuts down on developement time for new software being developed.
- Stealth Operation: By only interacting with an ojbect's METHODs, the details of HOW the OBJECT works is hidden from the outside world. That way, your secrets remain secret.
- Debugging: If you think a particular OBJECT is causing a problem, you can simply remove it from your program, and plug in another one. This is kind of like real world repairs. If a spark plug goes out in your engine - you don't have to replace the whole car, or even the whole engine.... just the spark plug that's bad.
document.writeln() continued
For the moment, OBJECTs and METHODs are still expected to be a little vague, so don't spend too much time thinking about it. For now, suffice it to say that the "document" in document.writeln() METHOD represents an OBJECT (in this case an HTML document), and writeln() is the function attached to that OBJECT in order to write a single line of code into the (HTML document) OBJECT.
Here are a few examples of how document.writeln() METHOD is used to write the value of different variables onto a web page:
document.writeln(NameQuestion); this is how you write the value of a variable.
document.writeln("Your name is "); this is how you write the value of a text string.
document.writeln("Your name is " + NameQuestion "+ " and you are " + AgeQuestion + " years old."); this is how you combine the two.
In Essence, whatever is found between the ( ) will be written to the page.
If it is between quotation marks - " " - it will be read as text, otherwise it is assumed by JavaScript that it is a variable. If in this case, the variable does not exist, then chaos will ensue. And of course, text and variables can be simply combined by using the + operator between them.
[
ElectronicsTheory.Com
]
This Course was written by Ray Dall © All Rights Reserved.
This page and all it's content Copyright, Trademarks, Intellectual Properties
and other legal issues 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006 Ray Dall.
All Rights Reserved.
And for what it's worth... this page was last updated HexDate 01-11--7D1
VISITORS: 
