Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md

JavaScript parte 0

Tipos de Dados, Variáveis, Estrutura Sequencial, Condicionais, Iterações e Funções

Na última aula (1/2)

Quando mais de uma regra CSS se aplica, uma delas prevalece
- O navegador calcula uma pontuação de especificidade (abc) do seletor de cada regra:
  - a: quantidade de ids no seletor
  - b: quantidade de classes, atributos e pseudo-classes no seletor
  - c: quantidade de pseudo-elementos no seletor
- Quanto maior esse número, maior a precedência da regra ser aplicada

Na última aula (2/2)

Exemplo: qual a cor do <h2> que seja filho direto de alguém com as classes .post e .novidade que, por sua vez, esteja dentro de um #posts-recentes?

/* id: 1, classes: 2, tag: 1; pontuação: 121 */
#posts-recentes .post.novidade > h2 {
  color: blue;
}
/* id: 0, classes: 0, tag: 1; pontuação: 001 */
h2 {
  color: green;
}

Azul!

Atividade de hoje

O objetivo é começar a usar JavaScript
Baixe os arquivos. Você deve abrir a página web no navegador e seguir as instruções

Hoje veremos...

Tipos de dados, Variáveis e Funções
Condicionais, Vetores e Estruturas de Repetição
Mais sobre funções e Métodos úteis

Tipos de Dados, Variáveis e Funções

Elementos da Linguagem JavaScript

Tipos de dados
Declarando variáveis
Criando funções

O que é JavaScript?

Possui sintaxe parecida com C, C++, Java
- JavaScript não é Java
- Ter "Java" no nome foi apenas uma jogada de marketing na época
Suporta os estilos de programação orientada a objetos e funcional
Existem diferentes tipos de dados (como em C, C++, Java)
- Mas não é necessário definir os tipos das variáveis
- Os tipos são automaticamente inferidos
É uma linguagem dinâmica
- Uma variável pode ter um tipo agora, mas mudar para outro depois
Usa programação assíncrona dirigida por eventos

hello-world.js e imprimindo no console

Um arquivo HTML pode incluir um arquivo .js

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
</head>
<body>
  <!-- ... -->
  <script src="hello-world.js"></script>
</body>
</html>

// imprime no console do navegador
console.log('Hello world');

// abre uma janelinha infernal
window.alert('Sou das trevas');

Um arquivo JavaScript incluído por um HTML é baixado e executado linha a linha
Para testar escrevemos no console do navegador com
```
console.log('.......');
```
Também pode abrir uma janelinha
```
window.alert('......');
```
- ...mas não faça isto, jovem, porque essa janelinha é muito chata ;)

Declarando variáveis (com `let`)

Usamos a palavra-chave let para criar variáveis:

let alunosMatriculados = 20;    // isto aqui é um comentário
let qtdeHorasAula = 66.5;       /* aqui também (de bloco) */
let nomeAula = 'js0';

Não é necessário (nem possível) informar o seu tipo de dado
- Em JavaScript o tipo é inferido automaticamente
let pode ser lido como "seja", tipo assim:

seja uma variável 'nomeAula' com o valor 'js0'

Outras formas de declarar variáveis `(const/var)`

Usamos a palavra-chave const para criar variáveis que sempre apontam para o mesmo valor
```
const fruta = 'abacate';
fruta = 'pera';
// Uncaught TypeError:
//   Assignment to constant variable.
```
- É uma boa prática usar const sempre que se sabe que a variável não receberá um novo valor

Usávamos (passado, old, não use) a palavra-chave var:
```
var vegetal = 'batata';
```
- Similar ao let mas tem alguns problemas:
  - Não possui escopo de bloco, mas de função
  - Pode ser usada até mesmo antes da declaração
- Era a única forma até ~2012
- Encontra-se códigos antigos na Web usando var

Fracamente tipada e dinâmica

Em JavaScript, não é necessário declarar o tipo das variáveis:
```
let nota = 10;            // tipo numérico
let aluno = 'Adamastor';  // tipo string
```
- Dizemos que JavaScript é fracamente tipada
Em JavaScript podemos mudar o tipo de uma variável no meio do caminho (exceto se usando const):
```
let nota = 10;            // nota é númerico
nota = 'Dó';              // agora virou string
```
- Dizemos que JavaScript é dinâmica

Tipos de dados

Há seis tipos primitivos de dados:
- 1. Boolean
- 2. Number
- 3. String
- 4. Null
- 5. Undefined
- 6. Symbol
Um tipo composto de dados: 7. Object
- Há outros derivados de Object...
- Veremos Object e seus tipos derivados em próximas aulas

Para verificar o tipo de uma variável, usamos typeof

let vacinou = true;
console.log(typeof vacinou);
// imprime "boolean"

let nota = 10;
console.log(typeof nota);
// imprime "number"

let aluno = 'Adamastor';
console.log(typeof aluno);
// imprime "string"

let inimigo = {
  vida: 100,
  nome: 'Slime'
};
console.log(typeof inimigo); // impr. "object"

O tipo 1. Boolean O tipo 2. Number

O tipo Boolean armazena um valor verdadeiro ou falso. Exemplo:

let abelhinhaEstaVoando = true;
let modoEscuro = false;
let maioridade = idade >= 18;

Apenas 1 tipo numérico 64bits
- (equivalente ao double de C/Java)
- Não há um tipo específico para números inteiros

Exemplos de variáveis com números:

let a = 5;
let b = 5.674;            // 5 vírgula 674
let c = a + b;            // 10.674
let d = 2 ** 4;           // 16 (2 elevado a 4)
let e = Math.sqrt(25);    // 5 (raiz quadrada de 25)
let f = Math.random();    // [0,1] - algo entre 0 e 1

O tipo 3. String

Representa um texto codificado em UTF-8
Não existe o tipo char como em C/C++ e Java, apenas string 😉

Usamos aspas simples ou duplas

"Abc" === 'Abc'   // simples é mais legal!! mas basta ser consistente

Possui uma propriedade chamada length com o seu comprimento:
```
console.log('Cachorro'.length); // 8
```

Exemplos:

let aranhas = 'fofofauna';
const caminhoVideo = 'videos/a.mp4';
const nomeCompleto = primeiro + ' ' + ultimo;

Manipulando Strings

É possível concatenar (juntar, colar) para criar novas strings:
```
console.log('c' + 'a' + 't');   // imprime 'cat'
```

Podemos acessar cada caractere usando colchetes:

const capitalDeMG = 'Betim';
console.log(capitalDeMG[0]);    // imprime 'B'

Strings possuem métodos, vários deles (veremos mais). Exemplos:

'barba negra'.toUpperCase() === 'BARBA NEGRA'
'Mississippi'.indexOf('ss') === 2
'Orinoco'.replace('noco', '') === 'Ori'
'$'.repeat(3) === '$$$'

Operadores

Aritméticos
- + soma - subtração
- * multiplicação
- ** exponenciação
- / divisão
- % resto da divisão
- ++ incremento -- decremento
Atribuição
- = simples += /= %= composta
Relacionais (comparação)
- == igualdade
- === igualdade forte (!!)
- != desigualdade
- !== desigualdade forte (!!)
- < <= menor/menor igual
- > >= maior/maior igual
Lógicos
- ! não && e || ou

O que significa `===` (igualdade forte)?

Se compararmos '1' com 1 (uma string com um number ) usando ==:
```
console.log('1' == 1);    // imprime true
```
- A comparação == tenta converter um elemento no tipo do outro e depois compara
- Neste caso, converte 1 em '1' e só então compara
Para que essa conversão não aconteça, usamos === 👍:
```
console.log('1' === 1);   // imprime false
```
- Mais rápido para o computador, porque ele não faz a conversão
- Prefira esta forma!! 😉

O objeto `Math`

Além dos operadores matemáticos (e.g., +, -, /, *), existem outras funções matemáticas acessíveis via o objeto Math:

const pi = Math.PI;           // a constante pi
let a = Math.sin(1);          // seno de 1 radiano
let b = Math.cos(pi);         // cosseno de pi radianos
let c = Math.pow(5, 2);       // 5 elevado a 2
let d = Math.sqrt(100);       // raiz quadrada de 100
let e = Math.random();        // nº aleatório entre [0, 1]
let f = Math.round(0.5);      // arredonda p/ inteiro mais próximo (1)
let g = Math.floor(0.5);      // arredonda p/ baixo ("chão": 0)
let h = Math.ceil(0.5);       // arredonda p/ cima ("teto": 1)

Todos os métodos do objeto Math na MDN

Declarando e invocando funções

Funções são declaradas usando a palavra-chave function + nome + parâmetros + corpo ➜
- Há outras formas, como funções anônimas (veremos depois) e funções seta

// DECLARA a função dizOla()
function dizOla() {
  console.log('olá queridão');
}

// INVOCA a função dizOla()
dizOla();

Funções são invocadas (chamadas) por seu nome, seguido de parênteses

Declarando parâmetros para funções

Os parâmetros ficam entre os parênteses e separados por vírgula:
- Não é necessário declarar o tipo do parâmetro - apenas o nome

function dizOla(nome, pronome) {
  console.log('olá ' + pronome + ' ' + nome);
}

dizOla('enfermeira', 'srta.');
// imprime 'olá srta. enfermeira'
dizOla('jujuba', '');
// imprime 'olá  jujuba'
dizOla();
// imprime 'olá undefined undefined'

Para invocar a função ←
- Dá pra chamar uma função sem passar valores para os argumentos. Nesse caso, o parâmetro tem valor undefined

Valor de retorno de funções

A função pode retornar um valor explicitamente:

function elevaAoCubo(numero) {            
  return numero ** 3;             
}
elevaAoCubo(2);     // retorna 8
elevaAoCubo(3);     // retorna 27

function hipotenusa(cateto1, cateto2) {
  let somaQuadrados = cateto1 ** 2 + cateto2 ** 2;
  return Math.sqrt(somaQuadrados);
}
hipotenusa(3, 4);   // retorna 5

Toda função sempre retorna um valor, mesmo sem return. Se não houver a palavra-chave, a função tem um return undefined implícito

function imprimeNome(primeiro, ultimo) {
  console.log(primeiro + ' ' + ultimo);
}
// retorna undefined

function imprimeNome(primeiro, ultimo) {
  console.log(primeiro + ' ' + ultimo);
  return undefined;
}

São idênticas ↑ ⬈

Regras de legibilidade e nomenclatura (1/2)

Nomes de funções e variáveis com notação camelo 🐪 sem acentuação:

let ultimoNome = '';    🐪 ✅✅✅

function removeVideo() {}   🐪 ✅✅✅

let ultimo_nome = '';   👎
let UltimoNome = '';    👎
let últimonome = '';    ❌
let último nome = '';   ❌❌❌

function remove_video() {}  👎
function RemoveVideo() {}   👎
function removevídeo() {}   ❌
function remove vídeo() {}  ❌❌❌

Sempre indente o código:

function total(preco, qtde) {   ✅✅✅
  if (confirmado) {
    return preco * qtde;
  }
  return 0;
}

function total(preco, qtde) {   👎👎👎
if (confirmado) {
return preco*qtde;
}
return 0;
}

Regras de legibilidade e nomenclatura (2/2)

Nomes de variáveis e funções devem ser bem descritivos:

let numeroAlunos;  ✅
let nAlunos;       👎

Evite abreviações desnecessárias

let aluno = 'Bob';  ✅
let a = 'Amarílio'; 👎

Evite nomes com apenas 1 letra

let notaAluno = 10; ✅
let numero = 10;    👎
let temp = '...';   👎

Evite nomes genéricos

Respeite espaçamentos para dar arejamento ao código:

const dano = 5;                                   ✅
let hp -= dano * 0.6;

const dano=5;                                     👎
let hp-=dano*0.6;

let beleza = 10;                                  ✅
function vestir(acessorio) {
  if (acessorio === 'laço') {
    beleza += 10;
  }
}

let beleza=10;                                    👎
function vestir  (acessorio){
  if(acessorio==='laço'){
    beleza+=10;
  }
}

Condicionais, Vetores e Repetição

Arrays, for, while e variações

Condicionais
Vetores
For
- Tradicional
- For of
- forEach
While/Do while

if/else (condicionais)

if (hora < 12) {
  manha = true;
} else {
  manha = false;
}

if (nome === 'Robervaldo') { 
  conceito = 'A';
} else if (nome === 'Ana') {
  conceito = 'B';
} else {
  conceito = 'C';
}

if (estouComSono)
  dormir(); // mas evite omitir { }

Dentro dos parênteses colocamos uma expressão que avalia para true ou false. Ex:
- nome === 'Ana'
- ano < 2000 ano % 4 === 0
- !jaEstudei
- hp > 0 && (balas || granada)
Com apenas 1 comando no if/else, é possível omitir as chaves (como em C/C++, Java)
- Contudo, é uma má ideia

Operador ternário (condicionais)

Quando temos um if/else "simples", pode ser mais legível fazer a verificação em 1 linha com o operador ternário ?:

if (armaduraForte) {
  hp -= 10;
} else {
  hp -= 50;
}

// mesmo código, em 1 linha
hp -= armaduraForte ? 10 : 50;

Formato:

CONDICAO_TESTE ? VALOR_SE_TRUE : VALOR_SE_FALSE;

switch (condicionais)

let corDoSite = 'black';
switch (climaAgora) {
    case 'ensolarado':
      corDoSite = 'yellow';
      break;
    
    case 'nublado':
    case 'chuvoso':
      corDoSite = 'gray';
      break;

    default:
      corDoSite = 'white';
      break;
}

Palavra-chave switch + ( + expressão + )
Um ou mais case + valor para a expressão
Sequência de comandos
Palavra-chave break para sair
- (pode ser omitida para continuar)
Caso default para pegar outros valores (equivalente ao else)

Vetores

Vetores (ou arrays) armazenam uma sequência de valores:

let notas = [10, 4, 7, 8, 8];
let cores = ['azul', 'verde'];
let animais = []; // <- vetor vazio

console.log(notas.length);  // impr. 5
console.log(cores.length);  // impr. 2

Assim como string, um vetor tem um comprimento (propriedade length ):

Em JavaScript, vetores são heterogêneos
- Os itens dos vetores não precisam ter o mesmo tipo
```
let listaDeCoisas = ['Aew', 35, true, [], 'outra string'];
```

Usando vetores

let listaDeCoisas = ['Aew', 35, true, [], 'outra string'];

Indexação: usa-se os símbolos [ e ] para acessar um item do array

console.log(listaDeCoisas[1]);      // imprime 35
listaDeCoisas[0] = '';              // altera primeiro elemento
console.log(listaDeCoisas[0]);      // imprime string vazia

Arrays possuem métodos, vários (veremos outros mais adiante):

let frutas = [];                    // cria um array vazio
frutas.push('kiwi');                // coloca 'kiwi' no array
console.log(frutas);                // imprime ['kiwi']

for (forma tradicional)

::: did-you-know .push-right width:240px; Em JavaScript há pelo menos 3 formas diferentes de fazer um for. Esta é a tradicional mas as outras mais fáceis até. ::: Forma tradicional com for (inicio; condicao; incremento):
```
for (let i = 0; i < 10; i++) {
  console.log(i);               // 0, 1, 2 ... 9
}
```

Percorrendo items de um array:

let cores = ['azul', 'rosa'];
for (let i = 0; i < cores.length; i++) {
  console.log(cores[i]);        // azul, rosa
}

for (formas mais legais)

For of: for (let item of array) 👍:

let cores = ['azul', 'rosa'];
for (let cor of cores) {
  console.log(cor);
  // azul, rosa
}

For each: array.forEach 👍:

let cores = ['azul', 'rosa'];
cores.forEach(function(cor) {
  console.log(cor);
  // azul, rosa
});

while/do..while

Condição primeiro

let i = 1;
while (i !== 10) {
  console.log(i);
  i++;
}

Condição depois

let i = 0;
do {
  i++;
  console.log(i);
} while (i !== 10);

Mais sobre funções, Métodos úteis

Mais coisas legais

Função atribuída a variável
Função como parâmetro
Métodos comuns de strings
Métodos comuns de vetores

Mais sobre funções

Em JavaScript as funções são super flexíveis
1. Função "tradicional" (já vimos)
2. Função anônima (próximo slide)
3. Função seta (próxima aula)
Variáveis podem apontar para funções
Podemos passar funções como parâmetro para outra função

Função anônima (atribuída a variável)

Declaração de função "tradicional":

function dizOla(nome) {
  console.log('olá ' + nome);
}
dizOla('submundo');

function + nome + (params)

Criar uma função anônima e atribuí-la a uma variável:

let dizOla = function(nome) {
  console.log('olá ' + nome);
};
dizOla('submundo');

Funciona da mesma forma

Passando função como parâmetro

function estudar(aluno, fnAprender) {
  console.log(aluno + ' aprendeu ' + fnAprender()); 
}

Vamos criar uma função que recebe outra como parâmetro →→→

Ao chamar estudar(...) devemos passar uma função no segundo argumento

Neste exemplo, dependendo do que foi estudado, o aluno aprende coisas diferentes:

function lerHarryPotter() {                       function lerOlavoCarvalho() {
  return 'criatividade';                            return '?'; 
}                                                 }
let lerDarcyRibeiro = function() {
  return 'sociologia';
}

Agora vamos invocar a função estudar(...):

estudar('André', lerHarryPotter);   // 'André aprendeu criatividade'
estudar('Luiz', lerDarcyRibeiro);   // 'Luiz aprendeu sociologia'
estudar('Jair', lerOlavoCarvalho);  // 'Jair aprendeu ?'

Função vs Método

Função ~ sozinha no mundo, ninguém é dono dela ~ exemplo: todas as que vimos

Método ~ nasceu de algum objeto, ele tem dono ~ ex: as funções das strings, dos vetores (e outros)

// 'dobra' é uma função
function dobra(n) {
  return 2 * n;
}
let nota = 5;
dobra(nota);

// sqrt() é método de Math
nota = Math.sqrt(25);

// toLowerCase() é método
// das strings
'HaNa MonTAna'.toLowerCase();

Métodos comuns de strings (1/3)

Toda string possui vários métodos diferentes que podemos invocar

texto.length ~ não é um método, mas retorna quantos caracteres ~ 'trem'.length === 4

texto[i] ~ não é um método, mas retorna o i-ésimo caractere ~ 'trem'[3] === 'm'

texto.toLowerCase() ~ método que retorna tudo em minúsculas ~ 'Doug'.toLowerCase() === 'doug'

texto.toUpperCase() ~ método que retorna tudo em maiúsculas ~ 'Doug'.toUpperCase() === 'DOUG'

Métodos comuns de strings (2/3)

texto.trim() ~ método que remove espaços em branco ao redor ~ ' mosca '.trim() === 'mosca'

t.indexOf(trecho) ~ método que retorna a posição do trecho no texto (ou -1) ~ 'Thanos'.indexOf('os') === 4

t.substr(ini, tam) ~ método que retorna um trecho dado início e tamanho ~ 'Pronto'.substr(0, 2) === 'Pr'

t.includes(trecho) ~ método que verifica se texto contém o trecho ~ 'Hakuna'.includes('ku') === true

t.split(separad) ~ método que retorna um vetor de trechos ~ 'Banana'.split('a') === ['B', 'n', 'n']

Métodos comuns de strings (3/3)

t.startsWith(trech) ~ método que verifica se começa com o trecho ~ 'Hakuna'.startsWith('Ha') === true

t.endsWith(trecho) ~ método que verifica se termina com o trecho ~ 'Hakuna'.endsWith('na') === true

t.replace(tr, novo) ~ método que substitui um trecho por algo novo ~ (apenas primeira ocorrência) ~ 'ana'.replace('a', 'e') === 'ena'

t.replaceAll(tr, n) ~ método que substitui um trecho por algo novo ~ (todas as ocorrências) ~ 'ana'.replaceAll('a', 'e') === 'ene'

Lista de métodos de string na MDN

Exemplos que usam métodos de strings (1/2)

Função que verifica se nome tem menos que 10 caracteres

function temMenosDe10(nome) {
  return nome.length < 10;
}
temMenosDe10('Donarudo Torampu');
// false

Função que verifica se primeiro nome tem menos que 10 caracteres

function primeiroNomeMenos10(nome) {
  const cadaNomeSeparado = nome.split(' ');
  const primeiroNome = cadaNomeSeparado[0];
  return temMenosDe10(primeiroNome);
}
primeiroNomeMenos10('Donarudo Torampu');
// true

Função que verifica se uma URL começa com https

function comecaComHttps(url) {
  return url.startsWith('https');
}
comecaComHttps('http://omo.com.br');
// false

Função que remove todas as ocorrências de um caractere em um texto

function removeCaractere(texto, caractere) {
  return texto.replaceAll(caractere, '');
}

Exemplos que usam métodos de strings (2/2)

Pega uma frase e se a última letra de cada palavra (com mais do que 1 letra) terminar em 'a' ou 'o', substitui por 'x' (no jsfiddle)

function alteraFinalzinhoPalavras(frase) {
  let palavras = frase.split(' ');

// 1. divide a frase em um vetor de palavras

  for (let i = 0; i < palavras.length; i++) {
    palavras[i] = palavras[i].trim();

// 2. para cada palavra
// 2.1. remove espaços em branco ao redor da palavra

    if (palavras[i].length <= 1) continue;

// 2.1. verifica se tamanho > 1

    if (palavras[i].endsWith('o') || 
        palavras[i].endsWith('a')) {
      const ateUltimaLetra = palavras[i].length - 1;
      
      palavras[i] = 
        palavras[i].substr(0, ateUltimaLetra) + 'x';
    }
  }

// 2.2. verifica se termina 'a' ou 'o'

// 2.2.1. pega posição antes da última letra

// 2.2.2. substitui última letra da palavra por 'x'

  return palavras.join(' '); 
}

// remonta a frase, juntando o vetor de palavras
// colocando um espaço entre cada uma

Métodos comuns de vetores (1/3)

Assim como as strings, os vetores também possuem vários métodos úteis

vetor.length ~ não é método, mas retorna tamanho do vetor ~ [5].length === 1

vetor[i] ~ não é método, mas retorna i-ésimo elemento ~ [3, 10][0] === 3 ~ js let letras = ['x']; letras[0] = 'y';

Métodos comuns de vetores (2/3)

vetor.push(elem) ~ método que insere elem ao final do vetor ~ ['a'].push('b') === ['a', 'b']

vetor.pop() ~ método que remove último elemento ~ ['a', 'b'].pop() === ['a']

vetor.indexOf(elem) ~ método que retorna o índice do elemento no vetor (ou -1) ~ [5,6,7].indexOf(5) === 0 ~ [5,6,7].indexOf(2) === -1

Métodos comuns de vetores (3/3)

vetor.reverse() ~ método que inverte a ordem dos elementos ~ [1,2,3].reverse() === [3,2,1]

vetor.sort() ~ método que coloca os elementos em ordem ~ [8,1,-6].sort() === [-6,1,8] ~ ['f', 'b'].sort() === ['b', 'f']

vetor.join(spacer) ~ método que retorna uma string juntando os elementos ~ ['fl', 'rb'].join(' ') === 'fl rb' ~ ['fl', 'rb'].join('+') === 'fl+rb'

Lista de métodos comuns de vetores na MDN

Exemplos com métodos de vetores (1/2)

Função que soma todos os elementos do vetor

function soma(valores) {
  let total = 0;
  for (let n of valores) {
    total += n;
  }
  return total;
}

Função que retorna um vetor com os quadrados

function quadrados(valores) {
  let resultado = [];
  for (let n of valores) {
    resultado.push(n ** 2);
  }
  return resultado;
}

Função que busca por um elemento específico

function busca(vetor, elem) {
  return vetor.indexOf(elem);
}

Função que adiciona no vetor apenas se elemento ainda não estiver nele

function adicionaSemDuplicar(vetor, elem) {
  if (busca(vetor, elem) === -1) {
    vetor.push(elem);
  }
}

Exemplos com métodos de vetores (2/2)

Função que imprime uma matriz n x n de números (no jsfiddle)

function imprimeMatriz(matriz) {
  let resultado = '';

  for (let i = 0; i < matriz.length; i++) {
    resultado += '| ';
    for (let j = 0; j < matriz[i].length; j++) {

// 1. para cada linha
// começou a linha
// 2. para cada coluna

      resultado += matriz[i][j] + ' ';
    }
    resultado += '|\n';
  }

// 3. imprime o elemento (i,j)

// acabou a linha, coloca paredinha |

  console.log(resultado);
}

// e quebra linha \n

imprimeMatriz([[1,2],[3,4]])

// | 1 2 |
// | 3 4 |

Referências

Capítulo 2 do livro "JavaScript: The Good Parts"
Mozilla Developer Network (MDN)

Erros comuns durante a prática

Files

js0

Directory actions

More options