Posted by Ana Claudia on jan 8, 2008 in
HTML,
PHP,
Web Standards Antes de começar meu tutorial sobre o mural de fotos, vou contar uma pequena histórinha. Em 2004 foi o casamento do meu irmão do meio, e resolvi presentear os noivos com um site álbum de fotos. Na época tinha muito pouco conhecimento em PHP, e o site foi praticamente inteiro em HTML, com excesão dos comentários. Como tinha pouca experiência, inseri o código inteiro dos links das fotos na mão, passei 2 dias fazendo isso. Alguns anos mais tarde, com mais experiência, resolvi reformular alguns sites antigos e o do meu irmão foi um deles. No primeiro momento pensei em cadastrar todas as fotos em um banco de dados mas isso levaria tempo, porque eram muitas fotos. Como as fotos estavam devidamente ordenadas por números, pensei em outra alternativa: Abrir as pastas das fotos.
Veja o código simplificado abaixo:
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
| <?
$dir = $_GET["pasta"];
if($folder = opendir("$dir/fotos/mini"))
{
$i = 1;
while(($arquivos=readdir($folder)) != false){
if($arquivos == "." or $arquivos == ".."
or $arquivos == "Thumbs.db") continue; {
if($i < 10) $i = "0".$i;
$lista .= "<li><a href='popup.php?Foto=$i
&Pasta=".$dir."' class='popup'>
<img src='".$dir."/fotos/mini/foto".$i."mini.jpg
alt='' border='0'/></a></li></n>";
$i++;
}
}
closedir($folder);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title><?=$dir ?></title>
</head>
<body>
<ul>
<?=$lista ?>
</ul>
</body>
</html> |
Onde a variável $dir (linha 2) recebe uma variável GET que corresponde ao nome da pasta que contém as imagens. A estrutura das imagens nas pastas é a mesma, ou seja, as imagens tem o mesmo padrão de nome. Após receber o nome da pasta, nós vamos abri-la com a função opendir() (linha 3),ler todos os arquivos do diretório com a função readir() e jogar esse conteúdo num loop while (linha 6).Depois é so ir concatenando o conteúdo numa variavel, no nosso caso a variável $lista(linha 10) e mandar imprimir no html (linha 27). Não podemos esquecer de fechar o diretório com a função closedir() (linha 17), pois desta forma a memória que foi usada para abrir o diretório será liberada e nosso código ficará mais leve para ser carregado. E pronto, temos uma solução simples de mural sem o uso de uma banco de dados. Espero que tenham gostado, um grande abraço.
Posted by Ana Claudia on ago 19, 2007 in
HTML,
Javascript,
dhtml,
dom Nesta última parte do mini tutorial sobre DOM vamos ver algumas funções do DOM para acessar, criar e excluir linhas e células de uma tabela.
rows[]
Retorna um array de cada linha de uma tabela.
Sintaxe: tabela.rows[]
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<title>rows[]</title>
<script type='text/javascript'>
window.onload = fucntion() {
alert(document.getElementById("tabela").rows[0].innerHTML);
}
</script>
</head>
<body>
<table id="tabela" border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
</body>
</html> |
cells[]
Retorna um array de cada célula da tabela.
Sintaxe: Tabela.rows.cells[]
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<title>cells[]</title>
<script type='text/javascript'>
window.onload = fucntion() {
alert(document.getElementById("tabela").rows[0].cells[0].innerHTML);
}
</script>
</head>
<body>
<table id="tabela" border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
</body>
</html> |
insertRow()
Insere linhas em uma tabela.
Sintaxe: tabela.insertRow(índice);
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<title>insertRow</title>
<script type='text/javascript'>
window.onload = fucntion() {
document.getElementById("tabela").insertRow(0);
}
</script>
</head>
<body>
<table id="tabela" border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
</body>
</html> |
insertCell()
Insere células em uma tabela.
Sintaxe: linha.insertCell(índice)
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<title>insertCell</title>
<script type='text/javascript'>
window.onload = fucntion() {
linha = document.getElementById("linha");
linha.insertCell(0);
}
</script>
</head>
<body>
<table border="1">
<tr id="linha">
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
</table>
</body>
</html> |
deleteRow()
Apaga linhas de uma tabela.
Sintaxe: tabela.deleteRow(índice);
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<title>deleteRow</title>
<script type='text/javascript'>
window.onload = fucntion() {
document.getElementById("tabela").deleteRow(0);
}
</script>
</head>
<body>
<table id="tabela" border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
</body>
</html> |
deleteCell()
Apaga células de uma tabela.
Sintaxe: linha.deleteCell(índice)
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<title>deleteCell</title>
<script type='text/javascript'>
window.onload = fucntion() {
linha = document.getElementById("linha");
linha.deleteCell(0);
}
</script>
</head>
<body>
<table border="1">
<tr id="linha">
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
</table>
</body>
</html> |
Aqui termino meu mini-tutorial sobre DOM, espero que ele tenha sido útil pra o entendimento do assunto assim como o funcionamento de suas principais funções.
Tags:dhtml, dom, HTML, Javascript
Posted by Ana Claudia on ago 12, 2007 in
HTML,
Javascript,
dhtml,
dom Nos artigos anteriores, mostrei como acessar, criar e manipular objetos HTML do documento. Nesta terceira parte irei demonstrar como apagar nós filhos, atributos e textos de um elemento.
RemoveChild
Este método é utilizado para remover nós filhos de um elemento.
Sintaxe: removeChild(elemento);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<title>removeChild</title>
<script type='text/javascript'>
window.onload = fucntion() {
para = document.getElementById("para");
noPai = para.parentNode;
noPai.removeChild(para);
}
</script>
</head>
<body>
<p id="para">Parágrafo</p>
</body>
</html> |
No exemplo acima, o parágrafo foi removido por completo do documento.
deleteData
Remove o conteúdo total ou parcial do texto do nó, a partir de um inicio e fim selecionado.
Sintaxe: deleteData(inicio,fim);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<title>deleteData</title>
<script type='text/javascript'>
window.onload = fucntion() {
para = document.getElementById("para").firstChild;
para.deleteData(0,4);
}
</script>
</head>
<body>
<p id="para">Parágrafo</p>
</body>
</html> |
No exemplo, parte do texto dentro do parágrafo foi removido ficando apenas a palavra “grafo”.
removeAttribute
Remove um atributo de um elemento selecionado.
Sintaxe: removeAttribute(atributo);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<title>removeAttribute</title>
<script type='text/javascript'>
window.onload = fucntion() {
para = document.getElementById("para");
para.removeAttribute("class");
}
</script>
</head>
<body>
<p id="para" class="data">Parágrafo</p>
</body>
</html> |
O script acima removeu o atributo “class” presente no parágrafo.
Por hoje é só pessoal, espero que tenham gostado desse artigo. Na última parte deste tutorial irei falar sobre como manipular tabelas, criar e excluir linhas e células e um pouco mais.
Tags:dhtml, dom, HTML, Javascript
