Tenho preferência em colocar comentários em cada linha de código javascript para um melhor esclarecimento.
Sendo que empanquei, se alguém puder complementar a explicação fico agradecido.
<html>
<head>
<title>Exemplo</title>
<script language="javascript">
//função mostra que espera que seja passado um parâmetro para a variável id
function mostra(id)
{
/*pegue no documento html o elemento id passado para variável id e
altere o seu estilo de display como block*/
document.getElementById(id).style.display = "block";
}
//função mostra que espera que seja passado um parâmetro para a variável id
function oculta(id)
{
/*pegue no documento html o elemento id passado para variável id e
altere o seu estilo de display como none*/
document.getElementById(id).style.display = "none";
}
//MOVENDO
function initDragDrop() {
//variáveis que guardam as coordenadas x e y
__dragX = 0;
__dragY = 0;
//guarda o id do elemento
__dragId = '';
//cria a variável gragging com a condição falsa.
__dragging = false;
/*pegue no documento html o corpo e o movimento para baixo do mouse
seja atibuído a _dragDown*/
document.body.onmousedown = __dragDown;
/*pegue no documento html o corpo o movimento de esquerda e direita
seja atibuído a _dragMove*/
document.body.onmousemove = __dragMove;
/*pegue no documento html o corpo e o movimento para cima do mouse
e reconfigure _dragging como falso*/
document.body.onmouseup = function() { __dragging = false; };
}
//-------------------------------------------EMPANQUEI FOI NESSAS FUNÇÕES----------------------------------------------
//Função _dragDown que espera um parâmetro e
function __dragDown(e) {
e = e ? e : window.event;
__dragEl = document.getElementById(__dragId) || null;
var _target = document.all ? e.srcElement : e.target;
if(!__dragEl || !(/drag/.test(_target.className))) return;
__dragX = e.clientX - __dragEl.offsetLeft;
__dragY = e.clientY - __dragEl.offsetTop;
__dragging = true;
};
function __dragMove(e) {
if(typeof __dragging == 'undefined' || !__dragging) return;
e = e ? e : window.event;
__dragEl.style.left = (e.clientX - __dragX)+'px';
__dragEl.style.top = (e.clientY - __dragY)+'px';
};
</script>
<style type="text/css">
a img{
border:0;
}
#tabela1 table, #tabela2 table {
border:1px solid black;
background:white;
width:420px;
}
#tabela1 th.drag, #tabela2 th.drag{
background:green;
color:white;
font-variant: small-caps;
}
#tabela1 th.drag a, #tabela2 th.drag a{
text-decoration: none;
background:green;
color:white;
font-variant: small-caps;
position: absolute;
left:397px;
}
#tabela1 th.drag a:hover, #tabela2 th.drag a:hover {
color:red;
position: absolute;
left:397px;
}
#tabela1, #tabela2{
position: absolute;
left:25%;
top:25%;
z-index:1;
}
#tabela1 table tr td, #tabela2 table tr td{
align-text: justify;
}
</style>
</head>
<body onload="initDragDrop()">
<a href="#" onclick="mostra('tabela1')" ondblclick="mostra('tabela1')"><img src="samurai-champloo.jpg" width="400" height="290" alt="sc" /></a>
<div id="tabela1" style="display:none">
<table>
<tr>
<th class="drag" onmouseover="__dragId = 'tabela1'">Samurai Champloo<a href="#" onclick="oculta('tabela1')" ondblclick="oculta('tabela2')">X</a></th>
</tr>
<tr>
<td>Samurai Champloo é uma série de anime dirigida por Shinichiro Watanabe, famoso por Cowboy Bebop.</p>
A série se passa numa versão fictícia do Período Edo, misturando elementos reais da época com elementos
modernos como hip-hop. O nome "champloo" vem de uma palavra do dialeto de Okinawa, "Champuruu" que significa "misturar".</td>
</tr>
</table>
</div>
<!--OUTRA IMAGEM-->
<a href="#" onclick="mostra('tabela2')" ondblclick="mostra('tabela2')"><img src="gunnm.jpg" width="400" height="398" alt="g" /></a>
<div id="tabela2" style="display:none">
<table>
<tr>
<th class="drag" onmouseover="__dragId = 'tabela2'">Gunnm<a href="#" onclick="oculta('tabela2')" ondblclick="oculta('tabela2')">X</a></th>
</tr>
<tr>
<td>Gunnm "Gun-Mu", algo como sonho de uma arma é um mangá de ficção científica lançado em 1990, no Japão, e já editado
em vários países da Asia, Europa, America Latina, Brasil e Estados Unidos.</p>
A história se passa em um cenário pós-apocalitico ao estilo de Mad Max em que uma cidade chamada Zalém flutua no céu e
em que há ciborgues e humanos convivendo.</td>
</tr>
</table>
</div>
<h2>Clique na imagem e aparecerá uma tabela. Ondem possui um "X" para fechá-la.</h2>
<h2>clicando e segurando o botão do mouse sobre o cabeçalho da tabela, você poderá arrastar o mesmo.</h2>
</body>
</html>
Pergunta
Rodrigo26
Bom dia a todos,
Estou tentando entender melhor javascript.
Tenho preferência em colocar comentários em cada linha de código javascript para um melhor esclarecimento.
Sendo que empanquei, se alguém puder complementar a explicação fico agradecido.
<html> <head> <title>Exemplo</title> <script language="javascript"> //função mostra que espera que seja passado um parâmetro para a variável id function mostra(id) { /*pegue no documento html o elemento id passado para variável id e altere o seu estilo de display como block*/ document.getElementById(id).style.display = "block"; } //função mostra que espera que seja passado um parâmetro para a variável id function oculta(id) { /*pegue no documento html o elemento id passado para variável id e altere o seu estilo de display como none*/ document.getElementById(id).style.display = "none"; } //MOVENDO function initDragDrop() { //variáveis que guardam as coordenadas x e y __dragX = 0; __dragY = 0; //guarda o id do elemento __dragId = ''; //cria a variável gragging com a condição falsa. __dragging = false; /*pegue no documento html o corpo e o movimento para baixo do mouse seja atibuído a _dragDown*/ document.body.onmousedown = __dragDown; /*pegue no documento html o corpo o movimento de esquerda e direita seja atibuído a _dragMove*/ document.body.onmousemove = __dragMove; /*pegue no documento html o corpo e o movimento para cima do mouse e reconfigure _dragging como falso*/ document.body.onmouseup = function() { __dragging = false; }; } //-------------------------------------------EMPANQUEI FOI NESSAS FUNÇÕES---------------------------------------------- //Função _dragDown que espera um parâmetro e function __dragDown(e) { e = e ? e : window.event; __dragEl = document.getElementById(__dragId) || null; var _target = document.all ? e.srcElement : e.target; if(!__dragEl || !(/drag/.test(_target.className))) return; __dragX = e.clientX - __dragEl.offsetLeft; __dragY = e.clientY - __dragEl.offsetTop; __dragging = true; }; function __dragMove(e) { if(typeof __dragging == 'undefined' || !__dragging) return; e = e ? e : window.event; __dragEl.style.left = (e.clientX - __dragX)+'px'; __dragEl.style.top = (e.clientY - __dragY)+'px'; }; </script> <style type="text/css"> a img{ border:0; } #tabela1 table, #tabela2 table { border:1px solid black; background:white; width:420px; } #tabela1 th.drag, #tabela2 th.drag{ background:green; color:white; font-variant: small-caps; } #tabela1 th.drag a, #tabela2 th.drag a{ text-decoration: none; background:green; color:white; font-variant: small-caps; position: absolute; left:397px; } #tabela1 th.drag a:hover, #tabela2 th.drag a:hover { color:red; position: absolute; left:397px; } #tabela1, #tabela2{ position: absolute; left:25%; top:25%; z-index:1; } #tabela1 table tr td, #tabela2 table tr td{ align-text: justify; } </style> </head> <body onload="initDragDrop()"> <a href="#" onclick="mostra('tabela1')" ondblclick="mostra('tabela1')"><img src="samurai-champloo.jpg" width="400" height="290" alt="sc" /></a> <div id="tabela1" style="display:none"> <table> <tr> <th class="drag" onmouseover="__dragId = 'tabela1'">Samurai Champloo<a href="#" onclick="oculta('tabela1')" ondblclick="oculta('tabela2')">X</a></th> </tr> <tr> <td>Samurai Champloo é uma série de anime dirigida por Shinichiro Watanabe, famoso por Cowboy Bebop.</p> A série se passa numa versão fictícia do Período Edo, misturando elementos reais da época com elementos modernos como hip-hop. O nome "champloo" vem de uma palavra do dialeto de Okinawa, "Champuruu" que significa "misturar".</td> </tr> </table> </div> <!--OUTRA IMAGEM--> <a href="#" onclick="mostra('tabela2')" ondblclick="mostra('tabela2')"><img src="gunnm.jpg" width="400" height="398" alt="g" /></a> <div id="tabela2" style="display:none"> <table> <tr> <th class="drag" onmouseover="__dragId = 'tabela2'">Gunnm<a href="#" onclick="oculta('tabela2')" ondblclick="oculta('tabela2')">X</a></th> </tr> <tr> <td>Gunnm "Gun-Mu", algo como sonho de uma arma é um mangá de ficção científica lançado em 1990, no Japão, e já editado em vários países da Asia, Europa, America Latina, Brasil e Estados Unidos.</p> A história se passa em um cenário pós-apocalitico ao estilo de Mad Max em que uma cidade chamada Zalém flutua no céu e em que há ciborgues e humanos convivendo.</td> </tr> </table> </div> <h2>Clique na imagem e aparecerá uma tabela. Ondem possui um "X" para fechá-la.</h2> <h2>clicando e segurando o botão do mouse sobre o cabeçalho da tabela, você poderá arrastar o mesmo.</h2> </body> </html>O exemplo pode ser baixado para visualização em:
http://www.4shared.com/file/113651438/ba26...javascript.html
abrs,
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.