JavaScript Basics

This is a brief outline of the basic building blocks of JavaScript, adapted from Negroni & Smith, "JavaScript for the World Wide Web," © 1999, Chapter 2

• Objects - JavaScript was designed to be used inside an HTML document to make things happen. Therefore, JavaScript's objects include things we commonly find in web browsers, such as:
  • window
  • form
  • form elements, including
  • button
  • checkbox
  • Give each object you create a special name.
• Properties. Objects have properties. JavaScript describes these properties by placing them after the object's name. The name and property are separated by a dot, which is known as dot syntax, to wit:
  • document.images.name
  • window.status
• Methods. Methods in JavaScript are action words -- things that you command an object to do. Methods are distinguished from properties by placing parentheses ( ) around an object. The "value" of the thing being done, such as go(), can be placed inside the parentheses. So, sample methods applied to objects would look like this:
  • document.write( )
  • forms.elements.radio.click( )
• Events. JavaScript Events are "actions the user performs while visiting your page." Event Handlers are JavaScript commands which, appropriately enough, "handle" or carry out your desires if the user does a certain thing at a certain place on your page. JavaScript Event Handlers all begin with the word "on", followed by the event. The syntax is, "on (upon) the movement of the mouse, do the following....." Here are the JavaScript event handlers:
  • onMouseover - the cursor moved over an object. (Hmmmm - object -- remember that??? You define the object, the event, and assign the method [action] to be taken when the event occurs.)
  • onMouseout - The cursor moved off an object
  • onClick - The user clicked on an object.
  • onLoad - The object finished loading.
  • onSubmit - The user submitted a form. (Ah! Shades of CGI/Perl!)
  • onAbort -The user aborted loading the page.
  • onBlur - The user left the object.
  • onChange - The user changed the object.
  • onFocus - The user made an object active.
  • onSelect - The user selected the contents of an object
  • onUnload - The user left the window
• Variable. A variable is a "container" which holds values. You define the variable names. A variable is a container which can hold various (many different) values, depending on what you assign to it, just as a cup can hold coffee, juice, water, soda, or beer.
• Value. A value is, well, something a computer can use, crunch, calculate, print, or add to. Values are assigned to variables using the = sign, which means "set to". For example, myName="Ray" means "the variable myName is set to the value"Ray". String values, as we see below, will be placed in quotes.
• Value Types. The following value types are common to JavaScript and other computer languages:
  • Number - Any numeric value - 1,2,3,4.
  • String - A string is any group of characters placed inside quote marks - "Hello, world!" or "R2D2", or "Cp3po" Strings can include numeric characters, but cannot be added, subtracted, multiplied,or divided, i.e., "crunched."
  • Boolean - True or False. More on Mr. Boole later, with "if True, then call Mr. Boole; else if false, call Mrs. Boole."
  • Null - Empty and meaningless. Sometimes we want objects to be empty, or at least we want to command the computer to return some admonishing statement to the user if he/she leaves a credit card text box "null", i.e., empty.
  • Object - any value associated with an object
  • Function - value returned by a function.
• Operators. Operators are the symbols used to work with variables
• x+y(Numeric) -- Adds x and y together
• x+y(String) -- Concatenates x and y together. If x="Ray" and y="mond", then x+y = "Raymond." That's concatenation -- i.e. the strings are strung together.
• x++ - Adds 1 to x after the assignment is complete. If x=5 and "y=x++", then y is 5 and x is set to 6. The command is, "Set y to the value of x, then add 1 to x."
• ++x - Adds 1 to x before the assigned method is carried out. If x=5 and "y=++x, both x and y = 6. Yes! Work it out! Here, the command is, "Set y to the value of x after x is incremented by 1."
• Assignment Operators. The assignment operators are what you would expect:
• x=y,  Set x=y
• x+=y,    Set x = x+y
• x-=y,   Set x = x-y
• x*=y,  Set x=x*y
• x/=y,  Set x = x/y
• x%=y,  Set x=x%y
• Comparisons. You all know about comparisons. We make comparisons of each other all the time.
• If x>y Returns true if x is greater than y
• If x<y Returns true if x is less than y
• If x>=y Returns true if x is greater than
• If x<=y  " less than or equal to.
• If x==y Returns true if x and y are equal. (Why can't you use one = sign? Because the equal sign is used to mean "set to" in setting the value of variables. It cannot also mean "equals". That is, the same assigned character in a computer program cannot be used as a shorthand to give two separate commands!
• If x!=y. Returns true if x and y are not equal
• Reserved Characters.Every computer language reserves special characters that give commands to the program to do things. These special or reserved characters cannot be used by you unless you put them in quotes or otherwise code them properly so the computer program running the script you create recognizes them as not making special commands. In JavaScript special characters include:
  • The dot, for dot syntax;
  • The quotation marks;
  • The equal sign, which means "set to";
  • Parentheses for enclosing values used in methods;
  • The Assignment operators listed above;
  • The Comparison operators listed above.

  Got it? Well, if not, please study this outline carefully, or you'll have a hard time deciphering JavaScript, with all its dots and names and bundles of commands. Once you know the basics building blocks, we'll go on to put them together to form code. We'll cover that in separate lessons.