36
INTRODUÇÃO JavaScript PROF. ME. HÉLIO ESPERIDIÃO 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

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tamanho de strings.

36