1. Introdução


Javascript é uma linguagem de script orientada a objetos, ela é embutida dentro do código HTML e é capaz de acrescentar eventos aos elementos estáticos do HTML. Ela foi criada pela Netscape a fim de expandir a funcionalidade de seu popular browser: o Navigator. E assim nascia uma linguagem que se tornaria um padrão e sinônimo de processamento cliente em páginas web.
Ela não gera uma executável e dependente do browser para sua execução, ou seja, não é possível criar um programa executável somente com javascript.
Ela possui tipagem dinâmica, o que significa que  não se precisa definir o tipo da variável, podendo armazenar nela ora inteiro, ora string.
Para acessar uma página que possui scripts, o navegador deve ser capaz de interpretar a linguagem.
Javascript é uma linguagem independente de plataforma, ou seja, o código escrito nesta linguagem não depende de uma plataforma específica (Windows, Macintosh, UNIX, etc), depende apenas do navegador que a interpreta. Dessa forma, quer o usuário tenha um navegador para Windows, Macintosh ou UNIX, o código Javascript será executado sem que nenhuma adaptação seja necessária.
Javascript é uma linguagem que interagem apenas com a página que é exibida no browser, isto quer dizer que não tem acesso ao computador do usuário ou do servidor.

Elemento SCRIPT:
São as tags <SCRIPT>...</SCRIPT>

Dentro de um documento HTML, a linguagem Javascript é delimitada pelo par de tags <SCRIPT> e </SCRIPT>. Você pode posicionar a tag <SCRIPT> dentro dos elementos <head></head> e <body></body>:
<HEAD>
   <SCRIPT>...</SCRIPT>
</HEAD>
e
<BODY>
   <SCRIPT>...</SCRIPT>
</BODY>

ou em ambos ambos, é possível incorporar múltiplos elementos <SCRIPT> dentro de um documento.
Scripts dentro da tag <HEAD> são carregados antes que o resto da página seja carregado, tornando-se um excelente lugar para colocar suas funções Javascript (para garantir que elas estejam disponíveis para outras partes do documento). Colocar scripts dentro da tag <BODY> faz com que seja possível criar, dinamicamente, partes de seu documento (exibindo, por exemplo, a hora).

2. A sintaxe do elemento <SCRIPT>


<SCRIPT LANGUAGE="javascript">
código-fonte javascript
</SCRIPT>

Cuidado:
- O tipo de aspas do tipo “  ” não funcionam no código fonte, utilize as aspas "".
Se for necessário usar dentro de um comando, propriedade ou função uma aspa dentro da outra, a aspas interna deve ser simples e a externa dupla. O uso de aspas pode gerar erro, tornando necessário fazer alguns testes com o seu uso, tanto para javascript quanto para CSS.
- 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").

A tag <SCRIPT> informa o interpretador Javascript do navegador que um script encontra-se embutido. O atributo LANGUAGE identifica a linguagem que deve ser utilizada para interpretar o código do script. Isto é necessário porque existem outras linguagens para construção de scripts, como, por exemplo, VBScript (Microsoft).
O atributo SRC permite chamar um arquivo de scripts externo (arquivos com extensão ".js" ).  A fim de facilitar a manutenção, recomenda-se armazenar as funções Javascript de uma página em um arquivo separado, que pode ser incluído no documento HTML com a construção abaixo:

<SCRIPT LANGUAGE="javascript" SRC="funcoes.js"></SCRIPT>


Script básico
Impressão da frase "Olá! Como vai?" na página. Observe que, apesar de não existirem elementos entre as marcações <BODY> e </BODY>, esta frase é exibida. Isto ocorre porque a função  document.write("string") instrui o navegador a inserir a string que estiver entre apóstrofos duplo ou aspas duplo dentro do <body></body> na página, podendo inserir até mesmo tags HTML.

<html>
<head>
   <script language="javascript">
   document.write("Olá! Como vai?<BR>");
   </script>
</head>
<body>
</body>
</html>

Uma das razões de utilizar Javascript é a possibilidade de montar um texto para ser exibido, incluindo valores de variáveis que podem ser inseridos pelo usuário.
Exemplo:
Recorte e cole o código abaixo no bloco de notas do windows e salve como scriptum.html:
<html>
<head>
   <script language="javascript">
   var nome
   nome = window.prompt("Digite o seu nome:");
   document.write("Bom dia, " + nome + "!<BR>");
   </script>
</head>
<body>
</body>
</html>

Clique no arquivo scriptum.html que ele abrirá no navegador padrão (neste caso foi o FireFox).

Ao entrar com o nome José José a página aparecerá com a frase:
Bom dia, José José!

Neste ponto, é importante lembrar que nem todos os navegadores interpretam Javascript. Para evitar resultados indesejados (por exemplo, listagem do código da função Javascript que deveria ser interpretada), usam-se as marcações de comentários "<!--" e "-->".
Exemplo:
<html>
<head>
<script language="javascript">
<!--
var nome
nome = window.prompt("Digite o seu nome:");
document.write("Bom dia, " + nome + "!<BR>");
//-->
</script>
</head>
<body>
</body>
</html>

2.1. Uso da função document.write ()
Utilizada para imprimir string entre aspas duplo ou número sem aspas no corpo da página.
Impressão de string:
var s = "texto";
document.write (s);
document.write ("texto");

Concatenação de texto:
document.write ("texto1"+"texto2");

Concatenação de número:
document.write (2 + "" + 4);
Obs: como o sinal de mais é utilizado para fazer uma soma de números e para concaternar string ou string e número, por isso, soma-se ao número uma string vazia para que não seja realizado a soma, um simples erro na concatenação o script simplesmente não é executado.

Impressão de número:
var n = 2;
document.write (n);
document.write (6);
document.write (2+5);

Exemplo:
<html>
<head>
<title></title>
<script language="JavaScript">
var s = "texto";
var n =2;
document.write("Impressão de string:"+"<br>");
document.write(s+"<br>");
document.write("texto"+"<br><br>");
document.write("Concatenação de textos: "+"<br>");
document.write("texto1 + "+" texto2"+'<br><br>');
document.write("Concatenação dos números 2 e 4: "+"<br>");
document.write(2 + "" + 4+"<br><br>");
document.write("Impressão dos números: 2, 6 e 2+5"+"<br>");
document.write(n+"<br>");
document.write(6+"<br>");
document.write(2+5+"<br>");
</SCRIPT>
</head>
<body>
</body>
</html>
Execução:
Impressão de string:
texto
texto

Concatenação de textos:
texto1 + texto2

Concatenação dos números 2 e 4:
24

Impressão dos números: 2, 6 e 2+5
2
6
7

Exemplo:
<html>
<head>
<title></title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var soma = 5+5;
var subtracao = 5-5;
var multiplicacao = 5*5;
var divisao = 5/5;
var resto = 5%5;
document.write (soma);
document.write ("<BR>");
document.write (subtracao);
document.write ("<BR>");
document.write (multiplicacao);
document.write ("<BR>");
document.write (divisao);
document.write ("<BR>");
document.write (resto);
//-->
</SCRIPT>
<body>
</body>
</html>

Execução:
10
0
25
1
0

3. Eventos em Javascript



Javascript é uma linguagem dirigida por eventos. Eventos são ações  que executam uma tarefa específica. Diferentemente de outra linguagens que executam ações dentro de uma lógica sequencial, em javascript geralmente os eventos devem ser executados automaticamente.
3.1. Manipuladores de eventos
São representados como atributos especiais que modificam o comportamento de uma tag HTML à qual são anexados. Atributos de manipulação de eventos começam todos com "On" e identificam os diversos eventos que podem ocorrer. O valor associado ao manipulador pode ser uma sequência de declarações Javascript, ou uma chamada de função Javascript.
Servem para interfacear um script com atividades do sistema ou ações do usuário.

3.1.1. Eventos de sistema
OnLoad
e OnUnload
Eles não exigem a interação do usuário para serem ativados.
OnLoad
Este evento é ativado após a página HTML ser completamente carregada. Ele pode ser associado às tags <BODY> ou <FRAMESET>.
Exemplo:
<html>
<head>
<script language="Javascript">
function chegada() {
   window.alert(“Seja bem-vindo ao nosso site!");
}
</script>
</head>
<body OnLoad=“chegada()">
Veja que interessante utilização do evento <I>OnLoad</I>.
</body>
</html>
---------------------------------
<script>
  function testSp()
  {
    alert("hit");
  }
  window.onload=testSp; ok
</script>


<body onload="tabela()"> ok


<script type="text/javascript">
document.onload=function(){
tabela();
//maiorMenor();
//plotarEixos();
}

-----------------


<script>
//enquadramento
function tabela() {
var y = new Array();
var a=-12;
var b=12;

for(var c=0; c<=375; c++)
{
x=a+(b-a)*c/375;
y[c]= x*x + x -12;
 document.write(y[c] + "<br>")
}


------------------------------
    var num = y[5];
    var n = num.toString();
    document.getElementById("demo").innerHTML = n;

}
window.onload=tabela;
</script>

<p id="demo"></p>



//<button onclick="tabela()">Try it</button>

</body>
-----------------



OnUnload
Este evento é ativado após a página HTML ser abandonada (seja através do clique sobre algum link, ou sobre os botões de avanço/retrocesso do browser). Ele pode ser associado às tags <BODY> ou <FRAMESET>.
Exemplo:

<html>
<head>
<script language="Javascript">
function saida() {
   window.alert(“Volte sempre!");
}
</script>
</head>
<body OnUnload=“saida()">
Veja que interessante utilização do evento <I>OnUnLoad</I>.
</body>
</html>

3.1.2. Os eventos de mouse
OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e OnMouseOver.
Eles exigem a interação do usuário, através do mouse ou não, para serem ativados.

OnClick
O evento mais básico de mouse é tratado pelo manipulador OnClick. Este evento é ativado sempre que se dá um clique sobre um objeto que aceita evento de clique de mouse. Objetos que aceitam um evento OnClick são links, caixas de verificação e botões.
Exemplo:
<html>
<head>
<script language="Javascript">
function mensagem() {
   window.alert(“Você clicou neste campo");
}
</script>
</head>
<body>
<a href="exemplo3.html" OnClick="mensagem()">
<i>Link</i> comum</a><br>
<form>
<input type=“radio" OnClick=“mensagem()"><i>Radio</i>
<br>
<input type=“checkbox" OnClick=“mensagem()"><i>Checkbox</i>
<br>
<input type=“reset" OnClick=“mensagem()">
<br>
<input type=“submit" OnClick=“mensagem()">
<br>
</form>
</body>
</html>

Exemplo (crie um arquivo.html com o código abaixo):
<html>
<head>
<script language="Javascript">
function submete() {
document.form1.completo.value=document.form1.nome.value + " " + document.form1.sobrenome.value;
}
</script>
</head>
<body>
<form name=form1>
<pre>
Nome:        
<input name="nome" type="text">
Sobrenome:   
<input name="sobrenome" type="text">
Nome completo:
<input name="completo" type="text">
<input type=button value="Enter" onclick="submete()">
</pre>
</form>
</body>
</html>
Execução (clique no arquivo):
Entre com os textos:

Após clicar em Enter:


OnFocus

O foco ocorre quando um objeto torna-se o item em foco. Isto acontece quando o usuário clicar ou alternar para um objeto específico na página. Este evento pode ser associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>).
Exemplo:
<html>
<head>
<script language="Javascript">
function foco() {
   window.alert(“O campo EMAIL está em foco");
}
</script>
</head>
<body><form>
Nome: <input name=“nome" type=“text"><br>
Email: <input name=“email" type=“text" OnFocus=“foco()"><br>
Telefone: <input name=“telefone" type=“text">
</form></body>
</html>

OnBlur
Este evento é ativado quando um objeto torna-se fora de foco - quando se muda para outra janela, ou aplicativo, ou quando se passa para outro objeto utilizando cliques do mouse, ou a tecla TAB. Ele é associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e  <SELECT>).
Exemplo:
<html>
<head>
<script language="Javascript">
function semfoco() {
   window.alert(“O campo EMAIL perdeu o foco");
}
</script>
</head>
<body><form>
Nome: <input name=“nome" type=“text">
<br>
Email:<input name=“email" type=“text" OnBlur=“semfoco()">
<br>
Telefone: <input name=“telefone" type=“text">
</form></body></html>

OnChange
Este evento é ativado sempre que um objeto perde o foco e o seu valor é alterado. Ele é associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>).
Exemplo:
<html>
<head>
<script language="Javascript">
function mudou1() {
document.form1.completo.value=document.form1.nome.value;
}
function mudou2() {
document.form1.completo.value=document.form1.completo.value + " " + document.form1.sobrenome.value;
}
</script>
</head>
<body>
<form name=form1>
<pre>
Nome:         
<input name="nome" type="text" OnChange="mudou1()">
Sobrenome:    
<input name="sobrenome" type="text" OnChange="mudou2()">
Nome completo:
<input name="completo" type="text">
</pre>
</form>
</body>
</html>

Recorte e cole o código acima no bloco de notas do Windows, salve com qualquer nome com extensão .HTML. (cuidado com as aspas duplas). Dê dois cliques no arquivo para executá-lô (neste caso foi no Google Chrome).
Execução:

Ao digitar no primeiro campo auatomaticamente o terceito campo é preenchido.

Digite algo no segundo campo, observe na figura que o cursor ainda está nesse campo, ou seja, não perdeu o foco.

Ao clicar fora do segundo campo a função mudou2() é executada.

OnSelect
Este evento é ativado quando o usuário seleciona (deixa em destaque) parte do texto em um dos objetos aos quais está associado. São eles: text, password e textarea (definidos pelas tags <INPUT> e <TEXTAREA>).
Exemplo:
<html>
<head>
<script language="Javascript">
function selecao() {
   window.alert("Campo selecionado");
}
</script>
</head>
<body>
<form>
<pre>
Campo input texto:
<input type="text" OnSelect="selecao()">
Campo input senha:
<input type="password" OnSelect="selecao()">
Campo textarea:
<textarea OnSelect="selecao()"></textarea>
</pre>
</form>
</body>
</html>
Obs: A função selecao() será executada quando for digitado algum texto no campo e tal texto for selecionado.

OnSubmit
Este evento é ativado no momento de enviar os dados do formulário. Ele é associado ao objeto form (definido pela tag <FORM>).
Exemplo:
<html>
<head>
<script language="Javascript">
function submete() {
   window.alert("Evento OnSubmit ativado!");
}
</script>
</head>
<body>
<form name=form1 OnSubmit="submete()">
Campo 1: <input type="text" size=10 name=campo1><br>
Campo 2: <input type="text" size=10 name=campo2><p>
<input type=submit>
</form>
</body>
</html>

Outro exemplo:
<html>
<head>
<script language="Javascript">
function submete() {
document.form1.completo.value=document.form1.nome.value + " " + document.form1.sobrenome.value;
}
</script>
</head>
<body>
<form name=form1 OnSubmit="submete()">
<pre>
Nome:         
<input name="nome" type="text">
Sobrenome:    
<input name="sobrenome" type="text">
Nome completo:
<input name="completo" type="text">
<input type=submit>
</pre>
</form>
</body>
</html>
Obs: Após acionado, o botão submit inicia-se uma nova requisição e os campos são limpos, esse processoa é usado para enviar dados, este mesmo arquivo será refeito com o botão botton, a entrada e dados pemanecerá nos campos.

O evento OnSubmit é mais apropriado para validação de dados permitindo condicionar a entrada de dados afim de evidar erros de cadastros.
Exemplo:

Arquivo: scriptdois.html
<html>
<head>
<script language="Javascript">
function submete() {
if (document.form1.campo1.value == "" ||
    document.form1.campo2.value == "") {
          return window.alert("Não aceita campo vazio");
}
 else {
          return true;
}
}
</script>
</head>
<body >
<form name=form1 action="scriptdois.html" OnSubmit="return submete()">
Campo 1: <input type="text" size=10 name=campo1>
<br>
Campo 2: <input type="text" size=10 name=campo2>
<p>
<input type=submit>
</form>
</body>
</html>
Execução (clique no arquivo):
Digitando Olá! no primeiro campo e Como vai? no segundo campo:

Observe que os dados de entrada são transmitidos via URL.
Se clicar no botão enviar com os campos vazio será gerado a janela de alerta:



Caso o retorno da função submete() fosse false, simplesmente os dados não seriam enviados da mesma forma, apenas não teria a messagem.

OnMouseOver
Este evento é ativado quando o ponteiro do mouse passa sobre um objeto do tipo links ou botões.

Exemplo:
<html>
<head>
<script language="Javascript">
function ativa() {
   window.alert("Evento OnMouseOver ativado!");
}
</script>
</head>
<body>
<a href="exemplo9.html" OnMouseOver="ativa()">
Passe o <i>mouse</i> sobre este <i>link</i></a>
</form>
</body>
</html>

4. Formulários (revisão)


Os formulários em HTML são utilizados para a coleta de dados do usuário e seu envio para o banco de dados, é uma entrada de dados via cliente, podendo os dados serem trabalhados por vária linguagem de programação como Java e Php, os recursos dos formulários visão aumentar a produtividade, simplificando a entrada de dados e evidando erros de cadastro.

Tags: <form> </form>
São utilizadas para criar os formulários:
Exemplo:
<html>
<head>
</head>
<body >
<form name=form1 action="scriptdois.html" >
Campo 1: <input type="text" size=10 name=campo1>
<br>
Campo 2: <input type="text" size=10 name=campo2>
<br>
<input type=submit>
</form>
</body>
</html>

Além dos eventos em javascript já citados anteriormente, os seguintes comantos básicos são permitidos dentro das tag <form>:
Comandos Funções Valores
name
Atribui um nome ao campo. É muito importante a utilização deste comando, pois é através deste nome atribuído a cada campo, que poderemos capturar os dados e manipulá-los. Qualquer nome que não inicie com símbolos ou números, e que não contenha caracteres especiais (ç), nem acentos ou espaços.
value
Atribui um valor predefinido ao campo. Qualquer tipo de valor. Por exemplo, frases, números entre outros.
maxlength
Determina um valor máximo de caracteres que um campo irá suportar. Números inteiros maiores que zero.
size
Determina o tamanho do campo em caracteres. Números inteiros maiores que zero.
rows
Determina a quantidade de linhas em uma área de texto. Números inteiros maiores que zero.
cols
Determina a quantidade de colunas em uma área de texto. Números inteiros maiores que zero.
disabled
Desabilita um campo ou área de texto, impossibilitando ao usuário inserir dados. Valor disabled, em português desativado.
checked
Este comando é aplicável a caixas de seleção e a botões do tipo rádio, e quando for aplicado, a opção já aparece selecionada. Valor checked, em português verificado/marcado/selecionado.
type
Define o tipo do campo ou elemento do formulário. button (botão), checkbox (caixa de seleção), file (campo para a seleção de arquivos no PC), password (campo de senha), radio (botão radio), reset (botão que limpa o formulário), submit (botão que envia o formulário), text (campo de texto).

Esta apostila não tem o objetivo de explicar a criação de formulários, essa matéria pertence ao HTML.

5. Funções


Uma função é um conjunto de declarações que executam uma tarefa específica.
Existem dois tipos de funções: funções desenvolvidas pelo usuário e funções pré-definidas da linguagem.
Em Javascript, uma função é identificada pela palavra-chave function, uma palavra chamada nome, e um par de parênteses ( ), que delimitam zero ou mais parâmetros. Todas as declarações dentro de uma função estão dentro de um par de chaves { }.

Sintaxe:
function  nome( ) {
declaração 1;
...
return n;
}

A declaração return  é opcional, é utilizada caso a função retorne um valor ou para cancelar imediatamente a execução da função.

Função com parâmetros:
Exemplo:

function incremento(valor) {
   return valor +1;
}

Exemplo:
<script language="JavaScript">
  function soma ( x, y ) {
    var sum;
    sum = x+y;
    return (sum);
  }
  var total = soma(5,4);
  document.write("Resultado da soma: ", total);
</script>
 
A função está definida no topo do script, contudo, só é chamada no final, no corpo principal do código do programa. A chamada à função (total=soma(5,4)) é feita passando como parâmetros os valores "5" e "4", que são colocados nas variáveis "x" e "y", internas à função em causa (não são conhecidas fora do corpo da função e que, como parâmetros fixos que são, não podem ser modificados no interior da função. Igualmente interna à função soma() é a variável "sum", cujo valor é por fim devolvido para o exterior da função, utilizando para tal a instrução "return(sum)".

O valor devolvido é colocado na variável "total", que foi utilizada na expressão de chamada da função.
A reutilização de código pode ser demonstrada com o exemplo seguinte. Nele é utilizada uma função "fact()", que simplesmente calcula o factorial de um número. Neste exemplo pretende-se calcular todos os factoriais de números entre 1 e 10, bem como dar a oportunidade de calcular o factorial de um número à escolha:
 
<script language="JavaScript">
function fact(num) {                       // Função de Calculo do Factorial
  var res=1;                               // Variável que vai conter o resultado final
  for (var k=num; k>=1; k--) {             // Cálculo do factorial
    res *= k;                              // Expressão reduzida da multiplicação
  }
  return(res);
}
 
// Programa principal
for (var k=1; k<=10; k++) {                 // Cálculo dos factoriais entre 1 e 10
    document.write(k, "! = " , fact(k), "<br/>");
}
 
var x;
x=prompt("Outro factorial a calcular:");
document.write(x, "! = " , fact(x));
</script>
 
A utilização da função fact() para calcular os factoriais dos números de 1 a 10 e depois a utilização da mesma função para calcular o factorial do número entrado pelo utilizador, permite efectuar reutilização de código, urna vez que a alternativa seria escrever duas vezes a rotina de cálculo do factorial.
Outro exemplo de escrever o mesmo código seria:
 
<html>
<head>
<title>Factorial</title>
 
<script language="JavaScript">
function fact(num) {                       // Função de Calculo do Factorial
  var res=1;                               // Variável que vai conter o resultado final
  for (var k=num; k>=1; k--) {             // Cálculo do factorial
     res *= k;                             // Expressão reduzida da multiplicação
  }
  return(res);
}                                          // Fim da função
 
// Programa principal
function main() {        
 
  for (var k=1; k<=10; k++) {               // Cálculo dos factoriais entre 1 e 10
      document.write(k, "! = " , fact(k), "<br/>");
  }
    document.write(11, "! = " , fact(11));
}
</script>
</head>
 
<body>
<h3>Cálculo do Factorial</h3>
 
<script language="JavaScript">
  main();
</script>
</body>
</html>

Execução:
1! = 1
2! = 2
3! = 6
4! = 24
5! = 120
6! = 720
7! = 5040
8! = 40320
9! = 362880
10! = 3628800
11! = 39916800

Neste caso, o código JavaScript foi colocado no cabeçalho (header) da página HTML, sob a forma de funções, estando a função principal (main()) também residente nessa zona.
O corpo da página HTML contém, neste exemplo, apenas a invocação da função main(). A forma mais comum do uso de JavasCript é a chamada de função que executa um determinado evento.
 
5.1. As funções internas
São funções predefinidas disponíveis para uso em JavaScript. São elas: eval, parseInt, parseFloat, isFinite, Number, String, isNaN, escape e unescape. A partir da versão 1.5 do JavaScript, as funções escape e unescape foram abolidas. As novas funções disponíveis são: encodeURI, decodeURI, encodeURIComponent e decodeURIComponent.

5.1.1. eval
eval (string)
, onde string representa uma expressão a ser resolvida, retornando um valor numérico.  Ela recebe uma cadeia de caracteres e a executa como se fosse uma sentença de Javascript.
Exemplo:
<html>
<html>
<head>
<title></title>
<script language="JavaScript">
document.write(eval("7")+eval("3"));
</script>
</head>
<body>
</body>
</html>
Execução:
10

 Exemplo:
document.write(eval(10*9*8*7*6*5*4*3*2))
Avalia uma expressão numérica, retornando um resultado também numérico.

5.1.2. parseInt
Esta função recebe um número, escrito como uma cadeia de caracteres, e um número que indica uma base. Na verdade pode receber outros tipos de variáveis, dado que as variáveis não têm tipo em Javascript, mas costuma-se utilizar passando um string para converter a variável de texto em um número.

As distintas bases que pode receber a função são 2, 8, 10 e 16. Se não passamos nenhum valor como base a função interpreta que a base é decimal. O valor que devolve a função sempre tem base 10, de modo que se a base não é 10 converte o número a essa base antes de devolvê-lo.

Vejamos uma série de chamadas à função parseInt para ver o que devolve e entender um pouco mais a função.

document.write (parseInt("34"))
Devolve o número 34

document.write (parseInt("101011",2))
Devolve o número 43

document.write (parseInt("34",8))
Devolve o número 28

document.write (parseInt("3F",16))
Devolve o número 63

Esta função se utiliza na prática para várias de coisas distintas no manejo com números, por exemplo, obter a parte inteira de um decimal.

document.write (parseInt("3.38"))
Devolve o número 3

Também é muito habitual o seu uso para saber se uma variável é numérica, pois se passamos um texto à função que não seja numérico nos devolverá NaN (Not a Number) o que quer dizer que Não é um Número.

document.write (parseInt("Olá!"))
Devolve o número NaN

Este mesmo exemplo é interessante com uma modificação, pois se passamos uma combinação de letras e números, daria o seguinte.

document.write (parseInt("16XX3U"))
Devolve o número 16

document.write (parseInt("TG45"))
Devolve o número NaN

Como se pode ver, a função tenta converter o string em número e senão pode, devolve NaN.

5.1.3. isNaN
Esta função devolve um booleano dependendo se o que se recebe é um número ou não. O único que pode receber é um número ou a expressão NaN. Se recebe um NaN devolve true e se recebe um número devolve false.

A função costuma trabalhar em combinação com a função parseInt ou parseFloat, para saber se o que devolvem estas duas funções é um número ou não.

meuInteger = parseInt("A3.6")
isNaN(meuInteger)

Na primeira linha atribuímos a variável meuInteger o resultado de tentar converter a inteiro o texto A3.6. Como este texto não se pode converter a número, a função parseInt devolve NaN. A segunda linha comprova se a variável anterior é NaN e sendo assim devolve um true.

meuFloat = parseFloat("4.7")
isNaN(meuFloat)

Neste exemplo convertemos um texto a número com decimais. O texto se converte perfeitamente porque corresponde com um número. Ao receber um número a função isNaN devolve um false.
Funções Internas

5.1.4. alert
Mostra uma caixa de alerta, seguido de um sinal sonoro e o botão de OK.
 Ex: alert('Esta é uma janela de alerta!')

5.1.5. confirm
Mostra uma caixa de diálogo, seguida de um sinal sonoro e os botão de OK e Cancel. Retorna um valor verdadeiro se o usuário escolher OK.
 Ex: retorno=confirm('Deseja prosseguir?')

5.1.6. escape
Obtém o código ASCII de um caracter que não seja alfa-numérico.
 Ex: document.write(escape("@"))

5.1.7. parseFloat
Converte uma string que representa um número, para um número com ponto flutuante. Caso a string não possa ser avaliada, a função retorna 0.
 Ex: document.write(parseFloat("-32.465e12")

5.1.8. prompt
Monta uma caixa de entrada de dados, de forma simplificada comparando-se com o objeto text.
 Ex: prompt(label [,valor])
onde:
label - texto que aparece ao lado da caixa.
valor - é o conteúdo inicial da caixa.

-----------------------
Funções Intrínsecas ou Internas

 

A linguagem JavaScript além dos recursos descritos anteriormente, ainda possui algumas funções internas, que não estão ligadas diretamente a nenhum objeto, porém isso não impede que essas funções recebam objetos como parâmetros. A seguir estas funções serão vistas detalhadamente:
•escape - Obtém o código ASCII de um caracter que não seja alfanumérico.


Ex: document.write(escape("@"))
•eval - Avalia uma expressão numérica, retornando um resultado também numérico.


Ex: document.write(eval(10*9*8*7*6*5*4*3*2))
•parseFloat - Converte uma string que representa um número, para um número com ponto flutuante. Caso a string não possa ser avaliada, a função retorna 0.

5.2. Funções tipicamente Matemáticas
Math.abs(número) - retorna o valor absoluto do número (ponto flutuante)
Math.ceil(número) - retorna o próximo valor inteiro maior que o número
Math.floor(número) - retorna o próximo valor inteiro menor que o número
Math.round(número) - retorna o valor inteiro, arredondado, do número
Math.pow(base, expoente) - retorna o cálculo do exponencial
Math.max(número1, número2) - retorna o maior número dos dois fornecidos
Math.min(número1, número2) - retorna o menor número dos dois fornecidos
Math.sqrt(número) - retorna a raiz quadrada do número
Math.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)
Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)
Math.sin(número) - retorna o seno de um número (anglo em radianos)
Math.asin(número) - retorna o arco seno de um número (em radianos)
Math.cos(número) - retorna o cosseno de um número (anglo em radianos)
Math.acos(número) - retorna o arco cosseno de um número (em radianos)
Math.tan(número) - retorna a tangente de um número (anglo em radianos)
Math.atan(número) - retorna o arco tangente de um número (em radianos)
Math.pi retorna o valor de PI (aproximadamente 3.14159)
Math.log(número) - retorna o logarítmo de um número
Math.E - retorna a base dos logarítmos naturais (aproximadamente 2.718)
Math.LN2 - retorna o valor do logarítmo de 2 (aproximadamente 0.693)
Math.LOG2E - retorna a base do logarítmo de 2 (aproximadamente 1.442)
Math.LN10 retorna o valor do logarítmo de 10 (aproximadamente 2.302)
Math.LOG10E - retorna a base do logarítmo de 10 (aproximadamente 0.434)

6. Restrições quanto ao nome de variáveis/funções


Não é permitido colocar espaço em branco em um nome.
Não é permitido incluir um hífen (“-") em um nome.
Não é permitido colocar os seguintes caracteres em um nome:  .  ,  ;  “  ‘  ?
Embora seja possível usar dígitos em um nome, ele precisa começar com uma letra.
Não é permitido utilizar, como nome de uma nova variável/função, alguma das palavras reservadas de Javascript.

6.1. Palavras que não podem ser usadas como nomes de variáveis ou funções em Javascript
abstract, boolean, break, byte, case, catch, char, class, const, continue, default, do, double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, nt, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, var, void, while, with.

6.2. Declaração de variáveis
Cada variável tem que ser declarada como global ou local. A única diferença entre estes dois tipos em Javascript é onde elas estão localizadas dentro do código. É possível definir variáveis antes de atribuir um valor a elas, ou no momento em que fizer a atribuição.

6.3. Variáveis Locais
São definidas dentro do corpo de uma função. Elas são válidas apenas dentro do corpo da função onde foram definidas (escopo limitado).

Exemplo (crie um arquivo.html com o código abaixo):
<html>
<head>
<script language="Javascript">
function adiciona(){
var a, b, s;
a =parseFloat(document.form1.parcela1.value);
b = parseFloat(document.form1.parcela2.value);
s= a + b;
document.form1.soma.value = eval(s);
}
</script>
</head>
<body>
<form name=form1 >
<pre>
Parcela 1:      
<input name="parcela1" type="text">
Parcela 2: 
<input name="parcela2" type="text" >
Resultado: 
<input name="soma" type="text">
<input type=button value="  +  " onclick="adiciona()">
</pre>
</form>
</body>
</html>

Execução (clique no arquivo.html):

A figura acima é obtida entrando com os dados e clicando no botão +.

Exemplo:
<html>
<head>
<script language="JavaScript">
  function soma ( x, y ) {
    var sum;
    sum = x+y;
    return (sum);
  }
  var total = soma(3,4);
  document.write("Resultado: ", total);
</script>
</head>
<body>
</body>
</html>
Execução:
Resultado: 7

6.4. Variáveis Globais
São definidas fora de todos os corpos de funções de um arquivo Javascript. Elas são válidas dentro de qualquer função do arquivo.
Exemplo:

var b = 1;
function adiciona(valor){
var a = valor + b;Tipo de dados numérico

7. Tipos de valores


Existem 4 (quatro) tipos de variáveis reconhecidos por Javascript:

7.1. Tipo de dados numérico
var n=6;
Nesta linguagem só existe um tipo de dados numérico, ao contrário do que ocorre na maioria das linguagens mais conhecidas. Todos os números são portanto, do tipo numérico, independentemente da precisão que tenham ou se são números reais, inteiros, negativos ou positivos. Os números inteiros são números que não têm vírgula, como 1 ou 32. Os números reais são números fracionários, como 2.69 ou 0.25, que também se podem escrever em nota científica, por exemplo, 2.482e12.

Com Javascript também podemos escrever números em outras bases, como a hexadecimal. As bases são sistemas de numeração que utilizam mais ou menos dígitos para escrever os números. Existem três bases com as que podemos trabalhar:
Base 10: é o sistema que utilizamos habitualmente, o sistema decimal. Qualquer número, por padrão, se entende que está escrito em base 10.
Base 8: também chamado sistema octal, que utiliza dígitos do 0 ao 7. Para escrever um número em octal basta simplesmente escrever este número precedido de um 0, por exemplo 045.
Base 16 ou sistema hexadecimal: é o sistema de numeração que utiliza 16 dígitos, os compreendidos entre o 0 e o 9 e as letras da A à F, para os dígitos que faltam. Para escrever um número em hexadecimal devemos escrevê-lo precedido de um zero e um "x", por exemplo, 0x3EF.
Tipo boleano

7.2. Boolean
Uma variável do tipo booleano pode assumir apenas dois valores: true e false. Os valores deste tipo são em geral usados pela linguagem como resultado de comparações e podem ser usados pelo usuário para valores de teste ou para atributos que possuam apenas dois estados. Equivale ao uso de um inteiro com valores 0 ou 1 na linguagem C.
O JavaScript converte automaticamente true para 1 e false para 0 quando isso for necessário.
Exemplo:

<script language="Javascript">
var x, y,z;
function xmaior() {
if (x >  y || x > z {
          return true;
}
 else {
          return false;
}
}
</script>

Exemplo:
var a = 14;
var b = 42;
var tr = (a == 14);
var fl = (a == b);
// Neste caso tr irá conter o valor true e fl o valor false.
var int1 = tr+1;
var int2 = fl+1;
// A variável int1 irá conter o valor 2 (true + 1), pois true é
// automaticamente convertido para 1 e int2 irá conter o valor 1
// (false + 1), pois false é convertido para 0.

7.2.1. Comentário sobre boolean
Muitas vezes no Javascript testamos o valor de uma variável utilizando um retorno da mesma como um resultado booleano. Independente do tipo da variável, o JavaScript pode interpretar o seu valor como verdadeiro (true) ou falso(false). Essa definição é interpretada com uma regra básica para cada tipo de variável/objeto.

Exemplo:
//definimos umas variáveis:
var texto = "frase qualquer";
var textoVazio = "";
var numVerdade = 200;
var numFalso = 0;
var vetorVazio = [];
 
// E agora vamos aos testes:
document.write( !!window ); // true
document.write( !!window.elemento ); // false
document.write( !!texto); // true
document.write( !!textoVazio ); // false
document.write( !!numVerdade ); // true
document.write( !!numFalso ); // false

Obsserve que o sinal de exclamação (!) inverte o valor.

Regra:
String: uma string vazia ("") é considerado um valor falso, já uma string "frase" retorna um valor verdadeiro.
Number: 0 é falso enquanto valores diferentes de 0 retornam verdadeiro
Arrays: a simples existência de uma array criada, independente de ter algum elemento contido nela ou não vai retornar um valor verdadeiro. Uma array com 0 elementos não retorna falso!
null: retorna falso!
Elementos DOM do HTML: objetos definidos (existentes no DOM) retornam verdadeiro, enquanto elementos não definidos retornam falso. Por exemplo: window é um elemento existente no DOM, retorna verdadeiro, enquanto window.elemento vai retornar falso.

7.3. Tipo string (dados cadeia de caracteres)
var s ="frase";

Serve para salvar um texto. Javascript só tem um tipo de dados para salvar texto e nele, se podem introduzir qualquer número de caracteres. Um texto pode estar composto de números, letras e qualquer outro tipo de caracteres e signos. Os textos se escrevem entre aspas, duplas ou simples.

var textoUm = "Olá"
var extoDois = 'Como vai?'

Tudo o que se coloca entre aspas, como nos exemplos anteriores é tratado como uma cadeia de caracteres independentemente do que coloquemos no interior das aspas. Por exemplo, em uma variável de texto podemos salvar números e nesse caso temos que ter em conta que as variáveis de tipo texto e as numéricas não são a mesma coisa e que enquanto as de numéricas nos servem para fazer cálculos matemáticos, as de texto não servem.

7.3.1. Caracteres de escape em cadeias de texto
Existe uma série de caracteres especiais que servem para expressar em uma cadeia de texto determinados controles como pode ser uma quebra de linha ou um tabulador. Estes são os caracteres de escape e se escrevem com uma nota especial que começa por uma contra-barra (uma barra inclinada ao contrário da normal '\') e logo se coloca o código do caractere a mostrar.
\n : quebra linha (line feed)
Usado para pular para a linha de baixo, exemplo: "Onde está \n a bola!", será impresso:
Onde está
a bola!

\": para inserir um aspas dupla na string
Usado para incluir uma aspa dupla na cadeia de caractere, exemplo: "Cuidado: \"não aperte o botão\"", esta string será impressa assim: Cuidado: "não aperte o botão.

\': para inserir uma aspas simples ou apóstrofo na string
Usado da mesma forma que as aspas duplas.

\t: tabulador
\f: avance de página (form feed)
\b: retrocesso de página (backspace)
\\: contra-barra: para inserir uma barra invertida na string
\r: retorno de carro (carriage return)

7.4. Nulo
O null é a ausência de valor, quando atribuimos null a um objeto ou variável significa que essa variável ou objeto não possui valor válido.
Para efeito de comparação, se usarmos o operador de igualdade "==", o JavaScript irá considerar iguais os valores null e undefined. E isso não afeta o uso da comparação (var.metodo == null) quando queremos descobrir se um objeto possui determinado método. No entanto, se for necessário diferenciar os dois valores é recomendável o uso do operador "===" de identicidade. Assim, para efeito de comparação, undefined e null são iguais, mas não idênticos.
Exemplo:

var vazio = null;
var ind;
var res = (vazio == ind);
var res1 = (vazio === ind);
// Quando executado a variável res terá o valor true
// e res1 terá o valor false. E se tentarmos imprimir
// a variável vazio, teremos null impresso.

7.5. Indefinido
Uma variável tem seu valor indefinido quando ela é apenas declarada e não é atribuido nenhum valor.
Exemplo:
var b;
window.alert(b);
// Quando tentamos imprimir a variável b na janela de alerta
// será impresso "undefined" pois não há nenhum valor associado a ela.
var text = "";
// O mesmo não ocorre com o caso acima, pois essa variável contém uma
// sequência de caractéres nula e nada será impresso.

8. Expressões


Expressão é um conjunto de constantes, variáveis e operadores que, avaliados, resultam em um único valor (número, string ou booleano).
8.1. Tipos
8.1.1. Expressões aritméticas
Resultam em um número
8.1.2. Expressões de string
Resultam em uma sequência de caracteres (string)
8.1.3. Expressões lógicas
resultam em verdadeiro ou falso, representados, respectivamente, pelas palavras reservadas true e false.

9. Operadores


Operadores são símbolos especiais que controlam como uma expressão deve ser avaliada.
Um operador pode ser:
- Binário: exige dois operandos.
- Unário: exige apenas um operando (antes ou depois do operador).
Os operadores podem, ainda, ser classificados de acordo com o tipo dos operandos que manipulam: operadores aritméticos, operadores de comparação, operadores de string, operadores lógicos, operadores bit a bit e operadores de atribuição.

9.1. Operadores aritiméticos
Operadores aritméticos constróem expressões aritméticas. Eles recebem e retornam números.

A tabela 1 mostra os operadores aritméticos básicos de Javascript.
Operador Função Explicação
+ Soma Soma as duas parcelas da operação
- Subtração Subtai as duas parcelas da operação
*
Multiplicação Multiplica os dois fatores
/
Divisão
Divide o divisor pelo dividendo
%
Modulo
Retorna o resto da operação de divisão inteira entre os operandos
++
Incremento
Soma 1 na própria variável
--
Decremento
Subtrai 1 da própria variável
-
Negação Unária

Exemplos:

Módulo (%)
Exemplo: 22 % 5 => 2

Incremento (++)
Comparação:
x=2
1) x = ++x = x + 1 = 3
2) x = x++ = x + 1 = 3
3) y = ++x
Primeiro: ++x = 3
Segundo: y = 3
4) y = x++
Primeiro: y = x = 2
Segundo: x = x++ = 3

Decremento (--)
Comparação:
x=2
1) x = --x = x - 1 = 1
2) x = x-- = x - 1 = 1
3) y = --x
Primeiro: --x  = 1
Segundo: y = 1
4) y = x--
Primeiro: y = x = 2
Segundo: x = x-- = 1

Negação Unária (-)
Este operador nega o seu operando.
x = 2;
y = -x  é igual a  y = -2

9.2. Operadores de Comparação
Um operador de comparação compara seus operandos e retorna um valor booleano. Estes operandos podem ser números ou strings.
Operador Função
== Igual a
!= Diferente de
>
Maior que
>= Maior ou igual a
< Menor que
<= Menor ou igual a


9.3 Operadores de string
O operador de string, sinal de mais, +, serve para concatenar strings. Ele recebe e retorna strings.
Exemplo:
"Olá! "+"Como vái?"  é igual a  "Olá! Como vai?"

9.4. Operadores lógicos
Retornam valores booleanos.

Operador Função
&&
e
|| ou
! não


9.5. Operadores bit a bit
Os operadores bit a bit servem para manipular um número a nível de bit.
Operador Operação Exemplo
& E (AND) (x & y)
| OU (OR) (x | y)
ˆ Ou Exclusivo (XOR) (x ˆ y)
˜ Negação (NOT) ã
>>
Deslocamento à direita (com propagação de sinal)
(x >> 2)
<< Deslocamento à esquerda (preenchimento com zero) (x << 1)
>>> Deslocamento à direita (preenchimento com zero) (x >>> 3)
 
 9.6. Operador de Atribuição
Javascript dá suporte a um método abreviado de escrever operações aritméticas padrão e bit a bit. São os operadores de atribuição, apresentados na tabela abaixo.
Operador Exemplo Equivalente
=
x = 2
não possui
+=
x +=y
x = x + y
-= x -= y  x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
&= x &= y x = x & y
|= x |= y x = x | y
ˆ= x ˆ= y x = x ˆ y
>>= x >>= y x = x >>= y
<<= x <<= y x = x <<= y
>>>= x >>>= y x = x >>>= y


10. Precedência de Operadores


Em Javascript, os operadores têm certa ordem de precedência, ou que operadores são avaliados em primeiro lugar e em que ordem. A ordem de precedência, da mais alta (primeira) à mais baixa (última), é a seguinte:

Chamadas e membros ( ) e [ ]

Negação, incremento e decremento !, ~, -, ++ e --

Multiplicação e divisão *, / e %

Adição e subtração
+ e -

Deslocamentos <<, >> e >>>

Relacionais <, <=, > e >=

Igualdade == e !=

E bit a bit &

OU Exclusivo bit e bit ^
10º
OU bit a bit  |
11º
E Lógico &&
12º
OU Lógico ||


11. Comentário de código


De uma única linha: coloca-se duas barras a direita, //, antes do texto de comentário.
Exemplo:
total = total + 1; //acumula total

De mais de uma linha: colocar-se na sequência, /* na primeira linha e  */ na última linha.
Exemplo:
 /*    aqui começa o comentário
aqui termina o comentário */

12. Declarações


Declaração é uma sequência de palavras-chave, operadores, operandos e/ou expressões terminados por um ponto-e-vírgula.
Todas as declarações em Javascript podem ser agrupadas em uma das seguintes categorias:
Comandos, Declarações Condicionais, Declarações de Laço e Declarações de Manipulação de Objetos.

12.1. Comanados
Declaração de variáveis
A declaração var indica que a palavra imediatamente subsequente é uma variável, à qual é possível atribuir qualquer valor.
Exemplo:
var a;  // declaração
var i=10;  // declaralão e atribuição
var x, y, z=1;  // declaração e atribuição

12.2. Declarações condicionais
Permitem controlar o conjunto de declarações que serão executadas, com base em uma condição (uma expressão ser verdadeira ou falsa). A declaração condicional de Javascript usa as palavras-chave if e else, e switch.

12.2.2. Sintaxe: declaração if e else

if (condição) {
// faz algo se a condição for verdadeira
}
else {
// faz algo se a condição for falsa
}

12.2.3. Sintaxe: declaração switch

switch (arquivo) {
       case “pastaum":
             XYZ = 1
             break
       case “pastadois":
             XYZ = 2
             break
       default:
             XYZ = 3
}

As chaves ( “{ }" ) definem um bloco de declarações que são tratadas e executadas como uma unidade.

12.2.4. Operador ternário ___ ? ___ : ___

condição ? true : false

Exemplo:
<script language="javascript">
    var var_sexo = "M";
    var sexo = ((var_sexo == "M") ? "Masculino" : "Feminino") ;
    document.write(sexo);
</script>

Exemplo:
<script type="text/javascript">
 
 var numero = prompt("Insira um número: ");
 (numero < 10) ? alert ("O número digitado é menor que 10") :
 alert ("O número digitado é igual ou maior que 10");
</script>

12.3. Declarações de laço
Possibilitam repetir a execução de um conjunto de declarações mais de uma vez. As declarações de laço de Javascript usam as palavras-chave for e while.

12.3.1. Sintaxe: declaração for

for (inicialização; condição; incremento) {
declaração 1;
...
declaração n;
}

inicialização: é uma expressão usada para inicializar uma variável contador (a variável utilizada para controlar o número de vezes que o laço é executado);
condição: é uma expressão booleana avaliada a cada repetição do laço, antes do corpo do laço ser executado. Enquanto a expressão for verdadeira, o conteúdo do laço é executado;
incremento: é uma expressão usada para atualizar (através de incremento ou decremento) o contador.

Exemplo:
for (i=1; i <=5; i++) {
      total = total + 1;
}

Na declaração for, pode-se omitir as partes de inicialização, condição e incremento, contanto que as vírgulas permaneçam.

12.3.2. Sintaxe: declaração while

while (condição) {
declaração 1;
...
declaração n;
}

Dentro do corpo de um laço for e while, é possível controlar até quando o laço deve ser executado. Isto é obtido através das declarações break e continue:

break: cancela a execução dos laços for e while, passando o controle para a próxima instrução fora do laço;
continue: em um laço for, ela cancela a execução, passando o controle para a próxima iteração; em um laço while, ela cancela a execução, voltando à condição.

Exemplo do uso de for:
Cáuculo do fatorial de umnúmero
<html>
<head>
<title>Factorial</title>
 
<script language="JavaScript">
function fact(num) {                       // Função de Calculo do Factorial
  var res=1;                               // Variável que vai conter o resultado final
  for (var k=num; k>=1; k--) {             // Cálculo do factorial
     res *= k;                             // Expressão reduzida da multiplicação
  }
  return(res);
}                                          // Fim da função
 
// Programa principal
function main() {        
 
  for (var k=1; k<=10; k++) {               // Cálculo dos factoriais entre 1 e 10
      document.write(k, "! = " , fact(k), "<br/>");
  }
 
  var x;
  x=prompt("Outro factorial a calcular:");
  document.write(x, "! = " , fact(x));
}
</script>
</head>
 
<body>
<h3>Cálculo do Factorial</h3>
 
<script language="JavaScript">
  main();
</script>
</body>
</html>

12.4. Declaração de manipulação de objetos
Javascript é uma linguagem baseada em objetos. Um objeto é uma entidade que contém componentes associados que podem armazenar diversos valores.
Algumas vezes pode ser preciso efetuar operações em todas as propriedades de um objeto, ou, até mesmo, listar as propriedades de um objeto. Estas tarefas são facilmente executadas através das declarações for...in e with. Existe também o operador especial para objetos new e uma palavra-chave especial this.

12.4.1. Operador new
Cria uma nova instância de um objeto.
Sintaxe:
novaVar = new tipoObjeto (parametros);

novaVar: é a variável de objeto criada
tipoObjeto: é o tipo do objeto que está sendo criado (um dos tipos embutidos de Javascript)
parametros: são quaisquer parâmetros de que o objeto precisa para ser criado corretamente


12.4.2. Palavra-chave this
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

12.4.3. Declaração for... in
Repete uma variável sobre todas as propriedades de um objeto. Este é um tipo especial de declaração de laço que varre todas as propriedades de um objeto.
Sintaxe:

for (propriedade in objeto) {
declarações
}

objeto: é o objeto em que se está trabalhando
propriedade: é o nome da propriedade do objeto.
A cada iteração do laço, propriedade recebe uma propriedade diferente do objeto. O laço se encerra quando todas as propriedades de um objeto já foram visitadas.
Exemplo:

<html>
<head><title>Javascript</title></head>
<body>
<h3>Propriedades do Documento</h3>
<hr>
<script language="javascript">
for (propriedade in document)
document.write(propriedade + "<br>");
</script>
</body>
</html>

12.4.4. Declaração with
Indica que, no corpo da declaração, todas as referências a variáveis são propriedades do objeto em questão.
Sintaxe:

with (objeto) {
declarações
}

Exemplo:
with (document){
fgColor = “#000000";
bgColor = “#FFFFFF";
}

O código acima pode ser usado no lugar de:

document.fgColor = “#000000";
document.bgColor = “#FFFFFF";


13. Objetos


13.1. Hierarquia
O nível mais alto de objetos em Javascript consiste naqueles objetos que pertencem a navigator (navegador). Diretamente abaixo deste nível, estão os objetos window (janela). Cada janela tem uma árvore de níveis que se ramifica a partir dela. Estas árvores consistem em location (localização), history (histórico) e document (documento). A cada nível há outros objetos e abaixo da árvore de documentos há outra ramificação. Neste nível, há três objetos array:  forms (formulários), anchor (âncoras) e links.

No browser, os objetos seguem a mesma estrutura hierárquica da página HTML: de acordo com essa hierarquia, os descendentes dos objetos são propriedades desses objetos.
Quando uma página é carregada no browser, ele cria um número de objetos de acordo com o conteúdo da página. Os seguintes objetos são sempre criados, independentemente do conteúdo da página: window, location, history e document.

13.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.
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.

13.3. 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).

13.4. 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:

13.5. 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.

13.6. 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.

13.7. 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.

13.8. 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.

13.9. 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"

13.10. 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.

13.11. 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.

13.12. 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.

13.13. 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 dessas listas dinâmicas que nos permitem selecionar um elemento. Desdobram-se apertando sobre uma seta, a seguir pode-se escolher um elemento e para acabar voltam a se dobrarem. 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>.

13.13.1. 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 aceso 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.


13.14. 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.

13.14.1. 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.

13.14.2. 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.

13.14.3. 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.


13.14.4. 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>

14. 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>