minicurso de javascript -...
TRANSCRIPT
![Page 1: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/1.jpg)
PET Sistemas de Informação Terceiro Dia 14.09.2016
Minicurso de
JavaScript
Anthony Tailer . Clécio Santos . Rhauani Fazul . Romeu Casarotto
![Page 2: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/2.jpg)
O que será visto hoje?
14.09.2016
▪ Funções▪ Eventos▪ Melhores práticas▪ Erros comuns▪ Exercícios
![Page 3: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/3.jpg)
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;}
![Page 4: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/4.jpg)
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}
![Page 5: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/5.jpg)
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
![Page 6: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/6.jpg)
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)
![Page 7: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/7.jpg)
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.
![Page 8: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/8.jpg)
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);
![Page 9: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/9.jpg)
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();
![Page 10: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/10.jpg)
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.";
![Page 11: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/11.jpg)
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
![Page 12: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/12.jpg)
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.
![Page 13: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/13.jpg)
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:
![Page 14: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/14.jpg)
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:
![Page 15: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/15.jpg)
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.
![Page 16: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/16.jpg)
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...
![Page 17: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/17.jpg)
Evitar variáveis globais
Evitar newEvitar ==
Evitar eval()
Melhores práticas
![Page 18: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/18.jpg)
Minimize o uso de variáveis globais.
Variáveis globais podem ser sobrescritaspor outros scripts.
Procure usar variáveis locais.
Evite Variáveis Globais
![Page 19: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/19.jpg)
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}
![Page 20: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/20.jpg)
É 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
![Page 21: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/21.jpg)
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;
![Page 22: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/22.jpg)
Declare no Topo
1234567
// DECLARE NO INÍCIOvar i, total=0;
// USE DEPOISfor ( i=0 ; i<5 ; i++ ) { total += i;}
![Page 23: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/23.jpg)
É 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
![Page 24: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/24.jpg)
Inicializando Variáveis
1234567
var nome = “”, sobren = “”, preco = 0, desc = 0, total = 0, vetor = [], objeto = {};
![Page 25: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/25.jpg)
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.
![Page 26: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/26.jpg)
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()
![Page 27: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/27.jpg)
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
![Page 28: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/28.jpg)
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
![Page 29: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/29.jpg)
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; }}
![Page 30: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/30.jpg)
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";
}
![Page 31: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/31.jpg)
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()
![Page 32: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/32.jpg)
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
![Page 33: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/33.jpg)
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
![Page 34: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/34.jpg)
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
![Page 35: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/35.jpg)
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"
![Page 36: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/36.jpg)
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
![Page 37: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/37.jpg)
À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
![Page 38: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/38.jpg)
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.
![Page 39: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/39.jpg)
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}
![Page 40: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/40.jpg)
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}
![Page 41: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/41.jpg)
À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
![Page 42: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/42.jpg)
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};
![Page 43: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/43.jpg)
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)
![Page 44: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/44.jpg)
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;
![Page 45: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/45.jpg)
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
![Page 46: Minicurso de JavaScript - coral.ufsm.brcoral.ufsm.br/pet-si/wp-content/uploads/2016/09/Aula03-Romeu.pdf · Minicurso de JavaScript Anthony Tailer . Clécio Santos . Rhauani Fazul](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5be53a7e09d3f288458b5150/html5/thumbnails/46.jpg)
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