Aug/100
O que seria o DOM?
Muitos programadores fazem confusão de que o DOM (Document Object Model, em ptBR, Modelo de Objetos de Documentos) faz parte do JavaScript, não é assim "totalmente".
O DOM é uma especificação da W3C que não depende de plataforma ou de NENHUMA LINGUAGEM.
É usado para fazer alterações em documentos como HTML e XML
É uma API bem usual que temos... segue algum exemplo em JavaScript de onde o DOM está presente!
var teste = document.getElementById("id").innerHTML = "Texto ok";
Essa propriedade "document.getElementById()" e todas as suas "ramificações" são os elementos DOM!
Qualquer dúvida podem postar...
Abraços
Dec/084
Cadastrar, Listar, Editar e Excluir dados de um XML com ASP - Parte 03
Criem um arquivo chamado Editar.asp e nele serão lidas todas as tags que contém no arquivoBanco.xml , mas com a querystring passada pelo arquivo Ler.asp que criamos no artigo anterior. Vamos só alterar uma única tag, um único nó do XML. Lembrando que usei uma tag "nome": mas vocês poderiam criar uma tag "id" e colocar números seqüenciais ou randômicos, a escolha fica a critério.
Vamos primeiro listar todos os registros, criando os objetos que já utilizamos nos primeiros artigos, nada a mais.
<%@ Language="VBScript" %>
<%
Dim Banco : Banco = Server.MapPath("Banco.xml")
Set XMLDOC = Server.CreateObject("Microsoft.XMLDOM")
Set objLER = Server.CreateObject("Microsoft.XMLDOM")
XMLDOC.Load(Banco)
Set objLER = XMLDOC.getElementsByTagName("*")
%>
Logo abaixo desse script vamos criar o formulário com um "for" fazendo a varredura nas tags para pegar só o valor de tag citado na querystring passada:
<html>
<body>
<a href="Cadastro.asp">CADASTRAR</a> - <a href="Listar.asp">LISTAR</a>
<br><br>
<form action="Editar.asp?nome=<%=Request.QueryString("nome")%>" method="post">
<input type="hidden" name="CampoUpdate" value="<%=Request.QueryString("nome")%>">
<%
For i = 0 To (objLER.length - 1)
If objLER.Item(i).Text = ""&Request.QueryString("nome")&"" Then
%>
<b>Nome: </b><input type="text" name="Nome" value="<% Response.Write(objLER.Item(i).Text) %>"><br>
<b>E-Mail: </b><input type="text" name="EMail" value="<% Response.Write(objLER.Item(i+1).Text) %>"><br>
<b>Telefone: </b><input type="text" name="Telefone" value="<% Response.Write(objLER.Item(i+2).Text) %>"><br>
<%
End If
Next
%>
<input type="submit" value="Editar" name="btEdt">
</form>
</body>
</html>
Reparem a linha onde temos If objLER.Item(i).Text = ""&Request.QueryString("nome")&"" Then, é ela que está "selecionando" a tag que quero mostrar.
E por fim a edição:
<%
If Request.Form("btEdt") = "Editar" Then
Dim Nome, EMail, Telefone, CampoUpdate, i
Nome = Request.Form("Nome")
EMail = Request.Form("EMail")
Telefone = Request.Form("Telefone")
CampoUpdate = Request.Form("CampoUpdate")
Set objLER_upDate = XMLDOC.getElementsByTagName("*")
For i = 0 To (objLER.length - 1)
If objLER.Item(i).Text = ""&CampoUpdate&"" Then
objLER.Item(i).Text = Nome
objLER.Item(i+1).Text = EMail
objLER.Item(i+2).Text = Telefone
End If
Next
XMLDOC.Save(Banco)
Response.Write("<script>alert('Editado com Sucesso!');location='Listar.asp'</script>")
Set objLER_upDate = Nothing
End If
Set objLER = Nothing
Set XMLDOC = Nothing
%>
Coloquei a querystring passada em um campo hidden e joguei ele dentro de um "for", como fiz no formulário, em seguida troquei os valores pelas variáveis em seqüência, Nome, EMail e Telefone, salvei com o método XMLDOC.Save e passei um alert em JavaScript e pronto!!
Façam os testes juntando os três artigos.
Esse tipo de utilização do XML serve para coisas pequenas, por exemplo, um combo de país, cidades de um determinado estado, cores, dentre outros.
Até os próximos artigos!
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:
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("");
}
%>
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>
