Javascript do jeito certo
-
Upload
alexandre-gomes -
Category
Technology
-
view
140 -
download
0
Transcript of Javascript do jeito certo
![Page 1: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/1.jpg)
do jeito certoJavascript
Alexandre Gomes
![Page 2: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/2.jpg)
javascripta que te remete o termo?
![Page 3: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/3.jpg)
<form> <input type=button value="Close Window" onClick="javascript:window.close();"> </form>
![Page 4: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/4.jpg)
<script> function open_window(url) { mywin = window.open(url,"win",...); } </script>
<body> <a href = "javascript:open_window('page1.html')"> <img src ="image.gif"> </a> <a href = "javascript:open_window('page2.html')"> <img src ="image.gif"> </a> </body>
![Page 5: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/5.jpg)
function validateForm() { var x = document.forms["myForm"]["fname"].value if (x == null || x == "") { alert("Nome obrigatório!"); return false; } }
![Page 6: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/6.jpg)
para a grande maioria,
javascript = magia negra
![Page 7: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/7.jpg)
![Page 8: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/8.jpg)
![Page 9: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/9.jpg)
Javascript
![Page 10: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/10.jpg)
![Page 11: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/11.jpg)
https://github.com/blog/2047-language-trends-on-github
![Page 12: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/12.jpg)
![Page 13: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/13.jpg)
![Page 14: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/14.jpg)
javascriptAfinal,
é do mal ou do bem?
![Page 15: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/15.jpg)
![Page 16: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/16.jpg)
![Page 17: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/17.jpg)
ECMAScript is an object-oriented programming
language for performing computations and manipulating
computational objects within a host environment.
“
ECMAScript Language Specification 6th edition (June 2015)
![Page 18: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/18.jpg)
ECMAScript as defined here is not intended to be
computationally self-sufficient; indeed, there are no provisions in
this specification for input of external data or output of
computed results.
“
ECMAScript Language Specification 6th edition (June 2015)
![Page 19: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/19.jpg)
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 specification but also certain
environment-specific host objects
“
ECMAScript Language Specification 6th edition (June 2015)
![Page 20: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/20.jpg)
ECMAScript was originally designed to be used as a scripting language, but has become widely
used as a general purpose programming language.
“
ECMAScript Language Specification 6th edition (June 2015)
![Page 21: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/21.jpg)
Some of the facilities of ECMAScript are similar to those
used in other programming languages; in particular JavaTM,
Self, and Scheme
“
ECMAScript Language Specification 6th edition (June 2015)
![Page 22: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/22.jpg)
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 Specification 6th edition (June 2015)
![Page 23: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/23.jpg)
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 Specification 6th edition (June 2015)
![Page 24: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/24.jpg)
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 Specification 6th edition (June 2015)
![Page 25: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/25.jpg)
A web server provides a different host environment for server-side computation including objects
representing requests, clients, and files; and mechanisms to lock and
share data.
“
ECMAScript Language Specification 6th edition (June 2015)
![Page 26: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/26.jpg)
Each Web browser and server that supports ECMAScript supplies its own host environment, completing the ECMAScript
execution environment.
“
ECMAScript Language Specification 6th edition (June 2015)
![Page 27: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/27.jpg)
ECMAScript is an object-oriented programming language
(...)
“Operadores
Tipos
Comentários
Estruturas
Boolean, Number, String, Array, RegExp
+ - * / >> << >>> < > <= >= | & *= ^ ++
// /* */
do while for if else try catch switch
ECMAScript Language Specification 6th edition (June 2015)
![Page 28: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/28.jpg)
Tipos
Boolean
Number
String
Array
Object
Function
RegExp
Date
(construtores)
![Page 29: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/29.jpg)
var x;alert(x);
Tiposundefined
ECMAScript Language Specification 6th edition (June 2015)
![Page 30: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/30.jpg)
var x = null;alert(x);
Tiposnull
ECMAScript Language Specification 6th edition (June 2015)
![Page 31: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/31.jpg)
var x = true;if(x) { alert('Verdadeiro');}
Obs: 0 e null equivalem a false
TiposBoolean
ECMAScript Language Specification 6th edition (June 2015)
![Page 32: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/32.jpg)
var x = 10;var y = 15;alert(x+y);
var x = 10.1;var y = 15.2;alert(x+y);
TiposNumber
ECMAScript Language Specification 6th edition (June 2015)
![Page 33: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/33.jpg)
var x = “Alexandre”;alert(x);
TiposString
ECMAScript Language Specification 6th edition (June 2015)
![Page 34: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/34.jpg)
var x = function() { alert("Alexandre"); };x();
TiposFunction
ECMAScript Language Specification 6th edition (June 2015)
![Page 35: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/35.jpg)
> 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()
![Page 36: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/36.jpg)
var x = new Number(10);var y = new Number(15);alert(x+y);
var x = new Boolean(true);if(x) { alert('Verdadeiro'); }
var x = new String(“Alexandre”);alert(x);
![Page 37: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/37.jpg)
Operadores
delete
void
typeof
++
--
+
-
~
!
*
/
%
>>
<<
>>>
<
>
<=
>=
instanceof
in
==
!=
===
!==
&
^
|
&&
||
<<=>>=
? :
=
*=
/=
%=
+=
-=
>>>=
&=
ˆ=
|=
![Page 38: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/38.jpg)
Operadores
ECMAScript Language Specification 5th edition (December 2009)
var a = 1 undefined a 1 delete a true a ReferenceError: a is not defined
delete
![Page 39: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/39.jpg)
Operadores
ECMAScript Language Specification 5th edition (December 2009)
typeof 1 "number" typeof true "boolean" typeof "Alexandre" "string" typeof function() { alert('Oi') } "function" typeof null "object"
typeof
![Page 40: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/40.jpg)
Operadores
ECMAScript Language Specification 5th edition (December 2009)
var a = 1 undefined a++ 1 a 2 ++a 3
++ e --
![Page 41: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/41.jpg)
Operadores
ECMAScript Language Specification 5th edition (December 2009)
var a = "alexandre" undefined a instanceof String false var a = new String("alexandre") undefined a instanceof String true a instanceof Object true
instanceof
http://mzl.la/PqqTMy
![Page 42: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/42.jpg)
Operadores
ECMAScript Language Specification 5th edition (December 2009)
3 == "3" true 3 === "3" false
2 != "2" false 2 !== "2" true
==, !=, ===, !==
![Page 43: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/43.jpg)
Estruturas
if/else
do/while
while
for
for/in
continue
break
return
with
switch
throw
try/catch
debugger
![Page 44: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/44.jpg)
Estruturas
ECMAScript Language Specification 5th edition (December 2009)
var a = true
if (a) { alert('Verdadeiro') } else { alert('Falso') }
if/else
![Page 45: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/45.jpg)
Estruturas
ECMAScript Language Specification 5th edition (December 2009)
var i = 1 do { alert(i); i++; } while (i < 5)
do/while
(...)
![Page 46: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/46.jpg)
Estruturas
ECMAScript Language Specification 5th edition (December 2009)
for ( var i = 1; i < 5; i++) { alert(i); }
for
(...)
![Page 47: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/47.jpg)
Estruturas
ECMAScript Language Specification 5th edition (December 2009)
var array = [1,3,5,7,9]
for (var i in array) { alert(array[i]) }
for/in
(...)
![Page 48: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/48.jpg)
Estruturas
ECMAScript Language Specification 5th edition (December 2009)
> 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 }
for/each/in
![Page 49: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/49.jpg)
Estruturas
ECMAScript Language Specification 5th edition (December 2009)
var obj = { a: 1, b: 3, c: 5 }
alert(obj.a); // 1 alert(obj.b); // 3 alert(obj.c); // 5
with(obj) { alert(a); // 1 alert(b); // 3 alert(c); // 5 }
with
![Page 50: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/50.jpg)
Estruturas
ECMAScript Language Specification 5th edition (December 2009)
var a = "alexandre";
switch (a) {
case "sebastiao": alert("Tião?"); break;
case "raimunda": alert("Raimundinha?"); break;
case "alexandre": alert("Alê!"); break; }
switch/case
![Page 51: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/51.jpg)
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 Specification 5th edition (December 2009)
![Page 52: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/52.jpg)
Numa aplicação Javascript, coexistirão
3 grupos de objetos
especificação ECMAScript
objetos definidos pela
Boolean
Number
String
Array...
desenvolvedorobjetos definidos pelo
alexandre
mensagem
...
web browserobjetos definidos pelo
window
document
...
XMLHttpRequest
![Page 53: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/53.jpg)
An ECMAScript object is a collection of properties
each with zero or more attributes that determine how each property can be used
“
ECMAScript Language Specification 5th edition (December 2009)
alexandre
nome: “Alexandre”sobrenome: “Gomes”idade: 34
modificável: false
![Page 54: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/54.jpg)
> var ale = new Object()
> ale.nome = "Alexandre Gomes" "Alexandre Gomes" > ale.nascimento = new Date(1977,8,8) Thu Sep 08 1977 00:00:00 GMT-0300 (BRT)
> ale.nome "Alexandre Gomes" > ale.nascimento Thu Sep 08 1977 00:00:00 GMT-0300 (BRT)
> ale[‘nome’] "Alexandre Gomes" > ale[‘nascimento’] Thu Sep 08 1977 00:00:00 GMT-0300 (BRT)
![Page 55: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/55.jpg)
Properties are containers (slots) that hold other objects, primitive values, or functions. “
ECMAScript Language Specification 5th edition (December 2009)
alexandre
nome: “Alexandre”
idade: function() { ... }
nascimento: new Date(1977,8,8,0,0,0,0)
![Page 56: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/56.jpg)
ECMAScript defines 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 Specification 5th edition (December 2009)
![Page 57: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/57.jpg)
> var x = "Alexandre";> x.length9
> 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>"
String
![Page 58: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/58.jpg)
>>> var x = true;>>> if(x) { alert('yes'); } else { alert('no') } // yes
>>> !xfalse
>>> x & false0>>> x && falsefalse>>> x | false1>>> x || falsetrue
>>> var x = false;>>> if(x) { alert('yes'); } else { alert('no') } // no
Boolean
![Page 59: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/59.jpg)
>>> var x = 10>>> var y = 15;>>> z = x + y25
>>> z.toFixed(2);"25.00"
>>> z.toExponential(2);"2.50e+1"
>>> 2.toExponential(2);SyntaxError: identifier starts immediately after numeric literal
Number
![Page 60: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/60.jpg)
>>> Math.PI3.141592653589793
>>> Math.sqrt(81);9
>>> Math.tan(45);1.6197751905438615
>>> Math.pow(3,2);9
>>> Math.random();0.8528815588353642>>> Math.random();0.955940929887219
Math
![Page 61: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/61.jpg)
>>> var x = new 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)"
Date
![Page 62: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/62.jpg)
>>> var x = new 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)"
Date
![Page 63: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/63.jpg)
>>> var texto = "O gato roeu a roupa do rei de roma";>>> var regex = new RegExp("gato", “”);
>>> texto.match(regex);["gato"]>>> 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"]
Regex
![Page 64: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/64.jpg)
>>> var obj = { "nome": "Alexandre", "idade" : "33" }>>> obj.constructor;Object()>>> obj.nome"Alexandre">>> obj.idade"33"
>>> var msg = JSON.stringify(obj);>>> msg.constructor;String()>>> msg"{"nome":"Alexandre","idade":"33"}"
>>> var msg = '{ "nome": "Alexandre", "idade" : "33" }'"{ "nome": "Alexandre", "idade" : "33" }">>> msg.constructor;String()>>> msg.nome;undefined
>>> obj = JSON.parse(msg);Object { nome="Alexandre", idade="33"}>>> obj.constructor;Object()>>> obj.nome;"Alexandre"
JSON
![Page 65: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/65.jpg)
var x = new Array();>>> []
x[0] = "laranja">>> ["laranja"]
x[2] = "maçã">>> ["laranja", undefined, "maçã"]
x.length>>> 3
x.sort();>>> ["laranja", "maçã", undefined]
x.reverse();>>> [undefined, "maçã", "laranja"]
x = ["pera", "uva", new Date()]x.toString();>>> "pera,uva,Sun Apr 03 2011 11:53:18 GMT-0300 (BRT)"
Array
![Page 66: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/66.jpg)
A web browser provides an ECMAScript host environment
(...)
“
![Page 67: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/67.jpg)
> document.body 1.<body id="docs" class="section-docs en ltr yui-skin-sam
PageDW-enDOMdocument js" role="document">…</body>
> document.domain "developer.mozilla.org"
> document.links [ <a href="#content-main">Skip to the main content</a>,
<a href="#q">Skip to the site search</a>, <a href="/">…</a>, <a href="/index.php?" class="user-login">Log in</a>, <a href="/docs">Doc Center</a>, …
![Page 68: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/68.jpg)
![Page 69: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/69.jpg)
![Page 70: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/70.jpg)
Gecko Webkit{ {
![Page 71: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/71.jpg)
![Page 72: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/72.jpg)
![Page 73: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/73.jpg)
e agora, prendam a respiração...
![Page 74: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/74.jpg)
REVISÃO
![Page 75: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/75.jpg)
An ECMAScript object is a collection of properties
each with zero or more attributes that determine how each property can be used
“
ECMAScript Language Specification 5th edition (December 2009)
alexandre
nome: “Alexandre Gomes”idade: 34
modificável: false
andar: function() { ... }
![Page 76: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/76.jpg)
alexandre
nome: String()idade: Number()
modificável: Boolean()
andar: Function()
![Page 77: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/77.jpg)
alexandre
nome: Object()idade: Object()
modificável: Object()
andar: Object()
![Page 78: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/78.jpg)
alexandre
nomeidade
modificável
andar
String()
Number()
Boolean()
Function()
![Page 79: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/79.jpg)
ECMAScript does not use classes such as those in C++,
Smalltalk, or Java.
“
ECMAScript Language Specification 5th edition (December 2009)
apesar de ser OO,
![Page 80: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/80.jpg)
“Classful” “Classless”reuso por herança
de classesreuso por clonagem
de objetos
Pessoa
nomesexo
Funcionário
salário
joao
nome: “João”idade: 28
maria
nome: “Maria”idade: 20
<<herda>> <<clona>>
![Page 81: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/81.jpg)
“Classful” “Classless”modelagem
top-downmodelagem bottom-up
primeiro a taxonomia e seus relacionamentos...
primeiro o comportamento...
![Page 82: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/82.jpg)
“Classful” “Classless”
objetos criados a partir de classes
objetos criados a partir de clonagem...
...ou por ‘geração expontânea’
hoje = new Date() hoje = new Date()
var x = { one: 1, two: 2}
![Page 83: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/83.jpg)
“Classful” “Classless”
objetos carregam a estrutura e o
comportamento de sua classe
objetos carregam as características de seu
protótipo
![Page 84: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/84.jpg)
Programação baseada em
protótipos
protótipo clone
![Page 85: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/85.jpg)
Programação baseada em
protótipos>>> var conta = { saldo: 1000.00 };>>> conta.saldo1000>>> conta.limiteundefined
>>> var conta_especial = { limite: 500.00 }>>> conta_especial.limite500>>> conta_especial.saldoundefined
>>> conta_especial.__proto__ = conta // referência explícitaObject { saldo=1000}>>> conta_especial.saldo1000
![Page 86: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/86.jpg)
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()
![Page 87: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/87.jpg)
objects may be created in various ways including
via a literal notation
“
ECMAScript Language Specification 5th edition (December 2009)
hoje = new Date()
var conta = { saldo: 1000.00 }
or via constructors
![Page 88: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/88.jpg)
Each constructor is a function
“
ECMAScript Language Specification 5th edition (December 2009)
hoje = new Date()
function Date() {...}
![Page 89: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/89.jpg)
function é também um objeto
var Date = function() {...}
mas
Date()
hoje = new Date()
![Page 90: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/90.jpg)
construtor
Date()function
objeto
propriedades
![Page 91: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/91.jpg)
Each constructor is a function that has a property
named “prototype” that is used to implement
prototype-based inheritance and shared properties.
“
ECMAScript Language Specification 5th edition (December 2009)
![Page 92: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/92.jpg)
Each constructor is a function that has a property named “prototype”(...)“
ECMAScript Language Specification 5th edition (December 2009)
Date()
prototype
Protótipo do Date()
<<construtor>>
![Page 93: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/93.jpg)
Every object created by a constructor“
ECMAScript Language Specification 5th edition (December 2009)
Date()
prototype
hoje = new Date() hojeprototype
Protótipo do Date()
<<construtor>>
has an implicit reference (called the object’s prototype) to the value of its constructor’s “prototype” property.
![Page 94: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/94.jpg)
Furthermore, a prototype may have a non-null implicit reference to its prototype,
and so on; this is called the prototype chain.
“
ECMAScript Language Specification 5th edition (December 2009)
Date()
Protótipo do Date()
<<construtor>> Protótipo do protótipo do
Date()
Protótipo do protótipo do protótipo do
Date()
![Page 95: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/95.jpg)
When a reference is made to a property in an object, that reference is to the
property of that name in the first object in the prototype chain that contains a
property of that name.
“
ECMAScript Language Specification 5th edition (December 2009)
obj
p2: “dois”
p3: “tres”
p4: “quatro”
p1: “um”
obj.p1obj.p2obj.p3obj.p4
![Page 96: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/96.jpg)
> var Pessoa = function(nome, idade) { this.nome = nome; this.idade = idade; }
> var alexandre = new Pessoa('Ale', 33);> alexandre.nome"Ale"> alexandre.idade33
> var sebastiana = new Pessoa('Sebastiana', 88);> sebastiana.nome"Sebastiana"> sebastiana.idade88
construtor
objeto 1
objeto 2
![Page 97: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/97.jpg)
Protótipo do Pessoa()
Pessoa()<<construtor>>
nomeidade
> alexandre.sexo
undefined ?> sebastiana.sexo
undefined ?alexandre sebastiana
nome = ‘Ale’
idade = 33nome = ‘Seb...’
idade = 88
> alexandre.nome
“Ale” ?> sebastiana.idade
88 ?
![Page 98: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/98.jpg)
Protótipo
Pessoa()<<construtor>>
nomeidade
> alexandre.sexo
“M”
> sebastiana.sexo
“M”
alexandre sebastiana
nome = ‘Ale’
idade = 33nome = ‘Seb...’
idade = 88
> Pessoa.prototype.sexo = “M”
> sebastiana.sexo = “F”
> sebastiana.sexo
“F”
sexo = ‘M’
![Page 99: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/99.jpg)
Object Prototipo de Object
pO = 1
Object.prototype.pO = 1
![Page 100: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/100.jpg)
A
a = 2
Prototipo de A
pA = 3
var A = function() { this.a = 2; }A.prototype.pA = 3
Object Prototipo de Object
pO = 1
![Page 101: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/101.jpg)
new A()
A
a = 2
Prototipo de A
pA = 3
var B = function() { this.b = 4; }
Object Prototipo de Object
pO = 1
B
b = 4
Prototipo de B
pB = 5
B.prototype = new AB.prototype.pB = 5
a = 2
![Page 102: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/102.jpg)
A
a = 2
Prototipo de A
pA = 3
Object Prototipo de Object
pO = 1
B
b = 4pB = 5
x = new B()
new A() X
a = 2
![Page 103: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/103.jpg)
A
a = 2
Prototipo de A
pA = 3
Object Prototipo de Object
pO = 1
B
b = 4pB = 5
new A() X
x.pB?a = 2
![Page 104: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/104.jpg)
A
a = 2
Prototipo de A
pA = 3
Object Prototipo de Object
pO = 1
B
b = 4pB = 5
new A() X
x.b?a = 2
![Page 105: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/105.jpg)
A
a = 2
Prototipo de A
pA = 3
Object Prototipo de Object
pO = 1
B
b = 4pB = 5
new A() X
x.pA?a = 2
![Page 106: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/106.jpg)
A
a = 2
Prototipo de A
pA = 3
Object Prototipo de Object
pO = 1
B
b = 4pB = 5
new A() X
x.a?a = 2
![Page 107: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/107.jpg)
A
a = 2
Prototipo de A
pA = 3
Object Prototipo de Object
pO = 1
B
b = 4pB = 5
new A() X
x.pO?a = 2
![Page 108: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/108.jpg)
@see
https://developer.mozilla.org/en/JavaScript/Reference
http://www.w3schools.com/js/default.asp
https://developer.mozilla.org/en/Gecko_DOM_Reference
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/WebKitDOMRef/index.html
![Page 109: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/109.jpg)
o que tem sido feito com
javascript?
![Page 111: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/111.jpg)
![Page 112: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/112.jpg)
![Page 113: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/113.jpg)
![Page 114: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/114.jpg)
• Ajax • Animation and Effects • Browser Tweaks • Data • DOM • Drag-and-Drop • Events • Forms • Integration • JavaScript • jQuery Extensions
• Layout • Media • Menus • Metaplugin • Navigation • Tables • User Interface • Utilities • Widgets • Windows and Overlays
http://plugins.jquery.com/
![Page 116: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/116.jpg)
![Page 117: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/117.jpg)
Node's goal is to provide an easy way to build scalable
network programs.
http://nodejs.org/
![Page 118: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/118.jpg)
![Page 119: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/119.jpg)
http://documentcloud.github.com/backbone/
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.
![Page 120: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/120.jpg)
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/
![Page 121: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/121.jpg)
if (opposite) { number = -42;}
number = -42 if opposite
![Page 122: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/122.jpg)
square = function(x) { return x * x;};
square = (x) -> x * x
![Page 123: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/123.jpg)
cubes = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = list.length; _i < _len; _i++) { num = list[_i]; _results.push(math.cube(num)); } return _results;})();
cubes = (math.cube num for num in list)
![Page 125: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/125.jpg)
P&Raprender.unb.br
![Page 126: Javascript do jeito certo](https://reader034.fdocuments.in/reader034/viewer/2022052606/5889f8c51a28ab0f388b500b/html5/thumbnails/126.jpg)