5. function validateForm() {
var x = document.forms["myForm"]["fname"].value
if (x == null || x == "") {
alert("Nome obrigatĆ³rio!");
return false;
}
}
17. ISO IEC
16262
http://www.ecma-international.org/publications/standards/Ecma-262.htm
18. ā ECMAScript is an
object-oriented
programming
language for performing
computations and manipulating
computational objects within
a host environment.
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
19. ā ECMAScript as deļ¬ned here
is not intended to be
computationally self-
sufficient; indeed, there are no
provisions in this speciļ¬cation for
input of external data or output of
computed results.
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
20. ā Instead, it is expected that
the computational environment
(host environment)
of an ECMAScript program will
provide not only the objects and
other facilities described in this
speciļ¬cation but also certain
environment-speciļ¬c host
objects
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
21. ā Some of the facilities of
ECMAScript are similar to those
used in other programming
languages; in particular Java TM,
Self, and Scheme
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
22. ā A web browser provides an ECMAScript host
environment for client-side computation
including, for instance, objects that
represent windows, menus, pop-ups,
dialog boxes, text areas, anchors, frames,
history, cookies, and input/output.
navigator.appName;
window.moveTo(100,100);
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
23. ā Further, the host environment provides a
means to attach scripting code to events such
as change of focus, page and image
loading, unloading, error and abort,
selection, form submission, and mouse
actions.
<button type="button" onclick="displayDate()">
Display Date
</button>
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
24. ā The scripting code is reactive
to user interaction and
there is no need for a main program.
<!-- Ate parece, mas nao e o āmainā do javascript -->
<script type="text/javascript">
function load() {
alert("Page is loaded");
}
</script>
<body onload="load()">
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
25. ā A web server provides a different
host environment for server-side
computation including objects
representing requests, clients,
and ļ¬les; and mechanisms to
lock and share data.
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
26. ā Each Web browser and server that
supports ECMAScript supplies
its own host environment,
completing the ECMAScript
execution environment.
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
27. ā ECMAScript is an object-oriented
programming language
(...)
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
28. ā ECMAScript is an object-oriented
programming language
(...)
Tipos Boolean, Number, String, Array, RegExp
Operadores + - * / >> << >>> < > <= >= | & *= ^ ++
ComentƔrios // /* */
Estruturas do while for if else try catch switch
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
29. Tipos
(construtores)
Boolean Object
Number Function
String RegExp
Array Date
30. Tipos
undeļ¬ned
var x;
alert(x);
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
31. Tipos
null
var x = null;
alert(x);
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
32. Tipos
Boolean
var x = true;
if(x) {
alert('Verdadeiro');
}
Obs: 0 e null equivalem a false
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
33. Tipos
Number
var x = 10;
var y = 15;
alert(x+y);
var x = 10.1;
var y = 15.2;
alert(x+y);
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
34. Tipos
String
var x = āAlexandreā;
alert(x);
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
35. Tipos
Function
var x = function() { alert("Alexandre"); };
x();
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
36. > var x = true;
> x.constructor;
Boolean()
> var x = "Alexandre";
> x.constructor;
String()
> var x = 3467;
> x.constructor;
Number()
> var x = function() { alert("Alexandre"); };
> x.constructor;
Function()
37. var x = new Boolean(true);
if(x) { alert('Verdadeiro'); }
var x = new String(āAlexandreā);
alert(x);
var x = new Number(10);
var y = new Number(15);
alert(x+y);
39. Operadores
delete
var a = 1
undeļ¬ned
a
1
delete a
true
a
ReferenceError: a is not deļ¬ned
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
41. Operadores
++ e --
var a = 1
undeļ¬ned
a++
1
a
2
++a
3
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
42. Operadores
instanceof
var a = "alexandre"
undeļ¬ned
a instanceof String
false
var a = new String("alexandre")
undeļ¬ned
a instanceof String
true
a instanceof Object
true
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
44. Estruturas
if/else continue switch
do/while break throw
while return try/catch
for with debugger
for/in
45. Estruturas
if/else
var a = true
if (a) {
alert('Verdadeiro')
} else {
alert('Falso')
}
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
46. Estruturas
do/while
var i = 1
do {
alert(i); (...)
i++;
} while (i < 5)
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
47. Estruturas
for
for ( var i = 1; i < 5; i++) {
alert(i);
}
(...)
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
48. Estruturas
for/in
var array = [1,3,5,7,9]
for (var i in array) {
alert(array[i])
}
(...)
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
49. Estruturas
for/each/in
> var obj = { a: 1, b: 3, c: 5 }
> obj.a
1
> for(p in obj) {
alert(p + ": " + obj[p])
}
> for each (v in obj) {
alert(v) // v aqui igual ao obj[p] acima
}
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
51. Estruturas
switch/case
var a = "alexandre";
switch (a) {
case "sebastiao":
alert("TiĆ£o?");
break;
case "raimunda":
alert("Raimundinha?");
break;
case "alexandre":
alert("AlĆŖ!");
break;
}
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
52. ā ECMAScript is object-based: basic
language and host facilities are provided by
objects, and an ECMAScript program is a
cluster of communicating objects.
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
53. Numa aplicaĆ§Ć£o Javascript, coexistirĆ£o
3 grupos de objetos
objetos deļ¬nidos pela objetos deļ¬nidos pelo objetos deļ¬nidos pelo
especiļ¬caĆ§Ć£o web browser desenvolvedor
ECMAScript
Boolean window alexandre
Number document mensagem
String XMLHttpRequest ...
Array ...
...
54. ā An ECMAScript object is a
collection of properties
each with zero or more attributes
that determine how each property can be used
alexandre
nome: āAlexandreā
sobrenome: āGomesā
idade: 34
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
55. ā An ECMAScript object is a
collection of properties
each with zero or more attributes
that determine how each property can be used
alexandre
nome: āAlexandreā
sobrenome: āGomesā
idade: 34
modiļ¬cĆ”vel: false
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
57. ā Properties are containers (slots) that hold
other objects, primitive values, or
functions.
alexandre
nome: āAlexandreā
nascimento: new Date(1977,8,8,0,0,0,0)
idade: function() { ... }
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
58. ā ECMAScript deļ¬nes a
collection of built-in objects
Function, Array, String, Boolean, Number, Math, Date, RegExp, JSON
Error, EvalError, RangeError, ReferenceError,
SyntaxError, TypeError e URIError
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
59. > var x = "Alexandre";
> x.length
String
9
> x.charAt(5);
"n"
> x + " Gomes"
"Alexandre Gomes"
> x.replace("dre", "dro");
"Alexandro"
> x.big()
"<big>Alexandre</big>"
> x.link("http://alegom.es")
"<a href="http://alegom.es">Alexandre</a>"
60. Boolean
>>> var x = true;
>>> if(x) { alert('yes'); } else { alert('no') } // yes
>>> !x
false
>>> x & false
0
>>> x && false
false
>>> x | false
1
>>> x || false
true
>>> var x = false;
>>> if(x) { alert('yes'); } else { alert('no') } // no
61. Number
>>> var x = 10
>>> var y = 15;
>>> z = x + y
25
>>> z.toFixed(2);
"25.00"
>>> z.toExponential(2);
"2.50e+1"
>>> 2.toExponential(2);
SyntaxError: identifier starts immediately
after numeric literal
63. >>> var x = new Date(); Date
>>> x.toString();
"Sun Apr 03 2011 12:20:42 GMT-0300 (BRT)"
>>> x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();
"12:20:42"
>>> x.getDate() + "/" + x.getMonth() + "/" + x.getFullYear();
"3/3/2011"
>>> var x = new Date("5/18/2006");
>>> x.toString();
"Thu May 18 2006 00:00:00 GMT-0300 (BRT)"
>>> var x = new Date("2006-5-18");
>>> x.toString();
"Invalid Date"
>>> var x = Date(2006,5,18,10,11,12,13);
>>> x.toString();
"Sun Jun 18 2006 10:11:12 GMT-0300 (BRT)"
64. >>> var x = new Date();
>>> x.toString();
Date
"Sun Apr 03 2011 12:20:42 GMT-0300 (BRT)"
>>> x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();
"12:20:42"
>>> x.getDate() + "/" + x.getMonth() + "/" + x.getFullYear();
"3/3/2011"
>>> var x = new Date("5/18/2006");
>>> x.toString();
"Thu May 18 2006 00:00:00 GMT-0300 (BRT)"
>>> var x = new Date("2006-5-18");
>>> x.toString();
"Invalid Date"
>>> var x = Date(2006,5,18,10,11,12,13);
>>> x.toString();
"Sun Jun 18 2006 10:11:12 GMT-0300 (BRT)"
65. >>> var texto = "O gato roeu a roupa do rei de roma";
>>> var regex = new RegExp("gato", āā);
>>> texto.match(regex);
["gato"]
Regex
>>> regex.exec(texto);
["gato"]
>>> texto.match(/gato/);
["gato"]
>>> texto.match(/O gato/);
["O gato"]
>>> texto.match(/o gato/);
null
>>> texto.match(/o gato/i);
["O gato"]
>>> texto.match(/o gato.*/i);
["O gato roeu a roupa do rei de roma"]
78. ā apesar de ser OO,
ECMAScript does not use
classes such as those in C+
+, Smalltalk, or Java.
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
79. āClassfulā āClasslessā
reuso por heranƧa de reuso por clonagem
classes de objetos
Pessoa joao
nome nome: āJoĆ£oā
sexo idade: 28
<<herda>> <<clona>>
FuncionƔri maria
o
salĆ”rio nome: āMariaā
idade: 20
80. āClassfulā āClasslessā
modelagem modelagem
top-down bottom-up
primeiro a taxonomia e primeiro o
seus relacionamentos... comportamento...
81. āClassfulā āClasslessā
objetos criados a objetos criados a
partir de classes partir de clonagem...
hoje = new Date() hoje = new Date()
...ou por āgeraĆ§Ć£o
expontĆ¢neaā
var x = {
one: 1,
two: 2
}
82. āClassfulā āClasslessā
objetos carregam a objetos carregam as
estrutura e o caracterĆsticas de
comportamento
de sua classe seu protĆ³tipo
86. ProgramaĆ§Ć£o baseada em
protĆ³tipos
>>> var conta = { saldo: 1000.00 };
>>> conta.saldo
1000
>>> conta.limite
undefined
>>> var conta_especial = { limite: 500.00 }
>>> conta_especial.limite
500
>>> conta_especial.saldo
undefined
>>> conta_especial.__proto__ = conta // referĆŖncia explĆcita
Object { saldo=1000}
>>> conta_especial.saldo
1000
87. HeranƧa baseada em
protĆ³tipos
> var conta = function(saldo) {
this.saldo = saldo;
this.ver_saldo = function() {
alert('saldo = ' + this.saldo)
}
}
> c1 = new conta(1000)
> c1.ver_saldo()
> var conta_especial = function(saldo, limite) {
this.inheritFrom = conta;
this.inheritFrom();
this.saldo = saldo;
this.limite = limite;
}
> c2 = new conta_especial(2000,3000)
> c2.ver_saldo()
88. ā objects may be created in
various ways including
via a literal notation
var conta = { saldo: 1000.00 }
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
89. ā objects may be created in
various ways including
via a literal notation
var conta = { saldo: 1000.00 }
or via constructors
hoje = new Date()
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
90. ā Each constructor
is a function
hoje = new Date()
function Date() {
...
}
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
94. ā Each constructor is a
function that has a property
named āprototypeā that
is used to implement
prototype-based inheritance
and shared properties.
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
95. ā Each constructor is a function that has a
property named āprototypeā(...)
Date()
<<construtor
prototype
ProtĆ³tipo
do Date()
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
97. ā Every object created by a constructor
Date()
<<construtor hoje = new Date() hoje
prototype
ProtĆ³tipo
do Date()
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
98. ā Every object created by a constructor
has an implicit reference (called the objectās prototype)
Date()
<<construtor hoje = new Date() hoje
prototype prototype
ProtĆ³tipo
do Date()
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
99. ā Every object created by a constructor
has an implicit reference (called the objectās prototype)
to the value of its constructorās āprototypeā property.
Date()
<<construtor hoje = new Date() hoje
prototype prototype
ProtĆ³tipo
do Date()
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
100. ā Furthermore, a prototype may have a
non-null implicit reference to its
prototype, and so on; this is called the
prototype chain.
Date()
<<construtor
ProtĆ³tipo
do Date()
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
101. ā Furthermore, a prototype may have a
non-null implicit reference to its
prototype, and so on; this is called the
prototype chain.
Date()
<<construtor ProtĆ³tipo do
protĆ³tipo do
Date()
ProtĆ³tipo do
ProtĆ³tipo protĆ³tipo do
do Date() protĆ³tipo do
Date()
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
102. ā When a reference is made to a property in
an object, that reference is to the
property of that name in the ļ¬rst object
in the prototype chain that contains a
property of that name.
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
103. ā When a reference is made to a property in
an object, that reference is to the
property of that name in the ļ¬rst object
in the prototype chain that contains a
property of that name.
obj
p3:
p1: āumā ātresā
p2: p4:
ādoisā āquatroā
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
104. ā When a reference is made to a property in
an object, that reference is to the
property of that name in the ļ¬rst object
in the prototype chain that contains a
property of that name.
obj obj.p1
p3:
p1: āumā ātresā
p2: p4:
ādoisā āquatroā
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
105. ā When a reference is made to a property in
an object, that reference is to the
property of that name in the ļ¬rst object
in the prototype chain that contains a
property of that name.
obj obj.p1
p3:
p1: āumā ātresā obj.p2
p2: p4:
ādoisā āquatroā
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
106. ā When a reference is made to a property in
an object, that reference is to the
property of that name in the ļ¬rst object
in the prototype chain that contains a
property of that name.
obj obj.p1
p3:
p1: āumā ātresā obj.p2
obj.p3
p2: p4:
ādoisā āquatroā
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
107. ā When a reference is made to a property in
an object, that reference is to the
property of that name in the ļ¬rst object
in the prototype chain that contains a
property of that name.
obj obj.p1
p3:
p1: āumā ātresā obj.p2
obj.p3
p2: p4:
obj.p4
ādoisā āquatroā
ECMAScript Language Speciļ¬cation
5th edition (December 2009)
108. > var Pessoa = function(nome, idade) {
this.nome = nome;
this.idade = idade;
}
> var alexandre = new Pessoa('Ale', 33);
> alexandre.nome
"Ale"
> alexandre.idade
33
> var sebastiana = new Pessoa('Sebastiana', 88);
> sebastiana.nome
"Sebastiana"
> sebastiana.idade
88
109. > var Pessoa = function(nome, idade) {
this.nome = nome;
this.idade = idade;
} construtor
> var alexandre = new Pessoa('Ale', 33);
> alexandre.nome
"Ale"
> alexandre.idade
33
> var sebastiana = new Pessoa('Sebastiana', 88);
> sebastiana.nome
"Sebastiana"
> sebastiana.idade
88
110. > var Pessoa = function(nome, idade) {
this.nome = nome;
this.idade = idade;
}
> var alexandre = new Pessoa('Ale', 33);
> alexandre.nome
"Ale"
> alexandre.idade
33 objeto 1
> var sebastiana = new Pessoa('Sebastiana', 88);
> sebastiana.nome
"Sebastiana"
> sebastiana.idade
88
111. > var Pessoa = function(nome, idade) {
this.nome = nome;
this.idade = idade;
}
> var alexandre = new Pessoa('Ale', 33);
> alexandre.nome
"Ale"
> alexandre.idade
33
> var sebastiana = new Pessoa('Sebastiana', 88);
> sebastiana.nome
"Sebastiana"
> sebastiana.idade
88 objeto 2
163. Node's goal is to provide an
easy way to build scalable
network programs.
http://nodejs.org/
164.
165.
166.
167.
168. Backbone supplies structure to JavaScript-heavy
applications by providing models with key-value
binding and custom events, collections with a rich
API of enumerable functions, views with declarative
event handling, and connects it all to your existing
application over a RESTful JSON interface.
http://documentcloud.github.com/backbone/
169. CoffeeScript is a little language
that compiles into JavaScript. (...)
CoffeeScript is an attempt to
expose the good parts of
JavaScript in a simple way.
http://jashkenas.github.com/coffee-script/