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

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

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)

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

A tag <script> Ao colocar uma tag <script> 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 <script language=“JavaScript” src=“script.js”> //código </script>

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)

Palavra-chave this Utilizamos this para referir-se ao objeto atual. Em geral refere-se ao objeto chamado no método Sintaxe: this[.propertyName] Exemplo: function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) alert("Invalid Value!") } HTML: <B>Enter a number between 18 and 99:</B> <INPUT TYPE = "text" NAME = "age" SIZE = 3 onChange="validate(this, 18, 99)">

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

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

Funções Sintaxe para criação de funções function nomeFunção(argumentos) { <comando 1>; <comando 2>; }

Funções HTML a=fatorial(1) // retorna 1 b=fatorial(2) // retorna 2 function fatorial(n) { if ((n == 0) || (n == 1)) return 1; else { result = (n * fatorial(n-1) ) return result; } HTML a=fatorial(1) // retorna 1 b=fatorial(2) // retorna 2 c=fatorial(3) // retorna 6 d=fatorial(4) // retorna 24

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;

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")

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

Objeto Date Exemplo: <h4>Hoje é:<script type="text/javascript"> <!-- var currentTime = new Date(); var month = currentTime.getMonth() + 1; var day = currentTime.getDate(); var year = currentTime.getFullYear(); document.write(day + "/" + month + "/" + year); //--> </script> </h4>

Eventos “Eventos ocorrem como resultado de uma ação do usuário no sistema” Ver capítulo 10 do arquivo ClientGuideJS13.pdf Alguns dos principais eventos: Evento Quando é chamado onBlur Sempre que o visitante deixar um campo de formulário onChange Sempre que o visitante mudar o conteúdo de um campo onClick Sempre que o visitante clicar em um botão onFocus Sempre que o visitante digitar algo em um campo onLoad Sempre que uma página Web é carregada ou recarregada onMouseOver Sempre que o visitante colocar o mouse sobre um objeto onSelect Sempre que o visitante selecionar o conteúdo de um campo onSubmit Sempre que o visitante submeter um formulário onUnload Sempre que a página Web atual for trocada 1

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)

Validação de Formulário Exemplo HTML: <form method="post" action="http://teste.aspx" onSubmit="return checkform(this)"> <input type=“text” name=“theName” /> </form> 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; }

Exercícios Criar uma função em javascript para validar um email; 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;

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.ht ml