JavaScript Básico

JavaScript ou apenas JS, é uma linguagem que é executada pelo próprio navegador de internet (client-side), diferente do PHP por exemplo que é executada no lado do servidor (server-side). O Js foi desenvolvido pela equipe do Mozaic, o primeiro navegador web que existiu, que mais tarde viraria NetScape e que nos dias atuais, seu descendente diretor é o Mozilla Firefox.

Esta linguagem foi criada para dar dinamismo nas páginas web permitindo que os visitantes da página se interagissem com ela clicando em botões e confirmando ações em janelas pop-up. Hoje o JS é mantido por um grupo denominado W3C, órgão máximo que regulamenta e padroniza o desenvolvimento para web em todo o mundo.

Primeira aplicação JS

Para executar scripts JS basta usar os elementos <script></script>, veja um exemplo;

  <script type="text/javascript">
    alert('Hello World!');
  </script>

Principais comandos de saída

alert(“Olá”) -> Exibe uma janela pop-up no navegador com uma mensagem qualquer, neste exemplo a mensagem é olá.
console.log(“Olá”) -> Exibe uma mensagem olá no console do navegador, no Chrome, pressione F12 para acessar o console.
document.write(“Olá”) -> Escreve um texto na página HTML.

Variáveis

HTML por si só não permite o uso de variáveis, nem ao menos permite realizar cálculos. Para resolver estas questões podemos recorrer ao JS. As declarações de variáveis são simples, bastando apenas usar o comando var.

><script>
  var nome="Anderson";
  var profissao = "professor";
  alert("Olá " + nome);
  alert("Sua profissão é " + profissao);
</script>

Note que a concatenação é feita pelo sinal de +

Veja este outro exemplo com cálculos;

<script>
  var n1 = 10;
  var n2 = 20;
  var soma= n1 + n2;
  var media= (n1 + n2)/2;
  alert("a soma é " + total + " a média é " + media);
</script>

Operador de decisão if/else

O if é o principal operador de decisão no JS, veja um exemplo usando IF/ELSE

<script>
  var nome  = "Pablo";
  var idade = 16;
  alert("Olá " + nome);
  
 if (idade < 18) {
    alert("Você é menor de idade");
 } else {
    alert("Você é maior de idade");
 }
</script>

Comando de entrada – prompt box

É possível fazer a leitura de dados de duas formas diferentes, a primeira é com uma caixa de prompt.

<script>
   var nome = prompt("Digite seu nome");
   alert("Olá " + nome);
</script>

Conversão de valores

Quando lemos valores de um prompt o valor recebido será sempre uma string, se o visitante do meu site digitar 10 o JS irá entender o 10 como uma cadeia de caracteres, mas não entenderá que se trata de um número. Caso você precise usar o valor 10 como numérico e não como string, você deverá converter o valor.

Para converter inteiros usamos a função parseInt() como mostra o exemplo abaixo;

<script>
   var n1= prompt("Digite um número");
   var n2= prompt("Digite outro número");
   var resultado = parseInt(n1) + parseInt(n2);
   alert("O resultado é " + resultado );
</script>

Caso necessite converter valores com casas decimais, utilize o parseFloat(), porém, as casas decimais em Js são definidas por ponto, ou seja, 2,5 em JS deve ser escrito como 2.5, exemplo; var z = parseFloat(“3.15”);

Material de estudo

Material excelente da W3Schools – http://www.w3schools.com/js/default.asp

Material oficial do JavaScript da equipe do Mozilla – https://developer.mozilla.org/pt-BR/docs/Web/JavaScript