Programando com Javascript: Como Programar com Javascript

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

Cursos de JavaScript

Cursos

Curso de Introduç�o ao JavaScript

Curso

Gerando uma aç�o durante inatividade do usu�rio