Minicurso de JavaScript PET Sistemas de Informação Terceiro Dia Anthony Tailer. Clécio Santos. Rhauani Fazul.

Transcrição

1 Minicurso de JavaScript PET Sistemas de Informação Terceiro Dia Anthony Tailer. Clécio Santos. Rhauani Fazul. Romeu Casarotto

2 O que será visto hoje? Funções Eventos Melhores práticas Erros comuns Exercícios

3 Funções Bloco de código que irá desempenhar alguma tarefa. Será executado quando algo o invocar. Exemplo: A função abaixo retorna o produto de p e p function produto(p, p) { return p * p; }

4 Sintaxe da função Uma função em JavaScript é definida pela palavra function, seguida do nome e parênteses (). O nome pode conter letras (A-Z, a-z), números (0-9), sublinhados (_) e cifrão($). O mesmo se aplica aos nomes de variáveis. Os parênteses podem conter nomes de parâmetros separados por vírgulas. O código a ser executado é colocado dentro de chaves {...} após o nome e parâmetros. function nome(parametro, parametro) { //código a ser executado }

5 Sintaxe da função Os parâmetros de uma função são os nomes listados na definição da função. Os argumentos são os valores passados à função no momento que é invocada. Dentro da função os argumentos são utilizados como variáveis locais. function produto(p, p) { return p * p; } var x = 5; produto(, x); // e x são argumentos

6 Chamada de função O código dentro da função será executado quando algo a invocar (chamar). Quando ocorrer um evento Quando é chamada por um código Automaticamente (recursivamente) minhafuncao();

7 Retorno de função Quando o JavaScript encontrar um comando return, a função irá parar sua execução. Caso a função tenha sido invocada por um código, irá retornar e continuar a execução após a invocação. Funções também processam um valor de retorno, que é retornado ao invocador. 5 function potencia(p, p) { return p * p; } var x = potencia(, ); Após a chamada, x receberá o valor retornado pela função potencia.

8 Por que funções? Nos permitem reutilizar o código, programe uma vez e execute quantas quiser. Podemos utilizar o mesmo código várias vezes com argumentos diferentes e produzir resultados diferentes. 5 function paracelsius(fahrenheit) { return (5/9) * (fahrenheit-); } document.getelementbyid("demo").innerhtml = paracelsius();

9 Operador () invoca a função Quando usamos paracelsius nos referimos ao objeto função, porém, quando usamos paracelsius() nos referimos ao resultado da execução da função. 5 6 function paracelsius(fahrenheit) { return (5/9) * (fahrenheit-); } document.getelementbyid("demo").innerhtml = paracelsius; document.getelementbyid("demo").innerhtml = paracelsius();

10 Funções como variáveis Podemos usar funções da mesma maneira que usamos variáveis. Podemos usar isto: var text = "Temperatura: "+paracelsius(6)+" graus Célsius."; Ao invés disto: var temp = paracelsius(6); var text = "Temperatura: "+temp+" graus Célsius.";

11 Eventos São "coisas" que acontecem com elementos do HTML. Quando usamos JavaScript em páginas HTML, podemos fazer com que o JavaScript "reaja" a estes eventos.

12 Eventos HTML Um evento HTML pode ser originado pelo navegador ou por alguma ação do usuário. Alguns exemplos de eventos: A página terminou de carregar Um campo de entrada foi alterado Um botão na página foi clicado Frequentemente, quando eventos ocorrem, desejamos fazer algo. Podemos então executar códigos quando um evento é detectado.

13 Eventos HTML O HTML nos provê atributos para manusear eventos com código JavaScript. Aspas simples: <elementohtml evento='códigojavascript'> Aspas duplas: <elementohtml evento="códigojavascript">

14 Exemplos de Eventos Neste exemplo é alterado o conteúdo do elemento de id "demo": <button onclick='getelementbyid("demo").innerhtml=date()'>mostrar hora</button> Neste exemplo é alterado o conteúdo do próprio elemento: <button onclick="this.innerhtml=date()">mostrar hora</button> Para códigos compridos, é conveniente usar chamadas de funções: <button onclick="mostrarhora()">mostrar hora</button>

15 Eventos comuns Alguns dos eventos mais comuns: Evento onchange onclick onmouseover onmouseout onkeydown onload Descrição Quando um elemento é alterado Quando o usuário clica em um elemento Quando o usuário move o cursor sobre um elemento Quando o usuário move o cursor para fora do elemento Quando o usuário aperta uma tecla do teclado Quando o navegador termina de carregar a página Existem muitos outros além destes. Na internet podemos encontrar uma lista completa dos eventos.

16 O que JavaScript pode fazer? Os atributos de eventos pode ser usados para manusear e verificar entradas de usuário, ações do usuário e ações do navegador: Coisas que devem ser feitas sempre que a página carrega Coisas que devem ser feitas sempre que a página é fechada Ações que devem ser executadas quando um botão é clicado Conteúdo que deve ser validado em uma entrada E mais... Existem diversas formas de trabalhar com eventos: Eventos HTML podem executar código JS diretamente Eventos HTML podem chamar funções JavaScript É possível definir sua própria função para lidar com eventos Podemos prevenir que eventos sejam disparados E mais...

17 Melhores práticas Evitar variáveis globais Evitar new Evitar == Evitar eval()

18 Evite Variáveis Globais Minimize o uso de variáveis globais. Variáveis globais podem ser sobrescritas por outros scripts. Procure usar variáveis locais.

19 Declare suas Variáveis Locais Todas variáveis utilizadas em uma função devem ser declaradas como variáveis locais. Para declarar uma variável local deve ser usada a palavra reservada var, caso o contrário elas se tornarão variáveis globais function funcaoum() { aux = 0; } function funcaodois() { var aux = 0; } // VARIÁVEL GLOBAL // VARIÁVEL LOCAL

20 Declare no Topo É uma boa prática de programação declarar todas variáveis a serem usadas no topo de cada script ou função. Como resultado: Teremos um código mais claro e organizado Encontraremos facilmente nossas variáveis Nos permite evitar variáveis globais inconvenientes Reduz a possibilidade de redeclarações indesejadas

21 Declare no Topo // DECLARE NO INÍCIO var nome, sobren, preco, desc, total; // USE DEPOIS nome = "Romeu"; sobren = "Casarotto"; preco = 9.90; desc = 0.0; total = preco * 00 / desc;

22 Declare no Topo // DECLARE NO INÍCIO var i, total=0; // USE DEPOIS for ( i=0 ; i<5 ; i++ ) { total += i; }

23 Inicialize suas Variáveis É uma boa prática de programação inicializar suas variáveis no momento em que são declaradas. Como resultado: Teremos um código mais claro e organizado Encontraremos as inicializações em um só lugar Evita valores indefinidos inconvenientes

24 Inicializando Variáveis var nome =, sobren =, preco = 0, desc = 0, total = 0, vetor = [], objeto = {};

25 Cuidado com os Objetos Nunca use números, strings ou booleanos como objetos, sempre os trate como valores primitivos var x = "Isaac"; var y = new String("Isaac"); (x === y) // É FALSO, POIS X É UMA STRING E Y UM OBJETO. var x = new String("Isaac"); var y = new String("Isaac"); (x == y) // É FALSO, POIS NÃO É POSSÍVEL COMPARAR OBJETOS.

26 Não use new Object() Use {} ao invés de new Object() Use "" ao invés de new String() Use 0 ao invés de new Number() Use false ao invés de new Boolean() Use [] ao invés de new Array() Use /()/ ao invés de new RegExp() Use function(){} ao invés de new Function()

27 Cuidado com Conversões Automáticas Cuidado, números podem ser automaticamente convertidos para strings ou NaN (Not a Number). JavaScript possui tipos dinâmicos. Uma variável pode conter diferentes tipos de dados e pode sofrer alterações em seu tipo de dado. var x = "Olá Mundo!"; // X É DO TIPO STRING x = 6; // X AGORA FOI CONVERTIDO PARA NÚMERO

28 Atenção às Conversões var x = 5 + 7; //x.valueof() é, typeof x será number var x = 5 + "7"; //x.valueof() é 57, typeof x será string var x = "5" + 7; //x.valueof() é 57, typeof x será string var x = 5-7; //x.valueof() é -, typeof x será number var x = 5 - "7"; //x.valueof() é -, typeof x será number var x = "5" - 7; //x.valueof() é -, typeof x será number var x = 5 - "7"; //x.valueof() é NaN, typeof x será number var x = "Y" - "Z"; // retorna NaN

29 Use Parâmetros Padrões Se uma função é chamada com argumentos incompletos, o valor dos argumentos em falta serão undefined. Valores indefinidos podem quebrar seu código. Um bom hábito é definir valores padrões aos argumentos. 5 function funcao(x, y) { if (y === undefined) { y = 0; } }

30 Termine Switches com Default Procure sempre terminar um switch com default, mesmo que pareça não ser necessário switch (new Date().getDay()) { case 0: day = "Domingo"; break; case : day = "Segunda-feira"; break; case : day = "Terça-feira"; break; case : day = "Quarta-feira"; break; case : day = "Quinta-feira"; break; case 5: day = "Sexta-feira"; break; case 6: day = "Sábado"; break; default: day = "Desconhecido"; }

31 Evite usar eval() A função eval() serve para executar texto como um código. Ex: eval("5+"); // retornará 8 Na maioria dos casos, não é necessário usá-lo. Por permitir a execução de código não verificado, pode ser responsável por problemas de segurança.

32 Erros Comuns Comparações Acidentalmente usar o operador de atribuição. Podemos ter resultados inesperados ao confundirmos == com = var x = 0; if ( x == 0 ) // Retorna false var x = 0; if ( x = 0 ) // Retorna true var x = 0; if ( x = 0 ) // Retorna false

33 Erros Comuns Comparações Escolha errada entre comparadores == e === var x = 0; var y = "0"; if ( x == y ) // Retorna true var x = 0; var y = "0"; if ( x === y ) // Retorna false

34 Erros Comuns Switches Switches usam comparações rigorosas. (===) var x = 0; switch ( x ) { case 0: alert("oi!"); break; } //true este case será executado switch ( x ) { case "0": alert("oi!"); break; } // este não será executado

35 Erros Comuns Operações + Confundir adição e concatenação: var x = 5 + 5; // x recebe 0 var x = 5 + "5"; // x recebe "55" var x = 5, y = 5; var z = x + y; // z recebe 0 var x = 5, y = "5"; var z = x + y; // z recebe "55"

36 Erros Comuns Floats Floats podem ser mal entendidos: 5 6 var x = 0., y = 0.; var z = x + y; if ( z == 0. ) // resultará em false var z = ( x * 0 + y * 0 ) / 0; // z receberá o valor 0.

37 Erros Comuns Strings quebradas Às vezes precisaremos quebrar uma string: var x = "minha frase"; var x = "minha frase"; var x = "minha\ frase"; // funciona // NÃO funciona // funciona

38 Erros Comuns Ponto e Vírgula Poderemos ter resultados indesejados se usá-los de forma equivocada: if ( x = 6 ); { // bloco de código } O bloco de código será executado de qualquer maneira.

39 Erros Comuns Return quebrado Cuidado ao quebrar uma instrução return: function quadrado( a ) { return a * a; // retornará a*a } function quadrado( a ) { return a * // retornará a*a a; } function quadrado( a ) { return a * a; // retornará a*a }

40 Erros Comuns Return quebrado Cuidado ao quebrar uma instrução return: function quadrado( a ) { return // retornará undefined a * a; } function quadrado( a ) { return a // retornará a a * a; } function quadrado( a ) { return a * a // retornará a*a }

41 Erros Comuns Arrays (vetores) Às vezes confundimos arrays com objetos: var pessoa = []; pessoa[0] = "Romeu"; pessoa[] = ; var x = pessoa.length; // x recebe var y = pessoa[0]; // y recebe "Romeu" var pessoa = []; pessoa["nome"] = "Romeu"; pessoa["romeu"] = ; var x = pessoa.length; // x recebe 0 var y = pessoa[0]; // y recebe undefined

42 Atribuições Arrays e Objetos Procure não terminar atribuições com vírgula: // incorreto var notas = [ 6, 8, 7, 9,]; // correto var notas = [ 6, 8, 7, 9]; // incorreto var pessoa = { nome:"isaac", idade:,}; // correto var pessoa = { nome:"isaac", idade:};

43 Undefined não é Null Em JavaScript null é para objetos, undefined é para variáveis, propriedades e métodos. 5 // incorreto if (myobj!== null && typeof myobj!== "undefined") // correto if (typeof myobj!== "undefined" && myobj!== null)

44 Escopo a nível de Bloco O JavaScript não cria um novo escopo para cada bloco de código. Um erro comum entre novatos em Javascript é acreditar que este código retorna undefined: for (var i=0; i<0; i++ ) { // algum código } return i;

45 Exemplos Exemplo : Exemplo : Exemplo : Exemplo :

46 Referências