Stela JS

Stela JavaScript Aulas Aula 7

Aula 7 Projeto Unidade 3

Escreveu duas vezes? Vira função.

Cadastro de Alunos, parte I: organizando o código em blocos reutilizáveis.

Objetivo do dia

Criar funções com parâmetros e retorno e começar o projeto Cadastro de Alunos.

Antes da aula

Ler sobre funções na bibliografia básica.

Como conta ponto

Lista de exercícios práticos.

P1 · o problema

Código repetido é convite para erro

Olhe o Sistema de Aprovação: a mesma conta de média aparece em vários lugares. Se a regra mudar, você vai lembrar de trocar em todos? A solução é dar um nome para esse pedaço de código e chamá-lo quando precisar.

repetido.js 
1const media1 = (8 + 7 + 9) / 3;2const media2 = (5 + 6 + 7) / 3;3const media3 = (10 + 9 + 8) / 3;4// e se a média passar a ter peso?5// trocar em 40 lugares...
C1–C3 · conceitos

Funções em três peças

C1

Declarar e chamar

A função é declarada uma vez, com function e um nome, e chamada quantas vezes quiser, com o nome e parênteses.

1function saudar() {2  console.log("Bem-vindos, filhotes!");3}45saudar();   // chama uma vez6saudar();   // e de novo
C2

Parâmetros e argumentos

Parâmetros são as variáveis que a função recebe, na declaração. Argumentos são os valores que você manda na chamada.

1function saudar(nome) {        // nome é o parâmetro2  console.log(`Oi, ${nome}!`);3}45saudar("Ana");     // "Ana" é o argumento6saudar("Caio");
C3

Retorno com return

O return devolve um resultado para quem chamou. Com ele, uma função pode alimentar outra.

Depois do return, a função para.

1function calcularMedia(n1, n2, n3) {2  return (n1 + n2 + n3) / 3;3}45function verificarSituacao(media) {6  return media >= 6 ? "Aprovado" : "Recuperação";7}89const media = calcularMedia(8, 7, 9);   // 810console.log(verificarSituacao(media));  // Aprovado
CU1 · caso de uso

Cadastrar um aluno sem repetir código

Ator: Secretaria da escola

Objetivo: Cadastrar alunos com nome e e-mail válidos, sempre do mesmo jeito.

Fluxo principal

  1. A secretaria informa o nome e o e-mail.
  2. O sistema confere se o nome não está vazio.
  3. Confere se o e-mail tem @.
  4. Confirma o cadastro.

E se...

  • O mesmo conferir e-mail aparece também na tela de editar aluno: vira uma função usada nos dois lugares.

Para pensar

  1. Quais passos viram funções? Que parâmetros e que retorno cada uma tem?
  2. Se a regra do e-mail mudar, quantos lugares do código vocês alteram?
A1 · atividade

Cadastro de Alunos, parte I

O projeto que vai crescer até o fim do semestre. O que você marcar fica salvo neste navegador.

0 de 8
S1 · conexão STEAM

Funções em todo lugar

M

Matemática

f(x) = 2x + 1 é uma função: entra um valor, sai outro. Em JavaScript é igualzinho, só que com nome.

E

Engenharia

Funções são como módulos de uma placa: cada um faz uma coisa, e você troca um sem refazer o resto.

T

Tecnologia

Toda biblioteca que você vai usar no futuro, inclusive o React, é um monte de funções bem organizadas.

D1 · desafio extra

Terminou antes? Tem mais.

Crie a função calcularMediaPonderada(n1, n2, peso1, peso2) e use no lugar da média simples. Repare: só um lugar mudou.

J1 · materiais

Para estudar e praticar

curso/módulo 4

Funções

Explicação, editor ao vivo e quiz.

JavaScriptpraticar MDN Web Docs

Funções

Tudo sobre funções, em português.

Documentaçãoconsulta
bibliografia

JavaScript: guia do programador

SILVA, Maurício Samy. Novatec, 2020. E-book na biblioteca.

Livroleitura
E1 · entrega

Commit da parte I do Cadastro de Alunos

Na próxima aula tem a atividade avaliativa prática, em cima deste projeto. Venha com ele funcionando.