Download presentation
Presentation is loading. Please wait.
1
Javascript A primer based on Pascal
2
Javascript Technically called ECMAScript Most Javascript is used on web pages. NOT like Java. (But designed to look like Java!) Uses DOM (Document Object Model) for an HTML page Event driven Looks similar to many languages inspired by C syntax (Java, PHP, etc.)
3
DOM Hierarchical representation of a document Non sequential access Image by John Manuel taken from: http://en.wikipedia.org/wiki/Image:JKDOM.SVG
4
HTML Hypertext Markup Language –Web browser standard Basic HTML page with javascript <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN " " http://www.w3.org/TR/html4/strict.dtd " > http://www.w3.org/TR/html4/strict.dtd simple page document.write('Hello World!'); Your browser either does not support JavaScript, or you have JavaScript turned off.
5
Event Driven Events trigger the calling of functions Some DOM events –onClick –onMouseOver –onMouseUp –onKeyPress –onFocus http://en.wikipedia.org/wiki/DOM_Events
6
Comments Pascal –Multiline comments uses {} and (**) Javascript –Multiline comments Uses /**/ –Single line comments Uses // Comment ends with the line
7
Case Sensitivity Pascal is NOT case sensitive Javascript IS case sensitive –document.Write("CPSC110"); //Does not work! –document.write("Hello"); –Examples from: http://www.prestwood.com/ASPSuite/KB/CrossRef.asp?LangID=2&ToLangID=4&GroupID=2 2 http://www.prestwood.com/ASPSuite/KB/CrossRef.asp?LangID=2&ToLangID=4&GroupID=2 2
8
Multi-line Statements AKA code blocks Pascal –Begin End Javascript –{ }
9
Strings Pascal –Quoted with single (‘’) quotes –To put one in the string, repeat single quote Writeln(‘Michael’’s website’) Javascript –Quoted with single (‘’) or double (“”) quotes –To put one in the string, precede it with a forward slash (\) Alert(“Hello \”Michael\”.”) Alert(‘Michael\’s website’)
10
Variable Declaration/Initialization Pascal –Must begin with underscore or letter –Var age:integer; –Age := 0; Javascript –Must begin with underscore or letter –Type is determined by the value assigned Var age; –Variables can be declared and initialized at the same time. Var age = 0;
11
Operators PascalJavascript Addition++ Subtraction-- Multiplication** Division Real/Float// Division IntegerDiv/ Modulus/RemainderMod% Increment++ Decrement--
12
Comparison PascalJavascript Equal to=== Exactly equal to (value and type) === Not equal<>!= Greater than>> Less than<< Greater than or equal>= Less than or equal<=
13
Assignment Pascal – := Age := 18; Javascript – = Age = 18; ExampleSame As = +=x += yx = x + y -=x -= yx = x - y *=x *= yx = x * y /=x /= yx = x / y %=x %= yx = x % y
14
Logical Operators PascalJavascript AND&& OR|| NOT!
15
IF Pascal –If x<y then writeln(‘X is less than Y’); Javascript –if (x<y) { document.write(‘X is less than Y’); }
16
Case/Switch Pascal –Case x of 1: begin {Code for 1} end; 2: begin {Code for 2} end; else: begin {Default Code} end end Javascript –switch (x) { case 1: // Code for 1 break; case 2: // Code for 2 break; default: // Default Code }
17
While-Do Loop Pascal –while x<y do begin x := x + 1; end Javascript –while (x<y) { x++; }
18
Repeat-Until Loop Pascal –repeat x := x + 1 until(1/x>0.001) Javascript –do { x++; } while(1/x<=0.001 )
19
For-To Loop Pascal –var i:integer; for i:=1 to 10 do writeln(i) Javascript –for (i=1;i \n”); }
20
For-Downto Loop Pascal –var i:integer; for i:=10 downto 1 do writeln(i) Javascript –for (i=10;i>=1;i--) { document.write (i+” \n”); }
21
Functions function factorial (num : integer): integer; begin if (num = 1) then factorial := 1 else factorial := num * factorial (num - 1); end; function factorial (num) { if (num == 1) { return 1; } else { return num * factorial (num - 1); } Pascal Javascript
22
Email Obfuscation I.e. make it harder for email spammers to harvest your email address.
23
Password Feedback
24
References http://www.prestwood.com/ASPSuite/KB/C rossRef.asp?LangID=2&ToLangID=4&Gro upID=22http://www.prestwood.com/ASPSuite/KB/C rossRef.asp?LangID=2&ToLangID=4&Gro upID=22 http://www.w3schools.com/js/default.asp
Similar presentations
