Início
Curtir
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.
Listagem 1: Script dentro um comentário.
- Código:
<SCRIPT>
<!--
Código JavaScript
//-->
</SCRIPT>
Podemos também apresentar algum texto caso o navegador não suporta o JavaScript, utilizamos a tag.
Listagem 2: NoScript.
- Código:
<SCRIPT>
<!--
Código JavaScript
//-->
</SCRIPT>
<NOSCRIPT>
Seu Navegador não dá suporte à Script.
</NOSCRIPT>
Outro jeito para adicionar o script na página pode utilizar um arquivo externo.
Listagem 3: Script externo.
- Código:
<script src="arquivo_externo.js" ></script>
Para indicar a linguagem que vamos utilizar, precisamos preencher o atributo language.
Listagem 4: Language.
- Código:
<script language="JavaScript" >
//Código JavaScript
</script>
Para adicionar comentários usamos // para uma linha e /* */ para várias linhas.
Listagem 5: Comentários.
- Código:
<script language="JavaScript" >
//Comentário para uma linha.
/*
Comentário para
várias linhas.
*/
</script>
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.
Listagem 6: Códigos dentro das tags scripts.
- Código:
<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>
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.
Listagem 7: Separando instruções.
- Código:
<script language="JavaScript" >
document.write('Texto');
document.write('Texto1')
document.write("Texto3")
</script>
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.
Listagem 8: Variáveis.
- Código:
<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>
Hierarquia de objetos!
Figura 1. Hierarquia de objetos.
Fonte: http://www.nce.ufrj.br/ginape/js/conteudo/dom/imagens/dom.gif
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.
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.
Listagem 9: Exemplo.
- Código:
<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>
Até o próximo artigo.
