20
Oct/080
Oct/080
Data com JavaScript
<script language="javascript">
function getData(){
var fSimples = new Date(); // cria o objeto de data
var dia = fSimples.getDate(); // pega o dia
var mes = fSimples.getMonth()+1; // pega o mês (somamos mais 1 pois o vetor começa do zero)
var ano = fSimples.getFullYear(); // pega o ano
if (dia < 10) {dia = "0"+dia;} // adiciona o zero quando o dia for menor que 10
if (mes < 10) {mes = "0"+mes;} // adiciona o zero quando o mês for menor que 10
document.getElementById("spanID").innerHTML = dia +"/"+ mes +"/"+ ano; // adiciona na SPAN
document.getElementById("textoID").value = dia +"/"+ mes +"/"+ ano; // adiciona na caixa de TEXTO
}
window.onload = getData; // abre a função em page load
</script>
Formato Simples: <span id="spanID"></span>
<br>
<br>
<br>
Formato Simples: <input type="text" id="textoID">
ficando assim:
5
Sep/084
Sep/084
Manipulando DIV com JavaScript
Página em JavaScript
funcao.js
var div = "manipulada";
// atribuir o nome da div que quer mostrar e ocultar
function AparecerDiv(){ // função aparecer
document.getElementById(div).style.display = "block";
// usamos o style.display para manupular o css da div e mostrar ela
}
function OcultarDiv(){ // função ocultar
document.getElementById(div).style.display = "none";
// usamos o style.display para manupular o css da div e ocultar ela
}
Teste.html
<html> <head> <script language="javascript" src="funcao.js"></script> </head> <body> <span onClick="AparecerDiv();" style="cursor: pointer;"><u>Aparecer Div</u></span> <br><br> <div id="manipulada" style="display: none;"> Conteúdo da div escondida <span onClick="OcultarDiv();" style="cursor: pointer;">[<u>x</u>]</span> </div> </body> </html>
Um código simples para quem precisa manipular uma div com facilidade:
13
Aug/0825
Aug/0825
Cadastrando, Listando e Deletando com AJAX / ASP
Código bem simples e útil para a galera que gosta de usar AJAX e não tem muita referência!
Página para carregar o AJAX, funcionalidades:
ajaxCarregar.js
function GetXMLHttp() {
if(navigator.appName == "Microsoft Internet Explorer") {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
var Enviar = GetXMLHttp();
// Início - Cadastro
function CadastrarDados() {
var Nome = document.getElementById("Nome");
var EMail = document.getElementById("EMail");
var URL = "Cadastro.asp?Cadastrar=Ok&Nome="+Nome.value+"&EMail="+EMail.value+"";
Enviar.open("GET", URL, true);
Enviar.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
document.getElementById("Resposta").innerHTML = "Cadastrado com Sucesso!!!";
Nome.value = "";
EMail.value = "";
Enviar.send(null);
Enviar.onload = lerTexto;
}
// Final - Cadastro
// Início - Deletar
function apagar(id, rowIndex) {
if (confirm('Tem certeza que deseja excluir este registro?')) {
document.getElementById("tabela").deleteRow(rowIndex);
Enviar.open("POST",'Cadastro.asp?Deletar=Ok&id='+ id, false);
Enviar.send(null);
}
}
// Final - Deletar
// Início - Carregar Página
function lerTexto() {
var URLler = "Ler.asp";
Enviar.onreadystatechange = stateChanged;
Enviar.open("GET", URLler, true);
Enviar.send(null);
}
function stateChanged() {
if (Enviar.readyState==4) {
document.getElementById("ler_Dados").innerHTML = Enviar.responseText;
}
}
window.onload = lerTexto;
// Final - Carregar Página
Ler.asp
<%@ Language="JavaScript" %>
<%
var Conexao;
var Conexao = Server.CreateObject("Adodb.Connection");
Conexao.ConnectionString = "Driver=MySQL ODBC 3.51 Driver; DataBase=banco; Server=localhost; Uid=root; PassWord=root;";
Conexao.Open;
%>
<table width="407" border="1" cellspacing="0" cellpadding="0" id="tabela">
<tr>
<td width="164"><strong>NOME</strong></td>
<td width="159"><strong>EMAIL</strong></td>
<td width="76"><strong>Acionar</strong></td>
</tr>
<%
var rs = Conexao.Execute("Select * From Teste");
if (rs == null) {
Response.Write("NADA");
}
else {
while (!rs.EOF) {
%>
<tr>
<td><%=rs("Nome")%></td>
<td><%=rs("EMail")%></td>
<td><a href="#" onClick="apagar('<%=rs("Codigo")%>', this.parentNode.parentNode.rowIndex);">deletar</a></td>
</tr>
<%
rs.MoveNext();
}
}
%>
</table>
Cadastro.asp
<%@ Language="JavaScript" %>
<%
var Conexao;
var Conexao = Server.CreateObject("Adodb.Connection");
Conexao.ConnectionString = "Driver=MySQL ODBC 3.51 Driver; DataBase=banco; Server=localhost; Uid=root; PassWord=root;";
Conexao.Open;
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cadastrar</title>
<script language="javascript" src="ajaxCarregar.js"></script>
</head>
<body>
<div id="Resposta"></div><br>
<form id="Form">
Nome: <input type="text" id="Nome" name="Nome" value=""><br>
E-Mail: <input type="text" id="EMail" name="EMail" value=""><br>
<input type="button" id="Cadastrar" value="Cadastrar" name="Cadastrar" onClick="CadastrarDados();">
</form><br>
<br>
<br>
<div id="ler_Dados"></div>
</body>
</html>
<%
if (Request.QueryString("Cadastrar") == "Ok") {
Conexao.Execute("Insert Into Teste (Nome, EMail) Values ('"+Request.QueryString("Nome")+"', '"+Request.QueryString("EMail")+"')");
Response.Write("");
}
if (Request.QueryString("Deletar") == "Ok") {
Conexao.Execute("Delete From Teste Where Codigo = '"+Request.QueryString("id")+"'");
Response.Write("");
}
%>
29
Jul/082
Jul/082
Randomize com JavaScript/DOM
Código simples e comentando!!!
function Randomize() {
var randNum = Math.floor((999 - 111 + 1) * Math.random() + 111);
// para aumentar a quantidade de números é só aumentar as casas decimais das centenas
document.getElementById("resultado").innerHTML = randNum;
// imprime o resultado na div "resultado"
}
<div id="clicar" style="cursor: pointer;" onClick="Randomize();">Clique aqui para gerar os numerais!</div><br> <div id="resultado"></div>
17
Jun/087
Jun/087
Alimentando um campo de texto através de um select
Simples script usando JavaScript, para alimentar um campo "text" através de um campo "select".
Criada uma função alimentarCampo que recebe o valor dos campos do formulário através do metodo "getElementById" com a interação .value
<html>
<head>
<script type="text/javascript">
function alimentarCampo() {
var minhaLista = document.getElementById("minhaLista");
document.getElementById("campoReceber").value = minhaLista.options[minhaLista.selectedIndex].value;
}
</script>
</head>
<body>
<form name="Formulario">
Selecione seu Browser:
<select id="minhaLista" name="campo_selecione" onchange="alimentarCampo();">
<option value="001 Campo do Internet Explorer a Evolução">Internet Explorer</option>
<option value="002 Campo do Firefox a Evolução">Firefox</option>
<option value="003 Campo do Netscape a Evolução">Netscape</option>
<option value="004 Campo do Opera a Evolução">Opera</option>
</select>
<p>Descrição do Browser: <input type="text" id="campoReceber" name="campo" size="50"></p>
</form>
</body>
</html>
Resumo do Código:
Linha:
var minhaLista = document.getElementById("minhaLista");
A variável minhaLista é alimentada através do "ID" do campo "select" que é puxado pelo parâmetro document.getElementById citado acima.
Linha:
document.getElementById("campoReceber").value = minhaLista.options[minhaLista.selectedIndex].value;
No campo do tipo "text" no formulário temos uma "ID" chamada campoReceber que receberá o valor do campo de "select" selecionado pelo usuário através do parâmetro ".options" citado no código acima, pegando assim pelo parâmetro ".value" o valor do campo "option" exposto no "select".
Linha:
<select id="minhaLista" name="campo_selecione" onchange="alimentarCampo();">
E por final chamamos a função criada em JavaScript pelo método "onchange" do formulário.
Dúvidas é só citar!!
Acesse também: Webly
