Insert cell before (⇧⌘↩︎)

30:T1f6b,Todo documento se inicia com um único bloco do tipo **markdown** que é o próprio título do documento. Ao passar com o mouse abaixo (ou acima) deste bloco, você verá na lateral esquerda o ícone de , que lhe permite criar um novo bloco (em cima, ou em baixo do já existente). Ao clicar, diversas opções de conteúdos e ferramentas serão exibidas para o novo bloco. Ao lado de cada bloco existente, você verá um ícone , que lhe dará acesso ao menu contextual do bloco, e uma seta que lhe apresentará o editor de código do bloco. Para manter o editor sempre aberto, e exibir a programação que gera aquele conteúdo no bloco, basta clicar no ícone no lado esquerdo do editor. O bloco pode conter programação **javascript**, **html**, **markdown**, ou alguma ferramenta pronta do próprio Observable. Para mudar o tipo de linguagem no bloco basta clicar no ícone , ou ao lado do editor, e escolher a linguagem desejada. Experimente criar um novo documento no Observable, clicar no ícone para criar um novo bloco, selecionar a linguagem **javascript** com o ícone , e escrever: ```js hoje = new Date(); ``` Para executar o conteúdo do bloco, utilize o ícone que fica no canto superior direito do editor, ou também na barra inferior da tela do Observable. Se você clicar na opção de fixar o código na tela , terá um bloco com o registro da data de hoje, e logo abaixo o código que produz esta informação:31:T8ba,É importante saber que tudo que você fizer, e todo código que construir no Observable, poderá ser usado online fora do Observable. Ele é um ambiente de desenvolvimento, e aquilo que você cria nele não estará limitado ao próprio Observable. Você pode usar apenas um bloco, múltiplos blocos, ou todos os blocos do seu *notebook* em um site, e este uso é integrado: se você fizer alterações no documento do Observable, ou nos códigos dentro do documento, você verá as mudanças imediatamente refletidas onde é que esteja usando estes códigos online. Os procedimentos para se fazer isso são um assunto para outro momento, mas o importante é que se saiba que o Observable não limitará a aplicação daquilo que você fizer com ele. Para experimentar, modificar e testar variações dos códigos disponíveis em qualquer documento do Observable, você pode fazer uma cópia pessoal, e alterá-la à vontade sem produzir qualquer mudança no documento original. Esta cópia é chamada de **fork**, e é feita ao se clicar neste ícone no topo da página.32:[] 2e:{"title":"Começando no Observable","cells":[{"id":0,"value":"# Começando no Observable","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"### Iniciando com programação javascript em notebooks\n\n------\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":476,"value":"## Como começar","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"hoje = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"```js\nhoje = new Date();\n```","pinned":false,"hidden":false,"mode":"md"},{"id":548,"value":"Se você clicar e arrastar o ícone de um bloco para cima, ou para baixo, moverá o bloco no documento. A posição que ele se encontra, ou a ordem dos blocos, não alteram qualquer resultado no Observable. Toda a cadeia de dependência dos códigos é inteiramente avaliada pela plataforma antes da execução, e ordenada para que se obtenham os resultados desejados.\n\nAgora experimente criar um novo bloco javascript com o seguinte código:","pinned":false,"hidden":false,"mode":"md"},{"id":554,"value":"viewof corRGB = Inputs.color()","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"```js\nviewof corRGB = Inputs.color();\n```\n\nE um segundo bloco abaixo com:","pinned":false,"hidden":false,"mode":"md"},{"id":560,"value":"corRGB","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"```js\ncorRGB;\n```\nAgora, para ver como os blocos vão construindo um programa todo distribuído ao longo do *notebook*, crie um novo bloco utilizando a linguagem **html**, e inclua a seguinte instrução:","pinned":false,"hidden":false,"mode":"md"},{"id":579,"value":"

${hoje}

","pinned":false,"hidden":false,"mode":"html"},{"id":585,"value":"```html\n

$\\{hoje}

\n```","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"Você pode arrastar os blocos para cima ou para baixo. Isso não interfere em nada no funcionamento do *notebook*.","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"\n------\n","pinned":false,"hidden":false,"mode":"md"},{"id":594,"value":"### Informações preliminares","pinned":false,"hidden":false,"mode":"md"},{"id":596,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":603,"value":"\n----\n","pinned":false,"hidden":false,"mode":"md"},{"id":606,"value":"Próximo: [Variáveis](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript1?cell=*)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}