Posted by Ana Claudia on ago 7, 2007 in
HTML,
Javascript,
dhtml,
dom Na primeira parte deste tutorial você viu como acessar objetos do html, seus valores, textos e atributos. Nesta segunda parte você irá ver que o DOM também pode criar e modificar objetos do HTML.
createElement
cria tags no HTML.
Sintaxe: createElement(nome)
1
2
3
4
5
6
7
8
9
10
11
12
| <html>
<head>
<title>Create Element</title>
<script type='text/javascript'>
window.onload = function() {
p = document.createElement("p");
}
</script>
</head>
<body>
</body>
</html> |
No exemplo acima apenas criamos o paragráfo, mas não o inserimos no documento ainda. A inserção no documento será vista adiante.
setAttribute
Modifica o atributo que já existe de um elemento ou o cria, caso o atributo não exista.
Sintaxe: setAttribute(nome,valor)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<title>setAttribute</title>
<script type='text/javascript'>
window.onload = function() {
link = document.getElementsByTagName("a")[0];
link.setAttribute("href","http://www.terra.com.br");
}
</script>
</head>
<body>
<a>Link</a>
</body>
</html> |
Aqui nos criamos o atributo href e passamos um link como valor para ele.
getAttribute
Pega o valor de um atributo especificado.
Sintaxe: getAttribute(nome)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<title>getAttribute</title>
<script type='text/javascript'>
window.onload = function() {
link = document.getElementsByTagName("a")[0];
href = link.getAttribute("href");
alert(href);
}
</script>
</head>
<body>
<a href="http://www.terra.com.br">Link</a>
</body>
</html> |
No exemplo pegamos o valor que se encontra no atributo href.
createTextNode
Cria um novo texto para um nó.
Sintaxe: createTextNode(texto)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<title>createTextNode</title>
<script type='text/javascript'>
window.onload = function() {
p = document.getElementsByTagName("p")[0];
text = document.createTextNode("Paragráfo");
}
</script>
</head>
<body>
<p></p>
</body>
</html> |
Aqui passamos um texto para o parágrafo existente no documento.
appendChild
Insere um elemento após um outro elemento selecionado.
Sintaxe: appendChild(nome)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<title>appendChild</title>
<script type='text/javascript'>
window.onload = function() {
p = document.getElementsByTagName("p")[0];
text = document.createTextNode("Paragráfo");
p.appendChild(text);
}
</script>
</head>
<body>
<p></p>
</body>
</html> |
Além de criar o texto para o parágrafo, agora vamos inseri-lo dentro do documento.
insertBefore
Esta função insere um nó antes de outro nó especificado.
Sintaxe: insertBefore(novoNo,antigoNo);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html>
<head>
<title>insertBefore</title>
<script type='text/javascript'>
window.onload = function() {
p1 = document.getElementsByTagName("p")[0];
noPai = p1.parentNode;
p2 = document.createElement("p");
text = document.createTextNode("Segundo paragráfo");
p2.appendChild(text);
noPai.insertBefore(p2,p1);
}
</script>
</head>
<body>
<p></p>
</body>
</html> |
Aqui criamos o parágrafo e seu texto, só desta vez iremos inserir antes do primeiro parágrafo inserido.
innerHTML
Esta propriedade exibe ou modifica o conteúdo de um elemento formatado como HTML.
Sintaxe: documento.elemento.innerHTML = “texto”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<title>innerHTML</title>
<script type='text/javascript'>
window.onload = function() {
div = document.getElementsByTagName("div")[0];
div.innerHTML += "<strong>texto</strong>";
}
</script>
</head>
<body>
<div></div>
</body>
</html> |
Com a propriedade innerHTML, inserimos o texto “texto” dentro da tag “div”.
Tags:dhtml, dom, HTML, Javascript
Posted by Ana Claudia on jul 30, 2007 in
HTML,
Javascript,
dhtml,
dom Oi pessoal, estou de volta. Por causa de alguns compromissos não consegui prosseguir escrevendo artigos no meu blog, mas agora eu estou voltando com força total e vou explicar alguns conceitos que conheço. Vou começar com DOM que é um conceito muito interessante
para manipulação de HTML através de javascript.
O que é DOM?
DOM significa Document Object Model – Documento de modelo de objetos – e é responsável por acessar, alterar e criar elementos num documento. Nesta primeira parte irei explicar alguns conceitos de como recuperar elementos de uma página.
Conceito de Nós
O documento é separado por Nodes ou nós. Cada Node representa um elemento na hierarquia do documento. Um conjunto de Nodes forma a árvore de Nós (Node tree). Todos os elementos dentro do HTML é um nó.
Ex:
<html>
<head>
<title>Título</title>
</head>
<body>
<p>Parágrafo</p>
</body>
</html>
A tag HTML é pai de todas as outras tag, pois ela envolve dentro dela outras tags. Pode se dizer então que o <html> é o parentNode. A tag <head> está dentro da tag <html>, então ela esta dentro de um no filho do HTML (childNode).
A seguir mostro como acessar os Nós de um documento:
Atributos
childNodes: Acessa nós filhos de um documento ou de outro nó
parentNode: Acessa o nó pai de um nó filho;
firstChild: Primeiro nó filho de um elemento. Equivalente a childeNodes[0];
lastChild: Último nó filho de um elemento. Equivalente a childeNodes[n] onde n
é o último valor de array de nós filhos.
nextSibling: o próximo nó filho numa mesma hierquia.
Ex:
var no1 = document.childeNodes[0];
var no2 = no1.NextSbling
Onde NextSibling seria equivalente a childeNodes[1];
previousSibling: Semelhante ao atributo anterior, porém com a diferença de pegar o nó anterior.
nodeName: A propriedade nodeName contém o nome do nó que geralmente se refere ao nome ou atributo de uma Tag.
nodeType: Essa propriedade retorna o tipo de nó
| Tipo de elemento |
Tipo de nó |
| Element |
1 |
| Attribute |
2 |
| Text |
3 |
| Comment |
8 |
| Document |
9 |
nodeValue: Contém o valor do nó, variando conforme o tipo de nó. Se o nó for do tipo texto, retorna o texto que está dentro do nó e se for um atributo, retorna o valor desse atributo. Para os outros tipos, essa propriedade não está disponível.
Outra forma de pegar objetos é através de “gets”
document.getElementsByTagName: Pega todos os elementos com a mesma tag. Para retonar todos os elementos você deve percorrer o documento através de um loop.
Ex:
var p = document.getElementsByTagName(“p”);
fo(i = 0; i<p.length; i++)
{
alert(“Paragrafo “ + i + “: “ + p[i].innerText);
}
Neste exemplo fazemos com que seja mostrado numa caixa de alerta o texto de cada parágrafo existente num documento.
document.getElementById: Pega apenas um elemento que contenha o atributo ID.
Ex:
<p id=”x”>Isso é um teste</p>
…
alert(document.getElementById(“x”).innerText);
Neste caso será retornado o conteúdo do parágrafo cujo id é “x”.
Bom, por enquanto é só, nos próximos artigos vou continuar falando sobre criar objetos, manipular tabelas e exluir objetos. Espero que gostem!
Tags:dhtml, dom, HTML, Javascript
Posted by Ana Claudia on abr 10, 2007 in
Javascript,
PHP Olá pessoal, estou de volta!
Hoje vou demonstrar o funcionamento de uma paginação simples. Como sempre adaptada aos meus interesses de scripts que eu achei pela web.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| <?
$pagina = $_GET["pagina"];
$conn = mysql_connect($local,$user,$senha) or die("Erro de conexao\r".mysql_error());
mysql_select_db($db,$conn);
$SQL = mysql_query("SELECT * FROM estado") or die(mysql_error());
$Qtde = 10;
$Total = mysql_num_rows($SQL);
$Paginas = ceil($Total/$Qtde);
if(empty($pagina)){
$limit = 0;
$PaginaCorrente = 1;
} else {
$limit = $pagina-1;
$PaginaCorrente = $pagina;
}
$inicio = $limit * $Qtde;
$SQL = mysql_query("SELECT * FROM estado Limit $inicio,$Qtde");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplo - Paginação de Resultados em PHP</title>
</head>
<body>
<form id="frm_resultados" action="<?=$PHP_SELF?>" method="post">
<?
while($Linha = mysql_fetch_array($SQL)){
echo "$Linha[2] - $Linha[1]<br />\r";
}
if($pagina > 1){
$menos = $pagina -1;
$url ="$PHP_SELF?pagina=$menos";
echo "<a href='".$url."'>Anterior</a> |";
}
echo " Página $PaginaCorrente de $Paginas ";
if($pagina < $Paginas)
{
$mais = $pagina+1;
$url ="$PHP_SELF?pagina=$mais";
echo " | <a href='".$url."' >Próxima</a>";
}
echo " Ir para a página <input type='text' id='pagina' size='3' maxlength='3' value=\"$pagina\" />
<input type='button' value='ok' onclick=\"fctTrocaPagina('$PHP_SELF',$Paginas)\" />";
?>
</form>
<script type="text/javascript">
function fctTrocaPagina(Pagina,Total) {
var Form = document.getElementById("frm_resultados");
if (Form==null) return;
var objePagina = document.getElementById("pagina");
if (objePagina==null){
return;
}
if((objePagina.value =='') || parseInt(objePagina.value) > Total ||
parseInt(objePagina.value) < 1){
alert("Digite somente números de 1 a "+Total+".");
objePagina.select();
objePagina.focus();
return false;
}
window.location = Pagina+"?pagina="+objePagina.value;
}
</script>
</body>
</html> |
O número da página corrente em que se encontramos é passado através de GET na linha 1
Nas linhas 3 e 4 foi feita a conexão com o banco de Dodos (troque os nomes de servidor, banco de dados, usuário e senha de acordo com a sua conexão).
Na linha 5 foi feita uma consulta na tabela para que retornassem todos os estados da tabela
,na linha 6 informamos quantos registros queremos por página, na 7 a quantidade total de páginas e finalmente na linha 8 dividimos o total de registro pela quantidade para que seja retornado o total de páginas que será exibido(note que foi utilizada a função ceil para arredondar o número).
A parte mais interessante deste script esta da linha 9 a 15: Aqui é feito uma verificação se a nossa string pagina esta vazia ou não para retornar o limite de registros da pagina corrente (ex 0 a 10, 11 a 20, etc)
Em seguida, na linha 17, é multiplicado o limite encontrado pela quantidade de registros por página para que possamos saber de qual registro a consulta deve continuar. É feita uma nova consulta de registros na linha 18, desta vez passando o primeiro registro a ser mostrado e a quantidade de resultados.
Um loop então é feito com os resultados da ultima consulta na linha 29 a 31. A primeira consulta que realizamos foi somente para pegarmos o total de registros da tabela.
Em seguida da linha 32 a 42 fazemos a navegação para que possamos avançaar e voltar as páginas. Podemos perceber que na linha 37 temos a string PaginaCorrente e Paginas. Elas são responsáveis por exibir ao usuário a pagina Corrente e o total de páginas que a consulta gerou.
A linha 43 trata-se de um atalho para ir diretamente a pagina desejada, supondo que a consulta gerou muitas páginas e passar uma a uma trabalho um pouco demorado. Neste caso recorremos a uma caixa de texto que recebe o número da página e que ao ser acionado o botão OK, uma função javascript é chamada para verificar se o número não excede o total de páginas e em seguida leva a página de registros desejada. Neste caso, passamos como parâmetro o nome da página e o total de páginas encontrado.
E para finalizar, da linha 48 a 62 temos a função javascript que chamamos anteriormente.
Agora veja o exemplo como ficou.
Uma idéia interessante é fazer a paginação dinâmica, onde o usuário, através de uma caixa de texto, digita a quantidade de registros que ele quer ver por página. Outra dica importante é passar valores de um filtro por exemplo por querystring, caso contrário o valores serão perdidos na passagem de uma página para outra.
