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()

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. José A. Furquim
    27 de outubro de 2010

    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
      28 de outubro de 2010

      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



  2. Cassio
    27 de outubro de 2010

    Muito bom esse seu post, essencial para quem quer entrar na área!



    • Diogo Espinha
      28 de outubro de 2010

      Muito obrigado Cassio, fico contente por ver reconhecido o valor dos artigos presentes na Escola de Criatividade.

      Abraço



  3. deividiaz
    28 de outubro de 2010

    Muito bom esse seu post, essencial para quem quer entrar na área[2]



    • Diogo Espinha
      28 de outubro de 2010

      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!



  4. Felipe Araújo Menegassi
    3 de novembro de 2010

    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
      6 de novembro de 2010

      Obrigado Felipe, fico muito contente por este artigo lhe ser útil!

      Obrigado pela sua visita e comentário,

      Abraço!



  5. Danilo
    9 de novembro de 2010

    olá, parabéns, pelo post, mas só pra contrariar um pouquinho :) , pra quem realmente não sabe absolutamente nada, está muito “sólido”.



  6. Thiago Gringon
    15 de janeiro de 2011

    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



  7. Danilo
    16 de janeiro de 2011

    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.



  8. Luan Muniz
    14 de junho de 2011

    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.



  9. herbert
    3 de outubro de 2012

    curti…
    algo que parecia um bicho de sete cabeças foi aqui para começar bem resumido e detalhado. valeu
    mas podia apresentar um exemplo completo da “tag windows.open() por favor


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz