Some Information about Core JavaScript

JavaScript is pretty much the "only game in town" when it comes to client-side computation and web page interactivity. Certainly these days it is by far the most widely used tool for such things. This is in sharp contrast to the situation on the server side, where there are many competing alternatives. The notes on this page deal with the core language. A separate page discusses the DOM and client-side JavaScript.

See these sample files for illustrations of many of the concepts summarized here, and more.

Some History

• Early-1990s: A language called LiveScript developed at Netscape under Brendan Eich.
• 1995: Netscape+Sun rename LiveScript to "JavaScript", perhaps to capitalize on the surging property of Java. This has not been regarded as one of the inspired decisions of the time.
• 1997: European Computer Manufacturers Association (ECMAScript) (ECMA-262) assumes responsibility for the language, which thus becomes (formally) ECMASript, though most people then and now continued to call it JavaScript.
• 1999: ECMA-262, version 3 (or, ECMAScript 3 == JavaScript 1.5)
• Currently: ECMAScript 5 is gradually being implemented (ECMAScript 4 was judged to be too complex, and was essentially "passed over".)

Some High-Level Concepts

• JavaScript is object-based (not object-oriented).
• JavaScript is interpreted by the browser. The JavaScript "execution environment" includes:
  • An object of type Window called window, which serves as a reference to the window displaying the current document). Note that window "owns" all global variables, including ones you declare, which are accessible by all scripts associated with the given web page.
  • An object of type Document called document, which serves as a reference to the document currently being displayed.
• JavaScript code can be placed
  • in the body element of a web page (within a script element)
  • in the head element of a web page (within a script element)
  • in an external file linked to a web page (not within a script element)
  In those cases where the script is in the head element or the body element of the web page, the containing element will have script element that looks like this:

  <script type="text/javascript">
    ... code here for browser instruction ...
    document.write("Hello, world!"); //for example
  </script>
  

  In the case where the script is in an external file (script.js, say), a script element that looks like this will appear at the appropriate location in the web page markup:

  <script type="text/javascript" src="script.js"></script>
  

• You may use the following structure to hide a script from an older browser which does not understand JavaScript (this unlikely to be necessary nowadays, but you may still see it here and there):

  <script type="text/javascript">
    <!--
    document.write("Hello World!");
    //-->
  </script>
  

Debugging

For debugging JavaScript, make use of whatever debugging facilities are available, such as the Error Console under the Tools menu in Firefox, or the various features provided by the Firebug add-on to Firefox, for example.

Some Lower-Level Language Details

There are two types of comments in JavaScript:

1. // for single-line comments, or end-of-line comments
2. /* ... */ for multi-line comments

JavaScript is case-sensitive, but some aspects of (X)HTML and CSS are not, so be especially careful when mixing markup, styles and code.

Each JavaScript statement should be terminated by a semi-colon (;). This is not strictly necessary, provided each statement is on a separate line, but why tempt fate?

Braces (that is, the { and } symbols) group JavaScript statements into a compound statement. However, JavaScript does not have block scope, though it does have function scope.

Here is a table of the primitive data types in JavaScript, which are somewhat like the primitive types in Java or C++, with the notable exception that String is regarded as a primitive type, and there is no "single character" type.

Here is a list of JavaScript operators:

• Arithmetic, the usual ones: + - * / %
• Arithmetic, for incrementing and decrementing a numerical variable: ++ --
• Relational, for testing relational expressions: == != === !== < <= > >=
• Logical, for combining or negating expressions with boolean values: && || !
• Assignment, for assigning values to variables: =, as well as += *=, etc.
• The conditional operator ? :
• The string concatenation operator +
• The typeof operator:
  • typeof x returns number|string|boolean|object, depending on the type of x.
  • It may also be written typeof(x).
• The instanceof operator:
  • someObjectVariable instanceof SomeObjectType returns true or false, depending whether the given object has the given type.

Notes:

• The operator / is not integer division in JavaScript.
• === and !== should be preferred over == and != because they test for exact equality (that is for both value and type) while == and != only test for value, and may also cause type coercion in a way that makes the test misleading)

Here are the basic type coercion/conversion rules for deciding what type a result will have when values of different types are involved in an expression that produces the result:

• number+string or string+number gives a string result.
• number op string, string op number, string op string all give a numerical result if op is -, *, or / and string is in fact a number, otherwise the result is NaN.
• Number(string) and String(number) perform the indicated conversions.
• You can get the string equivalent of a numerical value with numericalValue.toString().

JavaScript has selection constructs analogous to those of Java, C and C++, except that the switch-statement permits the use of string values:

if (condition)
  statement

if (condition)
  statement1
else
  statement2

  
if (condition1)
  statement1
else if (condition2)
  statement2
else if (condition3)
  ...
else
  default_statement
  
switch (expression)
{
  case value1:
    statement1
    break;
  case value2:
    statement2
    break;
  case value3: //Multiple values can cause the same action
  case value4:
    statement_for_either
    break;
  ...
  default:
    default_statement
}

Note that any "statement" in any of the above patterns can be replaced by a compound statement (several statements enclosed in braces).

JavaScript has looping constructs analogous to those of Java, C and C++:

for (initialization; condition; update)
  statement
  
while (condition)
  statement
  
do
  statement
while (condition);

Notes:

1. Any "statement" in any of the above loop patterns can be replaced by a code block (several statements enclosed in braces).
2. The break; statement in the body of a loop causes the loop to be terminated at that point and execution to continue with the next statement following that loop.
3. The continue; statement in the body of a loop causes the current loop iteration to terminate and execution to return to the "top" of the loop and carry on with the next iteration.

JavaScript function syntax looks like this:

function name([par_1, par_2, ..., par_n]) //parameters are optional
{
    statement(s)
    [return value; | return expression;] //return statement optional
}

Notes:

• Parameters are passed by value.
• Every function has a local array called arguments containing its arguments.
• The following are local if inside a function, global if outside all functions:

  var someVariable; //Declaration without initialization (value is undefined)
  var someVariable = someValue; //Declaration with initialization
  

• The following declaration is implicit (has no var keyword) and is global, even if inside a function.

  someVar = someVal;
  

• A local variable will "hide" and "take precedence" over a global variable with the same name.
• A function may be called with too many or two few parameters. If too many, the extra are ignored. If too few, the missing ones have a value of undefined.

Some built-in JavaScript objects:

All objects in JavaScript are specializations of a root object called Object. A variable of an object data type in JavaScript is analogous to a reference in Java or a pointer in C++. The syntax for access is also similar, as in myObject.property or myObject.method().

• Number
• Math
• String
• Array
• Date
• RegExp

See the relevant examples on thesample files page for much more detail on each of these objects.

Some built-in globals, all of which belong to the window object (as do all programmer-defined variables/objects and functions):

undefined
Infinity
NaN

isNaN()
Number()
String()

parseFloat()
parseInt()

alert(message)
confirm(message)
prompt(message[,defaultResponse])

setInterval(codeToExecute,numberOfMilliseconds)
clearInterval(referenceReturnedFrom_setInterval)
setTimeout(codeToExecute,numberOfMilliseconds)
clearTimeout(referenceReturnedFrom_setTimeout)

Additional Notes

1. JavaScript is dynamically typed (not strongly/statically typed).
2. All JavaScript numbers are stored internally as 64-bit floating-point values.
3. Identifier names start with letter and may contain letters, digits, _ or the (not-recommended) $.

Best Practices

1. Place all JavaScript code in one (or more if necessary) external files, if possible.
2. Capitalize identifiers consistently. Actually, since JavaScript is case-sensitive, if you don't that's a "gotcha".
3. Always use var when declaring variables, and put all variables declared in a function at the beginning of the function.
4. The "define before using" dictum of many programming languages is not strictly necessary, but is still a good practice.
5. JavaScript is supposed to interpret the end of a line as the end of a statement, but using a semicolon is better practice.
6. You can break a string across two lines by using a \ just before the return character, though it should be regarded as a "best practice" not to do so, and use the + operator to concatenate the necessary strings instead.

Potential Gotchas

1. Strings are immutable and may be delimited by single or double quotes.
2. If a function is called with too many parameters, the extra ones are ignored;
   if called with too few, the missing ones have a value of undefined.
3. A variable declared without the keyword var is global, even if declared inside a function.
4. Don't do this: if (date1 == date2) { ... }
   Do this instead: if (date1.getTime() == date2.getTime()) { ... }
5. There is a global method eval() that takes a string as input and attempts to evaluate it as JavaScript code. Doing this should be avoided as it represents a security problem.