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.

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

Confira tamb�m

Cursos de JavaScript

Cursos

Curso de Introdu��o ao JavaScript

Curso

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

Curso

Confira outros conte�dos:

O que s�o arrays e como utiliz�-los no...

Fundamentos b�sicos de JavaScript...

JavaScript setInterval: executando...

Por Edson Em 2012

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Milton

N�vel

Me digam o que significa:

<Script Language='Javascript'>



</Script>

há +1 ano

Ver coment�rio anterior

Joel Rodrigues

N�vel 3

Ol�, Milton. Qual � sua d�vida exatamente?

há +1 ano

Angelino Gonsalves

N�vel

muito bom o conte�do...

eu tenho uma d�vida, possuo o seguinte c�digo

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>



<ins class="adsbygoogle"

style="display:inline-block;width:300px;height:600px"

data-ad-client="ca-pub-5520928417743549"

data-ad-slot="6403554310"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

se trata de um widget de anuncio do adsence em meu site e eu gostaria de faze lo abrir em outra guia no momento em que a pessoa clica e nao na mesma como esta sendo.

� possivel me ajudar

desde ja agrade�o

há +1 ano

Ver coment�rio anterior

Devmedia

N�vel 0

Seu coment�rio foi enviado para o f�rum. Acompanhe pelo link abaixo:
http://www.devmedia.com.br/forum/programando-com-javascript/537387

há +1 ano

Ricardo Arrigoni

N�vel

Muito bom o Artigo, bem completo!

Parab�ns!

há +1 ano

Black November

Desconto exclusivo para as primeiras 200 matrículas!

Pagamento anual

12x no cartão

De: R$ 69,00

Por: R$ 59,00

Total: R$ 708,00

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
12 meses de acesso

Pagamento recorrente

Cobrado mensalmente no cartão

De: R$ 79,00

Por: R$ 64,00 /mês

Total: R$ 768,00

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
Fidelidade de 12 meses
Não compromete o limite do seu cartão

<Perguntas frequentes>

Carreira

Metodologia

Assinatura e Pagamentos

Cadastro

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

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.

Hierarquia de objetos.

Objeto Window

Objeto Document

Eventos no Javascript

Confira tamb�m

Cursos de JavaScript

Curso de Introdu��o ao JavaScript

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

Confira outros conte�dos:

O que s�o arrays e como utiliz�-los no...

Fundamentos b�sicos de JavaScript...

JavaScript setInterval: executando...

<Perguntas frequentes>

Nossos casos de sucesso