PROF. DANIELA PIRES. Aplicações para Web. Aplicações para Web - FMU Prof. Daniela Pires

Tamanho: px

Começar a partir da página:

Download "PROF. DANIELA PIRES. Aplicações para Web. Aplicações para Web - FMU - 2012 - Prof. Daniela Pires"

Vítor Klettenberg de Carvalho
8 Há anos
Visualizações:

1 PROF. DANIELA PIRES Aplicações para Web 1

2 *JavaScript * Validação de Formulários * HTML Dinâmico 2

3 *Linguagem de scripting * orientada para objeto * interpretada pelo browser *versão atual: 1.3 (para IE) -ECMA-262 *1.5 (para Mozilla Firefox) ECMA *Utilizado na forma de scripts embutidos no código HTML *JavaScript não é JavaJava é uma linguagem executável, independente do browser e de HTML 3

4 *Aplicações execução procedural e orientada a objeto *validação de campos *geração de HTML de forma dinâmica *consulta e alteração de atributos de objetos da página (imagens, links, forms, elementos) *reação a eventos *Sintaxe semelhante a Java ou C++ 4

5 <html> <head> <title>exemplo</title> </head> <body> Esta linha está escrita em HTML <script language="javascript">document.write("gerada pelo JavaScript"); </script> Novamente HTML </body> </html> 5

6 Informações sobre o browser e ambiente (1/2) <html> <head><title>extraindo Informações</title></head> <body> <h1>informações do documento</h1><hr> <script type="text/javascript"> function referringpage() { } if (document.referrer.length==0 { return("<i>nenhum</i>"); } else { } return (document.referrer); 6

7 Informações sobre o browser e ambiente (2/2) document.writeln ("<h2>informações do documento:</h2>"+ "<ul>"+ "<li><b>url:</b> " + document.location + "</li>" + "<li><b>data Modificação:</b> " + document.lastmodified + "</li"> + "<li><b>título:</b>" + document.title + "</li"> + "<li><b>pagina de origem:</b>" + referringpage() + "</li>" + "</ul>"); document.writeln ("<h2>informações do Browser:</h2>"+ "<ul>"+ "<li><b>nome:</b> " + navigator.appname + "</li>" + "<li><b>versão:</b> " + navigator.appversion + "</li>" + "</ul>"); </script> </body></html> 7

8 Informações sobre o browser e ambiente 8

9 *Variáveis Globais -criadas fora de uma função, usadas em todo o programa *Locais -existem apenas na função *Identificação de variáveis iniciadas por letra ou _ *nome contém letras e dígitos *Nome <> nome <> NOME 9

10 *Tipo *Number (inteiras, ponto flutuante, octais e hexadecimais) *Boolean -Lógicas *String *Null (nulo) *Undefined (indefinido) *Arrays 10

11 *Declarações *var x= 10; *var y= "11"; *var z= '11'; *Caracteres especiais *\n newline \t -tab *\f -form feed \b -backspace *\r -carriage return \\ *\ \' 11

12 *Operadores *+ concatenação, adição *-subtração ** multiplicação */divisão *%resto da divisão *++incremento (como em C) *--decremento 12

13 *Comparação e lógicos *< menor que *>maior que *==igual *!= diferente *<=menor ou igual *>=maior ou igual *&&E lógico * OU lógico 13

14 *Atribuição *= 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 14

15 *parseint converte para inteiro *parsefloat converte para float *Escape converte um string em ASCII portável *Unescape converte ASCII portável em string *isfinite verdadeiro se or argumento é finito *isnan verdadeiro se o argumento não é um número *Eval avalia um string de código JS *Number converte para número *String converte para string 15

16 *document.write *document.writeln *window.prompt *window.confirm *window.alert *windows.close *history.back 16

17 *Estruturas de Controlefor (inicialização; contador; ação) {... } *for (variavel in Objeto) {... } *if (expressão) {... } else {... } *while (expressão) {...} *do {...} while (expressão) *Blocoscomo em C e Java, delimitados por {... } *Funções 17

18 *ComandosVar *Function *Comment *Export *Import *Label *throw *try...catch *ControleDo...While *For *For..In *If..Else *While *With *Continue *Break *Return *Switch 18

19 * 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 19

20 var a = new Array (12);// simples var b = new Array (2);// cria linhas a[0] = 15; a[1] = 20; b[0] = new Array (4);// cria colunas b[1] = new Array (7); b[1][4] = 24; 20

21 *Objetos do DOM (Documento Object Model)Document, Window, Navigator *Objetos Especiais Date String Math Global Number Boolean Array Object 21

22 // 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 }; 22

23 // Construtor da classe Navio function Navio(x, y, velocidade, direcao) { this.x = x; this.y = y; this.velocidade = velocidade; this.direcao = direcao; } // Cria objeto navio1 da classe Navio // e lista os campos var navio1 = new Navio(0,0,15,90); criartabela("navio1",navio1); 23

24 function grauspararadianos(graus) { return(graus * Math.PI / 180.0) } function mover() { var angulo = grauspararadianos(this.direcao); this.x = this.x + this.velocidade * Math.cos(angulo); this.y = this.y + this.velocidade * Math.sin(angulo); } // Construtor da classe Navio function Navio(x, y, velocidade, direcao) { this.x = x; this.y = y; this.velocidade = velocidade; this.direcao = direcao; this.mover = mover; } 24

25 // Cria objeto navio1 da classe Navio // e lista os campos var navio1 = new Navio(0,0,15,90); criartabela("navio1 (original)",navio1); navio1.mover(); criartabela("navio1 (nova pos.)",navio1); 25

26 * E * LN10 * LN2 * PI * SQRT1_2 * SQRT2 * abs * acos * asin * atan * ceil * cos * exp * floor * max * min * pow * random * round * sin * sqrt * tan 26

27 * length * big * blink * bold * charat * fixed * fontcolor * fontsize * indexof * italics * lastindexof * link * small * strike * sub * substring * sup * tolowercase * touppercase 27

28 * getmonth * setmonth * getdate * setdate * getday * gethours * sethours * getminutes * setminutes * getseconds * setseconds * gettime * settime * gettimezoneoffs et * getyear * setyear * togmtstring * tolocalestring 28

29 window image[0] image[1] document body form[0].nome 29 form[0].

30 *onload *onunload *onchange *onblur *onfocus *onclick *onmouseover *onselect *onsubmit 30

31 <script language="javascript"> function validaform (form) { if form.campo.value==null form.campo.value.length == 0) { } else } </script>... form.campo.focus(); return false; return true; <form action="resp.jsp" method="post" name="formulario" onsubmit="return validaform(this);"> <input type="text" name="campo"></input> </form> 31

32 *Referência Rápida * ckref/javascript_index.html *ECMAScript Language Specification (JavaScript 1.5) * *Mozilla.org * 32

Documentos relacionados

Roteiro. Desenvolvimento de Aplicações Web. JavaScript. Script. Script

Roteiro. Desenvolvimento de Aplicações Web. JavaScript. Script. Script 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