Roteiro Desenvolvimento de Aplicações Web JavaScript Roberto Vedoato vedoato@joinville.udesc.br Introdução Conceitos Usos Formas de inserção Sintaxe Variáveis Tipos de dados e literais Identificadores e palavras reservadas Operadores e expressões Estruturas de controle Funções Objetos DOM Eventos Caixas de Diálogo JavaScript 2 Script Script Um programa script do lado cliente é um roteiro que acompanha um documento HTML Pode estar embutido no próprio documento ou acompanhá-lo num arquivo externo Pode ser solto ou atrelado a ocorrência de eventos Quando soltos são executados na seqüência em que aparecem Atrelados a eventos são executados apenas quando o evento ocorre O navegador deve ser capaz de interpretar uma determinada linguagem para que o programa script possa ser executado Existem diversas linguagens script que pode ser interpretadas por browsers Javascript (Netscape) e JScript (Microsoft) ECMAScript (recomendada pelo W3C) VBScript Etc. JavaScript 3 JavaScript 4
Tipos de Linguagens Compiladas geração de código executável depende da plataforma de execução tradução lenta X execução rápida Interpretadas sem geração de código independente de plataforma execução lenta Híbridas geração de código intermediário independente de plataforma de execução tradução rápida X execução não tão rápida JavaScript Proposta pela Netscape em 1995 para ser executada no Navigator 2.0 Versão atual: 1.3 (para IE) - ECMA-262 1.5 (para Mozilla Firefox) ECMA-262-3 JavaScript é uma linguagem de script baseada em objetos Trata suas estruturas básicas, propriedades do navegador e elementos de um documento HTML como objetos JavaScript 5 JavaScript 6 JavaScript Permite a criação de páginas interativas e dinâmicas, que são interpretadas localmente pelo navegador, sem precisar recorrer a execução remota de programas no servidor Usa HTML como interface, diferentemente de plugins e applets que usam HTML apenas como base para exibição, mas que tem uma interface própria inserida na janela do navegador Tem sintaxe semelhante a Java e C++ É sensível ao caso (maiúsculas diferentes de minúsculas) Usos Possibilita extensões à documento HTML Permite realizar cálculos e computação Pode modificar o conteúdo de um documento dinamicamente Permite processar entradas de um formulário HTML Pode ser ativado por eventos que afetam um documento Pode estar relacionado a controles para produzir elementos de interfaces gráficas JavaScript 7 JavaScript 8
Java x JavaScript Formas de inserção Blocos Script Java: linguagem híbrida, fortemente tipada, orientada a objetos, com classes, objetos, herança e polimorfismo JavaScript: linguagem interpretada, fracamente tipada, baseada em objetos, sem classes, herança e polimorfismo Códigos executáveis em páginas HTML (páginas dinâmicas) Java: classes compiladas e carregadas remotamente JavaScript: instruções dispersas ao longo da página HTML O elemento HTML SCRIPT permite inserir um script num documento HTML O script deve estar delimitado pelas tags <SCRIPT>... </SCRIPT> Usado para definir funções usadas pela página, gerar HTML em novas páginas ou alterar a interpretação do HTML da página pelo navegador Podem estar tanto no cabeçalho (geralmente funções associadas a eventos) quanto no corpo de um documento. Podem existir diversas declarações num mesmo documento JavaScript 9 JavaScript 10 Formas de inserção Blocos Script Formas de inserção Blocos Script O elemento noscript indica ao browser uma alternativa quando ele não entende uma linguagem script <SCRIPT type="text/javascript"> Instruções JavaScript... </SCRIPT> <NOSCRIPT> <P>Seu browser não suporta scripts. Acesse <a href= URL">versão sem scritps </a> </NOSCRIPT> Pode esconder um script com comentários fazendo com que o navegador ignore o programa script <SCRIPT type="text/javascript"> <!-- Instruções JavaScript... --> </SCRIPT> JavaScript 11 JavaScript 12
Formas de inserção - Anexados Um script descrito em um arquivo externo pode ser associado a um documento através do atributo src na tag <SCRIPT> <SCRIPT src = URL > Usado para definir funções que serão usadas por várias páginas de um site O arquivo deve ter a extensão.js e conter apenas código JavaScript O servidor Web deve estar configurado para relacionar a extensão.js como o tipo MIME application/x-javascript Formas de inserção Em descritores Instruções JavaScript podem serem inseridas dentro de descritores HTML sensíveis a eventos Usadas para tratar eventos do usuário em links, botões e componentes de entrada de dados, durante a exibição do documento Os eventos serão vistos posteriormente As três formas de inserção podem ser usadas concomitantemente num mesmo documento JavaScript 13 JavaScript 14 Especificação da Linguagem Script Exemplo de especificação HTML não especifica nenhuma linguagem script preferencial Deve-se especificar qual a linguagem script padrão de um documento usando a tag meta com atributos < META http-equiv= Content-Script-type content= type > Onde type pode ser text/javascript text/vbscript etc. JavaScript 15 <HTML> <HEAD> <TITLE>... </TITLE> <META http-equiv= Content-Script-type content= text/javascript > </HEAD> <BODY> <SCRIPT type= text/javascript > Instruções JavaScript... </SCRIPT> </BODY> </HTML> JavaScript 16
Especificação e Compatibilidade Variáveis <script type="text/javascript"> compatível com qualquer browser <script language="javascript"> compatível com qualquer browser <script language="javascript1.3"> browser deve ser compatível com JS 1.3 (por exemplo, Internet Explorer 6) <script language="javascript1.5"> browser deve ser compatível com JS 1.5 (por exemplo, Mozilla Firefox) O atributo language no elemento SCRIPT é opcional para JavaScript Variáveis Globais criadas fora de uma função e usadas em todo o programa consideradas como propriedades da janela que contém o documento Locais existem apenas na função A declaração não é obrigatória var nome_da_variável Identificadores iniciadas por letra ou _ nome contém letras e dígitos JavaScript 17 JavaScript 18 Variáveis Variáveis Tipos Primitivos Number (decimais, octais 0 e hexadecimais 0x ) Boolean (Lógicas true, false) String (cadeia de caracteres Unicode) Null (nulo) Undefined (indefinido) Fracamente tipada s = texto ; s = false; s = 1234; oct = 0677; hexa = 0xffac; soma = s + oct + hexa Qualquer valor entre aspas é uma string Para converter um número ou valor booleano em string basta concatenar com uma string vazia. Exemplo 1 : a = 10; b = "" + a; // b contém a string 10 Exemplo 2 : texto = 3 + 5 + : + 3 + 5; // 8:35 texto = (3 + 5) + : + (3 + 5); // 8:8 Para a conversão de strings em números utiliza-se as funções nativas: parseint(string) e parsefloat(string) JavaScript 19 JavaScript 20
Caracteres especiais e Comentários Operadores Matemáticos Caracteres especiais \n - newline \r - carriage return \f - form feed \t - horizontal tab \b - backspace \\ \ \ Comentários // - comentário de linha /*... */ - comentário de bloco JavaScript 21 + - * / concatenação, adição subtração multiplicação divisão % resto da divisão ++ incremento unário -- decremento unário JavaScript 22 Operadores de Atribuição Operadores Lógicos e Relacionais = Atribuição += Soma ou concatenação e atribuição -= Subtração e atribuição *= Multiplicação e atribuição /= Divisão e atribuição %=Resto e atribuição == igual!= diferente < > menor que maior que <= menor ou igual >= maior ou igual && E lógico OU lógico JavaScript 23 JavaScript 24
Estruturas de Controle Palavras reservadas Estruturas de Controle if (expressão) {... } else {... } while (expressão) {...} do {...} while (expressão) for (inicialização; expressão; incremento ou decremento) {... } for (variavel_indice in Objeto) {... } Similar a Delphi, lê todas as propriedades de um objeto e extrai seus valores Blocos como em C e Java, delimitados por {... } abstract boolean break byte case cath char class const continue default do double else extends false final finally float for function goto if implements import in instanceof int interface long native null package private protected public return short static super switch synchronized this throw throws transient true try var void while with JavaScript 25 JavaScript 26 Funções Nativas Funções do usuário parseint (string, base) converte para inteiro numa base (opcional) parsefloat (string, base) converte para float numa base (opcional) escape (string) converte um string em ASCII portável Exemplo: nome = escape(joão); // Jo%E3o unescape (string) converte ASCII portável em string isfinite (valor) verdadeiro se o argumento é finito isnan (valor) verdadeiro se o argumento não é um número eval (string) interpreta o string passado como parâmetro como código JS. Oferece acesso direto ao interpretador JS. Exemplo: result = eval( 4 + 3 / 12 ); Uma vez criada uma função pode ser usada globalmente function nomedafunção (param1,..., paramn) {...} Para retornar um valor utiliza-se uma instrução return function soma () { a = 2; b = 3; return a + b; } Identificadores usados para nomes de função são propriedades do contexto onde foram definidos. Não pode haver uma variável global com o mesmo nome de uma função Pode-se copiar a definição da função para outra variável, por exemplo: sum = soma; JavaScript 27 JavaScript 28
Funções do usuário Objetos Exemplo function idade( anos) { if (anos >= 18) { alert ( Maior de Idade ) } else { alert ( Menor de idade ) } Javascript é uma linguagem baseada em objetos. Objetos consistem de: Uma coleção de propriedades Métodos que realizam operações nos dados das propriedades Existem classes nativas Object, Array, Boolean, String, Number, Math, Date, Function Todos tipos primitivos e não nulos tem uma representação em obejto Objetos são instâncias de classes definidas com new var nomevar = new ClassName; var data = new Date(); O acesso aos métodos é na forma nomeobjeto.nomemétodo(parâmetros) Exemplo nomestring.bold(); nomestring.fontsize(10); r = Math.random(); JavaScript 29 JavaScript 30 Objetos Classes Objetos são representados por variáveis do tipo object Esse tipo é capaz de armazenar coleções de variáveis como sendo suas propriedades Exemplo1: // Cria objeto1 e atribui seus campos var objeto1 = new Object; objeto1.x = 3; objeto1.y = 4; objeto1.z = 5; // Cria objeto2 a partir dos valores objeto2 = {x:3, y:4, z:5 }; Exemplo2: // Cria variável do tipo objeto que armazena um objeto Date dataatual = new Date(1006, 09, 04); JavaScript 31 Definindo o Construtor da classe Círculo function Circulo(x, y, r) { this.x = x; this.y = y; this.raio = r; } Cria objeto c1 da classe Circulo. O que transforma a função em construtor é a chamada com o operador new var c1 = new Circulo(0,0,15); JavaScript 32
Métodos Métodos e propriedades Para definir métodos para uma classe, basta criar uma função e copiá-la para uma propriedade do construtor function metodo1() { document.write( Coordenadas + this.x + this.y); } function Circulo(x, y, r) { this.x = x; this.y = y; this.raio = r; this.imprimecoordendas = metodo1; } Quando não temos acesso ao construtor, podemos criar novos métodos e propriedades permanentes usando a sua propriedade prototype Exemplo adicionando propriedade ao tipo Date d = new Date(); Date.prototype.ano = d.getyear() + 1900; JavaScript 33 JavaScript 34 Estruturas e Operadores para Objetos this this with typeof void for... in JavaScript 35 Referência ao próprio objeto. Usados: Em atributos de eventos nos Objetos HTML Dentro de construtores e métodos de Objetos JavaScritpt Exemplo <input type=button value="cadastrar" onclick="escrever(this.form.area)" > this refere-se ao objeto button, form é a propriedade do objeto que faz referência ao form onde está contido, e Area é uma propriedade desse form pai JavaScript 36
with (objeto) typeof e constructor.name Útil quando precisamos utilizar várias propriedades de um mesmo objeto Exemplo with (c1) // objeto do tipo circulo { x = 13; y = 50; raio = 100; } typeof Retorna uma string identificando o tipo do objeto primitivo ( Exemplo var coisa; // typeof coisa: undefined var boo = true; // typeof boo: boolean var c = new Circulo(3, 4, 5); // typeof c: object typeof Circulo // function typeof Document // function JavaScript 37 JavaScript 38 void for (variável in Objeto) Usado para descartar o valor retornado de uma função Exemplo <a href= javascript:void(cadastraform()) > Cadastrar </a> Usado para ler todas as propriedades de um objeto, e extraír os seus valores. for (variavel in nome_do_objeto) { // declarações usando variavel } Exemplo de função que retorna todas propriedades de um objeto function mostraprops(objeto) { props = ""; for (idx in objeto) { props += idx + " = " + objeto[idx] + "\n"; } return props; } JavaScript 39 JavaScript 40
Classes e Objetos Nativos Arrays Global Object (objeto genérico) Number String Boolean Date Array Math (único que não possui construtor, pois é objeto e não classe) Function (objeto que representa funções,métodos e construtores) var a = new Array (12); var b = new Array (2); a[0] = 15; a[1] = 20; b[0] = new Array (4); b[1] = new Array (7); b[1][4] = 24; // simples // cria linhas // cria colunas O tamanho dos vetores pode ser redefinido! JavaScript 41 JavaScript 42 Objeto Math Objeto String E LN10 LN2 PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor max min pow random round sin sqrt tan length big blink bold charat fixed fontcolor fontsize indexof italics lastindexof link small strike sub substring sup tolowercase touppercase JavaScript 43 JavaScript 44
Objeto Date DOM getmonth setmonth getdate setdate getday gethours sethours getminutes setminutes getseconds setseconds gettime settime gettimezoneoffset getyear setyear togmtstring tolocalestring Elementos de um documento HTML podem ser modificados dinamicamente por programas scripts DOM (Document Object Model) é um modelo de objetos utilizado em documentos HMTL, que define uma hierarquia de objetos O DOM relaciona cada elemento HTML, respeitando sua hierarquia, a um objeto JavaScript que possui métodos e propriedades associadas Exemplos: <BODY> objeto Document <FORM> objeto Form <INPUT TYPE= text > objeto Text JavaScript 45 JavaScript 46 Equivalência de expressões HTML e DOM Equivalência de expressões HTML e DOM <TITLE>Test Document</TITLE> <P><B>Hello World!<\B> <TITLE>Test Document</TITLE> <SCRIPT type="text/javascript"> document.write("<p><b>hello World!<\/b>") </SCRIPT> JavaScript 47 O nome de um objeto associado a um elemento pode ser definido em HTML, através do atributo NAME <IMG name= figura1 src= fig.jpg > Document.figura1.src= fig.jpg <P name= pinicial style= color:black > Document.pinicial.color=black <FORM name= form1 > <INPUT type= text name= endereco > Document.form1.endereco Document.form1.endereco = Rua da Silva A = Document.form1.endereco JavaScript 48
Hierarquia DOM DOM - Objetos de um navegador Window window document frames history navigator location document document plugins all anchors applets body embeds objeto de mais alto nível Navigator indicando o navegador Document contém propriedades e objetos do documento corrente Legenda object event screen filters forms images links plugins Location propriedades baseadas na URL atual History contem as URLs previamente acessadas collection scripts stylesheets JavaScript 49 JavaScript 50 DOM Objetos de um documento DOM Objetos de um formulário Link Image Area Anchor Object Plugin Form Div ou Layer Button Radio Checkbox Select Text Textarea Password Hidden Submit Reset File JavaScript 51 JavaScript 52
Métodos Úteis Exemplo de Objetos numa Página document.write document.writeln window.prompt window.confirm window.alert windows.close history.back Observação: a referência a janela principal window pode ser omitida JavaScript 53 image[0] form[0].nome form[0].email window document body Caso não dermos nomes aos objetos, podemos referenciá-los pelas propriedades de Document JavaScript 54 Eventos Eventos Eventos ocorrem quando o usuário interage com o navegador ou por ações do sistema operacional ou do próprio navegador Um evento pode ser associado a um elemento HTML e a uma função script. Quando ele ocorre a função é executada Há diversos eventos programáveis em adição aos 3 eventos nativos e não programáveis do HMTL. Clique em: Link ou imagem mapeada Botão submit Botão reset Quando acionados em eventos nativos do HTML utiliza-se uma URL javascript: <a href= javascript:alert( Selecionou o link ) > link </a> JavaScript 55 Os eventos programáveis são usados através de atributos HTML em elementos específicos Sempre iniciam com o prefixo ON Exemplo <FORM> <INPUT TYPE= button ONCLICK= alert( Você acionou o botão! ) VALUE= Clique aqui"> </FORM> Os valores recebidos pelos atributos é código JavaScript Aspas duplas são usadas para representar o atributo HTML e que aspas simples são usadas dentro do método alert() JavaScript é sensível ao caso (alert), HMTL não (onclick, ONCLICK)! JavaScript 56
Eventos Eventos Os objetos para interação são divididos em Input (propriedade type) Password, text, hidden, checkbox, radio, button, reset, submit Textarea Select Valores lidos a partir de um campo de formulário em uma página HTML ou janela de entrada de dados sempre são strings. JavaScript 57 Evento funcionalidade elemento onde é suportado onload na carga do documento - <body> onunload na descarga do documento - <body> onclick quando o objeto recebe um clique do mouse. <a>, <input> onselect quando o objeto é selecionado. <input type=text> e <textarea> onchange quando o objeto perde o foco e houve mudança de conteúdo <input type=text>, <textarea>, e <select> onfocus quando o objeto recebe o foco <body>, <form>, <input>, <textarea>, <select> e <option> onblur quando o obejto perde o foco. <body>, <form>, <input>, <textarea>, <select> e <option> onsubmit antes de enviar um formulário <input type=submit>, onreset antes de limpar um formulário <form> onerror - quando ocorre um erro na carga de uma pagina ou imagem - <body> e <img> onabort quando a carga de uma imagem é cancelada - <img> onmousedown, onmouseup, onmouseover, onmousemove, onmouseout movimentos do mouse - <a> e <area> JavaScript 58 Caixas de Diálogo Apenas observação alert (mensagem) Com retorno de confirmação (OK ou CANCELAR) confirm (mensagem) Ver exemplo2 Com caixa de texto retorno = prompt (mensagem, texto inicial) Onde: Receptor: campo que recebe a informação digitada pelo usuário Mensagem: aparece como rótulo da caixa de input Texto de entrada: opcional, aparece na linha de digitação Ver exemplo3 JavaScript 59 DHTML HTML Dinâmico consiste da junção das tecnologias HTML CSS DOM Scripts É a manipulação de elementos de um documento HTML e dos estilos CSS por um programa script de acordo com o DOM (modelo de objetos do documento) Scripts são ativados por eventos e modificam objetos HTML e CSS JavaScript 60
Documentação Mozilla.org http://www.mozilla.org/js/ Referência Rápida http://www.devguru.com/technologies/ecmascript/quickref/javascript _index.html JavaScript 61