2d:null 2e:["$","title",null,{"children":"Programando no Observable | Guilherme Ranoya | Observable"}] 33:Tf26,Mas você deve estar achando estranho que as variáveis declaradas em blocos do Observable são constantes, e mesmo assim foi possível modificar seu valor... Constantes precisam manter seu valor inalterado ao longo da execução do programa do começo ao fim. Ao alterar os campos `xb` e `zb`, o seu programa está sendo novamente executado deste o início, com valores iniciais de **${xb}** e **${zb}** para as constantes. Estes valores não estão sendo alterados ao longo da execução do código. Cada vez que uma alteração é feita nestes valores, seu **código computacional** está sendo integralmente reavaliado pelo Observable, e executado do zero. De fato, constantes não podem ser alteradas. Se você incluir a seguinte instrução em um bloco do Observable: ```js minhaconst = 10; ``` e logo abaixo incluir esta outra instrução: ```js minhaconst = 20; ``` receberá uma informação de **erro**, pois `minhaconst` já foi definida no seu programa. Variáveis que tem seus valores alterados (variáveis mesmo) se encontrarão dentro do conteúdo de [loops](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript5?cells=*), [condicionais](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript4?cells=*), [funções](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript3?cells=*), [arrays](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript2?cells=*) ou **objetos**, que são outros elementos que compõem todas as linguagens de programação que serão vistos mais adiante. Era comum a declaração de **variáveis globais** em **javascript** para serem utilizadas ao longo do programa, mas esta é considerada uma péssima prática de programação pelos engenheiros da computação (pois permite que o mesmo dado seja alterado equivocadamente por qualquer outra parte do programa, e gere problemas no seu comportamento), e sendo assim, este recurso foi cortado do Observable (para que a própria plataforma funcione sem ter esses problemas). Para declarar uma variável dentro de um destes outros elementos, você escreverá assim: ```js let minhavar = 10; ``` E para criar constantes dentro destes contextos, fará assim: ```js const minhaconst = 10; ``` E estas declarações irão aparecer em trechos de código como esse (que você ainda não precisa se preocupar em entender): ```js minhafun = function(v) { let minhavar = 10; } ``` Os nomes de suas variáveis você mesmo cria, lembrando que não podem começar com caracteres numéricos, ou conterem espaços ou símbolos no seu nome. Variáveis e constantes podem guardar valores de muitas naturezas, como frações, números inteiros, textos, caracteres, valores binários, etc. Para atribuir um texto a uma variável ou constante, basta declará-la com qualquer uma das três formas abaixo: ```js textosimples = "Isso é um texto simples, que pode conter aspas simples dentro dele, como 'essas'."; textosimples2 = 'Isso também é um texto simples, que pode conter aspas duplas dentro dele, como "essas".'; textocomplexo = `Isso é um texto complexo, que pode pular linhas, e incluir outras variáveis, dentro dele, como qNum = \${qNum} (${qNum}), e também "aspas duplas" ou 'aspas simples'.`; ``` Para declarar um valor numérico, inteiro ou fracionário, basta escrever o número: ```js meuNumero = 3.1416; ``` E para declarar um valor binário, bastante útil para controlar [loops](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript5?cells=*), [condicionais](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript4?cells=*) e todo tipo de comparação lógica, usamos os operadores `true` e `false`: ```js zeroouum = true; ``` 34:[] 31:{"id":"0723c78d1c4bd980","slug":"javascript1","title":"Programando no Observable","thumbnail":"a362404dc3f2da00f3909e3b76eb50c1add107f420729c38ae5a75295bf8824b","access_level":"public","create_time":"$D2024-02-08T00:01:05.400Z","update_time":"$D2024-05-22T14:32:25.150Z","view_time":null,"first_public_time":"$D2024-02-08T00:01:05.400Z","has_unpublished_edits":null,"fork":{"id":"0218a43ebfda0b4c","slug":"oquesaonotebooks","title":"O que são Notebooks?","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":473,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"930a47a12763c432","slug":"aulas-de-observable","title":"Aulas de Observable","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Programando no Observable","cells":[{"id":0,"value":"# Programando no Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"### Introdução sobre literate programming no Observable com javascript\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"## Variáveis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"Tudo que a gente irá usar, processar, calcular ou transformar em um **código computacional** precisa estar armazenado em variáveis, ou seja, para que um programa de computador funcione, ele precisa lidar com a informação, dados, ou valores, na memória. As variáveis são apenas uma referência para algo que está guardado na memória (RAM) do computador.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":442,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"Dados e informações guardadas em disco, na forma de arquivos, precisam primeiro ser lidas e colocadas na memória, para depois serem utilizadas.\n\nTudo que será feito em um programa precisará de variáveis, e para serem usadas, elas precisam ser **declaradas**, isto é, faz-se necessário informar ao **compilador ou interpretador** do programa quem elas são para que ele possa interpretar e executar o código corretamente. \n \nQuando inserimos uma instrução deste tipo no Observable,\n\n```js\nvariavel = 10;\n```\n\nestamos criando um tipo de variável muito específica em **javascript**, chamada de **constante**. Todos os blocos de programação do Observable definem constantes, sejam elas nomeadas, ou não. O próprio texto em **markdown** (este aqui) está implicitamente dentro de uma constante, pois foi escrito em um dos blocos da plataforma.\n\nDe qualquer maneira, vejamos como declarar variáveis na prática. Abaixo declaramos uma variável chamada `x`, com o valor `${x}`:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"x = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"Na sequência declararemos outra variável `z` com o valor `${z}`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"z = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"E agora processaremos um cálculo (aritimético, de adição) das duas variáveis, cujo resultado será atribuído a uma terceira variável, chamada `q` com a instrução:\n\n```js\nq = x + z;\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":253,"value":"q = x + z","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"Repare que o Observable já nos apresenta imediatamente o resultado desta conta, o valor `${q}`.\n\nVamos fazer a mesma coisa agora, contudo utilizando valores que você mesmo irá atribuir de forma interativa:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"viewof xb = Inputs.text({ label: \"xb\", value: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"viewof zb = Inputs.text({ label: \"zb\", value: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"```js\nqb = xb + zb\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"qb = xb + zb","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"Estranhamente, o valor resultante da soma de **${xb}** com **${zb}**, resultou em **${qb}**. Isso se deve por que os dados inseridos nos campos de entrada não são realmente números, mas textos (`strings`), e a operação de adição com textos resulta em uma concatenação dos valores.\n\nPara somarmos os números e não os textos, será necessário converter esta variável para valores inteiros. A instrução para isso deverá ser:\n\n```js\nqNum = parseInt(xb) + parseInt(zb);\n```\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"qNum = parseInt(xb) + parseInt(zb)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"Se você alterar os valores, ${checanan(qNum)[1]}... e sim, nós escrevemos um **código computacional** aqui capaz de detectar se isso aconteceu!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":332,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"Muito daquilo que você fará com **javascript** no Observable será criar blocos de **código html** ou **markdown**.\n\nSe você criar um bloco **html**, poderá inserir o resultado do processamento de um **código javascript** na forma de uma variável, através da instrução `\\${nomedavariavel}`.\n\nSe criarmos a constante `mensagem` com o valor `Hello World`, e quisermos incluir isso em um bloco **html**, faremos o seguinte:\n\nPrimeiro a declaração da constante:\n\n```js\nmensagem = \"Hello World\";\n```\n\ne depois incluiremos esta informação dentro de uma `tag

` (parágrafo), no código **html**:\n\n```html\n

\\${mensagem}

\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"mensagem = \"Hello World\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"

${mensagem}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"☞ *O bloco acima, é do tipo **html**, e não **markdown** ou **javascript**.*\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"A mesma coisa pode ser feita através de um bloco **markdown**:\n\nAproveitamos que a constante `mensagem` já existe e está declarada, e apenas criaremos a marcação de negrito para realçar o valor `${mensagem}`. Isso é feito no **markdown** desta maneira:\n\n```md\n**\\${mensagem}**\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":398,"value":"**${mensagem}**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"☞ *O bloco acima, é do tipo **markdown**, e não **html** ou **javascript**.*\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"\n----\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":445,"value":"Próximo: [Arrays](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript2?cell=*)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"

\n-----\n\n#### Apêndice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"checanan = function (v) {\n let r = [];\n\n r[0] = \".\";\n r[1] =\n \"mantendo algarismos numéricos, verá que `qNum` resultará em uma soma aritmética com o valor \" +\n v +\n \", mas se trocá-los por letras, obterá o resultado **NaN**.\";\n if (isNaN(v)) {\n r[0] = `, exceto se, por acaso, colocar letras no lugar de números, o que resultará em \\`qb\\` com uma concatenação (**${qb}**) e \\`qNum\\` com o resultado **NaN** (Not a Number).`;\n r[1] =\n \" e voltar a usar apenas números, verá que `qNum` resultará em uma soma aritmética com números inteiros\";\n }\n\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"