130x80
Bom pessoal continuando nosso post anterior sobre JavaScript, lembrando que posts assim são meio longos então tenham paciência que no final a recompensa é ótima!
Principais Comandos, Eventos e Operadores utilizado no JavaScript
Operadores Lógicos
Os principais operadores lógicos a serem utilizados em comandos condicionais são:
| OPERADORES LÓGICOS | SIGNIFICADO |
| = = | Igual |
| != | Diferente |
| > | Maior |
| >= | Maior ou Igual |
| < | Menor |
| <= | Menor ou Igual |
| && | E |
| || | Ou |
Os comandos condicionais serão abordados mais abaixo.
Operadores Matemáticos
Os operadores Matemáticos a serem utilizados em cálculos, referências de indexadores e manuseio de strings são :
| OPERADORES MATEMÁTICOS | SIGNIFICADO |
| + | adição de valor e concatenação de strings. |
| - | subtração de valores |
| * | multiplicação de valores |
| / | divisão de valores |
| % | obtém o resto de uma divisão |
Ao longo dos tutoriais estes operadores serão largamente utilizados, dando, assim, uma noção mais precisa do seu funcionamento.
Controles Especiais
| CONTROLES ESPECIAIS | SIGNIFICADO |
| \b | backspace |
| \f | form feed |
| \n | new line caracters |
| \r | carriage return |
| \t | tab characters |
| // | Linha de comentário |
| /*….*/ | Delimitadores para inserir um texto com mais de uma linha como comentário. |
Os delimitadores naturais para uma string são ” ( aspas dupla) ou ‘ ( aspas simples). Caso seja necessário a utilização destes caracteres como parte da string, utilize \ precedendo ” ou ‘. Como por exemplo : alert (“Cuidado com o uso de \” ou \’ em uma string”)
Estruturas de Controle ou Comandos Condicionais
Existem algumas estruturas de controle que lhe permitem modificar o fluxo de execução de um programa ou seja elas possui comandos que condicionam a execução de uma certa tarefa à veracidade ou não de uma determinada condição, ou enquanto determinada condição for verdadeira.
São eles:
Comando IF
if (condição)
{ ação para condição satisfeita }
[ else
{ ação para condição não satisfeita } ]
Exemplo :
if (Idade < 18)
{Categoria = "Menor" }
else
{Categoria = "Maior"}
Comando FOR
for ( [inicialização/criação de variável de controle ;]
[condição ;]
[incremento da variável de controle] )
{ ação }
Exemplo.
for (x = 0 ; x <= 10 ; x++)
{alert ("X igual a " + x) }
Comando WHILE
Executa uma ação enquanto determinada condição for verdadeira.
while (condição)
{ ação }
Exemplo.
var contador = 10
while (contador > 1)
{ contador-- }
Move condicional
receptor = ( (condição) ? verdadeiro : falso)
Exemplo.
NomeSexo = ((VarSexo == “M”) ? “Masculino” : “Feminino”)
Eventos
Os eventos são fatos que ocorrem durante a execução do sistema, a partir dos quais você pode definir ações a serem realizadas pelo programa. Logo abaixo apresentamos a lista dos eventos possíveis, indicando os momentos em que eles podem ocorrer, bem como, os objetos passíveis de sua ocorrência.
| EVENTOS | OCORRÊNCIAS |
| onload | Ocorre na carga do documento. Ou seja, só ocorre no BODY(corpo) do documento. |
| onunload | Ocorre na descarga (saída) do documento. Também só ocorre no BODY(corpo). |
| onchange | Ocorre quando o objeto perde o focus e houve mudança de conteúdo. Válido para os objetos Text, Select e Textarea. |
| onblur | Ocorre quando o objeto perde o focus, independente de ter havido mudança. Válido para os objetos Text, Select e Textarea. |
| onfocus | Ocorre quando o objeto recebe o focus. válido para os objetos Text, Select e Textarea. |
| onclick | Ocorre quando o objeto recebe um Click do Mouse. válido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit. |
| onmouseover | Ocorre quando o ponteiro do mouse passa por sobre o objeto. válido apenas para Link. |
| onselect | Ocorre quando o objeto é selecionado. Válido para os objetos Text e Textarea. |
| onsubmit | Ocorre quando um botão tipo Submit recebe um click do mouse. Válido apenas para o Form. |
Neste momento você deve esta se perguntado : Onde utilizar este eventos ? Por enquanto não se preocupe , pois ao longo dos tutoriais todos estes operadores, comandos , controle e eventos serão utilizados, dando assim uma noção mais precisa do seu funcionamento.
Iniciando o Script
Seu script , como na maioria dos programas de JavaScript , inicia com a tag
< Script > de HTML. Como você aprendeu , utiliza-se as tag < Script> e </Script> para incluir um script dentro documento de HTML, também é importante lembrar que não se deve incluir nada exceto instruções JavaScript válidas entre as tag, pois se o navegador encontrar quaisquer tags de HTML que não faz parte do script dentro das tag , ele exibirá um mensagem de erro de JavaScript.
Para começar a criar o script , abra seu editor texto preferido e digite as tags<Script> de inicio e de fim como mostrado na Figura 2.1. No meu caso escolhi o Bloco de notas como meu editor , por se tratar por enquanto de exemplos simples.
Figura 2.1- Inserindo script
Para armazenar o script você terá que utilizar variáveis que armazena as informações a serem executadas ,por isso precisamos cria-la. A variável é criada automaticamente, pela simples associação de valores a mesma.
Por exemplo : NovaVariavel = “José”
Neste exemplo foi criada uma variável de nome NovaVariavel que passou a conter a string Jose. As variáveis podem ser Locais ou Globais.
As variáveis Locais são aquelas criadas dentro de uma função que são Locais e referenciáveis apenas dentro da função.
As variáveis Globais são aquelas criadas fora de funções que são Globais, podendo serem referenciadas em qualquer parte do documento. É muito importante que as variáveis que precisam ser referenciadas por várias funções ou em outra parte do documento, precisam ser definidas como globais, embora não seja recomendável, em uma função, pode ser definida uma variável local com o mesmo nome de uma variável global. Para isso utiliza-se o método de definição var. Como no exemplo a seguir :
Exemplo.
Variável Global : MinhaVariavel = “”
Variável Local : var MinhaVariavel = “”
Criando um Script Simples
O JavaScript permite que você escreva linhas dentro de uma página , através do método write. As linhas escritas desta forma, podem conter textos, expressões JavaScript e comandos Html. As linhas escritas através deste método aparecerão no ponto da tela onde o comando for inserido. Para você ter uma idéia como isso ocorre vamos fazer uma teste simples, para isso vamos utilizar o Bloco de Notas , seguindo os seguintes passos:
- Abra o Bloco de Notas executado o seguinte comando Iniciar \Programas\Acessórios\Bloco de Notas.
- Depois de abrir o Bloco de Notas , digite os seguintes comandos , conforme mostrado na Figura 2.2 abaixo:
Figura 2.2-Criando Script Simples
- Salve o arquivo com extensão HTML como por exemplo meuprimeiroteste.Html ,mas antes disso aconselho a criar uma pasta aonde você poderá salvar todos os arquivos desenvolvidos no decorrer dos tutoriais, o nome da pasta fica ao seu critério, no meu caso crie uma pasta chamada Testes.
- Feche o arquivo, depois de fechado você ira executar este arquivo, dando um clique sobre ele.
Figura 2.3- Executando Script
Observe. Vai aparecer em sua pagina o mesmo conteúdo mostrado na Figura 2.3.
Inicialmente a idéia do exemplo acima era escrever duas linhas, porém isso não ocorreu porque o método write não insere mudança de linha, por isso provocou o aparecimento de apenas uma linha com os dois textos emendados. Então para evitar este tipo de ocorrência, existe o método writeln que escreve uma linha e espaceja para a seguinte. Entretanto, em nossos testes, este comando não surtiu efeito, obtendo-se o mesmo resultado do método write. A solução encontrada para esta situação foi a utilização do comando de mudança de parágrafo da linguagem Html, para isso vamos que seguir os seguintes passos:
- Abra o arquivo do exemplo feito , clique no mouse no botão esquerdo e escolha a opçãoExibir código fonte, com isso ira abrir um bloco de notas aonde você irá modifica o conteúdo existente por o que esta logo abaixo:
<script>
valor = 30
document.write ("<p>Minha primeira linha</p>")
document.write ("<p>Nesta linha aparecerá o resultado de : " + (10 * 10 + valor) + "</p>")
</script>
- Salve o arquivo e feche-o. Assim você esta de volta na pagina HTML, der um clique no botão Atualizar e observe o que irá ocorrer.
Você ira observar que o problema da mudança de linha foi resolvido , porém, gerou um outro problema que é uma linha em branco, entre cada linha, por se tratar de mudança de parágrafo. Caso não seja desejado a existência da linha em branco, a alternativa é utilizar o comando Html <br> que apenas muda de linha. Como mostra o exemplo a seguir.
<script>
valor = 30
document.write (“<br>Minha primeira linha”)
document.write (“<br>Nesta linha aparecerá o resultado de : “ + (10 * 10 + valor) )
</script>
Mensagens
Existem três formas de comunicação com o usuário através de mensagens.
1º Forma : Apenas Observação utilizando o comando.
alert ( mensagem )
Exemplo : Este exemplo também é simples por isso vamos utilizar o Bloco de notas. Siga os seguintes passos indicados a seguir:
- Abra o Bloco de Notas , conforme o exemplo anterior.
- Digite o seguinte comando:
< Script > alert ("Certifique-se de que as informações estão corretas") </Script >,
depois salve o arquivo com extensão html na pasta que você criou , como nome de sua escolha.
- Execute o arquivo , dando um clique sobre ele. Você obterá os mesmo dados mostrados na Figura 2.4.
Figura 2.4 – Utilizando comando alert
- Clique OK, para sair da mensagem e finalizar o exemplo.
2º Forma : Mensagem que retorna confirmação de OK ou CANCELAR
confirm (mensagem)
Exemplo 2: Neste exemplo vamos utilizar o mesmo editor de texto dos exemplo anteriores. Siga os seguintes passos indicados a seguir :
- Abra o Bloco de Notas , conforme o exemplo anterior.
- Digite o seguinte comando:
< Script >
if (confirm ("Algo está errado...devo continuar??"))
{ alert("Continuando") }
else
{ alert("Parando") } </Script > , depois salve o arquivo com extensão html na pasta que você criou , como nome de sua escolha.
- Execute o arquivo, dando um clique sobre ele. Você obterá os mesmo dados mostrados na Figura 2.5.
Figura 2.5- Utilizando comando confirm
- Nesta mensagem você tem duas opções para escolher : Ok ou Cancelar. Se clicar em OK você obterá a seguinte mensagem:
- Clique em Ok para finalizar a mensagem.
- Caso escolha a opção Cancelar obterá a seguinte mensagem.
- Clique em Ok para finalizar a mensagem.
3º Forma : Recebe mensagem via caixa de texto Input
Receptor = prompt ("Minha mensagem", "Meu texto")
Onde o Receptor é o campo que vai receber a informação digitada pelo usuário, Minha mensagem é a mensagem que vai aparecer como Label da caixa de input , Meu texto é um texto, opcional, que aparecerá na linha de digitação do usuário
Exemplo 3: Vamos utilizar o mesmo editor de texto dos exemplo anteriores. Siga os seguintes passos indicados a seguir:
- Abra o Bloco de Notas , conforme o exemplo anterior.
- Digite o seguinte comando:
< Script >
Entrada = prompt("Informe uma expressão matemática", "")
Resultado = eval(Entrada)
document.write("O resultado é = " + Resultado)
</Script > , depois salve o arquivo com extensão html na pasta que você criou, como nome de sua escolha.
- Execute o arquivo , dando um clique sobre ele. Você obterá os mesmo dados mostrados na Figura 2.6.
Figura 2.6- Utilizando comando prompt
- Digite a expressão matemática ,clique em Ok ou Cancelar, e observe o que irá ocorrer.
Muito bem acabamos de fazer nossas primeiras pagina utilizando JavaScript. Na próxima parte deste tutorial você aprenderá como criar funções e como manipula-las.
Fonte: Internet+Conhecimentos próprios
Mc Info – Ligado nas Novidades
Arquivado em: Info, Tutorial | Etiquetado: aprenda java, computador, cursos, faça você mesmo, fique rico, ganhe dinheiro, grana, internet, java, javascript, lançamento, tudo dobre java, tudo sobre java, tuto, Tutorial | Deixar um comentário »
A Nokia cortou os preços de aparelhos em seu portfólio, colocando smartphones mais baratos de sua linha em rota de colisão com celulares de custo médio das rivais Samsung e Sony Ericsson.
