Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false...
Transcript of Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false...
![Page 1: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/1.jpg)
INTRODUÇÃO
JavaScriptPROF. ME.
HÉLIO ESPERIDIÃO
1
![Page 2: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/2.jpg)
O que é JavaScript?
3
É uma linguagem de programação interpretada, que pode ser usada junto com o HTML.
Esta linguagem é interpretada pelo navegador.
Permite que a pagina fique mais dinâmica, com uma maior interação com o leitor.
O código JavaScript, não é compilado, e deve ser adicionado, no código fonte, junto com os comandos da linguagem HTML.
![Page 3: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/3.jpg)
Meu primeiro programa em JavaScript
3
O javascript deve obrigatoriamenteentrar entre as tags de script
![Page 4: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/4.jpg)
Caixa de Mensagem
4
Envia uma caixa de mensagem
![Page 5: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/5.jpg)
OPERADORES LÓGICOS E DE COMPARAÇÃO
5
= = Igual
!= Diferente
> Maior
>= Maior ou Igual
< Menor
<= Menor ou Igual
&& E
|| Ou
![Page 6: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/6.jpg)
Operadores de atribuição
6
= X=5 Atribuir
+= x+=5 é o mesmo que: x=x+5 Soma ou concatenação e
atribuição:
-= x-=5 é o mesmo que: x=x-5 Subtração e atribuição.
*= x*=5 é o mesmo que: x=x* Multiplicação e atribuição.
/= x/=5 é o mesmo que: x=x/5 Divisão e atribuição.
%= x%=5 é o mesmo que: x=x%5 Módulo e atribuição.
++ X++ é o mesmo que x=x+1 Incrementa mais 1
![Page 7: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/7.jpg)
Declarando VariáveisNão é necessário especificar o tipo do dado.
7
![Page 8: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/8.jpg)
Caixa de confirmação
Retorna true ou false
Envia uma caixa de confirmação com as opções sim ou não.
8
![Page 9: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/9.jpg)
Caixa de Entrada de DadosPermite a entrada de dedos de forma direta por meio de uma caixa de entrada de dados.
9
Define o titulo da caixa de entradaDefine o texto
padrão
![Page 10: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/10.jpg)
Comentários
São utilizados para deixar o código legível para manutenção ou para outros programadores.
10
![Page 11: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/11.jpg)
Estruturas de ControleIF (se)
11
![Page 12: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/12.jpg)
Estruturas de ControleIF (se) ELSE(senão)
12
![Page 13: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/13.jpg)
Estruturas de repetição(for)
13
![Page 14: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/14.jpg)
Estruturas de repetição(While)
14
![Page 15: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/15.jpg)
Conversão de tipos de dados
15
![Page 16: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/16.jpg)
EventosonFocusExecuta quando o objeto recebe o foco. Usado para Button, Checkbox, Password, Radio, Select, etc.
16
Nome do eventoFunção que deve ser chamadaquando o evento for executado
O nome da função é definidapelo programador
![Page 17: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/17.jpg)
EventosonBlur
Executa quando um elemento perde o foco. Usado para Button, Checkbox, Password, Radio, Select, Text, Textarea, etc.
17
![Page 18: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/18.jpg)
Eventos onChangeExecuta quando um campo perde o foco ou tem seu valor modificado. Usado para Select, Text, Textarea,etc.
2
![Page 19: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/19.jpg)
Eventos onClick
Executa quando um objeto é clicado. Usado para Button, Checkbox, Links(<a>), Radio, etc.
19
![Page 20: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/20.jpg)
Eventos onKeyDownExecuta quando uma tecla é pressionada. Usado para Text e Textarea, etc.
20
![Page 21: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/21.jpg)
Eventos onLoadExecuta quando o navegador termina o carregamento de uma janela, de uma imagem etc.
4
![Page 22: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/22.jpg)
Eventos onUnloadExecuta quando o usuário sai da janela.
22
![Page 23: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/23.jpg)
Recuperar valores Caixa de texto/password
23
EventoCaso ocorra o evento a função será chamadaID do elemento
Recupera um elemento pelo id
Especifica o ID do elemento
propriedade do elemento
![Page 24: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/24.jpg)
Recuperar valores Caixas de Área A recuperação de valores de uma caixa de área é semelhante a caixa de texto e password
24
![Page 25: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/25.jpg)
Recuperar valores Check BoxRetorna True ou false, ◦ True quanto estivar marcado e False quando estiver desmarcado.
25
![Page 26: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/26.jpg)
Recuperar valores RadioRetorna True ou false, true quanto estivar marcado e false quando estiver desmarcado.
26
![Page 27: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/27.jpg)
Recuperar valores Caixa de Combo
27
Retorna o valor de VALUEex: se o usuário escolher PEDRAretorna 1
Retorna o valor do textoEx: pedra, arvore
![Page 28: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/28.jpg)
Recuperar valores Caixa de lista
28
![Page 29: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/29.jpg)
Inserindo Valores em FormuláriosCaixa de texto
29
Id do Elemento que deseja mudar o texto
Novo Texto
Propriedade de uma caixa de textoOu text area
![Page 30: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/30.jpg)
Inserindo Valores em FormuláriosCheckbox e Radio
30
Id do Elemento Propriedade do elemento
Marca ou desmarca um checkboxou radio box
![Page 31: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/31.jpg)
Inserindo Opções caixas de combo
31
Cria uma nova opção
atribui texto da opçãoatribuio value para opção
Adiciona a opção na caixa de combo
![Page 32: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/32.jpg)
Vetores e matrizes
32
![Page 33: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/33.jpg)
Matrizes
33
![Page 34: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/34.jpg)
Matrizes
34
![Page 35: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/35.jpg)
Escrevendo em DIVs e Spans
35
ID do elemento HTML
innerHTML permiteinserir html via código
![Page 36: Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false Envia uma caixa de confirmação com as opções sim ou não. 8](https://reader031.fdocumentos.tips/reader031/viewer/2022012923/5ba130eb09d3f2716b8bcf1b/html5/thumbnails/36.jpg)
Tamanho de strings.
36