Java Script

JavaScript
Prof. Renner Sadeck
2010 renner@cefetrr.edu.br
1
O que JavaScript ?
Linguagem de programaao interpretada criada em 1995 por Brendan Eich da Netscape como extensao do HTML para o Navigator 2.0(browser) usada em browsers e suporte a tecnologias de gateway para servidores HTTP mantida e estendida pela Netscape e esta se tornando como padrao Web pela ECMA,organizacao europeia para padroes em comunicacoes. a linguagem de script client- side mais popular do mundo estando em mais de 35 milhoes de paginas Web baseada em objetos, entidades com propriedades e comportamentos, que podem ser manipulados atravs de eventos do usuario que sao programaveis
renner@cefetrr.edu.br
2
O que JavaScript ?
Oferece recursos interativos que faltam no HTML permitindo criacao de pginas interativas que sao interpretadas pelo browser sem usar recursos do servidor JavaScript nao Java JavaScript nao implementa polimorfismo,herana,encapsulamento case sentive
O que pode ser feito com JavaScript ?

Operaoes matematicas e computacionais Abrir janelas do browser,trocar informaoes entre janelas, barra de estado, plug-ins, histrico Gerar documentos com aparncia definida na visualizaao com base em dados do cliente como cookies e outras propriedades Interaao com o usuario atravs do tratamento de eventos Interaao com o conteudo do documento tratando toda a pagina como estrutura de objetos
O que preciso para programar em JavaScript ?

Apenas de um editor de texto como bloco de notas (Windows) ou Vi( Unix )
Formas de usar JavaScript ?

Dentro de blocos HTML <SCRIPT> </SCRIPT> em varias partes da pagina para: Definir funoes usadas pela pagina Gerar Html em novas paginas ou alterar o procedimento normal de interpretaao do Html da pagina pelo browser Em um arquivo externo importado pela pagina Para definir funoes que serao usadas por varias paginas Dentro de Tags Html sensiveis a eventos Para tratar eventos do usuario em links, botoes e componentes de entrada
Usando Blocos <SCRIPT> embutidos na pagina

Forma mais prtica de usar JavaScript Sintaxe: <script>
instruoes JavaScript </script>
<html> <head> <title> Pagina com uso de JavaScript</title> </head> <body> <br> <h1 align=center>Centro Federal de Educaao Tecnolgica de Roraima</h1> <p>ltima modificao no arquivo: <script> autor ="Renner da Silva Sadeck"; document.write("<b>" + document.lastModified + "</b>"); document.write("<p>Autor: " + autor); </script> <script language="JavaScript1.1">  </script></script> </body> </html>
8
Onde:
language="JavaScript1.1" : o atributo language indicada a verso do JavaScript que esta sendo usado,ou seja,o browser deve ser compatvel email: uma varivel que recebe por atribuicao o valor renner@cefetrr.edu.br) document: um objeto que representa a pagina atual do browser write: um mtodo que escreve na pagina valores provenientes de parametros lastModified: uma propriedade da pagina .(ponto) : usado para ter acesso a mtodos e propriedades de um objeto // : comentario + : usado para concatenar caracteres e strings  : usado para proteger cdigos contra browser antigos que nao suportam JavaScript e que podem exibir o cdigo em vez de execut -lo
Trabalhando com Eventos

O que so eventos?
Acoes provocadas pelo usuario nos objetos Disparam procedimentos construido pelo programador
Eventos nativos do Html

Clique sobre um link ou imagem mapeada Clique em um boto submit (envio de dados do formulario) Clique em boto reset(limpa o formulario)
10
Procedimentos de manuseio de eventos

Evento
onclick onselect onchange onfocus onblur onmouseover onmouseout onsubmit onreset onload onunload
Descrio
Quando um objeto clicado pelo mouse Quando um objeto selecionado Quando uma seleo ou campo de texto tem seu contedo alterado Quando um componente de formulario ou janela se torna ativo Quando um componente de formulario ou janela se torna inativo Quando o mouse est sobre um link Quando o mouse deixa um link Antes de enviar um formulrio Antes de limpar um formulrio Aps carregar uma pgina, janela ou frame Ao deixar uma pgina, janela ou frame Quando a carga de uma imagem abortada Quando um erro ocorre durante a carga de uma imagem ou pgina
Tags Html onde suportado

<a>, <input> <input type=text>, <textarea> <input type=text>, <textarea>, <select> <textarea>, <body>, <form>, <input>, <select>, <option> <textarea>, <body>, <form>, <input>, <select>, <option> <a>, <area> <a>, <area> <form> <form> <body> <body> <img> <img>, <body>
11
onabort
Onerror
<html> <head> <title>Uso de Evento</title> </head> <body> <form> <h2 align=center>Atenao</h2> <div align=center> <p><input type=button value="Nao Pressione" onclick="alert('Isto virus vc esta sendo invadido')"> </div> </form> <a href="http://www.cefetrr.edu.br" onmouseover="alert('Este o endereo do Cefet Roraima')"> Cefet RR </a> </body> </html>
12
Sintaxe e Estrutura do JavaScript

Regras Gerais
case sensitive,diferencia letras maiusculas de minusculas A instruao finalizada por ponto e virgula O uso do ponto e virgula opcional para terminar a instrucao Os terminadores <CR> e <LF> sao considerados terminadores de instrucao quando o interpretador os encontra no fim da instruao Blocos de instruao sao delimitados por chaves { } Comentarios sao representados por // , que usado apenas para uma linha de comentario, e tambem pelo par /* e */
Variaveis
Para definir basta escolher um nome que nao seja palabra reservada Ex: precofinal=12; Pode ser declarada usando a palabra var sem que se receba um valor Ex: var salario; Quanto ao escopo podem ser globais, definidas fora de bloco onde sao visiveis para todo o programa ou pagina html, ou locais (definidas dentro de um bloco de funao).
13
Sintaxe e Estrutura do JavaScript

Ex:
<script> a=3; // escopo: toda a pagina funcion x() { b= 5; // escopo: somente o bloco da funo a=10; } x(); // b nao existe aqu pois variavel local. // a tem valor 10! (pode ser lida em qualquer lugar da pagina) </script>
14
Tipos de dados e literais

number: ex: y=123; string: ex: s=" renner "; boolean: ex: j=true; null: ex: b=null; undefined: ex: k=undefined; object: Obs: Os nomes de variaveis em JavaScript seguem a mesma regra geral vistas em algoritmo.
15
Operadores e expressoes
Operadores aritmticos -a negaao decremento ++n,n++ incremento --n,n-* / + % = Multiplicacao divisao adicao subtracao resto atribuicao Operadores lgicos != diferente de == igual a > Maior que < menor que >= maior ou igual a <= menor ou igual a || or && and ! not ?: condicional , virgula Operadores de objetos new criaao delete remoao void descarta o objeto typeof tipo do objeto Operadores de bits & and | or < < desloc. A esquerda >> desloca a direita >>> desloca a direita s/sinal ^ xor ~ not
Operacao de Atribuicao op= atribuiao com operador op
16
Estruturas de Controle de Fluxo

If..else Sintaxe: if (condicao1) {
Instrucoes caso condicao seja true } else if (condicao2) { Instrucoes caso condicao2 seja true } else { Instrucoes caso condicao1 e condicao2 sejam false }
17
<html> <head> <title> Pagina com uso de JavaScript</title> <script>  </script> </head> renner@cefetrr.edu.br </html>
18
Onde: document.write(parametro) Funcao igual ao write do Pascal pois imprime um valor passado via parametro, que pode ser uma string , varivel ou comandos html. Onde document a classe e write o mtodo. window.prompt(mensagem, texto padro): prompt um mtodo do objeto window, onde mensagem o texto que ser exibido na caixa de mensagem e texto padro o que aparece escrito como entrada padro. parseInt(string) , converte uma representao String em numero, parseFloat(string), converte uma representao String em real
19
Estruturas de Repeticao While

inicializao; while(condio) { // instrues a serem realizadas enquanto condio for true incremento; } Ex:
<html> <head> <title> Pagina com uso de JavaScript</title> <script>  </script> </head> </html>
20
Estruturas de Repeticao FOR

for(inicializacao;condicao;incremento) { // instrues a serem realizadas enquanto condio for true } Ex:
<html> <head> <title> Pagina com uso de JavaScript</title> <script>  </script> </head> </html>
21
Uso de Funao definida pelo programador

Sintaxe:
function nomedafuncao(parametro1,parametro2,..) { implementacao } Ou function nomedafuncao(parametro1,parametro2,..) { implementacao }
22

Ex: <html> <head> <title> Pagina com uso de JavaScript</title> </head> <script>  </script></html> renner@cefetrr.edu.br
23

Ex: <html> <head> <title> Pagina com uso de JavaScript</title> </head> <script>  </script></html> renner@cefetrr.edu.br
24
Objetos
O que ? uma estrutura de dados que pode conter mais de um valor. Exemplo de variaveis simples x=5; y=10; Exemplo de objeto c1= new somaint(124,67) Criando um objeto Para criar-se um objeto deve usar uma funcao construtora que define as caracteristicas do objeto e para chamar esse objeto criado usa-se o operador new.
25
<HTML> <HEAD> <TITLE>Uso de Objetos</TITLE> <script> function somaint(x,y) { // funo "construtora" this.x = x+123; // definio das propriedades deste objeto this.y = y; // a referncia this ponteiro para o prprio objeto } </script> </HEAD> <h1>Soma de Objetos</h1> <script> c1 = new somaint(124,2); // uso da funo construtora document.write("<P>Soma de objeto x e objeto y =", c1.x+c1.y ); </script> </HTML>
26
Hierarquia de Objetos
window
document link anchor
history
location
form
image
27
Ex:
<html> <head> <title> Pagina com uso de Objetos Internos</title> </head> <script>  </script> </html>
28
Objetos Internos Objeto Date: trabalha com datas e horarios usando metodos proprios.
Sintaxe: objeto=new Date() objeto=new Date(ano,mes,dia") objeto=new Date(ano,mes,dia,hora,minuto,segundo")
objeto=new Date(ano,mes,dia,hora:minuto:segundo") <html> <head> <title> Pagina com uso de JavaScript</title> </head> <script>  </script> </html>
29
Objetos Internos
Objeto getDate: retorna o dia do mes de uma data Objeto getDay: retorna o dia da semana Objeto getHours: retorna as horas Objeto getMinutes: retorna os minutos Objeto getMonth: retorna o mes Objeto getSeconds: retorna o valor em segundos da hora Objeto getFullYear: retorna o ano contendo 4 dgitos. Objeto getYear: retorna o ano contendo 2 digitos para anos anteriores a 2000. Objeto getTime: retorna a hora(data) decorrida em milissegundos desde 1 de janeiro de 1970. Objeto getTimezoneOffset: retorna a diferenca de fuso horario em minutos entre a hora de Greenwich e o fuso horario definido no computador que roda o script.
30
<html> <head> <title> Pagina com uso de JavaScript</title> </head> <script>  </script> </html> renner@cefetrr.edu.br
31
Objetos Internos
Objeto setDate: altera o dia do mes de uma data Objeto setDay: altera o dia da semana Objeto setHours: altera as horas Objeto setMinutes: altera os minutos Objeto setMonth: altera o mes Objeto setSeconds: altera os segundos Objeto settFullYear: altera o ano contendo 4 dgitos. Objeto getYear: altera o ano contendo 2 digitos para anos anteriores a 2000. Objeto getTime: altera a hora (data) decorrida em milissegundos desde 1 de janeiro de 1970.
32
<html> <head> <title> Pagina com uso de JavaScript</title> </head> <script>  </script> <body> <form name="form1"> <input type="button" value="ver" onclick="alert(d.getFullYear())" > <input type="button" value="Alterar" onclick="d.setFullYear(2006)" > </form> </body> </html>
33
<html> <head> <title> Pagina com uso de JavaScript</title> </head> <script>  </script> <body> <form name="form1"> <input type="button" value="ver" onclick="alert(d.getFullYear())" > <input type="text" name=a > <input type="button" value="Alterar" onclick="d.setFullYear(parseInt(document.form1.a.value))" > </form> </body> </html>
34
Objeto Math
Fornece propriedades,metodos que sao usados para calculos matematicos Mtodos: abs(numero): retorna o valor absoluto de um numero
acos(numero): retorna o arco cosseno de um numero em radianos asin(numero): retorna o arco seno de um numero em radianos atan(numero): retorna o arco tangente de um numero em radianos ceil(numero): retorna um numero inteiro igual ou imediatamente acima de um determinado numero cos(numero): retorna o cosseno de um numero em radianos sin(numero): retorna o seno de um numero em radianos max(numero1,numero2): retorna o maior de dois numeros min(numero1,numero2): retorna o menor de dois numeros pow(base,expoente): retorna a base elevada ao expoente random(): retorna o um numero aleatorio ente 0 e 1 round(numero): retorna um numero arredondado para o inteiro mais prximo sqrt(numero): retorna a raz quadrada de um numero tan(numero): retorna a tangente de um numero floor(numero): retorna o valor inteiro inferior ou igual ao numero a ser verificado. exp(numero): retorna o logaritmo do numero na base e log(numero): retorna o o logaritmo natural de um numero
35
<HTML> <HEAD> <TITLE>Uso de Objetos</TITLE> </HEAD> <script> c=Math.pow(2,2); // uso da funo construtora document.write("<P>O quadrado de 2 =",c); </script> </HTML>
36
Objeto Array
Permite a criacao de uma colecao de objetos. Sintaxe de criacao: nome_do_array= new array(numero total de indices); Ex:
diasemana=new array(7); Atribuicao de dados ao array: diasemana[0]="domingo";
37
<html> <head> <title> Pagina com uso de Array</title> </head> <script>  </script> <body> <form name="form1"> Digite o numero de 0 a 7: <input type="text" name=numero > <input type="button" value="Checar" onclick="matriz()" > </form> </body> </html> renner@cefetrr.edu.br
38
Objeto Window
Representa uma janela que contem uma pagina html. Propriedades: DefaultStatus:Exibe uma mensagem na barra de status.
<html> <head> <title> Pagina </title> </head> <script>  </script> <body> </body> </html>
39
Propriedades: history:contem a listagem do historico da janela.

<html> <head> <title> Pagina </title> </head> <body> <form> <input type="button" value="Retornar" onclick="history.go(-1)"> <input type="button" value="Avanar >" onclick="history.go(2)"> </form> </body> </html>
40
Mtodos: alert::abre uma caixa de alerta..

<html> <head> <title> Pagina </title> <script>  </script> </head> <body> </body> </html>
41
Mtodos: confirm: abre uma caixa de confirmacao.

<html> <head> <title> Pagina </title> <script>  </script> </head> <body> </body> </html>
42
Mtodos: prompt: abre uma caixa para o usuario digitar uma valor que retornado ao script.
<html> <head> <title> Pagina </title> <script>  </script> </head> <body> </body> </html>
43
Mtodos: open: abre uma janela

<html> <head> <title> Pagina </title> <script>  </script> </head> <body> <form> <input type="button" value="abrir" onclick="abre()"> </form> </body> </html>
44

Java Script

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Java Script

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript

Prof. Renner Sadeck

O que pode ser feito com JavaScript ?

O que preciso para programar em JavaScript ?

Formas de usar JavaScript ?

Usando Blocos <SCRIPT> embutidos na pagina

Trabalhando com Eventos

Eventos nativos do Html

Procedimentos de manuseio de eventos

Tags Html onde suportado

Sintaxe e Estrutura do JavaScript

Sintaxe e Estrutura do JavaScript

Tipos de dados e literais

Operacao de Atribuicao op= atribuiao com operador op

Estruturas de Controle de Fluxo

Estruturas de Repeticao While

Estruturas de Repeticao FOR

Uso de Funao definida pelo programador

Uso de Funao definida pelo programador

Uso de Funao definida pelo programador

document link anchor

Propriedades: history:contem a listagem do historico da janela.

Mtodos: alert::abre uma caixa de alerta..

Mtodos: confirm: abre uma caixa de confirmacao.

Mtodos: open: abre uma janela

Vous aimerez peut-être aussi