JavaScript Survival Guide

Last Modified: 03/29/07 - (under construction)

General

Item Description
Organizations Organizations
  • http://www.w3.org/ - W3C (World Wide Web Consortium)
    Quote from site: "The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential."
  • See my resources at my JavaScript home page.
<script> Tag:
JavaScript vs JScript vs VBScript		 JavaScript vs JScript
  • JavaScript - created by Netscape
  • JScript - created by Microsoft.
  • VBScript - created by Microsoft
  • ECMAScript - the standard for all JavaScript-derived languages.
  • IE Browser - Microsoft implements the core ECMAScript (JavaScript/JScript) language as a .dll file (Jscript.dll) that can be changed without a browser version change.
  • Script Tags - example of script tag using the languages: javascript, jscript, vbscript.

Example of a simple JavaScript function. 
Note: The html comment (<!-- & -->)is an old standard used when older browsers, before IE4, didn't understand the <script> tag.

<head>
<script language=javascript>
<!--
function fJavaScriptAlert() {
  alert("JavaScript alert");
}
//-->
</script>
</head>

Note: If you place JavaScript tags within the <body> tag it will be run as the page loads.

 
Browser Environment Info Browser Environment Info
  • Browser's Environment - list of the information JavaScript can determine about a browser's environment.
Variables: Visibility Visibility
  • Global - variables declared (see: var) outside of a function, normally at the top of the <script> tag, are visible inside of all the functions including any .js files that are included.  If you do not declare a variable before it is used, then the variable becomes a global variable.
  • Local - variables declared inside of a function are only visible in that function.
  • function parameters - variables are passed by value (not by reference) unless they are objects.  Changes made to these variables are not visible to the calling programs.
  • Variable Visibility - example of Global vs Local variables ("passed by value") and objects ("passed by reference").
Variables: Naming Conventions Variable Naming Conventions

This is my suggestion.  I follow this same type of "Variable Naming Convention" for other languages.

  • Variable Naming Convention:
    <visibility (lowercase)> - use "g" if a global variable else use nothing.
    <type of variable in (lower case)>
    <description of variable (Upper/Lower case)>
    ex:  intNumOfUsers - local integer which holds the Number of Users.
    ex: gintNumOfUsers - global integer which holds the Number of Users.
  • Abbreviation for Types of Variables: (my Suggestion)
    int - integer numbers - ex: intCountOfUsers (Note: you could just use "num".)
    num - all other numbers - ex: numAccountBalance
    str - Strings - ex: strFirstName
    arr - Arrays - ex: arrListOfUsers
    obj - Custom Objects - ex:  objUser
    date - Dates - ex: dateToday
    lbl - Labels

 
functions functions
  • Naming Convention - this is my suggestion
    f<description (upper/lower)>
    ex: 
    function fCountTheUsers() { 
      intReturn
      <statements ...>
      return intReturn;
    }
     
  • Placement of JavaScript code
    • <head> tag - place all JavaScript code inside of the <head> tag unless you are writing to the document object.
    • <body> tag - if you are writing to the document object you will need to place at least one line of code inside of the <body> tag.  I still suggest placing the bulk of the code in the <head> tag and then 1 line of code in the <body> tag.
  • (Add Examples - including custom object functions)
   
   
   

JavaScript Core Statements

Function Description
Script Tags  
Comments Comments
  • Singe-line comment example.
    // Example of a single line comment
  • Multi-line comment example.
    /*
    Multi-line comment example.
    .... (more lines)
    */
var var <variable name>
Returns: Nothing
Declares a variable.

Examples:

var blnDebug = true, strDebugMsg = "", <more statements ...>;
var strHml = "";

Var info - see the section called: "Variables: Visibility"
 
Control Structure:
if()		 Control Structure: if()
  • if() statement - the "else" and "else if" is optional
    if ( <condition> ) {
      <statement(s) ...>
    } else if ( <condition> ) {
      <statement(s) ...>
    } else {
      <statement(s) ...>
    }

    Ex:
    var blnDebug = true;
    if ( blnDebug ) {
      alert("Hello-true");
    }
  • if() - 1 line - Warning: You can do a 1 line if() with out the brackets but I warn against it's use.
    Ex:
    var intMsg = 0;

    if ( false )
    intMsg += 100;
    intMsg += 100

    alert("intMsg = " + intMsg);

    Results:
    intMsg = 100
    (Note: Not 200 because the first statement is not executed.
Control Structure:
Looping 		Control Structure: Looping

Control Structure: Examples

Control Structure: Looping - for

  • for loop

    Example:
    var strMsg = "";
    var arrUserList = new Array("Jane","Tarzan","Superman","Batman");

    for ( var i = 0; i < arrUserList.length ; i++ ) {
      strMsg += "" + i + " = " + arrUserList[i] + "\n";
    }
     
  • for/in loop - loop through all the properties of an object.

    Example:
    var strMsg = "";
    var strObjectName = 'navigator';
    var objObject = navigator;

    for ( var i in objObject ) {
      strMsg += strObjectName + "." + i + " = " + objObject[i] + "\n";
    }
     
  • do/while loop

    Example:
    var strMsg = "";
    var i = 1;
    do {
      strMsg += "" + i + ","
      i++;
    } while ( i <= 10 )
     
  • while loop

    Example:
    var strMsg = "";
    var i = 1;
    while ( i <= 10 ) {
      strMsg += "" + i + ","
      i++;
    }
     
  • switch/case

    Example:
    var strStatus = "";
    var strStatusCode = "C";

    switch ( strStatusCode ) {
      case "C":
        strStatus = "Completed";
        break;
      case "I":
        strStatus = "Incompleted";
        break;
      case "E":
        strStatus = "Enrolled";
        break;
      case "U":
        strStatus = "Unenrolled";
        break;
      default:
        strStatus = "Invalid status";
    }

Control Structure: Looping - miscellaneous statements

  • label - a way to assign a label identifier to any block of executing statements.  The break and continue statements can exit to a label.
    (Note:  I suggest programming without using the label.)
    Ex: lblUserLoop:
  • break - stops execution of the current loop and resumes at next statement after the end of the current loop.
  • break <label name> - stops execution and resumes at the next statement after the specified label.
  • continue - stops execution and resumes at the top of the current loop for the next pass.
  • continue <label name> - stops execution and resumes at the top of the loop following the specified label. current loop for the next pass
  • Examples: (labels, continue, break)
    var strMsg = "";
    //Multi-dimensional array.
    var arrUserListMulti = new Array( new Array("GA","Georgia"),
                                      new Array("MS","Mississippi"),
                                      new Array("LA","Louisiana"),
                                      new Array("FL","Florida")
                                     );

    lblRowLoop:
    for ( var intRow = 0; intRow < arrUserListMulti.length ; intRow++ ) {
      //Loop through the rows.
      lblColumnLoop:
      for ( var intColumn = 0; intColumn < arrUserListMulti[intRow].length ; intColumn++ ) {
        //Loop through the columns.

        if ( arrUserListMulti[intRow][intColumn] == "MS" ) {
          //Skip MS
          continue lblRowLoop
        }

        strMsg += arrUserListMulti[intRow][intColumn];

        if ( arrUserListMulti[intRow][intColumn] == "Louisiana" ) {
          //Quit looping
          break lblRowLoop
        }
      } //for - columns
    } //for - rows
     
with  
function & return  
new  
this  
   

JavaScript Objects - List Properties

Item Information
Create an Object & List it's properties Example: JavaScript Objects - Create & List Properties

function fObjectCreateAndList() {

  objExample = { strProp1 : "String Variable 1",
                 strProp2 : "String Variable 2",
                 intProp1 : 1,
                 intProp2 : 2
               };

  var strMsg = "List of Properties:";
  for ( strPropName in objExample ) {
    strMsg += "Property: " + strPropName + "=" + objExample[strPropName] + "\n"
  }
  strMsg += "Ex Access by Property Name:";
  strMsg += "strProp1 = " + objExample["strProp1"];

  frmObjectInfo.txtaObjInfo.value = strMsg

}

Value of strMsg is:

List of Properties:Property: strProp1=String Variable 1
Property: strProp2=String Variable 2
Property: intProp1=1
Property: intProp2=2
Ex Access by Property Name:strProp1 = String Variable 1
Global Objects - you can't loop through the values. With Global Object, to my knowledge you can't loop through the properties.

Ex:  Math, Date

Example of not being able to loop through the properties:

var strMsg = "";
var objMyDate = new Date();

for ( strPropName in objMyDate ) {
strMsg += "Property: " + strPropName // + "=" + objExample[strPropName] + "\n"
}
alert(strMsg) //Shows nothing.
   
   

Java Script Objects - General & Global Functions

Item Description
setTimeout()  
typeof Determine the type of Variable or if it doesn't exists ("undefined").

Note:  This is vary handy when you needed it !!!

Examples

  • if ( (typeof strVar) == "undefined" )
  • if ( typeof(strVar) == "undefined" ) - this could be just server side JavaScript.  I need to test.

 
void("") or void(0) Not sure what this does, but here is how I use it.

Example #1: void('') - (note: 2 single quotes - not 1 double quote).
This example allows me to run a JavaScript function and not change the web screen.
<script language="JavaScript">
function fMyFunction(strMsg) {
  alert(strMsg)
}
</script>
<a href="javascript:fMyFunction("Hello World");void('')">Development Testing</a>
eval() Evaluates an expression.  This is a way to dynamically create JavaScript and then run it.  You can dynamically create a name of an object in a text string and the eval() the string to return the value.

 
escape() escape(<string> [,1])
Returns: String (encoded)
Returns an "escaped string" (URL encoded). (Note: spaces are converted to %20 etc....).  Used to encode a string for the URL line.

Example:
var strEncoded = escape("Hello World")
Returns: "Hello%20World"

Optional parm value of 1 = Encode the "+" sign also.

see: unescape()
isNaN() Evaluates and argument to determine if it's "Not a Number"

 
Number()  
parseFloat() Converts a string to a float.
Warning: parseInt('09') = 0
 
parseInt() Converts a string to an integer.

var intTest = parseInt( <string> );
 
String()  
unescape() unescape(<encoded string>)
Returns: String
Returns a string value of an "escaped string".  (Note: %20 converted to space, etc....)

Example:
var strUnEncoded = unescape("Hello%20World")
Returns: "Hello World"

see: escape()
unwatch() Used with some browsers for debugging code.
watch() Used with some browsers for debugging code.

String Object

Item Description
General Info Creating a String:
strExample = "Hello World"
strExample = 'Hello World'
strExample = new String("Hello World")

Joining Strings:
strExample = "Hello" + " " + "World"  (result: "Hello World")

strExample = "Hello"
strExample += " "
strExample += "World" (result: "Hello World")

Comparing strings: if ( strExample == "Hello World" ) 
 
Relevant functions:
split()
parseInt()		 split() - see "Array Functions" section.
parseInt() - see General & Global functions.
<string>.indexOf() intReturn = <string object>.indexOf(<string to find>,intStartingPosition)

0 = 1st Char
-1 = could not find.

Examples:
String() String( <object or value> )
Returns: String
Returns a string representation of the parm.  Same as <object>.toString()

Example:
String( <array object> ) - returns a comma-delimited string of the contents.
 
<string>.replace()

Replace a char with a char.

Ex #1: Replace one char with another one.

strSource = "Hello";
strReplaced = strSource.replace("l", "z");
strMsg += "strSource = " + strSource + "\n" + "strReplaced = " + strReplaced + "\n";
Results:
strSource = Hello
strReplaced = Hezlo

Ex #2: Replace all chars with another one.

strSource = "Hello";
strReplaced = strSource.replace(/l/g, "z");
strMsg += "strSource = " + strSource + "\n" + "strReplaced = " + strReplaced + "\n";
Results:
strSource = Hello
strReplaced = Hezzo

Example:  replace()
 
<string>.substring
 		 Returns a substring of a string based on a Start & Stop index value.
<string>.substring(StartIndex, StopIndex)
<string>.substr
 		 Returns a substring of a string based on a Start index value and then a length of characters.
<string>.substr(start [, length ])
<string>.toLowerCase()
 		 Returns the lower case value of the string.


ex: "Hello World".toLowerCase()
results: "hello world"

<string>.toUpperCase() Returns the upper case value of the string.

ex: "Hello World".toUpperCase()
results: "HELLO WORLD"

Math Object

Item Description
Relevant functions described in other sections Global Functions (see the other section)
  • isNaN() - Evaluates and argument to determine if it's "Not a Number"
  • Number()
  • parseFloat() - Converts a string to a float.
  • parseInt() - Converts a string to an integer.
    Warning:  parseInt('09') = 0
 
Examples
abs Math.abs( var ) - Absolute value.  (Returns the positive number.)
Ex:
Math.abs( 1 ) = 1
Math.abs( -1 ) = 1
Math.abs( -100.123 ) = 100.123
acos Math.acos( var ) - Arc cosine (in radians).
asin Math.asin( var ) - Arc sine (in radians).
atan Math.atan( var ) - Arc tangent (in radians).
atan2 Math.atan2( var1, var2) - Angle of polar coordinates x and y
ceil Math.ceil( var ) - round up to the next integer.
Ex:
Math.ceil(1.1) = 2
Math.ceil(1.5) = 2
Math.ceil(1.9) = 2
cos Math.cos( var ) - Cosine
exp Math.exp( var ) - Power of
floor Math.floor( var ) - round down to the previous integer.
Ex:
Math.floor(1.1) = 1
Math.floor(1.5) = 1
Math.floor(1.9) = 1
log Math.log( var ) - Natural logarithm.
max Math.max( var1, var2) - Returns the greater value of the arguments.
Ex:
Math.max( 1.1, 1.5) = 1.5
min Math.min( var1, var2) - Returns the lesser value of the arguments.
Ex:
Math.min( 1.1, 1.5) = 1.1
pow Math.pow(var1, var2) - Returns var1 to the power of var2.
Ex:
Math.pow(10,2) = 100
random Math.random() - Returns a Random number between 0 and 1.
Ex:
Math.random() = 0.18925420584172098
Math.random() = 0.5879989492922739
Math.random() = 0.03670801222553011

Example of generating a random number between 1 and 6 (rolling dice)
Math.round(Math.random() * 6) = 2
Math.round(Math.random() * 6) = 1
Math.round(Math.random() * 6) = 1
Math.round(Math.random() * 6) = 4
Math.round(Math.random() * 6) = 3
Math.round(Math.random() * 6) = 0

Example of generating a random number between 100 and 120 (rolling dice)
Math.round(Math.random() * 20) + 100 = 106
Math.round(Math.random() * 20) + 100 = 106
Math.round(Math.random() * 20) + 100 = 108
Math.round(Math.random() * 20) + 100 = 118
Math.round(Math.random() * 20) + 100 = 113
 
round Math.round( var ) - Returns the rounded integer.  ( >= .5 will be the next integer).
Ex:
Math.round(1.1) = 1
Math.round(1.5) = 2
Math.round(1.9) = 2
sin Math.sin( var ) - Sin (in radians)
sqrt Math.sqrt( var ) - Square root
Ex:
Math.sqrt(9) = 3
tan Math.tan( var ) - Tangent (in radians)

Date Object

Item Description
General Information General Information
  • The Date object stores dates in GMT time.
  • The Date object displays the date in the time zone established by your PC's control panel.
  • Warning: Some of the numeric values start with 0 and not 1.
Relevant functions described in other sections  
Examples
Create a Date object var dateToday = new Date();
var dateHired = new Date("11/01/2007");

 
Year Year - <YYYY>
  • getYear
  • setYear
  • getYear
  • setYear
Month of year Month - 0-11 (0=Jan thru 11=Dec)
  • getMonth()
  • setMonth
Date in month Date - 1-31 Date within the month.
  • getDate()
  • setDate() -
Day of week
 		 Day - 0-6 day of week (Sunday=0)
  • getDay()
  • setDay(<intDay>)
Hour of day (24hr)
 		 Hours - 0-23 Hour of the day in 24 hour format.
  • getHours
  • setHours
Minute of hour Minutes - 0-59 Minute
  • getMinutes
  • setMinutes
Second of minute Seconds - 0-59 Second
  • getSeconds
  • setSeconds
Time in Milliseconds Time - Milliseconds since 1/1/1970 00:00:00 GMT.
  • getTime
  • setTime
   
getTimezoneOffset()  
toGMTString()  
toLocaleString()  
toString ()  
Date.UTC( dateValue )  
Date.parse(strDate)  

Array Object

Item Description
Relevant functions described in other sections  
Array Array
  • Creating an array
    • var myArray = new Array()
    • var myArray = new Array(intSize) - creates an array with a specific size.
    • var myArray = new Array(element0, element1, element2, element3, ... elementX)
  • Elements in an array - you can place any type of element in an array.
  • <array object>.toString() - returns a comma-delimited string of the contents.

var arrTemp = ["Item 1", "Item 2", "Item 3"];
var arrTemp = new Array("Item 1", "Item 2", "Item 3");

var arrDateDaysFull = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var arrDateDaysAbrev = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var arrDateMonthsFull = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var arrDateMonthsAbrev = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var dateToday = new Date();
var strToday = arrDateDaysFull[dateToday.getDay()] + " " + arrDateMonthsFull[dateToday.getMonth()] + " " + dateToday.getDate() + ", " + dateToday.getYear();

 
Array Properties Array Propterties
  • length
  • prototype
concat()  
join()  
push()  
pop()  
reverse()  
shift()  
slice()  
sort()  
unshift()  
split() Converts a string to an array.
<Array> = String.split(<string for the separator value>)
Returns: Array

Ex 1: Return an array of the cookie values: (the separator value is "; ")
var arrCookieInfo = document.cookie.split("; ");
  Need to check on:
arrMy.contains(<string value>)

Misc Objects

Number Object The Number Object is normally not needed because the native number in JavaScript can accomplish almost all of your needs.

var objMyNumber = new Number( 10 );

Number.MAX_VALUE
Number.MIN_VALUE
Number.NaN
Number.NEGATIVE_INFINITY - any number smaller than the smallest number allowed.
Number.POSITIVE_INFINITY - any number larger than the largest number allowed.

Number.toString()

Also has a prototype property.
Boolean Object The Boolen Object is normally not needed because the native number in JavaScript can accomplish almost all of your needs.

var objMyBoolean = new boolean(true);

Boolean.toString()

Also has a prototype property.
   
   
   

JavaScript Core Objects

Function Description
<object>.toString() <object>.toString()
Returns a string value representing the value of the object.

ex: <array object>.toString() - returns a comma-delimited string of the contents.
Window Window Object
   

Reserved Words

abstract
boolean
break
byte
case
catch
char
class
const
continue
default
delete
do
double		 else
extends
false
final
finally
float
for
function
goto
if
implements
import
in
instanceof 		int
interface
long
native
new
null
package
private
protected
public
return
short
static
super
 		 switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
while
with
 

JavaScript Objects
 (Under Construction)

Item Description
Under Construction

 		 action
alert
alinkColor
anchor method
Anchor object
anchors
appCodeName
Applet
applets
appName
appVersion
Area
arguments array
arguments property
Array
back
bgColor
big
blink
blur
bold
Boolean
border
Button
caller
charAt
Checkbox
checked
clearTimeout
click
close (document object)
close (window object)
closed
complete
confirm
constructor
cookie
current
Date
defaultChecked
defaultSelected
defaultStatus
defaultValue
description
document
domain
E
elements array
elements property
embeds array
enabledPlugin
encoding
escape
eval
fgColor
filename
FileUpload
fixed
focus
fontcolor
fontsize
Form object
form property
forms
forward
Frame
frames
Function
go
hash
height
Hidden
history array
history object
host
hostname
href
hspace
Image
images
index
italics
javaEnabled
lastIndexOf
lastModified
length
link method
Link object
linkColor
links
LN2
LN10
location
LOG2E
LOG10E
lowsrc
Math
MAX_VALUE
method
MimeType
mimeTypes
MIN_VALUE
name
NaN
navigator
NEGATIVE_INFINITY
next
Number
onAbort
onBlur
onChange
onClick
onError
onFocus
onLoad
onMouseOut
onMouseOver
onReset
onSelect
onSubmit
onUnload
open (document object)
open (window object)
opener
Option
options
parent
parse
parseFloat
Password
pathname
PI
Plugin
plugins
port
POSITIVE_INFINITY
previous
prompt
protocol
prototype
Radio
referrer
refresh
reload
replace
reset method
Reset object
scroll
search
select method
Select object
selected
selectedIndex
self
small

split
SQRT1_2
SQRT2
src
status
strike
String
sub
submit method
Submit object
suffixes
sup
taint
taintEnabled
target
Text object
text property
Textarea
title
top
 

type
unescape
untaint
URL
userAgent
value
valueOf
vlinkColor
vspace
width
window object
window property
write
writeln