|
|
Introduction
Web page scripting via JavaScript:
 | The script is contained within the HTML of the web page. It may be found in a script tag or as as DHTML code tied to a form event (or other CSS event). |
| Client scripts are "programs" that run within the browser environment. |
| The programming languages are relatively powerful with data, control, and structuring syntax in addition to being able to access object-based features of the web browser. |
| The script is processed by a "scripting engine" that is part of the browser. |
| The scripting engine has access to the web document object, HTML and form objects, and many system functions (date, time, ability to access cookies) |
| Script engines may not read and write other files (security reasons primarily) in the operating system of the client computer. |
| Implementation of the scripting engine is operating system (to some degree) and browser (more so) dependent. |
| There are subtle differences in JavaScript for Netscape and JScript for Internet Explorer. |
Language Fundamentals
JavaScript is not related to Java, however, like Java, it shares much of it's syntax with C.
Data Types
JavaScript supports three primitive data types:
- Boolean - true, false
- Number - all numbers
- Integers
- Hex and Octal
- Floating Point
- String - typically quoted
JavaScript also supports two composite data types:
- Object
- Arrays (of numbers, strings, Boolean, objects)
In addition JavaScript supports two trivial data types:
- Null
- Undefined
JavaScript is a weakly typed language in that ALL variables are not declared as a specific data type.
Variables are declared by the "var" statement and may be overloaded with a value (e.g., var vname = 12;)
Functions
JavaScript has two types of functions:
- User-defined - created by the user (can include a unique name, input parameters, and returned data).
- Built-in - including the following:
| Escape - encodes the string that is contained in the string
argument to make it portable (a string is considered portable if it can be
transmitted across any network to any computer that supports ASCII
characters). To make a string portable, characters other than the following
69 ASCII characters must be encoded: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 @*-_+./ All other characters are converted either to their two digit (%xx) or four digit (%uxxxx) hexadecimal equivalent. |
| Eval - evaluates and/or executes a string of JavaScript code. |
| isFinite - used to determine if an argument is a finite and legal number. |
| isNaN - used to determine if an argument is a NaN. |
| Number - converts the object argument to a string representing the object's value, if the value cannot be represented by a legitimate number, the "Not-a-Number" value, NaN is returned. |
| parseFloat - determines if the first character in the string argument is a number, parses the string from left to right until it reaches the end of the number, discards any characters that occur after the end of the number, and finally returns the number as a number (not as a string). |
| parseInt - find the first integer in a string. There are two arguments. The mandatory string argument is the string which is presumed to contain an integer. The optional radix argument specifies the base of the integer and can range from 2 to 36. For example, 16 is the hexidecimal base (0123456789ABCDEF). |
| String - converts the object argument to a string representing the object's value. |
| Unescape - decodes an encoded string argument that was created using the escape function |
Objects
Many of these are/can be named objects (you can define a local name, e.g., var mystring = "hello world", mystring is a string object).
| Anchor - target of a hyperlink |
| Applet - embedded applet in a web page (often Java) |
| Area - same as a link |
| Array - built-in support for arrays, includes length property; also includes concat, join, pop and other methods. |
| Boolean - support for boolean values |
| Button - graphic pushbutton |
| Checkbox - graphic checkbox |
| Date - manipulate date and time values |
| Document - HTML document window management, numerous properties for document objects (links, forms, etc.); includes write method for output to browser window |
| Event - details about an event |
| FileUpload - file upload for form input |
| Form - HTML input form (typically superior to form objects) |
| Frame - type of window object |
| Function - a JavaScript function |
| Hidden - hidden data field access |
| History - URL history of the browser |
| Image - image in a web browser document |
| Layer - independent layer in a DHTML document |
| Link - hypertext link |
| Location - represents and controls browser location (current URL, host port, and protocol information) |
| Math - manages mathematical functions (absolute value, trig functions, random, round, etc.) and constants (.E, .LN10, .PI, etc.) . |
| Navigator - information about the current browser (type, platform, etc.). |
| Number - support for numbers (convert to string, is a number). |
| Object - superclass that contains features of all JavaScript objects. |
| Option - an option in a select box. |
| Password - specialized input box. |
| Radio - graphical radio button. |
| Reset - graphical button for resetting a form. |
| Screen - provides information about the display. |
| Select - a graphical selection list. |
| String - support for strings include replace, search, concatenation, and other manipulation methods. |
| Submit - graphical button for triggering a form submission. |
| Text - graphical text input field. |
| Textarea - graphical multi-line text input area. |
| Window - web browser window or frame. |
Expressions and Operators
| Arithmetic = +, ++ -, -- / % |
| Assignment = |
| Backslash Escaped Characters \' \" \\ \b \f \n (newline) \r \t |
|
Bitwise & | ^ ~ << >> >>> |
| Comparison == != === !== > >= < <= |
|
Logical && (and) || (or) ! (not) |
| Special ?: ' delete new this typeof void |
| String + (concatenate) |
Control Statements
| If...Else - executes one set of statements if a specified condition is true, and another if it is false. |
| Evaluate statements if expression is true for if condition or subsequent else conditions. |
| Includes if, if-then logic; complex Boolean evaluation. |
| Short-circuit if first logical expression is found false. |
| Examples: if (expression) statement; |
if (expression) {
statement;
statement;
.... }if (expression) {
statement;
statement; }
else
statement;if (expression) {
statement;
statement; }
else {
statement;
statement; }if (expression) {
statement;
statement; }
else if (expression)
statement;
| For - creates a loop consisting of three optional expressions enclosed in brackets and separated by semicolons, and a block of statements to be executed. |
for (expression1; expression2; expression3)
statement...
expression1 - initial value
expression2 - goal value
expression3 - modify value or function
| For...In - used to iterate a declared variable over every property in a specified object. |
for (variable in object) {
statements...
}
| Do...While - executes one or more statements at least once, checking that a certain condition is met each time before repeating. If that condition is not met, then control moves to the statement immediately after the loop. |
do {
statement;
statement;
... }
while (expression)
| While - creates a loop consisting of a block of statements that is executed if the expression evaluated is true. |
while (expression) {
statement;
statement;
... }
| With - establishes a default object for a set of statements. If there are any unqualified names in a set of statements, JavaScript first checks the default object to see if they exist there as properties of that object; otherwise a local or global variable is used. |
with (object) {
statements...
}
| Switch - tests an expression against a number of case options and executes the statements associated with the first one to match. |
switch (expression) statement
switch ( command )
case 'A': statement
case 'B': statement
Other statements...
| Function - declares a function with its specified parameters, which can include numbers, strings and objects. To return a value, a function must have a return statement specifying the value to return. |
| Break - used to terminate a current loop, switch or label statement and pass control to the statement immediately following it |
| Comment - programmer notes, they are ignored by the JavaScript interpreter |
| Continue - restarts a while, do...while, for or label statement, in a while loop it jumps back to the condition. |
| Export - allows a signed script to provide properties, functions and objects to other signed or unsigned scripts. |
| Import - allows a script to import properties, functions and objects exported by a signed script. |
| Label - used to identify a statement allowing you to refer to it elsewhere in a program, typically used with the break or continue statements. |
| Return - specifies the value to be returned by a function and performs the act of returning that value to where the function was called from. |
| throw - allows the programmer to create an exception. This exception can be a string, integer, Boolean or an object. |
| try...catch - used to test a block of code for errors. The try block contains the code to be run, while the catch block contains the code to execute if there is an error. |
| Var - used to declare a variable, and outside of a function its use is
optional. |
Input/Output
| JavaScript, within the web browser environment, is dependent upon the browser (via HTML) for user input/output. |
| File I/O is limited due to security considerations. However, file access can be accomplished via system file objects (web server only). |
| JavaScript does not have database access capability in the browser. |
Note: there are environments where JavaScript syntax is used where additional features exist. These include web servers (via Active Server Pages, ASP) where file and database I/O is accomplished via object interfaces.
Web Sites for JavaScript
| www.javascript.com - Netscape sponsored, references and tutorials are available |
| http://msdn.microsoft.com/scripting/default.htm - Microsoft sponsored, references and tutorials are available |
| http://www.builder.com/Programming/Javascript/?st.bl.fd.ts3.feat.1711 - a JavaScript tutorial on CNET.com |
| http://www.devguru.com/ DevGuru: an excellent reference on JavaScript |