A linguagem JavaScript foi originalmente desenvolvida por Brendan Eich da Netscape com o nome inicial de “Mocha”, modificado posteriormente para LiveScript e depois para JavaScript. A nomenclatura “LiveScript” foi utilizada ainda no lançamento da linguagem, na versão beta do navegador Netscape 2.0, mais precisamente em setembro de 1995, obtendo mudança de nome em anúncio conjunto com a Sun Microsystems, em dezembro do mesmo ano, quando foi implementada no navegador Netscape versão 2.0B3.
O que é o DOM?
O Modelo de Documento por Objetos (Document Object Model - DOM) é uma convenção multiplataforma e independente de linguagem para representação e interação com objetos em documentos HTML, XHTML e XML. Os nós de cada documento são organizados em uma estrutura de árvore, chamada de árvore DOM.
É uma interface que representa como os documentos HTML e XML são lidos pelo seu browser. Após o browser ler seu documento HTML, ele cria um objeto que faz uma representação estruturada do seu documento e define meios de como essa estrutura pode ser acessada. Nós podemos acessar e manipular o DOM com JavaScript, é a forma mais fácil e usada.
A mutação do nome LiveScript para JavaScript se deu na mesma época em que o Netscape adicionou suporte a tecnologia Java em seu navegador (Applets). A escolha foi criticada por parecer uma estratégia de marketing da Netscape em se aproveitar da popularidade do recém-lançado Java.
Não demorou muito para a linguagem JavaScript ser aceita de forma ampla como linguagem de script cliente-side de páginas web. Por isso, a Microsoft lançou um dialeto compatível com a linguagem de nome JScript para evitar problemas de trademark. JScript inovou métodos para aperfeiçoar métodos do JavaScript relacionados a data que apresentavam problemas. O JavaScript e Jscript são tão similares que os dois termos são comumente usados de forma intercambiável.
A Netscape anunciou, em novembro de 1996, que tinha havia submetido JavaScript para Ecma internacional como um candidato a um padrão industrial. O resultado do trabalho posteriormente foi a versão padronizada, intitulada ECMAScript.
Desde então, o JavaScript tem se transformado na linguagem de programação mais popular da web. Inicialmente, muitos profissionais denegriram a linguagem, pois a mesma tinha como alvo principal o público leigo. Com o advento do Ajax, JavaScript teve sua popularidade de volta e recebeu mais atenção profissional. Com isso, a proliferação de frameworks e bibliotecas, práticas de programação aperfeiçoadas, aumento no uso do JavaScript fora do ambiente comum dos navegadores e uso de plataformas JavaScript server-side se tornou notória.
O projeto CommonJS foi fundado em janeiro de 2009, seu objetivo era especificar uma biblioteca padrão para o desenvolvimento JavaScript fora do navegador.
JavaScript x Java
É pouco provável que algum programador que esteja iniciando seus estudos sobre as linguagens da web não tenha se deparado com essa dúvida: o JavaScript tem o mesmo objetivo do que o Java?
No primeiro momento muitos acham que sim, por suas semelhanças no nome e por serem linguagens web. Observe algumas distinções que mostram que essas duas linguagens não tem nada em comum.
JavaScript
- Linguagem de scripting sem necessidade de compilação;
- Código integrado no HTML;
- Interações e efeitos nas páginas;
- Falta de confidencialidade do código;
- Linguagem simples.
Java
- Linguagem de programação compilados na JVM;
- Independente de plataforma;
- Fortemente tipada;
- Linguagem mais complexa;
- Segurança no código.
Colocando JavaScript em uma página web
A primeira coisa a ser feita é deixar que o navegador web saiba que será informado algum tipo de script ao invés do HTML, é onde a tag entra. Essa tag é colocada dentro das tags ou de um documento HTML, a mesma pode ser inserida em vários scripts dentro da mesma página ou apenas sendo chamada em arquivos externos com a extensão .js. A opção de fazer uma chamada JavaScript para o arquivo é uma boa prática, pois funciona como um repositório contendo todos os scripts guardados em um lugar e o programador pode aproveitar os códigos em outras páginas, sem precisar repetir o código, apenas fazendo a chamada desse arquivo.
Nos exemplos mostrados nesse artigo foram criados arquivos.html e usado o programa Notepad++ para elaboração do código.
Na Listagem 1 mostramos o código simples de mensagem de boas vindas para o usuário.
<!DOCTYPE html>
<html>
<head>
<title>Script Boas Vindas</title>
<script type="text/JavaScript">
alert("Seja Bem vindo! ");
</script>
</head>
<body>
Corpo do Html
</body>
</html>Interatividade com o usuário através dos eventos
Os eventos são mecanismos que se comunicam com as ações que o usuário executa em um determinado documento HTML, de onde provém alguma interatividade. Também pode ser pensado que os eventos são notificações JavaScript que permitem saber quando alguma ação aconteceu. O objetivo dos eventos é responder os acontecimentos de uma página web com o código JavaScript. Vejamos a lista dos principais eventos que essa linguagem possui:
- onBlur: é ativado quando o usuário retira o foco da aplicação de um elemento da página. O foco da aplicação é o lugar onde está o cursor.
- onChange: Muda o estado de um elemento de formulário, às vezes não se produz até que o usuário retire o foco da aplicação do elemento.
- onClick: Quando clicado no botão do mouse sobre um elemento da página, geralmente um botão ou um link.
- onFocus: Quando um elemento da página ou a janela recebe o foco da aplicação. Contrário do evento “onblur”.
- onKeydown: Gerado no instante que um usuário pressiona uma tecla, independentemente de soltá-la ou não. A produção acontece no momento do clique.
- onKeypress: Resultado de uma tecla clicada por um tempo específico. Antes disso, produz-se um “onekeydown” no momento que se pressiona a tecla.
- onKeyup: Produzido quando o usuário deixa de apertar uma tecla, ou seja, no momento que libera a tecla.
- onLoad: Quando a página e as imagens terminarem de carregar.
- onMousedown: Quando o usuário clica sobre um elemento da página, produzindo no momento do clique do botão, independente de estar solto ou não.
- onMousemove: Produz-se quando o mouse se move pela página.
- onMouseout: Ocorre com a retirada da seta do mouse da área ocupada um elemento da página.
- onMouseover: Quando a seta do mouse entra na área ocupada por um elemento da página.
- onMouseup: Resulta do momento que o usuário solta o botão do mouse, que previamente havia clicado.
- onMove: Ocorre com o movimento da janela do navegador ou um frame.
- onResize: Quando a janela do navegador é redimensionada, ou o frame, no caso de que a página os tenha.
- onReset: Ocorre quando um usuário clica no botão de reset de um formulário.
- onSelect: Executa quando um usuário realiza uma seleção de um elemento de um formulário.
- onSubmit: Quando o botão do tipo “submit” envia algum formulário. É executado antes do envio do formulário.
Na Listagem 2 é apresentado como trabalhar com alguns eventos citados acima.
<!DOCTYPE html>
<html>
<head>
<title>Calculadora interactiva</title>
<script language="JavaScript">
function calculaResultado(form) {
form.resultados.value = eval(form.entrada.value);
}
function expressaoMatematica(form) {
form.entrada.blur();
form.entrada.value = prompt("Insira uma expressão matemática.
Ex: 2 + 2","");
calculaResultado(form);
}
function limparCampos(){
var entradaValor = document.getElementById("entrada").value;
var resultadoValor = document.getElementById("resultados").value;
//Passa o valor do campo para vazio
entradaValor = "";
resultadoValor = "";
}
</script>
</head>
<body>
<h1>Calcula expressão matemática</h1>
<form method="post" onsubmit="limparCampos()">
Calculadora:<input type="text" id="entrada" name="entrada" value=""
onFocus="expressaoMatematica(this.form)">
<br>Resultado:<input type="text" id="resultados" name="resultados"
value="" onFocus="this.blur()">
<input type="submit" value="LimparCampos">
</form>
</body>
</html>Na Listagem 3 é mostrado o evento verificando as coordenadas do mouse.
<html>
<head>
<title>Cordenadas do Mouse via JavaScript</title>
<script>
function coordenadas(evento) {
var x;
var y;
if (window.event){//Forma de se pegar as coordenadas no Internet
Explorer ou Google Chrome
x = window.event.clientX;
y = window.event.clientY;
}else{//Forma de se pegar as coordenadas no Firefox ou Google Chrome
x = evento.clientX;
y = evento.clientY;
}
document.getElementById("coordenadas").innerHTML = "Cordenadas
atual do mouse: " + x + ", " + y;
}
document.onmousemove = coordenadas;
</script>
</head>
<body>
<div id="coordenadas"></div>
</body>
</html>A seguir é realizado um script que faz a interação com o usuário através de imagens, funções e textos de apresentação. Portanto, para ser gerada alguma ação, os seguintes passos terão que ser pensados nesse cenário, como:
- Saber quando a página termina de carregar.
- Saber como exibir a ação para que o usuário consiga visualizá-la.
O primeiro item envolve a reposta de um evento, provavelmente um que seja executado ao carregar a página. O segundo item envolve usar um recurso JavaScript predefinido.
Na Listagem 3 realiza-se a chamada de uma função desenvolvida, que faz uma saudação para o usuário com o texto que for digitado.
Na Listagem 4 é realizada uma interação com o usuário.
<!DOCTYPE html>
<html>
<head>
<title>Interagindo com o usuário</title>
<script type="text/JavaScript">
function olaSmile(){
var nomeUsuario = prompt("Qual o seu nome?", "Digite aqui");
if(nomeUsuario){
alert('Prazer em conhecer você, '+nomeUsuario);
document.getElementById("idImgFeliz").src = "feliz.jpg"
}
}
</script>
</head>
<body onload="alert('Olá usuário, clique na imagem para fazer
a interação!');">
<div >
<img id="idImgFeliz" SRC="infeliz.jpg" alt="infeliz"
onClick="olaSmile()" />
</div>
</body>
</html>Criando Funções Inteligentes
As funções são pequenos trechos de códigos que permitem tornar os mesmos reutilizáveis e mais eficientes, ou seja, transformam grandes problemas em pequenos. Os objetivos em se ter funções em um programa são: divisões de tarefas, organização do código e soluções de problemas. Possuir funções nos códigos é uma forma inteligente de fazer sistemas, pois deixam o script mais simples e organizado. Geralmente se uma função quando for necessário fazer chamadas de eventos ou quando submeter uma página.
Veja no código da Listagem 5 um exemplo de manipulação do componente HTML conhecido como “dual list”, mostrando como selecionar um ou mais itens.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Transfere itens - Dual List</title>
</head>
<script>
var strDes;
var strRem;
function onMoveItem(objRemetente, tdRemetente, objDestino, tdDestino){
var totalRem;
var totalDes;
var strtemp
var strValor;
strDes = "<SELECT id='" + objDestino.id + "' style='WIDTH: 130px; height:
100px' name='" + objDestino.id + "' multiple='multiple' onchange='
setaValor(this.id);' height='200px'>";
strRem = "<SELECT id='" + objRemetente.id + "' style='WIDTH: 130px;
height: 100px' name='" + objRemetente.id + "' multiple='multiple'
onchange='setaValor(this.id);' height='200px'>";
totalRem = objRemetente.length;
totalDes = objDestino.length;
for (i=0; i < totalDes; i++){
strValor = objDestino.options[i].text;
strDes += "<option value='" + strValor + "'>" + strValor + "</option>";
}
for (i=0; i < totalRem; i++){
strValor = objRemetente.options[i].text;
if (objRemetente.options[i].selected){
strDes += "<option value='" + strValor + "'>" + strValor + "</option>"
}else{
strRem += "<option value='" + strValor + "'>" + strValor + "</option>"
}
}
strDes += "</SELECT>";
strRem += "</SELECT>";
document.getElementById(tdDestino).innerHTML = strDes;
document.getElementById(tdRemetente).innerHTML = strRem;
sortSelect(document.getElementById(objRemetente.id), true);
sortSelect(document.getElementById(objDestino.id), true);
}
</script>
<body>
<table width="100%" border="0" >
<tr>
<td width="33%" align="center" >
</td>
<td width="34%">
<table width="100%" border="0">
<tr>
<td align="center" id="tdFilhos">
<SELECT id=cboFilhos
name=cboFilhos multiple="multiple">
<option value="0">RS</option>
<option value="1">SC</option>
<option value="2">SP</option>
<option value="3">RJ</option>
<option value="4">TO</option>
<option value="5">AM</option>
<option value="6">CE</option>
</SELECT>
</td>
<td valign="middle" align="center">
<input type="button" id="btnMoverDir" name="cboMoverDir"
value=">>" onClick="onMoveItem(cboFilhos, 'tdFilhos',
cboFilhosSel, 'tdFilhosSel');"/><BR /><br />
<input type="button" id="btnMoverEsq" name="cboMoverEsq"
value="<<" onClick="onMoveItem(cboFilhosSel,
'tdFilhosSel', cboFilhos, 'tdFilhos');"/>
</td>
<td align="center" id="tdFilhosSel">
<SELECT id=cboFilhosSel style="WIDTH: 130px; height:
100px" name=cboFilhosSel multiple="multiple" height="200px">
</SELECT>
</td>
</tr>
</table>
</td>
<td width="33%">
</td>
</tr>
</table>
</body>
</html>Na Listagem 6 vemos outro código que força o usuário inserir a informação correta, neste caso o campo e-mail.
<!DOCTYPE html>
<html>
<head>
<script>
function validaForm()
{
var x=document.forms["formValidacao"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("E-mail não válido, verifique!");
return false;
}else{
alert("Email válido = "+x);
return true;
}
}
</script>
</head>
<body>
<form name="formValidacao" onsubmit="return validaForm();"
method="post">
Email: <input type="text" name="email">
<input type="submit" value="Validar Informação">
</form>
</body>
</html>Na Listagem 7 é brevemente demonstrado como o programador consegue fazer uma pequena validação no formulário HTML usando a linguagem JavaScript.
<html>
<head>
<title>Script Validação de Campos</title>
<script type="text/JavaScript">
function validaCampos(form) {
//Recupera o id do elemento nome dentro do form
var nome = document.getElementById("nome").value;
if (nome == "") {
alert("Digite algum texto no campo!");
form.nome.focus();
return false;
}
//Recupera o id do elemento idade dentro do form
var idade = document.getElementById("idade").value;
if (idade == "" || !validaNumero(idade)) {
alert("Digite apenas números!");
form.idade.focus();
return false;
}
//Verifica se foi selecionado ou não
if (form.sexo[0].checked==false &&
form.sexo[1].checked==false) {
alert("Selecione o sexo!");
return false;
}
}
//Função que valida se o campo é um número
function validaNumero(numero)
{
var ValidaChars = "0123456789";
var IsNumero=true;
var Char;
for (i = 0; i < numero.length &&
IsNumero == true; i++)
{
Char = numero.charAt(i);
if (ValidaChars.indexOf(Char) == -1)
{
IsNumero = false;
}
}
return IsNumero;
}
</script>
</head>
<body>
<form name="formCad" onsubmit="return
validaCampos(formCad)">
Digite o nome:
<input id="nome" type="text" size="12"/>
<br />
Digite a idade:
<input id="idade" type="text" size="5"/>
<br />
Sexo: <input type="radio" name="sexo" value="0">
Masculino
<input type="radio" name="sexo"
value="1"> Feminino
<br/><br/>
<input type="submit" value="Salvar">
</form>
</body>
</html>Comportamentos e propriedades dos elementos via DOM
Existe um modelo de objeto genérico entre o HTML, XML e o JavaScript que ajuda na construção de aplicações ricas para web, é conhecido como DOM (Document Object Model).
Por ser um padrão da Web (W3C), os scripts gerados têm compatibilidade nos principais navegadores, gerando um conforto maior para o desenvolvimento.
O DOM é uma API independente de linguagem que facilita a manipulação da estrutura de um documento e seus elementos de páginas HTML, XML, XHTML ou páginas JavaScript. Ajuda também na customização dos elementos de modo completo, possibilitando aos programas e scripts acessarem e atualizarem dinamicamente o conteúdo e o estilo de um documento.
Nessa API existem dois métodos que provavelmente são os mais usados na área de desenvolvimento listados abaixo:
- document.getElementById(id) – Retorna elemento a partir do valor de seu atributo ID. Por boas práticas, todos os elementos html devem possuir a propriedade “id” para serem manipulados pela API. Caso aconteçam tentativas de acessos aos elementos que não possuem “id” definidos, sempre irá retornar o valor nulo (null).
- document.getElementByTagName(tag) – Retorna um conjunto de elementos que são definidos pela tag do elemento. Esse método retorna um array contendo todos os elementos na página, na ordem na qual aparecem no documento HTML.
Na Listagem 8 é mostrado um exemplo do acesso por tag com o elemento getElementByTagName.
<!DOCTYPE html>
<html>
<head>
<script>
function getElements()
{
//Recupera os elementos que encontram-se no documento
var x=document.getElementsByTagName("input");
alert("Resposta = "+x.length);
}
</script>
</head>
<body>
<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<input type="button" onclick="getElements()"
value="Clique e veja quantos elementos inputs estão nessa página?">
</body>
</html>Quando o modelo DOM é representado em um documento HTML, a página pode ser representada como uma hierarquia de elementos na forma de uma árvore (tree), ou seja, cada folha na árvore representa um nó (node), que se relaciona diretamente a cada elemento em uma página. Na hora que um nó aparece sob outro nó na árvore é construída uma hierarquia, nesse caso acaba sendo considerado um filho desse nó.
Cada nó em uma árvore DOM é classificado conforme seu tipo. Os principais tipos de nó basicamente são de elemento e texto.
- Elemento – Qualquer elemento HTML que corresponde a uma tag no código HTML.
- Texto – O conteúdo do texto para um elemento, sempre armazenado como um nó-filho sob um elemento.
Na Figura 1 e Listagem 9 é mostrado um exemplo de código com a hierarquia dos elementos html de modo gráfico.
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>
Parágrafo 1 da página
<h1>
<p>Parágrafo 1 da página <em>pedaço do text node com
elemento em</em> volta para o elemento parágrafo</p>
<p>Parágrafo 2 da página</p>
</body>
</html>Na Listagem 10 são mostrados quais os atributos do elemento HTML conhecido como “div”. Através da propriedade “innerHTML” é conseguido o acesso a todo o conteúdo armazenado no elemento.
<html>
<head>
<title>Hieraquia do elemento div por JavaScript</title>
<script type="text/JavaScript">
function listarAtributos(){
var elem = document.getElementById("conta");
var atributos = "";
for(var i = 0; i < elem.attributes.length; i++){
atributos += elem.attributes[i].nodeName + "<br>";
}
elem.innerHTML = atributos;
}
</script>
</head>
<body>
<div id="conta" >
Aqui é um elemento DIV</div>
<button onclick="JavaScript:listarAtributos()">
Listar atributos da DIV</button>
</body>
</html>A origem das interações com o DOM tem como o objeto “document”, que é um nó superior na árvore de nós de um documento. Esse objeto oferece dois métodos que são o getElementById( ) e getElementByTagName( ), ambos já mostrados em scripts anteriores.
A seguir são mostrados os métodos que podem ser usados para percorrer o documento, bem como:
- hasChildNodes - retorna true se o elemento possui filhos;
- firstChild - retorna uma referência ao primeiro elemento filho;
- lastChild - retorna uma referência ao último elemento filho;
- nextSibling - retorna uma referência ao irmão posterior ao elemento;
- previousSibling - retorna uma referência ao irmão anterior ao elemento;
- nodeName - retorna o nome da TAG do elemento (apenas para elementos nó);
- nodeValue - retorna o valor do elemento (apenas para elementos texto);
- nodeType - retorna o tipo do elemento;
- parentNode - retorna uma referência ao elemento pai.
Essas propriedades são a chave para ser capaz de manipular a árvore de documentos para acessar dados específicos do nó.
Veja na Listagem 11 a recuperação das informações sobre cada elemento no documento.
<html>
<head>
<title>
Propriedades da árvore DOM
</title>
<script>
//nossas variáveis globais, que serão compartilhadas por todas as nossa funções
var el;
var nome;
var tipo;
var valor;
function start()
{
el = document.documentElement; //pega o elemento HTML, raiz do documento
nome = document.getElementById("nome"); //pega o elemento com o id nome
tipo = document.getElementById("tipo"); //pega o elemento com o id tipo
valor = document.getElementById("valor"); //pega o elemento com o id valor
mostra();
}
function mostra() //exibe as informações
{
nome.value = el.nodeName;
tipo.value = el.nodeType;
valor.value = el.nodeValue;
}
function restart() //retorna para o elemento raiz
{
el = document.documentElement;
mostra();
}
function primeiroFilho() // vai para o primeiro elemento filho
{
if(el.firstChild){
el = el.firstChild;
mostra();
}
else
alert("O Elemento não possui filhos !");
}
function ultimoFilho() // vai para o último elemento filho
{
if(el.lastChild){
el = el.lastChild;
mostra();
}
else
alert("O Elemento não possui filhos !");
}
function obterPai() // volta para o elemento pai
{
if(el.parentNode){
el = el.parentNode;
mostra();
}
else
alert("O Elemento não possui Pai !");
}
function proximoIrmao() //vai para o irmão posterior
{
if(el.nextSibling){
el = el.nextSibling;
mostra();
}
else
alert("O Elemento não possui um próximo irmão !");
}
function irmaoAnterior() //vai para o irmão anterior
{
if(el.previousSibling){
el = el.previousSibling;
mostra();
}
else
alert("O Elemento não possui um irmão anterior !");
}
</script>
</head>
<body>
<form>
<fieldset>
<input type="button" name="next" value="Next Irmão" onClick="proximoIrmao();" />
<input type="button" name="prev" value="Prev Irmão" onClick="irmaoAnterior();" />
<input type="button" name="parent" value="Pai" onClick="obterPai();" />
<input type="button" name="first" value="First Filho" onClick="primeiroFilho();" />
<input type="button" name="last" value="Last Filho" onClick="ultimoFilho();" />
<input type="button" name="reiniciar" value="Reiniciar" onClick="restart();" />
<br/>
Valor :<input type="text" name="valor" id="valor" value="" size="65" />
<br/>
Tipo : <input type="text" name="tipo" id="tipo" value="" />
<br/>
Nome do elemento:<input type="text" name="nome" id="nome" />
</fieldset>
</form>
</body>
</html>
<script language="JavaScript">
start();// inicia no elemento HTML, mas antes ele espera que todo o documento esteja carregada
</script>Com este artigo podemos concluir que o JavaScript é a linguagem para quem deseja desenvolver mais a lógica e saber como manipular elementos, pois é capaz de se adaptar com outras linguagens Web e frameworks, fechando uma boa parceria.
