minicurso de javascript -...

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

Upload: vanxuyen

Post on 09-Nov-2018

234 views

Category:

Documents


0 download

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

É 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

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

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

É 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

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

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

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

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

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

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

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

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

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

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

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

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

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

À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

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

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

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

À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

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

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

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

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