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

Curso de Programação em Javascript e HTML


DisciplinaProgramação I20.455 materiais239.467 seguidores
Pré-visualização40 páginas
super potente e com extraordinárias
 propriedades medicinais')&quot; onmouseout=&quot;reset()&quot;>Bagaceira</span><br>
 <span onmouseover=&quot;gettip('Bebida excelente quando muito diluída em 
 Vodka')&quot; onmouseout=&quot;reset()&quot;>Suco de Laranja</span><br><br>
 <div id=&quot;tip&quot;>
</body>
</html>
Alterar a posição de um elemento
<html>
<head>
 function moveleft()
 {
 document.getElementById(&quot;header&quot;).style.position=&quot;absolute&quot;
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 101
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 document.getElementById(&quot;header&quot;).style.left=&quot;0&quot;
 }
 function moveback()
 {
 document.getElementById(&quot;header&quot;).style.position=&quot;relative&quot;
 }
<title></title>
</head>
<body>
 <h1 id=&quot;header&quot; onmouseover=&quot;moveleft()&quot; onmouseout=&quot;moveback()&quot;>Passe com
 o mouse sobre este texto</h1>
</body>
</html>
Texto crescendo
<html>
<head>
 msgfield=null
 txtsize=0
 maxsize=60
 function writemsg()
 {
 if(msgfield==null)
 msgfield=document.getElementById(&quot;msg&quot;)
 if (txtsize<maxsize)
 {
 msgfield.style.fontSize=txtsize
 txtsize++
 timer=setTimeout(&quot;writemsg()&quot;,10)
 }
 }
 function stoptimer()
 {
 clearTimeout(timer)
 }
<title></title>
</head>
<body onload=&quot;writemsg()&quot; onunload=&quot;stoptimer()&quot;>
 <p id=&quot;msg&quot; style=&quot;FONT-SIZE: 2px&quot;>Estou crescendo</p>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 102
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Um efeito dinâmico
<html>
<head>
<!--
 move=150
 var i=0
 var j=0
 var timer
 var header=null
 function moveheader()
 {
 if(header==null)
 header=document.getElementById(&quot;h1&quot;)
 header.style.position=&quot;relative&quot;
 if (i<=move)
 {
 header.style.left=i
 i++
 }
 else
 {
 if (j<=move)
 {
 header.style.top=j
 j++
 }
 else
 {
 if (move>=0)
 {
 header.style.left=move
 header.style.top=move
 move-=1
 }
 } 
 } 
 timer=setTimeout(&quot;moveheader()&quot;,20)
 }
 function stoptimer()
 {
 clearTimeout(timer)
 }
-->
<title></title>
</head>
<body onload=&quot;moveheader()&quot; onunload=&quot;stoptimer()&quot;>
 <h1 id=&quot;h1&quot; style=&quot;LEFT:5px; POSITION:relative&quot;>Cabeçalho em movimento</h1>
</body>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 103
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
</html>
Quadro com texto em deslocamento
<html>
<head>
<style type=&quot;text/css&quot;>
span
 {
 font: 12px arial;
 position: absolute;
 width: 100px;
 height: 500px;
 top: 100px;
 clip:rect(0 100 100 0);
 }
</style>
 var display=null
 var interval
 startPosition=0
 topPosition=17
 endPosition=100
 speed=60
 function scrollit()
 {
 if(display==null)
 display=document.getElementById(&quot;quadro&quot;)
 if (startPosition!=200)
 {
 startPosition=startPosition+1
 topPosition=topPosition-1
 display.style.clip=&quot;rect(&quot; + (startPosition + 1) + &quot; 100 &quot; + 
(startPosition + endPosition) + &quot; 0)&quot;
 display.style.top=topPosition
 interval=setTimeout(&quot;scrollit()&quot;,speed)
 }
 else
 {
 startPosition=0
 topPosition=100
 endPosition=100
 interval=setTimeout(&quot;scrollit()&quot;,speed)
 }
 }
 function stopinterval()
 {
 clearTimeout(interval)
 }
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 104
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>
</head>
<body onload=&quot;scrollit()&quot; onunload=&quot;stopinterval()&quot;>
 <span id=&quot;quadro&quot; style=&quot;CLIP: rect(4px 100px 103px 0px); TOP: 17px&quot;>
 <br><br>
 <b>Este script permite apresentar texto em deslocamento.
 Ele é muito simples e funciona em todos os browsers relevantes.</b>
 </span>
</body>
</html>
Trocar uma imagem por outra
<html>
<head>
 var myImage
 function moveover()
 {
 foto=document.getElementById(&quot;imagem&quot;)
 foto.src=&quot;aberta.jpg&quot;
 }
 function moveback()
 {
 foto.src=&quot;fechada.jpg&quot;
 }
<title></title>
</head>
<body>
 <b>Passe o mouse sobre a imagem</b><br>
 <img id=&quot;imagem&quot; onmouseover=&quot;moveover()&quot; onmouseout=&quot;moveback()&quot; 
 height=&quot;115&quot; src=&quot;fechada.jpg&quot; width=&quot;86&quot;>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 105
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Dar movimento a uma imagem
<html>
<head>
 var i=1
 var myImage
 function starttimer()
 {
 myImage=document.getElementById(&quot;bola&quot;)
 nextMove()
 }
 function nextMove()
 {
 myImage.style.position=&quot;relative&quot;
 myImage.style.left=+i+&quot;px&quot;
 i++
 timer=setTimeout(&quot;nextMove()&quot;,100)
 }
 function stoptimer()
 {
 clearTimeout(timer)
 }
<title></title>
</head>
<body onload=&quot;starttimer()&quot; onunload=&quot;stoptimer()&quot;>
 <img id=&quot;bola&quot; style=&quot;LEFT: 4px; POSITION: relative&quot; height=&quot;32&quot;
 src=&quot;bola.gif&quot; width=&quot;32&quot;>
</body>
</html>
Um cursor que deixa rasto
<html>
<head>
 var i=0
 var txt=new Array(&quot;rastoA&quot;,&quot;rastoB&quot;,&quot;rastoC&quot;)
 function cursor(intervalo, event)
 {
 pos=i*8+5
 if (intervalo=='primeiro')
 i=0
 if(i==0)
 {
 xpos=event.clientX
 ypos=event.clientY
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 106
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 document.getElementById(txt[i]).style.visibility=&quot;visible&quot;
 document.getElementById(txt[i]).style.position=&quot;absolute&quot;
 document.getElementById(txt[i]).style.left=xpos+5
 document.getElementById(txt[i]).style.top=ypos+5
 }
 else
 { 
 document.getElementById(txt[i]).style.visibility=&quot;visible&quot;
 document.getElementById(txt[i]).style.position=&quot;absolute&quot;
 document.getElementById(txt[i]).style.left=xpos+pos
 document.getElementById(txt[i]).style.top=ypos+pos
 }
 i++
 if (i==txt.length)
 i-=1
 setTimeout(&quot;cursor('seguinte')&quot;,10)
 }
<title></title>
</head>
<body onmousemove=&quot;cursor('primeiro', event)&quot;>
 <h1>Mova o cursor sobre este exemplo</h1>
 <span id=&quot;rastoA&quot; style=&quot;VISIBILITY: hidden&quot;>W</span>
 <span id=&quot;rastoB&quot; style=&quot;VISIBILITY: hidden&quot;>3</span>
 <span id=&quot;rastoC&quot; style=&quot;VISIBILITY: hidden&quot;>C</span>
 <br><br><br><br>
</body>
</html>
Apresentar mensagem tipo máquina de escrever
<html>
<head>
 message=&quot;A melhor forma de aprender é com exemplos&quot;
 pos=0
 maxlength=message.length+1
 function writemsg()
 {
 if (pos<maxlength)
 {
 txt=message.substring(pos,0)
 document.forms[0].msgfield.value=txt
 pos++ 
 timer=setTimeout(&quot;writemsg()&quot;, 100)
 }
 }
 function stoptimer()
 {
 clearTimeout(timer)
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 107
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>
</head>
<body onload=&quot;writemsg()&quot; onunload=&quot;stoptimer()&quot;>
 <form>
 <input id=&quot;msgfield&quot; size=&quot;50&quot; value=&quot;T&quot;>
 </form>
</body>
</html>
O presente curso vai prepará-lo para aprender
Carregar mais