Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false...

Post on 19-Sep-2018

219 views 0 download

Transcript of Introdução a JavaScript - helioesperidiao.com · Caixa de confirmação Retorna true ou false...

INTRODUÇÃO

JavaScriptPROF. ME.

HÉLIO ESPERIDIÃO

1

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.

Meu primeiro programa em JavaScript

3

O javascript deve obrigatoriamenteentrar entre as tags de script

Caixa de Mensagem

4

Envia uma caixa de mensagem

OPERADORES LÓGICOS E DE COMPARAÇÃO

5

= = Igual

!= Diferente

> Maior

>= Maior ou Igual

< Menor

<= Menor ou Igual

&& E

|| Ou

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

Declarando VariáveisNão é necessário especificar o tipo do dado.

7

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

Comentários

São utilizados para deixar o código legível para manutenção ou para outros programadores.

10

Estruturas de ControleIF (se)

11

Estruturas de ControleIF (se) ELSE(senão)

12

Estruturas de repetição(for)

13

Estruturas de repetição(While)

14

Conversão de tipos de dados

15

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

EventosonBlur

Executa quando um elemento perde o foco. Usado para Button, Checkbox, Password, Radio, Select, Text, Textarea, etc.

17

Eventos onChangeExecuta quando um campo perde o foco ou tem seu valor modificado. Usado para Select, Text, Textarea,etc.

2

Eventos onClick

Executa quando um objeto é clicado. Usado para Button, Checkbox, Links(<a>), Radio, etc.

19

Eventos onKeyDownExecuta quando uma tecla é pressionada. Usado para Text e Textarea, etc.

20

Eventos onLoadExecuta quando o navegador termina o carregamento de uma janela, de uma imagem etc.

4

Eventos onUnloadExecuta quando o usuário sai da janela.

22

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

Recuperar valores Caixas de Área A recuperação de valores de uma caixa de área é semelhante a caixa de texto e password

24

Recuperar valores Check BoxRetorna True ou false, ◦ True quanto estivar marcado e False quando estiver desmarcado.

25

Recuperar valores RadioRetorna True ou false, true quanto estivar marcado e false quando estiver desmarcado.

26

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

Recuperar valores Caixa de lista

28

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

Inserindo Valores em FormuláriosCheckbox e Radio

30

Id do Elemento Propriedade do elemento

Marca ou desmarca um checkboxou radio box

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

Vetores e matrizes

32

Matrizes

33

Matrizes

34

Escrevendo em DIVs e Spans

35

ID do elemento HTML

innerHTML permiteinserir html via código

Tamanho de strings.

36