2015 JavaScript introduction
Download as PPTX, PDF0 likes790 views
This document provides an introduction to JavaScript, including its history, usage, and key aspects of the language. It describes how JavaScript was created by Brendan Eich at Netscape in 1994 and later standardized as ECMAScript. It outlines JavaScript's core types like numbers, strings, and objects. It also covers common language features such as variables, operators, functions, and methods for interacting with web pages.
![danielfisher.com
Arrays
var a1 = [];
var a2 = [1, 2, 4];
a2.push(5);
var x = a2.pop();
var y = a2[0];](https://image.slidesharecdn.com/javascriptintroduction-150312040246-conversion-gate01/85/2015-JavaScript-introduction-29-320.jpg)
![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);
}](https://image.slidesharecdn.com/javascriptintroduction-150312040246-conversion-gate01/85/2015-JavaScript-introduction-30-320.jpg)
![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);](https://image.slidesharecdn.com/javascriptintroduction-150312040246-conversion-gate01/85/2015-JavaScript-introduction-32-320.jpg)
2015 JavaScript introduction
- 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
- 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.
- 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>
- 14. danielfisher.com Primitive Types • null • Object • Bool • Number • String • Array
- 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();
- 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 [email protected] SKYPE LENNYBACON CALL +49 (176) 6159 8612