minicurso de javascript -...

PET Sistemas de Informação Terceiro Dia 14.09.2016

Minicurso de

JavaScript

Anthony Tailer . Clécio Santos . Rhauani Fazul . Romeu Casarotto

O que será visto hoje?

14.09.2016

▪ Funções▪ Eventos▪ Melhores práticas▪ Erros comuns▪ Exercícios

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 p1 e p2

123

function produto(p1, p2) { return p1 * p2;}

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.

123

function nome(parametro1, parametro2) { //código a ser executado}

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.

123

function produto(p1, p2) { return p1 * p2;}

123

var x = 5;produto(2, x);// 2 e x são argumentos

Chamada de função

O código dentro da função será executadoquando algo a invocar (chamar).

1 minhaFuncao();

▪ Quando ocorrer um evento

▪ Quando é chamada por um código

▪ Automaticamente (recursivamente)

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.

12345

function potencia(p1, p2) { return p1 * p2;}

var x = potencia(4, 3);

Após a chamada, x receberá o valor 12retornado pela função potencia.

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.

12345

function paraCelsius(fahrenheit) { return (5/9) * (fahrenheit-32);}

document.getElementById("demo").innerHTML = paraCelsius(32);

Operador () invoca a função

Quando usamos paraCelsius nos referimos ao objeto função,

porém, quando usamos paraCelsius() nos referimosao resultado da execução da função.

123456

function paraCelsius(fahrenheit) { return (5/9) * (fahrenheit-32);}

document.getElementById("demo").innerHTML = paraCelsius;document.getElementById("demo").innerHTML = paraCelsius();

Funções como variáveis

Podemos usar funções da mesma maneira que usamos variáveis.

1 var text = "Temperatura: "+paraCelsius(36)+" graus Célsius.";

Podemos usar isto:

Ao invés disto:

12

var temp = paraCelsius(36);var text = "Temperatura: "+temp+" graus Célsius.";

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.

Eventos

Um evento HTML pode ser originado pelonavegador ou por alguma ação do usuário.

Eventos HTML

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.

O HTML nos provê atributos para manuseareventos com código JavaScript.

Eventos HTML

1 <elementoHTML evento='códigoJavaScript'>

Aspas simples:

1 <elementoHTML evento="códigoJavaScript">

Aspas duplas:

Exemplos de Eventos

1 <button onclick='getElementById("demo").innerHTML=Date()'>Mostrar hora</button>

Neste exemplo é alterado o conteúdo do elemento de id "demo":

1 <button onclick="this.innerHTML=Date()">Mostrar hora</button>

Neste exemplo é alterado o conteúdo do próprio elemento:

1 <button onclick="mostrarHora()">Mostrar hora</button>

Para códigos compridos, é conveniente usar chamadas de funções:

Eventos comuns

Alguns dos eventos mais comuns:

Evento Descrição

onchange Quando um elemento é alterado

onclick Quando o usuário clica em um elemento

onmouseover Quando o usuário move o cursor sobre um elemento

onmouseout Quando o usuário move o cursor para fora do elemento

onkeydown Quando o usuário aperta uma tecla do teclado

onload Quando o navegador termina de carregar a página

Existem muitos outros além destes.Na internet podemos encontrar uma lista completa dos eventos.

O que JavaScript pode fazer?

Os atributos de eventos pode ser usados para manusear e verificarentradas 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...

Evitar variáveis globais

Evitar newEvitar ==

Evitar eval()

Melhores práticas

Minimize o uso de variáveis globais.

Variáveis globais podem ser sobrescritaspor outros scripts.

Procure usar variáveis locais.

Evite Variáveis Globais

Todas variáveis utilizadas em uma funçãodevem 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.

Declare suas Variáveis Locais

1234567

function funcaoUm() { aux = 0; // VARIÁVEL GLOBAL}

function funcaoDois() { var aux = 0; // VARIÁVEL LOCAL}

É uma boa prática de programação declarar todas variáveis

a serem usadas no topo de cada script ou função.

Como resultado:

Declare no Topo

▪ 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

Declare no Topo

12345678910

// DECLARE NO INÍCIOvar nome, sobren, preco, desc, total;

// USE DEPOISnome = "Romeu";sobren = "Casarotto";

preco = 19.90;desc = 0.10;total = preco * 100 / desc;

Declare no Topo

1234567

// DECLARE NO INÍCIOvar i, total=0;

// USE DEPOISfor ( i=0 ; i<5 ; i++ ) { total += i;}

É uma boa prática de programação inicializar suas variáveisno momento em que são declaradas.

Como resultado:

Inicialize suas Variáveis

▪ Teremos um código mais claro e organizado▪ Encontraremos as inicializações em um só lugar▪ Evita valores indefinidos inconvenientes

Inicializando Variáveis

1234567

var nome = “”, sobren = “”, preco = 0, desc = 0, total = 0, vetor = [], objeto = {};

Nunca use números, strings ou booleanos como objetos,

sempre os trate como valores primitivos.

Cuidado com os Objetos

1234567

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.

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()

Cuidado, números podem ser automaticamenteconvertidos 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.

Cuidado com Conversões Automáticas

12

var x = "Olá Mundo!"; // X É DO TIPO STRINGx = 36; // X AGORA FOI CONVERTIDO PARA NÚMERO

Atenção às Conversões

1

2

3

4

5

6

7

8

var x = 5 + 7; //x.valueOf() é 12, 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() é -2, typeof x será number

var x = 5 - "7"; //x.valueOf() é -2, typeof x será number

var x = "5" - 7; //x.valueOf() é -2, typeof x será number

var x = 5 - "7"; //x.valueOf() é NaN, typeof x será number

var x = "Y" - "Z"; // retorna NaN

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.

Use Parâmetros Padrões

12345

function funcao(x, y) { if (y === undefined) { y = 0; }}

Procure sempre terminar um switch com default,mesmo que pareça não ser necessário.

Termine Switches com Default

12345678910

switch (new Date().getDay()) {case 0: day = "Domingo"; break;case 1: day = "Segunda-feira"; break;case 2: day = "Terça-feira"; break;case 3: day = "Quarta-feira"; break;case 4: day = "Quinta-feira"; break;case 5: day = "Sexta-feira"; break;case 6: day = "Sábado"; break;default: day = "Desconhecido";

}

A função eval() serve para executar texto como um código.

Ex: eval("5+3"); // 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.

Evite usar eval()

Acidentalmente usar o operador de atribuição.Podemos ter resultados inesperados ao confundirmos == com =.

Erros Comuns Comparações

12345678

var x = 0;if ( x == 10 ) // Retorna false

var x = 10;if ( x = 10 ) // Retorna true

var x = 0;if ( x = 0 ) // Retorna false

Escolha errada entre comparadores == e ===.

Erros Comuns Comparações

1234567

var x = 10;var y = "10";if ( x == y ) // Retorna true

var x = 10;var y = "10";if ( x === y ) // Retorna false

Switches usam comparações rigorosas. (===)

Erros Comuns Switches

123456789

var x = 10;

switch ( x ) { case 10: alert("Oi!"); break;} //true este case será executado

switch ( x ) { case "10": alert("Oi!"); break;} // este não será executado

Confundir adição e concatenação:

Erros Comuns Operações +

12345678

var x = 5 + 15; // x recebe 20var x = 5 + "15"; // x recebe "515"

var x = 5, y = 15;var z = x + y; // z recebe 20

var x = 5, y = "15";var z = x + y; // z recebe "515"

Floats podem ser mal entendidos:

Erros Comuns Floats

123456

var x = 0.1, y = 0.2;var z = x + y;if ( z == 0.3 ) // resultará em false

var z = ( x * 10 + y * 10 ) / 10;// z receberá o valor 0.3

Às vezes precisaremos quebrar uma string:

Erros Comuns Strings quebradas

12345678

var x ="minha frase"; // funciona

var x = "minhafrase"; // NÃO funciona

var x = "minha\frase"; // funciona

Poderemos ter resultados indesejadosse usá-los de forma equivocada:

Erros Comuns Ponto e Vírgula

1234

if ( x = 26 );{ // bloco de código}

O bloco de código será executado de qualquer maneira.

Cuidado ao quebrar uma instrução return:

Erros Comuns Return quebrado

1234567891011

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}

Cuidado ao quebrar uma instrução return:

Erros Comuns Return quebrado

1234567891011

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}

Às vezes confundimos arrays com objetos:

Erros Comuns Arrays (vetores)

1234567891011

var pessoa = [];pessoa[0] = "Romeu";pessoa[1] = 22;var x = pessoa.length; // x recebe 2var y = pessoa[0]; // y recebe "Romeu"

var pessoa = [];pessoa["nome"] = "Romeu";pessoa["Romeu"] = 22;var x = pessoa.length; // x recebe 0var y = pessoa[0]; // y recebe undefined

Procure não terminar atribuições com vírgula:

Atribuições Arrays e Objetos

123456789

// incorretovar notas = [ 6, 8, 7, 9,];// corretovar notas = [ 6, 8, 7, 9];

// incorretovar pessoa = { nome:"Isaac", idade:22,};// corretovar pessoa = { nome:"Isaac", idade:22};

Em JavaScript null é para objetos, undefinedé para variáveis, propriedades e métodos.

Undefined não é Null

12345

// incorretoif (myObj !== null && typeof myObj !== "undefined")

// corretoif (typeof myObj !== "undefined" && myObj !== null)

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:

Escopo a nível de Bloco

1234

for (var i=0; i<10; i++ ) { // algum código}return i;

Exemplo 1: http://pastebin.com/jJwhk9Rz

Exemplo 2: http://pastebin.com/77KjLFyT

Exemplo 3: http://pastebin.com/Cr3FNZ2G

Exemplo 4: http://pastebin.com/MBxGSuSX

Exemplos

http://www.w3schools.com/js/default.asp

http://www.w3schools.com/js/js_functions.asp

http://www.w3schools.com/js/js_events.asp

http://www.w3schools.com/js/js_best_practices.asp

http://www.w3schools.com/js/js_mistakes.asp

Referências