tratamento de eventos para web
TRANSCRIPT
Tratamento de Eventos para WEB
Felipe Natale Munhoz
SENAC TI - Tecnico em Informatica para Internet - Florianopolis/SC
1 / 1
Tratamento de Eventos para WEB
COMPETENCIATratar eventos para web utilizando linguagem script, observando asintaxe da linguagem, funcoes, passagem de parametros,bibliotecas, a partir das caracterısticas de tratamento de eventos,com visao logica e paciencia, a fim de estabelecer a comunicacaoentre a acao e a rotina computacional.
Carga horaria
21 Horas
2 / 1
Tratamento de Eventos para WEB
Pilares: conhecimentos, habilidades e valoresCaracterısticas da linguagem script: sintaxe da linguagem,funcoes, passagem de parametros, bibliotecas
Criar scripts da linguagemOrganizacaoVisao logica
Caracterısticas de tratamento de eventosUtilizar eventosPacienciaPro-atividade
3 / 1
Tratamento de Eventos para WEB
Metodologia
Aula expositiva e dialogada
Aula pratica
Mınimo de separacao entre teoria e pratica
Recursos didaticosSlides
Computador
Quadro
Internet
4 / 1
Tratamento de Eventos para WEB
Indicadores e Desempenho
Associa eventos e acoes aos componentes graficos de umainterface de acordo com as caracterısticas de tratamento deeventos e aplicacoes graficas, com visao logica eorganizacao.
Eventos web tratados utilizando linguagem script.
Estrategia de avaliacao
Observacao da participacao diaria de cada um
Avaliacoes praticas focadas no desenvolvimento deaplicacoes aplicando os conhecimentos adquiridos
5 / 1
JavaScript: Introducao
HistoricoJavaScript foi criada em dezembro de 1995 por Brendan Eichna epoca funcionario da Netscape.
Originalmente foi chamada de Mocha, e logo depoisrenomeada para LiveScript.
Devido a um acordo com a Sun Microsystems passou a serchamada de JavaScript como uma estrategia de marketingentre as duas empresas.
6 / 1
JavaScript: Introducao
HistoricoRapidamente JavaScript fez sucesso como linguagemclient-side possibilitando um novo patamar para odesenvolvimento WEB.
Pouco tempo depois devido a guerra dos browsers da epocaa Microsoft desenvolveu uma linguagem compatıvel comJavaScript para o IE.
Para evitar problemas com uso de marcas a versao daMicrosoft foi chamada JScript.
7 / 1
JavaScript: Introducao
HistoricoMesmo que JScript fosse compatıvel com JavaScript, aindahaviam diferencas entre as duas linguagens
Poucos meses depois a Netscape submeteu a linguagemJavaScript para a organizacao ECMA com o objetivo de setornar um padrao da industria.
JavaScript foi entao padronizada como linguagemECMAScript
8 / 1
JavaScript: Introducao
CuriosidadeAtualmente JavaScript e a linguagem mais popular no github
https://github.com/languages/JavaScript
9 / 1
JavaScript: Introducao
Definicao
JavaScript e uma Linguagem Script
Linguagem Script e aquela executada do interior de um programa,atraves de outra linguagem de programacao, ou de maquinavirtual propria.
10 / 1
JavaScript: Introducao
MitosApesar de sua popularidade JavaScript ainda e poucocompreendida nos dias de hoje
As linguagens JavaScript e Java nao tem nenhuma relacaouma com a outra
Por ter o sufixo Script no nome algumas pessoas acreditamerroneamente que JavaScript nao e uma linguagem deprogramacao de verdade.
11 / 1
JavaScript: Introducao
O que pode ser feito
Validacoes em formularios
Interatividade em paginas WEB
Animacoes
Desenhos
Jogos
Aplicacoes server-side(node.js)
12 / 1
JavaScript: Introducao
Antes de comecar!
13 / 1
JavaScript: Introducao
Codigo binario
1 00110001 00000000 00000000
2 00110001 00000001 00000001
3 00110011 00000001 00000010
4 01010001 00001011 00000010
5 00100010 00000010 00001000
6 01000011 00000001 00000000
7 01000001 00000001 00000001
8 00010000 00000010 00000000
9 01100010 00000000 00000000
14 / 1
JavaScript: Introducao
Codigo JavaScript
1 var c = 0, t = 1;
2 while (t <= 10) {
3 c += t;
4 t += 1;
5 }
6 print(c);
15 / 1
JavaScript: Introducao
Codigo JavaScript
1 var total = 0, count = 1;
2 while (count <= 10) {
3 total += count;
4 count += 1;
5 }
6 print(total);
16 / 1
JavaScript: Introducao
Importante
Escreva codigo legıvel
Escreva codigo para outras pessoas entenderem
Preocupe-se com identacao
Pare e pense no nome das variaveis
17 / 1
JavaScript: Introducao
ConceitosValores, variaveis, e controle defluxo
18 / 1
JavaScript: valores, variaveis e controle de fluxo
Dentro do mundo da computacao, tudo sao dados
Em JavaScript a maioria destes dados sao separados emestruturas que vamos chamar de valores
Cada um destes valores tem um tipo.
Este tipo determina as regras que poderao ser aplicadas aeste valor
19 / 1
JavaScript: valores, variaveis e controle de fluxo
Tipos basicos de valoresNumber
String
Boolean
Object
Function
Undefined
20 / 1
JavaScript: Introducao
Number
21 / 1
JavaScript: valores, variaveis e controle de fluxo
Number143
13178
-20.3
3.56
0.3455
2.493e8
22 / 1
JavaScript: valores, variaveis e controle de fluxo
NumberEm JavaScript todos os valores Number sao armazenadosem 64 bits
O number armazena tanto numeros positivos quantonegativos
Armazena tambem numeros nao inteiros
Dos 64 bits 11 sao usados para armazenar o valor fracionariodo numero
E 1 bit e utilizado para armazenar o sinal
Sobram entao 52 bits para armazenar o valor inteiro
23 / 1
JavaScript: Introducao
Operadores
24 / 1
JavaScript: valores, variaveis e controle de fluxo
Numeros, operadores, aritmetica134 + 6
33 * 2 + 5
55 -3
(22 - 2) * 4
(15 / 3) - 3
100 * 4 - 4 + 10 / 2
25 / 1
JavaScript: Introducao
PraticaNumbersOperadoresAritmetica
26 / 1
JavaScript: Introducao
String
27 / 1
JavaScript: strings
Tipo de dado para armazenamento de texto
O texto deve sempre ficar entre aspas duplas
Como colocar o caracter aspas duplas em uma string?
Alguns caracteres devem ser escapados
O cacacter barra invertida e usado para isso.
28 / 1
JavaScript: strings
1 var exemplo1 = "exemplo simples de string";2 var exemplo2 = "aspas duplas devem ser escapadas: \" ";3 var exemplo3 = "caracter de nova linha: \n "4 var exemplo4 = "caracter barra invertida \\"
29 / 1
JavaScript: strings
Strings em JavaScript nao podem ser subtraıdas oumultiplicadas
Para concatenar strings pode ser utilizado o caracter +
O caracter + neste caso e um operador, assim como osoperadores * - / utilizados para o tipo de dado Number
30 / 1
JavaScript: strings
1 var exemplo1 = "uma " + "parte " + "da " + "string";
31 / 1
JavaScript: operadores
Todos os operadores que vimos ate agora sao chamados deoperadores binarios
Operadores binarios sao aplicados a dois argumentos
Existem tambem operadores unarios que sao aplicados a umargumento
O operador typeof e um exemplo de operador unario
Dado um valor para o operador typeof ele retorna uma stringcom o tipo do valor passado
O operador menos (-) pode ser utilizado tanto como binarioquanto como unario
32 / 1
JavaScript: operadores
1 typeof 4
2 typeof "teste"
3 typeof 3.6
4 - (5 * 2)
33 / 1
JavaScript: boolean
Outro tipo de dado em JavaScript sao os booleans
Booleans podem ter dois valores true e false
34 / 1
JavaScript: boolean
1 // repare nos operadores utilizados
2
3 4 > 3 // true
4 2 > 8 // false
5 "string1" === "string2" // false
6 "string1" === "string1" // true
35 / 1
JavaScript: operadores logicos
Existem algumas operacoes muito uteis que podem seraplicadas aos valores booleanos.
JavaScript suporta tres operadores logicos and, or e not
36 / 1
JavaScript: operadores logicos
1 true && false // false2 true || false // true3 !true // false4 !false // true5 (4 >= 6 || "v1" != "v2") && !(12 * 2 == 144 && true) // true or false ?
37 / 1
JavaScript: Introducao
PraticaStringsBooleansOperadores
38 / 1
JavaScript: expressoes e declaracoes
Ate agora vimos JavaScript como uma maquina de calcular
Todos estes codigos JavaScript sao chamados deexpressoes
Existe um nıvel mais elevado de codigo que expressoes, epodemos chama-los de declaracoes
Um programa e constituıdo por uma lista de declaracoes
Grande parte das declaracoes em JS terminam com umponto e vırgula.
0;
39 / 1
JavaScript: armazendando valores
Uma declaracao simples como a mostrada a seguir nao emuito util
false;
Esta declaracao nao faz nada, ela apenas e avaliada e jogadano coletor de lixo do JS.
As declaracoes se tornam uteis quando afetam o mundoexterior
Isto pode ser feito, enviando uma mensagem para o usuario,alterando a tela do programa, etc.
Um bom ponto de partida para isso e armazenar os valoresdas expressoes.
40 / 1
JavaScript: armazendando valores
Para acessar valores armazenados JS e em outraslinguagens sao utilizadas variaveis
Variaveis sempre tem um nome e podem ou nao estarreferenciando um valor armazenado em memoria
var variavelTeste = 4 * 7;
A declaracao acima cria uma variavel chamadavariavelTeste e e utilizada para acessar o valor da expressao4 * 7
Apos executar esta declaracao ao digitar o nome da variavelno console, o valor 28 sera mostrado;
41 / 1
JavaScript: armazendando valores
A palavra-chave var e usada para criar/declarar uma novavariavel
Variaveis podem ter os mais diferentes nomes, mas naopodem ter espacos
Para variaveis com multiplas palavras em JS utilize aconvencao camelCase
Variaveis podem conter numeros, mas nao podem comecarpor um caracter de dıgito
E permitido tambem caracteres especiais como o underscoree o cifrao
42 / 1
JavaScript: armazendando valores
Variaveis nao precisam armazenar o mesmo valor parasempre
Basta atribuir outro valor a mesma varıavel utilizando ooperador de atribuicao (=)
Inclusive e possıvel trocar o tipo de dado armazenado
43 / 1
JavaScript: armazenando valores
1 var tiposDiferentes = 5;
2 typeof tiposDiferentes // number
3 tiposDiferentes = true
4 typeof tiposDiferentes // boolean
44 / 1
JavaScript: armazenando valores
Uma variavel nao deve ser vista como uma caixa, e quedentro da caixa esta o valor desta variavel
Uma variavel e melhor compreendida como tentaculos
Sempre que for necessario guardar o valor de uma expressaodeve ser apontado um destes tentaculos para este valor
Valores sem tentaculos sao descartados pelo JavaScriptassim que a declaracao termina
45 / 1
JavaScript: armazenando valores
PraticaArmazenando valoresVariaveis
46 / 1
JavaScript: environment
A colecao de variaveis e os valores que existem emdeterminado momento e chamado de ambiente (environment)
Sempre que um programa em JS inicia e criado um ambientepara ele.
Por exemplo quando uma instancia de um navegador ecarregada um ambiente e criado para esta instancia
Neste caso o ciclo de vida do ambiente e o mesmo dajanela/aba do navegador
Ao ser criado, este ambiente carrega uma serie de valorespadrao.
47 / 1
JavaScript: funcoes
Muitos destes valores padrao carregados juntos com oambiente sao do tipo de dado function
Funcoes sao pedacos de programas, mais formalmente, umalista de declaracoes contidas em um valor.
Por exemplo no ambiente criado pelos navegadores estadisponıvel a variavel alert
48 / 1
JavaScript: funcoes
Para executar o codigo de uma funcao basta abrir e fecharparenteses apos o nome da variavel
alert(”Nova Mensagem”)
O valor do tipo String que aparece entre os parenteses e umparamentro/argumento da funcao
Uma funcao pode receber zero ou mais parametros,separados por vırgula
49 / 1
JavaScript: funcoes
Uma funcao pode tambem produzir um valor no seu final
Math.max(6, 9)
Neste caso a funcao retorna o valor maximo de uma lista devalores passados como argumento
Quando uma funcao produz um valor, dizemos que a funcaoretorna um valor
50 / 1
JavaScript: funcoes
Outras funcoes pre-definidas alem do alert sao prompt,confirm
51 / 1
JavaScript: funcoes
1 function power(base, exponent) {
2 var result = 1;
3 for (var count = 0; count < exponent; count++)
4 result *= base;
5 return result;
6 }
7
8 show(power(2, 10));
52 / 1
JavaScript: objects
Tudo em JavaScript sao objetosPodem ser acessados utilizando duas notacoes:
objeto.atributoobjeto[’atributo’]
Para criar um novo objeto:var objeto =var objeto = new Object()
53 / 1
JavaScript: objetos
1 var animal = {
2 nome: ’Rex’,
3 idade: 8,
4 possuiDono: true
5 };
6
7 var idadeDoAnimal = animal.idade;
8
9 var nomeDoAnimal = animal[’nome’];
54 / 1
JavaScript: controle de fluxo
1 for (var counter = 0; counter < 20; counter++) {
2 if (counter % 4 == 0)
3 print(counter);
4 if (counter % 4 != 0)
5 print("(" + counter + ")");
6 }
55 / 1
JavaScript: eventos
Eventos sao acoes que podem serdetectadas pelo JavaScript
56 / 1
JavaScript: eventos
Paginas WEB em HTML+CSS sao estaticas
Adicionar JavaScript permite criarmos paginas WEBdinamicas
57 / 1
JavaScript: eventos
Todo elemento de uma pagina WEB possui eventos quepodem ser vinculados ao JavaScript
Por exemplo podemos vincular o evento de clique de botaoHTML para uma funcao JavaScript
Desta forma sempre que o botao for clicado a funcaoJavaScript sera executada
58 / 1
JavaScript: eventos
Exemplos de eventosO clique do mouse
O carregamento de uma pagina WEB ou de uma imagem
Passar o mouse por um elemento da pagina
Selecionar um elemento de um campo de um formularioHTML
Submeter um formulario HTML
Pressionar uma tecla
59 / 1
JavaScript Inline - Nunca use!
1 <html>2 <head>3 </head>4 <body>5 <span onclick="alert(’Hello World!’);">Click Here</span>6 </body>7 </html>
60 / 1
Exemplo com o evento OnClick
1 <html>2 <head>3 <script type="text/javascript">4 function displayDate() {5 alert(Date());
6 }
7 </script>8 </head>9 <body>
10 <button type="button" onclick="displayDate()">Display Date</button>11 </body>12 </html>
61 / 1
JavaScript: eventos
OnChange
Evento frequentemente utilizado em validacoes de camposem formularios
E ativado sempre que o campo sofrer um tipo de alteracao eperder o foco
62 / 1
OnChange
1 <html>2 <head>3 <script type="text/javascript">4 function checkChange() {5 alert("Field was changed");
6 }
7 </script>8 </head>9 <body>
10 Write something on the box
11 <input type="text" onchange="checkChange()">12 </body>13 </html>
63 / 1
JavaScript: eventos
OnSubmitEvento utilizado por exemplo para validar todos os campos deum formulario antes submeter para o servidor
E ativado quando o botao de enviar for clicado.
64 / 1
OnSubmit
1 <html>2 <head>3 <script type="text/javascript">4 function checkForm() {5 alert("Form was submitted");
6 }
7 </script>8 </head>9 <body>
10 <form method="post" action="" onsubmit="return checkForm()">11 Write something on the box <input type="text">12 <input type="submit" value="Send form">13 </form>14 </body>15 </html>
65 / 1
OnLoad
1 <html>2 <head>3 <script type="text/javascript">4 function load() {5 alert("Carregou!");
6 }
7 </script>8 </head>9 <body onload="load()">
10 <h1>Hello World!</h1>11 </body>12 </html>
66 / 1
JavaScript
jQuery
jQuery is a fast and concise JavaScript Library thatsimplifies HTML document traversing, event handling,animating, and Ajax interactions for rapid webdevelopment. jQuery is designed to change the way thatyou write JavaScript.
67 / 1
JavaScript
jQuery Vantagens
Simplifica a forma de trabalhar com Javascript
E extensıvel
E leve (31 kb a versao de producao)
E cross-browser (como os plugins podem ser criados porqualquer pessoa, podem nao manter a compatibilidade)
68 / 1
JavaScript
jQuery Vantagens
Basicamente e criada uma funcao jQuery() que retorna umobjeto
E criado um alias $ para esta funcao
Quando voce acessa $(document) voce esta chamando afuncao jQuery() passando o objeto document por parametro
Quando acessa $.ajax() esta chamando o metodo ajax() doobjeto criado pela funcao jQuery
69 / 1
JavaScript
jQuery Utilizacao
Para manipular um ou mais elementos apenas utilizamos$(SELETOR)
Existem varios valores para o SELETOR os mais comunssao: seletor de tag, seletor de id e seletor de class
70 / 1
jQuery
1 <html>
2 <head>
3 <script type="text/javascript">
4 $(document).ready(function() {
5 $("a").css("border", "9px solid red");
6 });
7 </script>
8 </head>
9 <body>
10 <a href="#">teste1</a>
11 <a href="#">teste2</a>
12 </body>
13 </html>
71 / 1
JavaScript
The art of programming is the skill of controllingcomplexity. eloquentjavascript.net
72 / 1