JavaScript. Prof. Msc. Juliano Gomes Weber Notas de Aula Aula 12 1º Semestre UNIJUÍ DETEC Ciência da Computação

Tamanho: px

Começar a partir da página:

Download "JavaScript. Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Notas de Aula Aula 12 1º Semestre - 2011. UNIJUÍ DETEC Ciência da Computação"

João Lacerda Macedo
8 Há anos
Visualizações:

1 UNIJUÍ DETEC Ciência da Computação Prof. Msc. Juliano Gomes Weber JavaScript Notas de Aula Aula 12 1º Semestre Tecnologias Web jgw@unijui.edu.br

2 Introdução Com JavaScript implementamos diversos recursos interessantes: Identificar se seu browser é o Internet Explorer, Firefox, Opera, etc. Exibir um relógio que mostra a hora do seu computador, por exemplo: Cumprimentar o leitor de acordo com a hora local: Bom Dia, Boa Tarde ou Boa Noite! Verificar se os dados de um formulário estão corretos. Etc.

Exibir um relógio que mostra a hora do seu computador, por exemplo: Cumprimentar o

3 Objetos em JavaScript - Um objeto possui uma coleção de propriedades - Cada propriedade tem um nome As propriedades armazenam valores que podem ser lidos ou escritos. As propriedades que armazenam funções denominam-se métodos, que podem ser chamados. obj.prop obj.method (argumentos) Nome da propriedade Nome do objeto Nome do método

4 Objetos predefinidos Existem três tipos de objetos: Intrínsecos da linguagem (ex: String, Math) Fornecidos pelo browser (ex: window, navigator) Criados pelo código em JavaScript. O objeto window é usado quando nenhum objeto for explicitamente indicado. Por exemplo: alert é um método de window alert("olá") é equivalente a window.alert("olá") document é uma propriedade de window document.bgcolor é equivalente a window.document.bgcolor

O objeto window é usado quando nenhum objeto for explicitamente indicado.

5 Variáveis Podem armazenar valores de qualquer tipo, por exemplo: strings ou valores numéricos Enquanto não forem iniciadas (primeira atribuição) armazenam o valor especial: undefined Definição da variável var nome [ = expressão ] ; Atribuir a variável Consultar a variável <html> <head> <title>clicar no botão</title> <script> function touch() { var oldcolor; //Para repor a cor oldcolor = document.bgcolor; document.bgcolor = "red"; alert("ui"); document.bgcolor = oldcolor; } </script> </head>...

variável Consultar a variável <html> <head> <title>clicar no botão</title> <script> function touch() { var oldcolor; //Para

6 Exemplo básico utilização de variáveis <html> <head><title> </title></head> <body> <script> a = 2 ; b = 9 ; c = a + b ; alert(c); </script> </body> </html>

7 Acesso ao objeto document O documento HTML é representado pelo objeto document O objeto document tem várias propriedades, por exemplo: Nome bgcolor fgcolor title url Descrição Cor de fundo Cor de escrita Título do documento End. da página. Efeitos Comentário de fim de... // linha comentário <html> <head> <title>clicar no botão</title> <script> // Fundo vermelho enquanto // janela "alert" aberta function touch() { document.bgcolor = "red"; alert("ui"); document.bgcolor = "white"; } </script> </head>... objecto.propriedade Acesso a propriedade

.. // linha comentário <html> <head> <title>clicar no botão</title> <script> // Fundo vermelho enquanto // janela "alert" aberta

8 JavaScript - Eventos Um evento é gerado como resultado de uma ação: Um clique, Um movimento do mouse, Uma seleção de texto, O abandono da página etc.

9 Eventos O tratamento de eventos é feito por trechos de código associados a eventos específicos A associação é realizada em HTML nos elementos que suportam eventos do tipo Event através dos atributos: onevent Por exemplo, para capturar o clique num botão (evento click) seria: <input type = "button" onclick = 'alert( Ola");' />

eventos do tipo Event através dos atributos: onevent Por exemplo, para capturar o

10 Eventos dos elementos HTML Elementos com representação visual Todos exceto: <br>, <head>, <html>, <script>, <style>, <title> onclick ondblclick Clique no botão mouse Duplo clique no mouse onkeydown onkeypress onkeyup onmousedown onmouseup onmouseover onmousemove onmouseout Tecla for pressionada Tecla pressionada Tecla liberada Botão do mouse pressionado Botão do mouse solto mouse entrou no elemento Cursor do mouse passou no elemento mouse saiu do elemento

onmousedown onmouseup onmouseover onmousemove onmouseout Tecla for pressionada Tecla pressionada Tecla liberada

11 Eventos dos elementos HTML <a>,<input>,<select>,<textarea> onfocus Ganha o foco onblur Perde o foco <body> onload onunload Após todo conteúdo carregado Antes de sair <input>, <select>, <textarea> onchange O valor foi alterado onselect Texto foi selecionado

Após todo conteúdo carregado Antes de sair <input>, <select>,

12 JavaScript Mais exemplos.. <html> <body> <script type="text/javascript"> document.write( Olá Mundo!!!") </script> </body> </html>

13 JavaScript <html> <head> <script type="text/javascript"> function alo(k) { var s = ""; for (i = 0; i < k; i++) { s = s + "Alo você!!!" s = s + "<br />" } return s } </script> <title>alouuuuuu</title> </head> <body> <script type="text/javascript"> document.write(alo(4)) </script> </body> </html>

14 Associar código JavaScript ao clique no botão Quando for dado um clique no botão é executado o troço de código (em JavaScript), neste caso: alert( Ola" ); <html> <head> <title>clicar no botão</title> </head> <body> <input type="button" value="clique aqui" onclick='alert( Olá")'; /> </body> </html>

Ola" ); <html> <head> <title>clicar no botão</title> </head> <body> <input

15 Utilização Iniciando um JavaScript <script language="javascript"></script> <script></script> Exemplo: <SCRIPT> document.write( ola mundo! ); </SCRIPT>

16 Execução no Cliente (Browser) Inferno dos web-designers: compatibilidade entre browsers! Firefox Opera Internet Explorer (IE) Safari

17 Exemplos práticos Aciona o link passando o mouse sobre <HTML> <HEAD> <TITLE>Novo Documento</TITLE> </HEAD> <BODY> <A HREF="pagina2.html" onmouseover=location='code.html'>place your mouse here to get the code.</a> </BODY> </HTML> Faça este exemplo:

HREF="pagina2.html" onmouseover=location='code.

18 Exemplos práticos abrir popup passo 1 } <HTML> <HEAD> <TITLE>Novo Documento</TITLE> <Script Language="JavaScript"> function OpenWindow(){ window.open('popup1.html','w1','width=600,height=150,resizable =1,status=0,scrollbars=1,left=100,top=50'); </Script> </HEAD> <BODY> </BODY> </HTML>

19 Exemplos práticos abrir popup passo 2 <FORM> <CENTER> <TABLE BORDER=8> <TR><TD><INPUT TYPE="button" value="click here to start" Name="btnOpenWindow" onclick="openwindow()"></td></tr> </TABLE></CENTER> <P> </FORM> </FONT> </TD></TR> </TABLE> Faça este exemplo:

start" Name="btnOpenWindow" onclick="openwindow()"></td></tr>

20 Mais exemplos práticos alert window Mensagens alert, prompt e confirm são geradas quando fazemos uso das propriedades do objeto window. window.alert("o texto da mensagem vai aqui"); Faça este exemplo

21 Exemplos práticos alert window com variáveis Crie uma caixa de texto e um botão, digitando o código abaixo na parte <body></body> de sua página: <form name="form1"> Digite o seu nome e clique o botão<br> <input type="text" name="text1"> <input type="button" value="clique" onclick="exibir()"> </form>

22 Exemplos práticos alert window com variáveis (cont.) Este código cria um formulário de nome "form1". (você verá mais tarde que todas as vezes que tiver que acessar os componentes de um formulário, deve dar nomes a eles), uma caixa de texto de nome "text1" e um botão. Depois de digitado o código acima, vamos passar à segunda parte do código: Na parte <head></head> de sua página, digite o código seguinte: <script type="text/javascript"> function exibir(){ var nome = document.form1.text1.value; window.alert("bem-vindo ao meu site, " + nome); } </script>

23 Exemplos - A mensagem prompt As mensagens prompt são exibidas ao usuário solicitando que ele digite alguma coisa. De posse da informação desejada, você pode efetuar alguma ação nos seus scripts. As mensagens prompt podem ser escritas com o seguinte argumento: window.prompt(mensagem, texto padrão)

24 Exemplos - A mensagem prompt (cont.) <script type="text/javascript"> var nome; nome = window.prompt("por favor, digite seu nome", "Seu nome"); document.write("bem-vindo ao meu site, " + nome); </script>

25 Fazendo um cálculo com a mensagem prompt Colocar o trecho abaixo dentro das tags referentes ao conteúdo do seu documento html <script type="text/javascript"> var numero1 = parseint(window.prompt("digite um número", "0")); var numero2 = parseint(window.prompt("digite outro número", "0")); var resultado = numero1 + numero2; window.alert("a soma dos números é: " + resultado); </script>

26 Comentários Comentários Em Javascript, podemos utilizar comentários de duas formas Comentários de única linha; Comentários de múltiplas linhas. Exemplos de comentários: <script type="text/javascript"> //Este comentário ocupa uma única linha /*Já este comentário pode utilizar várias linhas*/ </script>

27 Exercícios Fazer um pequeno programa em JavaScript que faça as 4 operações matemáticas básicas (e mostre o seu resultado), recebendo como entrada duas variáveis. (Não utilizar funções); Criar uma função para resolver o problema acima e chamá-la;

Documentos relacionados

Respondendo a eventos

Respondendo a eventos Até agora, a maioria dos scripts que você escreveu foi executado de uma forma tranqüila e ordenada, movendo-se da primeira instrução para a última. Agora aprenderemos a utilizar a