Orientação a Objetos em Javascript
1. Introdução

1.1. Objetos em JavaScript
Em JavaScript a função exerce um papel principal na criação de classes e objetos.  Por ser uma linguagem de script ela é muito limitada, assim é possível criar funções com o objeto function com propriedades que podem ser herdadas por outros objetos de acordo com os conceitos de herança e referência, tão comuns na linguagem de programação orientada a objetos. Tais funções com essas características podem ser consideradas classes.
Um função poder ser propriedades de uma função pai.
Um objeto é uma coleção de propriedades, e uma propriedade é uma associação entre um nome e um valor.
Um valor de propriedade pode ser uma função, que é então considerada um método do objeto.
Em JavaScript, um objeto é uma entidade independente, com propriedades e tipo.
Uma propriedade de um objeto pode ser explicada como uma variável que é ligada ao objeto. Propriedades de objetos são basicamente as mesmas que variáveis normais em JavaScript, exceto pelo fato de estarem ligadas a objetos. As propriedades de um objeto definem as características do objeto. Você acessa as propriedades de um objeto com uma simples notação de ponto:

nomeDoObjeto.nomeDaPropriedade


1.2.  Conceito de Programação Orientada a Objetos em Java
Para facilitar o entendimento será comentado o conceito de classe e objeto em Java.
1.2.1. Abstração

Processo de modelagem de sistemas concretos ou não, extraindo do seu  contexto os principais objetos e descrevendo-os por meio da discriminação de suas propriedades e funcionalidades.
Propriedade (atributo): descrevem o objeto, seus possíveis estados e o papel que ele desempenha no sistema;
Funcionalidade (métodos): descrevem a ação do objeto e representam o seu comportamento dentro do sistema.
1.2.2. Objetos
Instanciar significa criar. Instanciar um objeto, significa criar fisicamente uma representação concreta da classe. Literalmente significa ato ou efeito de instar, qualidade daquilo que é instante.
Exemplo:
Veiculo é uma classe ou um molde, moto é uma instância de veiculo e apesar de carregar todas as características do molde de Veiculo, é completamente independente de outras instâncias de Veiculo.
Chama-se instância de uma classe, um objeto cujo comportamento e estado são definidos pela classe.

Um objeto é uma instância de uma classe, ou seja uma realização concreta e particular da mesma. Um objeto precisa ser criado. Para que seja possível acessar as variáveis e os métodos de um objeto, é preciso atribuir uma referência ao objeto. O tipo de referência, ou seja, a classe à qual pertence o objeto ao qual ela vai referir-se, precisa ser declarado.
Os objetos são instâncias de classes que permanecem em memória e mantém seus valores de maneira individual durante um momento da execução de um programa.
A criação de uma classe deve anteceder a de um objeto, uma vez que este é criado a partir daquele. Um objeto é definido por suas propriedades e funcionalidades.

2. Objetos do HTML

Javascript considera HTML uma linguagem orientada a objetos, na qual os diversos tags HTML correspondem a diferentes tipos de objetos Javascript.
Objetos em HTML
A figura abaixo mostra a hierarquia dos objetos do HTML. Object Browser São os objetos utilizados para criação do navegador.


Além dos objetos que são pré-definidos no HTML é possível definir outros objetos..
Exemplo:
<html>
<head><title>Minha pagina</title></head>
<body>
<form name=“formulario1">
<input type=“button" name=“botao1">
</form>
</body>
</html>

A partir do código acima, obtem-se os seguintes objetos Javascript:

document.title : título da página
document.formulario1 : formulário da página
document.formulario1.botao1: botão do formulário

Este é apenas um exemplo dos objetos que Javascript cria automaticamente de HTML. Observe que quase todo elemento HTML pode ser usado como um objeto. Além disso, é possível ler e atribuir valores a estes objetos dinamicamente.
Tenha em mente que à medida em que se estrutura uma página, também está se definindo objetos e seus valores para Javascript. As próximas seções apresentam detalhadamente o conjunto de objetos da linguagem Javascript.

2.1. Objeto navigator
Este objeto dá informações sobre o navegador. Ele apresenta as seguintes propriedades: appName, appVersion, appCodeName, userAgent.
Propriedade appName: retorna o nome do browser do usuário.
Exemplo:
document.write(navigator.appName);
Netscape

Propriedade appVersion: retorna a versão do browser e a versão do sistema operacional em que ele está rodando.
[ formato: número da versão (plataforma; país) ]
Exemplo:
document.write(navigator.app).

Propriedade appCodeName: retorna o nome do código de desenvolvimento interno do desenvolvedor de um browser específico.
Exemplo:
document.write(navigator.appCodeName);

Propriedade userAgent: usada em cabeçalhos HTTP para fins de identificação, é a combinação das propriedades appCodeName e appVersion. Servidores Web usam esta informação para identificar os recursos que o navegador dispõe.
Exemplo:
document.write(navigator.userAgent);

Exemplo:
<html>
<head><title>Minha pagina</title>
<script type="text/javascript">
    document.write('<ul>');
    document.write('<li> '+ "appName: "+ navigator.appName + '</li>');
    document.write('<li> '+ "appVersion: "+ navigator.appVersion + '</li>');
    document.write('<li> '+ "appCodeName: "+ navigator.appCodeName + '</li>');
    document.write('<li> '+ "userAgent: "+ navigator.userAgent + '</li>');
    document.write('<li> '+ "platform: "+ navigator.platform + '</li>');
    document.write('<li> '+ "CookieEnabled: "+ navigator.cookieEnabled + '</li>');
    document.write('<li> '+ "language: "+ navigator.language + '</li>');
    document.write('</ul>');
</script>
</head>
<body>
</body>
</html
Execução:
Observações:
document.write('</ul>'); // tag HTML entre aspas simples
document.write("language: "); // string entre aspas duplo
Teste realizado com as configurações acima (resultado da execução do exemplo).

Exemplo:
<!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<script>
var txt = "";
txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt += "<p>Browser Name: " + navigator.appName + "</p>";
txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt += "<p>Browser Language: " + navigator.language + "</p>";
txt += "<p>Browser Online: " + navigator.onLine + "</p>";
txt += "<p>Platform: " + navigator.platform + "</p>";
txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

Resultado:
Browser CodeName: Mozilla
Browser Name: Netscape
Browser Version: 5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; rv:11.0) like Gecko
Cookies Enabled: true
Browser Language: pt-BR
Browser Online: true
Platform: Win32
User-agent header: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; rv:11.0) like Gecko

2.2. Objeto location
Este objeto é utilizado para identificar o documento corrente. Ele consiste em uma URL completa no formato protocolo//servidor:porta/caminho seguidos de ?search ou #hash.
Suas propriedades são: protocol, hostname, port, pathname, search, hash. Cada uma de suas propriedades representa uma parte da URL total.

Propriedade protocol: retorna o protocolo de transporte do documento.
Exemplo:
document.write(location.protocol);
http:

Propriedade hostname: identifica o nome do computador hospedeiro.
Propriedade port: especifica a porta para o endereço. Esta informação é utilizada apenas se uma porta não-padrão estiver sendo usada.
Propriedade pathname: define o caminho e o nome do arquivo.
Propriedade search: retorna quaisquer comandos de consulta que possam estar embutidos na URL corrente. Valores de search são separados do resto da URL por um sinal de interrogação (“?").
Exemplo:
location.search
nome=Joao

Propriedade hash: retorna quaisquer âncoras que possam ter sido passadas na URL. Valores de hash são separados do resto da URL por um sinal de cerquilha (“#").
Exemplo:
location.hash
capitulo1

Exemplo:
<html>
<head><title>Minha pagina</title>

<script type="text/javascript">

    document.write('<ul>');
    document.write('<li> '+ "protocol: "+ location.protocol + '</li>');
    document.write('<li> '+ "hostname: "+ location.hostname + '</li>');
    document.write('<li> '+ "port: "+ location.port + '</li>');
    document.write('<li> '+ "pathname: "+ location.pathname + '</li>');
    document.write('<li> '+ "search: "+ location.search + '</li>');
    document.write('<li> '+ "hash: "+ location.hash + '</li>');
     document.write('</ul>');
</script>

</head>
<body>
</body>
</html>

Execução no Windows Explore (gerenciador de arquivo, c:/):
protocol: file:
hostname:
port:
pathname: /C:/projetosite/javascript/scriptdois.html
search:
hash:

Execução no Wamp (http://localhost/teste1/scriptdois.html)
protocol: http:
hostname: localhost
port:
pathname: /teste1/scriptdois.html
search:
hash:

2.3. Objeto checkbox
Utilizado na construção de caixas de verificação. Suas propriedades são: name, value, checked, defaultChecked.

Propriedade name: especifica o nome da caixa.
Propriedade value: especifica o valor da caixa.
Exemplo:
nomeForm.nomeCheckbox.value = "1"
Propriedade checked: valor booleano que especifica o estado de seleção da caixa (selecionada ou não-selecionada).
Exemplo:
if ( nomeForm.nomeCheckbox.checked == true ) {
   funcao();
}
Propriedade defaultChecked: valor booleano que especifica o estado default de seleção da caixa.

2.4. Objeto radio
Corresponde a um array de botões, onde todos os botões compartilham a mesma propriedade name. Suas propriedades são: name, checked, defaultChecked, length.

Propriedade name: especifica o nome do objeto.
Propriedade checked e defaultChecked: funcionamento idêntico ao definido em checkbox.
Propriedade length: especifica o comprimento do array.

2.5. Objeto hidden
Utilizado para enviar informações quando o formulário é submetido (este objeto não aparece no formulário). Suas propriedades são: name, value.

Propriedade name: especifica o nome do objeto.
Propriedade value: especifica a informação que está sendo passada.

2.6. Objeto text
Utilizado para entrada/saída de dados. Suas propriedades são: name, value, defaultValue.

Propriedade name: especifica o nome do objeto.
Propriedade value: especifica o valor do objeto.
Propriedade defaultValue: especifica o valor default do objeto.

2.7. Objeto reset
Utilizado para limpar dados de um formulário. Suas propriedades são: name, value.

Propriedade name: especifica o nome do botão.
Propriedade value: especifica o título colocado na face do botão.
Exemplo:
document.form.botao.value="novo titulo"

2.8. Objeto submit
Utilizado para interfacear Javascript e outros scripts/programas. Suas propriedades são: name, value.

Propriedade name: especifica o nome do botão.
Propriedade value: especifica o título colocado na face do botão.

2.9. Objeto button
Utilizado na construção de interfaces. Suas propriedades são: name, value.

Propriedade name: especifica o nome do botão.
Propriedade value: especifica o título colocado na face do botão.

2.10. Objeto textarea
Utilizado para entrada/saída de dados. Suas propriedades são: name, value, defaultValue.

Propriedade name: especifica o nome do objeto.
Propriedade value: especifica o valor do objeto.
Propriedade defaultValue: especifica o valor default do objeto.

2.11. Objeto select
Utilizado para construir caixas de seleção. Suas propriedades são: name, options, length.

Propriedade name: especifica o nome do objeto.
Propriedade options: array que contém uma entrada para cada opção de uma caixa de seleção.
Propriedade length: especifica o comprimento do array de opções.
Propiedade selectedIndex: é o índice da opção que se encontra selecionada.

O exemplo a seguir identifica que opções foram selecionadas na caixa de seleção.
Exemplo:

function listSelected(obj) {
  for (i=0; i < obj.length; i++) {
      document.write(" " + obj.options[i].name + " ");
      if (!obj.options[i].selected) {
         document.write(“não está selecionada<BR>");
      }
        else {
         document.write(“está selecionada<BR>");
      }

O objeto select de um formulário é uma listas dinâmicas que nos permitem selecionar um elemento. Abre-se apertando uma seta, a seguir pode-se escolher um elemento. Pode-se ver um elemento select de um formulário a seguir.

Um destes elementos pode ser obtido utilizando a etiqueta <SELECT> dentro de um formulário. Podemos acrescentar à etiqueta um atributo para lhe dar o nome, NAME, para logo acessar a esse campo mediante Javascript. Para expressar cada uma das possíveis opções do campo select utilizamos uma etiqueta <OPTION> a qual lhe introduzimos um atributo VALUE para expressar seu valor. O texto que colocamos depois da etiqueta <OPTION> serve como etiqueta dessa opção, é o texto que vê o usuário associado a essa opção.

Métodos do objeto select

blur(): para retirar o foco da aplicação desse elemento de formulário.
focus(): para colocar o foco da aplicação.

Objeto option

Temos que pararmos para ver também este objeto para entender melhor o campo select. Lembramos que as option são as distintas opções que tem um select, expressadas com a etiqueta <OPTION>.

2.12. Propriedades de option
Estes objetos só têm propriedades, não têm métodos.

defaultSelected: indica com um true ou um false se essa opção é a padrão. A opção padrão se consegue com HTML colocando o atributo selected a um option.
index: o índice dessa opção dentro do select.
selected: indica se essa opção se encontra selecionada ou não.
text: é o texto da opção. O que o usuário pode ver no select, que se escreve depois da etiqueta <OPTION>.
value: indica o valor da opção, que se introduz com o atributo VALUE da etiqueta <OPTION>.

Exemplo de acesso a um select:
Vamos ver um exemplo sobre como se acessa a um select com Javascript, como podemos acessar suas diferentes propriedades e à opção selecionada.
Vamos começar vendo o formulário que tem o select com o qual vamos trabalhar. É um select que serve para valorizar o web que estamos visitando.

<form name="fomul">
Valoraçao sobre este web:
<select name="minhaSelect">
<option value="10">Muito bom
<option value="5" selected>Regular
<option value="0">Muito ruim
</select>
<br>
<br>
<input type=button value="Digame propriedades" onclick="digamePropriedades()">
</form>

Agora vamos ver uma função que percorre as propriedades mais significativas do campo select e as apresenta em uma caixa alert.

function digamePropriedades(){
       var texto
       texto = "O número de opções do select: " + document.formul.minhaSelect.length
       var indice = document.formul.minhaSelect.selectedIndex
       texto += "\nIndice da opção escolhida: " + indice
       var valor = document.formul.minhaSelect.options[indice].value
       texto += "\nValor da opção escolhida: " + valor
       var textoEscolhido = document.formul.minhaSelect.options[indice].text
       texto += "\nTexto da opção escolhida: " + textoEscolhido
       alert(texto)
}

Esta função cria uma variável de texto onde vai introduzindo cada uma das propriedades do select. A primeira, contem o valor da propriedade length do select, a segunda, o índice da opção selecionada e as duas seguintes, contém o valor e o texto da opção selecionada. Para acessar à opção selecionada utilizamos o array options com o índice percorrido na segunda variável.

Exemplo completo:
<html>
<head>
<title>Exemplo select</title>
<script type="text/javascript">
function digamePropiedades(){
var texto;
texto = "O número de opções do select: " + document.formul.miSelect.length;
var indice = document.formul.miSelect.selectedIndex;
texto += "\nIndice da opção escolhida: " + indice;
var valor = document.formul.miSelect.options[indice].value;
texto += "\nValor da opção escolhida: " + valor;
var textoEscogido = document.formul.miSelect.options[indice].text;
texto += "\nTexto da opção escolhida: " + textoEscogido;
alert(texto);
}
</script>
</head>

<body>

<form name="formul">
Valoração sobre este web site:
<select name="miSelect">
<option value="10">Muito boa
<option value="5" selected>Regular
<option value="0">Muito ruim
</select>
<br>
<br>
<input type=button value="Diga-me propriedades" onclick="digamePropiedades()">
</form>

</body>
</html>

Demonstração:

Valoração sobre este web site:


Observação:
Propriedade value de um objeto select
Para acessar ao valor selecionado de um campo select podemos utilizar a propriedade value do campo select no lugar de acessar a partir do vector de options.
Para o anterior formulário seria algo parecido a isto.

formul.minhaSelect.value

Entretanto, esta propriedade só está presente em navegadores Internet Explorer, portanto é recomendável acessar utilizando o vetor de options com o índice da posição selecionada se desejarmos que a página seja compatível com todos os navegadores. Quisemos acrescentar este ponto para que, se alguma vez utilizarmos ou vermos utilizar este método de acesso, sabemos seu problema e porque é melhor utilizar o vetor de options.

2.13. Objetos do CORE Javascript
Os objetos do CORE Javascript são os objetos instrínsecos da linguagem, isto é existem tanto no cliente (navegador), quanto no servidor Web.
Os objetos do Client-Side Javascript e do Server-Side Javascript somente funcionam, respectivamente, em programas escritos para o navegador e para o servidor Web.
core (kɔr): s. 1. caroço (de uma maçã ou pera), 2. âmago, cerne. the core of the problem: o cerne do problema. to the core: até a alma, 3.  core subject: matéria obrigatória (de curso acadêmico).
O JavaScript fornece uma série de objetos padrão, com propriedades e métodos para executar várias manipulações.  Estes objetos chamados objetos centrais JavaScript, foram padronizados pela ECMA (European Computer Manufacturers Association) e formam a base de Javascript.
Objetos centrais são independentes do navegador do cliente em oposição a objetos do navegador.
Tabela de objetos centrais JavaScript:
Objeto

Array  O objeto Array como o nome sugere, é usado para criar matrizes.  Ele tem muitos métodos para adicionar, excluir ou extrair elementos de uma matriz e classificá-los.
Boolean  O objeto Boolean é usado para criar valores booleanos.  Elementos com dois estados: verdadeiro e falso.
Date  O objeto Date é usado para criar datas e hora. Também oferece métodos para manipulá-los.
Function  O objeto função permite definir funções personalizadas.
Math O objeto Math permite que você manipule as funções matemáticas, como as funções trigonométricas.
Number  O objeto número permite executar operações básicas em números ..
RegExp O objeto RegExp permite que você crie expressões regulares.
String  O objeto String fornece uma variedade de métodos para a manipulação de strings.


2.14. Objeto Array
É possível criar um vetor através do objeto Array, pré-definido no Javascript.
nome_do_array = new Array(10)

Para inserir e consultar elementos de um array, deve-se utilizar a seguinte sintaxe:  nome_do_array[x]
A variável x representa o índice de um elemento. O primeiro elemento é o de número 0.

2.15. Objeto Date
O objeto Date lhe ajuda a manipular datas. Para criar um objeto do tipo Date, deve-se utilizar a seguinte sintaxe:
nome_do_objeto = new Date(parâmetros)

Se não for indicado nenhum parâmetro, será criado um objeto com a data e a hora atual do sistema. É possível passar uma string representando uma data e hora como parâmetro:

x = new Date(“October 01, 2001 08:00:00")

Caso sejam omitidos hora, minuto e segundo, o valor padrão será 0. Outra forma de indicar data e hora é através de uma série de parâmetros numéricos, representando o ano, mês, dia, hora, minutos e segundos.

A função Date( ) retorna a data atual.

2.16. Objeto String
Em Javascript, toda string é um objeto, e, portanto, tem métodos e propriedades associadas.
length (propriedade): retorna o comprimento de um string.
Sintaxe: string.length

indexOf( ): método que retorna a posição da primeira ocorrência do caracter procurado dentro de um string específico. As posições dos caracteres que compõem um string variam entre "0" e "comprimento do string - 1" (length - 1). Se o caracter procurado não for encontrado em nenhuma posição, o método retorna "-1".
Sintaxe:
string.indexOf(caracter_procurado, posição_inicial_de_busca)

charAt( ): método que retorna o caracter encontrado na posição indicada.
Sintaxe: string.charAt(posição)

toUpperCase( ): método que traduz todo caracter dentro de uma string para letra maiúscula.
Sintaxe: string.toUpperCase()

toLowerCase( ): método que traduz todo caracter dentro de uma string para letra minúscula.
Sintaxe: string.toLowerCase()

substring( ): método que retorna uma sequência de caracteres de uma string maior.
Sintaxe: string.substring(índiceA, índiceB)
Onde índiceA e índiceB são ambos valores numéricos entre 0 e a propriedade de string length.


2.17. Objeto Window
O objeto window representa a janela do navegador ou um frame. É criado um objeto window sempre que o navegador encontra uma tag <BODY> ou <FRAMESET>. Também são criados objetos para cada frame definido.

Propriedades mais utilizadas:

defaultStatus: a mensagem que será exibida quando não tiver nenhuma outra na status bar do navegador. Cuidado para não confundir com a propriedade status, que reflete umas mensagens transitórias, adequadas para um certo momento ou ação do usuário;
Height: esta propriedade contém a altura, em pixels, da janela do navegador;
Width: emelhante à propriedade anterior, porém trabalha com a largura;
name: representa o nome da janela;
status: especifica a mensagem a ser  exibida na status bar do navegador. É muito útil para comunicar ao usuário pequenas mensagens.

Métodos mais utilizados:

alert( ): exibe uma mensagem para o usuário. A string com a mensagem deve ser passada para o método como parâmetro;
back( ): é equivalente a apertar o botão back do navegador. Ou seja, volta atrás na última navegação feita pelo usuário;
forward( ): tem o mesmo efeito do botão forward do navegador. Ou seja, se o usuário tiver apertado o botão back para voltar à última página visitada, o forward avança novamente para a página mais recente;
open( ): abre uma nova janela. O método recebe como parâmetros uma URL (o endereço da página que vai ficar na nova janela), o nome da janela e uma string com suas carcterísticas;
close( ): fecha a janela especificada. O Javascript somente pode fechar automaticamente janelas abertas por ele. Caso contrário, aparece uma caixa de confirmação para o usuário;
confirm( ): exibe uma caixa de mensagem para o usuário com duas opções: OK e Cancel. Caso o usuário pressione OK, o método retorna true. Caso contrário, false. Ele recebe como parâmetro uma string com a mensagem a ser exibida para o usuário;
prompt( ): exibe uma caixa de mensagem e campo para o usuário entrar com uma string. O método retorna a string digitada pelo usuário. São aceitos dois parâmetros. O primeiro é uma string com a mensagem a ser exibida e o segundo é o valor padrão da string a ser digitada pelo usuário.

Exemplo:
<HTML>
<HEAD>
<TITLE>Exemplo</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
x = prompt("Qual a sua idade?", "25");
janela = window.open('','', 'innerHeight=100,innerWidth=150,resizable=yes');
janela.document.write("<BR> <B> <CENTER>");
janela.document.write("Você tem " + x + " anos!");
janela.document.write("</CENTER> </B>");
</script>
</BODY>
</HTML>
Execução:
Após cricar na caixa de alerta, aparecer a janela abaixo, caso o browser permita.


Exemplo:
Colocando a hora no rodapé da página do site no canto direito.

<html>
<head>
</head>
<div style="position:absolute;font-size:10pt;top:90%;left:90%" id=lugar> Tempo
</div>
<body onLoad="Tempo()">
<Script Language="JavaScript">
<!--
function Tempo(){
horario=new Date()
hora=horario.getHours()
minuto=horario.getMinutes()
segundo=horario.getSeconds()
if(hora<10){hora="0" + hora}
if(minuto<10){minuto="0" + minuto}
if(segundo<10){segundo="0" + segundo}
lugar.innerHTML=hora+":"+minuto+":"+segundo
}
window.setInterval("Tempo()",1000)
//-->
</script>
</body>
</html>

Execução (canto inferior direito da página):


Exemplo:
Incluindo hora na página, no canto inferior direito.

<html>
<head>
</head>
<div style="position:absolute;font-size:10pt;top:90%;left:90%" id=lugar> Tempo
</div>
<body onLoad="Tempo()">
<Script Language="JavaScript">
<!--
function Tempo(){
horario=new Date()
hora=horario.getHours()
minuto=horario.getMinutes()
segundo=horario.getSeconds()
if(hora<10){hora="0" + hora}
if(minuto<10){minuto="0" + minuto}
if(segundo<10){segundo="0" + segundo}
lugar.innerHTML=hora+":"+minuto+":"+segundo
document.title=hora+":"+minuto+":"+segundo
window.status=hora+":"+minuto+":"+segundo
}
window.setInterval("Tempo()",1000)
//-->
</script>
</body>
</html>

Exemplo:
Selecionando uma opção para Internet.

<html>
<head>
</head>
<body>
<form name=form1><h1 align=center>Selecione uma opção</h1>
<table border=1 align=center>
<tr><td><select size=1 name=slsites onchange="Sites()">
<option value="http:\\www.ig.com.br">Internet grátis</option>
<option value="http:\\www.bol.com.br">Brasil on line</option>
<option value="http:\\www.hotmail.com.br">Hotmail</option>
<option value="http:\\www.ibest.com.br">Ibest</option>
</select></td></tr></table></form>
<Script Language="JavaScript">
<!--
function Sites(){
Site=document.form1.slsites.value
window.location.href=Site
}
//-->
</script>
</bory>
</html>

Exemplo:
Mostrando imagens, aumentando seu tamanho ao passar o mouse sobre a pequena.

<html>
<head>
</head>
<body><h1 align=center>Passe o mouse sobre as imagens</h1>
<table border=1 align=center>
<tr><td colspan=3 align=center><img src=flores1.jpg name=foto width=300
height=250></td></tr>
<tr><td><img src=flores2.jpg width=100 height=100 onMouseOver="Trocafoto2()"
onMouseOut="Voltafoto1()"></td>
<td><img src=flores3.jpg width=100 height=100 onMouseOver="Trocafoto3()"
onMouseOut="Voltafoto1()"> </td>
<td><img src=flores4.jpg width=100 height=100 onMouseOver="Trocafoto4()"
onMouseOut="Voltafoto1()"></td></tr>
</table>
<Script Language="JavaScript">
<!--
//essa imagem faz a troca para flores2
function Trocafoto2(){
document.images["foto"].src="flores2.jpg"
}
function Trocafoto3(){
document.images["foto"].src="flores3.jpg"
}
function Trocafoto4(){
document.images["foto"].src="flores4.jpg"
}
//essa função retorna a imagem inicial
function Voltafoto1(){
document.images["foto"].src="flores1.jpg"
}
//-->
</script>
</body>
</html>

Exemplo:
Aumentando ou diminuindo a imagem de tamanho.

<html>
<head>
</head>
<body><h1 align=center>Clique nos botões para definir o Zoom</h1>
<div id=largura style="position:absolute;top:50%;left:20%">Largura 200 </div>
</td><td><div id=altura style="position:absolute;top:50%;left:70%">altura 200
</div> </td></tr>
</table>
<table border=1 align=center>
<tr><td><img src=flores1.jpg name=foto width=200 height=200>
</td></tr></table>
<form name=form1>
<center><input type=button value="Mais Zoom" onClick="Aumenta()"><input
type=button value="Menos Zoom" onClick="Diminui()"></center>
</form>
<Script Language="JavaScript">
<!--
function Aumenta(){
document.images["foto"].width=document.images["foto"].width + 5
document.images["foto"].height=document.images["foto"].height + 5
largura.innerHTML="Largura " + document.images["foto"].width
altura.innerHTML="Largura " + document.images["foto"].height
}
function Diminui(){
document.images["foto"].width=document.images["foto"].width - 5
document.images["foto"].height=document.images["foto"].height - 5
largura.innerHTML="Largura " + document.images["foto"].width
altura.innerHTML="Largura " + document.images["foto"].height
}
//-->
</script>
</bory>
</html>

Exemplo:
Redimencionar Iframe de acordo com o conteúdo.

<script>
if(navigator.appName!='Microsoft Internet Explorer'){
    parent.document.getElementById('nomedoIFrame').height =  document.height;
}else{
    parent.document.getElementById('nomedoIFrame').style.height = self.document.body.scrollHeight;
}
</script>

Exemplo:
Navegação entre imagens.

Este código é formado por um array de fotos ou imagens em JavaScript e uma função de realiza a navegação entre estas imagens, ou seja, passar para a próxima imagem ou para anterior.

É uma função bem simples que unida a uma linguagem de programação como ASP ou PHP, pode ser utilizada na visualização de fotos de produtos vindo direto de um banco de dados em uma Loja Virtual. Ou ainda para um simples álbum de fotografias.
<html>
    <head>
        <title>.: Painel de fotos :.</title>
<script language="javascript" type="text/javascript">
<!--
var Slide = new Array("http://www.codigofonte.com.br/img/livros/p/24.jpg", "http://www.codigofonte.com.br/img/livros/p/25.jpg", "http://www.codigofonte.com.br/img/livros/p/26.jpg");
var indSlide = 0;
var ultSlide = Slide.length -1;
// Função controla a seqüência de slides.
function MostraSlide(direcao){
   indSlide = indSlide + direcao;
   if(indSlide > ultSlide){indSlide = 0};
   if(indSlide < 0) {indSlide = ultSlide};
   document.FigSlide.src = Slide[indSlide];
}
//-->
</script>
    </head>
    <body>
        <table border="1" width="180" height="149">
            <tr>
                <td colspan="2" align="center">
                    <img src="http://www.codigofonte.com.br/img/livros/p/24.jpg" name="FigSlide" border="0">
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:MostraSlide(-1)">
                    <b><font color="#800000">
                    << Anterior</font></b></a>
                </td>
                <td>
                    <p align="right">
                    <a href="javascript:MostraSlide(1)">
                    <b><font color="#800000">
                    Próximo >></font></b></a>
                    </p>
                </td>
            </tr>
        </table>
    </body>
</html>

Exemplo:
Como percorrer um array com chaves em strings, já que o javascript não possui nenhuma função com essas características.

Código
// funções next prev para array
// FUNÇÂO next()
function next(arrayAtual,chaveArrayAtual) {
    var next;
    var u;
    var i = 0;
    for(var chave in arrayAtual) {
        if(chave == chaveArrayAtual) {
            var u = i;
            var next = i + 1;
            var prev = i - 1;
        }
        i++;
    }
    if(u == (arrayAtual.length - 1))
        u = 0;
    if(next == arrayAtual.length)
        next = 0;
    var y = 0;
    for(var key in arrayAtual) {
        if((u + 1) == next) {
            if(y == next)
                return key;    // retorna proxima chave do array
            y++;
        } else if(next == 0) {
            for(chave in arrayAtual)
                return chave; // retorna a primeira chave do array
        }
    }
}
// FUNÇÂO prev()
function prev(arrayAtual,chaveArrayAtual) {
    var i = 0;
    var prev;
    var u;
    for(var chave in arrayAtual) {
        if(chave == chaveArrayAtual) {
            var u = i;
            var prev = i - 1;
        }
        i++;
    }
    if(u == 0)
        u = arrayAtual.length;
    if(prev == -1)
        prev = arrayAtual.length - 1;
    var v = 0;
    for(var key in arrayAtual) {
        if((u - 1) == prev) {
            if(v == prev)
                return key;    // retorna a chave anterior do array,
                            // caso seja a ultima retorna a primeira
            v++;
        }
    }
}

Exemplo:
Calculadora
Este programa cria uma calculadora utilizando javascript e formulários. O usuário fornece o valor no campo "expr". O botão "calcula" ativa o script valida(). Este script faz uma verificação com o usuário e em caso afirmativo, ativa a a função eval(). Esta função utiliza o valor que estar no campo "expr" (form.expr.value) e coloca o resultado em (form.expr.result) que é um outro campo do formulário.
<HTML>
<HEAD>
<SCRIPT>
<!--- Escondendo o script de browsers antigos
function calcula(form) {
  if (confirm("Tem certeza?"))
    form.result.value = eval(form.expr.value)
  else
    alert("Tente novamente")
}
// fim do script -->
</SCRIPT>
</HEAD>

<BODY>
<h1>Calculadora</h1>
<FORM>
Forneça uma expressão matemática:
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<p>
<INPUT TYPE="button" VALUE="Calcule" onClick="calcula(this.form)">
<INPUT TYPE="reset" VALUE="Limpar">
<p>
Resultado:
<INPUT TYPE="text" NAME="result" SIZE=15 >
</FORM>
</BODY>
</HTML>
</html>

Exemplo: Imprimindo a hora
Este script mostra a hora do computador no browse:

<HTML>
 <HEAD>
  <TITLE>Hora certa</TITLE>
 </HEAD>
<BODY>
<SCRIPT TYPE="text/ecmascript" LANGUAGE="JavaScript">
<!--
today = new Date();
document.write("A data e hora agora é " +
today.toString())
//-->
</SCRIPT>
</BODY>
</HTML>

2.18. Objeto console
O objeto console fornece acesso à consola de depuração do navegador. O funcionamento deste objeto varia de navegador para navegador mas existem determinados métodos que são vistos como um padrão. Um desses métodos é o log().
Método log
O método log() existe essencialmente para permitir o envio de dados para a consola de depuração do navegador, sua função é parecida com a caixa de diálogo alert() que envia uma mensagem diretamente para o navegador. 
Pode ser enviada qualquer informação, normalmente com o intuito de depurar código.
Exemplo:
var a = 1;
var b = 1;
var soma = a + b;
console.log(soma);
// e vai mostrar o valor 2

Da mesma forma que você poderia usar um 'alert()', mas o alert costuma ser propenso ao esquecimento do desenvolvedor,ele não tem nada pior do que jogar na cara do usuário uma mensagem estranha do nada, casa tenha esquecido de ocultar ou remover o alert(), e com o console.log() um usuário comum provavelmente nunca vai ver essa mensagem.

Exemplo da consola do Firefox:

Como este objeto varia e não existe ainda um standard a reger o funcionamento e metodologia do mesmo, existem algumas considerações a ter:
Exemplo de como enviar algo para a consola do navegador:
var s = "alguma coisa";
console.log(s);

Potenciais problemas:
- O utilizador pode ter desligado a consola;
- O navegador pode não ter consola Web;
- O método que estamos a utilizar pode não funcionar em determinado navegador.

Em JavaScript, uma falha de execução pode resultar num bloqueio de todo o restante JavaScript. Se por exemplo fizermos uso do console.log(X) quando a consola não existe ou o método log() não existe, vamos ter um erro no nosso código.

Alternativa:
Podemos fazer uso de um try...catch para tentar enviar para a consola e em caso de falha agir de outra forma:
function consola(s) {
    try { console.log(s); } catch (e) { alert(s); }
}

E assim se der certo, a informação será enviada para a consola, se der errado será emitido  um  alert() com a informação que iria para a consola.

Outros métodos de LOG existentes:
- console.info
- console.warn
- console.error
- console.debug

Todas elas servem para escrever mensagens, a diferença, entre os métodos está justamente no significado da mensagem. Veja como ficam as mensagens com cada um desses métodos:


2.18.1. Monitorando Tempo de Execução
Quando é preciso fazer um benchmark que calcule o tempo de execução de um trecho de código, na maioria dos casos a solução que muitos fazem é a de instanciar um objeto Date no início e no fim de um trecho de código para em seguida calcular a diferença dessas datas e por fim apresentar seu tempo de execução. No JavaScript temos duas funções que fazem isso de maneira mais elegante. Basta utilizar a função console.time() no início e no final utilize console.timeEnd(), Exemplo:
Crie a página abaixo e execute o código, a página abrirá vazia.
<!DOCTYPE html>
<html>
<body>
  <script type="text/javascript">
  function benchmark(n) {
    var maxPI = 0;
    console.time("tempo gasto");
    for (var i = 0; i < n; i++) {
        maxPI += Math.PI * i;
    }
    console.log("Max PI: ", maxPI);
    console.timeEnd("tempo gasto");
  }
  benchmark(1000);
  </script>
</body>
</html>

Acesso ao console do Internet Explore 11:


Resultado:

A função benchmark faz um cálculo simples do valor máximo do pi multiplicado por cada i do loop. O importante nesse código é como foi utilizado as funções de console.time e console.timeEnd. Elas praticamente usam uma string que representam a mensam de resultado final, outro detalhe é que a string utilizada em console.time precisa ser exatamente a mesma string em console.timeEnd para que seja calculado e apresentado o tempo gasto entre ambas funções.

Outro Exemplo:

Crie a página abaixo e execute o código.
Acesse ao console do Internet Explore 11:
<!DOCTYPE html>
<html>
<body>
  <script type="text/javascript">
  console.time( 'How long does it take to run my "for"?' );
  for( var i = 0; i < 350452; i++ ) {
   i;
  }
  console.timeEnd( 'How long does it take to run my "for"?' );
  </script>
</body>
</html>

Resultado:
How long does it take to run my "for"?: 273,687 ms

2.18.2. Visualizando Heap de Memória
Outra funcionalidade interessante do módulo console é o atributo console.memory. Este é um objeto que contém os seguintes atributos:
{
    jsHeapSizeLimit: 793000000,
    usedJSHeapSize: 10000000,
    totalJSHeapSize: 12700000
  }

O atributo jsHeapSizeLimit apresenta o limite máximo do heap de memória, já o usedJSHeapSize representa a quantidade de heap que esta em uso e o totalJSHeapSize mostra o total máximo do heap para uso. Esses atributos retornam valores inteiros representados em bytes.
Este objeto funciona apenas no browser Google Chrome.

2.18.3. Métodos do Console
console.assert(expression, object[, object...]) Emite uma mensagem e traça a sequência de operações até o primeiro argumento for falso.
console.count([label]) Mostra o número de vezes que esta linha foi chamada com a label fornecida.
console.debug(object[, object...]) Deprecated since Gecko 5.0Um atalho para log(); que foi adicionado para melhorar a compatibilidade de páginas já existentes que utilizavam debug(). Porém, ao invés destes comandos você deve utilizar console.log().
console.dir(object) Exibe uma listagem interativa das propriedades de um objeto JavaScript especificado. Esta listagem permite a você expandir o objeto parra visualizar o conteúdo de objetos filhos.
console.error(object[, object...]) Emite uma mensagem de erro. Você pode usar substituição de string e outros argumentos adicionais com este método. Consulte Uso de substituição de string.
console.exception(object[, object...]) Um atalho para error();
console.group(object[, object...]) Cria um novo grupo em linha e recua todas as mensagens seguintes para um nível de indentação superior. Para voltar um nível, utilize groupEnd().
console.console.groupCollapsed(object[, object...]) Cria um novo grupo em linha e recua todas as mensagens seguintes para um nível de indentação superior; ao contrário de group(), o grupo em linha começa recolhido. Para revelar seu conteúdo, basta clicar no botão de revelação para expandí-lo. Para recuar um nível, utilize groupEnd().
console.console.groupEnd() Sai do grupo em linha atual.
console.console.info(object[, object...]) Informações de registro. Você pode utilizar substituição de string e outros argumentos com este método.
console.log(object[, object...]) Utilizado para a emissão de informações de registro em geral. Você pode utilizar substituição de string e outros argumentos com este método.
console.profile( [profileLabel] ) Inicia o JavaScript profiler. Você pode especificar qualquer label opcional para o perfil.
console.profileEnd() Interrompe o profiler. Você pode ver o profile resultante no JavaScript profiler.
console.time(name) Inicia um contador de tempo com o nome especificado no parâmetro name. Até 10.000 contadores de tempo podem ser rodados por página.
console.timeEnd(name) Interrompe o contador de tempo especificado e emite o tempo e registros do contador de tempo em milisegundos desde o seu início.
console.trace() Emite um traçado de pilha.
console.warn(object[, object...]) Emite uma mensagem de alerta. Você pode utilizar substituição de string e argumentos adicionais com este método.

2.18.4. Output de Texto para o Console
Há duas maneiras de utilizar cada um dos métodos de outuput. Você pode simplemente passar uma lista dos objetos cuja representação em string será concatenadas em uma string e então realizar o output  para o console, ou você pode passar uma string contendo zero ou mais substituições de strings seguidas por uma lista de objetos para serem utilizados na substituição.

Output de um único objeto
A forma mais simples de utilizar os métodos de log é realizar o output de um único objeto:
Exemplo:
<!DOCTYPE html>
<html>
<body>
  <script type="text/javascript">
    var algumObjeto = { str: "Algum texto", id: 5 };
    console.log(algumObjeto);
  </script>
</body>
</html>


Execute o código acima e acesse o console, no meu caso é do Internet Explore 11.



Resultado:


Output de múltiplos objetos
Também pode realizado o output de múltiplos objetos ao simplesmente listá-los ao chamar o método de log, desta forma:
<!DOCTYPE html>
<html>
<body>
  <script type="text/javascript">
  var carro = "Fusca";
  var algumObjeto = {str:"Algum texto", id:5};
  console.info("Meu primeiro carro era um ", carro, ". O objeto é: ", algumObjeto);
  </script>
</body>
</html>
Resultado:


2.18.5. Substituição de string
O Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) introduziu o suporte à substituição de strings. Ao fornecer uma string para um dos métodos do console que aceitam uma string, você pode utilizar estas strings de substituição:
String de substituição Descrição
%o Emite um link para o objeto JavaScript. Clicar no link abre um inspetor.
%d ou %i Emite uma numero inteiro. A formatação ainda não possui suporte.
%s Emite uma string.
%f Emite um número de ponto flutuante. A formatação ainda não possui suporte.

Cada um destes puxam o próximo argumento na lista de parâmetros após a string fornecida inicialmente.
<!DOCTYPE html>
<html>
<body>
  <script type="text/javascript">
  for (var i=0; i<5; i++) {
  console.log("Olá, %s. Você me chamou pela %dª vez.", "João", i+1);
}
  </script>
</body>
</html>

O output será algo assim:


2.18.6. Estilizando o output no console
You can use the "%c" directive to apply a CSS style to console output:
console.log("%cMy stylish message", "color: red; font-style: italic");

3. Método getElementById

Provavelmente o método mais utilizado no DOM seja o getElementById. Sua função simplesmente retorna o elemento cujo atributo ID foi especificado. Caso o elemento não exista ou o ID informado seja incorreto ele retornará null.

É importante lembrarmos que somente um objeto pode conter um ID específico, ou seja, não podem existir dois objetos em uma página com o mesmo valor de um atributo ID.

Considere o seguinte campo de um formulário:

<input type="text" id="nomeContato" name="nomeContato" ...
Para acessarmos o valor digitado nesse campo de texto em JavaScript procederemos assim:

document.nomeForm.nomeContato.value
Ou seja, precisamos declarar document mais o nome do formulário em que o campo se localizada e o seu nome espeficado no atributo name.

Se utilizarmos o método getElementById, podemos acessá-lo assim:

document.getElementById('nomeContato').value
Assim, ao invés de informarmos toda a localização do objeto, dizemos apenas o seu atributo ID ao método getElementById.

Por exemplo: imagine uma pessoa solicitando seu endereço e, ao invés de você informar rua, bairro, cidade, estado, você informar apenas o seu CEP e o seu número.

Na página Método: getElementById existem dois scripts de exemplos, um em JavaScript e outro utilizando o método getElementById do DOM.

Detalhe importante: getElementById é diferente de getelementbyid ou getElementbyId e por aí vai. Caso você escreva o nome errado será retornado um erro. Por exemplo: document.getelementByid não é uma função.
Exemplo:

Vamos supor que eu quero fazer alguma verificações do formulário antes de envia-lo. Eu posso chamar uma função Javascript que faz uso do getElementById() para fazer as verificações necessárias antes de realmente enviar o formulário, porque caso as verificações não procedam, eu posso não enviar o formulário. Vamos ao código:

<html>
<head>
    <title>Exemplo de getElementById() no Formulário</title>

<style type="text/css">

#msg_erro {
    color: red;
    font-weight: bold;
}

</style>

</head>
<body>

<script language="JavaScript">

function teste_submit()
{
    var obj_form = document.getElementById('form_teste');
    var obj_nome = document.getElementById('nome_teste');
    var obj_cargo = document.getElementById('cargo_teste');
    var obj_msg_erro = document.getElementById('msg_erro');
    var msg_erro = '';

    if(obj_nome.value == '')
        msg_erro = 'campo NOME vazio';
    else if(obj_cargo.value == '')
        msg_erro = 'campo CARGO vazio';

    if(msg_erro == '')
        obj_form.submit();
    else
        obj_msg_erro.innerHTML = msg_erro;
}

</script>

<form id="form_teste" action="http://www.comocriarsites.com" method="post">
Nome: <input type="text" id="nome_teste" name="nome_teste"><BR>
Cargo: <input type="text" id="cargo_teste" name="cargo_teste"><BR>
<input type="Button" value="Enviar" onclick="teste_submit();">
</form>
<div id="msg_erro"></div>

</body>
</html>

4. Escopo e this
4.1. Escopo
Em programação, escopo é o contexto aonde o código é executado, ele determina a relação existente entre as diferentes partes do seu programa, definindo limites de visibilidade e ação das variáveis e métodos. Javascript possui escopo de nível de função, isso significa que somente funções podem criar novos escopos, blocos como if, while, for não criam novos escopos.
Em Javascript existem três tipos de escopos, global, local e de bloqueio, que discutiremos a seguir.
4.1.1. Escopo Global
É o escopo raiz (objeto window no caso dos navegadores), qualquer variável definida fora de qualquer função ou outro objeto será visível em qualquer parte do programa.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
  var cor = "amarelo";
  var texto;
  function pintar() {
  return "Pintando de " + cor;
  }
  texto = pintar();
  document.write(texto); //retorna "Pintando de amarelo"
</script>
</body>
</html>
Resultado:
Pintando de amarelo

Observe que a variável cor foi definida no escopo global e também ficou disponível dentro do escopo local da função pintar.

4.1.2. Escopo Local
Em uma função, quando utilizamos var ao definirmos variáveis, estamos indicando que a mesma pertence ao escopo local da função, ou seja, ela somente será visível dentro da função (incluindo funções descendentes).
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function pintar () {
    var cor = "azul";
    var pintando = function () {
        document.write("Pintando de " + cor);
    };
    pintando();
}
pintar(); //imprimi "Pintando de azul"
document.write(cor);  // fora de escopo
</script>
</body>
</html>
Resultado no Internet Explore 11:
Pintando de azul
Linha: 13
Erro: 'cor' não está definido

No exemplo acima definimos a variável cor dentro do escopo local da função pintar e a mesma ficou disponível para a função descendente pintando, porém, quando tentamos acessar  a variável cor fora da função, nesse caso, o escopo global, recebemos um erro de referência que nos indica que a váriavel não existe.
IMPORTANTE: se não usar a palavra chave var ao declarar uma variável dentro do escopo local de uma função, a mesma será criada no escopo global e isso pode gerar bugs muito difíceis de solucionar.

Exemplo:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function pintar () {
    cor = "azul";
    var pintando = function () {
        document.write("Pintando de " + cor + '<br>');
    };
    pintando();
}
pintar(); //imprimi "Pintando de azul"
document.write(cor); ; //imprimi azul
</script>
</body>
</html>
Resultado no Internet Explore 11:
Pintando de azul
azul

4.1.3. Escopo de Bloco
O Internet Explorer 11 apresenta suporte a let e const, que são variáveis com escopo no bloco.  Para essas variáveis, as chaves {. . .} definem um novo escopo. Quando você define dessas variáveis para um valor específico, o valor só será aplicado ao escopo ao qual está definido.
Exemplo:
let x = 10;
var y = 10;
{
    let x = 5;
    var y = 5;
    {
        let x = 2;
        var y = 2;
        document.write("x: " + x + "<br/>");
        document.write("y: " + y + "<br/>");
        // Output:
        // x: 2
        // y: 2
    }
    document.write("x: " + x + "<br/>");
    document.write("y: " + y + "<br/>");
    // Output:
    // x: 5
    // y: 2
}
document.write("x: " + x + "<br/>");
document.write("y: " + y + "<br/>");
// Output:
// x: 10
// y: 2

4.2. this
Em Javascript, a palavra chave this é uma referência ao contexto no qual a função está sendo executada, ou seja, ao objeto ao qual ela pertence, na maioria das linguagens this é uma referencia ao objeto atualmente instanciado, mas em Javascript, o valor de this vai depender de como a função foi chamada.
Objetos são constituídos de propriedades e métodos.  Muitos dos objetos embutidos de Javascript contêm, por sua vez, outros objetos, que podem conter outros objetos, e assim por diante. Às vezes, torna-se difícil saber em que ponto se está na árvore de objetos. Javascript oferece um atalho para referenciar o objeto corrente, é a palavra-chave this.
Sintaxe:
this.propriedade

É norma em JavaScript uma variável receber uma função como atributo. Mas o que exatamente acontece quando você faz isso? Em JavaScript, as funções podem ser passadas como parâmetros para outras funções, retornadas como valor e assim, referenciadas por variáveis.
O JavaScript representa funções como objetos. Quando atribuímos uma função a uma variável, estamos criando uma referência para um objeto do tipo function. Podemos ver isso de forma clara utilizando o operador typeof. O exemplo abaixo cria uma função e a atribui a variável chamada apresentar, que recebe como parâmetro um objeto com os atributos nome e email. Vamos invocar a função e a seguir usar o operador typeof para inspecionar o tipo que é referenciado pela variável usada para guardar a função:
1. <!DOCTYPE html>
2. <html>
3. <body>
4.   <script type="text/javascript">
5.     var apresentar = function(pessoa) {
6.     document.write("Eu sou "+ pessoa.nome +" e meu email é: "+ pessoa.email+'<br>');
7.   }
8.   apresentar({nome: "Ricardo", email: "ricardo.valeriano@caelum.com.br"});
9.   document.write(typeof (apresentar));
10.   </script>
11. </body>
12. </html>

Resultado:
6. Eu sou Ricardo e meu email é: ricardo.valeriano@caelum.com.br
9. function

Existem quatro formas de chamar uma função:
- diretamente;
- como um método;
- explicitamente aplicada; e
- como um construtor.

4.2.1. Diretamente
Quando uma função é chamada diretamente, this fará referencia ao contexto global, que no caso dos navegadores é o objeto window.
Exemplo:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
// função 'multiplicar'
// imprime o actual valor de this e
// imrpimi o resultado da multiplicação entre valorA e valorB
function multiplicar(valorA, valorB) {
    document.write( this + '<br>' );
    document.write( valorA * valorB );
}
multiplicar(2, 3); // imprimi o objeto window e 6
//Aqui chamamos a função diretamente e this faz referência
//ao objeto global window
</script>
</body>
</html>
Resultado no Internet Explore 11:
[object Window]
6

4.2.2. Como um Método
Métodos em Javascript são funções que são armazenadas dentro das propriedades de um objeto, se uma função for chamada como um método de um objeto, então this, dentro dessa função, fará referência a esse objeto.
Exemplo:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
//Criamos um objeto chamado 'meuObjeto'
  var meuObjeto = {
   valorA: 10,
   valorB: 20,
   multiplicar: function () {
       document.write(this.valorA * this.valorB );
    }
};
//A propriedade multiplicar armazena uma função, ou seja, um método.
meuObjeto.multiplicar(); // imprimir 200, nesse caso this faz referencia a meuObjeto
</script>
</body>
</html>
Resultado no Internet Explore 11:
200

4.2.3. Explicitamente
Uma função pode ser aplicada explicitamente a qualquer objeto, e para isso utilizamos os métodos call ou apply.
Os métodos call e apply nos permitem controlar o valor de this e assim definir para qual objeto ele fará referência. A diferença entre eles é a forma que recebem os parâmetros e também a velocidade de execução que varia entre os distintos navegadores.
Exemplo:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
//Criamos a função somar que será aplicada explicitamente a qualquer objeto
function somar(valorA, valorB) {
    document.write(valorA + valorB + this.valorC + this.valorD +'<br>');
}
//Criamos o objeto meuObjeto, observe que ele não possui nenhum método
var meuObjeto = {
    valorC: 20,
    valorD: 25
};
//utilizando call
somar.call(meuObjeto, 10, 15);  // imprimi 70
//utilizando apply
somar.apply(meuObjeto, [10, 15]); // imprimi 70
</script>
</body>
</html>
Resultado:
70
70
Ambos métodos são executados e this na função somar() faz referência ao objeto ‘meuObjeto’ (variável global), portanto this.valorC é 10 e this.valorD é 15

Os métodos call e apply esperam como primeiro parâmetro o objeto ao qual a função será aplicada. Apply recebe como segundo parâmetro um array com os parâmetros que serão passados para a função e call recebe os mesmos parâmetros separados por virgula.

4.2.4. Como um Construtor
Quando uma função é usada como um construtor (usando a palavra chave new), this fará referência ao novo objeto que está sendo construído.
Exemplo:
<html>
<body>
<script type="text/javascript">
//a função Carro() será usada para construir objetos tipo Carro
function Carro() {
    this.numPortas = 4;
    this.getNumPortas = function () {
        document.write(this.numPortas );
    };
}
var meuCarro1 = new Carro();
var meuCarro2 = new Carro();
document.write(meuCarro1.getNumPortas()); // imprimi 4
meuCarro2.numPortas = 2; //alteramos o valor de numPortas em meuCarro2
document.write(meuCarro2.numPortas); // imprimi 2
</script>
</body>
</html>

Perceba que this detro da função em JavaScript faz referência a variável global, que no caso em questão são os objetos que foram construídos, ou seja, meuCarro1 e meuCarro2.
NOTA1:
ECMAScript 5 introduz uma nova função chamada bind. Com ela podemos aplicar uma função a um objeto de forma que this continue fazendo referência à função e não ao novo objeto, independente se a mesma é chamada como um método ou diretamente.
<html>
<body>
<script type="text/javascript">
function somar() {
    this.valorA = 1;
    this.valorB = 1;
    document.write(this.valorA + this.valorB);
}
var meuObjeto = {
    valorA: 50,
    valorB: 50
};
var calcula = somar.bind(meuObjeto);
calcula(); //imprimi 2 e não 100
</script>
</body>
</html>
Resultado:
2

Nesse caso this.valorA e this.valorB fazem referencia aos valores que estão na função e não no objeto.

bind
(baɪnd): v. (passado & particípio bound) 1. amarrar (formal), atar, 2.  unir (laços, passado), 3.  comprometer (acordo, promessa); s. 1.  chatice (informal), 2. enrascada.

NOTA2:
ECMAScript 3 possui um falho importante com relação ao valor de this no caso de funções que estão dentro de outras funções. No código abaixo vemos um objeto (meuObjeto) que possui uma função (calcular1) que por sua vez possui outra função (calcular2). As duas funções estão imprimindo o valor de this que será o objeto meuObjeto, correto? Não. Para nossa surpresa na função calcular2 this faz referencia ao objeto global (window no caso dos navegadores) ao invés de meuObjeto, ou seja, ele perde a referência ao contexto no qual a função está sendo executada.
Exemplo:
<html>
<body>
<script type="text/javascript">
var meuObjeto = {
    valor: 50,
    calcular1: function () {
        document.write(this+'<br>'); //imprimi o objeto meuObjeto
        document.write(this.valor +'<br>'); //imprimi 50;
        calcular2 = function () {
            document.write(this +'<br>'); //imprimi o objeto window
            document.write(this.valor +'<br>'); //imprimi undefined
        }();
    }
};

meuObjeto.calcular1();
</script>
</body>
</html>
Resultado no Internet Explore 11:
[object Object]
50
[object Window]
undefined

Para solucionar esse problema usamos a cadeia de escopo (scope chain):  Criamos uma variável na função “pai” (calcular1) que fará referência ao escopo, como convenção essa variável deveria chamar that, por causa da cadeia de escopo a função interna (calcular2) terá acesso a essa variável. Veja o código:
var meuObjeto = {
    valor: 50,
    calcular1: function () {
        var that = this; //nova variável que faz referência ao escopo
        console.log(this); //imprimi o objeto meuObjeto
        console.log(this.valor); //imprimi 50;
        calcular2 = function () {
            console.log(that); //imprimi o objeto window meuObjeto, 
                               //veja que estamos usando a variável that
           console.log(that.valor); //imprimi 50
        }();
    }
};

meuObjeto.calcular1();

Esse problema foi corrigido no ECMAScript 5, mas tenha esse bug em consideração.

5. Função

JavasScript como o próprio nome diz é uma linguagem de programação em script, portando é muito limitada quando comparada com o Java por exemplo. Por ser limitada, a função assume papel  muito importante, até porque não há outro meio.
O objetivo do JavaScript é dar dinâmismo as páginas HTML e implementar novos recursos.
Com funções, nós podemos tornar o código não-linear, mais organizado e mais fácil de entender.

5.1. Definindo uma Função
Há quatro sintaxes que podem ser usadas para declarar funções:
Declaração de função regular
function funcName() {
...
};

Atribuindo uma função de expressão a uma variável/propriedade
var funcName = function() {
...
 };

As outras duas formas são utilizando o objeto window
window.funcName = function() {
...
 };

e

window['funcName'] = function() {
...
 };

Como JavaScript não é tipado, o tipo da variável ocorre dinâmicamente, não é necessário declarar o nome da função como variável, porém, é bom usar as mesmas regras de outras linguagem e usar a palavra reservada var.
Essa é a sintaxe que você precisa usar se você deseja atribuir uma função como uma propriedade de um objeto.

5.2. Funções não são objetos
As funções podem ter propriedades próprias atribuídas a elas e, de fato, elas automaticamente têm algumas propriedades assim que são criadas, em JavaScript a função não é uma classe, nem muito menos um objeto, porém, a função pode possuir propriedades semelhantes a uma classe simples da qual uma objeto pode herdar suas propriedades, sob esta ótica, pode-se dizer que a função em JavaScript faz o papel da classe que existe em outras linguagens orientadas a objetos.
Exemplo:
var funcName = function() {
...
};
funcName.propriedade = "valor";
...

Infelizmente, porém, não podemos atribuir um lindo objeto literal para uma função porque isso iria substituir a função em si. É possível, no entanto, ainda atribuir um objeto literal para uma das propriedades da função.

5.3. Chamando uma Função
Normal
Vamos começar com o modo normal de chamar uma função. Tudo o que você precisa é adicionar alguns parênteses após o nome da função e, possivelmente, alguns argumentos dentro desses parênteses.
var funcName = function( arg1, arg2, arg3 ) {
...
};
funcName();  // or
funcName(1,2,3); 
...

Você pode chamar uma função com qualquer número de argumentos e não obter um erro! Isso é realmente incrível, porque permite que você crie funções com parâmetros “opcionais” e faça algo completamente diferente, dependendo do número de argumentos enviados. O jQuery faz muito isso com getters e setters. A parte chata é que você pode ter que verificar para se certificar de que as pessoas estão enviando o número certo e os tipos corretos de argumentos. No entanto, se você documentar o seu código suficientemente bem, você pode simplesmente alegar que o problema é deles se eles usarem os argumentos errados, e os erros irão informá-los.

Há outra coisa legal sobre isso. Você não precisa definir os parâmetros na sua declaração de função. Em vez disso, todos os argumentos podem ser acessados via arguments dentro da função. Olha só.

var funcName = function() {
console.log(arguments);
};  
funcName();          // (nothing to output)
// or
funcName(1, 2, 3);   // [1,2,3]
...

Exemplo:
O terceiro argumento "hello" não foi declarado na função.
<!DOCTYPE html>
<html>
<body>
  <script type="text/javascript">
   function ArgTest(arg1, arg2){
     var s = "";
     s += "The individual arguments are: "
     for (n = 0; n < arguments.length; n++){
       s += ArgTest.arguments[n];
       s += " ";
     }
   return(s);
   }
document.write(ArgTest(1, 2, "hello"));
// Output: The individual arguments are: 1 2 hello
  </script>
</body>
</html>

Resultado:
The individual arguments are: 1 2 hello
Obs: o ArgTest.arguments[n] é o próprio argumento, cuja índice n (0, 1 e 2), isto é, o primeiro argumento (1) tem índice 0, o segundo argumento (2) tem índice 1 e o terceiro agumento (hello) tem índice 2.

Exemplo:
O exemplo a seguir ilustra o uso da propriedade de arguments :

arguments é uma estrutura do tipo array. Na realidade, é um tipo especial de objeto que age como um array em muitos casos, mas possui sua própria funcionalidade e muitas vezes não terá a mesma funcionalidade que um array tem. Então, se você quer que ele seja um array, use slice para convertê-lo em um array.
var funcName = function() {
var args = Array.prototype.slice.call(arguments);
};
...

5.4. Função Anônima Auto-executável (mediata)

(function () {}) ();


É uma construção útil quando se tenta esconder variáveis ​​do namespace pai.  Todo o código dentro da função está contida no âmbito privado da função, o que significa que não podem ser acessados ​​de fora da função, tornando-se verdadeiramente privada.
O primeiro par de parenteses engloba toda a função afim de não confundir a sua execução.
O segundo par de parênteses é usado para chamar a função que acabou de ser fechada, o navegador vai saber que o segundo parêntese deve ser aplicado a toda a expressão anterior, isto é, function(){}.
Ela permite que uma função seja executada assim que seja definida. Isso é bom principalmente pelo fato de fornecer um escopo temporário para a mágica que você vai fazer, sem a necessidade de poluir seu escopo global.

Exemplo:

(function() {
  // some magic
}());

Pode-se passar argumentos para as funções imediatas, algo assim:

(function(name, hobby) {
  console.log('Hi, my name is ' + name + ' and I like ' + hobby );
}('Fabeni', 'to travel'));

// "Hi, my name is Fabeni and I like to travel"

Uma grande vantagem de passar parâmetros para uma função imediata (IIFE), é que esse valor é passado como uma cópia, e não como uma referência… Isto significa que se alterarmos o valor desse parâmetro dentro da IIFE, esse valor não vai persistir fora dela… por exemplo:

var myVar = true;

(function(myVar) {
  console.log(myVar); // true
  myVar = false;
  console.log(myVar); // false
}(myVar));

console.log(myVar); // true

Isso é bom para criar cópias de variaveis globais, e garantir que se alguem sobreescrever essa variável, isso não vai influenciar o módulo que foi criado. Esse comportamento também é conhecido como Closure.

5.5. Rest Parameters
Em JavaScript sempre pudemos passar quantos parâmetros quiséssemos para uma função por meio de argumentos:
function somaContaDoCliente(cliente, moeda, valores){
  var i = 2;
  var tamanho = arguments.length;
  var resultado = 0;

  while (i < tamanho) {
   resultado += arguments[i];
   i++;
  }
console.log("A conta do cliente "+cliente+ " totalizou "+moeda+ resultado);
}
somaContaDoCliente("Caio","R$",1,2,3,4,5); // A conta do cliente Caio totalizou R$15

Repare que no código acima precisamos lembrar da posição que começa nosso valores, mas e se adicionarmos mais um parâmetro no futuro? Precisaríamos lembrar de alterar o índice que usamos, mas será que só pelo nome da variável, lembraríamos que ali pode estar uma quantidade indefinida de valores?

Pensando nisto, foi criado o Rest Parameters, onde nós podemos realizar isso de um modo mais interessante, pois não precisamos mais acessar o array arguments e verificar as posições dele, o parâmetro que pode receber vários valores é precedido por três pontos(…) e precisa ser sempre o último parâmetro da função:
function somaContaDoCliente(cliente, moeda, ...valores){
  var resultado = 0;
  var i = 0;
  while (i < valores.length) {
    resultado += valores[i];
    i++;
  }
console.log("A conta do cliente "+cliente+ " totalizou "+moeda+ resultado);
}
somaContaDoCliente("Caio","R$",1,2,3,4,5); //A conta do cliente Caio totalizou R$15
Repare que ficou mais simples, não nos preocupamos com o índice e ainda está bem claro que o valores é um parâmetro especial que recebe um ou mais números.

6. Classes com Propriedades

Para criar uma classe em JavaScript utiliza-se uma função, pode-se definir uma função normalmente com algumas propiedades.
A classe logo abaixo possui uma propriedade chamada name:
function Pessoa(name) {
this.Nome = name;
}

Obs:
- a linguagem Javascript é case sensitive, ou seja, faz diferenciação entre maiúsculas e minúsculas: document.write("texto") não funcionará se mudar para document.Write("texto").
- this refere-se ao objeto corrente.

7. Criando um Objeto

Um objeto em JavaScript é um tipo especial de variável que contém propriedades e métodos, já o conceito de Objeto em Java é mais amplo, pois esta é uma linguagem com mais recursos e tem finalidades diferentes.

Para criar o objeto pessoa usando a classe Pessoa definida ni item 5, simplesmente declare-o e use a palavra-chave new para inicializá-lo, assim podemos atribuir algum valor para a propriedade herdada da classe.

var pessoa = new Pessoa("Pedro");

Também pode-se criar um objeto usando a sintaxe literal, porém esse recurso não utilizar a instância de uma classe:
var pessoa = {name: "Pedro"};

Adicionando Propriedades ao Objeto
pessoa.name="Pedro";
ou
pessoa["name"]="Pedro";

Exemplo de ciração de uma classe e uma instância da mesma, ou seja, um objeto:
<html>
<head>
<script language="JavaScript">
function Carro() // classe
{
    var Marca = "Sem marca";
    var Modelo = "Sem modelo";
    this.SetMarca = SetMarca;
    this.SetModelo = SetModelo;
    this.ShowMarca = DisplayMarca;
    this.ShowModelo = DisplayModelo;
  
    function DisplayMarca(){
      alert(Marca);
    }
  
    function DisplayModelo(){
      alert(Modelo);
    }
  
    function SetMarca(_marca) {
    Marca = _marca;
    }
  
    function SetModelo(_modelo) {
      Modelo = _modelo;
    }
  
  }
  var carro = new Carro(); // objeto
  carro.SetMarca("Ford");
  carro.SetModelo("Ka");
  carro.ShowMarca();
  carro.ShowModelo();
</script>
</head>
</body>
</html>

Outro exemplo:
Um lápis pode ser uma classe com algumas propriedades como:
Cor
Comprimento
Tipo de grafite

Ao criar uma instância (objeto) da classe lapisDeCor  foi definida todas as propriedades dessa classe.

<script>
    function lapisDeCor ( ) { // classe
        this.cor = '';  // propriedade
        this.comprimento = '';
        this.tipoGrafite = '';
    }

    var meuLapis = new lapisDeCor( ); // objeto
    meuLapis.cor = 'vermelho';  // atributo
    meuLapis.comprimento = '20cm';
    meuLapis.tipoGrafite = '2B';

    alert( "O tipo de grafite é: "+meuLapis.tipoGrafite );
    alert( "A cor do lapis é: "+meuLapis.cor );
    alert( "O comprimento do lapis é: "+meuLapis.comprimento );

</script>

Para acessarmos uma propriedade ou método de uma classe em javascript, utilizamos o operador ‘.’ (ponto)
objeto.propriedade


Essas propriedades só podem ser acessadas mediante o fato de o objeto ter sido instanciado, ou seja, o objeto é uma instância da classe.
Uma outra maneira de definirmos os valores das propriedades, pode ocorrer na hora de instanciar o objeto. Para não termos o trabalho de ter que fazer uma chamada para definir o valor de cada propriedade, poderíamos definir que o construtor da classe recebe argumentos, que já definem os valores para as propriedades, ou seja:
Na própria classe pode-se definir ou declarar as propriedades como iguais aos argumentos e no objeto pode-se entrar com os valores que serão atribuidos a suas propriedades.
Obs: os objetos herdam as propriedades da sua classe.
<script>
    function lapisDeCor ( cor, comprimento, tipoGrafite ) { // três argumentos
        this.cor = cor;  // as três propriedade são declaradas como iguais aos argumentos
        this.comprimento = comprimento;
        this.tipoGrafite = tipoGrafite;
    }

    var meuLapis = new lapisDeCor( 'vermelho','20cm','2B' );  // criação do objeto com seus atributos

    alert( "O tipo de grafite é: "+meuLapis.tipoGrafite );
    alert( "A cor do lapis é: "+meuLapis.cor );
    alert( "O comprimento do lapis é: "+meuLapis.comprimento );

</script>

Dessa forma criamos a instância de nossa classe e automaticamente definimos os valores que desejamos para as propriedades.

8. Prototype

Os objetos em javascript, contém uma propriedade especial chamada ‘prototype’.
Essa propriedade nos permite adicionar métodos e propriedades a nossa classe, de uma maneira diferente a apresentada anteriormente. Veja um exemplo:
<script>

    function lapisDeCor( ) {
        this.cor; // classe com uma única propriedade
    }

    lapisDeCor.prototype.comprimento = ''; //propriedade adicionada a classe
    lapisDeCor.prototype.tipoGrafite = '';  //propriedade adicionada a classe

    var meuLapis = new lapisDeCor( );
    meuLapis.cor = 'azul';
    meuLapis.comprimento = '15cm';
    meuLapis.tipoGrafite = '2B';

    alert( "O tipo de grafite é: "+meuLapis.tipoGrafite );
    alert( "A cor do lapis é: "+meuLapis.cor );
    alert( "O comprimento do lapis é: "+meuLapis.comprimento );

</script>

Quando é feita uma chamada para se instânciar uma classe em javascript, as propriedades prototypes são lidas antes do construtor, para que todas as propriedades e métodos sejam acoplados a nossa classe, e então sua instância tenha todas as características que foram definidas na classe. O exemplo acima, é equivalente ao ultimo exemplo anterior, porém agora as nossas propriedades foram anexadas ao objeto, utilizando-se a propriedade especial ‘prototype‘, ao invés de ser feita a declaração diretamente dentro do construtor. Prototype também pode ser usado para adicionar métodos e propriedades a objetos já nativos do javascript, como por exemplo o objeto String.

9. Métodos

Os métodos realizam açõescom as propriedades da classe. Ainda com o exemplo do lápis, vamos criar um método que escreva na tela usando a cor especificada pelo nosso lápis.
<html>
<body>
<script type="text/javascript">
    function lapisDeCor ( cor, comprimento, tipoGrafite ) {
        this.cor = cor;
        this.comprimento = comprimento;
        this.tipoGrafite = tipoGrafite;
        this.escrever = function( texto ) {
            var tmp = '<font color="'+this.cor+'">'+texto+'</font>';
            document.write( tmp );
        }
    }
    var meuLapis = new lapisDeCor( 'red','20cm','2B' );
    meuLapis.escrever( 'Testando a cor '+ meuLapis.cor );
</script>
</body>
</html>
Resultado:
Testando a cor red

Para que esse exemplo funcione, não esqueça que a cor deve ser escrita em inglês, ou usando os códigos hexadecimais para representação de cor. Temos agora uma nova situação nesse exemplo, o método escrever( ). Em javascript, podemos atribuir uma função a propriedade, e dessa forma criar um método. Existe mais de uma maneira de se criar um método para uma classe. Para se atribuir essa condição de função a propriedade, basta igualá-la a uma função, como no exemplo acima. Nós poderíamos também, transformar uma simples variável em uma função:
Exemplo:
<script>
    var novaFuncao = function( ) {
        alert('sou uma nova funcao');
    }
    novaFuncao( );
</script>

Da mesma forma como fizemos com as propriedades, os métodos podem ser declarados usando-se a propriedade ‘prototype’.
Exemplo:
<script>
    function lapisDeCor ( cor, comprimento, tipoGrafite ) {
        this.cor = cor;
        this.comprimento = comprimento;
        this.tipoGrafite = tipoGrafite;
    }
    lapisDeCor.prototype.escrever = function( texto ) {
        var tmp = '<font color="'+this.cor+'">'+texto+'</font>';
        document.write( tmp );
    }
    var meuLapis = new lapisDeCor( 'red','20cm','2B' );
    meuLapis.escrever( 'Testando a cor '+ meuLapis.cor );
</script>

10. Propriedades e Métodos Estáticos
10.1. Propriedade Estática
Será criado uma função que simule uma classe com uma variável ‘static’, é estática porque não pertence ao escopo da função, logo, um objeto criado com base na função não tem acesso a ela por referência, é uma variável "solta".
Exemplo:
<!DOCTYPE html>
<body>
<script>
    function lapisDeCor(cor, comprimento, tipoGrafite) {
        this.cor = cor;
        this.comprimento = comprimento;
        this.tipoGrafite = tipoGrafite;
    }
    lapisDeCor.fabricante = 'Heap';
    var lapis1 = new lapisDeCor('azul','20cm','2B');
    alert( lapis1.fabricante); // retorna 'undefined'
    alert(lapisDeCor.fabricante); // retorna Heap
</script>
</body>
</html>
Resultado:
undefined
Heap

Nesse exemplo criamos uma propriedade estática para a classe lapisDeCor. Esse valor só pode ser acessado diretamente, sem instanciar a classe. Esse valor também pode ser alterado a qualquer momento, de maneira direta, sem que se instancie a classe.

Se não for criada a função que define a classe lapisDeCor, será gerado um erro de sintaxe. Não é possível criar uma variável por referência sem a classe que o referência.
Exemplo:

<!DOCTYPE html>
<body>
<script type="text/javascript">
    lapisDeCor.fabricante = 'Heap';
    alert( lapisDeCor.fabricante );
</script>
</body>
</html>
Resultado no console do Internet Explore 11:
SCRIPT5009: 'lapisDeCor' não está definido

10.2. Métodos Estáticos
O funcionamento dos métodos estáticos é semelhante.
Exemplo:
<!DOCTYPE html>
<body>
<script>
    function lapisDeCor( cor, comprimento, tipoGrafite ) {
        this.cor = cor;
        this.comprimento = comprimento;
        this.tipoGrafite = tipoGrafite;
    }
    lapisDeCor.fabricante = 'Heap'; // obs:1 propriedade static
    lapisDeCor.getFabricante = function( ) { // obs2: metodo static
        return this.fabricante;
    }
    lapisDeCor.getCor = function( ) { // obs3: metodo static
        return this.cor;
    }
    alert( lapisDeCor.getCor( ) ); // undefined
    alert( lapisDeCor.getFabricante( ) ); // Heap

    var lapis = new lapisDeCor('red','20cm','2B');
    alert( lapisDeCor.getCor( ) ); // undefined
    alert( lapisDeCor.getFabricante( ) ); // Heap
    alert( lapis.getCor( ) ); // gerará um erro, obs4:
</script>
</body>
</html>
Resultado no console do Internet Explore 11:
SCRIPT438: O objeto não oferece suporte à propriedade ou método 'getCor'
undefined
Heap
undefined
Heap

Obs1: a variável por referência estática lapisDeCor.fabricante não pertence ao escopo da função lapisDeCor, logo não precia criar uma instância da classe (um objeto) para a variável static lapisDeCor.fabricante, a variável static pode receber um atributo diretamente, ou seja, por valor.
Obs2: a variável por referência lapisDeCor.getFabricante recebe como atributo uma função, o que a torna um método, tal função retorna a variável estática this.fabricante. Ou seja, métodos estáticos podem acessar somente variáveis estáticas.
Obs3: método estático getCor() não tem acesso a variável global cor.
Obs4: o objeto lapis herda da classe lapisDeCor suas propriedades, portanto o acesso ao método getCor( ) é feito diretamente pela classe.

Observe que no tipo static uma função passa uma variável por referência a outra função, porém essa referência é apenas no nome, a verdadeira referência criada com o operador new não pode ser usado para essa variável, pois a mesma já foi criada.

Com esse exemplo, podemos perceber que métodos estáticos só podem alterar propriedades estáticas, e realizar chamada para métodos estáticos. No entanto, métodos não estáticos podem fazer chamada de métodos estáticos, e/ou acessar propriedades estáticas.
Exemplo:
<!DOCTYPE html>
<body>
<script type="text/javascript">
    function lapisDeCor( cor, comprimento, tipoGrafite ) {
        this.cor = cor;
        this.comprimento = comprimento;
        this.tipoGrafite = tipoGrafite;
    }
    lapisDeCor.prototype.showFabricante = function( ) { //metodo da classe
        alert("Metodo estatico getFabricante( ): "+lapisDeCor.getFabricante());
        alert("Propriedade estatica fabricante : "+lapisDeCor.fabricante );
    }
    lapisDeCor.fabricante = 'Heap';
    lapisDeCor.getFabricante = function( ) {
        return this.fabricante;
    }
    alert( "Chamada a propriedade estatica: "+lapisDeCor.getFabricante( ) );
    var lapis = new lapisDeCor('red','20cm','2B');
    lapis.showFabricante( );
</script>
</body>
</html>
Resultado no console do Internet Explore 11:
Chamada a propriedade estatica: Heap
Metodo estatico getFabricante(): Heap
Propriedade estatica fabricante: Heap

O método ‘showFabricante( )’, faz a chamada dos métodos estáticos e traz o valor de ‘fabricante’ para a tela. Vamos deixar tudo um pouco mais complicado agora, e vamos misturar um pouco as coisas num exemplo mais completo.
<script>
    function lapisDeCor( cor, comprimento, tipoGrafite ) {
        this.cor = cor;
        this.comprimento = comprimento;
        this.tipoGrafite = tipoGrafite;
        this.fabricante = 'Heap - Propriedade do objeto';
    }

    lapisDeCor.prototype.showFabricante = function( ) {
        alert("Metodo estatico getFabricante(): "+lapisDeCor.getFabricante( ));
        alert("Propriedade estatica fabricante : "+lapisDeCor.fabricante);
        alert("Metodo getFabricante( ) do objeto :"+this.getFabricante( ));
        alert("Propriedade fabricante do objeto : "+this.fabricante);
    }

    lapisDeCor.fabricante = 'Heap - Propriedade estatica';

    lapisDeCor.getFabricante = function( ) { // metodo estatico
        return this.fabricante; // propriedade estatica fabricante
    }

    lapisDeCor.prototype.getFabricante = function ( ) {
        return this.fabricante; // propriedade fabricante do objeto
    }

    var lapis = new lapisDeCor('red','20cm','2B');
    lapis.showFabricante( );
</script>

Veja que podemos ter métodos e propriedades estáticas com o mesmo nome de métodos e propriedades não estáticas. Lembre-se, métodos estáticos só se referem a propriedades estáticas, e não a propriedades do objeto.

11. Herança
Herança é a capacidade de classes compartilharem atributos e métodos entre si. Geralmente a herança é usada para compartilhar comportamentos generalizados e comuns entres as classes filhas.
A orientação a objetos em Javascript também nos fornece o recurso de herança. Para que uma classe herde outra, basta instanciar a classe da qual se deseja herdar, no prototype da qual receberá a herança.
Exemplo:
<!DOCTYPE html>
<body>
<script type="text/javascript">
    function endereco ( ) {
        this.endereco = '';
      
        this.setEndereco = function(ender) {
            this.endereco = ender;
        }

        this.getEndereco = function( ) {
            return this.endereco;
        }
    }

    function pessoa( ) {
        this.nome = '';

        this.setNome = function(nome) {
            this.nome = nome;
        }

        this.getNome = function( ) {
            return this.nome;
        }
    }

    pessoa.prototype = new endereco( );
    var eu = new pessoa( );
    eu.setNome('Henrique');
    eu.setEndereco('Rua X');
    document.write(eu.getNome( )+' vive no endereço '+eu.getEndereco( ) );
</script>
</body>
</html>

Henrique vive no endereço Rua X

No exemplo acima, a classe ‘pessoa’ herdou todas as propriedades e métodos da classe endereco, o que pode ser confirmado pelo fato de fazermos a chamada dos métodos ‘setEndereco( )’ e ‘getEndereco( )’ da classe ‘endereco’ em uma instancia da classe pessoa.

Exemplo:
Este exemplo mostra como criar uma classe veiculo cuja propriedades possam ser herdadas pelos objetos moto e carro, tais objetos aceleram, fream e tem velocidade, ou seja, tem as mesmas propriedades da classe.
Como moto e carro tem as mesmas caracteísticas, pode-se então criar uma classe para os mesmos.

Classe Veiculo
:
var Veiculo = {
    Class : function(){
        var velocidade = 0
        this.acelerar = function(){ velocidade += 10}
        this.frear = function(){ velocidade -=10 }
        this.velocidade = function(){ return velocidade }
    }
}
Criamos então uma Classe em comum aos dois objetos, Moto e Carro. Como fazer a herança para os dois? Simples:

Classe Moto:
var Motocicleta = {
    Class: function(){    
        Veiculo.Class.apply(this) 
    }
}

Classe Carro:
var Carro = {
    Class: function(){    
        Veiculo.Class.apply(this)
        
    }
}

Então:
var moto = new Motocicleta.Class()
    moto.acelerar()
    moto.velocidade() // 10

Ambas as classes herdam os métodos da classe mãe Veiculo.  Não existe apenas esta forma de se implementar a herança em javascript.
O apply é um método herdado para todos os tipos Function. Ele te da o poder de chamar qualquer função determinando qual será o escopo e os parâmetros passados.
Quando chamamos Veiculo.Class.apply(this) nas duas classes, estamos chamando a função Veiculo.Class de dentro das Classes usando o próprio escopo delas. Ou seja, no momento em que a Veiculo.Class estiver sendo executada, quando chegar nas linhas this.acelerar,, this.etc,  ela vai saber que this se refere ao escopo da própria classe, portanto vai setar os valores para o escopo da classe Moto e Carro.
A variável privada velocidade é passada para o escopo das classes filhas graças ao Closure, porque a função Veiculo.Class inicia uma variável livre que pode ser vista através dos métodos públicos this.acelerar, this.frear e this.velocidade e por usar a palavra chave var a cada chamada da função Veiculo.Class se criará uma nova variável privada “velocidade”, uma para cada classe.

12. Design Patterns – Singleton
Singleton é implementada criando-se uma classe, que contém um método que retorna uma única instancia dessa classe.
Exemplo:
<script>
    function pessoa( ) {
        this.nome = '';
    }

    pessoa.prototype.setNome = function( nome ) {
        this.nome = nome;
    }

    pessoa.prototype.getNome = function( ) {
        return this.nome;
    }

    pessoa.getInstance = function( ) {
        if ( !this.instance )
            this.instance = new pessoa( );
        return this.instance;
    }

    pessoa.instance = null;

    var eu = pessoa.getInstance( );
    eu.setNome('Henrique');

    var voce = pessoa.getInstance( ); // é a mesma instancia
                                      // que se encontra na variavel 'eu'

    alert( eu.getNome( ) ); // retorna Henrique
    alert( voce.getNome( ) ); // retorna Henrique

    voce.setNome('Heap');

    alert( eu.getNome( ) ); // retorna Heap
    alert( voce.getNome( ) ); // retorna Heap

</script>
Veja então que criamos uma propriedade estática chamada ‘instance’, que deverá armazenar a instancia do nosso Singleton. Quando chamamos a função ‘getInstance( )’, da classe pessoa, ela verifica se já existe uma instancia criada da classe. Caso não haja, cria uma nova instancia e a retorna.
Ao final quando mudamos o nome para a instancia que está na variavel ‘voce’, percebemos que o valor também foi alterado para a variável ‘eu’, pois ambas variáveis se referem à mesma instância do objeto.

Exemplo:
function Page(){
    var width = 800;
    this.getWidth = function(){
        return width;
    }
}
Page.instance = null;
Page.getInstance = function(){
    if (Page.instance == null) Page.instance = new Page();
    return Page.instance;
}
A primeira impressão é de que é uma boa implementação de singleton, porque segue um padrão semântico bem próximo aos usados em linguagens como o Java e C++.
Mas é uma abordagem péssima para javascript. Em javascript você não consegue definir constantes como em java por exemplo quando usa a palavra-chave final. Então, no caso acima, Page.instance pode ser a qualquer momento modificada para null e então haverá duas instâncias Singleton.

Referências
http://loopinfinito.com.br/2012/05/04/heranca-em-javascript-parte-1/
http://www.maujor.com/blog/2012/10/19/javascript-precisa-de-classes/
https://software.intel.com/pt-br/xdk/blog/new-javascript-class-patterns
http://www.devmedia.com.br/classes-no-javascript/23866
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
http://www.maujor.com/blog/2012/10/19/javascript-precisa-de-classes/