Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Programação Externa

#1
 D'Leandro™

avatar
Fundador
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>

Figura 2. Layout final.

Até o próximo artigo.
Ver perfil do usuário

#2
 Neto

avatar
Membro
Isso é otimo para quem gosta de programação, obrigado por dividir conosco.
Ver perfil do usuário