cefet_front_end

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!

Hoje veremos…

História e características
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

História e características
Tipos de dados
Declarando variáveis
Criando funções

História e características

Introdução a JavaScript

História
O que é JavaScript
Como incluir na página

História (1/2)

1989 - 1993 Tim Berners-Lee cria a WWW em CERN (European Organization for Nuclear Research) e a deixa aberta ao público

1994 Håkon propõe uma linguagem para dar conta da responsabilidade de alterar a aparência de páginas web chamada CSS

1995 (maio) Brendan Eich, funcionário do Netscape, criou (em 10 dias!!) uma linguagem para alterar páginas dinamicamente - o Mocha

Foto de Brendan Eich

1995 (setembro) LiveScript (novo nome) é lançado com a versão beta do Netscape 2.0

História (2/2)

1995 (dezembro) Nome virou JavaScript para aproveitar a fama do Java

1996 (agosto) Microsoft adota o JavaScript sob o nome de JScript

1996 (novembro) A Netscape submeteu o JavaScript para a Ecma international para padronização. A especificação recebeu o nome de ECMAScript

1997 A Ecma International publicou a primeira versão

1998 Versão 2 do ECMAScript

1999 Versão 3 do ECMAScript

2009 Versão 5 do ECMAScript

2013 - hoje Versões 6-9+ do ECMAScript, que mudaram de nome para ES2015, ES2016, ES2017, ES2018…

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 :wink:

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) === '$$$'

O tipo `4. Null`

Tecnicamente um tipo, mas na prática contém apenas 1 valor: null
```
let x = null;
console.log(typeof x);    // imprime null¹
```
Usamos quando uma variável não tem um valor aplicável naquele momento ¹: bug typeof null

O tipo `5. Undefined`

Parecido com Null, possui apenas 1 valor: undefined
```
let x;
console.log(typeof x);    // imprime undefined
```
É o tipo padrão de variáveis que não foram associadas a nenhum valor

O tipo `7. Object`

É um “saquinho” de propriedades:
```
let jogador = {
  pontos: 1420,
  vidas: 2
};
console.log(jogador.pontos);
// imprime 1420
```
- Propriedade: (nome → valor)
  - Nome: uma String
  - Valor: qualquer coisa, exceto undefined
No exemplo, o objeto tem 2 propriedades:
1. Nome: pontos, valor: 1420
2. Nome: vidas, valor: 2

Para acessar as propriedades, há 2 formas:

// notação ponto
console.log(jogador.vidas);

// notação colchete
console.log(jogador['vidas']);

Objetos conhecidos

Quando um objeto tem uma propriedade que é uma função, chamamos ela de método.

Há vários objetos comuns que usamos no dia a dia: Math, console, window. Exemplos:
- O objeto Math possui uma propriedade:
  - Math.PI
    (PI → 3.14159) (cujo valor é Number)
- O objeto console possui uma propriedade
  - console.log
    (log → function() {…})
- O objeto window possui uma propriedade
  - window.alert
    (alert → function() {…})
E se quisermos criar nossos próprios objetos? #mcfaz?

Criando um objeto (2 formas)

Na forma literal:

let jogador = {             // forma mais expressiva, curta e sexy 😎
  pontos: 1420,             // propriedades separadas por vírgula
  vidas: 2
};

let jogador = {};           // um objeto vazio: { }
jogador.pontos = 1420;      // criou jogador.pontos com valor 1420
jogador.vidas = 2;          // criou jogador.vidas

Novas propriedades podem ser atribuídas mesmo após sua criação!

Na forma do operador new:
- ```
let jogador = new Object();
jogador.pontos = 1420;
jogador.vidas = 2;
```
  - Contudo, desta forma sempre cria-se um objeto vazio e deve-se preenchê-lo

Objetos dentro de objetos

let voo = {
    companhia: 'Gol',
    numero: 815,
    decolagem: {
        IATA: 'SYD',
        horario: '2004-09-22 14:55',
        cidade: 'Sydney'
    },
    chegada: {
        IATA: 'LAX',
        horario: '2004-09-23 10:42',
        cidade: 'Los Angeles'
    }
};

Aqui existem 3 objetos:
- O voo, com as propriedades:
  - companhia
  - numero
  - decolagem
  - chegada
- decolagem e chegada são objetos por si mesmos

Métodos de objetos

const loja = {
  livros: [       // prop. é um vetor
    'macunaíma',
    'torre negra'
  ],
  dinheiro: 500,  // propri. é number
  
  // método vender
  vender: function() { // p. é função
    this.dinheiro += 15;
  } 
};

loja.vender(); // loja.dinheiro = 515
loja.vender(); // loja.dinheiro = 530

O valor de uma propriedade pode ser uma função
- Nesse caso, chamamos ela de método
- Todo método tem acesso ao próprio objeto com o ponteiro this
- Objetos com métodos formam o princípio do conceito de Orientação a Objetos

Outros tipos, baseados em `Object`

Existem outros tipos complexos, que são baseados em Object:

Date Por exemplo, para imprimir o horário atual no console: js let agora = new Date(); console.log(agora); //Sun Jan 17 2021 18:11:46...

Function (sim! funções são objetos em JavaScript)

Array (vetores também são objetos)

SeuProprioTipo™ (é possível criar novos tipos também)

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 === :thumbsup::
```
console.log('1' === 1);   // imprime false
```
- Mais rápido para o computador, porque ele não faz a conversão
- Prefira esta forma!! :wink:

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 funcoes

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)

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) :thumbsup::

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

For each: array.forEach :thumbsup::

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 funcoes, 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 = '';
  
  // 1. para cada linha
  for (let i = 0; i < matriz.length; i++) {
    // começou a linha
    resultado += '| ';
    for (let j = 0; j < matriz[i].length; j++) {
      // 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