tratamento de eventos para web

Tratamento de Eventos para WEB

Felipe Natale Munhoz

SENAC TI - Tecnico em Informatica para Internet - Florianopolis/SC

1 / 1


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


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


Metodologia

Aula expositiva e dialogada

Aula pratica

Mınimo de separacao entre teoria e pratica

Recursos didaticosSlides

Computador

Quadro

Internet

4 / 1


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


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


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


CuriosidadeAtualmente JavaScript e a linguagem mais popular no github

https://github.com/languages/JavaScript

9 / 1

https://github.com/languages/JavaScript


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


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


O que pode ser feito

Validacoes em formularios

Interatividade em paginas WEB

Animacoes

Desenhos

Jogos

Aplicacoes server-side(node.js)

12 / 1


Antes de comecar!

13 / 1


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


Codigo JavaScript

1 var c = 0, t = 1;

2 while (t <= 10) {

3 c += t;

4 t += 1;

5 }

6 print(c);

15 / 1


Codigo JavaScript

1 var total = 0, count = 1;

2 while (count <= 10) {

3 total += count;

4 count += 1;

5 }

6 print(total);

16 / 1


Importante

Escreva codigo legıvel

Escreva codigo para outras pessoas entenderem

Preocupe-se com identacao

Pare e pense no nome das variaveis

17 / 1


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


Tipos basicos de valoresNumber

String

Boolean

Object

Function

Undefined

20 / 1


Number

21 / 1


Number143

13178

-20.3

3.56

0.3455

2.493e8

22 / 1


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


Operadores

24 / 1


Numeros, operadores, aritmetica134 + 6

33 * 2 + 5

55 -3

(22 - 2) * 4

(15 / 3) - 3

100 * 4 - 4 + 10 / 2

25 / 1


PraticaNumbersOperadoresAritmetica

26 / 1


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


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


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


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


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


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


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 }


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 }


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

tratamento de eventos para web

Technology