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
Top Related