Post on 22-Dec-2015
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.)
DOM
• Hierarchical representation of a document
• Non sequential access
Image by John Manuel taken from:http://en.wikipedia.org/wiki/Image:JKDOM.SVG
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"> <html> <head><title>simple page</title></head> <body> <script type="text/javascript"> document.write('Hello World!'); </script> <noscript> <p>Your browser either does not support JavaScript, or you have JavaScript turned off.</p> </noscript> </body> </html>
Event Driven
• Events trigger the calling of functions
• Some DOM events– onClick– onMouseOver– onMouseUp– onKeyPress– onFocus
• http://en.wikipedia.org/wiki/DOM_Events
Comments
• Pascal – Multiline comments
• uses {} and (**)
• Javascript– Multiline comments
• Uses /**/
– Single line comments• Uses //• Comment ends with the line
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=22
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’)
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;
Operators
Pascal Javascript
Addition + +
Subtraction - -
Multiplication * *
Division Real/Float / /
Division Integer Div /
Modulus/Remainder Mod %
Increment ++
Decrement --
Comparison
Pascal Javascript
Equal to = ==
Exactly equal to
(value and type)
===
Not equal <> !=
Greater than > >
Less than < <
Greater than or equal >= >=
Less than or equal <= <=
Assignment
• Pascal– :=
• Age := 18;
• Javascript– =
• Age = 18;
Example Same As
=
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
IF
• Pascal– If x<y then writeln(‘X is less than Y’);
• Javascript– if (x<y) { document.write(‘X is less than Y’);}
Case/Switch
• Pascal– Case x of 1: begin {Code for 1} end; 2: begin {Code for 2} end; else: begin {Default Code} endend
• Javascript– switch (x) { case 1: // Code for 1 break; case 2: // Code for 2 break; default: // Default Code}
Repeat-Until Loop
• Pascal– repeat x := x + 1until(1/x>0.001)
• Javascript– do { x++;} while(1/x<=0.001)
For-To Loop
• Pascal– var i:integer;for i:=1 to 10 do writeln(i)
• Javascript– for (i=1;i<=10;i++) { document.write (i+”<br>\n”);}
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+”<br>\n”);}
Functionsfunction 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