Compartilhando informação

Arquivo para a categoria ‘JavaScript’

Pop-up css e javascript

Este tutorial mostro como construir uma pop-up que não seja bloqueada pelos browsers (navegadores de internet) usando css e javascript.

<style type=“text/css”> e </style> é a marcação CSS da pop-up deve ser modificada de acordo com o seu uso.

<script language=“javascript”> e </script> é a marcação do javascript da pop-up que tambem deve ser alterado de acordo com o seu uso

Para entender o código é simples necessita o minimo de conhecimento de css e javascript, e basta ler os comentários que vai te ajudar muito.

<head>

<style type=“text/css”>
/* cria a div pop-up*/
#popup{
position: absolute; /*Define a posição absoluta da pop-up*/
top: 30%; /*Distancia da margem superior da página */
left: 30%; /*Distancia da margem esquerda da página */
width: 300px; /*Largura da pop-up*/
height: 100px; /*Altura da pop-up*/
padding: 20px 20px 20px 20px; /*Margem interna da pop-up*/
border-width: 1px; /*Largura da borda da pop-up*/
border-style: solid; /*Estilo da borda da pop-up*/
background: #ccc; /*Cor de fundo da pop-up*/
color: #000066; /*Cor do texto da pop-up*/
display: none; /* Estilo da pop-up*/
/*fim pop-up*/
}
</style>

<script language=“javascript”>
// Função que fecha o pop-up ao clicar no botao fechar
function fechar(){
document.getElementById(‘popup’).style.display = ‘none’;
}
// Aqui definimos o tempo para fechar o pop-up automaticamente
function abrir(){
document.getElementById(‘popup’).style.display = ‘block’;
setTimeout (“fechar()”, 3000);
}
</script>

</head>
<body onLoad=“javascript: abrir()”>

<div id=“popup” class=“popup”>
<b> Web tecnology </b>
<p>
Esse é um exemplo de popup utilizando DIV. Dessa maneira esse
pop-up não será bloqueado.

</p>
<small><a href=“javascript: fechar();”>X ou fechar</a></small>
</div>
<br> <a href=“javascript: abrir();”>Abrir Pop-up</a>
<br> <a href=“javascript: fechar();”>Fechar Ppo-up</a>

</body>
</html>

JavaScript – Reflexo em imagens

Este script irá criar um efeito que mostra a imagem na página como se estivessem refletidas na agua.

para faze-lo funcionar basta coloca-lo entre as tag`s <body> e </body> do seu site.

ATENÇÃO não se esqueça de tirar <!- e -> do código pois senão não funcionará eu só coloquei pois o internet explorer tenta fazer o código rodar e tira a configuração do blog.

<img id=”reflect” img src=”sua imagem.jpeg“>
<!–<script language=”JavaScript1.2”>
function f1()
{
setInterval(“mdiv.filters.wave.phase+=10″,100);
}
if(document.all)
{
document.write(‘img id=mdiv src=”‘+document.all.reflect.src+'”
style=”filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur()
flipv()”>’)
window.onload=f1
}

</script>–>

OBS: Substitua a palavra em negrito pelo nome ou caminho da sua imagem.

Quanto maior a imagem onde o efeito será aplicado mas demorado é para carregar o seu site então procure usar o efeito em imagens pequenas.


Adicionar esta not�cia no Linkk

JavaScript. verifica o numero digitado

Este script irá verificar se o número digitado pelo usuario é um dígito válido. Apenas números positivos e sem sinal.

function eDigito(pStr){
        var reDigits = /^d+$/;
        if (reDigits.test(pStr)) {
               return true; // e digito
        } else if (pStr != null && pStr != "") {
               return false; // nao e digito
        }
}

Para usar basta fazer uma chamada no form para onSubmit="return eDigito('campo');" ou uma chamada para eDigito(valor) dentro de outra função

JavaScript – Calculadora

Uma calculadora simples criada em JavaScript muito interessante

<!-- inserir o código listado abaixo na seção HEAD de sua página html --> 
<<SCRIPT LANGUAGE="JavaScript">
<!--
var wynik=0, op=0, nowe=0, nowe2=0, done=1, oset=0, kropka, temp;
function reset(value)
{
document.form1.ekran.value = value;
wynik = 0,
op    = 0,
nowe  = 0,
nowe2 = 0;
done  = 1;
oset  = 0;
}
function wspolna(new_temp)
{
kropka = 1;
if(nowe || done) {
nowe = 0;
done = 0;
temp = new_temp;
}
{
if (temp.indexOf(".")!=-1)
{
kropka=0;
}
}
}
function button(ktory,ktory2)
{
temp = document.form1.ekran.value;
if(ktory2=='.') {
wspolna('0');
if(kropka==1) {
temp += ktory2;
document.form1.ekran.value = temp;
oset = 0;
}
}
if(ktory>=0 && ktory<=9)  {
wspolna('');
if(temp==0 && kropka==1) temp='';
temp += ktory;
document.form1.ekran.value = temp;
oset = 1;
}
if(ktory2=='-' || ktory2=='+' || ktory2=='/' || ktory2=='*') {
if(nowe) op = ktory2
else {
if(!nowe2) {
op = ktory2;
wynik = temp;
nowe2=1;
}
else {
wynik = eval(wynik + op + temp);
op = ktory2;
document.form1.ekran.value = wynik;
}
oset=0;
nowe = 1;
}
}
if(ktory2=='1/x' ) { wynik = eval(1 / temp) ; reset(wynik); }
if(ktory2=='sqrt') { wynik = Math.sqrt(temp); reset(wynik); }
if(ktory2=='exp' ) { wynik = Math.exp(temp) ; reset(wynik); }
if(ktory2=='+/-')  document.form1.ekran.value = eval(-temp);
if(ktory2=='=' && oset && op!='0') reset(eval(wynik + op + temp));
if (ktory2=='C') reset(0);
if(document.form1.ekran.value[0] == '.')
document.form1.ekran.value = '0' + document.form1.ekran.value;
}
//-->
</SCRIPT>
<p>
<!-- inserir o código listado abaixo na seção BODY da sua página html -->
<form name="form1">
<TABLE bgcolor="#FF6600">
<TR><TD>
<TABLE BORDER=0 cellspacing=3 cellpadding=1 bgcolor="#FF9933">
<TR align=center bgcolor="#FF6600">
<TD colspan=5>
<input type="text" name="ekran" value="0">
</TD></TR>
<TR align=center bgcolor="#FF6600">
<TD colspan=4><B>
<font color="#FFFFFF" face="Georgia, Times New Roman, Times, serif" size="2">
Calculadora
</font></B>
</TD><TD>
<input type="button" name="C" value="  C  " onclick="button(11,'C')">
</TD></TR>
<TR align=center bgcolor="#FF6600"><TD>
<input type="button" name="7" value="  7  "   onclick="button(7 ,'')">
</TD><TD>
<input type="button" name="8" value="  8  "   onclick="button(8 ,'')">
</TD><TD>
<input type="button" name="9" value="  9  "   onclick="button(9 ,'')">
</TD><TD>
<input type="button" name="/" value="  /  "   onclick="button(11,'/')">
</TD><TD>
<input type="button" name="sqrt" value="sqrt" onclick="button(11,'sqrt')">
</TD></TR>
<TR align=center bgcolor="#FF6600"><TD>
<input type="button" name="4" value="  4  " onclick="button(4,'')">
</TD><TD>
<input type="button" name="5" value="  5  " onclick="button(5,'')">
</TD><TD>
<input type="button" name="6" value="  6  " onclick="button(6,'')">
</TD><TD>
<input type="button" name="*" value=" *  "  onclick="button(11,'*')">
</TD><TD>
<input type="button" name="exp" value="exp" onclick="button(11,'exp')">
</TD></TR>
<TR align=center bgcolor="#FF6600"><TD>
<input type="button" name="1" value="  1  "  onclick="button(1,'')">
</TD><TD>
<input type="button" name="2" value="  2  "  onclick="button(2,'')">
</TD><TD>
<input type="button" name="3" value="  3  "  onclick="button(3,'')">
</TD><TD>
<input type="button" name="-" value="  -  "  onclick="button(11,'-')">
</TD><TD>
<input type="button" name="1/x" value="1/x " onclick="button(11,'1/x')">
</TD></TR>
<TR align=center bgcolor="#FF6600"><TD>
<input type="button" name="0" value="  0  "   onclick="button(0,'')">
</TD><TD>
<input type="button" name="+/-" value=" +/- " onclick="button(11,'+/-')">
</TD><TD>
<input type="button" name="." value="  ,   "   onclick="button(11,'.')">
</TD><TD>
<input type="button" name="+" value=" +  "   onclick="button(11,'+')">
</TD><TD>
<input type="button" name="=" value="  =  "   onclick="button(11,'=')">
</TD></TR></TABLE></TD></TR></TABLE>
</form>
 veja a imagem com o resultado do código.
 imagem.jpg

Fonte: www.linhadecódigo.com.br

			

JavaScript – Funções

Funções

Função é um dos módulos fundamentais do JavaScript. O JavaScript assim como outras

linguagens fornecem funções predefinidas para realização de tarefas básicas. São estas:

  • eval: avalia uma string executando as instruções contidas nesta string;
  • isFinite: avalia se um determinado número é finito ou não;
  • isNaN: Avalia um argumento e determina se ele não é um número;
  • parseInt e parseFloat: Converte um valor de caracter para inteiro ou ponto flutuante;
  • Number e String: Converte um objeto para número ou caracter;
  • uma função em javaScript

    == // constructor function ==

    function MyObject(attributeA, attributeB)
    this.attributeA = attributeA
    this.attributeB = attributeB
    }

    // cria um Objeto chamado obj
    obj = new MyObject(‘red’, 1000);

    // acessa um atributo do obj
    alert(obj.attributeA);

    // access an attribute with the associative array notation
    alert(obj[“attributeA”]);

    // adiciona um novo atributo
    obj.attributeC = new Date();

    // remove um atributo do obj
    delete obj.attributeB;

    // remove o Objeto inteiro
    delete obj;

    JavaScript – Script Simples

    JavaScript é uma linguagem de programação desenvolvida pela Nestscape em 1995, que a principio se chamava LiveScript para atender as seguintes necessidades.

  • Validação de formularios no lado cliente (Programa – Navegador)
  • Interação com a página. E assim se tornou uma linguagem de Scripts.JavaScript tem sintaxe semelhante a do JAVA, mas é totalmente diferente no conceito e no uso.
    Script Simples
    Obs. // é usado para fazer um comentário sobre algum código do JavaScript

    // escreve na página
    document.write(“Mensagem que será escrita na página”);

    // mostra um alerta
    alert(“Mensagem do alerta”);

    // mostra um pedido de confirmação
    if(confirm(“Pergunta que deve ser respondida com OK ou Cancelar”))
    {
    alert(“Mensagem 01”); // mostra um alerta para resposta OK
    }
    else
    {
    alert(“Mensagem 02″); // mostra um alerta para resposta Cancelar
    }

    // escreve na barra de status do navegador
    window.defaultStatus=”Mensagem que será mostrada”;

    Adicionar ao Linkk

  • JavaScript – Valor e varialvel

    Valores e Variaveis

    JavaScript reconhece 4 tipos de valores:

    Números, lógicos, strings, null e undefined.

    Null é uma palavra-chave especial simbolizando um valor nulo.
    JavaScript assim como java é Case-sensitive.
    Portanto null é diferente de Null ou de NULL
    .

    Undefined também é uma palavra-chave que representa um valor indefinido.
    A conversão entre estes tipos de dados é dinâmica.
    Você não tem que especificar o tipo de dado

    quando declara uma variável. A conversão é feita durante a execução do script.

    var answer = 30;

    O tipo de dado pode ser mudado sem causar nenhum erro:

  • answer = “Conteudo da variavel”;Declaração de variáveisVocê pode declarar variáveis de duas maneiras:
  • Atribuindo um valor. Por exemplo x = 30;
  • Utilizando a palavra var. Por exemplo var x = 30.
  • Todas as variáveis que não tiveram atribuição de valores possui o valor undefined.

    Informática gratuita para você.

    Compartilhando informação

    Cartões com Arte

    Um novo conceito em cartões. facebook.com/cartoescomarte.

    Nouvelle vie au Canada

    Casal em busca do seu sonho de morar no Canadá

    Informática Gratuita

    Compartilhando informação

    Red Dreams

    Quem disse que meus sonhos não podem ser vermelhos?