Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira [email protected].
Transcript of Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira [email protected].
![Page 1: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/1.jpg)
![Page 3: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/3.jpg)
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
![Page 4: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/4.jpg)
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)
![Page 5: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/5.jpg)
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 /* */
![Page 6: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/6.jpg)
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>
![Page 7: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/7.jpg)
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)
![Page 8: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/8.jpg)
Palavra-chave this• Utilizamos this para referir-se ao objeto atual. Em geral
refere-se ao objeto chamado no método• Sintaxe:
– this[.propertyName]
![Page 9: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/9.jpg)
Palavra-chave this• 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 = 3onChange="validate(this, 18, 99)">
![Page 10: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/10.jpg)
Estrutura de decisão if...else• Sintaxe:
if (condiçaõ) {
//comandos1
}
[else {
comandos2
} ]
![Page 11: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/11.jpg)
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>;
}
![Page 12: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/12.jpg)
Funções• Sintaxe para criação de funções
function nomeFunção(argumentos)
{
<comando 1>;
<comando 2>;
}
![Page 13: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/13.jpg)
Funçõesfunction fatorial(n) {if ((n == 0) || (n == 1))
return 1;else {
result = (n * fatorial(n-1) )return result;
}}
![Page 14: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/14.jpg)
Funções• HTML
a=fatorial(1) // retorna 1b=fatorial(2) // retorna 2c=fatorial(3) // retorna 6d=fatorial(4) // retorna 24
![Page 15: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/15.jpg)
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 argumentsfor (var i=1; i<arguments.length; i++) {
result += arguments[i] + separator;}return result;
}
![Page 16: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/16.jpg)
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")
![Page 17: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/17.jpg)
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
![Page 18: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/18.jpg)
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>
![Page 19: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/19.jpg)
Eventos• “Eventos ocorrem como resultado de uma ação do
usuário no sistema”– Ver capítulo 10 do arquivo ClientGuideJS13.pdf
![Page 20: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/20.jpg)
Eventos
Evento Quando é chamadoonBlur 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
![Page 21: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/21.jpg)
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)
![Page 22: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/22.jpg)
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; }}
![Page 23: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/23.jpg)
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;
![Page 24: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/24.jpg)
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
![Page 25: Tecnologia para Web JavaScript Enrique Pimentel Leite de Oliveira enrique.leite@aes.edu.br.](https://reader036.fdocuments.net/reader036/viewer/2022062318/552fc110497959413d8c5c49/html5/thumbnails/25.jpg)