|DoDg3r$| Clan - Javascript

Javascript

O que é Javascript
Uma introdução meramente conceitual à potente linguagem de script do lado do cliente.

Javascript é uma linguagem de programação utilizada para criar pequenos programinhas encarregados de realizar ações dentro do âmbito de uma página web.
Trata-se de uma linguagem de programação do lado do cliente, porque é o navegador que suporta a carga de processamento. Graças a sua compatibilidade com a maioria dos navegadores modernos, é a linguagem de programação do lado do cliente mais utilizado.

Com Javascript podemos criar efeitos especiais nas páginas e definir interatividades com o usuário. O navegador do cliente é o encarregado de interpretar as instruções Javascript e ejxecutá-las para realizar estes efeitos e interatividades, de modo que o maior recurso, e talvez o único, com que conta esta linguagem é o próprio navegador.

Javascript é o seguinte passo, depois do HTML, que pode dar um programador da web que decida melhorar suas páginas e a potência de seus projetos. É uma linguagem de programação bastante simples e pensado para fazer as coisas com rapidez, às vezes com leveza. Inclusive as pessoas que não tenham uma experiência prévia na programação poderão aprender esta linguagem com facilidade e utiliza-la em toda sua potência com somente um pouco de prática.

Entre as ações típicas que se podem realizar em Javascript temos duas vertentes. Por um lado os efeitos especiais sobre páginas web, para criar conteúdos dinâmicos e elementos da página que tenham movimento, mudem de cor ou qualquer outro dinamismo. Por outro lado, Javascript nos permite executar instruções como resposta às ações do usuário, com o que podemos criar páginas interativas com programas como calculadoras, agendas, ou tabelas de cálculo.

Javascript é uma linguagem com muitas possibilidades, permite a programação de pequenos scripts, mas também de programas maiores, orientados a objetos, com funções, estruturas de dados complexas, etc. Ademais, Javascript coloca à disposição do programador todos os elementos que formam a página web, para que este possa acessar a eles e modifica-los dinamicamente.

Com Javascript o programador, que se converte no verdadeiro dono e controlador de cada coisa que ocorre na página quando a está visualizando o cliente.

Nome	Texto
Janela expandida .	<SCRIPT LANGUAGE="JavaScript"> function expandingWindow(website) { var heightspeed = 4; // velocidade vertical var widthspeed = 9; // velocidade horizontal var leftdist = 0; // distância da margem esquerda var topdist = 0; // distância do topo if (document.all) { var winwidth = window.screen.availWidth - leftdist; var winheight = window.screen.availHeight - topdist; var sizer = window.open("","","left=" + leftdist + ",top=" + topdist + ",width=1,height=1,scrollbars=yes"); for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed) { sizer.resizeTo("1", sizeheight); } for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed) { sizer.resizeTo(sizewidth, sizeheight); } sizer.location = website; } else window.location = website; } // fim --> </script> <a href="http://www.yahoo.com" onClick="expandingWindow('http://www.yahoo.com/');return false;">Yahoo</a> <br><a href="http://www.av.com/" onClick="expandingWindow('http://www.av.com/');return false;">Alta Vista</a>
Indicar site enviando url por e-mail .	<A HREF="javascript:location.href='mailto:?SUBJECT=Dê uma olhada neste interessante site. &BODY=' + escape(location.href)">Clique aqui para enviar a URL para seu amigo</A>
Frases randômicas .	<script language="JavaScript"> <!-- quotes = new Array(3); authors = new Array(3); quotes[0] = "As únicas desgraças completas são as desgraças com as quais nada aprendemos."; authors[0] = "William Ernest Hocking"; quotes[1] = "Não possuir algumas das coisas que desejamos é parte indispensável da felicidade."; authors[1] = "Bertrand Russel"; quotes[2] = "o que são dois pontos amarelos no andar térreo do mesmo edifício?"; authors[2] = "Um passarinho comendo o fandangos que suicidou."; index = Math.floor(Math.random() * quotes.length); document.write("<DL>\n"); document.write("<DT><I>" + "\"" + quotes[index] + "\"</I>\n"); document.write("<DD>" + "-- " + authors[index] + "\n"); document.write("</DL>\n"); //done //--> </script>
Fechar o browser .	<a href="javascript:window.close()" target="_top">Sair</a>
Escolher cor de fundo .	<script language="JavaScript"> <!-- document.write("<form name=\"fundocor\">"); document.write("<select onChange=\"document.bgColor = this.options[selectedIndex].value\">"); document.write("<option value=\"FFFFFF\" selected>Branco"); document.write("<option value=\"#D2D2D2\">Cinza"); document.write("<option value=\"#FFFF99\">Amerelo"); document.write("<option value=\"#33CCFF\">Azul"); document.write("</select>"); document.write("</form>"); // --> </script>
Enter funcionando como Tab .	<SCRIPT LANGUAGE="JavaScript"> <!-- Begin nextfield = "campo1"; // nome do primeiro campo do site netscape = ""; ver = navigator.appVersion; len = ver.length; for(iln = 0; iln < len; iln++) if (ver.charAt(iln) == "(") break; netscape = (ver.charAt(iln+1).toUpperCase() != "C"); function keyDown(DnEvents) { // ve quando e o netscape ou IE k = (netscape) ? DnEvents.which : window.event.keyCode; if (k == 13) { // preciona tecla enter if (nextfield == 'done') { alert("viu como funciona?"); return false; //return true; // envia quando termina os campos } else { // se existem mais campos vai para o proximo eval('document.form1.' + nextfield + '.focus()'); return false; } } } document.onkeydown = keyDown; // work together to analyze keystrokes if (netscape) document.captureEvents(Event.KEYDOWN\|Event.KEYUP); // End --> </script> <form action="enter_como_tab.asp" method="post" name="form1" onSubmit="return checa(this);"> Campo 1: <input type="text" name="campo1" size="45" onFocus="nextfield ='campo2';"> Campo 2: <input type="text" name="campo2" size="45" onFocus="nextfield ='campo3';"> Campo 3: <input type="text" name="campo3" size="45" onFocus="nextfield ='campo4';"> Campo 4: <input type="text" name="campo4" size="45" onFocus="nextfield ='done';"> <input type="submit" name="envia" value="Enviar"> </form> ENTER funcionando como TAB:
E-Mail com o campo assunto preenchido .	<form> <input type="button" value="e-mail com o campo assunto preenchido" onclick="parent.location='mailto: email@servidor.com.br?subject=Aqui vem o Assunto &'"> </form>
Direcionador de URL .	<form name="direciona"> <input TYPE="text" NAME="url" VALUE="http://" SIZE="35"> <input type="button" value="IR" onClick="window.location.assign(direciona.url.value)" name="button"> </form>
Descobrir o navegador .	<SCRIPT Language="JavaScript"> document.write ("Seu navegador é " + navigator.appName + " " + navigator.appVersion ); </SCRIPT>
Data e Hora por extenso .	<script language="JavaScript"> hoje = new Date() dia = hoje.getDate() dias = hoje.getDay() mes = hoje.getMonth() ano = hoje.getYear() if (dia < 10) dia = "0" + dia if (ano < 2000) ano = "19" + ano function CriaArray (n) { this.length = n } NomeDia = new CriaArray(7) NomeDia[0] = "Domingo" NomeDia[1] = "Segunda-feira" NomeDia[2] = "Terça-feira" NomeDia[3] = "Quarta-feira" NomeDia[4] = "Quinta-feira" NomeDia[5] = "Sexta-feira" NomeDia[6] = "Sábado" NomeMes = new CriaArray(12) NomeMes[0] = "Janeiro" NomeMes[1] = "Fevereiro" NomeMes[2] = "Março" NomeMes[3] = "Abril" NomeMes[4] = "Maio" NomeMes[5] = "Junho" NomeMes[6] = "Julho" NomeMes[7] = "Agosto" NomeMes[8] = "Setembro" NomeMes[9] = "Outubro" NomeMes[10] = "Novembro" NomeMes[11] = "Dezembro" document.write (NomeDia[dias] + ", " + dia + " de " + NomeMes[mes] + " de " + ano) </script>
Data e Hora .	<script language="JavaScript"> function gettheDate(){ Todays = new Date(); TheDate = "" + Todays.getDate() + " / " + (Todays.getMonth() + 1) + " / " + Todays.getYear() document.clock.date.value = TheDate; } var timerID = null; var timerRunning = false; function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; } function startclock2 () { stopclock(); gettheDate() showtime(); } function showtime () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds() var timeValue = "" + ((hours >12) ? hours -12 :hours) timeValue += ((minutes < 10) ? ":0" : ":") + minutes timeValue += ((seconds < 10) ? ":0" : ":") + seconds timeValue += (hours >= 12) ? " P.M." : " A.M." document.clock.face.value = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true; } document.write ('<form name="clock" onSubmit="0">') document.write ('<input type="text" name="date" size="12" value>') document.write ('<input type="text" name="face" size="12" value></form>') startclock2(); </script>
Calculadora .	<!-- inserir o código listado abaixo na seção HEAD de sua página html --> <SCRIPT LANGUAGE="JavaScript"> <!-- var wynik=0, op=0, nowe=0, nowe2=0, done=1, oset=0, kropka, temp; function reset(value) { document.form1.ekran.value = value; wynik = 0, op = 0, nowe = 0, nowe2 = 0; done = 1; oset = 0; } function wspolna(new_temp) { kropka = 1; if(nowe \|\| done) { nowe = 0; done = 0; temp = new_temp; } { if (temp.indexOf(".")!=-1) { kropka=0; } } } function button(ktory,ktory2) { temp = document.form1.ekran.value; if(ktory2=='.') { wspolna('0'); if(kropka==1) { temp += ktory2; document.form1.ekran.value = temp; oset = 0; } } if(ktory>=0 && ktory<=9) { wspolna(''); if(temp==0 && kropka==1) temp=''; temp += ktory; document.form1.ekran.value = temp; oset = 1; } if(ktory2=='-' \|\| ktory2=='+' \|\| ktory2=='/' \|\| ktory2=='') { if(nowe) op = ktory2 else { if(!nowe2) { op = ktory2; wynik = temp; nowe2=1; } else { wynik = eval(wynik + op + temp); op = ktory2; document.form1.ekran.value = wynik; } oset=0; nowe = 1; } } if(ktory2=='1/x' ) { wynik = eval(1 / temp) ; reset(wynik); } if(ktory2=='sqrt') { wynik = Math.sqrt(temp); reset(wynik); } if(ktory2=='exp' ) { wynik = Math.exp(temp) ; reset(wynik); } if(ktory2=='+/-') document.form1.ekran.value = eval(-temp); if(ktory2=='=' && oset && op!='0') reset(eval(wynik + op + temp)); if (ktory2=='C') reset(0); if(document.form1.ekran.value[0] == '.') document.form1.ekran.value = '0' + document.form1.ekran.value; } //--> </SCRIPT> <p> <!-- inserir o código listado abaixo na seção BODY da sua página html --> <form name="form1"> <TABLE bgcolor="#FF6600"> <TR> <TD> <TABLE BORDER=0 cellspacing=3 cellpadding=1 bgcolor="#FF9933"> <TR align=center bgcolor="#FF6600"> <TD colspan=5> <input type="text" name="ekran" value="0"> </TD> </TR> <TR align=center bgcolor="#FF6600"> <TD colspan=4> <B> <font color="#FFFFFF" face="Georgia, Times New Roman, Times, serif" size="2"> Calculadora </font> </B> </TD> <TD> <input type="button" name="C" value=" C " onclick="button(11,'C')"> </TD> </TR> <TR align=center bgcolor="#FF6600"> <TD> <input type="button" name="7" value=" 7 " onclick="button(7 ,'')"> </TD> <TD> <input type="button" name="8" value=" 8 " onclick="button(8 ,'')"> </TD> <TD> <input type="button" name="9" value=" 9 " onclick="button(9 ,'')"> </TD> <TD> <input type="button" name="/" value=" / " onclick="button(11,'/')"> </TD> <TD> <input type="button" name="sqrt" value="sqrt" onclick="button(11,'sqrt')"> </TD> </TR> <TR align=center bgcolor="#FF6600"> <TD> <input type="button" name="4" value=" 4 " onclick="button(4,'')"> </TD> <TD> <input type="button" name="5" value=" 5 " onclick="button(5,'')"> </TD> <TD> <input type="button" name="6" value=" 6 " onclick="button(6,'')"> </TD> <TD> <input type="button" name="" value=" * " onclick="button(11,'*')"> </TD> <TD> <input type="button" name="exp" value="exp" onclick="button(11,'exp')"> </TD> </TR> <TR align=center bgcolor="#FF6600"> <TD> <input type="button" name="1" value=" 1 " onclick="button(1,'')"> </TD> <TD> <input type="button" name="2" value=" 2 " onclick="button(2,'')"> </TD> <TD> <input type="button" name="3" value=" 3 " onclick="button(3,'')"> </TD> <TD> <input type="button" name="-" value=" - " onclick="button(11,'-')"> </TD> <TD> <input type="button" name="1/x" value="1/x " onclick="button(11,'1/x')"> </TD> </TR> <TR align=center bgcolor="#FF6600"> <TD> <input type="button" name="0" value=" 0 " onclick="button(0,'')"> </TD> <TD> <input type="button" name="+/-" value=" +/- " onclick="button(11,'+/-')"> </TD> <TD> <input type="button" name="." value=" , " onclick="button(11,'.')"> </TD> <TD> <input type="button" name="+" value=" + " onclick="button(11,'+')"> </TD> <TD> <input type="button" name="=" value=" = " onclick="button(11,'=')"> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </form>
Contagem de tempo na página .	No body colocar: <script language="JavaScript"> startday = new Date(); clockStart = startday.getTime(); function initStopwatch() { var myTime = new Date(); var timeNow = myTime.getTime(); var timeDiff = timeNow - clockStart; this.diffSecs = timeDiff/1000; return(this.diffSecs); } function getSecs() { var mySecs = initStopwatch(); var mySecs1 = ""+mySecs; mySecs1= mySecs1.substring(0,mySecs1.indexOf(".")) + " segundo(s)"; document.forms[0].timespent.value = mySecs1 window.setTimeout('getSecs()',1000); } document.write ("<form><input size=15 name=timespent></form>") </script>
confirmar entrada.	<script language ="JavaScript"> function Certeza() { if (!confirm ("Você tem certeza que deseja entrar?" + "\n\n"+ "Aperte OK para continuar ou Cancelar para voltar à página anterior.")) history.go(-1); return " " } document.write (Certeza()) </script>
Browser tremendo .	<script language="JavaScript1.2"> <!-- function tremer(n) { if (self.moveBy) { for (i = 10; i > 0; i--) { for (j = n; j > 0; j--) { self.moveBy(0,i); self.moveBy(i,0); self.moveBy(0,-i); self.moveBy(-i,0); } } } } // Fim --> </script> <a href="javascript:tremer(5)">Tremer</a>
Botão voltar e avançar .	<script language="JavaScript">document.write("<form name=History>")document.write("<input type=button value='<<' onClick=history.back()>")document.write("<input type=button value='>>' onClick=history.forward()>")document.write("</form>"); </script>
Botão imprimir .	<script language="JavaScript1.2"> <!-- function DoPrinting(){ if (!window.print){ alert("Use o Netscape ou Internet Explorer \n nas versões 4.0 ou superior!") return } window.print() } //--> </script> <form> <input type="button" value="Clique para imprimir a página" OnClick="javascript:DoPrinting()"> </form>
Botão animado .	<script language="JavaScript"> var timerID = null var timerRunning = false var charNo = 0 var charMax = 0 var lineNo = 0 var lineMax = 3 var lineArr = new Array(lineMax) var urlArr = new Array(lineMax) lineArr[1] = "Yahoo" urlArr[1] = "http://www.yahoo.com.br" lineArr[2] = "AltaVista" urlArr[2] = "http://www.av.com" lineArr[3] = "Cadê?" urlArr[3] = "http://www.cade.com.br" var lineText = lineArr[1] function StartShow() { StopShow() ShowLine() timerRunning = true } function FillSpaces() { for (var i = 1; i <= lineWidth; i++) { spaces += " " } } function StopShow() { if (timerRunning) { clearTimeout(timerID) timerRunning = false }
Barra de Status 3 .	No body colocar: <script language="JavaScript"> function snapIn(jumpSpaces,position) { var msg = "Coloque a mensagem aqui" var out = "" if (killScroll) {return false} for (var i=0; i<position; i++){ out += msg.charAt(i)} for (i=1;i<jumpSpaces;i++) { out += " "} out += msg.charAt(position) window.status = out if (jumpSpaces <= 1) { position++ if (msg.charAt(position) == ' ') { position++ } jumpSpaces = 100-position } else if (jumpSpaces > 3) { jumpSpaces *= .75} else { jumpSpaces--} if (position != msg.length) { var cmd = "snapIn(" + jumpSpaces + "," + position + ")"; scrollID = window.setTimeout(cmd,5); } else { scrolling = false return false } return true } function snapSetup() { if (scrolling) if (!confirm('Re-initialize snapIn?')) return false killScroll = true scrolling = true var killID = window.setTimeout('killScroll=false',6) scrollID = window.setTimeout('snapIn(100,0)',10) return true } var scrollID = Object var scrolling = false var killScroll = false </script>
Barra de Status 2 .	<script language="JavaScript"> var hellotext="Mensagem Aqui" var thetext="" var started=false var step=0 var times=1 function welcometext() { times-- if (times==0) { if (started==false) { started = true; window.status = hellotext; setTimeout("anim()",1); } thetext = hellotext; } } function showstatustext(txt) { thetext = txt; setTimeout("welcometext()",4000) times++ } function anim() { step++ if (step==7) {step=1} if (step==1) {window.status='>==='+thetext+'===<'} if (step==2) {window.status='=>=='+thetext+'==<='} if (step==3) {window.status='>=>='+thetext+'=<=<'} if (step==4) {window.status='=>=>'+thetext+'<=<='} if (step==5) {window.status='==>='+thetext+'=<=='} if (step==6) {window.status='===>'+thetext+'<==='} setTimeout("anim()",200); } welcometext(); </script>
Barra de Status 1 .	<script language="javascript"> window.defaultStatus="Sua Mensagem vai aparecer aqui" </script>
Barra animada .	<SCRIPT LANGUAGE="JavaScript"> <!-- // Copyright (c) 1996-1997 Tomer Shiran. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.geocities.com/~yehuda/ // autostart - used instead body onload setTimeout('animate()',5); // create row of radio buttons lay(20) // set index of lamp to start animation var current = 0 // set speed (pause in milliseconds between each movement) var speed = 100 function lay(num) { // assign "greater than" character to variable var gt = unescape("%3e") // open form document.write("<FORM NAME='animation'" + gt) // use loop to lay radio buttons down (all buttons in same group) for (var i = 0; i < num; ++i) { document.write("<INPUT TYPE='radio' NAME='lamps'" + gt) } // close form document.write("</FORM" + gt) } function animate() { // click next radio button document.animation.lamps[current].click() // if radio button is the last one reset variable to 0 (otherwise increment) current = (current == document.animation.lamps.length - 1) ? 0 : ++current // recursive call after speed milliseconds timerID = setTimeout("animate()", speed) } // --> </SCRIPT>
Colocar no body .	<SCRIPT language=JavaScript1.2> <!-- var bookmarkurl=document.location var bookmarktitle=document.title function addbookmark(){ if (document.all) window.external.AddFavorite(bookmarkurl,bookmarktitle) } // --> </SCRIPT> <FORM> <INPUT name=BTN_Bookmark onclick=javascript:addbookmark() type=button value="Adicionar aos favoritos"> </FORM>
Transição de cores Background	<h1 align="center"><font face="Verdana"><small><small><small>Quando carrega a página o fundo muda de cor gradualmente.</small></small></small></font><font face="Comic Sans MS"><br> <script> <!-- function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this; } hexa = new makearray(16); for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; function hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16]; } function setbgColor(r, g, b) { var hr = hex(r); var hg = hex(g); var hb = hex(b); document.bgColor = "#"+hr+hg+hb; } function fade(sr, sg, sb, er, eg, eb, step) { for(var i = 0; i <= step; i++) { setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)), Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb * ((step-i)/step) + eb * (i/step))); } } function fadein() { fade( 255,255,255,250,143,0, 64); } function fadeout() { fade(250,143,0, 255,255,255, 64); } fadein(); fadeout(); fadein(); fadeout(); //--> </script> </font>
Criar código javascript de pop-up ao clicar em um botão .	<script language="JavaScript"> <!-- Begin function MakeIt(form){ var txt=form.hidden.value+'<!-Coloque dentro da tag HEAD->\r\n'; txt+='<!-Coloque dentro da tag Body -><a href="http://'+form.url.value+'"><input type="button" name="button" value="'; txt+=form.buttonname.value+'"\r\n'; txt+='onClick="MM_popupMsg('+form.message.value+')"></a>\r\n'; form.code.value=txt; } function ResetPage(form){ if(confirm("Do you wish to start over?")){ form.message.value=""; form.code.value=""; form.buttonname.value=""; } } // End --> </script> <form action=""> <table bgcolor="#FFFFFF" border="2" cellpadding="4" width="100%" height="314" bordercolorlight="#FFFFFF" bordercolordark="#555555"> <tr> <td> <div align="center"><font size="3" face="arial" color="#555555"><b>Nome do botão</b></font></div> </td> <td align="center"><font size="2"><b> <input type="hidden" name="hidden" size="40" value="<script language="JavaScript"> <!-- function MM_popupMsg(msg) { //v1.0 alert(msg); } //--> "> <input type="text" name="buttonname" size="47"> </b></font> </td> </tr> <tr> <td align="center"><font size="3" face="arial"><b>Link do botão ou url</b></font></td> <td align="center"><font size="2"><b> <input type="text" name="url" size="47" value="http://"> </b></font> </td> </tr> <tr> <td height="46"> <div align="center"><font size="3" face="arial"><b>Mensagem no pop-up<br> <font size="1" color="#FF0066">(Escreva a msg dentro das ' ')</font></b></font></div> </td> <td align="center" height="46"><b><font size="2"> <input type="text" name="message" size=47 value="' '"> </font> </b></td> </tr> <tr> <td height="46"> <div align="center"><font size="3" face="arial"><b> <input type="button" value="Criar o código" onClick="MakeIt(this.form);" name="button"> </b></font><font size="3" face="arial" color="#555555"><b><br> <input type="button" name="Button" value="Selecionar o código"onClick="this.form.code.select(); this.form.code.focus()"> <br> </b></font></div> </td> <td align="center" height="46"><b><font size="2" color="#FFFFFF"> <textarea name="code" rows=6 cols=30>