JavaScript Tutorial

Quando desenvolvemos páginas web, utilizamos como base a linguagem de marcação de hipertexto (HTML), que forma toda a estrutura do documento a partir de tags, trechos de código que são identificados e interpretados pelo navegador para montar algum elemento.

JavaScript Tutorial

• Porque usar Javascript?
• A história do JavaScript
• Inserindo o código JavaScript na página HTML
• Sintaxe da linguagem JavaScript
• Usando variáveis no JavaScript
• Trabalhando com funções
• Estruturas de controle de fluxo
• Exibindo mensagens para o usuário com JavaScript: Alert
• Manipulando eventos
• JavaScript e Node

Porque usar Javascript?

Aliando essa estrutura às CSS (Cascading Style Sheets), conseguimos estilizar os elementos da página, garantindo uma formatação visual mais completa e de fácil manutenção. Temos assim uma página bem estruturada, com vários elementos visuais (e não visuais) como formulários e tabelas bem formatados, com bordas, cores de plano de fundo, imagens, etc.

Documentação: JavaScript indexOf()

Porém, não vamos muito além disso, utilizando apenas HTML e CSS se obtemos apenas documentos ESTÁTICOS, sem interação com o usuário, como caixas de diálogo e validação de entrada de dados.

Para preencher essa lacuna, foi desenvolvida na década de 1990 uma linguagem de script chamada inicialmente de Mocha, posteriormente renomeada para LiveScript e finalmente lançada com o nome de JavaScript.

O nome JavaScript foi inicialmente motivo de confusão devido a semelhança com o nome da linguagem Java, mas estas duas tecnologias não estão diretamente relacionadas. Ou seja, JavaScript não é uma implementação especial da Java ou é baseado nesta última.

A JavaScript foi inicialmente implementada e lançada no browser Netscape 2.0, e hoje é a principal linguagem de script do lado cliente, suportada por todos os principais browsers.

Essa é chamada uma “linguagem do lado cliente” por que sua execução se dá diretamente no browser, independente de servidor. Assim, JavaScript não é uma linguagem para acesso a banco de dados, mas para tratamento e dinamização dos elementos da página.

A história do JavaScript

JavaScript é uma linguagem de programação interpretada. Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido.

É atualmente a principal linguagem para programação client-side em navegadores web. Começa também a ser bastante utilizada do lado do servidor através de ambientes como o node.js. Foi concebida para ser uma linguagem com orientação a objetos baseada em protótipos, tipagem fraca e dinâmica e funções de primeira classe. Possui suporte à programação funcional e apresenta recursos como fechamentos e funções de alta ordem comumente indisponíveis em linguagens populares como Java e C++. É a linguagem de programação mais utilizada do mundo.

É baseada em ECMAScript padronizada pela Ecma international nas especificações ECMA-262 e ISO/IEC 16262.

O JavaScript foi primeiramente desenvolvido por Brendan Eich quando trabalhou na Netscape sob o nome de Moch, mas tarde teve seu nome alterado para LiveScript e por fim JavaScript. LiveScript foi o nome oficial da linguagem quando foi lançada pela primeira vez na versão beta do navegador Netscape 2.0 em setembro de 1995, mas teve seu nome mudado em um anúncio conjunto com a Sun Microsystems em dezembro de 1995 quando foi implementado no navegador Netscape versão 2.0B3.

A mudança de nome de LiveScript para JavaScript coincidiu com a época em que a Netscape adicionou suporte à tecnologia Java em seu navegador (Applets). A escolha final do nome causou confusão dando a impressão de que a linguagem foi baseada em java, sendo que tal escolha foi caracterizada por muitos como apenas uma estratégia de marketing da Netscape para aproveitar a fama do recém-lançado Java.

O JavaScript rapidamente ganhou ampla aceitação como linguagem de script client-side de páginas web. Como consequência, a Microsoft desenvolveu um dialeto compatível com a linguagem de nome JScript para evitar problemas de marca registrada. JScript adicionou novos métodos para consertar métodos do JavaScript relacionados a data que apresentavam problemas. JScript foi incorporado no Internet Explorer 3.0, lançado em Agosto de 1996. JavaScript e Jscript são tão similares que os dois termos são comumente usados de forma permutável. A Microsoft entretanto declara muitas características nas quais JScript não conforma com a especificação ECMA.

O JavaScript tem se transformado na linguagem de programação mais popular da web. Inicialmente, no entanto, muitos profissionais denegriram a linguagem pois ela tinha como alvo principal o público leigo. Com o aproximação do Ajax, o JavaScript teve sua popularidade de volta e recebeu mais atenção dos profissionais. O resultado foi a proliferação de frameworks e bibliotecas, práticas de programação melhoradas e o aumento no uso do JavaScript fora do ambiente de navegadores, bem como o uso de plataformas de JavaScript server-side.

Em novembro de 1996 a Netscape anunciou que tinha submetido JavaScript para Ecma internacional como candidato a padrão industrial e o trabalho subsequente resultou na versão padronizada chamada ECMAScript.

Curso: Introdução ao JavaScript

Em janeiro de 2009 o projeto CommonJS foi fundado com o objetivo de especificar uma biblioteca padrão para desenvolvimento JavaScript fora do navegador.

Inserindo o código JavaScript na página HTML

Os códigos JavaScript podem ser inseridos na página HTML de duas formas:

Interno no documento: para inserir o código direto na estrutura do HTML, utilizamos as tags <script> e </script>, conforme mostra a Listagem 1.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      //código JavaScript
    </script>
  </head>
  <body>
  </body>
</html>

Listagem 1. Inserindo código JavaScript interno no HTML

Externo ao documento: o código JavaScript também pode ser mantido em um arquivo separado do HTML. Para isso, deve-se referenciar tal arquivo na página, como vemos na Listagem 2

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="meuArquivo.js"></script>
  </head>
  <body>
  </body>
</html>

Listagem 2. Referenciando código JavaScript em arquivo externo

O arquivo deve ser salvo com a extensão .JS e sua estrutura é a mesma utilizada quando o código é posto internamente no documento.

Cabe aqui uma observação importante: a tag <script> requer a tag de fechamento separada, não podendo ser fechada em si própria como <script type=.. />.

Sintaxe da linguagem JavaScript

JavaScript foi criada com base na ECMAScript e sua sintaxe é bastante semelhante a linguagens de alto nível muito utilizadas como C e Java, como veremos a seguir.

Usando variáveis no JavaScript

Essa linguagem possui tipagem dinâmica, ou seja, não é necessário definir o tipo das variáveis ao declará-las, para isso basta usar a palavra reservada var. Na Listagem 3 temos alguns exemplos de utilização de variáveis.

var nome;
nome = “Fulano de Tal”;
var idade = 30;
idade = 30 + 20 - 10*5;

Listagem 3. Utilizando variáveis

Trabalhando com funções

JavaScript fornece também suporte a funções, aliado às facilidades da tipagem dinâmica, o que torna a definição de métodos simples e prática. Para criar funções, utilizamos a palavra reservada function.

As funções podem receber parâmetros e retornar valores, mas o tipo de retorno e o tipo dos parâmetros não precisa ser previamente definido. Nas Listagens 4 e 5temos exemplos de funções com e sem parâmetros e retorno.

function exibirMensagem()
{
  alert(“Olá, seja bem vindo(a)!”);
}

Listagem 4. Função em JavaScript sem parâmetro e sem retorno

function somar(A, B)
{
  return A + B;
}

Listagem 5. Função em JavaScript com parâmetro e com retorno

Para definir o valor de retorno da função, deve-se utilizar a palavra reservada return seguida do valor ou expressão do resultado.

Estruturas de controle de fluxo

Assim como a maioria das linguagens de alto nível, JavaScript possui estruturas condicionais e de repetição para controle de fluxo. Na Listagem 6 temos a sintaxe e um exemplo de uso de tais estruturas.

if(condição 1)
{
  //ação se condição 1 verdadeira
}
else if (condição 2)
{
  //ação se condição 2 verdadeira
}
else
{
  //ação se nenhuma das condições for verdadeira
}

Listagem 6. Sintaxe da estrutura if - else

O bloco else pode ser omitido, caso apenas uma condição precise ser avaliada. A Listagem 7 mostra um exemplo onde uma variável chamada idade é avaliada e, dependendo do seu valor, uma mensagem é exibida na tela.

if(idade > 18)
{
alert(“É maior de idade”).
}
else
{
alert(“É menor de idade”);
}

Listagem 7. Exemplo de uso da estrutura if - else

switch(variável)
{
case valor1:
//ações caso valor1
break;
case valor2:
//ações caso valor2
break;
case valor3:
//ações caso valor3
break;
default:
//ações caso nenhum dos valores
break
}

Listagem 8. Sintaxe da estrutura switch

O comando switch verifica o valor de uma variável e, para cada uma das opções, executa um conjunto de ações. Se nenhum dos valores for verificado, os comandos do bloco default são executados.

O bloco default, porém, pode ser omitido caso não exista uma ação padrão a ser executada se nenhuma das opções for observada.

switch(dia)
{
case 1:
alert(“Hoje é domingo”);
break;
case 2:
alert(“Hoje é segunda”);
break;
case 3:
alert(“Hoje é terça”);
break;
default:
alert(“Hoje não é nem domingo, nem segunda, nem terça”);
break
}

Listagem 9. Exemplo de uso da estrutura switch

while(condição)
{
  //ações
}

Listagem 10. Sintaxe da estrutura while

A estrutura de repetição while é usada para executar um conjunto de ações enquanto uma condição for verdadeira. Quando a condição se tornar falsa, o bloco é finalizado. A seguir temos um exemplo que exibe uma mensagem para o usuário enquanto uma variável for menor que 5.

var contador = 0;
while(contador < 5)
{
  alert(“Olá”);
  contador = contador + 1;
}

Listagem 11. Sintaxe da estrutura while

Uma outra estrutura muito semelhante é a do - while, que executa um bloco de ações até que uma condição seja falsa. Porém, essa condição é avaliada após a execução dos comandos, fazendo com que estes sejam executados pelo menos uma vez.

do
{
  //ações
}
while(condição)

Listagem 12. Sintaxe da estrutura do - while

O mesmo exemplo da Listagem 11, usando o do - while poderia ser representado como na Listagem 13

var contador = 0;
do
{
alert(“Olá”);
contador = contador + 1;
}
while(contador < 5)

Listagem 13. Exemplo de uso da estrutura do - while

Por último, temos o comando for, que usa um contador para executar um bloco de ações uma determinada quantidade de vezes.

for(inicialização; condição; complemento)
{
  //ações
}

Listagem 14. Sintaxe da estrutura for

O entendimento dessa estrutura fica mais fácil se observarmos um exemplo prático. Na Listagem 15, uma variável contador é inicializada com o valor zero, e enquanto for menor que 10, o laço for deve ser executado.

var contador;
for(contador = 0; contador < 10; contador++)
{
  alert(contador);
}

Listagem 15. Exemplo da estrutura for

Exibindo mensagens para o usuário com JavaScript: Alert

A linguagem JavaScript possui um número imenso de funções nativas que precisariam de vários artigos para serem explicadas detalhadamente. Aqui, serão mostradas apenas algumas das mais utilizadas por quem está iniciando os estudos.

A primeira função apresentada é a alert, que serve para exibir uma mensagem em uma janela popup. Essa função recebe apenas um parâmetro, que é o texto a ser exibido.

Saiba mais: Alert Javascript

<!DOCTYPE html>
<html>
  <head>    
    <meta charset="UTF-8"/>
    <script type="text/javascript">
      alert("Olá, seja bem vindo ao Linha de Código.")
    </script>
  </head>
  <body>
  </body>
</html>

Listagem 16. Exemplo da função alert

Salvando o conteúdo da Listagem 16 como um arquivo de extensão HTML, ao abri-lo no browser teríamos o como resultado uma mensagem como a mostrada na Figura 1.

Em seguida, temos a função prompt, que também abre uma janela popup, mas com uma caixa de texto para coletar informações do usuário. O retorno dessa função é o texto digitado.

<!DOCTYPE html>
<html>
  <head>    
    <meta charset="UTF-8"/>
    <script type="text/javascript">
      var nome;
      nome = prompt("Qual é seu nome?");
      alert("Olá, " + nome);
    </script>
  </head>
  <body>
  </body>
</html>

Listagem 17. Exemplo da função alert

Nesse caso, o valor retornado pela função prompt foi atribuído a uma variável chamada “nome”, que é utilizada em seguida na função alert para saudar o usuário.

Manipulando eventos

A linguagem JavaScript também permite trabalhar com eventos dos elementos HTML como botões e caixas de texto. Eventos são disparados quando alguma ação é executada, como o clique e num botão ou a digitação de valores em um input.

No código JavaScript pode-se atribuir valores aos eventos como se fossem propriedades, desde que o valor atribuído seja um código a ser executado. Por exemplo, a Listagem 18 mostra o código de uma página com um botão que, ao ser clicado, exibe uma mensagem (alert).

<!DOCTYPE html>
<html>
  <head>    
    <meta charset="UTF-8"/>
  </head>
  <body>
<button onclick="alert('Você clicou no botão');">clique aqui</button>
  </body>
</html>

Listagem 18. Exemplo de tratamento de evento

Vale notar que nesse caso as tags <script> não foram necessárias, pois o código encontra-se dentro do próprio button. Outro ponto a ser observado é que foram usadas aspas duplas para definir o código e aspas simples no interior do mesmo, quando precisamos escrever um texto dentro de um evento.

Caso o código a ser executado no evento seja muito extenso, é possível criar uma função para isso e associá-la ao evento em questão. Basta informar, no lugar do código, o nome da função (com parâmetros, caso existam). Na Listagem 19 temos um exemplo desse tipo.

<!DOCTYPE html>
<html>
  <head>    
    <meta charset="UTF-8"/>
    <script type="text/javascript">
      function clique_botao()
      {
        alert("Você clicou no botão");
      }
    </script>
  </head>
  <body>
    <button onclick="clique_botao();">clique aqui</button>
  </body></html>

Listagem 19. Exemplo de tratamento de evento usando função

O código executado na função, para fins didáticos, é o mesmo que o da listagem anterior, mas é fácil perceber que outras linhas poderiam ser inseridas para complementar o evento.

Agora foi preciso usar as tags <script>, pois o código encontra-se separado do elemento que o utilizará.

Como vimos, o código JavaScript nos permite tornar uma página mais dinâmica, respondendo a interações do usuário. A sintaxe, bastante parecida com outras linguagens e muito intuitiva, facilita o aprendizado e utilização.

Antes de encerrar, cabe uma observação importante: alguns browsers bloqueiam a execução de scripts JavaScript, pois estes podem ser utilizados de forma indevida para comprometer informações do usuário. Portanto, caso você tenha dificuldade para testar algum dos exemplos aqui apresentados ou outros códigos que venha a desenvolver, verifique as configurações do seu browser.

Concluímos aqui este artigo, cujo objetivo foi fazer uma breve introdução à linguagem de script do lado cliente mais utilizada atualmente: JavaScript. Para garantir domínio dessa tecnologia, é preciso que o leitor busque outras fontes de informação como a documentação, para isso acesse nossa Guia de JavaScript

JavaScript e Node

A principal característica que diferencia o Node.JS de outras tecnologias, como PHP, Java, C#, é o fato de sua execução ser single-thread. Ou seja, apenas uma thread é responsável por executar o código Javascript da aplicação, enquanto que nas outras linguagens a execução é multi-thread.

Saiba mais: Primeiros passos no Node.js

Mas o que isso significa na prática?

Em um servidor web utilizando linguagens tradicionais, para cada requisição recebida é criada uma nova thread para tratá-la. A cada requisição, serão demandados recursos computacionais (memória RAM, por exemplo) para a criação dessa nova thread. Uma vez que esses recursos são limitados, as threads não serão criadas infinitamente, e quando esse limite for atingido, as novas requisições terão que esperar a liberação desses recursos alocados para serem tratadas.

No modelo Node.js, apenas uma thread é responsável por tratar as requisições. Essa thread é chamada de Event Loop, e leva esse nome pois cada requisição é tratada como um evento. O Event Loop fica em execução esperando novos eventos para tratar, e para cada requisição, um novo evento é criado.

Apesar de ser single-threaded, é possível tratar requisições concorrentes em um servidor Node.js. Enquanto o servidor tradicional utiliza o sistema multi-thread para tratar requisições concorrentes, o Node.js consegue o mesmo efeito através de chamadas de E/S (entrada e saída) não-bloqueantes. Isso significa que as operações de entrada e saída (ex: acesso a banco de dados e leitura de arquivos do sistema) são assíncronas e não bloqueiam a thread. Diferentemente dos servidores tradicionais, a thread não fica esperando que essas operações sejam concluídas para continuar sua execução.

No servidor Node.js, o Event Loop é a única thread que trata as requisições, enquanto que no modelo tradicional uma nova thread é criada para cada requisição. Enquanto o Event Loop delega uma operação de E/S para uma thread do sistema de forma assíncrona e continua tratando as outras requisições que aparecerem em sua pilha de eventos, as threads do modelo tradicional esperam a conclusão das operações de E/S, consumindo recursos computacionais durante todo esse período de espera.

Apesar do Node.js ser single-threaded, sua arquitetura possibilita um número maior de requisições concorrentes sejam tratadas em comparação com o modelo tradicional, que é limitado devido ao alto consumo computacional pela criação e manutenção de threads a cada requisição.

Espero que essas informações possam ser úteis. Até a próxima.

Links Úteis sobre Javascript

• Curso completo de Javascript:
  Em nosso curso de Javascript veremos todos os conceitos dessa linguagem de programação desde os conceitos básicos até os mais avançados.
• DevCast: A jQuery substitui o JavaScript?:
  Saber usar a jQuery é suficiente, ou ainda preciso conhecer a linguagem JavaScript? Para contribuir com essa discussão, apresentamos nesse DevCast alguns exemplos e argumentos que lhe ajudarão a guiar seus estudos.
• Expressões regulares em JavaScript:
  Neste artigo veremos como trabalhar com expressões regulares em JavaScript, facilitando a manipulação de strings através de padrões que podem ser utilizados para validação e busca de dados.

Saiba mais sobre Javascript

• Gerando uma ação durante inatividade do usuário:
  Nesta roda de código veremos como exibir notificações para o usuário após um tempo de inatividade na página usando a Page Visibility API com JavaScript.
• Guia completo JavaScript:
  Nesse guia conheceremos a linguagem de programação JavaScript, baseada em scripts client-side de páginas web e orientada a objetos.