Java Script: março 2016

segunda-feira, 7 de março de 2016

Confirmar o envio de um formulário

<html>
<head>
<title>Estudando JavaScript</title>

<script language="JavaScript">
function confirmar(){
// só permitirá o envio se o usuário responder OK
var resposta = window.confirm("Deseja mesmo" +
" enviar o formulário agora?");
if(resposta)
return true;
else
return false;
}
</script>

</head>
<body>

<form name="cadastro" action="pagina2.asp" method="post"
onsubmit="return confirmar()">
Usuário:<br>
<input type="text" name="nome"><br>
Senha:<br>
<input type="password" name="senha"><br>
<input type="submit" value="Entrar!">
</form>

</body>
</html>

Como formatar um número de acordo com as configurações do sistema

Como exibir um número em notação exponencial

Como obter o índice da primeira ocorrência em uma busca usando expressões regulares

sábado, 5 de março de 2016

Um calendário para o ano inteiro


<HTML>

<HEAD><TITLE>Um calendário para o ano inteiro</TITLE>

</HEAD>
<BODY>

<script language="javascript">
<!--

    document.write("<TD ALIGN=center WIDTH=35>"+day_name+"</TD>")
  function day_title(day_name){
  }
  function fill_table(month,month_length){ 

    document.write("<TD COLSPAN=7 ALIGN=center><B>"+month+"   "+year+"</B><TR>")
    day = 1
    document.write("<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=%3><TR>")

    day_title("Qui")
    day_title("Dom")
    day_title("Seg")
    day_title("Ter")
    day_title("Qua")
    day_title("Sex")

      document.write("<TD>")
    day_title("Sáb")
  
    document.write("</TR><TR>")
    for(var i = 1;i < start_day; i++){
    }
  

    document.write("<TR>")
    for(var i = start_day; i < 8; i++){
      document.write("<TD ALIGN=center>"+day+"</TD>")
      day++
    }
  

        document.write("<TD ALIGN=center>"+day+"</TD>");
    while (day <= month_length) {
      for(var i = 1; i <= 7 && day <= month_length; i++){
        day++;
      }

  year = 2005; // define o ano
      document.write("</TR><TR>");
      start_day = i;
    }
    document.write("</TR></TABLE><BR>");
  }
</script>
<script language="javascript">

  fill_table("Fevereiro",28) // não se esqueça de verificar se o ano é bissexto ou não
  today = new Date("January 1, " + year);
  start_day = today.getDay() + 1;
  fill_table("Janeiro",31)
  fill_table("Março",31)
  fill_table("Abril",30)
  fill_table("Maio",31)

</script>
  fill_table("Junho",30)
  fill_table("Julho",31)
  fill_table("Agosto",31)
  fill_table("Setembro",30)
  fill_table("Outubro",31)
  fill_table("Novembro",30)
  fill_table("Dezembro",31)
</BODY>

</HTML>

Obter a quantidade de dias restantes para o fim do ano

<script type="text/javascript">
<!--
  var hoje = new Date();
  var fimAno = new Date(hoje.getFullYear(), 11, 31);
  var dia = 1000 * 60 * 60 * 24;
  var restantes = Math.ceil((fimAno.getTime() - hoje.getTime()) / (dia));
  document.write('Faltam ' + restantes + ' dias para o fim do ano.');
//-->
</script>

Como usar o objeto Date para exibir a data e hora atual

Como usar o método toLocaleTimeString para exibir a hora de acordo com as configurações do computador do usuário


<script language="javascript">
<!--
  var data = new Date();

  document.write("Horas: " + data.toLocaleTimeString());
//-->

</script>

sexta-feira, 4 de março de 2016

Como usar o método toLocaleTimeString para exibir a hora de acordo com as configurações do computador do usuário

Como usar o método toLocaleString para exibir a data e a hora de acordo com as configurações do computador do usuário

Como obter o valor das horas em um objeto Date

<script language="javascript">
<!--
  var data = new Date();
  var hora = data.getHours();
  document.write("O valor da hora é: " + hora);
//-->
</script>

Como obter o dia da semana em um objeto Date

Como obter a quantidade de milisegundos desde a meia-noite de 1º de janeiro de 1970 UTC

quarta-feira, 2 de março de 2016

Como obter a quantidade de dias para um determinado mês e ano


<script type="text/javascript">
<!--

     return 32 - new Date(ano, mes, 32).getDate();
  function diasNoMes(mes, ano){
  }

  document.write(diasNoMes(10, 2006));
  
  // o mês começa com 0
//-->

</script>

Como construir uma determinada data e hora usando o construtor do objeto Date

Em algumas situações precisamos construir um objeto Date representando uma determinada data e hora. Para isso podemos usar o construtor deste objeto. Veja a sintaxe:

new Date(year, month[, date[, h[, m[, s[, ms]]]]]);

Veja que temos que fornecer os argumemtos na ordem ano, mês, dia, horas, minutos, segundos e milissegundos. Apenas os argumentos para os parâmetros ano e mês são obrigatórios. Veja, por exemplo, como podemos construir a data 01/08/2010:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

// vamos construir a data 01/08/2010

var data = new Date(2010, 7);

// vamos exibir o resultado

document.write("A data é: " + data);

</script>

</body>

</html>

Este trecho de código exibirá o seguinte resultado:

A data é: Sun Aug 1 00:00:00 UTC-0300 2010.

É importante ficar atento à faixa de valores permitida para cada um dos parâmetros:

year - Exigido. Aqui devemos fornecer o ano completo, por exemplo, 1997 (e não 97).

month - Exigido. Devemos fornecer o mês como um inteiro na faixa de 0 a 11 (janeiro é 0 enquanto dezembro é 11).

date - Opcional. Aqui devemos fornecer o dia como um inteiro na faixa de 1 a 31.

hours - Opcional. Devemos fornecer as horas como um inteiro na faixa de 0 a 23.

minutes - Opcional. Devemos fornecer os minutos como um inteiro na faixa de 0 a 59.

seconds - Opcional. Devemos fornecer os segundos como um inteiro na faixa de 0 a 59.

ms - Opcional. Um inteiro na faixa de 0 a 999.

Veja agora um trecho de código no qual construímos a data 14/05/2010 às 17:50:

// vamos construir a data 14/05/2010 às 17:50

var data = new Date(2010, 4, 14, 17, 50);

// vamos exibir o resultado

document.write("A data é: " + data);

</script>

Este código exibirá o seguinte resultado:

A data é: Fri May 14 17:50:00 UTC-0300 2010.

Como adicionar horas a um objeto Date

terça-feira, 1 de março de 2016

Usando o laço do-while da linguagem JavaScript

O laço do..while (também chamado de loop ou laço repita enquanto) da linguagem JavaScript é usado quando queremos repetir uma instrução ou um grupo de instruções ENQUANTO uma condição for satisfeita. Veja sua sintáxe:

do{

// uma instrução ou grupo de instruções

}while(condição);

A condição pode ser qualquer expressão que resulte em um valor boolean (true ou false). Note também que, diferente do laço while (enquanto) o teste condicional do laço do-while é feito DEPOIS de cada iteração (repetição) do laço. Isso faz com que este laço seja executado no mínimo uma vez.

Veja um trecho de código no qual usamos o laço do..while para contar de 0 até 10:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

var i = 0;

do{

document.write(i + "<br>");

i++;

}while(i <= 10);

</script>

</body>

</html>

Ao executarmos este código teremos o seguinte resultado:

Veja que declaramos uma variável de controle i e a inicializamos com o valor 0. No corpo do laço nós exibimos o valor da variável de controle e a incrementamos em 1. Em seguida nós verificamos se seu valor é menor ou igual a 10. Como esta condição é satisfeita, o laço é executado pela segunda vez. Dessa forma o ciclo continua até que o valor da variável de controle seja maior que 10, o que faz com que o laço cesse sua repetição.

Veja agora como modificar o laço do-while anterior para exibir os números de 10 até 0:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

var i = 10;

do{

document.write(i + "<br>");

i--;

}while(i >= 0);

</script>

</body>

</html>

Agora o resultado do código será:

Aprenda a usar o laço for da linguagem JavaScript

O laço for (também chamado de loop for ou laço para) é usado quando queremos repetir uma instrução ou um conjunto de instruções um determinado número de vezes. Este laço é composto de três partes: inicialização, teste de continuidade e incremento ou decremento da variável de controle. Veja:

for(inicialização; teste; incremento/decremento){

instrução ou conjunto de instruções

}

Na parte da inicialização nós podemos inicializar a variável a ser usada para controlar a quantidade de repetições do laço. Na parte do teste de continuidade nós avaliamos uma condição boolean (verdadeiro/falso) para determinar se o laço deve ser interrompido ou continuar sua execução. Na parte de incremento/decremento nós incrementamos ou decrementamos o valor da variável de controle.

Veja um trecho de código no qual usamos o laço for para contar de 0 até 10:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

for(var i = 0; i <= 10; i++){

document.write(i + "<br>");

}

</script>

</body>

</html>

Este código exibirá o seguinte resultado:

Veja que a condição de continuídade do laço é o valor da variável i menor ou igual a 10. Eis agora uma modificação deste código que conta de 10 até 0:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

for(var i = 10; i >= 0; i--){

document.write(i + "<br>");

}

</script>

</body>

</html>

Agora o código exibirá o seguinte resultado:

Agora que já vimos um exemplo do uso deste laço, é importante saber quando e quantas vezes as três partes de um laço for são executadas:

a) A parte de inicialização é executada apenas uma vez, ou seja, na entrada da estrutura do laço.

b) O teste de continuídade é feito ANTES de cada repetição (iteração) do laço. Se o teste de continuída não resultar satisfatório já na primeira repetição, as instruções contidas no laço não serão executadas e o fluxo do código continuará após sua chave de fechamento.

c) A parte de incremento/decremento da variável de controle é feita DEPOIS de cada repetição do laço.

Com exceção do teste de continuídade, as demais partes de um laço for podem conter mais de uma instrução. Quando isso acontece nós as separamos usando vírgulas. Veja um exemplo:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

for(var i = 0, j = 2; i <= 10; i++, j = j + 3){

document.write("i = " + i + "; j = " + j + "<br>");

}

</script>

</body>

</html>

Ao executar este código teremos o seguinte resultado:

i = 0; j = 2

i = 1; j = 5

i = 2; j = 8

i = 3; j = 11

i = 4; j = 14

i = 5; j = 17

i = 6; j = 20

i = 7; j = 23

i = 8; j = 26

i = 9; j = 29

i = 10; j = 32

Saiba mais sobre o objeto window

O objeto window representa a janela do browser, uma janela em um frame ou janela de diálogo contendo um documento HTML. Este objeto fornece várias informações a respeito da janela (name, navigator, location, history, etc.), permite acesso ao documento contido na janela e suporta vários métodos úteis (alert(), confirm(), addEventListener(), attachEvent(), etc).

Veja uma página HTML na qual temos um código JavaScript que acessa a janela atual e usa seu método alert() para exibir uma mensagem ao usuário:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

// vamos exibir uma mensagem ao usuário

window.alert("JavaScript é muito bacana!");

</script>

</body>

</html>

O objeto window pode também representar uma janela contida em um frame ou em um elemento iframe, ou ainda em uma janela secundária (criada com os métodos open(), showModalDialog() ou showModelessDialog()). Eis algumas observações que devem ser bem memorizadas:

a) Se a janela estiver contida em um frame ou elemento iframe, ela é uma janela filha da janela que contém o elemento frame. Para obter a janela mãe só precisamos usar a propriedade parent da janela filha. Veja:

// vamos obter a janela mãe

var janela_mae = window.parent;

</script>

b) Se a janela for aberta por meio dos métodos open(), showModalDialog() ou showModelessDialog(), então a janela que a criou pode ser acessada por meio da propriedade opener.

Os membros da janela atual podem ser acessados diretamente, sem a necessidade de passarmos pelo objeto window, ou seja, podemos usar alert() em vez de window.alert(), ainda que a última forma é a preferida.

O objeto window está disponível para acesso a partir de qualquer ponto de nossos códigos JavaScript. Assim, devemos nos esforçar ao máximo para não termos variáveis com o mesmo nome das propriedades e métodos deste objeto.

Como obter entrada do usuário em seus códigos JavaScript usando o método prompt() do objeto window

O método prompt() do objeto window é usado quando precisamos obter entrada do usuário. Este método exibe uma caixa de mensagem contendo uma mensagem e uma caixa de texto. Veja sua assinatura:

vTextData = window.prompt([sMessage] [, sDefaultValue])

O parâmetro sMessage (opcional) nos permite definir a mensagem que será exibida ao usuário. O parâmetro sDefaultValue permite definir o valor inicial da caixa de texto. Por padrão, este valor é "undefined" no IE e vazio nos demais browsers. Ambos os parâmetros são do tipo string.

O retorno do método prompt() é uma String ou Integer. Se a mensagem for fechada usando-se o botão Cancelar ou o botão de sistema Fechar, o retorno do método será null no Internet Explorer, Firefox, Google Chrome e Safari, enquanto no Opera o retorno é "undefined".

Veja uma página HTML na qual usamos o método prompt() para solicitar que o usuário informe seu nome. Em seguida usamos o retorno para exibir uma mensagem de boas-vindas:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

// vamos obter o nome do usuário

var nome = window.prompt("Seu nome:", "");

// vamos verificar se o usuário informou alguma coisa

if(nome != null){

window.alert("Bem-vindo(a) ao site, " + nome);

}

else{

window.alert("Você não informou seu nome.");

}

</script>

</body>

</html>

Veja agora um trecho de código no qual pedimos ao usuário que informe um valor inteiro:

<html>

<head>

<title>Estudos JavaScript</title>

</head>

<body>

// vamos solicitar um valor inteiro

var numero = window.prompt("Informe um inteiro de 0 a 10:", "0");

// vamos verificar se o usuário informou um valor menor ou igual a 5

if(numero != null){

if(numero <= 5){

window.alert("O número informado é menor ou igual a 5");

}

else{

window.alert("O número informado é maior que 5");

}

else{

window.alert("Você não informou um valor.");

}

</script>

</body>

</html>

Como criar um tabela (elemento HTML table) dinamicamente, contendo linhas e colunas

Em algumas situações nós precisamos criar tabelas dinamicamente. Nesta dica eu mostro como isso pode ser feito. O primeiro passo é criar o elemento HTML table com uma chamada ao método createElement() do objeto document. Em seguida usamos este mesmo método para criar o elemento tbody da tabela. Finalmente usamos os métodos insertRow() do objeto tbody e insertCell() do objeto tr (que representa cada linha da tabela) para criar as linhas e colunas.

Veja o código completo para o exemplo:

<html>

<head>

<title>Estudos JavaScript</title>

function criarTabela(){

// vamos criar o elemento HTML table

var tabela = document.createElement("table");

tabela.border = "1px";

tabela.cellSpacing = "0px";

tabela.cellPadding = "3px";

// vamos criar o corpo da tabela, ou seja, o tbody

var corpo = document.createElement("tbody");

tabela.appendChild(corpo);

// vamos criar três linhas contendo quatro células cada uma

for(var i = 0; i < 3; i++){

var linha = corpo.insertRow(-1);

for(var j = 0; j < 4; j++){

var celula = linha.insertCell(-1);

celula.innerHTML = "Célula " + i + ", " + j + "";

}

// vamos anexar a tabela recém-criada a um elemento div

var container = document.getElementById("container");

container.appendChild(tabela);

}

</script>

</head>

<body>

<br>

<button onclick="criarTabela()">Criar tabela dinamicamente</button>

</body>

</html>