2. Algumas Ferramentas “Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page!” http://getfirebug.com
3. O que é Javascript Uma linguagem de script (leve) Normalmente escrita direto em páginas HTML Interpretada Desenvolvida para adicionar interatividade em páginas HTML Validação, comportamento Grátis, livre de licensa
4. Javascript é bem mais que validação A linguagem do browser Todas as aplicações web usam!
16. Tipos Primitivos: boolean Tudo é true em javascript, exceto seis valores: var b31 = ""; var b32 = null; var b33 = false; var b34 = NaN; var b35 = undefined; var b36 = 0; If ( !b31 ){ //executa }
17. Tipos Primitivos: boolean Alguns operadores de comparação != Diferente:true se os operandos não forem iguais == Comparador de igualdade:true se ambos os operandos forem iguais. Converte para o mesmo tipo antes da comparacao !== Diferente sem conversão de tipo: true se os operandos não forem iguais OU não forem do mesmo tipo === Comparador de igualdade e tipo:true se os operandos forem iguais e do mesmo tipo
18. Tipos Primitivos: boolean var b4 = 2!="2"; var b41 = 2=="2"; var b42 = 2!=="2"; var b43 = 2==="2"; >> false >> true >> true >> false
20. Tipos Primitivos: undefined var u1 = {}; typeof u1.campoinexistente u1. campoinexistente var u2 = 1 + undefined; u2 var u3 = 1 * undefined; u3 >> undefined >> undefined >> NaN >> NaN
21. Arrays var a = [1,2,3]; typeof a a a[0] a[5] a[5] = "some string"; a delete a[2]; a delete a[5]; a >> "object" >> [1,2,3] >> 1 >> undefined >> [1,2,3, undefined, undefined,"some string"] >> [1,2, undefined, undefined, undefined, "some string"] >> [1,2, undefined, undefined, undefined, undefined]
24. Funções Funções são, talvez a coisa mais importante em Javascript function sum(a,b) { return a + b; } var r1 = sum(1,1); >> 2
25. Funções: parâmetros Os parâmetros não passados são undefined Parâmetros a mais também podem ser passados function sum(a,b) { return a + b; } var r2 = sum(1); var r3 = sum(1,2,3,4,5); >> NaN{1 + undefined = NaN} >> 3
26. Funções: parâmetros argumentsé o array de parâmetros que a função recebe function sumAll() { var result = 0; for(vari=0,length=arguments.length;i<length;i++){ result+=arguments[i]; } return result; } var r4 = sumAll(1,2,3,4,5,6,7); r4 >> 28
27. Funções: notação literal Funções são como uma variável qualquer. var func3 = function(a,b) { return a*b; }; var f3 = func3; typeof func3 >> "function" typeof f3 >> "function" func3(2,2) >> 4 f3(3,3) >> 9
28. Funções: construtor padrão var func6 = new Function("a,b","returna+b;"); func6(2,2) >> 4 Não use! Tambémeviteeval() EvitepassarcódigoJavascriptcomouma string eval(“var a = 2"); ++a >> 3
29. Funções: callbacks function info(){ alert("funcao info“); } function execute(func) { func(); } execute(info);
30. Funções: funções anônimas Funções anônimas podem ser passadas como parâmetro E também podem ser definidas para executar imediatamente function execute(func) { func(); } execute(function() { alert("hello, anonimo!“); }); (function(a,b) { return a-b; })(5,3); >> "hello, anonimo“ >>2
31. Funções: innerfunctions Mantêm o global namespace limpo function funcTop() { var a = function() { alert("innerFunction: work..."); } alert("funcTop: work..."); a(); }
32. Funções: escopo Variáveis NÃO são definidas no escopo do bloco, e sim no ESCOPO DA FUNÇÃO. function func() { var a = "local"; if(true) { a var a2 = "local-if"; a2 } a a2 } >> "local" >> "local-if" >> "local" >> "local-if"
33. Funções: escopo var r5 = "global"; function func1() { alert(r5); var r5 = "local"; alert(r5); } func1(); r5 >> undefined r5 >> "local" var r5 = "global"; function func1() { out(r5); } func1(); r5 >> "global"
34. Funções: escopo léxico Funções tem escopo léxico: elas criam seu ambiente (escopo) quando são definidas, não quando são executadas. function func4() { var v = 1; return func5(); }; function func5() { return v; }; func4() >> ReferenceError: v is not defined function func41() { var v = 1; return (function() { return v; })(); }; func41(); >> 1
39. JS Objects: Date Para instanciar new Date() // current date and time new Date(milliseconds) //milliseconds since 1970/01/01 new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds) Podem ser comparadas com < e > Diversosmétodosparamanipulação setFullYear(), getMinutes()...
40. JS Objects: Math Para tarefas matemáticas round(), max(), min(), random() Algumas constantes Math.E, Math.PI, Math.SQRT2, Math.SQRT1_2, Math.LN2, Math.LN10, Math.LOG2E, Math.LOG10E
42. JS Objects: regexp Sintaxe var txt=new RegExp(pattern,modifiers); var txt=/pattern/modifiers; Modificadores i : case-sensitive g: global match, achatodos, nãoapenas a primeira m: multiline Usocomum String.match() varstr="Is this all there is?"; var patt1=/is/gi; Is this all there is?
43. JS Objects: global Define algumas constantes NaN e Infinity Algumas funções auxiliares escape(), unescape() isFinite(), isNaN() parseFloat(), parseInt()
45. Objects Objetos representam arrays associativos (hashes) Um objeto é um container de propriedades Não têm classe Mas pode haver herança! Podem ser aumentados a qualquer hora
47. Objects: Literais Propriedades podem ser qualquer valor, exceto undefined O nome de uma propriedade pode ser qualquer string, inclusive “” var empty_object = {}; var person = { "first-name": "Jerome", "last-name": "Howard" }; var flight = { airline: "Oceanic", number: 815, departure: { time: "2004-09-22 14:55", city: "Sydney" }, arrival: { time: "2004-09-23 10:42", city: "Los Angeles" } };
48. Objects: “namespaces” Boa prática para evitar conflitos var MYAPP = {}; MYAPP.person = { "first-name": "Joe", "last-name": "Howard" };
49. Objects: acesso [], como um array person["first-name"] Usando dot-notation flight.departure.city Propriedades inexistentes >> undefined || para definir valores default var status = flight.status || "unknown"; Acesso a um undefined lança TypeError flight.equipment // undefined flight.equipment.model // throw "TypeError"
51. Objects: referência Objetos sempre são passados por referencia var obj1 = { a:"val-a" }; var obj2 = obj1; obj1.a >> "val-a" obj2.a >> "val-a“ obj2.a = "val-a2“; obj1.a >> "val-a2" obj2.a >> "val-a2" var obj3 = { a:"val-a" }; obj1===obj2 >> true obj1===obj3 >> false var a = {}, b = {}, c = {}; //todos diferentes a = b = c = {}; //todos o mesmo objeto vazio
54. Objects: Construtor function Cat(/*String*/ name) { this.name = name; this.talk = function() { //... } } var cat2 = Cat("Barsik"); This faz referencia ao objeto global window Chamada sem new typeof cat2 >> undefined cat2.name >> TypeError: cat2 has no properties window.name >> "Barsik"
55. Objects: Construtor Quando um objeto é criado, a propriedade constructoré definida var cat = newCat("Barsik"); var constr = cat.constructor; var cat3 = cat.constructor("Murzik"); constr >> functionCat(name) { .... } cat3.talk() >> "I’mMurzik. Mrrr, miaow!"
56. Objects: call e apply Todo objeto tem dois métodos: call() e apply() var cat = newCat("Barsik"); //.. var cat4 = {name:"Agatha"}; cat.talk.call(cat4/**, param1, p2, ... **/) >> "I’m Agatha. Mrrr, miaow!" cat.talk.apply(cat4/**, [param1, p2, ...] **/) >> "I’m Agatha. Mrrr, miaow!"
57. Objects: instanceof Instanceof testa se o objeto foi criado com um constutor específico var cat = newCat("Barsik"); var o = {}; catinstanceofCat >> true catinstanceofObject >> true o instanceofObject >> true o instanceofCat >> false