CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 3 JavaScriptJan 25, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Tuesday, January 25, 2011References2Javascript Tutorial, http://www.w3schools.com/js/default.aspECMA-262, Edition 5, http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdfCS 683 Lecture notes, http://www.eli.sdsu.edu/courses/fall04/cs683/notes/index.htmlTuesday, January 25, 2011JavaScript3Netscape 1996Scripting language for webpagesjScriptMicrosoft's versionECMAScriptECMA European Standards body namePrototype basedscripting languageDynamic C like syntaxNot related to JavaTuesday, January 25, 2011WebServer in JavaScript4var http = require('http');http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');}).listen(8124, "127.0.0.1");console.log('Server running at http://127.0.0.1:8124/');Uses Node.js http library Tuesday, January 25, 2011JS is now used on server side and is embedded into applicationsServer side & Embed-able JS5Node.jsScalable network JS programsServer-side executable scriptsV8 JavaScript EngineGoogles open source JS engineStandaloneEmbed in C++ programsRhinoStandaloneEmbed in Java programsIncluded in Java 6Tuesday, January 25, 20116Running JavaScript Tuesday, January 25, 2011Desktop/Server side - Node.js7console.log('Hello World')hello.jsnode hello.jsDownload & install Node.jsTuesday, January 25, 2011Runs on Linux, Mac, Unix,Windows/Cygwin but not on straight windowsIn Web Browser8<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Javascript.html</title></head><body><script type="text/javascript"><!--document.writeln( "Hello World",'<br/>');//--></script></body></html>Tuesday, January 25, 2011Some Options9<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Javascript.html</title></head><body><script>var a = 2;debugger; while ( a < 5 ) {alert( a++);}</script></body></html>Tuesday, January 25, 2011To use the javascript debugger:Chrome: View - Developer - Developer Tools then Script tabSafari: Turn on developer menu the Develop - Start Debugging JavascriptFireFox: Install FirebugUsing a file10<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Javascript.html</title></head><body><script src="sample.js"></script></body></html>document.writeln( "Hello World!",'<br/>');sample.jsJavaScript.htmlTuesday, January 25, 201111Basic SyntaxTuesday, January 25, 2011Basic Syntax12/* Comment */var j = "This is a string"; j = 'This is a string too'; // var is optionalk = j + ' adding to a string'; require('sys').print( k); k = 2 * 3; //The string is garbage collected j = 12.34 //variables have no typevar hex = 0xff; var trouble = 011; //Octal or base 10 ?require('sys').print( trouble); //prints 9, may print 11 Tuesday, January 25, 2011More Basic Syntax13// Float literalsa = 3.14 // ; is optionalb = 6.03e12 // ; not optional between statements on same linec = 12; d = 'cat " man' //embedded " in a stringTuesday, January 25, 2011Case Sensitive14var k = 5;var K = 10;Tuesday, January 25, 2011Undefined verses not Defined15var x; //x is undefined//z is not definedTuesday, January 25, 2011Data Types & Built-in Objects16Undefined (undefined)Null (null)Booleantrue, falseStringNumberGlobalObjectFunctionArrayStringBooleanNumberMathDateRegExpErrorJSONObjectsTuesday, January 25, 2011String operations17e = "first line\n second line"; e.length; // 23e.charAt(0); //f 1 + 2 + 'cat'; //3cat'cat' + 1 + 2; //cat12sub = e.substring(6,9); //lin s = e.indexOf('s'); //3 e.indexOf('line'); //6Tuesday, January 25, 2011String Operations18f = "First line here";f.toUpperCase(); //FIRST LINE HEREf.toLowerCase(); //first line here f.split(' '); //array of three strings 'First', 'line', 'here’f.split(''); //’F’,’i’,'r',’s’,’t’,‘ ’,’l’,’i’,’n’,’e’,’ ‘h’, ‘e’, ‘r’, ‘e’f.split('', 5); //’F’,’i’,'r',’s’,’t’f.split(“line”); //’First ‘, ‘ here’Tuesday, January 25, 2011String HTML Wrapper Methods19anchor()big()blink()bold()fixed()fontcolor()fontsize()italics()link()small()strike()sub()sup()'cat'.bold() //<b>cat</b>'cat'.anchor('sam') //<a name="sam">cat</a>'cat'.link('index.html') //<a href="index.html">cat</a>'cat'.fontcolor('red') //<font color="red">cat</font>Not part of the standardSupport is Browser dependentTuesday, January 25, 2011String - Number Conversion201 + '2' //121 + (+'2') //3'1' + 2 //12parseFloat('2') //2parseFloat(' 2k') //2parseFloat(' m2k') //NanparseInt('2') //2parseInt('2.34') //2Tuesday, January 25, 2011Equality21== are the two values the same=== do the two items point to the same locationTuesday, January 25, 2011Standard C Control Structures22var a = 3;if ( a == 1) { alert( 'one'); } else if (a == 2) { alert( 'two');}else { alert( 'large');}while ( a < 5 ) { print( a++);} do { print(a--);}while (a > 0); for (var count = 0; count < 5; count++) print( count);Tuesday, January 25, 2011Switch23switch (a) { case 1: alert('one'); break; case 2: alert('one'); break; case 2 + 1: alert('three'); break; default: alert('large'); break;};switch (typeof a) { case 'number': alert('number'); break; case 'string': alert('string'); break; case 'boolean': alert('boolean'); break; case 'object': alert('boolean'); break; default: alert('other'); break;};Tuesday, January 25, 2011Arrays - Creating24var a = new Array();a.length; //0a[0]; //undefined var b = new Array(1,2,3, 'cat');b.length; //4b[0]; //1b.toString(); //1,2,3,cat var c = new Array(10);c.length; //10c[0]; //undefined var d = [1, 2, true, 'dog'];d.length; //4d[0]; //1Tuesday, January 25, 2011Array - Accessing25var a = new Array(5);a.length; //5 a[0] = 0;a[10] = 10; for (var x = 0; x < a.length; x++) if( a[x] != undefined) alert(a[x]); for (x in a) if( a[x] != undefined) alert(a[x]);Tuesday, January 25, 2011Array Methods - Join, Reverse, Sort26var a = ['cat', 'and', 'bat'];;var aString = a.join(); //cat,and,bat var bString = a.join("; "); //cat; and;
View Full Document
Unlocking...