javascript a primer based on pascal. javascript technically called ecmascript most javascript is...
Post on 22-Dec-2015
249 views
TRANSCRIPT
Javascript
A primer based on Pascal
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
Multi-line Statements
• AKA code blocks
• Pascal– Begin
End
• Javascript – { }
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
Logical Operators
Pascal Javascript
AND &&
OR ||
NOT !
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}
While-Do Loop
• Pascal– while x<y do begin x := x + 1; end
• Javascript– while (x<y) { x++;}
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
Email Obfuscation
• I.e. make it harder for email spammers to harvest your email address.
Password Feedback
References
• http://www.prestwood.com/ASPSuite/KB/CrossRef.asp?LangID=2&ToLangID=4&GroupID=22
• http://www.w3schools.com/js/default.asp