3. What is it ?
JavaScript IS NOT Java
Created in 1995 by Netscape (LiveScript)
4. What is it ?
JavaScript IS NOT Java
Created in 1995 by Netscape (LiveScript)
ECMAScript standard
JScript and ActionScript, also based on ECMAScript
5. What is it ?
JavaScript IS NOT Java
Created in 1995 by Netscape (LiveScript)
ECMAScript standard
JScript and ActionScript, also based on ECMAScript
Dynamic, Weakly typed
6. What is it ?
JavaScript IS NOT Java
Created in 1995 by Netscape (LiveScript)
ECMAScript standard
JScript and ActionScript, also based on ECMAScript
Dynamic, Weakly typed
Object Oriented, Prototype based
7. What is it ?
JavaScript IS NOT Java
Created in 1995 by Netscape (LiveScript)
ECMAScript standard
JScript and ActionScript, also based on ECMAScript
Dynamic, Weakly typed
Object Oriented, Prototype based
Functional features
8. What can we do with it ?
Scripting language created for programmatic access of
webpage objects
9. What can we do with it ?
Scripting language created for programmatic access of
webpage objects
Currently also used for:
Application scripting
Server side scripting
16. Why people hate it
Bad uses
Popup ads, annoying animations
Bad practices lead to slower code
17. Why people hate it
Bad uses
Popup ads, annoying animations
Bad practices lead to slower code
Many books advocated wrong practices for years
Lots of bad tutorials and bad code all over the web
People didn't want to learn, so they replicated the bad
code
20. Why developers hate it
Standard is incoherent
Being solved !
Bad implementations
21. Why developers hate it
Standard is incoherent
Being solved !
Bad implementations
Browser differences
22. Why developers hate it
Standard is incoherent
Being solved !
Bad implementations
Browser differences
However, it will take time...
23. Learning the language
Basic syntax is similar to C-like languages
Code goes in .js files or HTML <script> tag
Comments are the same as C
alert("Hello world ! JavaScript is awesome !");
24. Variables
var hello = "world";
var keyword: local variable
No need to declare types
25. Variables
Variable types
Numbers var num = 1;
Strings var str = "hi !";
Objects var obj = new Object();
Arrays var arr = ["string", 2];
Functions var fun = function() {};
Regexps var regexp = /^jssrocks/;
Numbers, Strings, Regexps and Functions are
really Objects
26. Variables
Be careful...
"30a".parseInt();
"40.5".parseInt();
"40.5".parseFloat();
36. Functions
function add(a, b) {
return a + b;
}
Wrong ! Function goes global !
But functions are objects !
var add = function(a, b) {
return a + b;
}
37. Functions
var module = {
add: function(a, b) {
return a + b;
},
sub: function(a, b) {
return a - b;
}
}
module.add(1, 2); // 3
38. Context
Why is context so important ?
var fun = function(){
var num = 1;
silly_var = 2;
alert(num); // 1;
}
alert(num); // undefined
alert(silly_var); // 2
39. Context
Why is context so important ?
var module = {
str: "blah",
print: function() {
alert(this.blah);
}
}
module.print(); // blah
However, this can be ambiguous, so be careful.
40. Functional features
Let's go functional !
var fun = function(callback) {
callback();
}
fun(function() {
alert("I'm anonymous !");
});
41. Closures
var fun = function() {
var num = 1;
var inner = function() {
alert(num);
}
inner(); // nothing happens...yet
}
fun(); // 1
inner(); // undefined
42. Available objects
Numbers, Strings, Arrays all have methods
There are many more available objects:
Math, Date, etc*
* https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference
43. Available objects
Examples:
var str = "Tiago Rodrigues";
str.split(" "); // ["Tiago", "Rodrigues"];
Math.sqrt(36); // 6
var arr = [4, 6, 3, 7];
arr.sort(); // [3, 4, 6, 7]
44. Object orientation
But JavaScript is Object Oriented
So how do we create object instances ?
We use prototypes !
45. Classes
Defining a class
var Book = function(name) {
this.init(name);
}
Book is a constructor
46. Prototypes
Let's add attributes and methods to our class
Book.prototype = {
name: "", // this is an attribute
// this is a method
init: function(name) {
this.name = name;
},
sayName: function() {
alert(this.name);
}
};
47. Prototypes
So let's create some books
var good_parts = Book("The Good Parts");
good_parts.sayName(); // The Good Parts
var def_guide = Book("The Definitive Guide");
def_guide.sayName(); // The Definitive Guide
48. Prototypes
But why is this so great ?
Book.prototype.removeName = function() {
this.name = "";
}
Extending default objects
String.prototype.trim = function() {
return this.replace(/^s+|s+$|n+$/g, '');
}
" trim me ".trim(); // "trim me"
49. The Document Object Model
API for (X)HTML files
Tree representation of all the objects in a file
Each object has properties and methods
Not the same in every browser
Mostly IE not up to date
50. The Document Object Model
window represents your browser window
document represents your current document
document.forms is an array with all your form fields
Many other objects are available
53. Event handling
<a href="#" onClick="alert('hi')">click me</a>
<a href="#" id="link">click me</a>
On the JS file:
var lnk = document.getElementById("link");
if (lnk.addEventListener){
lnk.addEventListener(
'click', handler, false);
} else if (lnk.attachEvent){
lnk.attachEvent('onclick', handler);
}
54. Object properties
<a href="#" id="link">click me</a>
On the JS file:
var lnk = document.getElementById("link");
lnk.href = "file.html";
lnk.style.color = "#000";
55. Basic output on a browser
Alert
alert("Hi !");
Confirm
confirm("Are you there ?");
// returns true or false
Prompt
prompt("What's your name ?");
56. Timing
Flashing an alert box after 5 seconds
setTimeout(function() {
alert("click me !");
}, 5000);
57. Timing
Flashing an alert box after 5 seconds
setTimeout(function() {
alert("click me !");
}, 5000);
Flashing a box every 5 seconds
var int = setInterval(function() {
if(confirm("Stop ?")) {
clearInterval(int);
}
}, 5000);
58. JSON
JavaScript Object Notation *
{
"name" : "Tiago Rodrigues",
"age" : 24,
"profession" : "JavaScript developer"
}
Other languages have similar structures
There are libraries available on every popular language
* http://json.org
59. Ajax
Asynchronous Javascript And XML*
Fetching content through JavaScript
with the use of the XMLHttpRequest object
Server doesn't send an entire page, only what's needed
Insert the content in the current page through JavaScript
* http://adaptivepath.com/ideas/essays/archives/000385.php
64. Libraries and frameworks
Problems
Many library users don't learn the base language
Because of this, they abuse the base language
65. Libraries and frameworks
Problems
Many library users don't learn the base language
Because of this, they abuse the base language
This leads to performance problems
66. Libraries and frameworks
Problems
Many library users don't learn the base language
Because of this, they abuse the base language
This leads to performance problems
So...be careful !
67. Libraries and frameworks
Prototype / script.aculo.us
jQuery / jQuery UI
Dojo
LibSAPO.js
Many others: extjs, Mootools, etc
Ajaxian* has a great list
* http://ajaxian.com
68. Good practices
Unobtrusive JavaScript
Not blocking possible actions
Making them available without JavaScript
Progressive Enhancement and Graceful Degradation
Build your website with no JavaScript at all
Add it later to improve user experience
This way, the website will degrade gracefully
Verify your code !
http://jslint.com/
* http://andr3.net/blog/post/141
69. Other uses
Server Side JS
Narwhal
Node.js
Adobe AIR / Tweetanium
Extensões Google Chrome
Extensões Mozilla Firefox (Jetpack)
Phonegap, Mojo, W3C Widgets (Opera widgets)
Platform scripting
.NET
J2EE (Rhino)
70. References
Books
JavaScript: The Definitive Guide
JavaScript: The Good Parts
http://javascript.crockford.com
http://developer.mozilla.org