31:[] 2f:{"title":"Tutorial 1: Calculadora de almoço","cells":[{"id":0,"value":"md`# Tutorial 1: Calculadora de almoço\n\n${signinNote}\n\nVamos escrever o seu primeiro notebook. Um notebook é ao mesmo tempo é legível e funcional: uma mistura entre composição e programa. Este tutorial irá apresentá-lo aos princípios de como escrever e executar código em um notebook, e é um ótimo lugar para começar se você está apenas aprendendo Observable.\n\n### Steps\n\n1. Definir um título\n2. Criar uma célula\n3. Referenciar uma célula\n4. Manter a célula aberta\n5. Usar o viewof para adicionar um slider\n6. Usar uma declaração em block para os cálculos`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"step1 = md`---\n\n## Definir um título\n\nConteúdo de texto como este é normalmente escrito em Observable usando [Markdown](https://guides.github.com/features/mastering-markdown/), e o título de um notebook é retirado do seu primeiro cabeçalho. Portanto, seu novo notebook é intitulado _Untitled_. Vamos substituir essa célula por _Calculadora de almoço_.\n\nSelecione o texto, digite 'Calculadora de almoço' e pressione a tecla ${key(\n \"Shift-Enter\"\n)} para executar o código.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"video(\"tutorial-1/1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"step2 = md`---\n\n## Criar uma célula\n\nA seguir, vamos criar uma nova célula e adicionar um nome e valor. Clique no botão + abaixo da célula da calculadora de almoço e digite este código:\n\n\\`\\`\\`js\nsandwiches = 10\n\\`\\`\\`\n\nA linguagem no Observable é JavaScript, com algumas pequenas diferenças, o que torna-a melhor para interfaces interativas e criativas. Esta nova célula tem o nome de \\`sandwiches\\`, e valor attribuído \\`10\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"video(\"tutorial-1/2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"step3 = md`---\n\n## Referenciar uma célula\n\nDigamos que cada sanduíche custe $5. Vamos calcular o custo total deste almoço com uma nova célula chamada \\`total\\`.\n\nEsta é a sua chance de usar o preenchimento automático integrado ao Observable, para que você não precise digitar a palavra \"sandwiches\" inteira. Tente apenas tentar \\`total = sa \\` e depois pressione ${key(\n \"Tab\"\n)} - Observable irá completar a palavra \"sandwiches\" para você.\n\n\\`\\`\\`js\ntotal = sandwiches * 5\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"video(\"tutorial-1/3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"step4 = md`---\n\n## Manter a célula aberta\n\nNotebooks são compostos de células como essas, que geram um resultado. Você pode ver o código que produz cada célula - clicando no ícone ${menu} à sua esquerda. Você pode querer manter uma célula aberta, para aqueles que lêem o notebook possam ver o código por trás dele. Vamos manter a célula \\`total\\` aberta, para que todos vejam como esse valor é calculado.\n\nAbra a célula total, se ainda não estiver aberta, e clique no ícone pin ${pin.cloneNode(\n true\n)} para mantê-la aberta.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"video(\"tutorial-1/4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"step5 = md`---\n\n## Usar o viewof para adicionar um slider\n\n\nEste notebook calcula o custo de um certo número de sanduíches, mas seria melhor se qualquer leitor pudesse interagir com ele sem ter que alterar o código. Vamos tornar o número de sanduíches interativo usando \\`viewof\\`, uma funcionalidade do Observable que permite que uma célula exponha o valor de um input.\n\nSubstitua o conteúdo da célula de \\`sandwiches \\` por:\n\n\\`\\`\\`js\nviewof sandwiches = html \\` \\`\n\\`\\`\\`\n\nCom esta mudança, a célula \\`sandwiches\\` agora mostrará um slider, e movendo esse slider atualizará o valor \\`total\\`. Essa é a mágica dos notebooks reativos Observable!\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"video(\"tutorial-1/5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"step6 = md`---\n\n## Usar uma declaração em block para os cálculos\n\n\nAté agora, usamos células simples - atribuindo o nomde de uma célula a um valor ou a um cálculo simples. E se você quiser fazer mais, como usar \\`for \\` loops, declarações \\`if \\` e outros recursos do JavaScript? Você pode fazer isso com uma declaração em bloco: uma célula entre chaves \\`{\\` e \\`}\\`.\n\nSe você quiser que um bloco retorne um valor, você terá que usar a declaração \\`return\\`, assim como em uma função JavaScript.\n\nPor exemplo, vamos supor que o restaurante dê um desconto de 10% em pedidos de 51 ou mais sanduíches.\n\n\\`\\`\\`js\ntotal = {\n let total = sandwiches * 5;\n if (sandwiches > 50) {\n total * = 0,9;\n }\n return total;\n}\n\\`\\`\\`\n\nOs blocos são como funções, mas são executados imediatamente e não têm parâmetros. Assim como antes, quando você mudar o valor do slider, o valor \\`total\\` é automaticamente recalculado.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"video(\"tutorial-1/6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"md`---\n\n## Recapitulando\n\n\n- Notebooks são compostos de células, que podem ter nomes\n- O título de notebook é retirado de sua primeira célula\n- A maioria dos notebooks usa Markdown para seu conteúdo de texto\n- Você pode pressionar a tecla ${key(\n \"Shift-Enter\"\n)} para avaliar uma célula e a tecla ${key(\"Tab\")} para autocompletar um nome.\n- Clicar no ícone ${pin.cloneNode(true)} mantém uma célula aberta.\n\n## Leitura adicional\n\n- [Getting started Markdown](https://guides.github.com/features/mastering-markdown/)\n- [Uma breve introdução ao Viewof](https://beta.observablehq.com/@mbostock/a-brief-introduction-to-viewof)\n\n## Obtendo ajuda\n\nEstá tendo problemas com este tutorial? Estamos felizes em ajudá-lo: poste no [Forúm do Observable](https://talk.observablehq.com/) e nós podemos ajudar.\n\n## No próximo tutorial\n\nA seguir, [aprenderemos como fazer uma requisição a uma API e importar células de outros notebooks. 👉 ](https://observablehq.com/d/c5bafacee4db25af)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"seriesNavigation(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"import {\n toggle,\n pin,\n menu,\n video,\n key,\n signinNote,\n seriesNavigation\n} from \"c71877d1b4004ee1\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}