Curso de Programação em Javascript e HTML
204 pág.

Curso de Programação em Javascript e HTML


DisciplinaProgramação I20.572 materiais240.107 seguidores
Pré-visualização40 páginas
#ffffcc">
 Veja o que acontece quando o mouse deixa de estar
 sobre este parágrafo com fundo amarelo.
 </p>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 134
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Detectar o elemento para o qual se deslocou o mouse
<html>
<head>
<title>Exemplo</title>
</head>
 <!--
 A linha anterior faz o carregamento da biblioteca de compatibilidade
 para o objeto event.
 -->
 function saiu(event)
 {
 var a=evento_FromTo(event)
 var objDestino=a[1]
 var objPartida=a[0]
 var s=&quot;O mouse abandonou o elemento cujo id é &quot;+objPartida.id
 s+=&quot;\ne dirigiu-se para o elemento cujo id é &quot;+objDestino.id
 alert(s)
 /*
 As funções eventFromElement() e eventToElement()
 são definidas na biblioteca de compatibilidade
 */
 }
<body>
 Detectar o elemento para o qual se deslocou o mouse
 <div id=&quot;caixa1&quot; style=&quot;background-color: red&quot;>
 Esta é a caixa 1.
 <div id=&quot;caixa2&quot; onmouseout=&quot;saiu(event)&quot;
 style=&quot;border: solid 1px #cccccc; background-color:white; margin:20px&quot;>
 Esta é a caixa 2. Passe com o mouse sobre ela e depois
 faça-o sair para ver o que acontece.
 </div>
 Estamos de novo na caixa 1.
 </div>
 Passe com o mouse sobre a caixa 2 e depois faça-o sair para ver o que
 acontece.
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 135
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Detectar o elemento de onde vem o mouse
<html>
<head>
<title>Exemplo</title>
</head>
 <!--
 A linha anterior faz o carregamento da biblioteca de compatibilidade
 para o objeto event.
 -->
 function entrou(event)
 {
 var a=evento_FromTo(event)
 var objDestino=a[1]
 var objPartida=a[0]
 var s=&quot;O mouse entrou no elemento cujo id é &quot;+objDestino.id
 s+=&quot;\nvindo do elemento cujo id é &quot;+objPartida.id
 alert(s)
 /*
 As funções eventFromElement() e eventToElement()
 são definidas na biblioteca de compatibilidade
 */
 }
<body>
 Detectar o elemento de onde partiu o mouse ao deslocar-se para a caixa 2
 <div id=&quot;caixa1&quot; style=&quot;background-color: red&quot;>
 Esta é a caixa 1.
 <div id=&quot;caixa2&quot; onmouseover=&quot;entrou(event)&quot;
 style=&quot;border: solid 1px #cccccc; background-color:white; margin:20px&quot;>
 Esta é a caixa 2. Passe com o mouse sobre ela para
 descobrir de onde ele vem.
 </div>
 Estamos de novo na caixa 1.
 </div>
 Passe com o mouse sobre a caixa 2 e depois faça-o sair para ver o que
 acontece.
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 136
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Reagir a um clique do mouse
<html>
<head>
<title></title>
 function clicou()
 {
 alert(&quot;Ai... Não faça isso!&quot;)
 }
</head>
<body>
 <p onclick=&quot;clicou()&quot; style=&quot;background-color: #ffffcc&quot;>
 Veja o que acontece se clicar neste parágrafo com fundo amarelo.
 </p>
</body>
</html>
Reagir quando o botão do mouse é pressionado
<html>
<head>
<title></title>
 function mousedown()
 {
 alert(&quot;Isto é demais... Já não tenho sossego nenhum!&quot;)
 }
</head>
<body>
 <p onmousedown=&quot;mousedown()&quot; style=&quot;background-color: #ffffcc&quot;>
 Veja o que acontece se pressionar o botão esquerdo do
 mouse enquanto ele está sobre este parágrafo com fundo amarelo.
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 137
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 </p>
</body>
</html>
Reagir quando o botão do mouse é libertado
<html>
<head>
<title></title>
 function mouseup()
 {
 alert(&quot;Muito obrigado!&quot;)
 }
</head>
<body>
 <p onmouseup=&quot;mouseup()&quot; style=&quot;background-color: #ffffcc&quot;>
 Veja o que acontece ao libertar o botão esquerdo do
 mouse enquanto ele está sobre este parágrafo com fundo amarelo.
 </p>
</body>
</html>
Onde estava o mouse quando aconteceu o evento?
<html>
<head>
<title></title>
 function pressionou(event)
 {
 var s=&quot;clientX=&quot;+event.clientX+&quot;\nclientY=&quot;+event.clientY
 s+=&quot;\n\nscreenX=&quot;+event.screenX+&quot;\nscreenY=&quot;+event.screenY
 s+=&quot;\n\noffsetX=&quot;+event.offsetX+&quot;\noffsetY=&quot;+event.offsetY
 s+=&quot;\n\nx=&quot;+event.x+&quot;\ny=&quot;+event.y
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 138
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 alert(s)
 }
</head>
<body>
 <p onmousedown=&quot;pressionou(event)&quot; style=&quot;background-color: #ffffcc&quot;>
 Clique sobre este parágrafo com fundo amarelo e
 fique sabendo as coordenadas do ponto em que ele se encontra.
 </p>
</body>
</html>
Detectar qual dos botões do mouse foi pressionado
<html>
<head>
<title></title>
 function pressionou(event)
 {
 alert(event.button)
 }
</head>
<body>
 <p onmousedown=&quot;pressionou(event)&quot; style=&quot;background-color: #ffffcc&quot;>
 Pressione algumas vezes o botão esquerdo do mouse e outras o
 botão direito sobre este parágrafo com fundo amarelo.
 </p>
</body>
</html>
Reagir quando uma tecla é pressionada
<html>
<head>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 139
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
<title></title>
 function pressionou(event)
 {
 var codigo=event.keyCode
 var tecla=String.fromCharCode(codigo)
 alert('Você pressionou a tecla &quot;'+tecla+'&quot; (código '+codigo+')')
 return false
 }
</head>
<body onkeydown=&quot;pressionou(event)&quot;>
 <p>
 Clique sobre o exemplo e depois pressione algumas teclas.
 </p>
</body>
</html>
Reagir quando uma tecla é libertada
<html>
<head>
<title></title>
 function libertou(event)
 {
 var codigo=event.keyCode
 var tecla=String.fromCharCode(codigo)
 alert('Libertou a tecla &quot;'+tecla+'&quot; (código '+codigo+')')
 return false
 }
</head>
<body onkeyup=&quot;libertou(event)&quot;>
 <p>Clique sobre o exemplo e depois pressione algumas teclas.</p>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 140
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Usar evento onmousedown para trocar imagens
<html>
<head>
 function abreBoca()
 {
 document.getElementById(&quot;imagem&quot;).src=&quot;aberta.jpg&quot;
 }
 function fechaBoca()
 {
 document.getElementById(&quot;imagem&quot;).src=&quot;fechada.jpg&quot;
 }
<title></title>
</head>
<body>
 <img onmouseup=&quot;fechaBoca()&quot; onmousedown=&quot;abreBoca()&quot; id=&quot;imagem&quot;
 height=&quot;115&quot; src=&quot;fechada.jpg&quot; width=&quot;86&quot;>
 <p>Clique sobre a fotografia para ele abrir a boca</p>
</body>
</html>
Onchange
<html>
<head>
 function browserPreferido()
 {
 prefere=document.forms[0].browsers.value
 alert(&quot;Eu prefiro o &quot; + prefere)
 }
<title></title>
</head>
<body>
 <form>
 <select id=&quot;browsers&quot; onchange=&quot;browserPreferido()&quot;>
 <option selected=&quot;selected&quot;>Escolha um Browser</option>
 <option value=&quot;Mozilla/Netscape&quot;>Mozilla</option>
 <option value=&quot;Microsoft Internet Explorer&quot;>Internet Explorer</option>
 <option value=&quot;Opera&quot;>Opera</option>
Carregar mais