JavaScript
Function
É um código projetado para executar uma determinada tarefa.
A função pode ser chamada em "qualquer" tag do corpo.
Exemplo:
O código a ser executado pela função é colocado dentro das chaves
<head>
<script type="text/javascript">
//Inicio de uma função que pode ou não ser executada.
//Os parênteses podem incluir uma lista de nomes de
//parâmetros.
//Parâmetros recebem valores quando a função é chamada//
function nome-funcao(){
//Conteudo que a função ira executar.
CONTEÚDO
}
</script>
</head>
Alert
É utilizado se quiser ter certeza de informação chegue até o usuário.
Quando o alerta aparece na tela exibindo uma informação, o usuário terá de clicar em "OK" para prosseguir.
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
//Ira executar um alerta para o usuário.
alert("MENSAGEM PRA APARECE NA TELA [: ");
}
</script>
</head>
Prompt
Exibe uma caixa de diálogo que pede ao visitante algum dado de entrada.
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
//Ira executar um alerta com uma caixa de diálogo para o usuário.
prompt("mensagem, com uma caixa para entrada de dados. [: ");
}
</script>
</head>
Var
Inicia uma VARIÁVEL, que pode conter vários tipos de dados, como valores de texto ou números.
Variável pode ter nomes curtos (como X e Y) ou nomes mais descritivos (idade, soma, totalVolume)
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
//Ira criar uma variável.
var exemplo1 = 1;
alert("hehe" +exemplo1);
}
</script>
</head>
Os diferentes tipos de Parse
parseInt-> tenta transformar o valor dentro dos parenteses para um numero inteiro.
parseFloat-> tenta transformar em numero real.
Exemplo:
<script type="text/javascript">
function exemplo(){
//tenta transformar o valor dentro dos parenteses para
//um numero inteiro e savará na variável.
var exemplo1 = parseInt(frmexemplo.txtnumero1.value);
// tenta transformar em numero real e salvará na variável.
var exemplo2 = parseFloat(frmexemplo.txtnumero2.value);
}
</script>
Eventos JavaScript
Evento onLoad
Executa uma função quando uma página termina de carregar.
onload é mais frequentemente usado no elemento <body> para executar um script logo quando a página carrega.
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
alert("EXEMplo");
}
</script>
<head>
// body é o que carrega "primeiro" na página então bando o body
// for carregado (neste caso) a função ira executar a função.
<body onload="exemplo()">
</body>
Evento onClick
Executar um JavaScript quando um botão ou elemento é clicado.
!!! O atributo onclick pode ser usado em todos os elementos HTML, EXCETO:
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, e <title>.
Exemplo:
<head>
<script type="text/javascript">\
//função do botão abaixo
function exemplo(){
alert("EXEmplo");
}
</script>
<head>
<head>
<body>
//Foi criado um botão para melhor visualização,
//quando clicado executará a sua função designada.
<button onclick="exemplo()"></button>
</body>
Evento onSubmit
O evento onsubmit ocorre quando o botão enviar em um formulário é clicado.
Exemplo:
<head>
//Inicio da checagem, para não passar nada em branco.
<script type="text/javascript">
function exemplo(){
if(frmexemplo.txtvalor.value==""){
alert("O campo valor não foi preenchido.");
frmexemplo.txtvalor.focus();
return false;
}
</script>
</head>
<body>
//Criado uma fomulário, que indica para onde e como serão
//enviados os dados.
<form name="frmcalcula" action="#" method="post" onsubmit="return
exemplo()">
//Criado uma tabela
<table>
<tr>
<td> Valor-1 </td>
<td>
<input type="text" name="txtvalor1" size="10">
</td>
</tr>
</table>
</form>
</body>
//Criado um botão que fará o envio dos formulários
<button type="submit"></button>
</body>
If - Else
Executar ações diferentes para diferentes decisões.
Se tal coisa acontecer faça isso , se não faça aquilo.
Exemplo:
<script>
function elseif(){
var x=prompt("Escolha apenas 1 ou 2");
//Inicio da "Checagem" - Se Variável=1 faça.
if(x=="1"){
alert("Você digitou 1");
//Continuação da "Checagem" - Se não Se Variável=2 faça.
}else if(x=="2"){
alert("Você digitou 2");
//Continuação da "Checagem" - Se não Se Variável=(vazio) faça.
}else if(x==""){
alert("Você não digitou nada");
//Fim da "Checagem" - Se Não For nenhuma das opções
//anteriores então faça.
}else{
alert("Você digitou outro valor");
}
}
</script>
Switch - Case
Usado para escolher funções, conforme decisões tomadas pelo usuário.
Escolha---caso a escolha for tal coisa faça isso.
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
var exemplo1 = prompt("digite 1 ou 2");
//Escolherá(analizará) aquela variável.
switch(exemplo){
//Caso 1 faça.
case "1":{
alert("Digitou 1");
}
//Encerrar Escolha-Caso
break;
//Caso 2 faça.
case "2":{
alert("Digitou 2");
}
//Encerrar Escolha-Caso
break;
//Caso nenhuma opção anterior faça e depois
//encerrará Escolha-Caso.
default{
alert("Digitou outra coisa");
}
}
}
</script>
</head>
For
Utilisado caso deseja se executar o mesmo código várias vezes,podendo alterar seu "passo".
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
//Cria uma variável, dita até quando terá que
//realizar tal coisa e o escremento.
for (var exemplo = 0; exemplo<5; exemplo++){
alert(exemplo)
}
}
</script>
</head>
While
Percorre um bloco de código, desde que uma condição especificada for verdadeira.
Verifica e executa
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
//Cria uma variável.
var exemplo=0
//Dita enquanto e "se" terá que realizar tal coisa.
while(exemplo <= 5) {
alert("exemplo")
//Dita o passo.
exemplo++;
}
}
</script>
</head>
Do - While
Este loop irá executar o bloco de código uma vez, antes de verificar se a
condição for verdadeira, então ele vai repetir o ciclo enquanto a condição é verdadeira.
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
//Cria uma variável.
var exemplo=0
//Executa uma vez
do{
alert(exemplo);
//O passo
exemplo++;
//Verifica se a condição é verdadeira e se verdadeira
//Re-executa e se falsa, finaliza o loop.
}while(exemplo < 5);
}
</script>
</head>
Formulario.campo.value
Atribui o Valor de um campo que esta em um formulário.
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
//Atribuirá o valor do formulario encontrado em um lugar dele.
var exemplo=(frmexemplo.txtvalor.value);
}
</script>
</head>
<body>
//Cria um formulário.
<form name="frmexemplo" action="#" method="post" onsubmit="return
exemplo()">
//Cria uma tabela.
<table>
<tr>
<td> Valor-1 </td>
//Lugar do valor(Neste caso.)
<td>
<input type="text" name="txtvalor" size="10">
</td>
</tr>
</table>
</form>
</body>
Função document.getElementById()
Significa .pegarElementoPeloId --- Retorna o elemento com o ID especificado.
É usado quase todas as vezes que você deseja manipular, ou obter informações a partir de, um elemento em seu documento.
É acompanhado pelo local onde se encontra a informação
Exemplo:Clique na Imagem
<head>
<script type="text/javascript">
var x=0
function elemento(){
//Analiza a situação
if(x=="0"){
//Caso verdadeira chamará o que foi solicitado para a "tela".
document.getElementById("imagem").src="../visual/imagens/Sid.jpg";
x=1;
//Analiza novamente a situação caso a anterior não for verdade
}else if(x=="1"){
//Caso verdadeira chamará o que foi solicitado para a "tela".
document.getElementById("imagem").src="../visual/imagens/mario.jpg";
x=0;
}
}
</script>
</head>
Função toUpperCase()
Tenta converter a string(value) em letras maiúsculas.
Exemplo:
<head>
<script type="text/javascript">
//Cria uma variavel, chama um prompt que arquivará o
//que foi digitado, em Maiusculo, dentro da variavel.
var exemplo = prompt("A ou B?").toUpperCase();
</script>
</head>
Função focus()
Quando um campo de entrada recebe o foco, ou seja, o cursor vai direto para o campo selecionado.
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
//Jogará o cursor para o local solicitado.
frmexemplo2.txtexemplo2.focus();
}
</script>
</head>
Return
Quando instrução de retorno , a função irá parar a execução
e valor de retorno retornará ao "chamador".
Exemplo:
<head>
<script type="text/javascript">
function exemplo(){
//Verifica.
if(frmexemplo.txtvalor.value=="1"){
//Se verdade, NESTE CASO, iria retornar
//para redigitar(arrumar)o valor no local
//da txtvalor ate não ser 1
return false;
}
</script>
</head>
Validação do preenchimento de um formulário
Por etapas:
<head>
<script type="text/javascript">
function exemplo(){
//Inicia a checagem(SE), indica o local(Parentêses) e compara com
//um valor vazio(=="").
if(frmexemplo.txtvalor.value==""){
//Informa o erro(Não preenchimento).
alert("O campo valor não foi preenchido.");
//Informa o local do erro. Colocando o cursor aonde é necessário.
frmexemplo.txtvalor.focus();
//Retorna.
return false;
}
</script>
</head>
<body>
<form name="frmcalcula" action="#" method="post"
onsubmit="return exemplo()">
<table>
<tr
<td> Valor-1 </td>
<td> <input type="text" name="txtvalor1"
size="10"> </td>
</tr>
</table>
</form>
</body>
OBS:No exemplo acima foi utilizado Select e Radio.
A maneira como é organizado a validação é a mesma,
só mudam os nomes dos campos.