2015 javascript introduction
TRANSCRIPT
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
danielfisher.com
EFFICIENT COMMUNICATION…
danielfisher.com
Agenda
• History
• Usage
• Language
danielfisher.com
Introduction
• Developed by Brendan Eichat 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.
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
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.
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.
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.
danielfisher.com
Trademark
• Today, "JavaScript" is a trademark of Oracle
Corporation.
danielfisher.com
USAGE
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>
danielfisher.com
LANGUAGE
danielfisher.com
Primitive Types
• null
• Object
• Bool
• Number
• String
• Array
danielfisher.com
Complex Types
• Date
• Math
danielfisher.com
Global Objects
• undefined
• NaN
• window
• document
• navigator
danielfisher.com
Operators
+, -, *, /, %, ++, --, …==, ===, !=, !===, <, >, <=, >=&&, ||, !if, if-else, while, do, …
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
danielfisher.com
Browser UI Interaction
var yourName =prompt('What is your name?');
if(confirm('Are you sure?')){alert('Hello ' + yourName);
};
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();
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()
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()
danielfisher.com
The Document object
• Represents the currently loaded document
Attributes of the current document are:
– Title
– Referrer
– URL
– Images
– Forms
– Links
– Colors
23
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
danielfisher.com
The Navigator Object
• Represents the browser. Read-only!
• Attributes include:
– appName
– appVersion
– platform
EIW: Javascript the Language 25
danielfisher.com
The Window object
• Methods include:
– alert()
– confirm()
– prompt()
– moveTo()
– moveBy()
– open()
– scroll()
– scrollTo()
– resizeBy()
– resizeTo()
– close()
26
danielfisher.com
The Window Methods
• Represents the current window.
• Attributes are:
– document
– name
– status
– parent
27
danielfisher.com
Comments
//Single line comment
/*
A Multi Line
Comment
*/
danielfisher.com
Arrays
var a1 = [];
var a2 = [1, 2, 4];
a2.push(5);
var x = a2.pop();
var y = a2[0];
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);
}
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
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);
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 [email protected]
SKYPE LENNYBACON
CALL +49 (176) 6159 8612