Javascript
Javascript
Javascript
Usada para validação
de
formulários no lado cliente (programa navegador) e Interação com a
página (altera comportamento da pagina).<br>
Paradigma: prototipo funcional, imperativo e script e tem opção para OO<br>
Linguagem interpretada<br>
link
WJavascriptW.xml
referencia
Estrutura Html e javascript
<span style="font-weight: bold;">A
comunicação é de cima para baixo</span><br>
<div style="text-align: center;"><img alt="" src="WEstruturaHtmJs.png"><br>
</div>
<br>
<br>
<br>
Onde declara que
será usado javascript
<span style="font-weight: bold;">1.
Interno a uma
pagina </span>(Html - dentro da tag HEAD ou PHP ou ASP )<br>
<br>
ArquivoHtml1.html :<br>
<HTML><br>
<HEAD><br>
<TITLE><br>
......<br>
</TITLE><br>
<..........><br>
<br>
<table style="text-align: left; width: 755px; height: 60px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="background-color: rgb(204, 204, 204);"><SCRIPT
TYPE="text/javascript"> /* tag
do html para incluir codigo de uma linguagem script */<br>
function NomeDaFuncao ()<br>
{<br>
codigo jascript<br>
}<br>
</SCRIPT></td>
</tr>
</tbody>
</table>
<br>
</HEAD><br>
<br>
<BODY><br>
.....<br>
</BODY><br>
</HTML><br>
<br>
<br>
<span style="font-weight: bold;">2. Externo a uma pagina
como arquivo.js</span><br>
<br>
ArquivoHtml2.htm :<br>
<HTML><br>
<HEAD><br>
<TITLE><br>
</TITLE><br>
<............><br>
<br>
<table style="text-align: left; width: 764px; height: 92px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="background-color: rgb(204, 204, 204);">//
declaração do javascript<br>
<br>
<SCRIPT
TYPE="text/javascript"src="ArquivoJs.js> /*tag do html com
atributo src para declarar arquivo.js externo */<br>
</SCRIPT></td>
</tr>
</tbody>
</table>
<br>
</HEAD><br>
<br>
<BODY><br>
.....<br>
</BODY><br>
</HTML><br>
<br>
ArquivoJs.js<br>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="background-color: rgb(204, 204, 204);">//
codigo javascript<br>
function NomeDaFuncao ([arg1,arg2,...,argN])<br>
{ comnado 1;<br>
[comando2;.....;] <br>
<br>
[return (valorDeRetorno);]<br>
}</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
Onde é chamado
<span style="font-weight: bold;">1.
Interno a uma pagina</span><br>
arquivoHtml1.html<br>
<HTML> <br>
<HEAD><br>
<script ......><br>
</script><br>
</HEAD><br>
.....<br>
<BODY><br>
Digite o seu nome: <input type="text"id="nome"
/><br/><br>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="background-color: rgb(204, 204, 204);"><input
type="button"value="botao"onclick="NomeDaFuncao();"/></td>
</tr>
</tbody>
</table>
.......<br>
</BODY><br>
</HTML><br>
<br>
<span style="font-weight: bold;">2.Externo a uma pagina</span><br>
Uma função<br>
<br>
functionName window.onload =;<br>
<br>
ou<br>
<br>
Várias funções:<br>
<br>
<BODY <br>
window.onload = start; início window.onload =; ><br>
</BODY><br>
<br>
arquivo start.js<br>
função start () {<br>
Function1(); <br>
Function2(); <br>
Function3(); <br>
} <br>
<br>
Exemplo com codigo
javascript
1. Interno ao HTML<br>
Arquivo ExemploHtmComJsInterno<br>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="background-color: rgb(204, 204, 204);"><html><br>
<body><br>
<br>
<script type="text/javascript"><br>
document.write("CODIGO JavaScript!");<br>
// ou<br>
alert("codigo javascript!");<br>
</script><br>
<br>
</body><br>
</html </td>
</tr>
</tbody>
</table>
<br>
<br>
Exemplo:<a href="http://w3schools.com/js/tryit.asp?filename=tryjs_intro" target="_blank">http://w3schools.com/js/tryit.asp?filename=tryjs_intro</a><br>
<br>
2. Externo ao HTML<br>
Arquivo ExemploHtmlComJsExterno.html<br>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="background-color: rgb(204, 204, 204);"><html><br>
<body><br>
<br>
<script type="text/javascript" <br>
src="ExemploJs2.js> <br>
<script type="text/javascript"><br>
{ document.write('<script type="text/javascript"
src="ExemploJs3.js"><\/script>'); <br>
document.write('<script
type="text/javascript"
src="ExemploJs4.js"><\/script>'); <br>
}<br>
<br>
<br>
</script><br>
<br>
</body><br>
</html </td>
</tr>
</tbody>
</table>
<br>
Arquivo ExemploJs2.js
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>document.write("CODIGO JavaScript!");</td>
</tr>
</tbody>
</table>
<br>
Arquivo ExemploJs3.js
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>alert("codigo javascript!");</td>
</tr>
</tbody>
</table>
<br>
Arquivo ExemploJs2.js
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><br>
</td>
</tr>
</tbody>
</table>
Convenções
<br>
<ul>
<li>É uma linguagem case-sensitive</li>
<li><span style="font-weight: bold;">Separador de
declaração</span> Ponto e virgula (;)<br>
Usado para separar variaveis, constantes, expressões,
estruturas de controle, função,objeto<br>
Y=1;<br>
var x=0;<br>
const PI=3.14;<br>
valorAPagar= valor * CPMF;<br>
x=(idade>=18) ? "maior": "Menor";<br>
b=eval(a);<br>
objName = document.getElementById("nome");<br>
for (i=0;i<=9;i++;) { eval ("if
(document.getElementById('fieldOpcao'+i).value=='' {return
false;}"}; </li>
<li><span style="font-weight: bold;">Espaço em
branco</span><br>
Ignora</li>
<li><span style="font-weight: bold;">Strings e
aspas</span><br>
String - sequencia de caracteres de 0 a n dentro de aspas nula ''
'simples' ou "duplas"</li>
<li>Aspas duplas podem ser inseridas em sentenças delimitadas
por aspas simples.<br>
( ' Ele disse, "javascript é interessante" ' )<br>
</li>
<li>Aspas simples podem ser inseridas em sentenças delimitadas
por aspas duplas<br>
<INPUT TYPE="Button"VALUE = "Clique aqui"<br>
onClick = "window.alert('Aguarde um momento '); "></li>
<li>Barra invertida (\) e Strings<br>
\ seguida de outro caracter, significa que não pode ser digitado<br>
'Favor\ndigitar\na\noutra linha'<br>
Favor<br>
digitar<br>
na<br>
outra linha<br>
<br>
\b backspace \n novalinha \t TAB \' \"</li>
<li><span style="font-weight: bold;">Delimitadores</span>
Chaves { } , Parênteses ( ) Colchete [ ] <br>
Sempre abre e fecha<br>
( ) guarda argumentos de metodos e funões<br>
{ } delimitar declarações multiplas {x[0]=0;x[1]=1;}</li>
<li><span style="font-weight: bold;">Comentários</span><br>
// uma linha<br>
/* mais de uma linha - abre e fecha <br>
*/</li>
<li><span style="font-weight: bold;">Função</span><br>
rotinas independentes que executam tarefa especifica. Não estão
associadas a um objeto como os metodos.<br>
function nomeFuncao() {contem variaveis, constantes, expressões,
estruturas de controle, chamada de função, uso de objeto}<br>
Podem ser: nativas (ex.: parseInt,eval, isNan,....) ou podem
ser criadas</li>
<li><span style="font-weight: bold;">Objeto</span><br>
armazena informação (construção) e pode ser acessada, utilizada ou
alterada.<br>
Objeto.nomeMetodo("argumento")<br>
Pode ser: intrinsico (ex: array, boolean, date, function, math, number,
RegExp, String) ou pode ser criado<br>
<br>
</li>
</ul>