SlideShare a Scribd company logo
1 of 123
Download to read offline
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

More Related Content

What's hot

Orientação a objetos em Python (compacto)
Orientação a objetos em Python (compacto)Orientação a objetos em Python (compacto)
Orientação a objetos em Python (compacto)Luciano Ramalho
 
Iteráveis e geradores (versão RuPy)
Iteráveis e geradores (versão RuPy)Iteráveis e geradores (versão RuPy)
Iteráveis e geradores (versão RuPy)Luciano Ramalho
 
Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?Arthur Xavier
 
Orientação a Objetos em Python
Orientação a Objetos em PythonOrientação a Objetos em Python
Orientação a Objetos em PythonLuciano Ramalho
 
Programação funcional tipada: uma introdução
Programação funcional tipada: uma introduçãoProgramação funcional tipada: uma introdução
Programação funcional tipada: uma introduçãoArthur Xavier
 
Objetos Pythonicos - compacto
Objetos Pythonicos - compactoObjetos Pythonicos - compacto
Objetos Pythonicos - compactoLuciano Ramalho
 
Conexão Java 2012 - Orientação a Objetos das Galáxias
Conexão Java 2012 - Orientação a Objetos das GaláxiasConexão Java 2012 - Orientação a Objetos das Galáxias
Conexão Java 2012 - Orientação a Objetos das GaláxiasMaurício Aniche
 
Python: a primeira mordida
Python: a primeira mordidaPython: a primeira mordida
Python: a primeira mordidaLuciano Ramalho
 
Manual winplot
Manual winplotManual winplot
Manual winplotFranbfk
 
Introdução a programação gráfica com Processing - Aula 02
Introdução a programação gráfica com Processing - Aula 02Introdução a programação gráfica com Processing - Aula 02
Introdução a programação gráfica com Processing - Aula 02Lucas Cabral
 
Oficina Android - Games com AndEngine - Dia 2
Oficina Android - Games com AndEngine - Dia 2Oficina Android - Games com AndEngine - Dia 2
Oficina Android - Games com AndEngine - Dia 2Odair Bonin Borges
 
Desenvolvimento iOS - Aula 1
Desenvolvimento iOS - Aula 1Desenvolvimento iOS - Aula 1
Desenvolvimento iOS - Aula 1Saulo Arruda
 
Introdução a programação gráfica com Processing - Aula 01
Introdução a programação gráfica com Processing - Aula 01Introdução a programação gráfica com Processing - Aula 01
Introdução a programação gráfica com Processing - Aula 01Lucas Cabral
 
Refatoração de código com Capitão Nascimento versão completa
Refatoração de código com Capitão Nascimento versão completaRefatoração de código com Capitão Nascimento versão completa
Refatoração de código com Capitão Nascimento versão completaEduardo Bregaida
 
introdução a linguagem java-2003
introdução a linguagem java-2003introdução a linguagem java-2003
introdução a linguagem java-2003elliando dias
 
www.AulasDeMatematicanoRJ.Com.Br - Matemática - Introdução às Funções
 www.AulasDeMatematicanoRJ.Com.Br  - Matemática -  Introdução às Funções www.AulasDeMatematicanoRJ.Com.Br  - Matemática -  Introdução às Funções
www.AulasDeMatematicanoRJ.Com.Br - Matemática - Introdução às FunçõesClarice Leclaire
 

What's hot (18)

Orientação a objetos em Python (compacto)
Orientação a objetos em Python (compacto)Orientação a objetos em Python (compacto)
Orientação a objetos em Python (compacto)
 
Iteráveis e geradores (versão RuPy)
Iteráveis e geradores (versão RuPy)Iteráveis e geradores (versão RuPy)
Iteráveis e geradores (versão RuPy)
 
Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?
 
Orientação a Objetos em Python
Orientação a Objetos em PythonOrientação a Objetos em Python
Orientação a Objetos em Python
 
Programação funcional tipada: uma introdução
Programação funcional tipada: uma introduçãoProgramação funcional tipada: uma introdução
Programação funcional tipada: uma introdução
 
Objetos Pythonicos - compacto
Objetos Pythonicos - compactoObjetos Pythonicos - compacto
Objetos Pythonicos - compacto
 
Conexão Java 2012 - Orientação a Objetos das Galáxias
Conexão Java 2012 - Orientação a Objetos das GaláxiasConexão Java 2012 - Orientação a Objetos das Galáxias
Conexão Java 2012 - Orientação a Objetos das Galáxias
 
Python: a primeira mordida
Python: a primeira mordidaPython: a primeira mordida
Python: a primeira mordida
 
Manual winplot
Manual winplotManual winplot
Manual winplot
 
Introdução a programação gráfica com Processing - Aula 02
Introdução a programação gráfica com Processing - Aula 02Introdução a programação gráfica com Processing - Aula 02
Introdução a programação gráfica com Processing - Aula 02
 
Sobrecarga operadores
Sobrecarga operadoresSobrecarga operadores
Sobrecarga operadores
 
Oficina Android - Games com AndEngine - Dia 2
Oficina Android - Games com AndEngine - Dia 2Oficina Android - Games com AndEngine - Dia 2
Oficina Android - Games com AndEngine - Dia 2
 
Desenvolvimento iOS - Aula 1
Desenvolvimento iOS - Aula 1Desenvolvimento iOS - Aula 1
Desenvolvimento iOS - Aula 1
 
Introdução a programação gráfica com Processing - Aula 01
Introdução a programação gráfica com Processing - Aula 01Introdução a programação gráfica com Processing - Aula 01
Introdução a programação gráfica com Processing - Aula 01
 
Refatoração de código com Capitão Nascimento versão completa
Refatoração de código com Capitão Nascimento versão completaRefatoração de código com Capitão Nascimento versão completa
Refatoração de código com Capitão Nascimento versão completa
 
introdução a linguagem java-2003
introdução a linguagem java-2003introdução a linguagem java-2003
introdução a linguagem java-2003
 
Mini-Curso: gnuplot
Mini-Curso: gnuplotMini-Curso: gnuplot
Mini-Curso: gnuplot
 
www.AulasDeMatematicanoRJ.Com.Br - Matemática - Introdução às Funções
 www.AulasDeMatematicanoRJ.Com.Br  - Matemática -  Introdução às Funções www.AulasDeMatematicanoRJ.Com.Br  - Matemática -  Introdução às Funções
www.AulasDeMatematicanoRJ.Com.Br - Matemática - Introdução às Funções
 

Viewers also liked

Viewers also liked (17)

MVC MVP MVVM para Web
MVC MVP MVVM para WebMVC MVP MVVM para Web
MVC MVP MVVM para Web
 
The Traveler's Gift: My Notes
The Traveler's Gift: My NotesThe Traveler's Gift: My Notes
The Traveler's Gift: My Notes
 
Pensando como um data scientist
Pensando como um data scientistPensando como um data scientist
Pensando como um data scientist
 
What happened to Google Reader?
What happened to Google Reader?What happened to Google Reader?
What happened to Google Reader?
 
Gestão 3.0 e Kudo Box
Gestão 3.0 e Kudo BoxGestão 3.0 e Kudo Box
Gestão 3.0 e Kudo Box
 
Lean 5S
Lean 5SLean 5S
Lean 5S
 
Wikipedia - De leitor a Contribuinte
Wikipedia - De leitor a ContribuinteWikipedia - De leitor a Contribuinte
Wikipedia - De leitor a Contribuinte
 
Gestão 3.0: Gestão Ágil
Gestão 3.0: Gestão ÁgilGestão 3.0: Gestão Ágil
Gestão 3.0: Gestão Ágil
 
Bematech IFRS
Bematech IFRSBematech IFRS
Bematech IFRS
 
Introduction to Underscore.js
Introduction to Underscore.jsIntroduction to Underscore.js
Introduction to Underscore.js
 
11 Regras de Bill Gates para a Vida
11 Regras de Bill Gates para a Vida11 Regras de Bill Gates para a Vida
11 Regras de Bill Gates para a Vida
 
Escolha ser mais feliz
Escolha ser mais felizEscolha ser mais feliz
Escolha ser mais feliz
 
Pensando Rápido e Devagar
Pensando Rápido e DevagarPensando Rápido e Devagar
Pensando Rápido e Devagar
 
Feedback 360
Feedback 360Feedback 360
Feedback 360
 
Porter's Five Forces: How to identiy attractive markets
Porter's Five Forces: How to identiy attractive marketsPorter's Five Forces: How to identiy attractive markets
Porter's Five Forces: How to identiy attractive markets
 
Steve Jobs - Lessons Learned
Steve Jobs - Lessons LearnedSteve Jobs - Lessons Learned
Steve Jobs - Lessons Learned
 
Porter's Five Forces
Porter's Five ForcesPorter's Five Forces
Porter's Five Forces
 

More from André Faria Gomes

Meetup Escale - Gestão para Equipes de Alta Performance
Meetup Escale - Gestão para Equipes de Alta PerformanceMeetup Escale - Gestão para Equipes de Alta Performance
Meetup Escale - Gestão para Equipes de Alta PerformanceAndré Faria Gomes
 
Protagonistas da inovação - Como criar e gerir os negócios do futuro
Protagonistas da inovação - Como criar e gerir os negócios do futuroProtagonistas da inovação - Como criar e gerir os negócios do futuro
Protagonistas da inovação - Como criar e gerir os negócios do futuroAndré Faria Gomes
 
A Mobilidade como Propulsor da Transformação Digital
A Mobilidade como Propulsor da Transformação DigitalA Mobilidade como Propulsor da Transformação Digital
A Mobilidade como Propulsor da Transformação DigitalAndré Faria Gomes
 
Além da Agilidade 2019 - KickOff Wow
Além da Agilidade 2019 - KickOff WowAlém da Agilidade 2019 - KickOff Wow
Além da Agilidade 2019 - KickOff WowAndré Faria Gomes
 
Modern systems architectures: Uber, Lyft, Cabify
Modern systems architectures: Uber, Lyft, CabifyModern systems architectures: Uber, Lyft, Cabify
Modern systems architectures: Uber, Lyft, CabifyAndré Faria Gomes
 
Principles and Radical Transparency - Lessons Learned from Ray Dalio
Principles and Radical Transparency - Lessons Learned from Ray DalioPrinciples and Radical Transparency - Lessons Learned from Ray Dalio
Principles and Radical Transparency - Lessons Learned from Ray DalioAndré Faria Gomes
 
Bluesoft @ AWS re:Invent 2017 + AWS 101
Bluesoft @ AWS re:Invent 2017 + AWS 101Bluesoft @ AWS re:Invent 2017 + AWS 101
Bluesoft @ AWS re:Invent 2017 + AWS 101André Faria Gomes
 
Boas Práticas da Rede Supermercadista Wegmans
Boas Práticas da Rede Supermercadista WegmansBoas Práticas da Rede Supermercadista Wegmans
Boas Práticas da Rede Supermercadista WegmansAndré Faria Gomes
 
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...André Faria Gomes
 
Change management - Kotter’s eight-step model
Change management - Kotter’s eight-step model Change management - Kotter’s eight-step model
Change management - Kotter’s eight-step model André Faria Gomes
 
Palestra na Uninove sobre Agilidade
Palestra na Uninove sobre AgilidadePalestra na Uninove sobre Agilidade
Palestra na Uninove sobre AgilidadeAndré Faria Gomes
 
Gestão Ágil com Management 3.0
Gestão Ágil com Management 3.0Gestão Ágil com Management 3.0
Gestão Ágil com Management 3.0André Faria Gomes
 
Lições aprendidas em 10 anos de agilidade
Lições aprendidas em 10 anos de agilidadeLições aprendidas em 10 anos de agilidade
Lições aprendidas em 10 anos de agilidadeAndré Faria Gomes
 
Os 7 hábitos das pessoas altamente eficazes
Os 7 hábitos das pessoas altamente eficazesOs 7 hábitos das pessoas altamente eficazes
Os 7 hábitos das pessoas altamente eficazesAndré Faria Gomes
 
Objetividade: A Virtude Esquecida
Objetividade: A Virtude EsquecidaObjetividade: A Virtude Esquecida
Objetividade: A Virtude EsquecidaAndré Faria Gomes
 
Lições de empreendedorismo com Flávio Augusto
Lições de empreendedorismo com Flávio AugustoLições de empreendedorismo com Flávio Augusto
Lições de empreendedorismo com Flávio AugustoAndré Faria Gomes
 
Capital de Giro e Ciclo Financeiro
Capital de Giro e Ciclo FinanceiroCapital de Giro e Ciclo Financeiro
Capital de Giro e Ciclo FinanceiroAndré Faria Gomes
 

More from André Faria Gomes (20)

Meetup Escale - Gestão para Equipes de Alta Performance
Meetup Escale - Gestão para Equipes de Alta PerformanceMeetup Escale - Gestão para Equipes de Alta Performance
Meetup Escale - Gestão para Equipes de Alta Performance
 
Protagonistas da inovação - Como criar e gerir os negócios do futuro
Protagonistas da inovação - Como criar e gerir os negócios do futuroProtagonistas da inovação - Como criar e gerir os negócios do futuro
Protagonistas da inovação - Como criar e gerir os negócios do futuro
 
A Mobilidade como Propulsor da Transformação Digital
A Mobilidade como Propulsor da Transformação DigitalA Mobilidade como Propulsor da Transformação Digital
A Mobilidade como Propulsor da Transformação Digital
 
Além da Agilidade 2019 - KickOff Wow
Além da Agilidade 2019 - KickOff WowAlém da Agilidade 2019 - KickOff Wow
Além da Agilidade 2019 - KickOff Wow
 
Modern systems architectures: Uber, Lyft, Cabify
Modern systems architectures: Uber, Lyft, CabifyModern systems architectures: Uber, Lyft, Cabify
Modern systems architectures: Uber, Lyft, Cabify
 
Breaking the monolith
Breaking the monolithBreaking the monolith
Breaking the monolith
 
Agilidade - APAS
Agilidade - APASAgilidade - APAS
Agilidade - APAS
 
Principles and Radical Transparency - Lessons Learned from Ray Dalio
Principles and Radical Transparency - Lessons Learned from Ray DalioPrinciples and Radical Transparency - Lessons Learned from Ray Dalio
Principles and Radical Transparency - Lessons Learned from Ray Dalio
 
Bluesoft @ AWS re:Invent 2017 + AWS 101
Bluesoft @ AWS re:Invent 2017 + AWS 101Bluesoft @ AWS re:Invent 2017 + AWS 101
Bluesoft @ AWS re:Invent 2017 + AWS 101
 
Boas Práticas da Rede Supermercadista Wegmans
Boas Práticas da Rede Supermercadista WegmansBoas Práticas da Rede Supermercadista Wegmans
Boas Práticas da Rede Supermercadista Wegmans
 
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
 
Change management - Kotter’s eight-step model
Change management - Kotter’s eight-step model Change management - Kotter’s eight-step model
Change management - Kotter’s eight-step model
 
Palestra na Uninove sobre Agilidade
Palestra na Uninove sobre AgilidadePalestra na Uninove sobre Agilidade
Palestra na Uninove sobre Agilidade
 
Gestão Ágil com Management 3.0
Gestão Ágil com Management 3.0Gestão Ágil com Management 3.0
Gestão Ágil com Management 3.0
 
Lições aprendidas em 10 anos de agilidade
Lições aprendidas em 10 anos de agilidadeLições aprendidas em 10 anos de agilidade
Lições aprendidas em 10 anos de agilidade
 
Os 7 hábitos das pessoas altamente eficazes
Os 7 hábitos das pessoas altamente eficazesOs 7 hábitos das pessoas altamente eficazes
Os 7 hábitos das pessoas altamente eficazes
 
Objetividade: A Virtude Esquecida
Objetividade: A Virtude EsquecidaObjetividade: A Virtude Esquecida
Objetividade: A Virtude Esquecida
 
Lições de empreendedorismo com Flávio Augusto
Lições de empreendedorismo com Flávio AugustoLições de empreendedorismo com Flávio Augusto
Lições de empreendedorismo com Flávio Augusto
 
Capital de Giro e Ciclo Financeiro
Capital de Giro e Ciclo FinanceiroCapital de Giro e Ciclo Financeiro
Capital de Giro e Ciclo Financeiro
 
Followership
FollowershipFollowership
Followership
 

Recently uploaded

ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx2m Assessoria
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)Alessandro Almeida
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASMarcio Venturelli
 
Apostila e caderno de exercicios de WORD
Apostila e caderno de exercicios de  WORDApostila e caderno de exercicios de  WORD
Apostila e caderno de exercicios de WORDRONDINELLYRAMOS1
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfRodolpho Concurde
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx2m Assessoria
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAMarcio Venturelli
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx2m Assessoria
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 

Recently uploaded (11)

ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 
Apostila e caderno de exercicios de WORD
Apostila e caderno de exercicios de  WORDApostila e caderno de exercicios de  WORD
Apostila e caderno de exercicios de WORD
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 

Java Script

  • 1. Java Script segunda-feira, 17 de agosto de 2009
  • 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
  • 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
  • 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
  • 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
  • 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. eval() segunda-feira, 17 de agosto de 2009
  • 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
  • 31. Self-Invoking Functions ( ( function(){ function(name){ alert('Bolha!'); alert(name + '!'); } } )(); )('Bolha') segunda-feira, 17 de agosto de 2009
  • 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. Array segunda-feira, 17 de agosto de 2009
  • 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 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
  • 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 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
  • 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
  • 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 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
  • 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. Number segunda-feira, 17 de agosto de 2009
  • 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. Math segunda-feira, 17 de agosto de 2009
  • 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
  • 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 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
  • 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
  • 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
  • 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 do Browser 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 - Document Object 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