Page 1
Universidade do Vale do ParaíbaColégio Técnico Antônio Teixeira Fernandes
Disciplina Programação p/ Web.
Material II-Bimestre
-Formulário HTML
- Programação JavaScriptSite: http://www1.univap.br/~wagner
Prof. Responsável
Wagner Santos C. de Jesus
Alberson Wander Sá dos Santos
Page 2
Página HTML com JavaScript
Um programa em JavaScript como uma página Web será sempre executado no cliente nunca no servidor.
Page 3
Diagrama de Funcionamento (Página com JavaScript)
Page 4
Criação de Formulário HTML
Para criar um formulário em HTML é necessário usar o marcador <FORM>.
Page 5
Exemplo <Form>
<Form Name = "NomedoFormulario">
:
:
: <Objetos do Formulario>
:
:
</Form>
Page 6
<Input Type> - Cria objetos de entrada de dados.
Criando uma Caixa de Texto em um Browser.
<INPUT TYPE> - Tipo de entrada. (Caixa de texto, Caixa de Verificação ou botão de Rádio, Objeto Oculto ou Caixa de Texto para senha).
Page 7
Formatação de <Input Type>
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
Page 8
Cláusulas do Marcador <Input Type>
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.
Page 9
Exemplo da Criação de uma caixa de texto.
Nome:<INPUT TYPE="text" NAME="teste" VALUE="" SIZE="30" MAXLENGTH=”20">
Senha:<INPUT TYPE="Password" NAME="teste">
Page 10
Exemplo da Criação de Botão de Rádio.
Masculino:<INPUT TYPE="radio" NAME="br" VALUE="1" >Feminino: <INPUT TYPE="radio" NAME="br" VALUE="2" Checked>
Page 11
Exemplo da Criação de Caixa de Verificação.
Curso <br>
Java : <INPUT TYPE="Checkbox" NAME="ch" VALUE="1">
HTML :<INPUT TYPE="Checkbox" NAME="ch" VALUE="2">
Page 12
Exemplo da Criação de Botão de Comandos
<INPUT TYPE="Button" NAME="btn2" VALUE="OK">
Page 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 <Select>.
Page 14
Exemplo da Criação de uma Caixa de Combinação.
<Select Name ="cargo"><Option>Programador Junior<Option selected>Programador Senior<Option>Programador Pleno</Select>
Page 15
Exemplo da Criação de uma Caixa de Lista.
<Select Name ="cargo" size=3><Option>Programador Junior<Option selected>Programador Senior<Option>Programador Pleno<Option>Programador Estagiário<Option>Programador Web<Option>Projetista VB</Select>
Page 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.(*)
Page 17
Programando em JavaScript
Page 18
Operadores Aritméticos
+ Soma
- Subtração
/ Divisão
* Multiplicação
% Módulo (Resto da Divisão)
Page 19
Operadores Relacionais
> Maior que
< Menor que
== Igual a
!= Diferente de
>= Maior ou Igual
<= Menor ou Igual
Page 20
Operadores Lógicos
&& - e
| | - ou
! - não
Page 21
Estruturas de Controle
Estrutura de Atribuição ( a=1) Estrutura de Condição ( if() ) Estrutura de Repetição ( while() e for() )
Page 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).
Page 23
Estrutura de Condição.
Exemplo if()
if( a>1 && a < 3)
{
alert("Pertence ao Intervalo")
}
else
{
alert("Não Pertencem ao Intervalo")
}
Page 24
Estrutura de Repetição.
while() - Repetição condicional.
a = 1
while(a <= 10)
{
alert(a)
a++
}
Page 25
for() - Repetição em um intervalo.
for(i = 1; i <= 3 ; i++)
{
alert(i)
}
Exemplo :
Page 26
Estrutura Básica de um Programa JavaScript.
<SCRIPT LANGUAGE="JavaScript">
function nomefuncao()
{
:
: <Código JavaScript>
:
:
}
:
:
:<Código JavaSript>
:
</SCRIPT>
Page 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.
Page 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.selectedIndexdocument.form1.t1.value = document.form1.c1.options[x].text
Page 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("<font size=8 face = arial color = "#ffff00"><Center> Testando JavaScript</Center></font>")
Page 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 !!!")
Page 31
confirm() - Exibe uma caixa de mensagem com botões de confirmação. Retornandotrue ou false
Exemplo :
Resp = confirm("Deseja Encerrar está Seção")
Page 32
prompt() - Exibe uma caixa de mensagem permitindo uma entrada de dados.
Exemplo :nome = prompt("Digite seu Nome","")
Page 33
Exemplo de um programa completo em Javascript/HTML.
<HTML><HEAD> <TITLE>Pagina Teste</TITLE></HEAD><SCRIPT LANGUAGE="JavaScript"> function teste() { x = document.form1.text1.value
alert("Você digitou o Aluno "+x) }
</SCRIPT><BODY> <FORM NAME="form1"> <center>
Nome do Alunos : <INPUT TYPE="text" NAME="text1"><br><br> <INPUT TYPE="Button" NAME="b1" VALUE="Ok" onClick="teste()">
</center> </FORM>
</BODY></HTML>
Page 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.
Page 35
Exemplo : bgColor
document.bgColor = "FF0000"
Obs : O exemplo acima coloca a cor do fundo da tela em
vermelho.
Page 36
Exemplo : fgColor
document.fgColor = "0000FF"
Obs : O exemplo acima coloca a cor das letras em azul.
Page 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.
Page 38
Criando Janelas em tempo de execução
window.open() - Abre uma nova Janela do browser.
close() - Fecha o Browser aberto no momento.
Page 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.
Page 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).