JavaScript is a rapidly evolving family of similar languages with
a
complex history. It was designed
to make HTML pages more dynamic by (1) allowing the page to be
computed rather
retrieved from a file, (2) allowing executable subprograms to be
associated
with events occurring in a browser, and (3) allowing programs to
be executed
on a server that generates pages.
See JavaScript_introduction for a good and easy to read introduction.
JavaScript is an interpreted object_based, statically_scoped,
and
dynamically_typed language.
It has no local constants. All variables and functions(subprograms)
are properties (attributes)
of some object. Some of these are read only.
It has automatic garbage collection.
(object_based):
JavaScript uses the prototype model of objects (a class of
objects share a common prototype object) rather than a
statically declared
class hierarchy. As of 1999 there is no portable way to
set up such a complex hierarchy. Each object inherits
from its prototype object and the prototype object inherits
from a global Object object.
A property that is set up in the prototype
becomes a default property of the object.
Functions are objects
and yet also play part rather like classes in other languages:
- A function name can be used to construct a "new" object.
- A function attached to an object can use "this" to refer to
their object.
- Values and functions can
be attached to function names as well as to objects.
- The prototype attribute of a function can contain values and
functions that
become part of the scope the objects constructed by the function.
- Locally defined properties override or shadow the prototype
properties.
(statically_scoped):
The scope of an identifier is determined before executing the
code.
JavaScript has two kinds of scope: global and local. Global
variables are shared by the whole program. Local variables
have
a complete function as a scope. In later JavaScripts functions
can be declared
inside functions creating nested scopes.
(dynamically_typed):
The type assigned to a variable is determined by its current
value. There is an operator typeof that can determine the type
of a value.
There are half-a-dozen different types -- see Types for
a list. All objects are of type
"object". All functions are of type "function".
There is no concept of type being based on a class because the
language is object_based and has no classes in the Java/C++/Smalltalk sense.
- history::=LiveScript; JavaScript1.0; JavaScript1.1;
JavaScript1.2; Javascript1.3; ...
- JScript::=JScript1.0; JScript1.2.
- |-Jscript1.0 = MS(JavaScript1.0), -- Microsoft's implementation
of JavaScript.
- |-Jscript1.2 = MS(JavaScript1.2).
- ECMAScript::=A sequence of developing standard definition,
standard ECMA-262 =
standard ISO-10262.
- |-ECMAScript roughly_equal_to JavaScript1.1.
Netscape 4 was released when Javascript1.2 and ECMAScript drifted
badly apart. As
a result some features have a special effect only when Netscape 4
is used and
JavaScript1.2 is specified as the language in the SCRIPT tag.
In my opinion (based on 30 years of programming and
about
two dozen different languages) the existence of multiple
versions and
incompatible implementations means it is immature and risky to use.
Because it is
dynamically_typed it
is easy to experiment with simple programs. It
is also inexpensive but slow to run. The absence of a
static class hierarchy, information hiding, and other advanced
features
will make large scale projects difficult. These features combine to make it
unready for engineering reliable software. I expect it to become
the Street BASIC of the future.
2010 -- I can now add to the above comment that JavaScript strings
and user input make the language highly insecure.
These notes will focus on the
one case where it is difficult to avoid JavaScript. Only the
simplest and most stable parts will be covered.
These notes are on the parts of JavaScript that can be used to
generate and animate pages in a
browser. This is sometimes called "client-side" JavaScript.
The following instructs a browser to find the current date and
time
and write it into the page as it is loaded:-
<HTML> <HEAD> <TITLE>Dynamic Schedule</TITLE>
</HEAD>
<H1>Schedule</H1>
<SCRIPT language=JavaScript>
<!---
var now=new Date();
document.write("The Time is "+now);
// --->
</SCRIPT>
...
<BODY>
...
The user gets a page from the browser that has a line starting
"The Time is "
and finishing with the date and time.
This section gives some ways for embedding JavaScript in the
HyperText
Mark Language(HTML).
- script_inside_HTML::= script_tag # statement "</SCRIPT>".
Note.
- The string </SCRIPT> must be avoided inside the statements
above!
- There can be many SCRIPTs in one page and they are all part of
the same program.
- script_tag::="<SCRIPT " O(language_attribute)
O(source_attribute) ... ">"
- language_attribute::="LANGUAGE=" double_quote "JavaScript"
Oversion double_quote.
- version::= "1.0" | "1.1" | "1.2" .
- source_attribute::= "SRC" "=" double_quote file_path_name
double_quote, as long as the
server can handle MIME-type "application/x-JavaScript" for files
with
suffix or extension ".js".
In stead of specifying a protocol (like "ftp" or "http") an Universal Resource
Locator or URL can be the string "javascript".
So in an <A HREF="..."> tag or a FORM tag can
refer to a javascript statement to be executed rather to a location
on the WWW:
<A HREF="javascript: ... ">...</A>
<FORM ACTION="javascript: ... ">.... </FORM>
Note.
- These features are evolving.
- They may be different for MS browsers.
Example
<A HREF="...." onClick="....">
- event_handling_attribute::= event_name "=" double_quote #statement double_quote.
- event_name::= "on" event_type.
- event_type::=event_type0 | event_type1 | event_type2, these are
for version 1.0, 1.1, and 1.2 respectively.
- event_type0::= "Blur" | "Change" | "Click" | "Focus" | "Load" | "MouseOver" | "Unload".
- event_type1::= "Abort" | "Error" | "MouseOut" | "Reset" | "Submit".
- event_type2::= "KeyDown" | "KeyPress" | "KeyUp" | "MouseDown" | "MouseUp" | "Resize" |
variant_event_type.
variant event types depend on the browser and/or the platform
- variant_event_type::="DblClick" |...
&( statements );
- style::= style_tag # statement "</STYLE".
- style_tag::= "<STYLE" "TYPE=" double_quote "text/JavaScript" double_quote ">".
. . . . . . . . . ( end of section Later HTML Features) <<Contents | End>>
. . . . . . . . . ( end of section Essential HTML) <<Contents | End>>
JavaScript inherits and extends a lot of the syntax of the C
Programming Language.
- identifier::= (("$" | "_" | letter )#(letter | "_"| digit ) ) ~ reserved.
- reserved::= keywords | ECMA_extensions | Java_keywords.
- keywords::= "break" | "case"|"do" | "continue" | "default" | "delete" |
"else" | "export" | "for" | "function" | "if" | "import" | "in" | "new" |
- "return" | "switch" | "this" | "typeof" | "var" | "void" | "while" | "with" .
- break::lexeme, terminates a case or (perhaps) a loop.
- case::lexeme, used to state a case in a switch statement.
- do::lexeme, stars a do-while loop.
- continue::lexeme, goes to begining of next repetiton of loop.
- default::lexeme.
- delete::lexeme.
- else::lexeme, terminates the true branch of an if-else and starts the fale branch.
- export::lexeme.
- for::lexeme, states a C-style for-loop.
- function::lexeme, starts a function defintion.
- if::lexeme, starts an if-else selection statement.
- import::lexeme.
- in::lexeme.
- new::lexeme, indicates the creation and construction of an object using a function.
- return::lexeme, exit from a function.
- switch::lexeme, starts a switch selection statement as in C.
- this::lexeme, the object being constructed or to which a function is applied.
- typeof::lexeme, determines the current typ of a variable.
- var::lexeme, declares a new variable.
- void::lexeme, indicates a function that reurns no value.
- while::lexeme, starts a while loop.
- with::lexeme.
- comment::= CPP.comment, /*...*/ and //...end of line.
- literal::=C.literal | single_quoted_string | named_literal |
function_literal |object_initializer | array_initializer |
this.
- single_quoted_string::= "'" #non("'") "'". -- needed to
allow "..." for HTML!
- Unicode_escape_sequence::= "\\u" hex hex hex.
- hex::= "0".."9" | "A".."F".
- named_literal::= "Infinity" | "NaN" | "null" | ... .
- object_initializer::= "{" List( identifier ":" literal )
"}".
- array_initializer::="[" List( literal ) "]". -- may be
different types.
- function_literal::="function" "(" List(identifier) ")" "{"
body "}".
- this::="this", -- current object.
A sublanguage of JavaScript for describing literal objects forms the
Java Object Notation
[ JSON.html ]
that is (2012) catching on for sharing data/objects between components.
- expression::=C.expression(TBA) | typeof_expression | constructor |... .
JavaScript has all the operators of C plus a new shift operator
">>>". The
"%" remainder operator can return negative remainders. The "+"
operator is
overloaded to concatenate strings as in BASIC.
- typeof_expression::= "typeof" unary_expression, see typeof.
- constructor::= "new" constructor_function "(" O List(expression)")".
new Date()
The "new" creates a new "this" object. The constructor function initializes properties of
the this object. It must not return an
object. It initializes the properties of the new object. It
also links the new object to a shared prototype object.
If a function is used as a constructor (with "new" ) then it has extra
properties: prototype, constructor, ... The functions prototype
object can be given properties (including methods and functions)
that are shared by all objects it constructs.
There are a number of ready made constructor functions:
- predefined_constructor_functions::=following
- Date() -- Date
- Object() -- Object
- Function( argument_strings, statement_string ) -- Function
- Array(...) -- JavaScript1.1 and above, Array
- RegExp(...) -- JavaScript1.2 and above, RegExp
(+)::infix(string).
"This is the time" + now
- length::string->number.
For s:string, s.atChar(i) = s[i], -- ASCII, starting with atChar(0),
- s.atCharCode(i)=s[i], -- Unicode.
- s.substring(i,j)::=s(i..j), later substr is also allowed.
- s.indexOf(c)::= min{i | s(i)=c }.
- s.toUpperCase()::string.
- s.toLowerCase()::string.
Notice: There is no operation to change parts of a string. Strings are
immutable -- trying to change a character in a string
creates a new string.
JavaScript has many HTML specific operations on strings:
- anchor(name)::method, return string as text in <A HREF="name">this</A>.
- link(name)::method, is similar to anchor.
- big()::method, return string in between <BIG> ... </BIG>.
blink, bold, fixed, italics, small, strike, sub, sup are similar.
- fontcolor(color)::method,
- fontsize(size)::method.
These were borrowed from Perl 4 and placed in JavaScript1.2.
Perl
borrowed them from various programs available since the 1970's in
UNIX, which in turn got them from a Mathematician called Kleene
in the 1940's[RE]!
These are used to make editing (find and replace) operations on
strings easy.
A Regular Expression object is constructed like this
new RegExp( regular_expression )
where
- regular_expression::="/" pattern "/".
- pattern::= O(at_start) #( (wildcard | special | #
normal_char ) O("*") ) O(at_end).
- at_start::="^".
- at_end::="$".
- wildcard::= "." | "[" char "-" char "]".
- math_function::= "Math".name.
- function_declaration::="function" identifier "(" O List(identifier) ")" "{" body "}".
- body::=# statement.
- function_call::= function_indicator "(" OList(expression) ")"
.
- function_indicator::= function_literal | function_name |
object #("." property ) "." method.
object . property
object . function ( arguments )
The rules for statements are quite close to C but for the
following:
- statement::= C.statement with following,
The scope of a variable is determined by the function (if any) in
which it
occurs. Even if a variable is used before it is declared it is
still a local
variable. Even if it is declared
in a for_statement or a compound statement its scope is still the
whole
function.
. . . . . . . . . ( end of section Essential Syntax) <<Contents | End>>
There are half-a-dozen data types in JavaScript. Given an
expression then the
typeof function (in Netscape 3 and MS Explorer 3 and later)
returns a string that is the name of one of these type:
- typeof::expression -> Types.
- Types::= { "object", "undefined", "number", "string", "boolean", "function" }.
Arrays are of type "object".
Values are either strings, primitive, or reference:
- primitive::=number | null | undefined | boolean.
- reference::=object | array | function.
Each numbers, strings and booleans have an associated constructor
functions that place them as a property of an object:
new Number(42)
new String("Slarty Bardfast")
new Boolean( b*b > 4.0*a*c )
The equality operator "==" is intended to test for the equality
of the values of
two expressions. Inequality is the negation of this "!=". Nulls
and
undefined values are all equal. Normally
values of different types are coerced to fit each other using
mappings like:
- coercion::= number; string | true +> 1 | false +> 0 | object; toString.
Exception:
If the browser is Netscape 4 and the language of a script is specified
like this
<SCRIPT LANGUAGE="JavaScript1.2>
and then types are not coerced by "==".
The "==" operators test for equality of two values having corced them to the same type,
I guess.
Newer JavaScripts have "===" and "!==" tests to see if the values
of two
expressions are identical without coercion. It also treats null
and undefined
as non-identical.
This link
[ http://zero.milosz.ca/ ]
gives a table of values of "==" and "===" for different arguments.
Do not be surprised that
[1]==[1]
is false!
JavaScript has the usual C assignment operators. The precise
meaning (copy value
vs copy reference) depends on the type assigned. Primitive
values are copied
by value and references by reference. Strings form a special
case in that
they may assigned either way but there is no way to distinguish
which
occurred.
There is one non-C assignment operator: ">>>=" which shifts
bits to the least significant end of a value and introduces '0'
rather than the sign of the value
JavaScript has the "new" operator which constructs new objects
and
calls a function to initialize them. Later JavaScripts have an
explicit "delete" operator.
JavaScript introduces a new kind of operator that converts any
value into an undefined one. It is symbolized "void". It is
used
when you need for some expression to be executed but don't
want the value to be used or displayed. It can also be used in
later JavaScripts with the "===" identity operator to test for
a value of an expression being undefined.
In JavaScript arrays are indexed collections of data of any type
what so ever.
They can be indexed by a number or by a string:
array [ index ]
Objects have properties that can accessed in two ways:
object . property
object [ expression ]
The expression above must return a string which is the name of a
property.
So Objects are also associative arrays (as in awk).
It is possible, in a for loop, to make a variable visit every
property
in the object:
for( var p in object ) { .... object[p] ... }
In earlier JavaScripts all arrays were Objects. As new
properties were
added to objects they were stored in an indexed array numbered
[0], [1], ...
In later JavaScripts Arrays have been separated from Objects and
given a set of special functions and methods.
Each function call creates a new execution context (global
environment) that
includes an explicit local
activation record called the "call object". The different
execution objects are themselves
properties of a global object and can be referred to (TBA).
When a function f is called with an object o like this
- o.f(parameters)
then o is said to be the "call" object. It
replaces the symbolic this variable used in the function
declaration.
Functions can be used as-if they where data. For example an object
can have a new property defined that is set to a function. If,
for
example, an object o has function f assigned to property p:
o.p = f;
then
o.p(...)
calls f with this (the "call object") set to o. Functions can
also be
items in an array indexed by a number or a string.
- function_properties::={ this, "arguments", "prototype", ...}.
- arguments::array=an array of the values passed to a function by a call.
- prototype::Object, an object attached to a function that is shared by all
objects that are created by the function which contains the default
properties of the object.
- argument_properties::={ "caller", "callee", "length", "arity" }.
Adding new properties to a function has the effect of creating
what are
called static variables in C and C++. The prototype property
allows a
function to be used to create objects that share common methods
and
attributes.
Netscape 4 and above have two methods "apply()" and later ones
may add "call()".
The scope for variables in a Function constructor is always the
global scope.
To find the meaning of a variable(property) in a function
declaration or literal
first check the
local variables in the function, then the properties of the
function's
prototype object. Then such in the function that declared the
current function.
and so on.
Regular expressions however use dynamic scoping.
. . . . . . . . . ( end of section Essential Semantics) <<Contents | End>>
The following list some common methods and properties of various
predefined
types and objects in JavaScript.
- method::=a function that is used together with an object: x.f(...).
- property::=a value attached to an object: x.p.
- function::=`a "free" function that is not used with an object but with a constructor function:
Math.f(...)`.
- value::=a value associated with an function that constructs objects: Math.pi.
- event::=attribute that indicates a command to be executed when some event occurs.
- eval(s)::function=evaluate string s.
DANGER!
- isFinite(n)::function=true iff n is not infinite.
- isNaN(n)::function=true iff n is Not a Number.
- parseInt(s)::function,
- parseInt(s, radix)::function,
- parseFloat(s)::function,
By default all new object have these features:
- toString()::method=returns a string representation of an object.
- toString(base)::method=expresses number in decimal, octal, hex, etc..
- valueOf()::method=returns a primitive value equivalent to the object, -- if there is such a
value.
An input element in a form looking like a push button. It has a name
and value from HTML tags
and has the onClick event.
An input in a form looking like a check cox. It has a name and
value from HTML tag
and has the onClick event and boolean checked.
Buggy in Netscape 2.
Dates are held as numbers representing the number of milliseconds since
midnight GMT Jan 1st 1970.
It has several constructors: Date(), Date(string), Date(yy,mm,hh,mm,ss,ms), Date(ms).
Date objects have a large number of attributes accessed by "set" and "get"
methods:
- Date_method::= ("set" | "get" ) Date_attribute | "toGMTString" | "toString" | "toUTCString" | "valueOf".
- Date_attribute::= O("UTC") ("Date" | "Day" | "FullYear" | "Hours" | "Milliseconds" | "Minutes"|
"Month" | "Seconds" )| "Time" | "TimezoneOffset" .
- Date.parse(s)::function = convert s to Date.
- Date.UTC::function=numeric time to Date.
I say nothing about functions that use 2 digit years.
A form has a name, a number of input and other elements and an
action that is executed when a Submit button is selected.
- onReset::event, when a Reset button is selected is clicked.
- onSubmit::event, when submit button on form is clicked.
Part of a Form allowing input. Examples: buttons,
checkboxes,.... see input below.
- onClick::event.
- onChange::event.
An HREF Anchor in HTML.
- onClick::event.
- onMouseOver::event.
- onMouseOut::event.
See location.
A collection of useful values and functions always shown as
"Math."name.
These are actually variable.... do not change them by accident.
- E::value,
- LN10::value,
- LN2::value,
- LOG10E::value,
- LOG2E::value,
- PI::value,
- SQRT1_2::value,
- SQRT2::value.
- min(x,y)::function,
- max(x,y)::function,
- abs(n)::function,
- ceil(x)::function,
- floor(x)::function,
- round(x)::function,
- random()::function=pseudo-random number in range 0.0 to 1.0.
- sqrt(x)::function,
- pow(x,n)::function,
- exp(x)::function,
- sqrt(x)::function,
- log(x)::function,
- sin(x)::function,
- cos(x)::function,
- tan(x)::function,
- acos(x)::function,
- asin(x)::function,
- atan(x)::function,
- atan2(x,y)::function,
. . . . . . . . . ( end of section Math) <<Contents | End>>
Special properties: MAX_VALUE, MIN_VALUE, NaN, NEGATIVE_INFINITY,
POSITIVE_INFINITY,
Conversion: toString(radix).
Arrays are one-dimensional, associative, sparse, heterogeneous,
and dynamic.
The first index value is always zero. If index i has an item
then so do all items with indexes 0 thru to i inclusive -- tho
some of these may be empty. A new item with a non-integer index
is added after the last defined item -- and so, in effect, has
two indexes:
a number and its given index.
- length::property=range of indexes with items.
JavaScript 1.1 Arrays:
Array(various):constructor
- join()::method=returns a string containing all elements concatenated together.
- reverse()::method=takes items and puts them into the opposite order.
- sort(c)::method=in place reordering so that for all adjacent items a,b c(a,b)<=0.
JavaScript 1.2 adds: slice, splice, push, pop, unshift, shift,
... but
some of these are not implemented in JScript1.2
First the current document is available as a property of the
global object document. Each part is a property of this
object and is even accessible by name. The name comes from
the NAME attribute given in the HTML page. There are many other
attributes as well. As a quick example suppose we have a FORM
with NAME=myform which contains an INPUT with NAME=myinput then
we will have these objects available to us in JavaScript:
document
document.myform
document.myform.myinput
document.myform.myinput.value
To document the property of being named in HTML I use the
symbol named:
- named::= Net{ name:string, taken from the HTML paged }.
In a browser the global object is the current window. It may
contain other rectangular
sub areas that are also treated as windows by JavaScript.
- window::=named with following,
- alert(s)::method=display string s and wait for user to OK it.
- confirm(s)::method=`display string s and wait for user to OK or Cancel it. Returns true if
OK else false`.
- prompt(s)::=method=display prompt and return users text response.
- status::variable=String appearing inside frame at bottom of window.
- navigator::property=Object describing the program executing the JavaScript.
- frames::= #window, each frame is a window, see above.
- self::=this window.
- parent::=the window/frame in which this was created.
- top::=Browser window.
- history::=allows back() and forward() operations.
- location::= following
Net
- document::=following,
The elements in a form are an array of many different types of
element:
- form::= named with{ elements:#input, ...},
- input::=named with following
Net
See Input above.
- form:form,
- type:input_type, in Navigator 3
- input_type::="button" | "checkbox" | "hidden" | "password" |
"radio" | "reset" | "select" | "submit"| "text" | "textarea".
- if input_type <> "select" then value:string.
- if input_type = "select" then options:#option, an array of options,
- ...
(End of Net)
. . . . . . . . . ( end of section Features in a Browser) <<Contents | End>>
. . . . . . . . . ( end of section Essential Predefined Features) <<Contents | End>>
A variable is local if there is a declaration anywhere in its
function.
This is confusing if the variable is used before it is declared.
This usage looks like a global variable but is actually local.
The symbol "with" is supposed to be like "with" in Pascal -- an abbreviation.
However it has some unexpected effects.
Place the script and its <script> and </script> tags, inside
an SGML comment... with the last tag made to look like a
JavaScript
comment:
<!---
...
// --->
Use the "<NOSCRIPT>" tag:
<NOSCRIPT> any_HTML_text </NOSCRIPT>
The HTML is only displayed if the browser can't handle scripts.
Use the typeof operator:
typeof null "object"
typeof v "undefined"
First use the typeof operator to sure that the expression
returns an object and
then use the constructor property to find the name of the
function that
constructed the object.
If you need to have the string "</SCRIPT>" in a JavaScript
statement in a
HTML script.... then write it like this: "<\/SCRIPT>".
If a is an array then in conditions like
if(a)...
different versions of JavaScript do different things.
When a number is converted to boolean value (in an if(...) for
example)
the result is false for zero and true for any non-zero except the
"Not a Number"
(NaN) value and the "Undefined" value. Undefined and NaN are both
false.
You can have a series of SCRIPT tags at the start of a page that
have different language attributes and set a global property
indicating
the version.
A function f of an object x is invoked by x.f(...) but is
stored as
property x.f -- no brackets. So to find out if a function
exists in
use
if ( x.f ) // use x.f()
else //avoid using x.f()
This can be used to work around platform and version
incompatibilities.
. . . . . . . . . ( end of section Hints and Tricks) <<Contents | End>>
- MS::Languages->Languages=`a function that distorts the syntax and
semantics of languages`.
- TBA::="To Be Announced".
- For all X, O(X)::= empty|X, -- optional X.
- For all X, List(X)::= X #("," X), -- an X or an X,X or X,X,X or
... .
- double_quote::="\"".
- empty::=. -- string with nothing in it.
- awk::=`a language created by Aho, Weinberg, and Kernighan to help
programmers to solve simple data processing problems quickly and easily`.
- Net::=A set of interrelated attributes and constraints, defines the
mathematical equivalent of a class in C++
[ maths.syntax.html ]
- with::=indicates the extension of a logical system by adding a set of terms and
constraints to those already existing.
[ maths.syntax.html ]
- C::= See http://www.csci.csusb.edu/dick/samples/c.syntax.html.
- CPP::= See http://www.csci.csusb.edu/dick/samples/c++.syntax.html.
- HTML::= See http://www.csci.csusb.edu/dick/samples/comp.html.syntax.html.
- Java_keywords::= See http://www.csci.csusb.edu/dick/samples/java.html.
- Java::= See http://www.csci.csusb.edu/dick/samples/java.html.
- JavaScript_introduction::= See http://www.accredited-online-college-degrees.com/javascript.html.
- RE::= See http://www.csci.csusb.edu/dick/samples/regular_expressions.html.
- SGML::= See http://www.csci.csusb.edu/dick/samples/comp.text.sgml.html.
- URL::= See http://www.csci.csusb.edu/dick/samples/com.html.syntax.html#Universal Resource
Locators
(Flanagan98): David Flanagan, JavaScript: The Definitive Guide,
O'Reilly 1998.
Here
[ 240148421?cid=DDJ_nl_upd_2013-02-12_h&elq=5415a33d4b5d40b6a2f2bb89ff7e3aa5 ]
is a slide show that describes some books to help you learn JavaScript...