2c:null 2d:["$","title",null,{"children":"Variáveis | Guilherme Ranoya | Observable"}] 32:Tce6,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**, **condicionais**, **funções**, **arrays** 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**, **condicionais** e todo tipo de comparação lógica, usamos os operadores `true` e `false`: ```js zeroouum = true; ``` 33:[] 30:{"id":"517436f899a23d10","slug":"livroobservable-2","title":"Variáveis","thumbnail":"6d025840dd5eb559ccd9634d1611b0234d10f798a6544eedf20fcb080e9fd8e9","access_level":"public","create_time":"$D2024-05-21T14:38:11.943Z","update_time":"$D2024-05-23T14:21:45.713Z","view_time":null,"first_public_time":"$D2024-05-21T14:38:11.943Z","fork":{"id":"0723c78d1c4bd980","slug":"javascript1","title":"Programando no Observable","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":590,"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":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"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,"subscribed":null,"forks":2,"collection":{"id":"0b9e9855c9c4f77f","slug":"livros","title":"Livros","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Variáveis","cells":[{"id":0,"value":"# Variáveis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"### O elemento básico de toda e qualquer programação\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":525,"value":"## Como guardamos e usamos informação?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":528,"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:","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":567,"value":"```js\nq = x + z;\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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: \"altere 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: \"altere zb:\", value: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"
","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":281,"value":"```js\nqb = xb + zb\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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:","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":538,"value":"```js\nqNum = parseInt(xb) + parseInt(zb);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":"$32","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:","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":574,"value":"```js\nmensagem = \"Hello World\";\n```\n\ne depois incluiremos esta informação dentro de uma `tag

` (parágrafo), no código **html**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"
\n☞ *O bloco abaixo, é do tipo **html**.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"

${mensagem}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":547,"value":"```html\n

\\${mensagem}

\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:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"
\n☞ *O bloco abaixo, é do tipo **markdown**.*","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":559,"value":"```md\n**\\${mensagem}**\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":585,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":589,"value":"import { checanan } from \"@ranoya/livroobservable-funcoes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"