JavaScript is a client-side programming language meant for use on the Web. In other words, when a visitor downloads a page with JavaScript in it, that script is ran on the visitor's computer inside his or her Web browser.
JavaScript can create pop-up windows and cause text or a graphic image to change during a mouse rollover. It also includes commands that allow you to control the content being displayed in the browser. It can be used to open new documents in a window or to return to a previously visited document. JavaScript is also very handy for working with frames and content in groups of related windows since it can be used to pass information between windows and frames. JavaScript is also commonly used for creating interactive menus and interactive quizzes. JavaScript can be used to process data as well as validate form data (i.e., mathematical computation, generation random numbers, performing other typical computational actions, et cetera). It allows one to add scrolling messages, data input forms and animation to a Web page. JavaScript can even be used to pass information to Java applets within the browser window. This allows properties to be set dynamically when the applet is executed.
JavaScript has no graphics capabilities, no networking support and no access to the contents of your computer. It cannot access files on the server, handle file uploads or gather any information about the user (i.e., email address, IP address, et cetera). JavaScript also cannot read or write files. In other words, JavaScript cannot create stand alone applications or applets. It cannot create multiplayer games or get data from a server database. It cannot submit credit card-based purchases for authorization and payment.
Despite, the fact that both JavaScript and Java both resemble C in their syntax, JavaScript is not Java. JavaScript (originally named LiveScript) is a primarily client-side scripting language from Netscape that is only marginally related to Java, a network application language created by the Sun Microsystems. It should be noted that JavaScript can communicate with Java, which is a useful feature, but they are not the same thing. JavaScript resembles Java but does not have Java's static typing and strong type checking. The difference is that Java was built as a general-purpose object language, while JavaScript is intended to provide a quicker and simpler language for enhancing Web pages and servers. In contrast to JavaScript's runtime system based on a small number of data types representing numeric, Boolean and string values, Java's compile-time system of classes is built by declarations. JavaScript can be used to fully control Netscape and Microsoft Web browsers, including all the familiar browser attributes (see JavaScript Resource Center for additional information). Java is used to create applets or stand-alone applications whereas JavaScript lacks this capability.
In order to use variables, you declare a variable and given a value to that variable. When declaring a variable, use the keyword VAR. An example of a code that utilizes variables is a follows: var page= 0. Variables must start with a letter or underscore and subsequent characters can also be digits (i.e., 0, 9, et cetera) or letters (i.e., A, a, Z, z, et cetera). There should not be any punctuation or spaces within the variable name. Please note that JavaScript is case sensitive. In other words, JavaScript interprets myvar and myVar as two different names (See JavaScript Variable Chart for examples of valid variables). Also, avoid naming variables with reserved words, which are predefined words in JavaScript with a specific meaning (See JavaScript Reserved Words for more information). In JavaScript, all variables have either a global and local scope. Global scope means that the variable is defined everywhere in the script and by extension, everywhere in the document containing the script. For example, all predefined variables and objects have a global scope. Local scope means that the variable is local to a function. In other words, it only exists within the function for the duration of the function. Please noted that JavaScript does not have a block scope.
Javascript supports several types of variables (See JavaScript Variable Chart for more information about variable types), which are strings, objects, null, undefined, numbers and boolean (true or false). Strings are delineated by single or double quotation marks. Number variables include integer and floating-point numbers. Integers can be positive, 0, or negative; Integers can be expressed in decimal (base 10), hexadecimal (base 16), and octal (base 8). A decimal integer literal consists of a sequence of digits without a leading 0 (zero). A leading 0 (zero) on an integer literal indicates it is in octal; a leading 0x (or 0X) indicates hexadecimal. Hexadecimal integers can include digits (0-9) and the letters a-f and A-F. Octal integers can include only the digits 0-7. A floating-point number can contain either a decimal point, an "e" (uppercase or lowercase), which is used to represent "ten to the power of" in scientific notation, or both. The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-"). A floating-point literal must have at least one digit and either a decimal point or "e" (or "E"). An object is a complex data type that is made up of a collection of data elements (i.e., var x = new Object();). See JavaScript Objects for more information about and examples of Objects. The possible Boolean values are true and false. These are special values, and are not usable as 1 and 0. In a comparison, any expression that evaluates to 0 is taken to be false, and any statement that evaluates to a number other than 0 is taken to be true.
A literal is a value that can be assigned to a variable. Literals are not variables! They are fixed values that the designer literally provides in his or her application source. In other words, literals are what they are and do not change. Several types of literals (i.e., integers, floating-point numbers, strings and Boolean literals) in JavaScript correspond to the variable types. Variables represent values stored in memory for use by the script. The difference between the two is a literal evaluates to itself whereas a variable evaluates to the value assigned to it. When literals and variables are linked by operators, the resulting statement is an expression. However, a literal or variable may be a valid expression, they are not expressions that do anything. Expressions that actually perform a function are created by linking simple expressions together with operators.
The simplest form of expression is a literal or a variable. An expression is any valid set of literals, variables or operators that is used to evaluate to a single value (i.e., a number, a string, a logical value, et cetera). An operator combines simple expressions together into more complex expressions by creating relationships between the simple expressions that can be evaluated (i.e., 2 + 9). The numbers 2 and 9 are each valid expressions whereas the plus sign (+) is an operator. The equation 2 + 9 is also a valid expression, whose value is 11. There are two main categories of expressions: assignment operators, expressions that assign a value to a variable and operators, expressions that simply have a value. The assignment operator (=) is a binary operator that assigns a value to the left operand (usually a variable) based on the value of the right operand (such as FirstName = "Erik" or x = y * 7).
Precedence refers to the order of evaluation when an expression contains several operators. This determines the order the expressions are applied when evaluating an expression. The rules for the order of precedence are as follows: operators are evaluated in the order of their precedence, operators of same precedence are evaluated based on their associativity, parenthesis are used to override precendence, and Parenthesized expressions are evaluated from the innermost to the outermost set of parenthesis. Essentially, an expression operates by taking the values to the right-hand side of the equal sign, performing the arithmetic operation and then storing the result in the variable. If the expression contains literals, variables or operators of the same level of important then the computer will evaluate the expression from left to right. In JavaScript, multiplication and division have higher precedence than addition and subtraction.
In order to evaluate a user's input, or any calculations that JavaScript may perform, conditionals (also known as if()and else {} statements) are used to compare one value with another.
| Symbol | Meaning and use of Symbol |
| == | This is what is used to check equivalence, not what to set the value of a variable. Furthermore, == is for equivalence and = sets a value. |
| >= | This is to check if the value on the left of the symbol is greater then or equal to the value on the right. |
| <= | This is to check if the value on the left of the symbol is less then or equal to the value on the right. |
| != | This is to check if the value on the left does not equal the value on the right. |
| && | This means AND. If you want to see if two or more things are true. |
| || | This means OR. If you want to see if one of multiple things is true, then use OR. |
Basically, functions are statement blocks that have been assigned a name. A function contains some code that will be executed by an event or a call to that function. Please note that a function is defined only once in a program, but it can be executed several times. Unlike other programming languages (i.e., Java, et cetera), JavaScript functions are true data types. In JavaScript, functions are defined using the function keyword, the functions name is followed by parentheses and the code is then inserted inbetween curly brackets. For example, it would look something like this:
|
< script type="text/javascript" > < !-- // Function 1 ( requirement of function ) function nameofFunctions () { alert( "I am function 1") ; } //--> < /script > |
Remember that functions are to be placed inside the SCRIPT tags inside the HEAD section. By placing functions in the head section of the document, you make sure that all the code in the function has been loaded before the function is called. A function is not executed before it is called. A function with arguments, variables used in the function, looks just like a function with no arguments except the variables are included in the parentheses. For example, calling a function with no arguments looks something like this:
| zxfunction() |
JavaScript has objects, which are like things and are identified by nouns. Objects have properties (i.e., object.property) that describe how objects look and enhance the object. Listed below are some examples of objects properties and what they do:
| Property | What it does |
| alinkColor | A string that specifies the color of the activated links. May be set in the document < HEAD > or through the ALINK attribute of < BODY >. |
| anchorist[ ] | An array of Anchor objects, one for each of the hypertext target in the document. |
| applets[ ] | An array of Java objects, on for each < APPLET > that appears in the document. |
| bgColor | A string that specifies the background color of the document. Initially set through the BGCOLOR attribute of . |
| cookie | A string that is the value of a cookie associated with this document. |
| domain> | A string that specifies the Internet domain the document is from and is used for security purposes. |
| embeds[ ] | An array of Java objects, one for each < EMBED > tag that appears in the document. |
| fgColor | A string that specifies the color of document text. May be set in the document < HEAD > or through the TEXT attribute of < BODY >. |
| images[ ] | An array of Image objects, one for each image embedded in the document with the < IMG > tag. |
| forms[ ] | An arrray of Form objects, one for each < FORM > that appears in the document. |
| links[ ] | An array of Link objects, one for each hypertext link in the document. |
| linkColor | A string that specifies the color of unvisited link in the document. May be set in the < HEAD > or through the LINK attribute of < BODY >. |
| lastModified | A read-only string that specifies the date of the most recent change to the document (as reported by the web server). |
| location | A synonym for the URL property. Not the same as the Location object window.location. |
| plugins[ ] | A synonym for the embeds[ ] array |
| referrer | A read-only string that specifies the URL of the document that contained the link that referred to the current document. |
| title | A read-only string that specifies the < TITLE > of the document. |
| URL | A read-only string that specifies the URL of the document. |
| vlinkColor | A string that specifies the color fo visited links. May be set in the document < HEAD > or through the VLINK attribute of < BODY >. |
Objects also have methods (i.e., object.method()) or actions that can be performed on or by the object. Please note that all methods have parentheses. Below are some examples of methods and a description of what they do:
| Methods | What it does |
| clear() | A method that erases the contents of the document. |
| close() | A method that closes a document stream opened with the open() method. |
| open() | A method that opens a stream to which document contents may be written. |
| write() | A method that inserts the specified string or strings into the document currently being parsed or into a document stream opened with open(). |
| writeln() | A method identical to write(), except that it appends a newline character to the output. |
An event is something that happens (i.e., an image that has loaded, et cetera) whereas event handlers are JavaScript methods allow programmers to control what happens when events occur. For more information about events and event handlers, please visit JavaScript Events and Event Handlers. Below is a list of possible event handlers and what they do.
| Event Handlers | What it does |
| onAbort | The user aborts the loading of an image |
| onBlur | The form element loses focus or when a window or frame loses focus. |
| onChange | Select, text, or text area field loses focus and its value has been modified. |
| onClick | The object on a form is clicked. |
| onDblClick | The user double-clicks a form element or a link. |
| onDragDrop | The user drops an object (i.e., file) onto the browser window. |
| onError | The loading of a document or image causes an error. |
| onFocus | The window, frame, frameset or form element receives focus. |
| onKeyDown | The user depresses a key. |
| onKeyPress | The user presses or holds down a key. |
| onKeyUp | The user releases a key. |
| onLoad | The browser finishes loading a window or all of the frames within a frameset. |
| onMouseDown | The user depresses a mouse button. |
| onMouseMove | The user moves the cursor. |
| onMouseOut | The cursor leaves an area or link. |
| onMouseOver | The cursor moves over an object or area. |
| onMouseUp | The user releases a mouse button. |
| onMove | The user or script moves a window or frame. |
| onReset | The user resets a form. |
| onResize | The user or script resizes a window or frame. |
| onSelect | The user selects some of the text within a text or text area field. |
| onSubmit | The user submits a form. |
| onUnload | The user exits a document. |
Frames are seperate documents (i.e., sidebar frame, main frame, et cetera) that form one browser window. The HTML tags < FRAMESET > and < /FRAMESET > , which are placed in the < BODY > tag, create frames. The FRAMESET tag has a single set of attributes, which will create either rows or columns depending on the attribute that is implemented, and a SRC attribute, which identifies the HTML source page for each frame. In JavaScript, each frame is considered an object. Being an object, JavaScript applies methods and properties to allow dynamic controlling the browser window. Below is an example of a FRAMESET tag.
| < frameset cols="25%, 75%" border="0" spacing="0" frameborder="0" framespacing"0" > < frame name="contents" target="main" src="sidebar.html" border="0" spacing="0" frameborder="0" framespacing"0" > < frame name="main" src="main.html" border="0" spacing="0" frameborder="0" framespacing"0" > < /frameset > |
Arrays are data elements that store a collection of discrete data elements. Arrays are usually a group of the same variable type that use an index number to distinguish them from each other. There are several built-in arrays in JavaScript. For example, forms can be kept in arrays. Such a form would be referenced as document.forms[0], if it is the first form. However, if it was the second form, it would be referenced as document.forms[1]. Please note that arrays always start at 0. With that in mind, just follow the pattern and increase the number inside the square brackets (i.e., third array would have a 2 in the square brackets, et cetera). Images can also be kept in a built-in array (i.e., document.images[0].src).
