Javascript
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=2
2
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
Addition
Pascal
+
Subtraction
Multiplication
-
*
Division Real/Float /
Division Integer Div
Modulus/Remainder Mod
Increment
Decrement
Javascript
+
/
/
-
*
%
++
--
Comparison
Equal to
Exactly equal to
(value and type)
Not equal
Pascal
=
<>
Greater than
Less than
>
<
Greater than or equal >=
Less than or equal <=
Javascript
==
===
!=
>
<
>=
<=
Assignment
• Pascal
– :=
• Age := 18;
• Javascript
– =
• Age = 18;
=
+=
-=
*=
/=
%=
Example Same As x += y x -= y x *= y x /= y x %= y x = x + y x = x - y x = x * y x = x / y x = x % y
Pascal
Logical Operators
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}
2: end; else: begin
{Default Code} end end begin
{Code for 2} end;
• 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 + 1 until(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”);
}
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
Email Obfuscation
• I.e. make it harder for email spammers to harvest your email address.
Password Feedback
References
• http://www.prestwood.com/ASPSuite/KB/C rossRef.asp?LangID=2&ToLangID=4&Gro upID=22
• http://www.w3schools.com/js/default.asp