Escolar Documentos
Profissional Documentos
Cultura Documentos
2951 Javascript
2951 Javascript
Pg: 1
ndice ndice ...................................................................................................................................... 1 Introduo ao JavaScript Bsico............................................................................................. 2 Configuraes ......................................................................................................................... 2 Usando o Java Script. ............................................................................................................. 2 Comandos: script language - alert - /script............................................................................ 3 Variveis ................................................................................................................................. 4 Regras para criar uma varivel: .............................................................................................. 4 Comandos: Window.prompt - alert com varivel ............................................................... 5 Comandos ............................................................................................................................... 6 1. document.write( escreva sua informao ); .................................................................... 6 2. document.bgColor= cor em ingls; ............................................................................. 7 3. document.fgColor= cor em ingls; ............................................................................. 7 4. document.title=Ttulo da pgina; ................................................................................ 7 5. document.write (document.lastModified); ..................................................................... 7 6. window.open("URL","nome_da_janela","Parmetros"); ............................................... 7 7. window.location.ref="nome e estenso da outra pgina "; ............................................ 8 8. window.location.reload();............................................................................................... 8 9. window.close( ); ............................................................................................................. 8 10. window.status= ... mensagem ...; ........................................................................... 8 Eventos ................................................................................................................................... 9 Objetos de Formulrio ............................................................................................................ 9 1-) Boto de comando: ........................................................................................................... 9 2-)Boto de radio: ................................................................................................................. 10 3-)Caixa de verificao:........................................................................................................ 10 4-)Caixa de Texto: ................................................................................................................ 10 Operadores do JavaScript ..................................................................................................... 11 Comandos: if e if ..else ...................................................................................................... 13 Comando case ....................................................................................................................... 13 Laos de Repetio em JavaScript ....................................................................................... 14 1-) Estrutura for .................................................................................................................... 14 2-) Estrutura while ................................................................................................................ 15 3-) Estrutura do..while .......................................................................................................... 16 Funes ................................................................................................................................. 16 Funo simples ..................................................................................................................... 16 Funo com parmetro ......................................................................................................... 17 Clculos em JavaScript......................................................................................................... 18 Uso de uma funo de converso ......................................................................................... 20
Fonte de pesquisa site eadcetec.kit.net/javascript APOSTILA ELABORADA atravs da pesquisa feita no endereo acima pela professora Marli H.G.Cazarin El Kadre
Pg: 2
Javascript linguagem de script para construo de pginas da Web utilizando recursos dinmicos. Podemos criar efeitos especiais, controlar os dados digitados em um formulrio e criar algumas animaes. A construo de uma pgina usando Java, deve ser desenvolvida junto com HTML
Configuraes
Antes de iniciar o curso, preciso verificar se o seu navegador est configurado para executar os scripts em Javascript. Com a internet aberta, clique no menu ferramentas Clique na opo: opes da internet
Na guia avanado alterar o item Java VM, ticando toda as 3 opes, como mostra a figura abaixo:
<script language="Javascript">
Java Script
Pg: 3
........ cdigo scripts </script> </head> <body> Corpo da pgina </body> </html>
Codificao normal do HTML tag para indicar o fim da codificao JAVA Script
</head> <body> <script language="Javascript"> ........ cdigo scripts </script> </body> </html> cdigo em JAVA entre as tags
<body> .... </body>
OBS.1
Como o HTML, uma pgina usando JAVA SCRIPT, deve ser digitada em um editor de texto, pode ser o BLOCO DE NOTAS e salvar com a extenso HTML ou HTM
Comandos: script language - alert - /script 1. <script language="Javascript"> Comando para informar o navegador qual
a linguagem de scripts que dever ser interpretada. 2. alert(" ..... escreva sua mensagem aqui ...."); Esta funo exibi uma caixa de dilogo com a mensagem que est entre aspas no final da instruo usa-se ponto-e-vrgula (;) para indicar ao navegador o final de instruo. Tambm pode ser escrito usando o comando window antes de alert. Ex:
Java Script
window.alert("..... escreva sua mensagem aqui ....");
Pg: 4
3. </script> Comando para finalizar o bloco de instrues em Javascript. Exerccio 1 Criar uma pgina usando o comando alert para desejar um Bom Dia.
<html> <head><title>exerccio n 1 </title></head> <script language="Javascript"> alert("Bom dia? Tudo Bem?"); </script> <body> Primeiro exerccio em JAVA SCRIPT </body> </html>
Resultado
Variveis
As variveis permitem guardar dados na memria da mquina durante a execuo de programas, pginas ou scripts. Sempre que forem usadas elas estaro prontas para entrarem em ao e receber ou enviar dados conforme a solicitao do usurio.
Java Script
Exemplo-1 var nome="ETE Silvio de Mattos Carvalho"; nome="ETE Silvio de Mattos Carvalho";
Pg: 5
<html> <head><title>exerccio usando varivel</title></head> <script language="Javascript"> var nome=window.prompt("Digite seu nome.","Nome"); alert("Ol "+nome+" Seja Bem Vindo !!!"); </script> <body> Primeiro exerccio em JAVA SCRIPT </body> </html>
Resultado
Java Script
Pg: 6
Comandos
Pg: 7
4. document.title=Ttulo da pgina;
Define um ttulo para a pgina. Ex: document.title="Curso de Informtica";
5. document.write (document.lastModified);
Exibe a data da ltima atualizao da pgina. Ex: document.write(document.lastModified);
6. window.open("URL","nome_da_janela","Parmetros");
Comando para abrir uma pgina em uma nova janela, alm de controlar sua posio, tamanho e os controles que devero aparecer na nova janela. Ex: window.open("URL","nome_da_janela","Parmetros"); URL : o endereo da pgina a ser aberta nome_da_janela : um nome dado a nova janela a ser aberta que mais tarde poder ser referenciada em cdigo, usando o atributo target. Parmetros: para colocar os controles de janela que devero ser exibidos. So eles: a) status (barra de status): possui dois valores yes(habilita a exibio) e no(desabilita a exibio) b) location (barra de endereo) : possui dois valores yes(habilita a exibio) e no(desabilita a exibio)
Java Script
Pg: 8
c) toolbar (barra de ferramentas) : possui dois valores yes(habilita a exibio) e no(desabilita a exibio) d) menubar (barra de menus) : possui dois valores yes(habilita a exibio) e no(desabilita a exibio) e) scrollsbars (barra de rolagem) : possui dois valores yes(habilita a exibio) e no(desabilita a exibio) f) left e screenX : definem a posio em pixels da janela a ser aberta a partir do lado esquerdo da janela do navegador. O left utilizado no Internet Explorer e o screenX no Netscape. g) top e screenY: definem a posio em pixels da janela a ser aberta a partir do aldo de cima da janela do navegador. O top utilizado no Internet Explorer e o screenY no Netscape. h) height (altura) : Controla a altura da nova janela. Este valor dever ser informado em pixels. i) width (largura) : Controla a largura da nova janela. Este valor dever ser informado em pixels.
8. window.location.reload();
Este comando serve para atualizar a pgina atual no navegador. como se voc pressionasse a tecla F5 ou clicar no menu exibir e selecionar atualizar. Ex: window.location.reload();
9. window.close( );
Este comando fecha a pgina atual que est aberta no navegador e ao fechar ser exibida uma caixa de dilogo do Internet Explorer pedindo para confirmar o fechamento da pgina.
Pg: 9
Eventos so acontecimentos que ocorrem durante a navegao em uma pgina da web. Em Javascript existem basicamente dois tipos de eventos Eventos de Sistemas e Eventos de Mouse 1-) Eventos de Sistemas: So os que entram am ao automaticamente sem a interveno do internauta. Temos: onLoad (ao carregar) e onUnload (ao descarregar) que so escritos na tag <body> . Ex: <html><head><title>Eventos em Java Script </title></head> <body onload="alert('a pgina est sendo carregada .... Seja Bem Vindo!!!')" onUnload = "alert('At mais volte sempre.....')"> </body> </html>
2-) Eventos de Mouse: So aqueles que acionam aes mediante o uso do mouse, abaixo uma relao dos eventos de mouse:
onClick : Ocorre quando o boto do mouse for clicado onDblclick: Ocorre quando o boto do mouse sofrer um clique duplo onmouseMove: Ocorre quando o ponteiro do mouse passar sobre o objeto onmouseOver: Ocorre quando o ponteiro do mouse ficar acima do objeto onmouseOut: Ocorre quando voc retirar o ponteiro do mouse do objeto onSubmit: Ocorre quando o internauta clica no boto enviar com objetos de formulrios onFocus: Ocorre quando um objeto ganhar o focu com o click do mouse ou o uso da tecla TAB onChange : Ocorre quando o contudo de uma caixa de texto for alterado
Objetos de Formulrio
Os objetos de formulrio permite a construo de pginas com botes de comando, botes de rdio, caixa de texto, caixa de seleo, para construo de um formulrio para enviar dados a um destinatrio. Para construir um formulrio todas as tags devero ser escritas entre as tag <form> ....... </form>.
nome do boto, pode ser qualquer um, desde que no seja repetido. rtulo do boto
Pg: 10
<html> <head><title>boto</title></head> <form> <input type="radio" name="opt1" onclick="alert('Voc clicou no boto')">Clique na opo </form>
input type="radio"
Observe que a frase Clique na opo foi colocada fora da tag input
3-)Caixa de verificao:
<html> <head><title>boto</title></head> <form> <input type="checkbox" name="chk1" onclick="alert('Voc clicou no boto')">Clique na opo </form>
input type="checkbox"
4-)Caixa de Texto:
<html> <head><title>boto</title></head> <form> <input type="text" name="texto1" size="35" maxlength="35" value="Curso de Javascript" onChange="alert('Voc alterou o contedo')"> </form> </html> caixa de texto
tamanho da caixa de texto em caracteres quantidade mxima de caracteres que podem ser escritos na
Exemplo: Vamos criar um script que permita ao internauta escolher atravs de um clique no boto uma cor de fundo para sua pgina. <html> <head><title>boto</title></head>
Java Script
Pg: 11
<form> <body> <align="center"><br><h3> Clique em um dos botes para alterar a cor de sua pgina</h3> <input type="button" name="btazul" value="Azul" onclick="document.bgColor=('blue')">   <input type="button" name="btvermelho" value="vermelho" onclick="document.bgColor=('red')">   <input type="button" name="btverde" value="verde" onclick="document.bgColor=('green')">   <input type="button" name="btamarelo" value="amarelo" onclick="document.bgColor=('yellow')">   <input type="button" name="btamareloouro" value="amarelo ouro" onclick="document.bgColor=('gold')">   <input type="button" name="btazulclaro" value="Azul claro" onclick="document.bgColor=('cyan')">   <input type="button" name="btverde claro" value="verde claro" onclick="document.bgColor=('lime')">   </form> </script> </body> </html>
resultado
 
Exerccio 1 Crie um script igual ao exemplo, usando no lugar do button o radio 2 Crie um script para mudar a cor da pgina e mudar a cor da letra use o button e o radio.
Operadores do JavaScript
Os operadores permitem realizar clculos, comparaes e atribuir valores as variveis de memria, durante o acesso a pgina. 1-) Operadores Aritmticos : Servem para realizar clculos matemticos.
Java Script
Operador + * / % ++ -Descrio Adio Subtrao Multiplicao Diviso Mdulo(Resto diviso inteira) Incremento Decremento da Exemplo 1+5 20-15 5*3 12/6 12%6 x=5 x++ x=5 x-Resultado 6 5 15 2 0 x=6 x=4
Pg: 12
2-) Operadores de atribuio: Servem para guardar informaes nas variveis de memria. Operador += -= *= /= %= Exemplo x+=y x-=y x*=y x/=y x%=y Significado x=x+y x=x-y x=x*y x=x/y x=x%y
Significado igual a diferente de maior que maior ou igual a menor que menor ou igual a
Exemplo 15= =15 verdadeiro 15!=15 falso 15>13 verdadeiro 15>=13 verdadeiro 10<20 verdadeiro 13<=35 verdadeiro
4-) Operadores lgicos: Servem para criar um expresso com mais de dois valores para serem comparados. Operador && || Significado E OU Exemplo x=10 e y=5 (x=10)&& verdadeiro (y<10)
(x=10)||(y=10) verdadeiro
Java Script
! NO x!=y verdadeiro
Pg: 13
Comandos: if e if ..else
A instruo if uma das mais importantes em JavaScript , atravs dela que podemos utilizar o conjunto dos operadores de comparao e determinar um novo curso para seu programa. 1-) Estrutura simples if (condio){ Bloco de comandos; }
Exemplo: Considere a=10 e b=20 if ( a<=b){ alert("O valor da varivel a menor que b"); }
2-) Estrutura composta if (condio){ Bloco de comandos verndade; } else{ Bloco de comandos falso; }
Exemplo : Considere a=30 e b=20 if ( a>=b){ alert("O valor da varivel a menor que b"); } else{ alert("O valor da varivel b menor que a"); }
Comando case
um comando de seleo onde durante a execuo do script ele visa encontrar a igualdade. Sintaxe: switch (varivel){ case 'valor 1': { bloco de comandos; break;} case 'valor2: {bloco de comandos;
Java Script
break;} default:{ comando alternativo;} }
Pg: 14
Exemplo <html> <head><title>Uso co comando switch em Javascrit</title> </head> <script language="Javascript"> var mes=window.prompt("Digite um valor entre 1-12",""); switch(mes){ case'1':{alert('Este nmero digitado corresponde ao ms de JANEIRO'); break;} case'2':{alert('Este nmero digitado corresponde ao ms de FEVEREIRO'); break} case'3':{alert('Este nmero digitado corresponde ao ms de MARO'); break;} case'4':{alert('Este nmero digitado corresponde ao ms de ABRIL'); break;} case'5':{alert('Este nmero digitado corresponde ao ms de MAIO'); break;} case'6':{alert('Este nmero digitado corresponde ao ms de JUNHO'); break;} case'7':{alert('Este nmero digitado corresponde ao ms de JULHO'); break;} case'8':{alert('Este nmero digitado corresponde ao ms de AGOSTO'); break;} case'9':{alert('Este nmero digitado corresponde ao ms de SETEMBRO'); break;} case'10':{alert('Este nmero digitado corresponde ao ms de OUTUBRO'); break;} case'11':{alert('Este nmero digitado corresponde ao ms de NOVEMBRO'); break;} case'12':{alert('Este nmero digitado corresponde ao ms de DEZEMBRO'); break;} default: case'1':{alert('Este nmero digitado no corresponde a nenhum ms');} } </script> </html>
Java Script
<script language="Javascript"> for(i=1;i<11;i++){ document.write(i+" ETE Silvio de Mattos Carvalho"+"<br>");} </script> </html>
Pg: 15
A estrutura for composta de trs partes: (inicializao da varivel ; teste condicional e incremento da varivel) assim no exemplo acima a varivel i iniciada com o valor 1. Logo em seguida o teste i<11, isto quer dizer que o lao se repetir at que o valor da varivel i atingir 11. Por fim o incremento a varivel i i++ ( igual a i=i+1).
Resultado
Pg: 16
A estrutura do.. while faz a mesma coisa que as outras duas anteriores, porm alm da varivel de controle do lao ser iniciada antes da instruo do..while, a repetio executada pelo menos uma vez antes da verificao do teste condicional.Veja a colocao no cdigo abaixo:
<html><head><title>Lao de repetio fo</title></head> <script language="Javascript"> var i=1; do{ document.write(i+" ETE Silvio de Mattos Carvalho"+"<br>"); i++;} while(i<11); </script> <html>
Exerccios
Desenvolver uma pgina que contenha cdigo em Javascript que exiba os nmeros de 1 a 15 sucessivamente. Salve com o nome de conta.htm e depois abra no seu navegador. Agora altere o cdigo e faa a impresso na tela em ordem decrescente , ou seja, de 15 a 1. Salve este arquivo com o nome de contadesc.htm
Funes
Uma funo uma rotina com vrios comando desenvolvida pelo programador que fica dispostos de uma forma lgica para chegar a um resultado desejado.
Funo simples
O exemplo abaixo mostra uma funo para digitar um nome e mostra-lo 10 vezes, a fun co executada no evento onclick. <html><head><title>Funes de Usurio em JavaScript</title></head> <script language="Javascript"> function entra(){ var i; var nome=window.prompt("Digite um Nome", ""); for (i=1;i<11;i++){ document.write(nome,"<br>");} } </script>
Java Script
<body> <center><input type="button" name="bt1" value="Clique" onclick="entra()">         <input type="button" name="bt2" value="Fechar" onclick="window.close()"> </center> </body> </html> Detalhes do cdigo
Pg: 17
onclick="entra()" faz a chamada da funo no instante que o ponteiro do mouse for posicionado sobre o boto e efetuar o click. A funo comea com a palavra FUNCTION e termina com } ela abre uma caixa de dilogo e aguarda a digitao de um nome. Depois a informao armazenada na varivel nome. Logo em seguida um lao de repetio iniciado, imprimindo na pgina dez vezes o nome digitado atravs do comando document.write( ). Dentro deste comando existe a varivel nome e depois o cdigo em HTML que realiza a quebra de linha <br> Aps a execuo do exemplo, clique no boto voltar do navegador e depois no boto fechar da pgina que exibida e confirme seu fechamento.
Java Script
Pg: 18
onclick="entra('Curso de Javascript')" refere-se a chamada da funo entra, porm com o parmentro 'Curso de Javascript' que ser enviado para a funo chamada. Na funo chamada function entra(recebe) , existe uma varivel de nome recebe que guarda o valor passado como parmetro. Logo em seguida um lao de repetio iniciado, imprimindo na pgina dez vezes o contedo da varivel recebe atravs do comando document.write( ). Dentro deste comando existe a varivel recebe e depois o cdigo em HTML que realiza a quebra de linha <br> Aps a execuo do exemplo, clique no boto voltar do navegador e depois no boto fechar da pgina que exibida e confirme seu fechamento.
Clculos em JavaScript
Em Javascript possvel realizar clculos, basta para isto entender que necessrio o uso de uma funo que converta um alfanumrico em um nmero inteiro, assim o clculo ser efetuado 1-) Alfanumrico: Imagine uma operao para somar dois nmeros. "10"+"10"= 1010 observe as aspas, isto quer dizer que os nmeros so alfanumricos e portanto foram concatenados(unidos) um ao outro. Veja o cdigo abaixo: <html><head><title>Cculo entre dois afanumricos</title> </head> <script language="Javascript"> var n1='10'; var n2='10'; total=n1+n2; alert("O Resultado da operao com alfanumrico -> "+ total); </script> </html> Resultado do script
Java Script
Pg: 19
2-) Numrico: Agora para realizar uma operao preciso utilizar uma varivel que guarde este valor entre duas variveis total=10+10 o resultado da varivel 20. Veja o cdigo abaixo: <html><head><title>Cculo entre dois afanumricos</title> </head> <script language="Javascript"> var n1=10; var n2=10; total=n1+n2; alert("O Resultado da operao com alfanumrico -> "+ total); </script> </html> Resultado do script.
Pg: 20
Vamos supor que desejamos digitar os dados em duas caixas de textos distintas e depois clicar em um boto que faa o clculo. Ser necessrio o uso de uma funo matemtica que converta os alfanumricos em inteiro. Faremos um script para criar a pgina mostrada abaixo:
Listagem do cdigo completo <htm><head><title>Clculos entre objeto de Texto</title> </head> <script language="Javascript"> function operacao(){ var a=eval(document.formcalc.t1.value); var b=eval(document.formcalc.t2.value); var c=a+b; alert("O Resultado da operao -> "+c); } </script> <body> <form name="formcalc"> <h3><center>Clculo em JavaScript</h3> Digite o primeiro nmero:<input type="text" name="t1" size="4" maxlenght="4"> <br><br> Digite o segundo nmero:<input type="text" name="t2" size="4" maxlenght="4"> <br><br><hr><br><br> <input type="button" name="bt1" value="Calcular" onclick="operacao()">    <input type="reset" name="bt2" value="Cancelar" onclick="document.formcalc.t1.focus()">
Java Script
   <input type="button" name="bt3" value="Fechar" onclick="window.close()"></center> </form></body></html> Detalhes do Cdigo 1-) Cdigo em Javascript <script language="Javascript"> function operacao(){ var a=eval(document.formcalc.t1.value); var b=eval(document.formcalc.t2.value); var c=a+b; alert("O Resultado da operao -> "+c); } </script>
Pg: 21
Definio da funo com o nome de operacao e logo em seguida as duas linhas para capturar os valores digitados nas caixas de textos converte-los atravs da funo eval( ) .. Em seguida realizado o clculo para adio guardando o resultado na varivel c e exibido na caixa de sada com o comando alert( ) 2-) Chamada da funo calculo( ) em Javascript onclick="operacao()" Esta instruo simples, pois foi usado o evento de mouse e feita a meno ao nome de uma funo j citada no cdigo em Javascript.Observe o detalhe das letras minscula pois como j sabe se colocar acentos ou digitar qualquer letra em mausculo a funo no ser localizada. 3-) Limpando o dados digitados <input type="reset" name="bt2" value="Cancelar" onclick="document.formcalc.t1.focus()"> Esta linha o reset representa recomeo e mais adiante a instruo localiza o formulrio(formcalc) e depois a primeira caixa de texto chamada aqui de (t1). Por ltimo o comando (focus( )) se encarrega de fazer o cursor ficar piscando nesta caixa caso o internauta queira digitar outro nmero. 4-) Fechando a Janela <input type="button" name="bt3" value="Fechar" onclick="window.close()"> A instruo (onclick="window.close()") executa o fechamento da janela aps o clique do mouse.