Este tutorial de Javascript será dividido em 2 partes, a abordagem básica e a abordagem avançada. Nesta primeira parte será explicado o básico e serão introduzidas algumas expressões para fazer uma leve introdução à linguagem, permitindo -lhe total integração no tutorial, tanto na abordagem básica como mais tarde na abordagem avançada. O Javascript é uma linguagem de programação utilizada globalmente para realizar certas acções numa página web. É a linguagem de programação orientada a clientes (é o navegador do utilizador que suporta o processamento do script) mais utilizada actualmente, e embora seja confundida com Java por muitos, Javascript é muito mais simples que Java e é o melhor começo para quem quer aprender Java, C, C++ e PHP, derivado do facto de a sua sintaxe ser idêntica.
Com Javascript é possível introduzir efeitos nas páginas web e criar interactividade com o utilizador, sendo o browser o responsável por todo o processamento do Javascript. É muitas das vezes utilizado para fazer melhoramentos nas páginas HTML, e potenciar os seus conteúdos, muito graças à sua programação simples, rápida e leve, que pode com alguma prática, ser facilmente aprendida por quem não tenha experiência alguma em programação.
Em termos objectivos, Javascript permite embelezar e potenciar os conteúdos de uma página Web, mas também pode fazer trabalhos mais pesados, como respostas ás acções do utilizador, criando páginas interactivas com programas orientados a objectos, como calculadoras, agendas, entre outros.
IMPORTANTE – ANTES DE COMEÇAR
- É necessário que o utilizador tenha conhecimentos básicos de HTML/XHTML
- Javascript não é o mesmo que Java. Java é uma linguagem de programação poderosa e muito mais complexa, desenvolvida pela Sun Microsystems, estando na mesma categoria que C e C++.
- Javascript faz diferenciação de maiúsculas/minúsculas. Muita atenção na programação!
O QUE É JAVASCRIPT?
- Foi criado para adicionar interactividade ás páginas HTML
- É uma linguagem de programação script
- Uma linguagem de programação script é uma linguagem leve
- Javascript integra directamente nas páginas HTML
- Javascript é uma linguagem interpretada, que isto dizer que os scripts executam sem processamento preliminar.
- Javascript é grátis
O QUE OFERECE O JAVASCRIPT?
- Oferece uma via de programação aos designers HTML
- Permite introduzir texto dinâmico numa página HTML
- Reage a eventos
- Pode ler e escrever elementos HTML
- Pode ser utilizado para validação de dados
- Pode ser utilizado para verificação do browser de um visitante na página
- Pode criar cookies
1. ONDE E COMO SE INTRODUZ O JAVASCRIPT
O código Javascript introduz-se entre <script> e </script>, podendo ser introduzido entre <head> e </head>, <body> e </body> e em ambos. Vejamos um exemplo <body></body>.
<html>
<body>
<script>
alert("Bem-vindo ao tutorial sobre Javascript na Escola de Criatividade!")
</script>
</body>
</html>
A função alert irá criar uma janela popup com a mensagem descrita, com um botão de “OK”
2. EXEMPLO DE CRIAÇÃO E MANIPULAÇÃO DE VARIÁVEIS
Aqui definimos 3 variáveis, em que 2 delas tomam valores e a terceira toma o valor do resultado da soma. Depois este resultado é mostrado ao utilizador através da função alert. De notas que as variáveis não podem ser inseridas entre aspas (“c”) pois nesse caso seriam interpretadas como texto e não como variáveis.
<html>
<body>
<script>
a = 25
b = -5
c = a + b
document.write("O Resultado é " + c)
</script>
</body>
</html>
3. EXPRESSÕES CONDICIONAIS IF, IF/ELSE E IF/ELSE ENCADEADAS
Nota: Nos exemplos estão a ser usadas funções exemplo, podem ser usadas quaisquer funções que sirvam para a tarefa.
O IF é uma das mais básicas expressões de Javascript. No caso de a variável “campeonatos” ser igual a 3, é criado o texto descrito.
<html>
<body>
<script>
campeonatos = 3
if (campeonatos == 3)
{
document.write("Correcto, Ayrton Senna foi " +campeonatos+ " vezes campeão mundial")
}
</script>
</body>
</html>
No caso de IF/ELSE o exemplo é o mesmo, mas no caso de a variável “campeonatos” não ser igual a 3, é criado o texto descrito.
<html>
<body>
<script>
campeonatos = 3
if (campeonatos == 3)
{
document.write("Correcto, Ayrton Senna foi "+campeonatos+" vezes campeão mundial")
}
else
{
document.write("Falso, Ayrton Senna não foi campeão mundial "+campeonatos+" vezes")
}
</script>
</body>
</html>
No caso de IF/ELSE encadeadas, podemos adicionar mais opções ao nosso exemplo. Vejamos:
<html>
<body>
<script>
campeonatos = 3
if (campeonatos == 3)
{
document.write("Correcto, Ayrton Senna foi 3 vezes Campeão Mundial")
}
else if (campeonatos == 4)
{
document.write("Correcto, Ayrton Senna foi 4 vezes Campeão Mundial")
}
else
{
document.write("Falso, falhou! Ayrton Senna foi Campeão Mundial 3 vezes")
}
</script>
</body>
</html>
4. EXPRESSÕES DE SELECÃO SWITCH
O switch é utilizado para fazer comparações de forma mais concisa sem ter de recorrer ao IF.
No exemplo temos uma variável, e com o switch vamos criar acções dependentes da variável.
<html>
<body>
<script>
meteorologia = "chuva"
switch (meteorologia) {
case "chuva":
document.write("Leve um chapeu de chuva!")
break
case "sol":
document.write("Leve um chapeu de sol")
break
case "nublado":
document.write("Pode chover, melhor levar um chapeu de chuva")
break
default:
alert("Introduziu uma entrada inválida. Por favor introduza chuva, sol ou nublado")
}
</script>
</body>
</html>
Notas importantes – o break e default têm de estar sempre presentes. O default é acedido quando nenhuma das situações anteriores é validada, é importante ter isto!
É possivel também agrupar as condições, vejamos o exemplo:
<html>
<body>
<script>
letra = "e"
switch (letra) {
case "a":
case "e":
case "i":
case "o":
case "u":
document.write("Vogal")
break
default:
document.write("Outro caracter")
}
</script>
</body>
</html>
5. EXPRESSÕES DE LOOP FOR
Esta expressão é utilizada quando se pretende que um trecho de código se repita x vezes:
<html>
<body>
<script>
campeonatos = 3
for (e = 0; e < 3; e++)
{
a = e
}
document.write(a)
</script>
</body>
</html>
Neste caso é utilizada uma variável temporária “e” que é iniciada com valor igual a zero. De seguida entra um IF, se “e” for inferior a 3, ele entra no loop. Depois “e++” especifica o que fazer com a variável “e”. A cada repetição o valor da variável “e” vai ser aumentado, se isto não fosse feito, “e” seria sempre menor que 3, o IF seria sempre verdadeiro e iríamos estar a criar um loop infinito, o que não é nada bom.
6. EXPRESSÕES DE LOOP WHILE E DO/WHILE
Esta expressão é utilizada quando queremos que um trecho de código seja repetido x vezes, consoante uma condicional simples. Há uma variável com um valor atribuído, e enquanto esse valor for inferior a 5, o valor da variável é aumentado.
<html>
<body>
<script>
campeonatos = 0
while (campeonatos < 10)
{
campeonatos++
}
document.write(campeonatos)
</script>
</body>
</html>
No caso de DO/WHILE , o próprio nome é sugestivo “fazer/enquanto”. Irá executar um trecho de código antes de fazer a verificação da condição.
<html>
<body>
<script>
campeonatos = 0
do
{
campeonatos++
}
while (campeonatos < 10)
document.write(campeonatos)
</script>
</body>
</html>
7. ALGUNS EXEMPLOS DE EXPRESSÕES SIMPLES
- alert()
- write()
- window.open()
- tags()
- big()
- fontSize()
- show()
- open()
- link()
- findText()
José A. Furquim
Tá bem explicado, eu sempre sofri com uns detalhes basicos de JavaScript, nem sabia que dava para fazer uma Select Case que aqui se chama SWITCH. Valeu.
Diogo Espinha
Olá José, obrigado pelas suas palavras!
Não perca a abordagem avançada, que certamente irá trazer conteúdos de valor para aumentar o seu conhecimento.
Abraço
Cassio
Muito bom esse seu post, essencial para quem quer entrar na área!
Diogo Espinha
Muito obrigado Cassio, fico contente por ver reconhecido o valor dos artigos presentes na Escola de Criatividade.
Abraço
deividiaz
Muito bom esse seu post, essencial para quem quer entrar na área[2]
Diogo Espinha
Olá Deividiaz, obrigado pela sua visita e comentário
Continue seguindo a série de artigos sobre Javascript, nomeadamente a Abordagem Avançada que irá ser lançada brevemente.
Abraço!
Felipe Araújo Menegassi
Muito bom o artigo, e acho que um ponto interessante é que você foi direto ao assunto, sem muitas ladainhas, que é o que encontramos em alguns lugares pela internet.
Parabéns, me ajudará muito!
Diogo Espinha
Obrigado Felipe, fico muito contente por este artigo lhe ser útil!
Obrigado pela sua visita e comentário,
Abraço!
Danilo
olá, parabéns, pelo post, mas só pra contrariar um pouquinho
, pra quem realmente não sabe absolutamente nada, está muito “sólido”.
Thiago Gringon
Olá Diogo,
Muito bom o post. Parabéns!
Será que você poderia me ajudar num probleminha que estou tendo?
Quero colocar um JS no meio de uma página do WordPress, junto com o texto. (seria esse exemplo: http://www.solutoire.com/experiments/mootools/acc_ex3.html). Eu não sei onde eu coloco o código do JS.
Você poderia me ajudar?
Desde já agradeço a atenção. Mais uma vez parabéns.
Abraços
Thiago
Danilo
olá, ótimo post, mas quero fazer uma observação:
“o código js dentro da tag body é uma técnica não recomendada de acordo com o princípio de separação de camadas, e fora da webstanders, mas pode ser tolerado em casos muito particulares como quando se trata de um só documento utilizando um script exclusivo.”
(trecho do livro Javascript – Guia do programador de Maurício Sammy Silva “Maujor”)
abraço.
Luan Muniz
Bem legal o Artigo!
Parabens, realmente vai ajudar bastante quem está começando.
Você poderia abordar em um artigo futuro alguma biblioteca javascript, como o JQuery por exemplo!
Ia ser bem legal.
Só acho legal apontar uma coisa
Javascript usa “;” (ponto e virgula) para mostrar o fim da declaração.
Alguns navegadores inserem um “;” virtual quando existe uma quebra de linha após a declaração, porem, em um código mais complexo pode resultar em erro.