Você está sendo redirecionado para a nova página do Brasil High Tech
Mostrando postagens com marcador JavaScript. Mostrar todas as postagens
Mostrando postagens com marcador JavaScript. Mostrar todas as postagens

02 abril, 2010 | Comente

Objeto Math e suas Aplicações





O Objeto Math é um objeto intrínseco do sistema JavaScript. Ele não deve ser criado explicitamente pelo programador porque é o próprio sistema que o cria automaticamente ao arrancar. Podemos fazer uso de um objeto próprio para cálculos matemáticos chamado Math que possui constantes, métodos para calcular potências, raízes, arredondamentos, funções trigonométricas, maneiras de encontrar o menor e o maior valor, além de um gerador de números randômicos.

Propriedades do objeto Math

E - Contém a base dos logaritmos naturais (número de Euler)
LN2 - Contém o logaritmo natural de 2 (base E)
LN10 - Contém o logaritmo natural de 10 (base E)
LOG2E - Contém o logaritmo de E na base 2
LOG10E - Contém o logaritmo de E na base 10
PI - Contém o número PI (3.1415927...)
SQRT1_2 - Contém 1 a dividir pela raiz quadrada de 2
SQRT2 - Contém a raiz quadrada de 2

Métodos do objeto Math

Todos os métodos do objeto Math aceitam um, dois ou nenhum números como argumentos e devolvem um número como resultado.

abs(x) - Devolve o valor absoluto de x
acos(x) - Devolve o valor do arco (radianos) cujo cosseno é x
asin(x) - Devolve o valor do arco (radianos) cujo seno é x
atan(x) - Devolve o valor do arco (radianos) cuja tangente é x
atan2(x, y) - Devolve o valor do ângulo formado pelo eixo dos xx com a linha que une a origem dos eixos ao ponto de coordenadas (x, y)
ceil(x) - Devolve o número inteiro mais próximo de x e não inferior a x
cos(x) - Devolve o cosseno de x
exp(x) - Devolve o valor da exponencial de x (E elevado à potência x)
floor(x) - Devolve o número inteiro mais próximo de x e não superior a x
log(x) - Devolve o logaritmo natural de x
max(x,y) - Devolve o maior dos números (x, y)
min(x,y) - Devolve o menor dos números (x, y)
pow(x,y) - Devolve o valor x elevado à potência y
random() - Devolve um número aleatório situado entre 0 e 1 (não aceita argumentos)
round(x) - Devolve o número inteiro mais próximo de x
sin(x) - Devolve o seno de x
sqrt(x) - Devolve a raiz quadrada de x
tan(x) - Devolve a tangente de x

Exemplos de Aplicação

Ler os valores das constantes pré-definidas (propriedades)

<html>
<head>
<title></title>
</head>
<body style="font-family:verdana">
<p>
Estas são as constantes que podemos obter como propriedades do
objeto Math:
</p>
<script type="text/javascript">
<!--
document.write("Math.E = "+Math.E+"<br>")
document.write("Math.LN2 = "+Math.LN2+"<br>")
document.write("Math.LN10 = "+Math.LN10+"<br>")
document.write("Math.LOG2E = "+Math.LOG2E+"<br>")
document.write("Math.LOG10E = "+Math.LOG10E+"<br>")
document.write("Math.PI = "+Math.PI+"<br>")
document.write("Math.SQRT1_2 = "+Math.SQRT1_2+"<br>")
document.write("Math.SQRT2 = "+Math.SQRT2+"<br>")
// -->
</script>
</body>
</html>




Arredondar um número para o valor inteiro mais próximo (método round() )

<html>
<head>
<title></title>
</head>
<body>
O valor de 69.25 arredondado para as unidades é
<script type="text/javascript">
<!--
document.write(Math.round(69.25))
// -->
</script>
</body>
</html>


Números aleatórios distribuídos entre 0 e 1(método random() )

<html>
<head>
<title></title>
</head>
<body>
<p>
A cada atualização da página obtém-se um número diferente
</p>
<script type="text/javascript">
<!--
document.write(Math.random())
// -->
</script>
</body>
</html>


Gerar números aleatórios inteiros distribuídos entre 0 e 10

<html>
<head>
<title></title>
</head>
<body>
<p>
A cada atualização da página obtém-se um número diferente
</p>
<script type="text/javascript">
<!--
no=Math.random()*10
document.write(Math.floor(no))
// -->
</script>
</body>
</html>


Escolher o maior de dois números (método max() )

<html>
<head>
<title></title>
</head>
<body>
O maior dos números (12, 7) é
<script type="text/javascript">
<!--
document.write(Math.max(12,7))
// -->
</script>
</body>
</html>


Escolher o menor de dois números (método min() )

<html>
<head>
<title></title>
</head>
<body>
O menor dos números (12, 7) é
<script type="text/javascript">
<!--
document.write(Math.min(12,7))
// -->
</script>
</body>
</html>


Converter temperaturas de graus Celsius para Fahrenheit e vice versa (Veja este artigo também)

<html>
<head>
<script type="text/javascript">
<!--
function celsius_para_Fahrenheit()
{
var F=parseInt(document.getElementById("celsius").value)*9/5+32
document.getElementById("fahrenheit").value=Math.round(F)
}
function fahrenheit_para_Celsius()
{
var C=(parseInt(document.getElementById("fahrenheit").value) - 32)*5/9
document.getElementById("celsius").value=Math.round(C)
}
// -->
</script>
<title></title>
</head>
<body>
<p>
Escreva em qualquer um dos campos de inserção de texto.
Depois de fazer entrar com um valor numérico num dos campos
pressione a tecla "Enter" para que ele seja convertido
para as unidades do outro campo.
</p>
<table>
<tr>
<td>
<form action="javascript:celsius_para_Fahrenheit()">
<input id="celsius" size="3"> graus Celsius equivalem a
</form>
</td>
<td width="20"> </td>
<td>
<form action="javascript:fahrenheit_para_Celsius()">
<input id="fahrenheit" size="3"> graus Fahrenheit
</form>
</td>
</tr>
</table>
<p>
A utilização do método Math.round() é necessária
porque queremos valores inteiros para as temperaturas.
</p>
</body>
</html>




Aff! Dá para imaginar o tempo que levei preparando este mega arttigo, mas vale a pena aprofundar um pouco mais quande se refere a Objetos como vimos nos artigos sobre Objeto Array e Objeto Date, se quer saber mais sobre o Objeto Math recomendo um site muito bom para quem quer aprender a programar, o site é TI Expert.net, este link te leva a uma página onde poderá aprender Raízes e Potências, Arredondamentos como já vimos aqui, Trigonometria, Maior e Menor e Número Randômico.

Até a proxima!

Continue Lendo...

Mais |

16 março, 2010 | Comente

JavaScript - Métodos do objeto Date



Aula de JavaScript

Olá pessoal, depois de uma boa pausa estou de volta com mais artigos sobre JavaScript, e hoje vamos dar continuidade ao artigo passado, Objeto Date, vamos aprofundar um pouco mais e entender os metodos deste objeto. Então é de suma importancia que tenham lido o artigo anterior pois vamos usar para dar as descrições dos métodos.

Não é nada de mais, será apenas uma enorme lista com as funções, vamos lá.

getDate() Devolve o dia do mês (de 1 a 31) que está guardado no objeto Date
getDay() Devolve o dia da semana (de 0=Domingo até
6=Sábado) guardado no objeto Date
getMonth() Devolve o mês (de 0=Janeiro até 11=Dezembro) guardado no objeto Date
getFullYear() Devolve o valor completo do ano (quatro dígitos) guardado no objeto Date
getYear() Devolve o valor incompleto do ano (apenas dois dígitos) guardado no objeto Date. Não use este método, use getFullYear em seu lugar.
getHours() Devolve o valor da hora (de 0 a 23) guardada no objeto Date
getMinutes() Devolve o valor dos minutos (de 0 a 59) guardados no objeto Date
getSeconds() Devolve o valor dos segundos (de 0 a 59) guardados no objeto Date
getMilliseconds() Devolve o valor dos milisegundos (de 0 a 999) guardados no objeto Date
getTime() Devolve a quantidade de milisegundos decorridos desde as zero horas do dia 1 de Janeiro de 1970 até à data que está guardada no objeto Date
getTimezoneOffset() Devolve a diferença de tempo entre o fuso horário do computador que está a ser usado e o Tempo Médio de Greenwich ("Greenwich Mean Time", ou GMT)
getUTCDate() Devolve o dia do mês (de 1 a 31) guardado no objeto Date medido no padrão de tempo universal (UTC)
getUTCDay() Devolve o dia da semana (de 0 a 6) guardado no objeto Date medido no padrão de tempo universal(UTC)
getUTCMonth() Devolve o valor do mês (de 0 a 11) guardado no objeto Date medido no padrão de tempo universal (UTC)
getUTCFullYear() Devolve o valor completo do ano (com quatro dígitos) guardado no objeto Date medido no padrão de tempo universal (UTC)
getUTCHours() Devolve a hora (de 0 a 23) guardada no objeto Date medida no padrão de tempo universal (UTC)
getUTCMinutes() Devolve o valor dos minutos (de 0 a 59)guardados no objeto Date medidos no padrão de tempo universal (UTC)
getUTCSeconds() Devolve o valor dos segundos (de 0 a 59)guardados no objeto Date medidos no padrão de tempo universal (UTC)
getUTCMilliseconds() Devolve o valor dos milisegundos (de 0 a 999)guardados no objeto Date medidos no padrão de tempo universal (UTC)
setDate(dia_mês) Acerta o valor do dia (de 1 a 31) do mês guardado no objeto Date
setFullYear(ano) Acerta o valor do ano (com quatro dígitos)guardado no objeto Date
setHours(horas) Acerta o valor da hora (de 0 a 23) guardada no objeto Date
setMilliseconds(milisegundos) Acerta o valor dos milisegundos (de 0 a 999)guardados no objeto Date
setMinutes(minutos) Acerta o valor dos minutos (de 0 a 59) guardados no objeto Date
setMonth(mês) Acerta o valor do mês (de 0=Janeiro a 11=Dezembro) guardado no objeto Date
setSeconds(segundos) Acerta o valor dos segundos (de 0 a 59)guardados no objeto Date
setTime(data_numérica) Acerta a data e a hora guardadas no objeto Date para o valor correspondente às zero horas do dia 1 de Janeiro de 1970 mais o número de milisegundos que é fornecido como argumento do método
setYear(ano) Acerta o valor do ano guardado no objeto Date. Não use este método, use antes o método setFullYear.
setUTCDate(dia_mês) Acerta o valor do dia (de 1 a 31) do mês guardado no objeto Date usando o padrão de tempo universal (UTC)
setUTCDay(dia_semana) Acerta o valor do dia da semana (de 0=Domingo a 6=Sábado) guardado no objeto Date usando o padrão de tempo universal (UTC)
setUTCMonth(mês) Acerta o valor do mês (de 0=Janeiro a 11=Dezembro) guardado no objeto Date usando o padrão de tempo universal (UTC)
setUTCFullYear(ano) Acerta o valor do ano (com quatro dígitos) guardado no objeto Date
setUTCHour(horas) Acerta o valor da hora (de 0 a 23) guardada no objeto Date usando o padrão de tempo universal (UTC)
setUTCMinutes(minutos) Acerta o valor dos minutos (de 0 a 59) guardados no objeto Date usando o padrão de tempo universal (UTC)
setUTCSeconds(segundos) Acerta o valor dos segundos (de 0 a 59)guardados no objeto Date usando o padrão de tempo universal (UTC)
setUTCMilliseconds(milisegundos) Acerta o valor dos milisegundos (de 0 a 999) guardados no objeto Date usando o padrão de tempo universal (UTC)
toGMTString() Devolve uma representação textual (a data e a hora escritas por extenso) usando como referência o fuso horário do Tempo Médio de Greenwich (GMT)
toLocaleString() Devolve uma representação textual (a data e a hora escritas por extenso) no fuso horário do computador local.
toUTCString() Fornece uma representação textual (a data e a hora escritas por extenso) da data contida no objeto Date medida no padrão UTC.

Para quem estiver com alguma dúvida sobre o que é este padrão UTC que foi citado várias vezes, UTC quer dizer: Coordinated Universal Time ou Tempo Universal Coordenado em português. É o fuso horário de referência a partir do qual se calculam todas as outras zonas horárias do mundo.

Por hoje é só, até mais pessoal!

Continue Lendo...

Mais |

09 fevereiro, 2010 | Comente

Aula de Javascript - Objeto Date





O objeto Date permite-nos ler, construir e realizar operações com datas e horas.

Datas numéricas e datas de texto

Em JavaScript nós podemos definir um conjunto data/hora por extenso ou através de um valor numérico. A definição por extenso pode ser feita de várias formas, como ilustra a seguir:

Fri, 21 Nov 2003 10:43:34 UTC
Tue Nov 25 14:45:42 UTC 2003
Tue, 25 Nov 2003 14:48:21 GMT
Tue Nov 25 2003 14:46:37 GMT+0000


A outra forma que podemos usar para definir um conjunto data/hora usa como ponto de referência as zero horas do dia 1 de Janeiro de 1970. Para definirmos uma data e uma hora usando esta forma nós indicamos o número de milisegundos que decorreram entre as zero horas de 1 de Janeiro de 1970 e a data que queremos definir. Se usarmos um valor negativo estaremos indicando uma data anterior ao ponto de referência.

A seguir temos exemplos desta forma de definir datas:

//1069772056710 equivale a Tue, 25 Nov 2003 14:54:16 UTC
//2237468559000 equivale a Sun Nov 25 2040 15:02:39 GMT+0000


<html>
<body>
<script type="text/javascript">
<!--
// 1069772056710 equivale a Tue, 25 Nov 2003 14:54:16 UTC
// 2237468559000 equivale a Sun Nov 25 2040 15:02:39 GMT+0000
var data1=new Date(1069772056710)
var data2=new Date("Tue, 25 Nov 2003 14:54:16 UTC")
document.write("data1 = "+data1.toLocaleString())
document.write("<br>")
document.write("data2 = "+data2.toLocaleString())
document.write("<br><br>")
var DATA1=new Date(2237468559000)
var DATA2=new Date("Sun Nov 25 2040 15:02:39 GMT+0000")
document.write("DATA1 = "+DATA1.toLocaleString())
document.write("<br>")
document.write("DATA2 = "+DATA2.toLocaleString())
-->
</script>
</body>
</html>




Data1 = new Date() - Cria um objeto com a data e a hora atuais

Data2 = new Date(valorData) - Cria objeto com a data e hora indicadas por valorData (texto ou numérica)

oData3 = new Date(ano, mês, dia[, horas[, minutos[,segundos[,milisegundos]]]]) - Cria um objeto com a data indicada. É obrigatório indicar o ano, o mês e o dia. As horas, os minutos, os segundos e os milisegundos são facultativos.

No próximo artigos vamos conhecer os Métodos do objeto Date, será uma lista com todos métodos e suas descrições, meio chato, mas necessário.

Continue Lendo...

Mais |

01 fevereiro, 2010 | Comente

Curso de Javascript - Objeto Array



Olá pessoal, estava demorando, mas enfim saindo mais um artigo de Javascript e hoje vamos falar um pouco sobre objeto Array, em uma postagem anterior falei um pouco sobre Cadeias de variáveis Array, se você ainda não leu, vale a pena conferir para um melhor entendimento deste assunto.

Um objeto Array serve para definir um tipo de variável que é capaz de guardar sob o mesmo nome uma quantidade de valores numéricos, de texto ou de objetos. Este objeto pode ser considerado como uma lista, ou cadeia de itens, em que cada item é uma variável ou um objeto. O acesso a cada um dos itens da lista faz-se recorrendo ao seu índice, que é o número de ordem do item na lista.

Criação de um novo Array

// um Array cujo tamanho e conteúdo serão definidos mais tarde
var c = new Array()
// um Array com espaço reservado para N elementos
// e cujo conteúdo será definido mais tarde
var a = new Array(N)
// um Array com N+1 elementos definidos logo de início
var b = new Array(elemento_0, elemento_1, ..., elemento_N)


Propriedades do objeto Array

length - Fornece o número de elementos que estão no Array. O valor desta propriedade é estabelecido quando o Array é criado, mas pode crescer se formos juntando mais elementos ao Array.

Métodos do objeto Array

join() - Devolve uma String (variável de texto) que representa o conteúdo do Array
reverse() - Devolve um novo Array em que a ordem dos elementos está invertida (em particular temos que o elemento que tinha o índice zero passa a ter o índice mais alto e viceversa);
sort() - Devolve um novo Array em que os elementos estão ordenados (geralmente por ordem crescente).

Coleções

O termo coleção usa-se normalmente para designar um Array cujos itens são objetos todos do mesmo tipo. O conceito de coleção é muito usado em HTML Dinâmico para designar grupos de objetos do mesmo tipo. Um exemplo disto é a coleção images, que é um Array cujos itens são os objetos que representam as imagens que estão no documento (cada imagem corresponde um objeto Image.)

Exemplos de Aplicação:

Vamos construir um Array para guardar nomes a frutas como exemplo:

<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
<!--
var fruta = new Array(6)
fruta[0] = "Laranja"
fruta[1] = "Banana"
fruta[2] = "Morango"
fruta[3] = "Abacaxi"
fruta[4] = "Maçã"
fruta[5] = "Kiwi"
document.write("Este Array tem "+fruta.length+" elementos<br><br>")
for (var i=0; i<fruta.length; i++)
{
document.write(fruta[i] + "<br>")
}
// -->
</script>
</body>
</html>

Curso de Javascript - Objeto Array


No próximo post vamos aprender a organizar os elementos de um Array, poderia colocar tudo neste post, mas dúvido que alguém iria ler até o final. Até a próxima!

Continue Lendo...

Mais |

14 dezembro, 2009 | Comente

Script para verificar o nível de segurança de senhas




Hoje vamos fazer um script que pode te ajudar a definir a segurança de uma determinada senha, e inclusive você pode disponibilizá-lo em seu site para que seus visitantes façam o teste e escolha uma senha segura.

Para valorizar o grau de segurança de uma senha vamos levar em conta estas pontuações sobre diferentes conceitos:

letras e números: +30%
maiúsculas e minúsculas: +30%
entre 4 e 5 caracteres: +10%
entre 6 e 8 caracteres: +30%
mais de 8 caracteres: +40%

Para controlar a segurança, vamos criar esta função:

function seguranca_senha(senha){
var seguranca = 0;
if (senha.length!=0){
if (tem_numeros(senha) && tem_letras(senha)){
seguranca += 30;
}
if (tem_minusculas(senha) && tem_maiusculas(senha)){
seguranca += 30;
}
if (senha.length >= 4 && senha.length <= 5){ seguranca += 10; }else{ if (senha.length >= 6 && senha.length <= 8){ seguranca += 30; }else{ if (senha.length > 8){
seguranca += 40;
}
}
}
}
return seguranca
}


e agora teremos que ter um formulario que irá pedir a senha, então usaremos este:

<form>
Senha: <input type="password" size=15 name="senha" onkeyup="mostra_seguranca_senha(this.value, this.form)">
<i>seguranca:</i> <input name="seguranca" type="text" style="border: 0px; background-color:ffffff; text-decoration:italic;" onfocus="blur()">
</form>


Temos 1 campo INPUT de tipo PASSWORD onde escreveremos a senha, um evento ONKEYUP que se executa quando o usuário clica uma tecla

Agora vamos a função de segurança da senha que irá atualizar o valor de segurança assim que ela for escrita:

function mostra_seguranca_senha(senha,formulario){
seguridad=seguranca_senha(senha);
formulario.seguranca.value=seguranca + "%";
}


Montando tudo no temos o seguinte código que fará a verificação se segurança de sua senha:

<script>
var numeros="0123456789";
var letras="abcdefghyjklmnñopqrstuvwxyz";
var letras_mayusculas="ABCDEFGHYJKLMNÑOPQRSTUVWXYZ";

function tiene_numeros(texto){
for(i=0; i<texto.length; i++){
if (numeros.indexOf(texto.charAt(i),0)!=-1){
return 1;
}
}
return 0;
}

function tiene_letras(texto){
texto = texto.toLowerCase();
for(i=0; i<texto.length; i++){
if (letras.indexOf(texto.charAt(i),0)!=-1){
return 1;
}
}
return 0;
}

function tiene_minusculas(texto){
for(i=0; i<texto.length; i++){
if (letras.indexOf(texto.charAt(i),0)!=-1){
return 1;
}
}
return 0;
}

function tiene_mayusculas(texto){
for(i=0; i<texto.length; i++){
if (letras_mayusculas.indexOf(texto.charAt(i),0)!=-1){
return 1;
}
}
return 0;
}

function seguridad_clave(clave){
var seguridad = 0;
if (clave.length!=0){
if (tiene_numeros(clave) && tiene_letras(clave)){
seguridad += 30;
}
if (tiene_minusculas(clave) && tiene_mayusculas(clave)){
seguridad += 30;
}
if (clave.length >= 4 && clave.length <= 5){
seguridad += 10;
}else{
if (clave.length >= 6 && clave.length <= 8){
seguridad += 30;
}else{
if (clave.length > 8){
seguridad += 40;
}
}
}
}
return seguridad
}

function muestra_seguridad_clave(clave,formulario){
seguridad=seguridad_clave(clave);
formulario.seguridad.value=seguridad + "%";
}
</script>

<form>
Senha: <input type="password" size=15 name="clave" onkeyup="muestra_seguridad_clave(this.value, this.form)"> <i>segurança:</i> <input name="seguridad" type="text" style="border: 0px; background-color:ffffff; text-decoration:italic;" onfocus="blur()">
</form>
Continue Lendo...

Mais |

04 dezembro, 2009 | Comente

JavaScript - Cadeias de variáveis (Array)




Uma cadeia de variáveis (objeto Array) é um objeto capaz de guardar muitos
valores, tantos quanto a memória disponível na máquina permitir. Cada uma das
variáveis que compõem o array possui um índice. Ilustremos isto com um exemplo:

var frutas_tropicais = new Array("Goiaba", "Manga", "Maracujá");
var frutas_nacionais = new Array(3);
frutas_nacionais[0] = "Maçã";
frutas_nacionais[1] = "Cereja";
frutas_nacionais[2] = "Laranja";


Ao declararmos a variável frutas_tropicais nós declaramos o Array e
atribuímos-lhe os valores numa única operação. Já no segundo caso primeiro
declaramos o Array e só depois definimos os valores que ele deve conter. Neste caso
temos que a variável frutas_tropicais[2] possui o valor "Maracujá" e a variável
frutas_nacionais[0] possui o valor "Maçã".
Em JavaScript as variáveis não têm um tipo definido, por isso um array pode
conter valores de tipos diferentes que podemos alterar sempre que necessário, como
se mostra a seguir:

<html>
<body>
<script type="text/javascript">
<!--
var sortido = new Array(8975, "Livro", false, -27.765, "Bolachas");
document.write("Sortido = " + sortido);
sortido[0] = 0.0004763;
sortido[2] = true;
sortido[6] = "Caderno";
document.write("<br>");
document.write("Sortido = " + sortido);
-->
</script>
</body>
</html>


Se atribuirmos um valor a um elemento do array com um índice mais alto do
que o seu comprimento, o sistema JavaScript resolve o problema aumentando o
tamanho do array até chegar ao índice pretendido. É isso que acontece no exemplo
anterior quando se chega à linha que tem sortido[6] = "Caderno"; Os arrays são
objetos, e entre as suas propriedades conta-se a propriedade length, que nos dá o
número de elementos (variáveis) que ele contém num determinado momento. Assim,
se ao exemplo anterior juntarmos uma linha com o seguinte código:

var numeroDeElementos = sortido.length;

a variável numeroDeElementos ficará com o valor 7 (repare que inserimos um
elemento adicional com o índice 6, o que fez crescer o array). De forma análoga se
usarmos frutas_nacionais.length iremos obter 3.
Continue Lendo...

Mais |

30 novembro, 2009 | Comente

JavaScript - Números com vírgula flutuante



Tutorial de JavaScript
Olá pessoal, hoje vamos voltar a nossa postagens normais de JavaScript que é mais teóricas, que é mais voltada para quem quer aprender um pouco mais detalhado esse assunto, andei postando uns scripts já prontos, para quem já esta acostumado com essa linguagem não tem muitas dúvidas de como foram feitos, mas quem é iniciante não consegue analizar os códigos e saber qual a função dos mesmos, por isso quando resolvi escrever sobre o esta linguagem, quis ser mais teorico que pratica, quando estiver bem avançado partiremos pra praticar e criar nossos proprios scripts ok, então vamos para o nosso tutorial que hoje vamos falar de Números com vírgula flutuante, e sucessivamente, Valores lógicos, Expressões de texto e Caracteres de escape.

Uma expressão literal com vírgula flutuante representa um número que não é
inteiro mas que contém uma parte inteira e uma parte fracionária. Os números 21.37 e
-0.0764 são exemplos disto
. A representação que a máquina constrói para estes números baseia-se na notação científica. Por exemplo, o número -7645.4532 é igual a
-7.64532 multiplicado por 10 elevado a 3, e escreve-se como -7.6454532E3, em que
E3 representa 10 elevado a 3. Um outro exemplo é o número 0.00045431, que é
representado na forma 4.5431E-4, ou seja 4.5431 multiplicado por 10 elevado a -4.
Esta representação é construída automaticamente pela máquina, o você pode
escrever o número na forma que mais lhe agradar.

Valores lógicos (booleanos)

Estas expressões podem assumir apenas dois valores: true (verdadeiro) e false
(falso).

Expressões de texto

Uma expressão de texto é composta por zero ou mais caracteres colocados entre
aspas ("), por exemplo "esta é uma expressão de texto", ou entre apóstrofos ('), por exemplo 'esta é outra expressão de texto'. Se começarmos a expressão com aspas temos a obrigação de usar aspas para a terminar, e se a iniciarmos com um apóstrofo temos de usar outro apóstrofo para a terminar.

Além dos caracteres normais, as expressões de texto podem conter os
caracteres especiais apresentados na lista seguinte:

Caractere Significado
\b backspace
\f form feed
\n new line
\r carriage return
\t tab
\\ backslash


Cada um destes caracteres produz o mesmo resultado que se obtém
acionando a tecla indicada na segunda coluna. Assim o caractere \b equivale a acionar
a tecla backspace (apagar o caractere à esquerda). O caractere \n provoca uma
mudança de linha tal como a tecla "enter". O caractere \ é usado como prefixo dos
outros caracteres especiais, o que faz também dele um caractere especial. Por isso,
para obtermos este caractere temos de temos escrevê-lo duas vezes (\\). Se o
escrevermos uma única vez ao invés de o obtermos estaremos tentando introduzir um
outro caractere especial e o resultado será diferente do que pretendemos

Caracteres de escape

Se o caractere que vem a seguir a \ não pertencer à lista anterior o seu efeito
será nulo, mas há duas exceções: as aspas (") e o apóstrofo ('). Se pretendemos
escrever aspas dentro de uma expressão de texto temos de colocar o caractere \
antes delas, como mostra o exemplo seguinte:

<html>
<body>
<script type="text/javascript">
<!--
var texto = "Eu Estou Aprendendo \"javascript\" no Brasil High Tech.";
document.write(texto);
-->
</script>
</body>
</html>

Se ao invés de usar aspas usarmos apenas apóstrofos teremos:

Porém, a melhor solução para este problema não é nenhuma das anteriores.
Se usarmos apóstrofos como caracteres delimitadores de uma string então passamos
a poder usar as aspas como parte do conteúdo sem qualquer problema, como se
mostra a seguir:

var texto = 'Eu Estou Aprendendo "javascript" no Brasil High Tech.';
document.write(texto);


Mas se quisermos colocar apóstrofos no conteúdo a melhor forma de evitarmos
os problemas consiste em usar aspas como caracteres delimitadores da string, como
se mostra a seguir:

var texto = "Eu Estou Aprendendo 'javascript' no Brasil High Tech.";
document.write(texto);


É isso aí pessoal, até a proxima!
Continue Lendo...

Mais |

28 novembro, 2009 | Comente

Link para adicionar seu site aos favoritos do Visitante



Você provavelmente já visitou um site e lá havia a opção de adicionar aos favoritos apenas clicando em um link, já pensou como aquilo é feito? Se não sabe, vamos botar a mão na massa e aprender pra calar a boca daquele teu colega que te sacaneou dizendo que você não sabia fazer essa coisinha boba. Com esse recurso o seu site ficará mais interativo e pode ganhar mais visitas. Engraçado, eu ainda não coloquei no meu blog, passou despercebido por mim.

vamos começar:

A estrutura de um link é essa:

<a href="http://brasilho=ightech.blogspot.com">Link para o BHT</a>

Acho que muitos sabem como é a estrutura de um link, mas se não, vamos ao passo-a-passo;

<a é a abertura da tag para os links

href é a parte onde você colocará o site que receberá o link (este fica entre aspas).

</a> é a tag de fechamento.O texto ancora fica antes desta tag.

Agora vamos montar o codigo javaScript que irá dizer para o navegador adicionar a pagina aos favoritos:

onclick="window.external.AddFavorite('Seu site','Nome que aparecerá nos favoritos');

Com o codigo pronto, vamos montar o links para favoritos.

<a href="#" onclick="window.external.AddFavorite('http://brasilhightech.blogspot.com','Brasil High Tech');">Adicionar aos favoritos</a>

Note que depois de href o link foi substituido por #.

É isso aí pessoal, agora você já sabe fazer essa coisinha bobinha ai que pode te ajudar a ter visitantes fixos.
Continue Lendo...

Mais |

21 novembro, 2009 | Comente

Criando Animação em JavaScript



Animação em JavaScript

Você já deve estar acostumado a criar gifs animados no Flash, photoshop ou outro editor que faça o serviço, mas você já tentou criar uma animação usando JavaScript? Pois é, vamos criar uma animação bem simples, com códigos também simples no passo-a-passo pra você entender direitinho como tudo foi feito, sempre estou colocando um link no fim da postagem para que você possa baixar o código pronto pra você ter uma idéia de como fica no final. Vamos começar por criar o código HTML que será posteriormente manipulado pelo JavaScript.

Primeiro, criamos uma DIV mestre:

<div id="masterDiv" style="position: relative; width: 120px;">


Esta irá conter 9 divs outras que vamos usar para a animação:

<div id="1" style="position:relative; width:30px; height:30px; background-color:red; float:left; margin:5px"></div>
<div id="2" style="position:relative; width:30px; height:30px; background-color:blue; float:left; margin:5px"></div>
<div id="3" style="position:relative; width:30px; height:30px; background-color:green; float:left; margin:5px"></div><br />
<div id="4" style="position:relative; width:30px; height:30px; background-color:green; float:left; margin:5px"></div>
<div id="5" style="position:relative; width:30px; height:30px; background-color:red; float:left; margin:5px"></div>
<div id="6" style="position:relative; width:30px; height:30px; background-color:blue; float:left; margin:5px"></div><br />
<div id="7" style="position:relative; width:30px; height:30px; background-color:blue; float:left; margin:5px"></div>
<div id="8" style="position:relative; width:30px; height:30px; background-color:green; float:left; margin:5px"></div>
<div id="9" style="position:relative; width:30px; height:30px; background-color:red; float:left; margin:5px"></div><br />


E, então, fechamos a div mestre:

</div>


Temos de definir o evento que irá disparar a função que estamos prestes a declarar, para fazer a função de início de carregamento da página, quando nós vamos especificá-la na tag body.

<body onload="animate()">



Usamos CSS para definir o fundo da div e propriedade de cor, de tal maneira que cria um padrão; divs fila de baixo são compensados por 1 div. Agora estamos prontos para escrever o function.Because JavaScript que queremos utilizar a função de mudar a cor da div de fundo em uma determinada cor, temos que usar a declaração If / Else. Vou associar uma variável "a" com o estado da matriz (para o estado padrão, "a" será 0 (zero)). A animação vai mudar mais e mais, porque a função contém um laço, então temos que declarar a variável "um" fora da função, caso contrário, cada vez que a função será chamada, "a" será atribuído a 0 (zero).

<script type="text/javascript">
var a=0
function animate()
{

Agora, temos de declarar e iniciar algumas matrizes com todas as combinações possíveis de cor uma linha pode ter.

colors= new Array()
colors[0]="green"
colors[1]="red"
colors[2]="blue"
colors2= new Array()
colors2[0]="blue"
colors2[1]="green"
colors2[2]="red"
colors3= new Array()
colors3[0]="red"
colors3[1]="blue"
colors3[2]="green"


Temos também que declarar 3 variáveis mais (o número da primeira div em cada linha), as variáveis que iremos utilizar para identificar os divs ao mudar as cores.

var b=1
var c=4
var d=7


Ao mudar de cores, temos de saber qual é o patern atual, isto é, quando usamos a variável. Nós sabemos o que tem o padrão da matriz, quando a página é carregada, assim nós podemos agora escrever como as cores mudarão.
Vamos escrever um loop que irá mover as cores em cada linha uma div à direita utilizando as variáveis e matrizes, temos declarado anteriormente:

if (a==0)
{
for (i=0;i<3;i++) backgroundcolor="colors[i]" backgroundcolor="colors2[i] document.getElementById(d).style.backgroundColor=colors3[i]


Para alterar a cor de todos os divs, temos que incrementar as variáveis B, C e D para que todos os IDs terá suas propriedades declaradas.

b++
c++
d++
}


Agora, para evitar entrar neste novo ciclo, o incremento que a variável "A" por 1. Em seguida, usamos o setTimeout () para fazer o loop funcionar cada 0,5 segundos, para que possamos definir a outros padrões.

a++
setTimeout(animate, 500)
}


Nesse ponto, "a" é igual a 1, por isso vamos escrever o código para o padrão seguinte da instrução else if. Esta parte é como o anterior, só que agora vamos atribuir as matrizes compensada por um.

else if (a==1)
{
for (i=0;i<3;i++)
{
document.getElementById(b).style.backgroundColor=colors2[i]
document.getElementById(c).style.backgroundColor=colors3[i]
document.getElementById(d).style.backgroundColor=colors[i]
b++
c++
d++
}
a++
setTimeout(animate,500)
}

Temos que fazer isso mais uma vez, a fim de obter o padrão desejado. Desta vez, a = 2, mas desde que esta é a última afirmação, podemos apenas uma instrução Else. Desta vez, vamos atribuir um valor a 0, portanto, a função irá começar de novo.

else
{
for (i=0;i<3;i++)
{
document.getElementById(b).style.backgroundColor=colors3[i]
document.getElementById(c).style.backgroundColor=colors[i]
document.getElementById(d).style.backgroundColor=colors2[i]
b++
c++
d++
}
a=0
setTimeout(animate,500)
}
}
</script>


Prontinho, o script já está pronto. Se você quiser ver como isso funciona, basta baixar o código ou fazer o passo-a-passo você mesmo.
Continue Lendo...

Mais |

18 novembro, 2009 | Comente

Criando um Editor de Textos em JavaScript



Este tutorial é bem útil para quem quer ter um editor de texto dentro de uma página no próprio site, muito fácil e legal de fazer, com um pouquinho de conhecimento em JavaScript basta pra pelo menos editar o codigo a seguir e deixla-lo personalizado, se voce ainda não sabe nada de JavaScript, vale a pena visitar os posts anteriores com boas explicações.



Primeiro de tudo temos que criar os elementos HTML que vamos usar para mudar o conteúdo e a aparência do que está dentro do editor de texto Rich:

<body onLoad="def()">
<div style="width:500px; text-align:left; margin-bottom:10px ">
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" /> |
<input type="button" style="height:21px; width:21px;"value="L" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" title="align right" /> |
<select id="fonts">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="size">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="color">
<option value="black">-</option>
<option style="color:red;" value="red">-</option>
<option style="color:blue;" value="blue">-</option>
<option style="color:green;" value="green">-</option>
<option style="color:pink;" value="pink">-</option>
</select> |
<input type="button" style="height:21px; width:21px;"value="1" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="●" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="←" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="→" title="Indent" />
</div>


Em seguida temos de criar um iframe, isto é, onde o texto será escrito e editado.

<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>


Podemos agora escrever o código Javascript.
Primeiro de tudo, a fim de usar o iFrame é preciso defini-lo como modo de design. Então nós temos que abrir, escrever e fechar esse iFrame.

<script type="text/javascript">
<!--
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
textEditor.document.close();


Você pode ver que o método write () tem alguns CSS para um parâmetro - que é porque eu queria definir a fonte padrão do iFrame e tamanho da fonte.
É hora de escrever a função que será chamada pelos elementos HTML criado anteriormente. Esta é uma função muito simples, precisamos apenas de 2 métodos iFrame: execCommand () e foco (). execCommand () vai executar um comando no documento atual, a seleção atual, ou o intervalo dado, e focus () vai dar o foco volta para o iFrame.

function fontEdit(x,y)
{
textEditor.document.execCommand(x,"",y);
textEditor.focus();
}


Vamos usar essa função com todos os elementos HTML. Vamos começar com o botão Negrito.
Só temos de definir o evento que irá chamar a função, e dar um parâmetro para a função. Porque é um botão, vamos usar o evento onClick.

<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />

Quando chamado, a função fará o texto em negrito. Nós fazemos a mesma coisa para o resto dos botões, alterando o parâmetro.

<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> |
<input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> |



Agora é hora de cuidar da Fonte suspensa, tamanho e cor listas. Porque estas listas têm vários valores, temos que passar o valor do índice selecionado como o segundo parâmetro. Além disso, o evento que irá chamar a função será onChange.

<select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
<option value="black">-</option>
<option style="color:red;" value="red">-</option>
<option style="color:blue;" value="blue">-</option>
<option style="color:green;" value="green">-</option>
<option style="color:pink;" value="pink">-</option>
</select> |



Por exemplo Fontedit ( 'FontName', 'vezes') irá alterar o tipo de letra para Times. É fácil descobrir como as outras listas dropdown vai funcionar.
Finalmente, eu fiz uma função para definir o estado nas listas suspensas 'default, o que ajudaria na lista suspensa Fonte evitar escrever "Times" após a atualização (quando a fonte padrão é Arial), por exemplo. A função será chamado de carga, por <body onLoad="def()">.

Como o post ficou muito grande vou hospedar o codigo completo para download neste link
Continue Lendo...

Mais |

17 novembro, 2009 | Comente

JSNES - Emulador de NES em JavaScript




O brilhante Ben Firshman, sujeito sem nada pra fazer, criou um emulador para jogar os joguinhos de 8bits do Nintendinho e o batizou de JSNES, e o legal é que esse emulador foi feito em JavaScript e roda nos navegadores Firefox 3.5, Safari 4 e Google Chorme, pare quem ainda esta no sofrimento usando o IE 6 fica o meu duplo lamento, não vai poder jogar porque o JSNES usa o elemento canvas do HTML 5 que permite processar imagens de forma dinâmica na tela. Recomendo o uso do Chrome que teve o melhor desempenho, chegando a alcançar 60fps.

O emulador conta com uma lista de 17 jogos, entre eles, Mega Man, Dr. Mário, Pac Man, Zelda, Tetris entre outros.

Continue Lendo...

Mais |

15 novembro, 2009 | Comente

Slideshow com efeitos de transição usando JavaScript



Voce já viu em alguns sites uma apresentação de slides criado com javascript onde podemos ter controle total sobre ele, como avançar, pausar, ou parar os slide usando botões, pois vamos aprender como criar um agora, este tutorial vai ficar bem grande porque vai ser muito detalhado para que todos possam entender bem como o codigo foi feito, então paciencia pessoal.

Slide Show

Para podermos criar uma apresentação de slides em javascript, temos que primeiro criar os elementos HTML que iremos utilizar para o slideshow. Precisamos de uma imagem, quatro botões e duas divs:

<html>
<body onload="loadPics()">
<center>
<div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">
<img id="picture" name="picture" src="1.jpg" /></div><br />
<input id="prev" type="button" value="prev" onclick="prev()" />
<input id="next" type="button" value="next" onclick="next()" />
<input id="slideshow" type="button" value="slideshow" onclick="startSlide()" />
<input id="pause" type="button" value="pause" onclick="pause()" /><br />
<div id="number">Picture 1</div>
</center>
</body>
</html>


Vamos usar a tag img para exibir as imagens na apresentação. A imagem é acondicionada dentro de uma div, que tem um filtro de atributo CSS. Esse filtro irá criar o efeito de transição usando o DirectX. Temos também quatro botões para controlar a apresentação e outra div que vai exibir o texto (como o título da imagem).

Vamos passar para o script. Primeiro, vamos declarar algumas variáveis e fazer uma função que pré-carrega as fotos.

<script language="javascript" type="text/javascript">
<!--
var i=0;
var finished=false;
var paused=false;
var running=false;

function loadPics()
{
pic0=new Image();
pic0.src="1.jpg";
pic1=new Image();
pic1.src="2.jpg";
pic2=new Image();
pic2.src="3.jpg";
pic3=new Image();
pic3.src="4.jpg";
pict=new Array();
pict[0]=pic0.src;
pict[1]=pic1.src;
pict[2]=pic2.src;
pict[3]=pic3.src;
}


Esta função de pré-carrega as imagens e faz uma matriz com elas. Queremos que esta função a ser chamada quando carrega páginas, por isso o corpo tem a marca do evento: onload = "loadPics ()".

Agora, vamos escrever uma função para o botão Avançar. A imagem padrão é pict0 (1.jpg), então o que nós queremos é a imagem para exibir a imagem seguinte, quando clicar em Avançar, e para mostrar a primeira imagem se estamos no final da apresentação. Para esta função vamos usar a variável i, que é basicamente o quadro atual, e uma instrução IF ELSE.

function next()
{
finished=false;

if(iAvançar, ele verifica qual imagem é exibida no momento, se a imagem é outra senão a última, que será incrementado por 1, a próxima foto será exibida e as fotos ' nome será escrito em uma div. Se a última imagem foi exibida quando o botão foi clicado, me retornarei a 0, e a primeira imagem será exibida novamente.

A função anterior é praticamente a mesma. A diferença é que o IF ELSE verifica se o quadro atual é o primeiro. Se o quadro atual não é a primeira imagem, então a imagem anterior, será exibida, se é a primeira foto, a última imagem na apresentação de slides será apresentada.

function prev()
{
finished=false;
if (i>0)
{
i--;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else
{
i=pict.length-1;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}


O AutoSlideshow é o próximo. Primeiro vamos criar uma função que irá chamar a função slideshow atual em um certo intervalo. Também, porque a transição não funciona no Firefox, nós vamos ter que verificar o browser para ver qual função chamar (há uma para o IE, e outra para o resto do navegadores).

function startSlide()
{
running=true;
if(navigator.appVersion.indexOf("MSIE") == -1)
{
interval = setInterval(FFSlideshow,5000);
}
else
{
interval = setInterval(slideshow,5000);
}
document.getElementById("slideshow").disabled=true;
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}


A variável que mostra a execução de diapositivos está em andamento, e que será útil para a função de pausa do slideshow.
Assim, se o navegador é o IE, a função de apresentação de slides será chamada após 5 segundos, se não, a função FFSlideshow será chamado.

function slideshow()
{
if

(i i será incrementado por 1, e a função startSlide irá chamar esta função novamente depois de 5 segundos. Isto vai continuar até que a última imagem seja exibida, em seguida, o cronômetro será zerado e a função não será chamada novamente, acabou se tornará verdadeira e execução se tornará falsa. Se a apresentação for iniciado novamente, o quadro atual será o último e terminou não será falso, então o código no corpo da pessoa estará correndo; o Show vai continuar até chegar a última foto de novo: o temporizador vai chamar essa função até que ele foi inocentado novamente. Eu usei setInterval () em vez de setTimeout () porque ele possa ser limpo, e isso impedirá a apresentação de correr mais do que o desejado (se você usar setTimeout e pausar a apresentação duas vezes durante a mesma foto, a apresentação será executada duas vezes).

A função FFSlideshow é a mesma, exceto aquila que não têm filtros (que faz com que o Firefox não execute o script).

function FFSlideshow()
{
if


(ipausa. Nós não queremos fazer uma pausa na apresentação de slides quando ele não está funcionando mesmo. Portanto, temos a variável execução supra, que nos ajuda a saber se o slide está em execução ou não. Queremos também retomar a apresentação depois de ter sido interrompida, por isso chamamos de pausa variável acima.

function pause()
{
if(running==true)
{
if(paused==false)
{
paused=true;
document.getElementById("pause").value="resume";
clearInterval(interval);
document.getElementById('number').innerHTML="Paused";
}
else
{
startSlide()
paused=false;
document.getElementById("pause").value="pause";
}
}
}



Quando o botão de pausa foi clicado a função verifica se está executando uma apresentação de slides. Se não for, então a função não fará nada. Se uma apresentação está rodando, ele verifica se ele foi pausado ou não. Se ele não foi pausada, a função irá fazer uma pausa na apresentação de slides, limpando o setInterval. O botão vai dizer "retomar" agora e uma div vai dizer "pausa". A pausa variável agora é verdadeira. Assim, quando a função é chamada novamente, ele irá executar o outro pedaço do código: ele vai chamar o startSlide () (função que irá iniciar um temporizador e chamar a função de apresentação de slides), fará com que o botão de dizer "pausa" de novo e de pausa variável voltará a ser falsa.

E não se esqueça de fechar o script:

//-->
</script>


Para não deixar mais longo que já esta esse post, resolvi hospedar e deixar o link para que vocês possam baixar e ver como fica o código completo.
Continue Lendo...

Mais |

12 novembro, 2009 | Comente

Desabilitar o plugin Firebug do Firefox usando javascript



Se você não gosta que fiquem depurando seu código, eis uma solução pra impedir os curiosos, usando um pequeno código javascript você pode desativar o Firebug do Firefox.

Não vou falar que nunca espionei os códigos alheios, sempre que fico com duvidas de onde esta um código ou até mesmo pra saber como foi feito eu entro com o Firebug, mas todos podem ficar tranquilo, nunca copiei nada de ninguém, uma que não gosto de ter a mesma coisa que todos. Bom vamos ao que importa, desabilitar o xereta e muito útil do Firebug.


if (!("console" in window) || !("firebug" in console))

{

var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

window.console = {};

for (var i = 0; i

}
Continue Lendo...

Mais |

08 novembro, 2009 | Comente

Criando Formulários em JavaScript



Em Javascript, podemos trabalhar cada elemento de um formulário para, por exemplo, ler ou escrever um valor, uma escolha a qual poderá associar uma gestão de evento etre muitas outras coisas. Todos esses elementos irão reforçar as capacidades interativas da página.

Um formulário é um elemento Html declarado pela tags <FORM></FORM>. Um formulário contém um ou vários elementos que chamamos os controladores (widgets). Esses controladores são escrito por exemplo pela tags <INPUT TYPE= ...>.

Declaração de um formulário

Como disse anteriormente, a declaração de um formulário é feito pelas tags <FORM> e </FORM>. Pode-se notar que em Javascript, o atributo NAME="nome_do_formulário" tem toda a sua importância para designar o caminho completo dos elementos. Os atributos ACTION e METHOD são facultativos pelo menos até não fazer apelo ao servidor.

Um erro clássico e em Javascript é de esquecer de declarar o fim do formulário</FORM> depois de ter inserir um controlador.

Controlador de linha de texto

A área de texto é o elemento de entrada/saída do Javascript. A sintaxe Html é <INPUT TYPE="text" NAME="nome" SIZE=x MAXLENGTH=y> para uma área de texto de uma só linha, de comprimento x e de comprimento máximo y.

O objecto texto tem 3 propriedades:

name - indica o nome do controlador.
defaultvalue - indica o valor por defeito que será afixada na área de texto.
value - indica que o valor da área de texto. Seja ele escrito pelo usuario ou já ter um valor por padrão.

Ler um valor numa area de texto

Quando inserir um valor no formulario ele te retornará com uma mensagem.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function controle(form1) {
var test = document.form1.input.value;
alert("Escreveste: " + test);
}
</SCRIPT>

</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="botao" VALUE="Controlar" onClick="controle(form1)">
</FORM>
</BODY>
</HTML>



Quando clicar no botão "controlar", o Javascript chama a função controle() no qual passamos o formulário em que o nome é form1 como argumento.
Esta função controle() definida nas tags <HEAD> Toma sob a variável test, o valor da área de texto. Para selecionar este valor, escreve-se o caminho completo deste. Neste exemplo, tem o objecto formulário chamado form1 que contém o controlador de texto nomeado input e que tem como propriedade o elemento de valor value. O que dá document.form1.input.value.

Escrever um valor na área de texto

Neste outro exemplo vamos criar um formulario de entrada e um de saida.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function afixar(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</SCRIPT>

</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE=""> área de texto de entrada<BR>
<INPUT TYPE="button" NAME="botao" VALUE="Afixar" onClick="afixar(form2)"><BR>
<INPUT TYPE="text" NAME="output" VALUE=""> área de texto de saída
</FORM>
</BODY>
</HTML>



Ao clicar no botão "Afixar", o Javascript chama a função afixar() na qual passa o formulário em que o nome é form2 desta vez como argumento.
Esta função afixar() definida nas tags <HEAD> toma sob a variável testin, o valor da área de texto de entrada. À instrução seguinte, dizemos ao Javascript que o valor da área de texto output contida no formulário nomeado form2 é a da variável testin. Utiliza-se o caminho completo para chega a propriedade valor do objeto desejado, seja em Javascript document.form2.output.value.

Até a Pórxima!
Continue Lendo...

Mais |
 

KeepGeek

2D || Dicas e Downloads

Castro Info Net

Copyright © 2009-2010 - Todos os Direitos Reservados | Brasil High Tech | Powered by Blogger.com | Google Analytics Alternative