javascript client-side scripting. up to now we've seen a little about how to control content...
Post on 30-Jan-2016
224 views
TRANSCRIPT
Javascript
Client-side scripting
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSUp to nowWe've seen a little about how to control
content with HTMLpresentation with CSS
Javascript is a language that can be used to control browser actions
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSJavascript languageGeneral-purpose language designed to be
embedded within other applicationsC-like syntaxObject-oriented InterpretedBuilt-in garbage collectionSupport for regular expressionsBuilt-in security - can't read local files or do
networking
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSWhat JavaScript can doControl document appearance and
contentControl the browserInteract with forms
Validate user input
Interact with userUse cookies
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSJavaScript is several
languages JavaScript - implemented by Netscape (and
later Mozilla)http://www.mozilla.org/js/
Jscript - Microsoft versionECMAScript -standardized version of the
language http://www.ecma-international.org/publications/standards/
Ecma-327.htm
JavaScript is not related to Java
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSHow to use JavaScript JavaScript can be embedded into your html
pages in a couple of ways in <script> elements in both <head> and <body> elements of page
in event attributes of appropriate elements
You can also reference external files containing JavaScript code<script type="text/javascript" src="source.js"></script>
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSBasic SyntaxCase-sensitive Insensitive to whitespace; line terminator is optional (unless result
is ambiguous)// and /* … */ commentsSame rules for identifiers as Java
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSVariablesMust be declared before they can be used
var i;var x, y;using undeclared variable causes an implicit
declaration - resulting variable is globalvariables declared in functions are local
Untyped can be assigned to values of any type
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS TypesPrimitive types
numbers stringsbooleans - true or
false&&, || and !
null undefined
Reference types objects: unordered
collection of named values
arrays: ordered collection of unnamed values
functionsspecial classes
DateRegExp
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSNumbers
Numbers - all stored using IEEE 754 64-bit standard
Literals integer : 0 7 1300Hex : 0xff 0xCAFE911Octal : 0377Floating point : 3.14 .333 6.02e23 1.6e-19
Operations: standard arithmetic, functions of Math object, relational operators, bitwise operators
Special values: Infinity, NaN, Number properties
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS StringsSequence of Unicode charactersLiterals can be enclosed in either single
or double quotesEscape sequences include the ones you
are used to plus the ability to represent a character by its Unicode (\uXXXX)
Concatenate with +
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSString properties and methodslength - the number of characters in the
stringcharAt( index) - index from 0substring( start, endPlus1)use + to concatenate strings
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSFunctionsA piece of executable codeFirst-class objectsDefinition
function square(x) {return x*x; }
Literal functionsvar square = function(x){return x*x; }
var square = new Function( "x", "return x*x;”);
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS ObjectsAn object is collection of named values
which are referred to as the properties of the objectproperty that is a function is called a method
Objects are created with newvar o = new Object()
Object literalsvar point = {x:2.3, y:-1.2}
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSUsing ObjectsOnce the object is created, you can add
and use whatever properties you needvar point = new Object();point.x = 2.3;point.y = -1.2
Use the in operator to check if an object has a particular propertyvar hasXcoord = "x" in point;
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS ArraysArrays are indexed collections of data values
size is dynamic
Creating arraysvar a = new Array(); // now add elements
a[0] = 1.2; a[1]="JavaScript"; …
var b = new Array( 1.2, "JavaScript", true, …}
var c = new Array(5); //5-element array
Array Literalsvar a = [1.2, "JavaScript", true, {x:1, y:3}]
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSStatement TypesExpression statements have side effects
Assignment - both simple (=) and compound (+=, -=, …)
deletefunction calls (with no return value)
Compound statements - enclosed in { }no block scope in JavaScript
var for declaring variables
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS Selection if
if (cond1)
stmt1;
elseif (cond2)
stmt2;
…
else
stmtLast;
switchswitch (n) { case 1: block1; break; … default: defaultBlock;}
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSRepetitionwhile
while (cond)
stmt;
do/whiledo
stmt;
while (cond);
forfor (init; test; update)
stmt; for/in
for (var in obj) stmt;• loops through elements
of array or properties of object
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSMore statement typesfunctionreturnthrowtry/catch/finallywith - used to temporarily modify scope
chain; is empty statement
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS SourcesWeb Design and Programming by Paul S.
Wang and Sanda S. Katila JavaScript The Definitive Guide by David
Flanaganhttp://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/
http://www.ecma-international.org/publications/standards/Ecma-262.htm