Os componentes HTML possuem a capacidade de configurar eventos

Transcrição

1 Javascripts (JS)

2 Eventos no HTML Os componentes HTML possuem a capacidade de configurar eventos Estes eventos são tratados por um código específico, criado pelo programador, em funções javascript Alguns eventos são: onclick, onblur, onmouseover, onchange... e 2

3 O que é Javascript Não é JAVA Linguagem de Script para HTML Executa dentro da TAG <script> Roda na página do cliente Utilizado para validar valores e adicionar funcionalidades ao HTML Utilizado para dar interatividade as páginas HTML e 3

4 Criando funções JavaScript Utilizamos a palavra reservada function seguida do nome da função e da lista de parâmetros JavaScript é FRACAMENTE TIPADA. Ou seja, não é necessário explicitar o tipo de um parâmetro ou variável e 4

5 Chamando funções JavaScript Qualquer elemento criado em um documento HTML pode chamar uma função javascript Devem ser obedecidas as regras de nome da função e lista de parâmetros e 5

6 Chamando funções JavaScript Podemos chamar em três ocasiões Diretamente no código JavaScript nome_funcao(); Através de um link <a href= javascript:nomefuncao() >Link</a> Através de um evento HTML <input type= button onclick= nome_funcao(); > e 6

7 Funções Básicas do Javascript Alert( mensagem ); Confirm( pergunta ); e 7

8 Manipulando Valores em JavaScript Podemos obter a referência dos elementos de uma página web utilizando a função getelementbyid Exemplos //Input do tipo Text. Também funciona quando o tipo for Button document.getelementbyid( nome_do_elemento ).value; //Input do tipo Radio ou um Checkbox document.getelementbyid( nome_do_elemento ).checked; //Escrita de um texto no id informado document.getelementbyid( nome_do_elemento ). innerhtml; e 8

9 Operador com String + text1 = Good text2 = Morning text3 = text1 + text2 Resultado: "Good Morning" e 9

10 Função eval() A função eval () avalia ou executa os argumentos Se o argumento for uma expressão, eval () avalia a expressão. Se o argumento for uma ou mais declarações JavaScript, eval () executa as instruções e 10

11 Exemplo: calculadora e 11

12 Atividade 5 Baseado no código disponibilizado no site da disciplina da Calculadora faça o que se pede abaixo: Crie um botão para limpar as caixas de texto Adicione um botão para calcular a média e 12

13 Objetos JavaScript Window Location Navigator History Document e 13

14 Objetos JavaScript Exemplos de uso: navigator.appcodename; navigator.appname; navigator.platform; navigator.useragent; history.back(); history.forward(); window.print(); window.open( pagina.html ); document.write( mensagem ); e 14

15 Objetos JavaScript Exemplos de uso: location.pathname location.port location.protocol location.hostname e 15

16 e 16

17 e 17

18 04/05/2017 Rômulo da Silva Lima Slid e 18

19 Comentários e 19

20 Form e 20

21 Atividade 6 Criar a pasta scripts e dentro dela salvar um arquivo global.js Adicionar um form o evento onsubmit do form chamará uma função javascript Validar se o nome está preenchido Usar os comandos para chamar a função confirm que irá fazer a seguinte pergunta: Deseja salvar os dados <Nome>? Após a confirmação escrever na pagina Dados salvo com sucesso! Criar um novo botão (Imprimir) onde o mesmo terá o evento onclick que chamará a função de impressão Adicionar ao lado do link Buscar por CEP um outro link com um +, onde o mesmo irá chamar uma função javascript que abre uma nova aba do browser com o site dos correios 05/05/2017 Rômulo da Silva Lima Slid e 21