Desenvolvimento para Dispositivos Móveis
Javascript
Por onde começar
Os alunos devem compreender os seguintes conceitos
Javascript no React Native
React Native utiliza JavaScript ou TypeScript como linguagem principal.
<View>
<Text> Olá </Text>
</View>
let e const
O Javascript moderno utiliza duas declarações de variával.
let
Permite alterar posteriormente o valor associado à variável.
let quantidade = 10;
quantidade = 15;
console.log(quantidade);
const
Não permite uma nova atribuição à variável.
const nome = "Ana";
nome = "Maria";
let e const
const impede a troca da referência, mas não torna objetos e arrays imutáveis.
const usuario = {
nome: "Ana",
idade: 20
};
usuario.idade = 21;
Escopo
O Javascript possui:
Escopo global
const faculdade = "ALFAUNIPAC";
function exibirFaculdade() {
console.log(faculdade);
}
exibirFaculdade();
console.log(faculdade);
Escopo de função
function calcularMedia() {
const nota1 = 8;
const nota2 = 6;
const media = (nota1 + nota2) / 2;
console.log(media);
}
console.log(media);
calcularMedia();
Escopo de bloco
if (true) {
const mensagem = "Olá!";
console.log(mensagem);
}
for (let i = 0; i < 3; i++) {
console.log(i);
}
Template strings
const nome = "Ana";
const idade = 20;
console.log("Nome: " + nome + " - Idade: " + idade);
console.log(`Nome: ${nome} - Idade: ${idade}`);
Arrow functions
function calcularTotal (preco, quantidade) {
const total = preco * quantidade;
return total;
}
const resultado = calcularTotal(50, 3);
console.log(resultado);
Arrow functions
Uma arrow function é uma forma mais curta de escrever funções em JavaScript. Ela utiliza o símbolo =>
const calcularTotal = (preco, quantidade) => {
return preco * quantidade;
};
const calcularTotal = (preco, quantidade) => preco * quantidade;
Arrow functions
const verificarSituacao = (media) => {
if (media >= 7) {
return "Aprovado";
} else if (media >= 5) {
return "Recuperação";
} else {
return "Reprovado";
}
};
console.log(verificarSituacao(8));
Objetos
Um objeto representa uma entidade com diferentes propriedades.
const produto = {
codigo: 10,
nome: "Teclado",
preco: 150,
estoque: 20
};
Desestruturação de Objetos
const usuario = {
nome: "Ana",
idade: 22
};
const nome = usuario.nome;
Com desestruturação
const { nome, idade } = usuario;
const { nome: nomeUsuario } = usuario;
Arrays e Arrays de Objetos
const produtos = [
"Teclado",
"Mouse",
"Monitor"
];
console.log(produtos[0]);
Arrays e Arrays de Objetos
const produtos = [
{
codigo: 1,
nome: "Teclado",
preco: 150
},
{
codigo: 2,
nome: "Mouse",
preco: 80
}
];
Desestruturação de arrays
const cores = ["Azul", "Verde", "Vermelho"];
const [primeira, segunda] = cores;
console.log(primeira);
console.log(segunda);
Spread operator
Ele serve para espalhar os elementos ou propriedades de uma estrutura em outra.
const numeros = [1, 2, 3];
const novosNumeros = [...numeros, 4, 5];
console.log(novosNumeros);
Rest operator
function cadastrarAluno(nome, nota1, nota2, nota3) {
console.log(nota1);
console.log(nota2);
console.log(nota3);
}
function cadastrarAluno(nome, ...notas) {
console.log(notas);
}
cadastrarAluno("Carlos", 6, 8, 9, 10, 7);
Imutabilidade
const produto = {
nome: "Mouse",
preco: 100
};
produto.preco = 120;
Imutável
const produto = {
nome: "Mouse",
preco: 100
};
produto.preco = 120;
Métodos de array
Um array guarda vários valores.
Os métodos de array são ferramentas prontas para percorrer, procurar, transformar, filtrar ou resumir esses valores.
Imagine um array de notas:
const notas = [7, 5, 9, 4, 8];
Geralmente usamos funções de repetição para acessá-lo.
for (let i = 0; i < notas.length; i++) {
console.log(notas[i]);
}
Métodos de array
O JavaScript oferece métodos específicos para realizar operações comuns sobre arrays.
notas.forEach((nota) => { console.log(nota); });
Usar métodos específicos deixam mais claros as intenções das operações.
const notasAprovadas = notas.filter((nota) => nota >= 6);
Métodos de array
Método | Finalidade | Retorno |
map | transformar elementos | novo array |
filter | filtrar elementos | novo array |
find | encontrar um elemento | elemento ou undefined |
some | verificar se algum atende | boolean |
every | verificar se todos atendem | boolean |
sort | ordenar | array |
reduce | acumular valores | valor calculado |
Métodos combinados
Os métodos podem ser combinados.
const produtos = [
{ nome: "Mouse", preco: 80, disponivel: true },
{ nome: "Teclado", preco: 150, disponivel: false },
{ nome: "Monitor", preco: 900, disponivel: true },
{ nome: "Webcam", preco: 200, disponivel: true }
];
const nomes = produtos
.filter((produto) => produto.disponivel)
.map((produto) => produto.nome);
Módulos
Módulos permitem dividir o código em vários arquivos, facilitando organização, reutilização e manutenção.
export: disponibiliza funções, variáveis ou classes para outros arquivos.
import: permite utilizar recursos exportados por outro módulo.
No Node.js, podemos usar ES Modules configurando no package.json
Módulos (export e import)
Um módulo é simplesmente um arquivo JavaScript que possui uma responsabilidade específica.
export { pedidos };
import { pedidos } from "../dados/pedidos.js";
Os módulos formam uma espécie de cadeia de dependências.
Assincronicidade
A assincronicidade permite que o JavaScript inicie uma tarefa demorada sem bloquear a execução do restante do código.
É comum em operações como:
Enquanto a tarefa assíncrona é processada, o programa pode continuar executando outras instruções.
Promises
Uma Promise representa o resultado futuro de uma operação assíncrona.
Ela pode estar em três estados:
Promises
Para acessar o resultado de uma Promise, utilizamos principalmente:
.then() — trata o resultado em caso de sucesso;
.catch() — trata erros;
.finally() — executa ao final, independentemente do resultado
.then vs async/await
Não existe nada tecnicamente errado em utilizar .then().
O problema aparece principalmente quando começamos a ter várias operações assíncronas dependentes umas das outras.
buscarPedido()
.then(...)
.then(...)
.then(...)
.catch(...);
async/await permite escrever código assíncrono com uma estrutura visual semelhante ao código sequencial.
async
A palavra-chave async é usada para declarar uma função assíncrona.
Uma função async sempre retorna uma Promise, mesmo quando retorna um valor simples.
await
A palavra-chave await é usada dentro de funções async para aguardar a resolução de uma Promise antes de continuar a execução daquela função.
Enquanto a Promise não é concluída, o restante da função fica aguardando, sem bloquear toda a aplicação.
const resultado = await algumaPromise;
Tratamento de exceções
O try/catch permite tratar exceções durante a execução do programa.
try {
// código que pode gerar erro
} catch (erro) {
// tratamento do erro
}
Tratamento de exceções
O bloco finally é executado independentemente do resultado da operação.
finally {
}
Pode ser útil para:
Tratamento de exceções
throw interrompe o fluxo normal da função e lança uma exceção.
throw new Error("Mensagem do erro");
Essa exceção pode ser capturada pelo catch
Promisse.all
Promise.all() permite aguardar várias Promises simultaneamente.
const resultados = await Promise.all([
promise1,
promise2,
promise3
]);
O resultado será um array contendo os valores resolvidos.
É apropriado quando: