Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira

Apresentação em tema: "Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira"— Transcrição da apresentação:

1

2 Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br

3 O que é JavaScript JavaScript é uma linguagem que permite escrever scripts, ou pequenos programas não-compilados, que são executados por um navegador Web As linguagens de script são linguagens de programação, portanto podem fazer cálculos, manipular objetos e responder a uma ampla variedade de eventos de usuário

4 Por que usar JavaScript? A linguagem JavaScript possibilita manipular páginas Web sem enviar uma requisição ao servidor Algumas das vantagens: –Facilidade de utilização –Aumento da eficiência do servidor –Integração com o Navegador (nativo)

5 Características do JavaScript Os scripts são inseridos em documentos HTML usando um dos três métodos: –Incluir scripts nas tags em resposta a eventos –Inserir scripts na seção head ou body do documento –Criar links com arquivos de script externos Toda expressão ou comando termina com ponto-e-vírgula (;) As expressões podem ser agrupadas em blocos entre chaves { } (Funções) Comentários são criados utilizando // ou /* */

6 A tag Ao colocar uma tag em um documento, diz-se ao navegador Web para tratar todas as linhas de texto que estão após a tag como script, e não como conteúdo da página Web Quando escrevemos script em JavaScript, devemos usar o atributo language=JavaScript Podemos usar o atributo src para incluir um script armazenado em um arquivo separado como parte da página Web – //código

7 Variáveis em JavaScript Uma variável é um container que pode armazenar um número, texto ou um objeto Sintaxes para declaração de variáveis: –nome_variavel = valor; –var nome_variavel = valor; Os nomes de variáveis seguem as seguintes regras: –Devem ser únicos –Aceitam somente letras, números e caractere sublinhado –Não podem começar com um número Abrangência de variáveis (Local e Global)

8 Palavra-chave this Utilizamos this para referir-se ao objeto atual. Em geral refere-se ao objeto chamado no método Sintaxe: –this[.propertyName]

9 Palavra-chave this Exemplo: function validate(obj, lowval, hival) { if ((obj.value hival)) alert("Invalid Value!") } HTML: Enter a number between 18 and 99: <INPUT TYPE = "text" NAME = "age" SIZE = 3 onChange="validate(this, 18, 99)">

10 Estrutura de decisão if...else Sintaxe: if (condiçaõ) { //comandos1 } [else { comandos2 } ]

11 Laços for e while Sintaxe for( ) for(var i=1; i<=10; i++) { ; } Sintaxe while( ) while(condição) { ; }

12 Funções Sintaxe para criação de funções function nomeFunção(argumentos) { ; }

13 Funções function fatorial(n) { if ((n == 0) || (n == 1)) return 1; else { result = (n * fatorial(n-1) ) return result; }

14 Funções HTML a=fatorial(1) // retorna 1 b=fatorial(2) // retorna 2 c=fatorial(3) // retorna 6 d=fatorial(4) // retorna 24

15 Array de Argumentos Exemplo: considere uma função que concatena diversas strings. O único argumento definido é a string que recebe o caractere de separação dos itens concatenados: Function myConcat(separator) { result=""; // initialize list // iterate through arguments for (var i=1; i<arguments.length; i++) { result += arguments[i] + separator; } return result; }

16 Array de Argumentos Continuação: // returns "red, orange, blue, " myConcat(", ","red","orange","blue") // returns "elephant; giraffe; lion; cheetah;" myConcat("; ","elephant","giraffe","lion", "cheetah") // returns "sage. basil. oregano. pepper. parsley. " myConcat(". ","sage","basil","oregano", "pepper", "parsley")

17 Objeto Date Possibilita trabalhar com data e hora Construtores: –new Date() –new Date(milliseconds) –new Date(dateString) –new Date(yr_num, mo_num, day_num [, hr_num, min_num, sec_num, ms_num]) Ver página 72 do arquivo clientreferenceJS13.pdf

18 Objeto Date Exemplo: Hoje é:

19 Eventos Eventos ocorrem como resultado de uma ação do usuário no sistema –Ver capítulo 10 do arquivo ClientGuideJS13.pdf

20 Eventos EventoQuando é chamado onBlurSempre que o visitante deixar um campo de formulário onChangeSempre que o visitante mudar o conteúdo de um campo onClickSempre que o visitante clicar em um botão onFocusSempre que o visitante digitar algo em um campo onLoadSempre que uma página Web é carregada ou recarregada onMouseOverSempre que o visitante colocar o mouse sobre um objeto onSelectSempre que o visitante selecionar o conteúdo de um campo onSubmitSempre que o visitante submeter um formulário onUnloadSempre que a página Web atual for trocada

21 Validação de Formulário A validação de formulários via scripts é uma das mais importante formas de utilização de JavaScript –Reduz o processamento de informações inconsistentes no servidor –Reduz o tempo de espera do usuário para receber uma mensagem de erro Normalmente a validação é realizada de duas formas: –Enquanto o usuário digita uma informação (evento Onchange) –Quando o usuário envia o formulário (evento OnSubmit)

22 Validação de Formulário Exemplo HTML: <form method="post" action="http://teste.aspx" onSubmit="return checkform(this)"> Função JavaScript: function checkform(thisform){ if (thisform.theName.value == null || thisform.theName.value == ""){ alert ("Por favor, entre seu nome"); thisform.theName.focus(); thisform.theName.select(); return false; }

23 Exercícios 1.Criar uma função em javascript para validar um email; 2.Criar uma função em javascript que concatene o conteúdo dos itens selecionados de uma listbox exiba-os em um textArea separados por ponto e vírgula;

24 Bibliografia www.javascriptmall.com www.mozilla.org/js/language www.javascript.com www.javascriptkit.com/javatutors www.mozilla.org/js/language/ www.js- examples.com/page/core_manual__contents. html

25