Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina...
Transcript of Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina...
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
Página HTML com JavaScript
Um programa em JavaScript como uma página Web será sempre executado no cliente nunca no servidor.
Diagrama de Funcionamento (Página com JavaScript)
Criação de Formulário HTML
Para criar um formulário em HTML é necessário usar o marcador <FORM>.
Exemplo <Form>
<Form Name = "NomedoFormulario">
:
:
: <Objetos do Formulario>
:
:
</Form>
<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).
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
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.
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">
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>
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">
Exemplo da Criação de Botão de Comandos
<INPUT TYPE="Button" NAME="btn2" VALUE="OK">
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>.
Exemplo da Criação de uma Caixa de Combinação.
<Select Name ="cargo"><Option>Programador Junior<Option selected>Programador Senior<Option>Programador Pleno</Select>
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>
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.(*)
Programando em JavaScript
Operadores Aritméticos
+ Soma
- Subtração
/ Divisão
* Multiplicação
% Módulo (Resto da Divisão)
Operadores Relacionais
> Maior que
< Menor que
== Igual a
!= Diferente de
>= Maior ou Igual
<= Menor ou Igual
Operadores Lógicos
&& - e
| | - ou
! - não
Estruturas de Controle
Estrutura de Atribuição ( a=1) Estrutura de Condição ( if() ) Estrutura de Repetição ( while() e for() )
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).
Estrutura de Condição.
Exemplo if()
if( a>1 && a < 3)
{
alert("Pertence ao Intervalo")
}
else
{
alert("Não Pertencem ao Intervalo")
}
Estrutura de Repetição.
while() - Repetição condicional.
a = 1
while(a <= 10)
{
alert(a)
a++
}
for() - Repetição em um intervalo.
for(i = 1; i <= 3 ; i++)
{
alert(i)
}
Exemplo :
Estrutura Básica de um Programa JavaScript.
<SCRIPT LANGUAGE="JavaScript">
function nomefuncao()
{
:
: <Código JavaScript>
:
:
}
:
:
:<Código JavaSript>
:
</SCRIPT>
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.
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
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>")
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 !!!")
confirm() - Exibe uma caixa de mensagem com botões de confirmação. Retornandotrue ou false
Exemplo :
Resp = confirm("Deseja Encerrar está Seção")
prompt() - Exibe uma caixa de mensagem permitindo uma entrada de dados.
Exemplo :nome = prompt("Digite seu Nome","")
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>
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.
Exemplo : bgColor
document.bgColor = "FF0000"
Obs : O exemplo acima coloca a cor do fundo da tela em
vermelho.
Exemplo : fgColor
document.fgColor = "0000FF"
Obs : O exemplo acima coloca a cor das letras em azul.
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.
Criando Janelas em tempo de execução
window.open() - Abre uma nova Janela do browser.
close() - Fecha o Browser aberto no momento.
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.
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).