31:[] 2f:{"title":"Cadernos de notas Observable","cells":[{"id":0,"value":"# Cadernos de notas Observable \n\n - Interface\n - Fórmulas e exibição\n - Criando e deletando células\n - Movendo células\n - Tipos de células\n - Reatividade\n - Animação\n - Publicação e controle de versões\n - Compartilhamento\n\n
","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"//\n// Uma célula JavaScript\n//\n(100 + 5) * 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"h20 = //\n// Outra célula JavaScript\n//\n{\n // Série harmônica com n termos\n const n = 20;\n let soma = 0;\n for (let k = 1; k <= n; k++) soma += 1 / k;\n return soma; // <- Valor da célula\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"## Uma célula *Markdown*\n - Markdown = linguagem de mark-up \n - Gera conteúdo Html com uma sintaxe simplificada\n - Mais detalhes em [markdownguide.org](https://www.markdownguide.org/)","pinned":true,"hidden":false,"mode":"md"},{"id":21,"value":"

Uma célula HTML

Linguagem de mark-up nativa dos navegadores
Sintaxe baseada em XML
Inúmeros recursos para aprendizado

Ex.: W3 Schools

","pinned":true,"hidden":false,"mode":"html"},{"id":26,"value":"//\n// Usando tagged templates para gerar markdown\n//\nmd`## Tagged templates permitem gerar _markdown_ em JS`","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"//\n// Usando tagged templates para gerar html\n//\nhtml`

... e também conteúdo html

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"## JavaScript+MD+HTML \nTambém é possível usar fórmulas JavaScript em conteúdos html ou Markdown. \nPor exemplo, sabemos que 1+1=${1+1}.","pinned":true,"hidden":false,"mode":"md"},{"id":35,"value":"## Outros tagged templates úteis\n\nLaTeX: ${tex`\\sqrt{\\frac{1+1}{1+1}}=1`}\n\nGraphViz: \n\n${dot`\n digraph {\n A -> B\n A -> C\n }`}\n\nSVG:\n\n ${svg``}\n ","pinned":true,"hidden":false,"mode":"md"},{"id":44,"value":"## Reatividade\nBaseado no _grafo de dependências entre células_.
\n(veja o painel com o minimap à direita ->)","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"a = 1 + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"b = a + 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"c = a * b","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"## Reatividade e inputs\nCélulas `viewof` _nome_ exibem o valor de **_nome_**, mas são avaliadas como **_nome_`.value`**.
\nPara elementos do tipo `input`, desencadeiam reatividade sempre que o valor do input muda.","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"viewof numero = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"numero * 8","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"## Biblioteca `Inputs`\nComponentes para entrada de dados.","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"viewof x = Inputs.number([0, 100], { step: 1, value: 5, label: \"x\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof tamanho = Inputs.range([0, 100], { step: 1, value: 5, label: \"tamanho\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"viewof bicho = Inputs.radio([\"cão\", \"gato\", \"cavalo\", \"papagaio\"], {\n label: \"bicho\",\n value: \"cão\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof letra = Inputs.select(\"ABCDEFG\", { label: \"letra\", value: \"A\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"[x, tamanho, bicho, letra]","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"## Células geradoras\nCélulas geradoras são reavaliadas a 60 quadros por segundo.","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"{\n for (let i = 0; ; i++) {\n yield i; // <- yield ao invés de return\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"## Geradores e animação","pinned":false,"hidden":false,"mode":"md"},{"id":155,"value":"{\n let pat = [];\n for (let k = 0; ; k++) {\n yield html`

${pat.join(\"\\n\")}`;\n    if (k % 30 != 0) continue; // <- Pula alguns quadros da animação\n    let s = \"\";\n    for (let i = 0; i < 50; i++) s += \"╱╲\"[~~(Math.random() * 2)];\n    pat.push(s);\n    if (pat.length > 20) pat.shift();\n  }\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}