![Page 1: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/1.jpg)
Javascript
Client-side scripting
![Page 2: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/2.jpg)
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
![Page 3: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/3.jpg)
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
![Page 4: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/4.jpg)
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSWhat JavaScript can doControl document appearance and
contentControl the browserInteract with forms
Validate user input
Interact with userUse cookies
![Page 5: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/5.jpg)
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
![Page 6: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/6.jpg)
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>
![Page 7: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/7.jpg)
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSBasic SyntaxCase-sensitive Insensitive to whitespace; line terminator is optional (unless result
is ambiguous)// and /* … */ commentsSame rules for identifiers as Java
![Page 8: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/8.jpg)
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
![Page 9: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/9.jpg)
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
![Page 10: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/10.jpg)
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
![Page 11: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/11.jpg)
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 +
![Page 12: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/12.jpg)
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSString properties and methodslength - the number of characters in the
stringcharAt( index) - index from 0substring( start, endPlus1)use + to concatenate strings
![Page 13: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/13.jpg)
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;”);
![Page 14: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/14.jpg)
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}
![Page 15: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/15.jpg)
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;
![Page 16: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/16.jpg)
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}]
![Page 17: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/17.jpg)
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
![Page 18: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/18.jpg)
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS Selection if
if (cond1)
stmt1;
elseif (cond2)
stmt2;
…
else
stmtLast;
switchswitch (n) { case 1: block1; break; … default: defaultBlock;}
![Page 19: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/19.jpg)
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
![Page 20: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/20.jpg)
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSMore statement typesfunctionreturnthrowtry/catch/finallywith - used to temporarily modify scope
chain; is empty statement
![Page 21: Javascript Client-side scripting. Up to now We've seen a little about how to control content with HTML presentation with CSS Javascript is a language](https://reader036.vdocuments.mx/reader036/viewer/2022070418/56649d425503460f94a1dc1a/html5/thumbnails/21.jpg)
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