An introduction to JavaScript (for .NET developers)

1. danielfisher.com
JavaScript Introduction
Daniel Fisher | info@danielfisher.com

2. danielfisher.com
Daniel Fisher
I design, develop, deploy, teach, train, coach and
speak software.
• danielfisher.com
• HTML5 & Web
• Data Access & Performance
• Scalable & Testable Design
• Distributed Systems & Services
• Security & Trust
• justcommunity.de
• NRWConf.de
• lennybacon.com
• Blog
• @lennybacon
• Tweets

3. danielfisher.com
EFFICIENT COMMUNICATION…

4. danielfisher.com
Agenda
• History
• Usage
• Language

5. danielfisher.com
Introduction
• Developed by Brendan Eich
at Netscape in 1994.
– A lightweight interpreted
language
– Considered client-server
solution as a distributed OS
– Complement Java by
appealing to nonprofessional
programmers
• Like Microsoft's VB.

6. danielfisher.com
The Language
• JavaScript is a prototype-based scripting
language that is:
– Dynamic
– Weakly typed
– And has first-class functions.
• It is a multi-paradigm language, supporting multiple
programming styles:
– Object-oriented
– Imperative
– Functional

7. danielfisher.com
Adoption by Microsoft
• Internet Explorer 3.0 introduced JavaScript in
1996.
• Internet Information Server 3.0, introduced
support for server-side JavaScript in 1996.
– Microsoft's JavaScript implementation was later
renamed JScript to avoid trademark issues.
– JScript added new date methods to fix the Y2K-
problematic methods in JavaScript, which were
based on Java's java.util.Date class.

8. danielfisher.com
Server side JavaScript
• Netscape introduced an implementation of
the language for server-side scripting with
Netscape Enterprise Server in 1995.
– Since the mid-2000s, there has been a
proliferation of server-side JavaScript
implementations.
• node.js (2009)is one recent notable example of
server-side JavaScript being used in real-world
applications.

9. danielfisher.com
Standardization
• In November 1996, Netscape announced that
it had submitted JavaScript to Ecma
International for consideration as an industry
standard
– Subsequent work resulted in the standardized
version named ECMAScript.

10. danielfisher.com
Trademark
• Today, "JavaScript" is a trademark of Oracle
Corporation.

11. danielfisher.com
USAGE

12. danielfisher.com
Using Script
<script language="text/javascipt"></script>
<script
language="text/javascipt"
src="myExternalScript.js">
</script>
<a href="#" onclick="alert('you clicked me');">
click me
</a>

13. danielfisher.com
LANGUAGE

14. danielfisher.com
Primitive Types
• null
• Object
• Bool
• Number
• String
• Array

15. danielfisher.com
Complex Types
• Date
• Math

16. danielfisher.com
Global Objects
• undefined
• NaN
• window
• document
• navigator

17. danielfisher.com
Operators
+, -, *, /, %, ++, --, …
==, ===, !=, !===, <, >,
<=, >=
&&, ||, !
if, if-else, while, do, …

18. danielfisher.com
Variables
• Untyped!
• Can be declared with var keyword:
var foo;
• Can be created automatically by assigning a value:
foo = 1;
blah = "Hi Dave";
18

19. danielfisher.com
Browser UI Interaction
var yourName =
prompt('What is your name?');
if(confirm('Are you sure?')){
alert('Hello ' + yourName);
};

20. danielfisher.com
String
var y = "Hello World";
var len = y.length.toString();
var part = y.substring(0, 2);
var char = y.charAt(0);
var upper = y.toUpperCase();
var lower = y.toLowerCase();

21. danielfisher.com
Math
Math.sqrt()
Math.pow()
Math.abs()
Math.max()
Math.min()
Math.floor()
Math.ceil()
Math.round()
Math.PI()
Math.E()
Math.random()

22. danielfisher.com
Date
var today = new Date();
// sets to current date & time
newYear = new Date(2002, 0, 1);
newYear.getYear()
newYear.getMonth()
newYear.getDay()
newYear.getHours()
newYear.getMinutes()
newYear.getSeconds()
newYear.getMilliseconds()

23. danielfisher.com
The Document object
• Represents the currently loaded document
Attributes of the current document are:
– Title
– Referrer
– URL
– Images
– Forms
– Links
– Colors
23

24. danielfisher.com
Document Methods
• The documents methods include:
document.write()
Like a print statement – the output goes into the
HTML document.
document.writeln()
Adds a newline after printing.
document.write(
"My title is " + document.title
); 24

25. danielfisher.com
The Navigator Object
• Represents the browser. Read-only!
• Attributes include:
– appName
– appVersion
– platform
EIW: Javascript the Language 25

26. danielfisher.com
The Window object
• Methods include:
– alert()
– confirm()
– prompt()
– moveTo()
– moveBy()
– open()
– scroll()
– scrollTo()
– resizeBy()
– resizeTo()
– close()
26

27. danielfisher.com
The Window Methods
• Represents the current window.
• Attributes are:
– document
– name
– status
– parent
27

28. danielfisher.com
Comments
//Single line comment
/*
A Multi Line
Comment
*/

29. danielfisher.com
Arrays
var a1 = [];
var a2 = [1, 2, 4];
a2.push(5);
var x = a2.pop();
var y = a2[0];

30. danielfisher.com
Arrays
var a3, i, j;
a3 = [1, 2, 4];
for (i=0; i<a3.length; i++) {
a3[i]=i;
}
for (j in a3) {
document.writeln(j);
}

31. danielfisher.com
Javascript Functions
• The keyword function is used to define a
function (subroutine):
function add(x, y) {
return (x + y);
}
• No type is specified for arguments!
31

32. danielfisher.com
Functional Programming
function filter(pred, arr) {
var len = arr.length;
var filtered = [];
for(var i = 0; i < len; i++) {
var val = arr[i];
if(pred(val)) {
filtered.push(val);
}
}
return filtered;
}
var numbersGreaterThan100 =
filter(
function(x) { return (x > 100) ? true : false; },
[12, 200, 42, 11]
);
alert(numbersGreaterThan100);

33. danielfisher.com
BOOK DANIELFISHER.COM
READ LENNYBACON.COM
FOLLOW @LENNYBACON
LINK LINKEDIN.COM/IN/LENNYBACON
XING XING.COM/PROFILE/DANIEL_FISHER
FRIEND FB.COM/DANIEL.FISHER.LENNYBACON
MAIL DANIEL.FISHER@LENNYBACON.COM
SKYPE LENNYBACON
CALL +49 (176) 6159 8612