Baixe o app para aproveitar ainda mais
Prévia do material em texto
PROGRAMAÇÃO PARA INTERNET Professor Cayo Fontana LINGUAGEM DE PROGRAMAÇÃO JAVASCRIPT SUMÁRIO Introdução Motivação e Aplicabilidade JavaScript e HTML Variáveis, Operações, Funções Instruções de Controle Vetores Objetos, Construtores e Protótipo DOM – Conceito e Manipulação de Elementos Eventos Ajax – Conceito e Requisições Assíncronas INTRODUÇÃO É uma linguagem de programação originalmente destinada a manipular elementos do HTML, dinamicamente É uma linguagem de tipagem dinâmica (fracamente tipada) de maneira que o tipo da variável só é determinado na sua inicialização, podendo ainda variar de acordo com o contexto Apesar de estrutural, JavaScript suporta Orientação à Objetos É uma linguagem de programação interpretada (navegadores web – interpretadores léxicos embutidos) É uma linguagem de script (executada pelos navegadores) INTRODUÇÃO JavaScript é a linguagem de programação mais popular no desenvolvimento Web (baseado em HTML), suportada por todos os navegadores No contexto da arquitetura Web, JavaScript possui o propósito de atender demandas de contexto dinâmico no client-side (lado do cliente) SSJS – Server-Side JavaScript: versão da linguagem interpretada no servidor Apesar da nomenclatura, JavaScript e Java não possuem quaisquer semelhanças em seus propósitos e escopos, exceto a sintática e semântica herdadas da linguagem de programação C MOTIVAÇÃO Criada originalmente pela Netscape Communications em 1995 com o objetivo inicial de tratar entrada de dados em formulários Seu nome inicialmente era Mocha, posteriormente alterado para LiveScript. Entretanto no final dos anos 90 a linguagem de programação JAVA foi amplamente disserminada e aceita, levando a Netscape, por motivos de marketing, a migrar o nome LiveScript para JavaScript Após a definição da API para o Modelo de Objetos de Documento (DOM), o JavaScript obteve grande poder de manipulação da estrutura e leiaute de documentos HTML, além de trabalhar de maneira síncrona e/ou assíncrona com o servidor JAVASCRIPT E HTML Para incluir códigos JavaScript no HTML, utiliza-se a tag <script> </script> Na tag de abertura, deve-se definir o tipo do script utilizando o atributo type, definindo o valor para text/javascript <script type="text/javascript"> Códigos JavaScript pode ser definidos em dois locais num documento HTML: No cabeçalho: definição e/ou implementação do código JavaScript dentro das tags <head></ head > do HTML No corpo: definição e/ou implementação do código JavaScript dentro das tags <body></body> do HTML Qual a diferença entre definir o código JavaScript no cabeçalho e no corpo? JAVASCRIPT E HTML No cabeçalho, o código é executado antes do carregamento do HTML, ou seja, o DOM Tree (árvore do Modelo de Objeto de Documento) ainda não está disponível <head> <script type=“text/javascript”> var titulo1 = document.getElementById("titulo1"); // titulo1 == null <script> </head> <body> <h1 id="titulo1">Título Teste</h1> </body> JAVASCRIPT E HTML No corpo, o código é executado durante a interpretação do HTML pelo navegador. A interpretação do HTML é Top-Down (do começo ao final do arquivo, linha por linha), então o código será executado de acordo com sua ordem de definição <head> </head> <body> <h1 id="titulo1">Título Teste</h1> <script type=“text/javascript”> var titulo1 = document.getElementById("titulo1"); // titulo1 == HTMLHeadingElement <script> </body> JAVASCRIPT E HTML Códigos JavaScript podem ser referenciados externamente, à partir de um arquivo separado do código HTML Da mesma forma, utiliza-se a tag <script> </script> Neste caso utiliza-se o atributo src (source – origem) para indicar o nome do arquivo <script type=“text/javascript" src="global.js"></script> Quando uma referência externa é definida, não poderá existir código no conteúdo da tag <script> </script> Nota: todos os arquivos JavaScript deve possuir a extensão .js VARIÁVEIS, OPERAÇÕES E FUNÇÕES Sintaticamente, a definição de nomes de variáveis em JavaScript seguem as seguintes regras: Caracteres alfanuméricos a–z, A–Z, 0–9, símbolo $, e sublinhado (_) Não podem haver ocorrências de espaço ou pontuação O primeiro caractere do nome de uma variável deverá ser uma letra (a–z, A– Z), símbolo $, ou sublinhado (_) São sensíveis ao caso (case-sensitive). Teste, teste e TESTE são variáveis distintas Não há limite de tamanho VARIÁVEIS, OPERAÇÕES E FUNÇÕES JavaScript possui tipagem dinâmica, tratando todas as variáveis como objeto assumindo 4 diferentes tipo: number: valores numéricos 10, 1000, 3.1515 boolean: valores lógicos true | false string: cadeia de caracteres entre aspas simples ou duplas “linguagem JavaScript” object: estruturas de dados que representam qualquer tipo de dado que não seja primitivo, podendo ser: Vetores: estruturas de dados que armazenam coleções de objetos, representadas por colchetes - [] Objetos: estruturas de dados que compoem um objeto estruturado, representados por chaves - {} VARIÁVEIS, OPERAÇÕES E FUNÇÕES Demais tipos do JavaScript typeof: é um operador utilizado para retornar o tipo de um valor var numero = 20; typeof numero // number null: representa um valor nulo de um objeto, ou seja, define sua nulidade var nulo = null; typeof nulo // object undefined: estabelece a indefinição de um objeto. Qualquer objeto declarado e não inicializado (sem valor), será “undefined” (indefinido) var indefinido; typeof indefinido // undefined VARIÁVEIS, OPERAÇÕES E FUNÇÕES Declaração de variáveis em JavaScript Apesar dos tipos reconhecidos pelo JavaScripts, estudados anteriormente, a sintaxe declarativa de suas variáveis dá-se através do símbolo var var numero = 20 var booleano = true var stringJavaScript = “variável javascript” var variavel_nula = null var nao_definida VARIÁVEIS, OPERAÇÕES E FUNÇÕES O uso do símbolo var torna a variável para uso no contexto local Em JavaScript, a utilização do símbolo var para declarar uma variável não é obrigatória, mas evita possíveis conflitos. Exemplo: <script type=“text/javascript”> valor = 100; function Exemplo() { valor = valor / 2; } Exemplo(); alert(valor); </script> VARIÁVEIS, OPERAÇÕES E FUNÇÕES Coerção de variáveis JavaScript é uma linguagem de tipagem dinâmica, de forma que suas variáveis podem sofrer alteração de tipos em qualquer local do código var coercao = 120; coercao = ‘coercao executada’; coercao = true; alert(typeof coercao); VARIÁVEIS, OPERAÇÕES E FUNÇÕES Operações Aritméticas Os operadores aritméticos são usados para realizar operações aritméticas em números (literais ou variáveis) Operador Descrição + Adição - Subtração * Multiplicação / Divisão % Módulo (resto) ++ Incremento -- Decremento VARIÁVEIS, OPERAÇÕES E FUNÇÕES Exemplo1: Operação aritmética entre duas variáveis numéricas var x = 50; var y = 25; var resultado = x / y; Exemplo2: Operação aritmética entre variáveis e literais, numéricos var x = 50; var resultado = x % 5; VARIÁVEIS, OPERAÇÕES E FUNÇÕES Operações de Atribuição Os operadores de atribuição são usados para realizar operações que atribuem valores à variáveis Operador Exemplo É o mesmo que = x = y x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y VARIÁVEIS, OPERAÇÕES E FUNÇÕES Exemplo: atribuição de uma variável numérica var x = 50; x *= 2; x -= 15; Operadores de atribuição também podem concatenarstrings var faculdade = “Faculdade”; faculdade += “ Católica ” + “Salesiana” VARIÁVEIS, OPERAÇÕES E FUNÇÕES Operações Lógicas e Comparações Os operadores lógicos são usados para determinar a lógica entre variáveis, valores ou expressões Exemplo: assuma as variáveis numéricas x e y de valores 6 e 3, respectivamente Operador Descrição Exemplo && e (conjunção) (x < 10 && y > 1) é verdadeiro || ou (disjunção) (x == 5 || y == 5) é falso ! não (negação – inverso) !(x == y) é verdadeiro VARIÁVEIS, OPERAÇÕES E FUNÇÕES Operações Lógicas e Comparações Os operadores de comparação são usados para realizar testes entre variáveis e valores, determinando a equalidade ou diferença, entre as mesmas VARIÁVEIS, OPERAÇÕES E FUNÇÕES Operações Lógicas e Comparações Operador Descrição == igual a === valor e tipo, iguais a != diferente de !== valor ou tipo, diferentes de > maior que < menor que >= maior ou igual a <= menor ou igual a VARIÁVEIS, OPERAÇÕES E FUNÇÕES Operações Lógicas e Comparações Exemplo1: Teste de igualdade entre duas variáveis var a = “bola”; var b = “campo”; var resultado = a != b; // true (verdadeiro) Exemplo2: comparando dois valores iguais de tipos diferentes var a = 5; var resultado = a == “5”; // true (verdadeiro) var resultado = a === “5”; // false (falso) var resultado = a === 5; // true (verdadeiro) INSTRUÇÕES DE CONTROLE JavaScript possui um conjunto de instruções que podem ser executadas pelos interpretadores da linguagem, presentes nos navegadores web. Os principais são: Instrução Descrição break Finaliza a execução de uma instrução de seleção (switch) ou um laço continue Reinicia o processamento das informações contidas em um laço debugger Para a execução do JavaScript e executa (se disponível) a função de debug while / do – while Executa continuamente um bloco de instruções até que sua condição seja falsa * for Executa continuamente um bloco de instruções até que seu critério de parade seja alcançado function Declara uma função if / if – else Executa um bloco de instruções de acordo com sua condição, podendo, ou não, executar também o caso contrário à condição definida INSTRUÇÕES DE CONTROLE É bastante comum, e muitas vezes necessária, a presença de quase todas estas instruções de controle nos códigos em JavaScript As instruções de controle definem regras ao fluxo de execução dos programas, de maneira que o processamento dos dados ocorra de acordo com o seu padrão esperado À seguir, exemplos das instruções apresentadas acima return Sai de uma determinada função, podendo retornar algum valor switch - case Executa, de maneira seletiva, um bloco de instruções try ... catch Implementa um tratamento de erro para um bloco de instruções var Declara uma variável INSTRUÇÕES DE CONTROLE for (laço) Instruções de laço executam um determinado bloco de instruções por “n” vezes Geralmente, a utilização da instrução for ocorre quando a quantidade de vezes que o laço será executado, é conhecida O desconhecimento da quantidade de vezes que o laço será executado, não invalida a utilização do for. Entretanto, comumente utiliza-se a instrução while nestas situações Quando utilizado com objetos não primitivos, JavaScript permite que o laço seja executado de acordo com a quantidade de propriedades deste objeto INSTRUÇÕES DE CONTROLE for (laço) Estrutura de um laço: for (instrução1; instrução2; instrução3) { // instruções e regras de acordo com a condicao e critérios do for }, onde o processamento das instruções 1, 2 e 3 ocorre da seguinte maneira: instrução 1: apenas uma vez, antes da primeira execução do laço instrução 2: critério de condição do laço, antes de cada execução do laço instrução 3: ao final de cada execução do laço INSTRUÇÕES DE CONTROLE for (laço) Exemplo: for (var i = 0; I < 10; i++) { alert(i); } O exemplo acima exibirá mensagens de alerta 10 vezes contendo, em cada uma destas mensagens, valores de 0 a 9 INSTRUÇÕES DE CONTROLE while / do – while (laço) Assim como a instrução for apresentado anteriormente, while e do – while são instruções de laço que executam um determinado bloco de instruções de acordo com a validade de um critério de condição Geralmente, a utilização das instruções while / do – while ocorrem quando a quantidade de vezes que o laço será executado, é desconhecida, dependendo da validade de um critério de condição O conhecimento da quantidade de vezes que o laço será executado, não invalida a utilização do while / do – while . Entretanto, comumente utiliza-se a instrução for nestas situações INSTRUÇÕES DE CONTROLE while (laço) Estrutura de um laço: while (condicao) { // instruções e regras da condicao válida em while }, onde: A condicao define uma expressão lógica que será verificada antes de cada execução do bloco de instruções, definido para a instrução while PS: caso a expressão lógica apresente um resultado falso, logo na primeira verificação, o bloco de código definido em while não será executado INSTRUÇÕES DE CONTROLE while (laço) Exemplo: var i = 20; while (i % 3 != 0) { alert(i); i--; } O exemplo acima exibirá mensagens de alerta, com o valor de i, enquanto o módulo (resto) da divisão de i por 3 for diferente de 0 (valida e depois executa) INSTRUÇÕES DE CONTROLE do – while (laço) Estrutura de um laço: do { // instruções e regras da condicao válida em do – while } while (condicao); , onde: A condicao define uma expressão lógica que será verificada após cada execução do bloco de instruções, definido para a instrução while PS: o bloco de código definido em while será executado, no mínimo, uma vez mesmo que a expressão lógica definida em condicao apresente um resultado falso logo na primeira verificação INSTRUÇÕES DE CONTROLE do – while (laço) Exemplo: var i = 20; do { alert(i); i--; } while (i % 3 != 0); O exemplo acima exibirá mensagens de alerta, com o valor de i, enquanto o módulo (resto) da divisão de i por 3 for diferente de 0 (executa e depois valida) INSTRUÇÕES DE CONTROLE if / if – else (condicional) Controla a execução de um determinado bloco de código de acordo com a validade de uma expressão condicional if (condicional) Estrutura: if (condicao) { // demais instruções e regras do programa }, onde A condicao define uma expressão lógica que será validada antes de execução do bloco de instruções, definido para a instrução if. Se verdadeiro o bloco é executado INSTRUÇÕES DE CONTROLE if (condicional) Exemplo: var teste = true; if (teste) alert(“Expressão verdadeira”); INSTRUÇÕES DE CONTROLE if – else (condicional) Estrutura: if (condicao) { // instruções e regras da condicao válida em if – else } else { // instruções e regras da condicao inválida em if – else }, onde A condicao define uma expressão lógica que será validada antes de execução do bloco de instruções, definido para a instrução if. Se verdadeiro o bloco em if é executado. Se falso, o bloco em else é executado INSTRUÇÕES DE CONTROLE switch – case (seleção) Instruções de seleção permitem o processamento de um determinado bloco de instruções se um determinado valor do critério de seleção esteja disponível nos possíveis casos que a instrução switch – case pode tratar Caso nenhuma critério seja alcançado ocorre a execução do bloco de instruções contidos em default (padrão) É possível que o bloco para o evento padrão (default) não esteja definido em switch. Neste caso, nenhum bloco de instruções será executado INSTRUÇÕES DE CONTROLE switch – case (seleção) Estrutura de umlaço: switch (valor) { case 10: // instruções e regras que serão executadas caso o valor de “valor” seja 10 break; case 15: // instruções e regras que serão executadas caso o valor de “valor” seja 15 break; default: // instruções e regras que serão executadas caso o valor de “valor” não seja nenhum dos casos tratados por switch } EXCEÇÃO Exceções são comportamentos imprevisíveis que podem ocorrer durante fluxo de execução de quaisquer tipos de programas, construídos em diferentes linguagens de programação JavaScript possui instruções que permitem o tratamento de exceções que podem ocorrer durante a execução de um programa Veja o código abaixo: INSTRUÇÕES DE CONTROLE switch – case (seleção) Estrutura de um laço: switch (valor) { case 10: // instruções e regras que serão executadas caso o valor de “valor” seja 10 break; case 15: // instruções e regras que serão executadas caso o valor de “valor” seja 15 break; default: // instruções e regras que serão executadas caso o valor de “valor” não seja nenhum dos casos tratados por switch } VETORES Estruturas de dados utilizados para armazenar uma coleção de valores em uma única variável Cada valor possui um índice (posição) no vetor Um vetor é um objeto A coleção pode ser homogênea (coerência), mas JavaScript suporta coleções heterogêneas por ser uma linguagem de programação fracamente tipada Os valores podem ser tanto de tipos primitivos quando de objetos O JavaScript disponibiliza uma grande variedade de métodos para manipulação de vetores e algumas propriedades VETORES Declaração: var vetor = []; Declaração e inicialização: var alunos = [“Pedro”, “Maria”, “João”, “Camila”, “Tereza”] Acessando elementos: Notação: vetor[índice] alunos[3] // retorna a string “Camila” alunos[1] = “Sofia” // altera o valor da segunda posição do vetor VETORES É possível misturar tipos diferentes transformando um vetor homogêneo em heterogêneo: alunos[1] = 120 // altera o valor e o tipo da 2ª posição do vetor (string número) alunos[2] = [“J”, “o”, “ã”, “o”] // altera o valor e o tipo da 3ª posição do vetor (string objeto (vetor)) É possível incluir elementos em um vetor de maneira não indexada var desordenado = [12, 80] // vetor de tamanho 2 desordenado[52] = “faculdade” // vetor de tamanho 53 VETORES O JavaScript provê alguns métodos e propriedades para trabalhar com vetores. A tabela abaixo apresenta algumas destas principais características length Retorna o tamanho do vetor (quantidade de elementos) valueOf() / toString() Retorna uma string com todos os elementos do vetor, separados por vírgula join() Como valueOf() ou toString(), retorna todos os elementos do vetor separados por um caracter especificado no parâmetro pop() Retorna o ultimo elemento do vetor, removendo-o da coleção push() Adiciona um novo elemento no final do vetor shift() Remove o primeiro elemento do vetor reordenando-o VETORES É possível remover um item do vetor utilizando a instrução delete, da seguinte maneira: delete vetor[4]; //definirá o valor de vetor[4] para undefined unshift() Adiciona um novo item no primeiro índice do vetor, reordenando-o splice() Insere novos itens em uma determinada posição do vetor, podendo remover outros itens slice() Retorna um subvetor, do vetor processado, de acordo com uma posição inicial e outra posição final sort() Ordena um vetor por ordem alfabética ou por ordem crescente reverse() Inverte a ordem de um vetor por valor alfabético ou por ordem numérica VETORES: LITERAIS X OBJETOS Vetores podem ser declarados pelo utilizador do operador new var alunos = new Array(); O operador new constrói um novo objeto O objeto contruído foi o Array (vetor) alunos Ambas declaração de vetores são exatamente a mesma, a construção utilizando o operador new possui maior processamento por invocar o construtor de Array() O w3c recomenda fortemente o uso de vetores literais uma vez que são mais legíveis, simplistas e mais performáticos que vetores de objetos com Array() “For simplicity, readability and execution speed, use the first one (the array literal method)” FUNÇÕES Funções em JavaScript são um bloco de código que executam uma determinada tarefa particular Uma função em JavaScript é executada quando a mesma é chamada (invocada) em algum local do código A estrutura de uma função em JavaScript é definida da seguinte maneira: function funcao() { // intruções específicas da função } A chamada de uma função é feita pelo seu nome. Exemplo: chamando a função do exemplo acima funcao(); FUNÇÕES Sintaxe Uma funções em JavaScript é definida inicialmente pela palavra chave “function”, seguida do nome da função, seguido por parênteses Nota: os parênteses listam os possíveis argumentos que uma função pode ter, e estes argumentos são usados como variáveis locais Argumentos em JavaScript não possuem tipo definido (todos são objetos) Toda função em JavaScript deve, obrigatoriamente, possuir uma abertura de bloco de código e um fechamento de bloco de código “{ }” FUNÇÕES Exemplo de uma função com argumentos: function exemploSoma(valor1, valor2) { var resultado = valor1 + valor2; } Em JavaScript também é possível retornar valores através das funções function obterProduto(valor1, valor2) { return valor1 * valor2; } var resultado = obterProduto(30, 50); FUNÇÕES Porque utilizar funções? Reusabilidade de código Manutenibilidade de código Aplicação do Princípio da Modularidade Padronização e organização de código Torna o código limpo, coeso e coerente OBJETOS Objetos em JavaScript são estruturas de dados genéricas utilizadas para definir um objeto primitivos ou abstratos Em JavaScript quase tudo é objeto: Todos os tipos de dados são objetos Todos os valores, exceto os primitivos, são objetos Os objetos também são variáveis, mas que podem conter muitos valores (várias características) “In JavaScript, objects are king. If you understand objects, you understand JavaScript” – W3C Schools OBJETOS Conforme estudado, variáveis em JavaScript podem conter valores simples, como a definição da variável “pessoa” abaixo: var pessoa = “João da Silva”; As variáveis do tipo objeto são definidas entre chaves “{ }”, contendo pares de nome e valor, definidos da seguinte maneira: nome: valor o par é separado pelo caracter “:” Cada par nome: valor, é chamado de propriedade Exemplo: Reestruturando a variável simples acima “pessoa” como um objeto composto: var pessoa = { primeiroNome: “João”, ultimoNome: “da Silva”, idade: 50 }; OBJETOS O objeto pessoa possui um conjunto de 3 objetos (características do objeto pessoa), definidos como propriedades de pessoa Existem duas formas de acessar os valores das propriedades em JavaScript: 1. Pelo objeto da propriedade: pessoa.primeiroNome 2. Pelo nome da propriedade: pessoa[“primeiroNome”] Ambas formas de acesso retornarão o mesmo valor da propriedade pessoa.primeiroNome == pessoa["primeiroNome"] && pessoa["primeiroNome"] == "João" && pessoa.primeiroNome == "João“ // true (verdadeiro) primeiroNome João ultimoNome da Silva idade 50 OBJETOS Também é possíve remover propriedades dos objetos utilizando o operador delete delete pessoa.ultimoNome; Para verificar a real remoção deste, pode-se utilizar o operador in em uma expressão cujo retorno é um valor booleno, da seguinte maneira: var propriedadeExiste = “ultimoNome” in pessoa; Nesta expressão de consulta sobre a existência de uma determinada propriedade em um objeto, o nome desta propriedade deveráestar entre aspas duplas (“”) OBJETOS Além das características, objetos também podem possuir comportamentos (ações) No JavaScript, o comportamento de um objeto é chamado de método Um método de um objeto define uma (ou uma sequência) de instruções computacionais que representam um determinado comportamento deste objeto Em JavaScript, os métodos são propriedades que possuem a definição de uma função Seu nome é o nome da propriedade que receberá a função como valor Exemplo: criando o método ObterNomeCompleto para o objeto pessoa, criado anteriormente: OBJETOS var pessoa = { primeiroNome: "João", ultimoNome: “Da Silva", idade: 50, ObterNomeCompleto: function () { return this.primeiroNome + " " + this.ultimoNome; } } Em JavaScript o operador this faz referência ao próprio objeto ao qual este operador está sendo utilizado. Neste caso, pessoa ObterNomeCompleto é um comportamento exclusivo do objeto pessoa. As instruções definidas na função deste método somente serão alcançadas por pessoa OBJETOS A chamada de um método é sintaticamente da mesma forma que a chamada de uma função. Porém, neste caso, é acessada diretamente através do objeto que contém o método Exemplo: acessando ObterNomeCompleto do objeto pessoa pessoa.ObterNomeCompleto(); // “João Da Silva” Limitação Caso seja desejável criar outros objetos que possuam as mesmas características e comportamentos (propriedades e métodos, respectivamente) do objeto pessoa – como por exemplo, um objeto homem – toda a implementação do objeto pessoa seria reescrita para o novo objeto homem Para solucionar esta limitação, utiliza-se o conceito do paradigma OO* em JavaScript através da função construtor. OO: Orientação à Objetos OBJETOS – CONSTRUTOR JavaScript é uma linguagem de programação class-free, ou seja, livre de classes. Entretanto suporta o paradigma orientado à objetos e seus objetos podem ser criados através de uma função chamada construtor A função construtor (ou apenas construtor), como o próprio nome sugere, é responsável por construir/fabricar objetos de acordo com sua implementação Nos slides anteriores, o objeto pessoa continha propriedades e métodos (características e comportamentos). Entretanto, para criar um novo objeto como pessoa, era necessário reescrever todos os seus membros Utilizando construtores, todos os objetos criados (fabricados) pelo construtor, possuirão os mesmos membros (propriedades e métodos) definidas no objeto construtor (função) OBJETOS – CONSTRUTOR Construindo tipos de objetos Exemplo: Construindo um objeto construtor de pessoa function pessoa(primeiroNome, ultimoNome, idade) { this.primeiroNome = primeiroNome; this.ultimoNome = ultimoNome; this.idade = idade; this.ObterNomeCompleto = function () { return this.primeiroNome + " " + this.ultimoNome; } } OBJETOS – CONSTRUTOR Construindo tipos de objetos (cont...) Exemplo: Criando objetos à partir do construtor de pessoa var p1 = new pessoa("João", "Augusto", 30); var p2 = new pessoa("Maria", "Aparecida", 30); alert(p1.idade); // 30 alert(p2.ObterNomeCompleto()); // Maria Aparecida O exemplo acima mostra a utilização do construtor para objetos do tipo pessoa, criando dois objetos: p1 e p2 Em seguida são gerados dois alertas com exibição de informações de idade e nome completo de p1 e p2, respectivamente, através de sua propriedade OBJETOS – PROTÓTIPOS Todos os objetos estão associados a um protótipo (prototype), do qual podem herdar propriedades e métodos Quando um construtor é definido, este também é associado a um prototype A utilização do prototype é importante para evitar a replicação de determinados membros de um tipo de objeto, oferecendo melhor desempenho para a aplicação Criando um membro diretamente no protótipo do tipo do objeto, todos os objetos criados pela função construtora compartilharão do mesmo membro, sem ter uma cópia do membro em sua instância OBJETOS – PROTÓTIPOS Construtor de pessoa function pessoa(primeiroNome, ultimoNome, idade) { this.primeiroNome = primeiroNome; this.ultimoNome = ultimoNome; this.idade = idade; this.ObterNomeCompleto = function () { return this.primeiroNome + " " + this.ultimoNome; } } Construtor de pessoa usando Protótipo function pessoa(primeiroNome, ultimoNome, idade) { this.primeiroNome = primeiroNome; this.ultimoNome = ultimoNome; this.idade = idade; pessoa.prototype.ObterNomeComplet o = function () { return this.primeiroNome + " " + this.ultimoNome; } } OBJETOS – PROTÓTIPOS Criando 3 objetos p1, p2 e p3 à partir do construtor pessoa Definindo métodos no construtor Objeto p1 P2 p3 primeiroNome João Maria Tereza ultimoNome Maia Nunes Cruz idade 35 27 54 ObterNomeCompleto Obtém Obtém Obtém Definindo métodos no protótipo Objeto p1 P2 p3 primeiroNome João Maria Tereza ultimoNome Maia Nunes Cruz idade 35 27 54 ObterNomeCompleto Obtém (compartilhado) DOM – CONCEITO E MANIPULAÇÃO Durante este curso, na representação de algumas características do JavaScript, foi utilizado um objeto chamado document e um dos seus métodos, o getElementById Ambas abordagens são apenas duas dos vários objetos, e seus respectivos métodos e propriedades, disponíveis para trabalhar com o Modelo de Objeto de Documento – DOM O DOM é uma API (conjunto de rotinas e padrões) que define uma estrutura lógica de documentos que permite a representação e interação com objetos em documentos dos tipos HTML, XHMTL e XML O DOM representa uma árvore nós, criada dinamicamente pelo navegador quando uma página é carregada, onde cada nó define um objeto Dado o código HTML abaixo temos uma árvore DOM de 5 níveis, onde: document <html> <head> <title> DOM – Conceito e Manipulação </title> </head> <body> <p> Este é o 5º nível! </p> </body> </html> 1° Nível 2° Nível 3° Nível 4° Nível 5° Nível 3° Nível 4° Nível 5° Nível DOM – CONCEITO E MANIPULAÇÃO O objeto document é único, e representa o documento HTML exibido pelo browser Na estrutura em árvore do DOM, o document é o objeto raíz document html head body title p DOM – Conceito e Manipulação Este é o 5º nível! DOM – CONCEITO E MANIPULAÇÃO Neste exemplo, temos três tipos de nó do DOM: document (objeto único e raíz da árvore hierárquica do DOM), elementos HTML e textos (conteúdos de elementos) document <html> <head> <body> <title> <p> DOM – Conceito e Manipulação Este é o 5º nível! DOM – CONCEITO E MANIPULAÇÃO Como estruturas em árvore, os objetos do DOM podem possuir nós ancestrais e descendentes Usando terminologias informalmente técnicas, cada nó possui um pai (exceto o nó raíz) e também pode possuir nenhum, algum ou um conjunto de nós filhos document <html> pai: document <head> Pai: html <body> Pai: html <title> Pai: head DOM – CONCEITO E MANIPULAÇÃO Para acessar os nós pais e/ou filhos, a API DOM provê um conjunto de métodos A tabela abaixo apresenta alguns dos principais métodos para obter estes nós elemento.getElementById(“id”) Retorna o elemento através do valor do seu atributo id elemento.getElementsByName(“name”) Retorna uma coleção de elementos filhos através do valor do atributo name elemento.getElementsTagName(“tag”) Retorna uma coleção de elementos filhos através do nome da Tag HTML elemento.getElementsByClassName(“className”) Retorna uma coleção de elementos filhos através do valor do atributo global class DOM – CONCEITO E MANIPULAÇÃO Para modificar os nós pais e/ou filhos, a API DOM também provê um conjunto de métodos e propriedades A tabela abaixo apresenta algumas das principais maneiras para modificar estes nós elemento.innerHTML = Modifica todo o conteúdo HTML do elemento elemento.attribute = Modifica o atributo do elemento HTML elemento.setAttribute(attribute, value) Modifica o atributo do elemento HTML elemento.style.property = Modifica o leiaute (CSS) do elemento HTML DOM – CONCEITO E MANIPULAÇÃO Para adicionar ou remover nós, no conteúdo de outros nós, a API DOM também provê um conjunto de métodos e propriedades A tabela abaixo apresenta algumas das principais maneiras para manipular estes nós document.createElement(elementoHTML) Cria um elemento HTML elemento.removeChild(elementofilho) Remove um elemento HTML elemento.appendChild(elementofilho) Adiciona um elemento HTML elemento.replaceChild(novoElemento, elementoAntigo) Substitui um elemento HTML document.write(códigoHTML) Adiciona um código HTML ou JavaScript no conteúdo do documento HTML DOM – CONCEITO E MANIPULAÇÃO Os eventos são comportamentos dinâmicos que ocorrem tanto com os elementos HTML quanto com o navegador (browser) Estes eventos podem acontecer através da interação com o usuário ou pela própria aplicação web, tais como: Quando um documento HTML é completamente carregado pelo navegador Quando um texto é alterado em um elemento input do tipo texto Quando um botão é pressionado (clicado) O JavaScript permite a manipulação destes e de outros eventos quando eles ocorrem no browser EVENTOS Para criar um evento em um elemento HTML, é necessário apenas atribuir uma função ao atributo referente ao evento desejado. Veja o exemplo abaixo: elemento.getElementById(“id”).onclick = function () { } Associa uma função ao evento onclick Exemplo: Associando um evento de click ao elemento HTML button, cujo seu atributo id possui o valor “idBotao”, através do JavaScript <script type=“text/javascript”> var botao = document.getElementById(“idBotao”); botao.onclick = function () { alert(“Este é o alerta de ” + botao.id) }; </script> EVENTOS É possível também definir estes eventos pelos seus atributos diretamente no código HTML, referenciado o tratamento por uma função (ou mais intruções) via JavaScript. Observe o exemplo abaixo: Exemplo: Associando um evento de click ao elemento HTML button, cujo seu atributo id possui o valor “idBotao”, através do JavaScript <button onclick=“EmitirAlerta();”> <script type=“text/javascript”> function EmitirAlerta() { alert(“Alerta emitido!”) }; </script> EVENTOS A tabela abaixo apresenta a lista dos eventos mais comuns do HTML onchange Acionado quando ocorrer alguma alteração no elemento HTML onclick Acionado quando o elemento HTML for pressionado (clicado) onmouseover Acionado quando o usuário move o ponteiro do mouse sobre o elemento HTML, na janela do navegador onmouseout Acionado quando o usuário move o ponteiro do mouse para fora do contexto do elemento HTML, na janela do navegador onkeydown Acionado quando o usuário pressiona alguma tecla, do teclado, no contexto do elemento HTML onload Quando o navegador finaliza a renderização (carregamento) de todo o documento HTML EVENTOS
Compartilhar