Java Script



segunda-feira, 17 de agosto de 2009
Estrutura
               Comportamento
               Apresentação
               Conteúdo



                                      HTML    JavaScript



                                             CSS




segunda-feira, 17 de agosto de 2009
Aplicação
                     •       Rich and powerful web applications (Gmail)

                     •       Server-side code such as ASP using for example Rhino.

                     •       Rich media apps (Flash, Flex) using ActionScript (based on js).

                     •       Scripts that automate tasks on your Windows

                     •       Write extensions/plugins for apps like Firefox, Dreamweaver

                     •       Web applications that store information in an off-line
                             database on the user's desktop, using Google Gears

                     •       Create Yahoo! Widgets, Mac Dashboard widgets, or Adobe
                             Air applications that run on your desktop

segunda-feira, 17 de agosto de 2009
Programação Orientada
                       a Objetos
                     • Objetos, métodos, atributos
                     • Classes
                     • Encapsulamento
                     • Agregação / Composição
                     • Herança
                     • Polimorfismo
segunda-feira, 17 de agosto de 2009
Firebug Console




segunda-feira, 17 de agosto de 2009
Tipos Primitivos

                     • Number
                     • String
                     • Boolean
                     • Undefined
                     • Null

segunda-feira, 17 de agosto de 2009
O Operador Typeof

                        >>> n = 1234;
                        >>> typeof n;
                        "number"




segunda-feira, 17 de agosto de 2009
O Número Infinity


                                   É um número grande demais para o
                                 JavaScript gerenciar, ou seja um número
                                  maior que 1.7976931348623157e+308




segunda-feira, 17 de agosto de 2009
Arrays

                     • >>> var a = [1, 2, 3];
                     • >>> delete a[1];
                     • true
                     • >>> a
                     • [1, undefined, 3]

segunda-feira, 17 de agosto de 2009
Arrays de Arrays

                     • >>> var a = [[1,2,3],[4,5,6]];
                     • >>> a[2] = ‘bla’;
                     • >>> a;
                     • [[1, 2, 3], [4, 5, 6],‘bla’]

segunda-feira, 17 de agosto de 2009
For in Loops
                        >> var a = ['a', 'b', 'c', 'x', 'y', 'z'];
                        >> var result = 'n';
                        >> for (var i in a) {
                        >> result += 'index: ' + i + ', value: ' + a[i] + 'n';
                        >> }
                        index: 0, value: a
                        index: 1, value: b




segunda-feira, 17 de agosto de 2009
Functions
                        public void sum(a1, a2, a3) { ... };


                        sum (1, 2);


                        os parâmetros não passados tem valor
                        undefined


segunda-feira, 17 de agosto de 2009
Flexibilidade
                        >>> function args() { return arguments; }
                        >>> args();
                        []


                        >>> args( 1, 2, 3, 4, true, 'ninja');
                        [1, 2, 3, 4, true, 'ninja']


segunda-feira, 17 de agosto de 2009
Funcões Pré Definidas
segunda-feira, 17 de agosto de 2009
parseInt() e parseFloat()
segunda-feira, 17 de agosto de 2009
parseInt
                       parseInt('123') = 123        parseInt('0377', 8) = 255

                       parseInt('abc123') = NaN     parseInt('377') = 377

                       parseInt('1abc23') = 1       parseInt('0377') = 255

                       parseInt('FF', 10) = NaN     parseInt('0x377') = 887

                       parseInt('FF', 16) = 255

                       parseInt('0377', 10) = 377




segunda-feira, 17 de agosto de 2009
parseFloat
                       parseFloat('123') = 123           parseFloat('123e-2') = 1.23

                       parseFloat('1.23') = 1.23         parseFloat('123e2') = 12300

                       parseFloat('1.23abc.00') = 1.23   parseInt('1e10') = 1

                       parseFloat('a.bc1.23') = NaN

                       parseFloat('a123.34') = NaN

                       parseFloat('12a3.34') = 12




segunda-feira, 17 de agosto de 2009
isNaN() e isInfinity()
segunda-feira, 17 de agosto de 2009
isNaN
                        isNaN(NaN) = true
                        isNaN(123) = false
                        isNaN(1.23) = false
                        isNaN(parseInt('abc123')) = true
                        isNaN('1.23') = false
                        isNaN('a1.23') = true




segunda-feira, 17 de agosto de 2009
encodeURI() e decodeURI()
segunda-feira, 17 de agosto de 2009
encodeURIComponent() e
                                       decodeURIComponent()

segunda-feira, 17 de agosto de 2009
Enconding URIs

                        >>> var url = 'http://www.packtpub.com/scr ipt.php?q=this and that';

                        >>> encodeURI(url);

                        "http://www.packtpub.com/scr%20ipt.php?q=this%20and%20that"

                        >>> encodeURIComponent(url);

                        "http%3A%2F%2Fwww.packtpub.com%2Fscr%20ipt.php%3Fq%3Dthis%20and
                        %20that"




segunda-feira, 17 de agosto de 2009
eval()
segunda-feira, 17 de agosto de 2009
eval

                        >>> eval('var ii = 2;')
                        >>> ii
                        2




segunda-feira, 17 de agosto de 2009
Local e Global




                                Escopo de Variáveis
segunda-feira, 17 de agosto de 2009
Funções são dados
                        var x = function(){return 999;}


                        >>> function f(){return 1;}
                        >>> typeof f
                        function




segunda-feira, 17 de agosto de 2009
Functions are Data
                        >>> var sum = function(a, b) {return a + b;}
                        >>> var add = sum;
                        >>> delete sum;
                        >>> typeof sum;
                        "undefined"
                        >>> typeof add;
                        "function"
                        >>> add(1, 2);
                        3



segunda-feira, 17 de agosto de 2009
Callback Functions

                        Because a function is just like any
                        other data assigned to a variable, it
                        can be defined, deleted, copied, and
                        why not also passed as an
                        argument to other functions?


segunda-feira, 17 de agosto de 2009
Callback Functions
                        function invoke_and_add(a, b){

                            return a() + b();

                        }

                        function one() { return 1; }

                        function two() { return 2;}

                        >>> invoke_and_add(one, two);

                        3

                        >>> invoke_and_add(function(){return 1;}, function(){return 2;})

                        3




segunda-feira, 17 de agosto de 2009
Self-Invoking Functions
segunda-feira, 17 de agosto de 2009
Self-Invoking Functions
                       (                          (

                           function(){                function(name){

                               alert('Bolha!');           alert(name + '!');

                           }                          }

                       )();                       )('Bolha')




segunda-feira, 17 de agosto de 2009
Objetos
segunda-feira, 17 de agosto de 2009
Objetos (key/value)
                        var pessoa = {
                                      nome: 'Andre',
                                      profissao: 'Desenvolvedor'
                        };




segunda-feira, 17 de agosto de 2009
Objetos (key/value)
                        var o = {
                            something: 1,
                            'yes or no': 'yes',
                            '!@#$%^&*': true
                        };
                                                  it’s a valid object!


segunda-feira, 17 de agosto de 2009
Objetos (key/value)
                        var dog = {
                            name: 'Benji',
                            talk: function(){
                                alert('Woof, woof!');
                            }
                        };
                        >>> dog.talk();



segunda-feira, 17 de agosto de 2009
Propriedades
                       var pessoa = {          >>> pessoa.nome;

                          nome: 'Mario',       "Mario"

                          idade: '30'          >>> pessoa['idade'];

                       };                      "30"

                                               >>> pessoa.cor_do_cabelo

                                               undefined




segunda-feira, 17 de agosto de 2009
Objetos com Objetos
                       var livro = {

                          titulo 'A lagoa verde',

                          autor: {

                              nome: 'Joana',

                              sobre_nome: 'Silveira'

                          }

                       };




segunda-feira, 17 de agosto de 2009
Alterando Objetos
                       >>> var pessoa = {};      >>> delete pessoa.nome;

                       >>> pessoa.nome;          >>> pessoa.nome;

                       undefined                  undefined

                       >>> pessoa.nome = ‘Zé’;

                       >>> pessoa.nome;

                       ‘Zé’;




segunda-feira, 17 de agosto de 2009
This
                       var pessoa = {                   >>> pessoa.dizerNome();

                           nome: 'Wende',               ‘Wende’

                           dizerNome: function() {

                               return this.nome;

                           }

                       }




segunda-feira, 17 de agosto de 2009
Construtores
                       function pessoa() {

                           this.nome = 'Beatriz';

                       }

                       >>> var p = new Pessoa();

                       >>> p.nome;

                       ‘Beatriz’




segunda-feira, 17 de agosto de 2009
O Objeto Global
                       >>> var x = 10;         >>> window.x

                       >>> x;                  10

                       10



                       >>> window[‘x’];

                       10




segunda-feira, 17 de agosto de 2009
Cuidado!
                        >>> function Hero(name) {this.name = name;}

                        >>> var h = Hero('Leonardo');

                        >>> typeof h

                        "undefined"                             var h = new
                        >>> typeof h.name                    Hero('Leonardo')
                        h has no properties

                        >>> window.name + name

                        LeonardoLeonardo



segunda-feira, 17 de agosto de 2009
Global Functions


                        >>> window.parseInt('101 dalmatians')
                        101




segunda-feira, 17 de agosto de 2009
Constructor Reference

                        >>> var h3 = new h2.constructor('Mané');
                        >>> typeof o.constructor;
                        ‘function’




segunda-feira, 17 de agosto de 2009
O Operador instanceof
                        >>> function Hero(){}
                        >>> var h = new Hero();
                        >>> var o = {};
                        >>> h instanceof Hero;
                        true
                        >>> h instanceof Object;
                        false


segunda-feira, 17 de agosto de 2009
Built-in Objects
                     • Data wrapper Objects
                      • Object, Function, Array, Boolean, Number
                                      and String.
                     • Utility Objects
                      • Math, Date, RegExp
                     • Error Objects
segunda-feira, 17 de agosto de 2009
Object
                        >>> var o = {};
                        >>> var o = new Object();


                •       o.constructor - the construtor
                •       o.toString - A string that represent it.
                •       o.valueOf - A single value that represents it.


segunda-feira, 17 de agosto de 2009
Array
segunda-feira, 17 de agosto de 2009
Array
                       >>> var a = new                  >>> a.toString();
                       Array(1,2,3,'four');
                                                        "1,2,3,four"
                       >>> a;
                                                        >>> a.valueOf()
                       [1, 2, 3, "four"]
                                                        [1, 2, 3, "four"]
                       >>> var a2 = new Array(5);
                                                        >>> a.constructor
                       >>> a2;
                                                        Array()
                       [undefined, undefined, undefined,
                       undefined, undefined]




segunda-feira, 17 de agosto de 2009
Métodos e Atributos de
                       um Array
                     •      construtor   •   concat()

                     •      length       •   pop()

                     •      toString()   •   push()

                     •      valueOf()    •   reverse()

                     •      sort()       •   shift()

                     •      join()       •   splice()

                     •      slice()      •   unshift()



segunda-feira, 17 de agosto de 2009
Array Length
                        Alterando o atributo length de um array para menor
                        os elementos do final são removidos:
                        >>> a
                        [1, 2, 3, 4, 5, 6, 7]
                        >>> a.length = 2;
                        >>> a
                        [1, 2]



segunda-feira, 17 de agosto de 2009
métodos push e pop
                     •      >>> var a = [1,2,3];   •   >>> a.pop()

                     •      >>> a.push('new')      •   "new"

                     •      4                      •   >>> a

                     •      >>> a                  •   [1,2,3]

                     •      [1,2,3, "new"]




segunda-feira, 17 de agosto de 2009
sort
                     •      >>> a

                     •      [3, 5, 1, 7, "test"]

                     •      >>> a.sort;

                     •      [1, 3, 5, 7, "test"]




segunda-feira, 17 de agosto de 2009
join
                       >>> a

                       [1, 2, 3]

                       >>> a.join(' bla ');

                       "1 bla 2 bla 3 bla"




segunda-feira, 17 de agosto de 2009
slice
                       >>> matriz                   O método slice não
                                                    modifica o array original
                       [‘a’,’b’,’c’,’d’,’e’]        (matriz)!

                       >>> matriz.slice(0,1);       >>> matriz

                       a                            [‘a’,’b’,’c’,’d’,’e’]

                       >> matriz.slice(1,3);

                       ‘b’,’c’




segunda-feira, 17 de agosto de 2009
splice
                       >>> m1

                       [‘a’,’b’,’c’,’d’,’e’]

                       >>> m2 = m1.splice(1, 3)

                       [‘b’,’c’,’d’]

                       >>> m1

                       [‘a’,’e’]




segunda-feira, 17 de agosto de 2009
Function
segunda-feira, 17 de agosto de 2009
Function
                     •       >>> function sum(a, b) {return a + b;};

                     •       >>> sum(1, 2)

                     •       3

                     •       >>> var sum = function(a, b) {return a + b;};

                     •       >>> sum(1, 2)
                                                                                      eval
                     •       3

                     •       >>> var sum = new Function('a', 'b', 'return a + b;');

                     •       >>> sum(1, 2)

                     •       3




segunda-feira, 17 de agosto de 2009
Atributos e Propriedades
                         de um Function
                     •       constructor - construtor

                     •       length - número de parametros

                     •       caller - objecto que chamou a função

                     •       toString - retorna o código fonte da função

                     •       call

                     •       apply

                     •       prototype




segunda-feira, 17 de agosto de 2009
Call
                        var some_obj = {
                            name: 'Ninja',
                            say: function(who){ return 'Haya ' + who + ', I am a ' + this.name; }
                        }
                        >>> some_obj.say('Dude');
                        "Haya Dude, I am a Ninja"
                        >>> my_obj = {name: 'Scripting guru'};
                        >>> some_obj.say.call(my_obj, 'Dude');
                        "Haya Dude, I am a Scripting guru"




segunda-feira, 17 de agosto de 2009
Call

                        objeto1.metodo.call(objeto2, p1, p2)


                        se você não passar um objeto como
                        primeiro parâmetro ou passar null, o
                        objeto global (window) será assumido.


segunda-feira, 17 de agosto de 2009
Apply
                        objeto1.metodo.apply(objeto2, [p1, p2])
                        objeto1.metodo.call(objeto2, p1, p2)


                        O método apply funciona da mesma
                        forma que o método call com a
                        diferença de que os parâmetros são
                        passados em um Array.

segunda-feira, 17 de agosto de 2009
O atributos arguments
                        >>> function f() {return arguments;}
                        >>> f(1,2,3)
                        [1, 2, 3]


                        Parece um Array mas não é um Array!
                        Não contém métodos como slide e sort.


segunda-feira, 17 de agosto de 2009
O Atributo callee do
                           objeto arguments
                     •       >>> function f(){return arguments.callee;}

                     •       >>> f()

                     •       f()


                     •       O Atributo callee é uma referência a função
                             sendo chamada.


segunda-feira, 17 de agosto de 2009
Boolean
                       >>> var b = new Boolean();   >> Boolean("test")

                       >>> typeof b                 true

                       "object"                     >>> Boolean("")

                       >>> typeof b.valueOf()       false

                       "boolean"                    >>> Boolean({})

                       >>> b.valueOf()              true

                       false



segunda-feira, 17 de agosto de 2009
Number
segunda-feira, 17 de agosto de 2009
Constantes do Number
                        >>> Number.MAX_VALUE

                        1.7976931348623157e+308

                        >>> Number.MIN_VALUE

                        5e-324

                        >>> Number.POSITIVE_INFINITY

                        Infinity

                        >>> Number.NEGATIVE_INFINITY

                        -Infinity

                        >>> Number.NaN

                        NaN




segunda-feira, 17 de agosto de 2009
Métodos do Number
                     •       toFixed(fractionDigits)
                           •          Define o número de decimais e arredonda

                     •       toExponencial(fractionDigits)
                           •          Retorna a notação exponencial do número

                           •          56789 = 5.68e+4

                     •       toPrecision(precision)
                           •          Retorna o número ou exponencial dependendo da precisão

                           •          new Number(56789). toPrecision(2) = "5.7e+4"
                           •          new Number(56789). toPrecision(5) = "56789"



segunda-feira, 17 de agosto de 2009
Strings
                     •       Podem ser tipos primitivos ou objetos



                     •       >>> var primitive = 'Hello';

                     •       >>> typeof primitive;

                     •       "string"



                     •       >>> var obj = new String('world');

                     •       >>> typeof obj;

                     •       "object"




segunda-feira, 17 de agosto de 2009
Atributos de Strings


                     • length



segunda-feira, 17 de agosto de 2009
Um Array de
                                       Caracteres
                        >>> var obj = new String('world');
                        >>> obj[0]
                        "w"
                        >>> obj[4]
                        "d"
                        >>> obj.length
                        5




segunda-feira, 17 de agosto de 2009
Métodos de String
                     •      toUpperCase                                    •   split(string)


                     •      toLowerCase                                    •   concat(string1, string2, ...)


                     •      chartAt(index)                                 •   replace(string, replacement)


                     •      chartCodeAt(index)                             •   valueOf()


                     •      indexOf(word, startAp)                         •   fromCharCode(code1, code2, ...)


                     •      lastIndexOf(word)                              •   localeCompare(‘string’)


                     •      slice / substring (from, to)                   •   match(regexp)


                           •      difere apenas com parâmetros negativos   •   search(regexp)




segunda-feira, 17 de agosto de 2009
Math
segunda-feira, 17 de agosto de 2009
Math Random

                     • Math.random()
                      • Retorna um númeo entre 0 e 1.
                     • 100 * Math.random()
                      • Retorna um número entre 0 e 100.

segunda-feira, 17 de agosto de 2009
Métodos de Math
                     • round (n)              • sqrt (n)
                     • ceil (n)
                     • flor (n)
                     • min (n1, n2)
                     • max (n1, n2)
                     • pow (n, e)

segunda-feira, 17 de agosto de 2009
Expressões Regulares
segunda-feira, 17 de agosto de 2009
Expressões Regulares

                        Provêem uma forma poderosa de buscar e
                        manipular texto.Você pode pensar nelas como
                        SQL porem ao invés de buscar e atualizar dados
                        em um banco de dados, você pode buscar e
                        atualizar dados em um pedaço de texto.




segunda-feira, 17 de agosto de 2009
Expressões Regulares

                     • Expressões regulares consistem em:
                      • Um padrão para encontrar um texto
                      • Um ou mais modificadores (também
                                      chamados de flags) que oferecem
                                      instruções de como o padrão deve ser
                                      aplicado.



segunda-feira, 17 de agosto de 2009
O Objeto RegExp
                        var re = new RegExp("j.*t");


                        var re = /j.*t/;


                        Selecione qualquer string que começe com a
                        letra j e termine com t e que tenha ou não
                        caracteres entre elas.


segunda-feira, 17 de agosto de 2009
Propriedades do
                                          RegExp
                     •       global (g): Se for false (o que é o padrão) a busca pára
                             quando o primeiro resultado é encontrado. Defina true se
                             quiser todas os resultados.

                     •       ignoreCase (i): Case sensitive ou não (false por padrão).

                     •       multiline (m): Busca em mais de uma linha (false por
                             padrão).

                     •       lastIndex: Posição para começar a busca (padrão 0).

                     •       source: Contém a expressão regular (pattern).




segunda-feira, 17 de agosto de 2009
Propriedades do
                                          RegExp
                        >>> var re = new RegExp('j.*t', 'gmi');

                        >>> re.global;

                        true

                        >>> var re = /j.*t/ig;

                        >>> re.global

                        true



segunda-feira, 17 de agosto de 2009
Método Test
                        Não encontra porque a letra J está maiúscula:

                        >>> /j.*t/.test("Javascript")

                        false



                        Ignora case dos caracteres:

                        >>> /j.*t/i.test("Javascript")

                        true




segunda-feira, 17 de agosto de 2009
Método Exec


                        >>> /j.*t/i.exec("Javascript")[0]

                        "Javascript"




segunda-feira, 17 de agosto de 2009
Métodos do String que
                      aceitam Regex
                     •       match()

                           •          retorna um array com resultados

                     •       search()

                           •          retorna a posição do primeiro resultado

                     •       replace()

                           •          substitui todas as ocorrências por outra string

                     •       split()


segunda-feira, 17 de agosto de 2009
Match
                        >>> var s = new String('HelloJavaScriptWorld');

                        >>> s.match(/a/);

                        ["a"]




                        >>> s.match(/a/g);

                        ["a", "a"]




                        >>> s.match(/j.*a/i);

                        ["Java"]




segunda-feira, 17 de agosto de 2009
Search

                        >>> var s = new String('HelloJavaScriptWorld');

                        >>> s.search(/j.*a/i);

                        5




segunda-feira, 17 de agosto de 2009
Replace
                        >>> var s = new String('HelloJavaScriptWorld');



                        >>> s.replace(/[A-Z]/g, '');

                        "elloavacriptorld"



                        >>> s.replace(/[A-Z]/, '');

                        "elloJavaScriptWorld"




segunda-feira, 17 de agosto de 2009
Replace
                     •       //The operator $&

                         >>> s.replace(/[A-Z]/g, "_$&");

                         "_Hello_Java_Script_World"




                         >>> s.replace(/([A-Z])/g, "_$1");

                         "_Hello_Java_Script_World"




                         >>> var email = "stoyan@phpied.com";

                         email.replace(/(.*)@.*/, "$1");

                         "stoyan"




segunda-feira, 17 de agosto de 2009
Replace Callbacks
                        >>> var s = new String('HelloJavaScriptWorld');

                        >>> function replaceCallback(match){

                                      return "_" + match.toLowerCase();

                           }

                        >>> s.replace(/[A-Z]/g, replaceCallback);

                        "_hello_java_script_world"




segunda-feira, 17 de agosto de 2009
Objetos de Erro
segunda-feira, 17 de agosto de 2009
Construtores do
                                       Objeto Error
                     •      EvalError

                     •      RangeError

                     •      ReferenceError

                     •      SyntaxError

                     •      TypeError

                     •      URIError




segunda-feira, 17 de agosto de 2009
try catch
                        try {

                             iDontExist();

                        } catch (e){

                             alert(e.name + ': ' + e.message);

                        } finally {

                             alert('Finally!');

                        }

                        ReferenceError: iDontExist is not defined




segunda-feira, 17 de agosto de 2009
Lançando Erros
                        throw new Error('Division by zero!');



                        throw new RangeError('Division by zero!')



                        throw {

                             name: "MyError",

                             message: "OMG! Something terrible has happened"

                        }




segunda-feira, 17 de agosto de 2009
Prototype
segunda-feira, 17 de agosto de 2009
Prototype
                         Todo objeto Function possui um atributo prototype
                        >>> function foo(a, b){return a * b;}

                        >>> foo.length

                        2

                        >>> foo.constructor

                        Function()

                        >>> typeof foo.prototype

                        "object"




segunda-feira, 17 de agosto de 2009
Adicionado métodos e
                    atributos ao prototype
                        Gadget.prototype.price = 100;

                        Gadget.prototype.rating = 3;

                        Gadget.prototype.getInfo = function() {

                           return 'Rating: ' + this.rating + ', price: ' + this.price;

                        };




                        Gadget.prototype = {

                           price: 100,

                           rating: 3,

                           getInfo: function() {return 'Rating: ' + this.rating + ', price: ' + this.price;}

                        };




segunda-feira, 17 de agosto de 2009
Prototype
                        Todos os métodos e atributos que você adicionar
                        ao prototype serão disponibilizados assim que o
                        objeto for instanciado através de seu construtor.
                        Ao instanciar um novo objeto, este recebe uma
                        referência do prototype e não uma cópia.
                        Funciona de forma semelhante aos métodos e
                        atributos estáticos na linguagem Java.


segunda-feira, 17 de agosto de 2009
Prioridade dos
                                         Atributos
                        function Gadget(name) {this.name = name;}

                        Gadget.prototype.name = 'foo';



                        >>> var toy = new Gadget('camera');

                        >>> toy.name;

                        "camera"



                        >>> delete toy.name;

                        true

                        >>> toy.name;

                        "foo"




segunda-feira, 17 de agosto de 2009
Herança
segunda-feira, 17 de agosto de 2009
Herança
                        function Shape(){

                            this.name = 'shape';

                            this.toString = function() {return this.name;};

                        }

                        function TwoDShape(){      this.name = '2D shape';}

                        function Triangle(side, height) {

                            this.name = 'Triangle';

                            this.side = side;

                            this.height = height;

                            this.getArea = function(){return this.side * this.height / 2;};

                        }




segunda-feira, 17 de agosto de 2009
Herança

                        TwoDShape.prototype = new Shape();


                        Triangle.prototype = new TwoDShape();




segunda-feira, 17 de agosto de 2009
Herança
                        >>> var my = new Triangle(5, 10);

                        >>> my instanceof Shape

                        true

                        >>> my instanceof TwoDShape

                        true

                        >>> my instanceof Triangle

                        true

                        >>> my instanceof Array




segunda-feira, 17 de agosto de 2009
Herança
                        >>> Shape.prototype.isPrototypeOf(my)

                        true

                        >>> TwoDShape.prototype.isPrototypeOf(my)

                        true

                        >>> Triangle.prototype.isPrototypeOf(my)

                        true

                        >>> String.prototype.isPrototypeOf(my)

                        false




segunda-feira, 17 de agosto de 2009
O Ambiente do Browser
segunda-feira, 17 de agosto de 2009
Window
                     •      window.navigator           •   window.frames

                           •      userAgent            •   window.screen

                     •      window.location                •   width / availWidth

                                 •    href                 •   height availHeight

                                 •    location         •   window.open(...)

                                 •    replace()        •   window.close()

                                 •    assing()         •   window.moveTo()

                                 •    reload()         •   window.resizeTo()

                           •      window.history       •   window.alert()

                                 •    forward()        •   window. confirm()

                                 •    back()           •   window. prompt()

                                 •    go(n)




segunda-feira, 17 de agosto de 2009
setTimeout

                     •       function funcao(){alert('Boo!');}


                     •       var tempoEmMillisegundos = 2000;


                     •       setTimeout(funcao, tempoEmMillisegundos);



segunda-feira, 17 de agosto de 2009
setInterval

                     •       function funcao(){alert('Boo!');}


                     •       var tempoEmMillisegundos = 2000;


                     •       setInterval(funcao, tempoEmMillisegundos);



segunda-feira, 17 de agosto de 2009
DOM - Document Object Model
segunda-feira, 17 de agosto de 2009
<html>
                          <head>
                            <title>My page</title>
                          </head>
                          <body>
                            <p class="opener">first paragraph</p>
                            <p><em>second</em> paragraph</p>
                            <p id="closer">final</p>
                            <!-- and that's about it -->
                          </body>
                        </html>




segunda-feira, 17 de agosto de 2009
Os Nós da Árvore
                        >>> document.documentElement.nodeName

                        "HTML"

                        >>> document.documentElement.tagName

                        "HTML"

                        >>> document.documentElement.childNodes.length

                        2

                        >>> document.documentElement.childNodes[0]

                        <head>

                        >>> document.documentElement.childNodes[1]

                        <body>




segunda-feira, 17 de agosto de 2009
Nós
                        >>> body.childNodes[1].attributes.length

                        1

                        >>> body.childNodes[1].attributes[0].nodeName

                        "class"

                        >>> body.childNodes[1].attributes[0].nodeValue

                        "opener"

                        >>> body.childNodes[1].attributes['class'].nodeValue

                        "opener"

                        >>> body.childNodes[1].getAttribute('class')

                        "opener"




segunda-feira, 17 de agosto de 2009
Nós
                        >>> bd.childNodes[1].nodeName

                        "P"

                        >>> bg.childNodes[1].textContent

                        "first paragraph"

                        >>> bd.childNodes[1].innerHTML

                        "first paragraph"

                        >>> bd.childNodes[3].innerHTML

                        "<em>second</em> paragraph"

                        >>> bd.childNodes[3].textContent

                        "second paragraph"




segunda-feira, 17 de agosto de 2009
Atalhos DOM
                        document.getElementsByTagName('p').length

                        document.getElementsByTagName('p').item(0)

                        document.getElementsByTagName('p')[0]

                        document.getElementById('closer')

                        document.getElementById('closer').nextSibling

                        document.getElementById('closer').previousSibling

                        document.body.firstChild

                        document.body.lastChild




segunda-feira, 17 de agosto de 2009
Criando Elementos

                        var myp = document.createElement('p');

                        myp.innerHTML = 'yet another';

                        document.body.appendChild(myp)




segunda-feira, 17 de agosto de 2009
Clones

                        var el = document.getElementsByTagName('p')[1];

                        document.body.appendChild(el.cloneNode(true))




                                           Clona Elementos
                                            Filhos Também




segunda-feira, 17 de agosto de 2009
Insert Before
                        document.body.insertBefore(

                             document.createTextNode('boo!'),

                             document.body.firstChild

                        );



                        document.body.appendChild(document.createTextNode('boo!'));




segunda-feira, 17 de agosto de 2009
Apagar Elementos

                        var myp = document.getElementsByTagName('p')[1];

                        var removed = document.body.removeChild(myp);




segunda-feira, 17 de agosto de 2009
HTML DOM Objects
                     •       document.images

                     •       document.getElementsByTagName()

                     •       document.applets

                     •       document.links (a href)

                     •       document.anchors (a name)

                     •       document.forms

                     •       document.



segunda-feira, 17 de agosto de 2009
Document
                        >>> document.cookie;

                        "CNNid=Ga50a0c6f-14404-1198821758-6; SelectedEdition=www; s_sess=%...”



                        >>> document.title = ‘Meu título’;

                        ‘Meu título’;



                        >>> document.referrer; //previously-visited page

                        "http://www.andrefaria.com/links/js"



                        >>> document.domain;

                        www.andrefaria.com




segunda-feira, 17 de agosto de 2009
Eventos

                        document.body.addEventListener('click', function(){alert('body')}, false);

                        document.addEventListener('click', function(){alert('doc')}, false);

                        window.addEventListener('click', function(){alert('win')}, false);



                        >>> var para = document.getElementById('closer');

                        >>> para.addEventListener('click', paraHandler, false);

                        >>> para.removeEventListener('click', paraHandler, false);




segunda-feira, 17 de agosto de 2009
Eventos

                     •       Mouse (click, double click, up, down, etc...)

                     •       Keyboard (key down, key up, key press)

                     •       Window (load, abort, resize)

                     •       Form (focus, change, reset, submit)




segunda-feira, 17 de agosto de 2009
CC Images
                     •       http://www.flickr.com/photos/monstershaq2000/3008436618/

                     •       http://www.flickr.com/photos/jantik/254695220/

                     •       http://www.flickr.com/photos/curiousexpeditions/1568278214/

                     •       http://www.flickr.com/photos/slambo_42/1393841369/

                     •       http://www.flickr.com/photos/zenera/462727735/

                     •       http://www.flickr.com/photos/artysmokes/3154354974/

                     •       http://www.flickr.com/photos/dragonflycustomcakes/3650746207/

                     •       http://www.flickr.com/photos/milon15/2382845410/

                     •       http://www.flickr.com/photos/roll_initiative/3278642272/

                     •       http://www.flickr.com/photos/stuartpilbrow/2938100285/

                     •       http://farm3.static.flickr.com/2300/2421129047_22e2176008.jpg

                     •       http://www.flickr.com/photos/cocreatr/2347460526/

                     •       http://www.flickr.com/photos/didier/318620915/

                     •       http://www.flickr.com/photos/jaredchapman/482538719/

                     •       http://www.flickr.com/photos/ericbegin/2462706533/




segunda-feira, 17 de agosto de 2009
Obrigado!
segunda-feira, 17 de agosto de 2009

Java Script

  • 1.
  • 2.
    Estrutura Comportamento Apresentação Conteúdo HTML JavaScript CSS segunda-feira, 17 de agosto de 2009
  • 3.
    Aplicação • Rich and powerful web applications (Gmail) • Server-side code such as ASP using for example Rhino. • Rich media apps (Flash, Flex) using ActionScript (based on js). • Scripts that automate tasks on your Windows • Write extensions/plugins for apps like Firefox, Dreamweaver • Web applications that store information in an off-line database on the user's desktop, using Google Gears • Create Yahoo! Widgets, Mac Dashboard widgets, or Adobe Air applications that run on your desktop segunda-feira, 17 de agosto de 2009
  • 4.
    Programação Orientada a Objetos • Objetos, métodos, atributos • Classes • Encapsulamento • Agregação / Composição • Herança • Polimorfismo segunda-feira, 17 de agosto de 2009
  • 5.
  • 6.
    Tipos Primitivos • Number • String • Boolean • Undefined • Null segunda-feira, 17 de agosto de 2009
  • 7.
    O Operador Typeof >>> n = 1234; >>> typeof n; "number" segunda-feira, 17 de agosto de 2009
  • 8.
    O Número Infinity É um número grande demais para o JavaScript gerenciar, ou seja um número maior que 1.7976931348623157e+308 segunda-feira, 17 de agosto de 2009
  • 9.
    Arrays • >>> var a = [1, 2, 3]; • >>> delete a[1]; • true • >>> a • [1, undefined, 3] segunda-feira, 17 de agosto de 2009
  • 10.
    Arrays de Arrays • >>> var a = [[1,2,3],[4,5,6]]; • >>> a[2] = ‘bla’; • >>> a; • [[1, 2, 3], [4, 5, 6],‘bla’] segunda-feira, 17 de agosto de 2009
  • 11.
    For in Loops >> var a = ['a', 'b', 'c', 'x', 'y', 'z']; >> var result = 'n'; >> for (var i in a) { >> result += 'index: ' + i + ', value: ' + a[i] + 'n'; >> } index: 0, value: a index: 1, value: b segunda-feira, 17 de agosto de 2009
  • 12.
    Functions public void sum(a1, a2, a3) { ... }; sum (1, 2); os parâmetros não passados tem valor undefined segunda-feira, 17 de agosto de 2009
  • 13.
    Flexibilidade >>> function args() { return arguments; } >>> args(); [] >>> args( 1, 2, 3, 4, true, 'ninja'); [1, 2, 3, 4, true, 'ninja'] segunda-feira, 17 de agosto de 2009
  • 14.
  • 15.
  • 16.
    parseInt parseInt('123') = 123 parseInt('0377', 8) = 255 parseInt('abc123') = NaN parseInt('377') = 377 parseInt('1abc23') = 1 parseInt('0377') = 255 parseInt('FF', 10) = NaN parseInt('0x377') = 887 parseInt('FF', 16) = 255 parseInt('0377', 10) = 377 segunda-feira, 17 de agosto de 2009
  • 17.
    parseFloat parseFloat('123') = 123 parseFloat('123e-2') = 1.23 parseFloat('1.23') = 1.23 parseFloat('123e2') = 12300 parseFloat('1.23abc.00') = 1.23 parseInt('1e10') = 1 parseFloat('a.bc1.23') = NaN parseFloat('a123.34') = NaN parseFloat('12a3.34') = 12 segunda-feira, 17 de agosto de 2009
  • 18.
  • 19.
    isNaN isNaN(NaN) = true isNaN(123) = false isNaN(1.23) = false isNaN(parseInt('abc123')) = true isNaN('1.23') = false isNaN('a1.23') = true segunda-feira, 17 de agosto de 2009
  • 20.
  • 21.
    encodeURIComponent() e decodeURIComponent() segunda-feira, 17 de agosto de 2009
  • 22.
    Enconding URIs >>> var url = 'http://www.packtpub.com/scr ipt.php?q=this and that'; >>> encodeURI(url); "http://www.packtpub.com/scr%20ipt.php?q=this%20and%20that" >>> encodeURIComponent(url); "http%3A%2F%2Fwww.packtpub.com%2Fscr%20ipt.php%3Fq%3Dthis%20and %20that" segunda-feira, 17 de agosto de 2009
  • 23.
  • 24.
    eval >>> eval('var ii = 2;') >>> ii 2 segunda-feira, 17 de agosto de 2009
  • 25.
    Local e Global Escopo de Variáveis segunda-feira, 17 de agosto de 2009
  • 26.
    Funções são dados var x = function(){return 999;} >>> function f(){return 1;} >>> typeof f function segunda-feira, 17 de agosto de 2009
  • 27.
    Functions are Data >>> var sum = function(a, b) {return a + b;} >>> var add = sum; >>> delete sum; >>> typeof sum; "undefined" >>> typeof add; "function" >>> add(1, 2); 3 segunda-feira, 17 de agosto de 2009
  • 28.
    Callback Functions Because a function is just like any other data assigned to a variable, it can be defined, deleted, copied, and why not also passed as an argument to other functions? segunda-feira, 17 de agosto de 2009
  • 29.
    Callback Functions function invoke_and_add(a, b){ return a() + b(); } function one() { return 1; } function two() { return 2;} >>> invoke_and_add(one, two); 3 >>> invoke_and_add(function(){return 1;}, function(){return 2;}) 3 segunda-feira, 17 de agosto de 2009
  • 30.
  • 31.
    Self-Invoking Functions ( ( function(){ function(name){ alert('Bolha!'); alert(name + '!'); } } )(); )('Bolha') segunda-feira, 17 de agosto de 2009
  • 32.
  • 33.
    Objetos (key/value) var pessoa = { nome: 'Andre', profissao: 'Desenvolvedor' }; segunda-feira, 17 de agosto de 2009
  • 34.
    Objetos (key/value) var o = { something: 1, 'yes or no': 'yes', '!@#$%^&*': true }; it’s a valid object! segunda-feira, 17 de agosto de 2009
  • 35.
    Objetos (key/value) var dog = { name: 'Benji', talk: function(){ alert('Woof, woof!'); } }; >>> dog.talk(); segunda-feira, 17 de agosto de 2009
  • 36.
    Propriedades var pessoa = { >>> pessoa.nome; nome: 'Mario', "Mario" idade: '30' >>> pessoa['idade']; }; "30" >>> pessoa.cor_do_cabelo undefined segunda-feira, 17 de agosto de 2009
  • 37.
    Objetos com Objetos var livro = { titulo 'A lagoa verde', autor: { nome: 'Joana', sobre_nome: 'Silveira' } }; segunda-feira, 17 de agosto de 2009
  • 38.
    Alterando Objetos >>> var pessoa = {}; >>> delete pessoa.nome; >>> pessoa.nome; >>> pessoa.nome; undefined undefined >>> pessoa.nome = ‘Zé’; >>> pessoa.nome; ‘Zé’; segunda-feira, 17 de agosto de 2009
  • 39.
    This var pessoa = { >>> pessoa.dizerNome(); nome: 'Wende', ‘Wende’ dizerNome: function() { return this.nome; } } segunda-feira, 17 de agosto de 2009
  • 40.
    Construtores function pessoa() { this.nome = 'Beatriz'; } >>> var p = new Pessoa(); >>> p.nome; ‘Beatriz’ segunda-feira, 17 de agosto de 2009
  • 41.
    O Objeto Global >>> var x = 10; >>> window.x >>> x; 10 10 >>> window[‘x’]; 10 segunda-feira, 17 de agosto de 2009
  • 42.
    Cuidado! >>> function Hero(name) {this.name = name;} >>> var h = Hero('Leonardo'); >>> typeof h "undefined" var h = new >>> typeof h.name Hero('Leonardo') h has no properties >>> window.name + name LeonardoLeonardo segunda-feira, 17 de agosto de 2009
  • 43.
    Global Functions >>> window.parseInt('101 dalmatians') 101 segunda-feira, 17 de agosto de 2009
  • 44.
    Constructor Reference >>> var h3 = new h2.constructor('Mané'); >>> typeof o.constructor; ‘function’ segunda-feira, 17 de agosto de 2009
  • 45.
    O Operador instanceof >>> function Hero(){} >>> var h = new Hero(); >>> var o = {}; >>> h instanceof Hero; true >>> h instanceof Object; false segunda-feira, 17 de agosto de 2009
  • 46.
    Built-in Objects • Data wrapper Objects • Object, Function, Array, Boolean, Number and String. • Utility Objects • Math, Date, RegExp • Error Objects segunda-feira, 17 de agosto de 2009
  • 47.
    Object >>> var o = {}; >>> var o = new Object(); • o.constructor - the construtor • o.toString - A string that represent it. • o.valueOf - A single value that represents it. segunda-feira, 17 de agosto de 2009
  • 48.
  • 49.
    Array >>> var a = new >>> a.toString(); Array(1,2,3,'four'); "1,2,3,four" >>> a; >>> a.valueOf() [1, 2, 3, "four"] [1, 2, 3, "four"] >>> var a2 = new Array(5); >>> a.constructor >>> a2; Array() [undefined, undefined, undefined, undefined, undefined] segunda-feira, 17 de agosto de 2009
  • 50.
    Métodos e Atributosde um Array • construtor • concat() • length • pop() • toString() • push() • valueOf() • reverse() • sort() • shift() • join() • splice() • slice() • unshift() segunda-feira, 17 de agosto de 2009
  • 51.
    Array Length Alterando o atributo length de um array para menor os elementos do final são removidos: >>> a [1, 2, 3, 4, 5, 6, 7] >>> a.length = 2; >>> a [1, 2] segunda-feira, 17 de agosto de 2009
  • 52.
    métodos push epop • >>> var a = [1,2,3]; • >>> a.pop() • >>> a.push('new') • "new" • 4 • >>> a • >>> a • [1,2,3] • [1,2,3, "new"] segunda-feira, 17 de agosto de 2009
  • 53.
    sort • >>> a • [3, 5, 1, 7, "test"] • >>> a.sort; • [1, 3, 5, 7, "test"] segunda-feira, 17 de agosto de 2009
  • 54.
    join >>> a [1, 2, 3] >>> a.join(' bla '); "1 bla 2 bla 3 bla" segunda-feira, 17 de agosto de 2009
  • 55.
    slice >>> matriz O método slice não modifica o array original [‘a’,’b’,’c’,’d’,’e’] (matriz)! >>> matriz.slice(0,1); >>> matriz a [‘a’,’b’,’c’,’d’,’e’] >> matriz.slice(1,3); ‘b’,’c’ segunda-feira, 17 de agosto de 2009
  • 56.
    splice >>> m1 [‘a’,’b’,’c’,’d’,’e’] >>> m2 = m1.splice(1, 3) [‘b’,’c’,’d’] >>> m1 [‘a’,’e’] segunda-feira, 17 de agosto de 2009
  • 57.
  • 58.
    Function • >>> function sum(a, b) {return a + b;}; • >>> sum(1, 2) • 3 • >>> var sum = function(a, b) {return a + b;}; • >>> sum(1, 2) eval • 3 • >>> var sum = new Function('a', 'b', 'return a + b;'); • >>> sum(1, 2) • 3 segunda-feira, 17 de agosto de 2009
  • 59.
    Atributos e Propriedades de um Function • constructor - construtor • length - número de parametros • caller - objecto que chamou a função • toString - retorna o código fonte da função • call • apply • prototype segunda-feira, 17 de agosto de 2009
  • 60.
    Call var some_obj = { name: 'Ninja', say: function(who){ return 'Haya ' + who + ', I am a ' + this.name; } } >>> some_obj.say('Dude'); "Haya Dude, I am a Ninja" >>> my_obj = {name: 'Scripting guru'}; >>> some_obj.say.call(my_obj, 'Dude'); "Haya Dude, I am a Scripting guru" segunda-feira, 17 de agosto de 2009
  • 61.
    Call objeto1.metodo.call(objeto2, p1, p2) se você não passar um objeto como primeiro parâmetro ou passar null, o objeto global (window) será assumido. segunda-feira, 17 de agosto de 2009
  • 62.
    Apply objeto1.metodo.apply(objeto2, [p1, p2]) objeto1.metodo.call(objeto2, p1, p2) O método apply funciona da mesma forma que o método call com a diferença de que os parâmetros são passados em um Array. segunda-feira, 17 de agosto de 2009
  • 63.
    O atributos arguments >>> function f() {return arguments;} >>> f(1,2,3) [1, 2, 3] Parece um Array mas não é um Array! Não contém métodos como slide e sort. segunda-feira, 17 de agosto de 2009
  • 64.
    O Atributo calleedo objeto arguments • >>> function f(){return arguments.callee;} • >>> f() • f() • O Atributo callee é uma referência a função sendo chamada. segunda-feira, 17 de agosto de 2009
  • 65.
    Boolean >>> var b = new Boolean(); >> Boolean("test") >>> typeof b true "object" >>> Boolean("") >>> typeof b.valueOf() false "boolean" >>> Boolean({}) >>> b.valueOf() true false segunda-feira, 17 de agosto de 2009
  • 66.
  • 67.
    Constantes do Number >>> Number.MAX_VALUE 1.7976931348623157e+308 >>> Number.MIN_VALUE 5e-324 >>> Number.POSITIVE_INFINITY Infinity >>> Number.NEGATIVE_INFINITY -Infinity >>> Number.NaN NaN segunda-feira, 17 de agosto de 2009
  • 68.
    Métodos do Number • toFixed(fractionDigits) • Define o número de decimais e arredonda • toExponencial(fractionDigits) • Retorna a notação exponencial do número • 56789 = 5.68e+4 • toPrecision(precision) • Retorna o número ou exponencial dependendo da precisão • new Number(56789). toPrecision(2) = "5.7e+4" • new Number(56789). toPrecision(5) = "56789" segunda-feira, 17 de agosto de 2009
  • 69.
    Strings • Podem ser tipos primitivos ou objetos • >>> var primitive = 'Hello'; • >>> typeof primitive; • "string" • >>> var obj = new String('world'); • >>> typeof obj; • "object" segunda-feira, 17 de agosto de 2009
  • 70.
    Atributos de Strings • length segunda-feira, 17 de agosto de 2009
  • 71.
    Um Array de Caracteres >>> var obj = new String('world'); >>> obj[0] "w" >>> obj[4] "d" >>> obj.length 5 segunda-feira, 17 de agosto de 2009
  • 72.
    Métodos de String • toUpperCase • split(string) • toLowerCase • concat(string1, string2, ...) • chartAt(index) • replace(string, replacement) • chartCodeAt(index) • valueOf() • indexOf(word, startAp) • fromCharCode(code1, code2, ...) • lastIndexOf(word) • localeCompare(‘string’) • slice / substring (from, to) • match(regexp) • difere apenas com parâmetros negativos • search(regexp) segunda-feira, 17 de agosto de 2009
  • 73.
  • 74.
    Math Random • Math.random() • Retorna um númeo entre 0 e 1. • 100 * Math.random() • Retorna um número entre 0 e 100. segunda-feira, 17 de agosto de 2009
  • 75.
    Métodos de Math • round (n) • sqrt (n) • ceil (n) • flor (n) • min (n1, n2) • max (n1, n2) • pow (n, e) segunda-feira, 17 de agosto de 2009
  • 76.
  • 77.
    Expressões Regulares Provêem uma forma poderosa de buscar e manipular texto.Você pode pensar nelas como SQL porem ao invés de buscar e atualizar dados em um banco de dados, você pode buscar e atualizar dados em um pedaço de texto. segunda-feira, 17 de agosto de 2009
  • 78.
    Expressões Regulares • Expressões regulares consistem em: • Um padrão para encontrar um texto • Um ou mais modificadores (também chamados de flags) que oferecem instruções de como o padrão deve ser aplicado. segunda-feira, 17 de agosto de 2009
  • 79.
    O Objeto RegExp var re = new RegExp("j.*t"); var re = /j.*t/; Selecione qualquer string que começe com a letra j e termine com t e que tenha ou não caracteres entre elas. segunda-feira, 17 de agosto de 2009
  • 80.
    Propriedades do RegExp • global (g): Se for false (o que é o padrão) a busca pára quando o primeiro resultado é encontrado. Defina true se quiser todas os resultados. • ignoreCase (i): Case sensitive ou não (false por padrão). • multiline (m): Busca em mais de uma linha (false por padrão). • lastIndex: Posição para começar a busca (padrão 0). • source: Contém a expressão regular (pattern). segunda-feira, 17 de agosto de 2009
  • 81.
    Propriedades do RegExp >>> var re = new RegExp('j.*t', 'gmi'); >>> re.global; true >>> var re = /j.*t/ig; >>> re.global true segunda-feira, 17 de agosto de 2009
  • 82.
    Método Test Não encontra porque a letra J está maiúscula: >>> /j.*t/.test("Javascript") false Ignora case dos caracteres: >>> /j.*t/i.test("Javascript") true segunda-feira, 17 de agosto de 2009
  • 83.
    Método Exec >>> /j.*t/i.exec("Javascript")[0] "Javascript" segunda-feira, 17 de agosto de 2009
  • 84.
    Métodos do Stringque aceitam Regex • match() • retorna um array com resultados • search() • retorna a posição do primeiro resultado • replace() • substitui todas as ocorrências por outra string • split() segunda-feira, 17 de agosto de 2009
  • 85.
    Match >>> var s = new String('HelloJavaScriptWorld'); >>> s.match(/a/); ["a"] >>> s.match(/a/g); ["a", "a"] >>> s.match(/j.*a/i); ["Java"] segunda-feira, 17 de agosto de 2009
  • 86.
    Search >>> var s = new String('HelloJavaScriptWorld'); >>> s.search(/j.*a/i); 5 segunda-feira, 17 de agosto de 2009
  • 87.
    Replace >>> var s = new String('HelloJavaScriptWorld'); >>> s.replace(/[A-Z]/g, ''); "elloavacriptorld" >>> s.replace(/[A-Z]/, ''); "elloJavaScriptWorld" segunda-feira, 17 de agosto de 2009
  • 88.
    Replace • //The operator $& >>> s.replace(/[A-Z]/g, "_$&"); "_Hello_Java_Script_World" >>> s.replace(/([A-Z])/g, "_$1"); "_Hello_Java_Script_World" >>> var email = "stoyan@phpied.com"; email.replace(/(.*)@.*/, "$1"); "stoyan" segunda-feira, 17 de agosto de 2009
  • 89.
    Replace Callbacks >>> var s = new String('HelloJavaScriptWorld'); >>> function replaceCallback(match){ return "_" + match.toLowerCase(); } >>> s.replace(/[A-Z]/g, replaceCallback); "_hello_java_script_world" segunda-feira, 17 de agosto de 2009
  • 90.
    Objetos de Erro segunda-feira,17 de agosto de 2009
  • 91.
    Construtores do Objeto Error • EvalError • RangeError • ReferenceError • SyntaxError • TypeError • URIError segunda-feira, 17 de agosto de 2009
  • 92.
    try catch try { iDontExist(); } catch (e){ alert(e.name + ': ' + e.message); } finally { alert('Finally!'); } ReferenceError: iDontExist is not defined segunda-feira, 17 de agosto de 2009
  • 93.
    Lançando Erros throw new Error('Division by zero!'); throw new RangeError('Division by zero!') throw { name: "MyError", message: "OMG! Something terrible has happened" } segunda-feira, 17 de agosto de 2009
  • 94.
  • 95.
    Prototype Todo objeto Function possui um atributo prototype >>> function foo(a, b){return a * b;} >>> foo.length 2 >>> foo.constructor Function() >>> typeof foo.prototype "object" segunda-feira, 17 de agosto de 2009
  • 96.
    Adicionado métodos e atributos ao prototype Gadget.prototype.price = 100; Gadget.prototype.rating = 3; Gadget.prototype.getInfo = function() { return 'Rating: ' + this.rating + ', price: ' + this.price; }; Gadget.prototype = { price: 100, rating: 3, getInfo: function() {return 'Rating: ' + this.rating + ', price: ' + this.price;} }; segunda-feira, 17 de agosto de 2009
  • 97.
    Prototype Todos os métodos e atributos que você adicionar ao prototype serão disponibilizados assim que o objeto for instanciado através de seu construtor. Ao instanciar um novo objeto, este recebe uma referência do prototype e não uma cópia. Funciona de forma semelhante aos métodos e atributos estáticos na linguagem Java. segunda-feira, 17 de agosto de 2009
  • 98.
    Prioridade dos Atributos function Gadget(name) {this.name = name;} Gadget.prototype.name = 'foo'; >>> var toy = new Gadget('camera'); >>> toy.name; "camera" >>> delete toy.name; true >>> toy.name; "foo" segunda-feira, 17 de agosto de 2009
  • 99.
  • 100.
    Herança function Shape(){ this.name = 'shape'; this.toString = function() {return this.name;}; } function TwoDShape(){ this.name = '2D shape';} function Triangle(side, height) { this.name = 'Triangle'; this.side = side; this.height = height; this.getArea = function(){return this.side * this.height / 2;}; } segunda-feira, 17 de agosto de 2009
  • 101.
    Herança TwoDShape.prototype = new Shape(); Triangle.prototype = new TwoDShape(); segunda-feira, 17 de agosto de 2009
  • 102.
    Herança >>> var my = new Triangle(5, 10); >>> my instanceof Shape true >>> my instanceof TwoDShape true >>> my instanceof Triangle true >>> my instanceof Array segunda-feira, 17 de agosto de 2009
  • 103.
    Herança >>> Shape.prototype.isPrototypeOf(my) true >>> TwoDShape.prototype.isPrototypeOf(my) true >>> Triangle.prototype.isPrototypeOf(my) true >>> String.prototype.isPrototypeOf(my) false segunda-feira, 17 de agosto de 2009
  • 104.
    O Ambiente doBrowser segunda-feira, 17 de agosto de 2009
  • 105.
    Window • window.navigator • window.frames • userAgent • window.screen • window.location • width / availWidth • href • height availHeight • location • window.open(...) • replace() • window.close() • assing() • window.moveTo() • reload() • window.resizeTo() • window.history • window.alert() • forward() • window. confirm() • back() • window. prompt() • go(n) segunda-feira, 17 de agosto de 2009
  • 106.
    setTimeout • function funcao(){alert('Boo!');} • var tempoEmMillisegundos = 2000; • setTimeout(funcao, tempoEmMillisegundos); segunda-feira, 17 de agosto de 2009
  • 107.
    setInterval • function funcao(){alert('Boo!');} • var tempoEmMillisegundos = 2000; • setInterval(funcao, tempoEmMillisegundos); segunda-feira, 17 de agosto de 2009
  • 108.
    DOM - DocumentObject Model segunda-feira, 17 de agosto de 2009
  • 109.
    <html> <head> <title>My page</title> </head> <body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <p id="closer">final</p> <!-- and that's about it --> </body> </html> segunda-feira, 17 de agosto de 2009
  • 110.
    Os Nós daÁrvore >>> document.documentElement.nodeName "HTML" >>> document.documentElement.tagName "HTML" >>> document.documentElement.childNodes.length 2 >>> document.documentElement.childNodes[0] <head> >>> document.documentElement.childNodes[1] <body> segunda-feira, 17 de agosto de 2009
  • 111.
    Nós >>> body.childNodes[1].attributes.length 1 >>> body.childNodes[1].attributes[0].nodeName "class" >>> body.childNodes[1].attributes[0].nodeValue "opener" >>> body.childNodes[1].attributes['class'].nodeValue "opener" >>> body.childNodes[1].getAttribute('class') "opener" segunda-feira, 17 de agosto de 2009
  • 112.
    Nós >>> bd.childNodes[1].nodeName "P" >>> bg.childNodes[1].textContent "first paragraph" >>> bd.childNodes[1].innerHTML "first paragraph" >>> bd.childNodes[3].innerHTML "<em>second</em> paragraph" >>> bd.childNodes[3].textContent "second paragraph" segunda-feira, 17 de agosto de 2009
  • 113.
    Atalhos DOM document.getElementsByTagName('p').length document.getElementsByTagName('p').item(0) document.getElementsByTagName('p')[0] document.getElementById('closer') document.getElementById('closer').nextSibling document.getElementById('closer').previousSibling document.body.firstChild document.body.lastChild segunda-feira, 17 de agosto de 2009
  • 114.
    Criando Elementos var myp = document.createElement('p'); myp.innerHTML = 'yet another'; document.body.appendChild(myp) segunda-feira, 17 de agosto de 2009
  • 115.
    Clones var el = document.getElementsByTagName('p')[1]; document.body.appendChild(el.cloneNode(true)) Clona Elementos Filhos Também segunda-feira, 17 de agosto de 2009
  • 116.
    Insert Before document.body.insertBefore( document.createTextNode('boo!'), document.body.firstChild ); document.body.appendChild(document.createTextNode('boo!')); segunda-feira, 17 de agosto de 2009
  • 117.
    Apagar Elementos var myp = document.getElementsByTagName('p')[1]; var removed = document.body.removeChild(myp); segunda-feira, 17 de agosto de 2009
  • 118.
    HTML DOM Objects • document.images • document.getElementsByTagName() • document.applets • document.links (a href) • document.anchors (a name) • document.forms • document. segunda-feira, 17 de agosto de 2009
  • 119.
    Document >>> document.cookie; "CNNid=Ga50a0c6f-14404-1198821758-6; SelectedEdition=www; s_sess=%...” >>> document.title = ‘Meu título’; ‘Meu título’; >>> document.referrer; //previously-visited page "http://www.andrefaria.com/links/js" >>> document.domain; www.andrefaria.com segunda-feira, 17 de agosto de 2009
  • 120.
    Eventos document.body.addEventListener('click', function(){alert('body')}, false); document.addEventListener('click', function(){alert('doc')}, false); window.addEventListener('click', function(){alert('win')}, false); >>> var para = document.getElementById('closer'); >>> para.addEventListener('click', paraHandler, false); >>> para.removeEventListener('click', paraHandler, false); segunda-feira, 17 de agosto de 2009
  • 121.
    Eventos • Mouse (click, double click, up, down, etc...) • Keyboard (key down, key up, key press) • Window (load, abort, resize) • Form (focus, change, reset, submit) segunda-feira, 17 de agosto de 2009
  • 122.
    CC Images • http://www.flickr.com/photos/monstershaq2000/3008436618/ • http://www.flickr.com/photos/jantik/254695220/ • http://www.flickr.com/photos/curiousexpeditions/1568278214/ • http://www.flickr.com/photos/slambo_42/1393841369/ • http://www.flickr.com/photos/zenera/462727735/ • http://www.flickr.com/photos/artysmokes/3154354974/ • http://www.flickr.com/photos/dragonflycustomcakes/3650746207/ • http://www.flickr.com/photos/milon15/2382845410/ • http://www.flickr.com/photos/roll_initiative/3278642272/ • http://www.flickr.com/photos/stuartpilbrow/2938100285/ • http://farm3.static.flickr.com/2300/2421129047_22e2176008.jpg • http://www.flickr.com/photos/cocreatr/2347460526/ • http://www.flickr.com/photos/didier/318620915/ • http://www.flickr.com/photos/jaredchapman/482538719/ • http://www.flickr.com/photos/ericbegin/2462706533/ segunda-feira, 17 de agosto de 2009
  • 123.