Programando com Javascript

Veja neste artigo como programar em Javascript. Hierarquia de objetos, os objetos mais usados, comentários, separando instruções e adicionando arquivo externo.

Javascript foi desenvolvido inicialmente pela Netscape e se chamava LiveScript, só depois que foi adaptado pela Sun ano de 1995 o nome foi alterado para Javascript.

Javascript é uma linguagem de programação que é executada no lado do cliente, é uma extensão do código Html. Os scripts serão gerados e executados pelo próprio browser, sem solicitar recursos de um servidor.

Javascript é orientado à objetos, porém não possui nativamente diversas características da orientação a objetos, mas é possível emular na maioria das vezes com a função prototype.

Javascript é case sensitive, o que isso quer dizer, significa que a linguagem diferencia letras maiúsculas e minúsculas, a letra "A" é diferente de "a".

Javascript não é Java, a sintaxe é idêntica só que a linguagem Java necessita de um kit de desenvolvimento e um compilador, Javascript é uma linguagem interpretada, não precisa ser compilada.

Alguns navegadores podem não compreender a linguagem Javascript, com isso o navegador vai assumir que o script é texto da página HTML, para que isso não aconteça precisamos colocar o código dentro de um comentário HTML.

<SCRIPT> <!-- Código Javascript //--> </SCRIPT>
Listagem 1. Script dentro um comentário

Podemos também apresentar algum texto caso o navegador não suporta o Javascript, utilizamos a tag <NOSCRIPT>.

<SCRIPT> <!-- Código Javascript //--> </SCRIPT> <NOSCRIPT> Seu Navegador não dá suporte à Script. </NOSCRIPT>
Listagem 2. NoScript

Outro jeito para adicionar o script na página pode utilizar um arquivo externo.

<script src="arquivo_externo.js" ></script>
Listagem 3. Script externo

Para indicar a linguagem que vamos utilizar, precisamos preencher o atributo language.

<script language="javascript" > //Código Javascript </script>
Listagem 4. Language

Para adicionar comentários usamos // para uma linha e /* */ para várias linhas.

<script language="javascript" > //Comentário para uma linha. /* Comentário para várias linhas. */ </script>
Listagem 5. Comentários

Podemos escrever o código dentro das tags scripts ou podemos criar funções. Quando o código está dentro de uma função o script será executado quando for chamada a função e quando não estiver o script vai ser executado quando a página for carregada.

<html> <head> <title>Javascrip</title> <script language="javascript" > alert('Oi mundo - Página Carregada'); function mensagem() { alert('Oi mundo'); } </script> </head> <body> <input type="button" value="Oi mundo" onclick="mensagem();"/> </body> </html>
Listagem 6. Códigos dentro das tags scripts

No Javascript existem duas maneiras para separar as instruções, a primeira é através do caractere ponto e vírgula, e a outra é a quebra de linha. Os textos são colocados entre aspas simples ou aspas duplas.

<script language="javascript" > document.write('Texto'); document.write('Texto1') document.write("Texto3") </script>
Listagem 7. Separando instruções

Para declarar uma variável utilizamos a palavra chave var, no Javascript não especificamos o tipo da variável, o tipo é adquirido no momento do preenchimento da variável. É uma facilidade que pode se tornar um problema, o programador não sabe que tipo de dados existe dentro da variável, caso o programador precisa verificar se o tipo é um tipo booleano ou tipo numérico, o mais seguro é converter o tipo para o tipo que ele quer verificar. Podemos declarar a variável antes de usá-la ou podemos usar sem declará-la.

<script language="javascript" > var tipoTexto = 'Nome'; var tipoNumerico = 10; var tipoFloat = 10.8; var tipoInt = '10'; var tipoBooleano = true; var tipoBooleano2 = 'true'; mensagem = 'Oi Mundo'; alert(mensagem); if (parseInt(tipoNumerico) == 10) { alert('Tipo Numérico'); } if (parseInt(tipoFloat) == 10.8) { alert('Tipo Float'); } if (parseInt(tipoInt) == 10) { alert('Tipo Int'); } if (Boolean(tipoBooleano) == true) { alert('Tipo Booleano'); } if (Boolean(tipoBooleano2) == true) { alert('Tipo Booleano'); } if (tipoBooleano2 == true || tipoBooleano2 == false) { alert('Tipo Booleano'); } else { alert('Não é Booleano'); } </script>
Listagem 8. Variáveis

Hierarquia de objetos.

Figura 1. Hierarquia de objetos

Objeto Window

Objeto window é o elemento raiz na hierarquia dos objetos, suas propriedades e métodos que controlam a janela do navegador.

Propriedades
closed Indica se a janela pode ser fechada.
document Objeto contido na página sendo mostrada.
history Páginas visitadas.
innerHeight Altura em pixels da página.
innerWidth Largura em pixels da página.
length Total de frames da janela.
location Url do documento que está sendo visualizado.
menubar Barra de menus da janela.
name Nome da janela.
opener Referência à janela do navegador que abriu a janela atual.
self Janela ou frame atual.
screen Fornece informações tamanho e cores da página.
scrollbars Objeto da barra de estado do navegador.
toolbar Objeto da barra de ferramentas.
top Faz referência à janela onde está situado o frame.
window Faz referência a janela atual, como a propriedade self.
Métodos
alert Caixa de mensagem.
close Fecha a janela.
confirm Caixa de diálogo, botões Ok e Cancel. Retorna verdadeiro caso o usuário clicar no botão OK.
open Abre uma nova janela .
prompt Caixa de entrada de dados.
setTimeout Executa a ação novamente após um determinado tempo.
clearTimeout Cancela setTimeout.

Objeto Document

Objeto document controla todos os elementos que contem na página. O objeto <document é a página atual que está sendo visualizada. Depende do objeto window, mas também pode depender do objeto frame no caso de que a página esteja sendo mostrada em um frame.

Propriedades
bgcolor Cor de fundo do documento.
fgcolor Cor padrão do texto do documento.
linkcolor Cor dos links de hipertexto do documento.
vlinkcolor Cor dos links de hipertexto já visitados do documento.
alinkcolor Cor dos links de hipertexto ativos no documento.
lastModified Retorna a data em que o documento foi alterado pela última vez.
referrer Retorna a url do documento que chamou o documento corrente.
title Retorna o título do documento, definido na tag.
links[ ] Array com referências para os links contidos no documento.
anchors[ ] Array com referências para as âncoras contidas no documento.
forms[ ] Array com referências para os formulários contidos no documento.
images[ ] Array com referências para as imagens contidas no documento.
Métodos
captureEvents Captura eventos que são disparados na página.
close Fecha o fluxo do documento.
contextual Oferece uma linha de controle dos extilos da página.
getSelection Obtém o texto selecionado na página. Não funciona do IE.
open Abre o fluxo do documento.
write Escreve na página.
wirteln Escreve e coloca uma quebra de linha na página.
getElementById Retorna um elemento da página cujo id é passado como parâmetro.
getElementsByName Retorna uma coleção de elementos cujo nome é passado como parâmetro.
getElementsByTagName Retorna uma coleção de elementos cujo nome da tag é passado como parâmetro.
createAttribute Cria um novo atributo para o elemento.
createElement Cria um novo elemento.
appendChild Adiciona um novo elemento.

Eventos no Javascript

Eventos são ações disparadas por um clique de um botão, quanto uma página é carregada pelo navegador, o clique do mouse e etc. Abaixo uma lista de alguns eventos em Javascript.

onblur Quando um elemento perde o foco.
onchange Quando muda o estado de um elemento.
onclick Quando se clica o botão do mouse sobre um elemento da página.
ondragdrop Quando um usuário solta algo que havia arrastado sobre a página web.
onerror Quando não se pode carregar um documento ou uma imagem.
onfocus Quando um elemento da página ou a janela ganham o foco.
onkeydown Quando a tecla do teclado é pressionada.
onkeypress Quando a tecla é pressionada ou segura.
onkeyup Quando a tecla é liberada.
onload Quando a página é carregada.
onmousedown Quando o botão do mouse é clicada.
onmousemove Quando o mouse se move pela página.
onmouseout Quando a seta do mouse sai da área ocupada por um elemento da página.
onmouseover Quando a seta do mouse entra na área ocupada por um elemento da página.
onmouseup Quando o botão do mouse é liberada.
onmove Quando se move a janela do navegador, ou um frame.
onresize Quando se redimensiona a janela do navegador ou o frame.
onreset Está associado aos formulários e se desata no momento que um usuário clica no botão de reset de um formulário.
onselect Quando um usuário realiza uma seleção de um elemento de um formulário.
onsubmit Quando o botão de enviar do formulário é clicado.
onunload Ao abandonar uma página.

Aqui é um exemplo como podemos criar uma página com Javascript.

<html> <head> <title>Javascript</title> <style type="text/css"> body { margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; } .backgroundTr { background: -moz-linear-gradient(top, #5D5D5D, #000000); /* for Firefox */ background: -webkit-gradient(linear, left top, left bottom, from(#5D5D5D), to(#000000)); /* For Webkit Browsers */ filter: progid:DXImageTransform.Microsoft .gradient(startColorstr='#5D5D5D', endColorstr='#000000'); /* for IE */ } .backgroundTdButtonSelection { border-right: #333333 1px solid; border-top: #333333 1px solid; border-left: #333333 1px solid; border-bottom: #333333 1px solid; background: -moz-linear-gradient(top, #5D5D5D, #003399); /* for Firefox */ background: -webkit-gradient(linear, left top, left bottom, from(#5D5D5D), to(#003399)); /* For Webkit Browsers */ filter: progid:DXImageTransform.Microsoft .gradient(startColorstr='#5D5D5D', endColorstr='#003399'); /* for IE */ } .backgroundTdButton { border-right: #333333 1px solid; border-top: #333333 1px solid; border-left: #333333 1px solid; border-bottom: #333333 1px solid; background: -moz-linear-gradient(top, #5D5D5D, #000000); /* for Firefox */ background: -webkit-gradient(linear, left top, left bottom, from(#5D5D5D), to(#000000)); /* For Webkit Browsers */ filter: progid:DXImageTransform.Microsoft .gradient(startColorstr='#5D5D5D', endColorstr='#000000'); /* for IE */ } .fontLabel { color: #FFFFFF; font-family:Segoe UI, Tahoma, Sans-Serif; font-size:12pt; } </style> <script language="javascript" type="text/javascript" > function body_OnLoad() { if (typeof (window.innerWidth) == 'number') { //Non-IE screenWidth = document.documentElement.clientWidth; screenHeight = window.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode' screenWidth = document.documentElement.clientWidth; screenHeight = document.documentElement.clientHeight; } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE 4 compatible screenWidth = document.body.clientWidth; screenHeight = document.body.clientHeight; } var objTable = document.createElement('TABLE'); var objTBody = document.createElement('TBody'); objTable.cellPadding = '0'; objTable.cellSpacing = '0'; objTable.border = '0'; objTable.style.width = '100%'; objTable.style.height = screenHeight + 'px'; var objTr = document.createElement('TR'); var objTd = document.createElement('TD'); var objImg = document.createElement('IMG'); objTr.style.height = (screenHeight - 50) + 'px'; objTd.colSpan = '2'; objImg.src = 'Oceano.jpg'; objImg.style.width = screenWidth + 'px'; objImg.style.height = (screenHeight - 50) + 'px'; objTd.appendChild(objImg); objTr.appendChild(objTd); objTBody.appendChild(objTr); objTr = document.createElement('TR'); objTr.style.height = '50px'; objTr.className = 'backgroundTr'; objTd = document.createElement('TD'); objImg = document.createElement('IMG'); objTd.style.width = '50px'; objTd.align = 'center'; objImg.src = 'Icone.png'; objImg.style.width = '30px'; objImg.style.height = '30px'; objTd.appendChild(objImg); objTr.appendChild(objTd); objImg.style.cursor = 'pointer'; objTd = document.createElement('TD'); objTd.appendChild(createTableButton()); objTr.appendChild(objTd); objTBody.appendChild(objTr); objTable.appendChild(objTBody); document.body.appendChild(objTable); } function createTableButton() { var objTable = document.createElement('TABLE'); var objTBody = document.createElement('TBody'); objTable.cellPadding = '2'; objTable.cellSpacing = '2'; objTable.border = '0'; objTable.style.width = '100%'; var objTr = document.createElement('TR'); var objTd; var itens = ['Home', 'Usuários', 'Calendário']; for (var i = 1; i <= 3; i++) { objTd = document.createElement('TD'); objTd.style.width = '33%'; objTd.appendChild(createButton(itens[i - 1], 'Image' + i + '.png')); objTr.appendChild(objTd); } objTBody.appendChild(objTr); objTable.appendChild(objTBody); return objTable; } function createButton(text, image) { var objTable = document.createElement('TABLE'); var objTBody = document.createElement('TBody'); objTable.cellPadding = '1'; objTable.cellSpacing = '1'; objTable.border = '0'; objTable.style.width = '99%'; objTable.style.height = '35px'; objTable.style.backgroundColor = '#5D5D5D'; var objTr = document.createElement('TR'); var objTd = document.createElement('TD'); objTd.className = 'backgroundTdButton'; objTd.onmouseover = function () { button_OnMouseOver(this); } objTd.onmouseout = function () { button_OnMouseOut(this); } var objSpan = document.createElement('SPAN'); var objImg = document.createElement('IMG'); var objLabel = document.createElement('LABEL'); var objSpace = document.createTextNode('\u00A0'); objImg.src = image; objLabel.innerHTML = ' ' + text; objLabel.className = 'fontLabel'; objSpan.appendChild(objSpace); objSpan.appendChild(objImg); objSpan.appendChild(objLabel); objTd.appendChild(objSpan); objTr.appendChild(objTd); objTBody.appendChild(objTr); objTable.appendChild(objTBody); return objTable; } function button_OnMouseOver(element) { element.className = 'backgroundTdButtonSelection'; } function button_OnMouseOut(element) { element.className = 'backgroundTdButton'; } </script> </head> <body onload="body_OnLoad();"> </body> </html>
Listagem 9. Exemplo
Figura 2. Layout final

Confira também

Artigos relacionados