servidor. executado , interage com...
TRANSCRIPT
![Page 1: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/1.jpg)
![Page 2: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/2.jpg)
▪▪▪▪▪▪▪▪
![Page 3: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/3.jpg)
● Executado do lado do cliente, interage com o usuário sem a necessidade do script passar pelo servidor.
● Desenvolvida por Brendan Eich, da Netscape Communications Corporation em 1995 (LiveScript).
● 1ª linguagem de script da web.○ Java: Linguagem de programação (OOP)○ JavaScipt: Linguagem de scripts (OOP)
![Page 4: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/4.jpg)
● Principalmente utilizada no auxílio de desenvolvimento de páginas Web;
● Linguagem de script que permite levar as páginas Web a outro patamar em relação a interatividade e funções;
○ Script: parte do código inserido em uma página HTML.
● Uma linguagem independente de formatação, interpretada, altamente portátil e independente de hardware, se encaixa facilmente em outros softwares (ex navegadores).
![Page 5: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/5.jpg)
● Pode ser usada para:○ alterar conteúdo HTML
○ alterar atributos HTML
○ alterar estilo HTML (CSS)
Exemplo: Validação de formulários movimentação de slider, etc.
As 3 camadas:
Informação: HTMLFormatação: CSSComportamento: JavaScript
![Page 6: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/6.jpg)
● Online:○ Thimble (https://thimble.mozilla.org/pt-BR/)
○ JSfiddle (https://jsfiddle.net/)
● Editores de texto: Sublime, Notepad++, entre outros;
W3Schools (http://www.w3schools.com/js/)
![Page 7: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/7.jpg)
● Estrutura básica HTML:
- < script> document.write(“msg”); </script>
![Page 8: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/8.jpg)
● Estrutura básica HTML:
- < script> document.write(“msg”); </script>
head ou body?
![Page 9: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/9.jpg)
● Caixa de alerta - window.alert();
● Saída no documento HTML - document.write();
● Saída em um elemento HTML - innerHTML
● Saída para o console do navegador - console.log();
● Caixa para que o usuário entre com dados - prompt ();
● Caixa de confirmação - confirm ();
![Page 10: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/10.jpg)
confirm();
![Page 11: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/11.jpg)
●
● getElementById() retorna o elemento que tem o atributo ID igual ao valor entre “ “
![Page 12: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/12.jpg)
innerHTML();
![Page 13: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/13.jpg)
innerHTML();
Insere no “interior” do HTML
![Page 14: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/14.jpg)
● Recipientes que guardam valores (números, nomes, datas);
● Devem ser declaradas com var;
● Ao declarar uma var sem atribuir valor, a variável fica com valor indefinido.
![Page 15: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/15.jpg)
● Recipientes que guardam valores (números, nomes, datas);
● Devem ser declaradas com var;
● Ao declarar uma var sem atribuir valor, a variável fica com valor indefinido.
![Page 16: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/16.jpg)
● Devem receber nomes para que possam ser modificadas;
● Podem conter letras maiúsculas e minusculas, números, underline e $ (case sensitive);
● Linguagem não aceita hífen em nomes de variaveis;
● Palavras reservadas (break, if, else, for, try…)
![Page 17: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/17.jpg)
● Variáveis podem conter diversos tipos dados
![Page 18: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/18.jpg)
● Variáveis podem conter diversos tipos dados
○ Inteiros (1, 2, 5440, 5655, ...) int
![Page 19: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/19.jpg)
● Variáveis podem conter diversos tipos dados
○ Inteiros (1, 2, 5440, 5655, ...) int
○ Fracionais (0.3 ; 3.1415…) float/double
![Page 20: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/20.jpg)
● Variáveis podem conter diversos tipos dados
○ Inteiros (1, 2, 5440, 5655, ...) int
○ Fracionais (0.3 ; 3.1415…) float/double
○ Palavras e frases (“javascript eh top”) string
![Page 21: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/21.jpg)
● Variáveis podem conter diversos tipos dados
○ Inteiros (1, 2, 5440, 5655, ...) int
○ Fracionais (0.3 ; 3.1415…) float/double
○ Palavras e frases (“javascript eh top”) string
○ Estado (true) boolean
![Page 22: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/22.jpg)
● Variáveis podem conter diversos tipos dados
○ Inteiros (1, 2, 5440, 5655, ...) int
○ Fracionais (0.3 ; 3.1415…) float/double
○ Palavras e frases (“javascript eh top”) string
○ Estado (true) boolean
JavaScript não é uma linguagem tipada!
![Page 23: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/23.jpg)
● Levando em conta que JavaScript não é uma linguagem tipada, faça um programa que imprima uma mesma variável diversas vezes com tipos de dados diferentes.
○ Utilize document.getElementById(“ ”).InnerHTML para exibição dos valores em tags <p id=” “> </p>
![Page 24: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/24.jpg)
![Page 25: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/25.jpg)
+ Adição
- Subtração
* Multiplicação
/ Divisão
% Módulo
++ Incrementador
-- Decrementador
![Page 26: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/26.jpg)
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
Observação: Com Strings o operador aritmético + serve para concatenar.Cuidado ao adicionar números a uma string, o resultado será uma string.
![Page 27: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/27.jpg)
== igual a
=== valor e tipo iguais
!= diferente
!== valor e tipo diferente
> maior que
< menor que
>= maior ou igual a
<= menor ou igual a
![Page 28: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/28.jpg)
● Criar um botão que ao ser clicado exibe o resultado de uma operação matemática
![Page 29: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/29.jpg)
● Utilize as seguintes imagens ○ http://goo.gl/5jF0Du○ http://goo.gl/yvW8Zk<img id=“nome“ src=”link”>
● Crie dois botões, que ao serem clicados, troquem a imagem exibida na tela.
<button onclick=” “> </button>
![Page 30: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/30.jpg)
![Page 31: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/31.jpg)
![Page 32: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/32.jpg)
● Ao passar o mouse em cima da imagem, a lâmpada deverá acender.○ Imagem lâmpada acessa: http://goo.gl/iTtCnM
● Ao tirar o mouse de cima da lâmpada, ela deverá apagar novamente.
onmousemove=” ” onmouseout=” “
![Page 33: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/33.jpg)
![Page 34: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/34.jpg)
● Podem ser utilizados como entrada e saída;
Lendo algum do usuário e escrevendo na tela:
;
![Page 35: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/35.jpg)
- As informações devem ser solicitadas ao usuário através de prompt();
![Page 36: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/36.jpg)
![Page 37: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/37.jpg)
![Page 38: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/38.jpg)
● Utilizando funções…
![Page 39: servidor. Executado , interage com ocoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula01-Rhau.pdf · Executado do lado do cliente, interage com o usuário sem a necessidade do script](https://reader030.vdocuments.com.br/reader030/viewer/2022041114/5f22f4a9c3818f75ea401b18/html5/thumbnails/39.jpg)