J A V A S C R I P T - ( 
)
O JavaScript deveria ser mais uma simples extensão do HTML, do que uma linguagem
orientada a objetos
* Página melhor visualizada no " navegador Chrome "
Index
01 - O que é javascript ?
02 - Botão ao clicar no evento onClick mostrará uma mensagem
03 - Valida campos e formata campos com cor
04 - Função mostra mensagem
05 - Evento onLoad - ao carregar a página
06 - Validando campo ( número )
07 - Botão direito do mouse
08 - Links no botões
09 - Validando campos
10 - Validando campos no formulário + css
11 - Links abrindo janelas
12 - Enviando email com cópia oculta
13 - Converte para letras maiúsculas
14 - Validando campos nome e email
15 - Validando campos
16 - Aceita somente números
17 - Redirecionando em 10 segundos
18 - Snippets
01 - O que é Javascript ? 
O JavaScript deveria ser mais uma simples extensão do HTML, do que uma linguagem
orientada a objetos. Mas de uma forma ou de outra, ele permite bons truques para
web designers. Pois utilizando apenas algumas linhas de código JavaScript,
é possível transformar suas páginas na Internet se comportarem em verdadeiras
aplicações multimídias, com botões que reagem quando o mouse passa por cima deles...
JavaScript é uma implementação da linguagem Java, só que interpretada. O programa
browser( navegador) lê o código fonte em JavaScript, interpreta as instruções e as
executa.
02 - Botão ao clicar no evento onClick mostrará uma mensagem
Ao clicar no botão irá disparar o evento "click" e será mostrado "Hello Javascript"
no campo.
[ Resultado ]
03 - Valida campos e formata campos com cor
[ Resultado ]
04 - Função mostra mensagem
05 - Evento onLoad - ao carregar a página
[ Resultado ]
06 - Validando campo ( número )
[ Resultado ]
07 - Botão direito do mouse
[ Resultado ]
08 - Links no botões
[ Resultado ]
09 - Validando campos
[ Resultado ]
10 - Validando campos no formulário + css
Resultado
11 - Links abrindo janelas
Resultado
12 - Enviando email com cópia oculta
Resultado
13 - Converte para letras maiúsculas
Resultado
Código fonte
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function UP_Letra(evento, valida, maiuscula) {
if (evento.target) {
codigo = evento.target;
}
else {
codigo = event.srcElement;
}
element = codigo.value;
if (maiuscula == 'true') {
element = element.toUpperCase();
}
var new_element = "";
for (vIdx=0; vIdx < element.length; vIdx++) {
if (valida.indexOf(element.substr(vIdx, 1)) != -1
|| (maiuscula == 'false' &&
valida.toLowerCase().
indexOf(element.substr(vIdx, 1)) != -1) ) {
new_element = new_element + element.substr(vIdx, 1);
}
}
codigo.value = new_element;
}
</script>
</head>
<body>
<br><br>
Texto digitado no campo abaixo será convertido para letras maiúsculas <br><br>
<input type="text" name="texto" size="50" maxlength="50" onkeyup="UP_Letra(event,
' ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'true')">
</body>
</html>
|
14 - Validando campos "nome e email"
Resultado
Código fonte
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function func_nome(form) {
if (form.campo_nome.value == "")
alert("Favor digitar seu nome, obrigado.")
else {
alert("Olá "+form.campo_nome.value+"! Aceitei o que você digitou...");
}
}
function func_email(form) {
if (form.campo_email.value == "" ||
form.campo_email.value.indexof('@', 0) == -1)
alert("Favor digitar um um e-mail válido, obrigado.");
else
alert("Ok");
}
</script>
</head>
<body>
<form name="form">
<pre>
Nome..: <input type="text" name="campo_nome" id="campo_nome"><input type="button"
name="button1" value="Check it" onClick="func_nome(this.form)">
<br><br>
E-mail.: <input type="text" name="campo_email" id="campo_email"><input type="button"
name="button2" value="Check it" onClick="func_email(this.form)">
</pre>
</body>
</html>
|
15 - Validando campos
Resultado
Código fonte
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
<!--
function Valida_Campos()
{
var campo = document.forms[0];
var i=0;
for (i=0; i<campo.elements.length; i++)
{
var valida = campo.elements[i].value;
if (valida == '')
{
alert('O campo ' + campo.elements[i].name + ' deve ser preenchido, obrigado.');
return false;
}
}
}
//-->
</script>
</head>
<body>
<!-- Carater representa espaço em branco =   -->
<form name="form1" onsubmit="return Valida_Campos();">
Campo 1 : <input type="text" name="campo1"/>   <br>
Campo 2 : <input type="text" name="campo2"/>   <br>
Campo 3 : <input type="text" name="campo3"/>   <br><br>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
|
16 - Aceita somente números
Resultado
Código fonte
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
function so_numeros(e) {
var nav4 = window.Event ? true : false;
if(window.event) { // Internet Explorer
nav4 = event.keyCode;
}
else { // Firefox
nav4 = e.which;
}
if(nav4 >= 48 && nav4 <= 57 || nav4 == 8 || nav4 == 9 || nav4 == 0) return true;
return false;
}
</script>
</head>
<body OnLoad="document.form1.nr.focus();">
<!-- Linha acima = deixa ponteiro do mouse no campo "nr" -->
Aceita somente números <br><br>
<form name="form1">
<input type="text" name="nr" maxlength="8" size="8"
onKeypress=" return so_numeros(event);">
</form>
</body>
</html>
|
17 - Redirecionando em 10 segundos
Resultado
Código fonte
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT LANGUAGE="JavaScript">
var start=new Date();
start=Date.parse(start)/1000;
var counts=10;
function CountDown(){
var now=new Date();
now=Date.parse(now)/1000;
var x=parseInt(counts-(now-start),10);
if(document.form1){document.form1.clock.value = x;}
if(x>0){
timerID=setTimeout("CountDown()", 100)
}else{
location.href="http://w3schools.com"
}
}
</script>
<SCRIPT LANGUAGE="JavaScript">
window.setTimeout('CountDown()',100);
</script>
</head>
<body>
<br><br>
Em 10 segundos será redirecionado para outro site. <br><br>
<form name="form1">
Em <input type="text" name="clock" size="2" value="10">
segundos voce vai ser redireciando para w3schools.com
</form>
</body>
</html>
|
18 - Snippets
===[ Checkbox ]===
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Checkbox </title>
<script language="JavaScript">
function marcar(){
var boxes = document.getElementsByName("linguagem");
for(var i = 0; i < boxes.length; i++)
boxes[i].checked = true;
}
function desmarcar(){
var boxes = document.getElementsByName("linguagem");
for(var i = 0; i < boxes.length; i++)
boxes[i].checked = false;
}
</script>
</head>
<body>
<form name="form">
<input type="checkbox" name="linguagem">Java
<input type="checkbox" name="linguagem">Delphi
<input type="checkbox" name="linguagem">C++
</form>
<a href="javascript:marcar()">Marcar Todas</a> |
<a href="javascript:desmarcar()">Desmarcar Todas</a>
</body>
</html>
-----------------------------------------------------------
===[ Clicando no botão será aberta tela / site na posição defininida ]===
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Checkbox </title>
<!-- A linha abaixo foi quebrada por causa da visualização mas deve
ser digitada em uma única linha -->
<script type="text/javascript">
function open_win(){
window.open("http://www.w3schools.com","_blank","toolbar=yes, location=no,
directories=no, status=no, menubar=no, scrollbars=yes,
resizable=yes, copyhistory=yes, width=600, height=600")
}
</script>
</head>
<body>
<form>
<input type="button" value="Abre site w3schools" onclick="open_win()">
</form>
</body>
</html>
-----------------------------------------------------------
===[ Validando data ]===
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Checkbox </title>
<script language = "Javascript">
var dtCh= "/";
var minYear=1900;
var maxYear=2100;
function isInteger(s){
var i;
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
return true;
}
function stripCharsInBag(s, bag){
var i;
var returnString = "";
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}
function daysInFebruary (year){
return (((year % 4 == 0) && ( (!(year % 100 == 0))
|| (year % 400 == 0))) ? 29 : 28 );
}
function DaysArray(n) {
for (var i = 1; i <= n; i++) {
this[i] = 31
if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
if (i==2) {this[i] = 29}
}
return this
}
function isDate(dtStr){
var daysInMonth = DaysArray(12)
var pos1=dtStr.indexOf(dtCh)
var pos2=dtStr.indexOf(dtCh,pos1+1)
var strDay=dtStr.substring(0,pos1)
var strMonth=dtStr.substring(pos1+1,pos2)
var strYear=dtStr.substring(pos2+1)
strYr=strYear
if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
for (var i = 1; i <= 3; i++) {
if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
}
month=parseInt(strMonth)
day=parseInt(strDay)
year=parseInt(strYr)
if (pos1==-1 || pos2==-1){
alert("O formato da data deve ser : dd/mm/yyyy")
return false
}
if (strMonth.length<1 || month<1 || month>12){
alert("Por favor informe um mês válido, obrigado.")
return false
}
if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year))
|| day > daysInMonth[month]){
alert("Por favor informe um dia válido, obrigado.")
return false
}
if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
alert("Por favor informe um ano de 4 digitos entre "+minYear+" e "+maxYear)
return false
}
if (dtStr.indexOf(dtCh,pos2+1)!=-1 ||
isInteger(stripCharsInBag(dtStr, dtCh))==false){
alert("Por favor, digite uma data válida, obrigado.")
return false
}
return true
}
function ValidateForm(){
var dt=document.frmSample.txtDate
if (isDate(dt.value)==false){
dt.focus()
return false
}
return true
}
</script>
</head>
<body>
<form name="frmSample" method="post" action="" onSubmit="return ValidateForm()">
<pre>
Digite uma data ( mm/dd/yyyy ):
<input type="text" name="txtDate" maxlength="10" size="15">
<input type="submit" name="Submit" value="Submit">
</pre>
</form>
</body>
</html>
-----------------------------------------------------------
===[ Definindo imagem no link ]===
<html>
<head>
<title> Mostra figura no link </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script language="javascript">
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
</script>
</head><body>
<a href="../css_01.html" onmouseover="movepic('button','tiger1.png')"
onmouseout="movepic('button','bird1.png')">
<img name="button" src="cat1.png" border=0>
<br>
abre a página mostrando a imagem de um gatinho, quando ponteiro do mouse <br>
estiver sobre o link a imagem será trocada.
</a>
</body>
</html>
-----------------------------------------------------------
===[ Exemplo básico de função ]===
<html>
<head>
<title> Exemplo de função </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
<!--
function funcao_exe()
{
alert("esta é uma função");
}
//-->
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="funcao_exe()"> Executa a função </a>
</body>
</html>
-----------------------------------------------------------
===[ Validando campos ]===
<html>
<head>
<title> Validando campos </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT LANGUAGE="JavaScript">
// Abre formulário com FOCO no campo NOME
function foco_primeiro_campo(formInst, elementInst)
{
if (document.formulario.length > 0)
{
document.formulario.campo_nome.focus();
}
}
function valida_campos()
{
var digits="0123456789"
var temp
if (document.formulario.campo_nome.value=="")
{
alert("Favor digitar um NOME, obrigado.")
document.formulario.campo_nome.focus();
return false
}
if (document.formulario.campo_fone.value=="")
{
alert("Favor digitar um NÚMERO TELEFÔNICO, obrigado.")
document.formulario.campo_fone.focus();
return false
}
if (document.formulario.campo_idade.value=="")
{
alert("Favor digitar uma IDADE, obrigado.")
document.formulario.campo_idade.focus();
return false
}
for (var i=0;i<document.formulario.campo_idade.value.length;i++)
{
temp=document.formulario.campo_idade.value.substring(i,i+1)
if (digits.indexOf(temp)==-1)
{
alert("Aceito somente NÚMEROS no campo IDADE ...")
document.formulario.campo_idade.focus();
return false
}
}
return true
}
</SCRIPT>
<BODY onLoad="foco_primeiro_campo(0,1);">
<font face="tahoma" size="5" color="blue">Validando Campos</font>
<FORM name="formulario" onSubmit="return valida_campos()">
<pre>
Name : <input type="text" size=30 name="campo_nome"> <br>
Fone : <input type="text" size=30 name="campo_fone"> <br>
Idade: <input type="text" size=3 name="campo_idade"> <br>
<input type="submit" value="Submit">
</pre>
</FORM>
</body>
</html>
-----------------------------------------------------------
===[ Dica do dia ]===
<html>
<head>
<title> Dica do dia </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
<!--
var today_obj = new Date()
var today_date = today_obj.getDate()
var tips = new Array()
var tiptitle=' <b>Dica do dia</b> <br><br>'
tips[1] = 'Dica do dia 1'
tips[2] = 'Dica do dia 2'
tips[3] = 'Dica do dia 3'
tips[4] = 'Dica do dia 4'
tips[5] = 'Dica do dia 5'
tips[6] = 'Dica do dia 6'
tips[7] = 'Dica do dia 7'
tips[8] = 'Dica do dia 8'
tips[9] = 'Dica do dia 9'
tips[10] = 'Dica do dia 10'
tips[11] = 'Dica do dia 11'
tips[12] = 'Dica do dia 12'
tips[13] = 'Dica do dia 13'
tips[14] = 'Dica do dia 14'
tips[15] = 'Dica do dia 15'
tips[16] = 'Dica do dia 16'
tips[17] = 'Dica do dia 17'
tips[18] = 'Dica do dia 18'
tips[19] = 'Dica do dia 19'
tips[20] = 'Dica do dia 20'
tips[21] = 'Dica do dia 21'
tips[22] = 'Dica do dia 22'
tips[23] = 'Dica do dia 23'
tips[24] = 'Dica do dia 24'
tips[25] = 'Dica do dia 25'
tips[26] = 'Dica do dia 26'
tips[27] = 'Dica do dia 27'
tips[28] = 'Dica do dia 28'
tips[29] = 'Dica do dia 29'
tips[30] = 'Dica do dia 30'
tips[31] = 'Dica do dia 31'
//-->
</script>
</head>
<body>
<font face="arial" size="3"> A dica do dia é:</font>
<br>
<br>
<font face="verdana" size="10">
<script>
// document.write(tiptitle) //
document.write(tips[today_date])
</script>
</font>
</body>
</html>
-----------------------------------------------------------
===[ Enviar = Submit = com link ou imagem ]===
<html>
<head>
<title> Submit </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form name="myform" method="get" action="../css_01.html">
<p>
Enviar / submit no modo texto <input type="text" name="sample" size="20">
<a href="javascript:void(document.myform.submit())"> Enviar / Submit </a> </p>
<p>
ou enviar / submit com imagem
<a href="javascript:void(document.myform.submit())">
<img border="0" src="submit1.png" width="56" height="22"></a>
</p>
<input type=image src="submit2.png" name="btnsubmit">
<input type=image src="submit3.png" alt="submit">
</form>
</body>
</html>
-----------------------------------------------------------
===[ Desativando o botão direito do mouse ]===
<html>
<head>
<title> Mouse </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT language=JavaScript>
<!--
var message=" Desculpe, esta funcção está destativada.";
function clickIE() {if (document.all) {alert(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {alert(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</SCRIPT>
</head>
<body>
Botão direito do mouse esta desativado
</body>
</html>
-----------------------------------------------------------
===[ Funcao com botoes ]===
<html>
<head>
<title> Funcao </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT>
function funcao1(btn)
{
if (btn.name == "Jura")
{
alert("Este é o Jura.");
}
else if (btn.value == "Bela")
{
alert("Ela é a IsaBela.");
}
else if (btn.value == "Mike")
{
alert("His name is Mike.");
}
else if (btn.value == "Eric")
{
alert("O nome dele é Eric.");
}
else
{
alert("Daz ez Frida...ja ja ja kkk...");
}
}
</SCRIPT>
</head>
<body>
<form>
<input type="button" value="jura" name="jura" onclick="funcao1(this);">
<input type="button" value="bela" name="bela" onclick="funcao1(this);">
<input type="button" value="mike" name="mike" onclick="funcao1(this);">
<input type="button" value="eric" name="eric" onclick="funcao1(this);">
<input type="button" value="frida" name="frida" onclick="funcao1(this);">
</form>
</body>
</html>
-----------------------------------------------------------
===[ Variável Global ]===
<html>
<head>
<title> Funcao </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT>
var var_global_1 = " Esta é uma variável GLOBAL de nome var_global_1 ";
var var_global_2 = " Esta é uma variável GLOBAL de nome var_global_2 ";
function mostrar1()
{
alert(var_global_1);
}
function mostrar2()
{
var_global_1 = " Globla 1 ";
alert(var_global_1);
}
function mostrar3()
{
var_global_2 = " Globla 2 ";
alert(var_global_2);
}
</SCRIPT>
</head>
<body>
<form>
<input type="button" value="teste 1" onclick="mostrar1();">
<input type="button" value="teste 2" onclick="mostrar2();">
<input type="button" value="teste 3" onclick="mostrar3();">
</form>
</body>
</html>
|
19 - Imprime
Código fonte
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Titulo </title>
<SCRIPT LANGUAGE="JavaScript">
function Imprime_Pagina()
{
if (window.print)
window.print()
else
alert("Desculpe, seu navegador não suporta este recurso.");
}
</SCRIPT>
</head>
<body>
<A HREF="javascript:Imprime_Pagina()">Imprime</A>
</body>
</html>
|
20 - Trocando imagem ao passar mouse sobre
Código fonte
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Titulo </title>
</head>
<body>
<A HREF="../css_01.html" onMouseOver="document.pic1.src='moon1.png'" onMouseOut="document.pic1.src='cat1.png'">
<IMG SRC="lion1.png" BORDER=1 NAME="pic1"></a>
</body>
</html>
|
21 - Abre janela com tamanho e posição específica
Código fonte
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT LANGUAGE="JavaScript">
function Nova_Janela(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
</script>
</head>
<body>
<a href="../css_01.html" onclick="Nova_Janela(this.href,'name','400','400','yes');return false;">Abre janela</a>
</body>
</html>
|
