A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material II-Bimestre -Formulário HTML - Programação.

Apresentações semelhantes


Apresentação em tema: "Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material II-Bimestre -Formulário HTML - Programação."— Transcrição da apresentação:

1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material II-Bimestre -Formulário HTML - Programação JavaScript Site: Prof. Responsável Wagner Santos C. de Jesus Alberson Wander Sá dos Santos

2 Página HTML com JavaScript Um programa em JavaScript como uma página Web será sempre executado no cliente nunca no servidor.

3 Diagrama de Funcionamento (Página com JavaScript)

4 Criação de Formulário HTML Para criar um formulário em HTML é necessário usar o marcador.

5 Exemplo :

6 - Cria objetos de entrada de dados. Criando uma Caixa de Texto em um Browser. - Tipo de entrada. (Caixa de texto, Caixa de Verificação ou botão de Rádio, Objeto Oculto ou Caixa de Texto para senha ).

7 Formatação de Text - Caixa de Texto Simples. Hidden - Caixa de Texto Invisível. Radio - Botão de Radio. Checkbox - Caixa de Verificação. Password - Caixa de Texto que esconde os dados com (*) asterisco Button - Botão de Comandos

8 Cláusulas do Marcador Name - nome dados para caixa de texto. Value - Define a informação que irá aparecer na caixa de texto. Size - Define o tamanho da caixa de texto. MaxLength - Define o tamanho máximo de caracteres que podem ser escritos em uma caixa de texto.

9 Exemplo da Criação de uma caixa de texto. Nome: Senha:

10 Exemplo da Criação de Botão de Rádio. Masculino: Feminino:

11 Exemplo da Criação de Caixa de Verificação. Curso Java : HTML :

12 Exemplo da Criação de Botão de Comandos

13 Objetos de Lista(Caixa de Combinação e Caixa de Lista) Para se criar um Objeto de lista em HTML usa-se o marcador.

14 Exemplo da Criação de uma Caixa de Combinação. Programador Junior Programador Senior Programador Pleno

15 Exemplo da Criação de uma Caixa de Lista. Programador Junior Programador Senior Programador Pleno Programador Estagiário Programador Web Projetista VB

16 Eventos : São estímulos dados pelo usuário Exemplo de Evento. Onclick - Executa algum código quando um objeto recebe um clique. (*) OnMouseOver - Executa algum código quando o cursor passa sobre o objeto. OnBlur - Executa um código quando o usuário abandona um campo. Onchange - Executa um código quando um campo é alterado.(*)

17 Programando em JavaScript

18 Operadores Aritméticos + Soma - Subtração / Divisão * Multiplicação % Módulo (Resto da Divisão)

19 Operadores Relacionais > Maior que < Menor que == Igual a != Diferente de >= Maior ou Igual <= Menor ou Igual

20 Operadores Lógicos && - e | | - ou ! - não

21 Estruturas de Controle Estrutura de Atribuição ( a=1) Estrutura de Condição ( if() ) Estrutura de Repetição ( while() e for() )

22 Estrutura de atribuição em JavaScript. var a = 1 ou a = 1 (Variável númerica). X = "Abacaxi" (Variável do tipo String). Beta = true (Variável Booleana). K = 1.33 (Variável do tipo real).

23 Estrutura de Condição. Exemplo if() if( a>1 && a < 3) { alert("Pertence ao Intervalo") } else { alert("Não Pertencem ao Intervalo") }

24 Estrutura de Repetição. while() - Repetição condicional. a = 1 while(a <= 10) { alert(a) a++ }

25 for() - Repetição em um intervalo. for(i = 1; i <= 3 ; i++) { alert(i) } Exemplo :

26 Estrutura Básica de um Programa JavaScript. function nomefuncao() { : } :

27 Obs: Um Código JavaScript deve ser escrito embutido em um código HTML. Objetos e Métodos do JavaScript. document - É um dos objetos mais importantes do JavaScript que permite a referencia a um dado de entrada ou saída de um objeto.

28 Exemplo para capturar uma informação de uma caixa de texto em um formulário HTML. X = document.form1.teste.value Exemplo para capturar um dado da caixa de Lista ou Combinação. x = document.form1.c1.selectedIndex document.form1.t1.value = document.form1.c1.options[x].text

29 Para criar uma página dinâmica em JavaScript em tempo de execução você deve usar a seguinte instrução. Exemplo : document.write(" Testando JavaScript ")

30 Funções de Entrada e saida de dados alert() - Exibe uma caixa de Mensagens no vídeo. Exemplo : alert("Operação Concluída com Sucesso !!!")

31 confirm() - Exibe uma caixa de mensagem com botões de confirmação. Retornando true ou false Exemplo : Resp = confirm("Deseja Encerrar está Seção")

32 prompt() - Exibe uma caixa de mensagem permitindo uma entrada de dados. Exemplo : nome = prompt("Digite seu Nome","")

33 Exemplo de um programa completo em Javascript/HTML. Pagina Teste function teste() { x = document.form1.text1.value alert("Você digitou o Aluno "+x) } Nome do Alunos :

34 Controles de cores e Formulários Para ativar o processo de cores no fundo do browser use o métodos bgColor. Para ativar a cor das letras do browser use o método fgColor.

35 Exemplo : bgColor document.bgColor = "FF0000" Obs : O exemplo acima coloca a cor do fundo da tela em vermelho.

36 Exemplo : fgColor document.fgColor = "0000FF" Obs : O exemplo acima coloca a cor das letras em azul.

37 Manipuladores de Navegação history.back() - Permite voltar para a página carregada anteriormente. history.forward() - Permite avançar de uma página para outra.

38 Criando Janelas em tempo de execução window.open() - Abre uma nova Janela do browser. close() - Fecha o Browser aberto no momento.

39 Sintaxe : window.open() window.open("nomedapagina","nomejanela",["Caracts"]) nomedapagina : Localização do documento a ser carregado em uma nova janela. nomejanela : Um nome dado aleatóriamante para identificação da Janela. Caracts : Lista das características da nova janela, separadas por vírgula e sem espaços em branco. No lugar dos literais yes ou no. Podem ser usados 1 e 0, respectivamente.

40 Características da Janela toolbar - Exibe(yes) ou oculta(no) a barra de Ferramentas. location - Exibe(yes) ou oculta(no) a barra de localização. directories - Exibe(yes) ou oculta(no) a barra de diretórios. status - Exibe(yes) ou oculta(no) a barra de status. menubar - Exibe(yes) ou oculta(no) a barra de Menus. scrollbars - Exibe(yes) ou oculta(no) a barra de rolagem lateral. resizable - Exibe(yes) ou oculta(no) o redimencionamento da janela. Width=n - Largura da Janela (em Pixel). height-n - Altura da Janela (em Pixel).


Carregar ppt "Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material II-Bimestre -Formulário HTML - Programação."

Apresentações semelhantes


Anúncios Google