2b:null 2c:["$","title",null,{"children":"Começando com javascript | Guilherme Ranoya | Observable"}] 31:T4a4,A forma mais comum para o desenvolvimento de programação é utilizarmos softwares conhecidos como *Integrated Development Enviroments*, ou IDEs para os íntimos. Duas das mais utilizadas hoje são o VS Code e o Sublime Text, por serem leves, flexíveis (capazes de trabalhar com qualquer linguagem de programação), e possuírem muitos *plug-ins* que ampliam aquilo que podem fazer. Mas existem muitas outras opções além delas. Também tem se tornado uma boa prática não utilizarmos mais ferramentas instaladas localmente em nosso próprio computador, substituídas por IDEs online, como o Code Sandbox ou o Github.dev. Algumas ferramentas são mais complexas, e outras mais simples; algumas são mais poderosas, e outras mais limitadas. Mas no fundo, esta é apenas uma questão de gosto pessoal, já que todas funcionarão bem para a escrita do código *javascript*. As demais funcionalidades podem ajudar, mas não irão fazer este trabalho por você.32:T4b0,Conhecer o código *HTML* é algo necessário quando se trabalha com *javascript*. Talvez não seja necessário para se trabalhar com a construção visual utilizando bibliotecas como o P5.js, mas para todo o resto, e aquilo que for interagir como elementos presentes em um website, estes conhecimentos serão necessários. Muito daquilo que se elabora com *javascript* tem como resultado, inclusive, a construção de um código *HTML*. Como exemplo, imagine um programa que tenha como objetivo calcular a média das avaliações de estudantes. Este programa irá pegar as diversas avaliações, calcular o resultado final, e apresentar uma tabela com o nome do estudante, e sua nota final. Se este código for escrito em *javascript*, ele provavelmente irá exibir esta tabela construindo um código *HTML* e o inserindo dentro de um elemento no próprio documento. O procedimento que precisará ser realizado em *javascript* não será apenas o do cálculo matemático da média aritmética, mas o da construção do código *HTML* que exiba os resultados. Logo, sem o domínio da programação *HTML*, o conhecimento de *javascript* fica limitado.33:[] 2f:{"id":"d9810054fdf9ebd4","slug":"livrojavascript-2","title":"Começando com javascript","thumbnail":"0a84dcba5219778bf81cfdb4d3f8af8a676970386acc982d6990e31cd72d69a6","access_level":"public","create_time":"$D2024-05-24T11:12:16.231Z","update_time":"$D2025-02-05T23:26:47.365Z","view_time":null,"first_public_time":"$D2024-05-24T11:12:16.231Z","fork":{"id":"93b5042ec0652bbb","slug":"livrojavascript-1","title":"Designers deveriam programar?","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":208,"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":"Começando com javascript","cells":[{"id":0,"value":"# Começando com javascript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"### Primeiros passos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"\n----\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":65,"value":"*Javascript* é uma linguagem que está disponível em vários contextos diferentes. Você pode usá-la em algumas plataformas de desenvolvimento de jogos, pode usar para programar **funções** em planilhas do Google, e pode também usá-la para elaborar interfaces gráficas de aplicativos mobile ou para web.\n\nMas o lugar de origem, e o mais habitual para qualquer programação *javascript* são os navegadores web. Esta linguagem foi criada por Brendan Eich enquanto trabalhava na Netscape, empresa criadora de um dos primeiros *browsers*, o Netscape Navigator, e que depois se transformou na Mozilla.\n\nVocê pode rodar instruções *javascript* diretamente da barra de endereços do navegador. Experimente digitar a linha abaixo no lugar do endereço de um site nela:\n\n```javascript\njavascript:alert(\"Bom dia!\");\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":69,"value":"Uma das ferramentas mais importantes para entendermos o que acontece com nosso código no navegador é o **Console**. No Chrome, ele pode ser acessado com a tecla **F12** (ou **CMD**+**ALT**+**J** nos Macs), o que exibirá um painel com diversas informações sobre tudo que está acontecendo dentro do *browser*. Em outros navegadores este painel tem outros nomes e as vezes precisam ser habilitados nas configurações para estarem disponíveis. No Safari, por exemplo, ele se chama *Developer Tools*.\n\nAssim que o painel for aberto, procure pelo Console, como na imagem abaixo (retirada do Chrome):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":73,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":78,"value":"Experimente executar uma instrução semelhante àquela dada na barra de endereços:\n\n```js\nalert(\"Bom dia!\");\n```\n\nou ainda, uma instrução que apenas apresentará um resultado escrito no próprio console:\n\n```js\nconsole.log(\"Bom dia!\");\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":80,"value":"Muitos dos testes que precisamos realizar para entender por que um código não está se comportando como imaginávamos são realizados diretamente no **console**; e muitas das informações que precisamos saber ao longo da execução de nosso código, para entendermos o que está acontecendo, são enviadas também para ele para que possamos acompanhar. O **console** é uma das ferramentas mais importantes para programar, mas definitivamente não é o lugar onde você irá, de fato, elaborar seus códigos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":106,"value":"

\n\n### Omnicode","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":108,"value":"\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":183,"value":"O Omnicode é um editor \"descartável\" que você verá integrado ao longo do texto de quase todos os capítulos deste material. Este é um tipo de editor que não armazena nem exporta arquivos, utilizados apenas para se fazer alguns experimentos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":86,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":180,"value":"☞ *No próximo capítulo, intitulado **Omnicode**, você tem este editor em tela cheia, para que possa fazer experimentações com código sem precisar sair do livro.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":94,"value":"Mas se você tentar executar qualquer uma das duas instruções anteriores em *javascript* nele, perceberá que não funcionará. Isto acontece por que o conteúdo de um navegador é estruturado primeiro pelo código *HTML*. Para que qualquer código *javascript* seja executado como conteúdo de um documento no navegador, ele precisa estar dentro da tag `\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":98,"value":"☞ *Cuidado ao digitar para não escrever algumas letras em maiúsculo. Javascript é uma linguagem com case-sensitivity, ou seja, ela diferencia letras maiúsculas de letras minúsculas nas instruções. Se você escrever `Console.log()`, com \"C\" maiúsculo, receberá um erro como resultado.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":194,"value":"

\n\n### Editores de código\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":83,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":91,"value":"

\n\n### *HTML*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":103,"value":"\n----\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":124,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":157,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":155,"value":"Há outras formas de se apresentar informação além do próprio *HTML*. É possível utilizar também a linguagem *SVG*, que tem estrutura sintática de *tags*, parecida com o *HTML*, ou o *Canvas*, contexto gráfico programático dentro do navegador, que é o utilizado pelo P5.js.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":160,"value":"Se você não conhece suficientemente o código *HTML*, ele é sempre composto por uma *tag* ``, onde se encontram duas outras *tags*, a `` e ``. Na primeira incluímos meta-informações, estilos *CSS* e códigos *javascript* gerais. No `` colocamos aquilo que fica aparente em um documento *HTML*.\n\nEsta é a estrutura mínima para que você possa escrever um código *javascript* adequadamente:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":171,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":151,"value":"Você pode carregar um arquivo *javascript* externo ao código *HTML*. Para separar os dois, basta indicar da *tag* `\n```\n\nO navegador assumirá que o `arquivo.js` estará na mesma pasta que o arquivo *HTML*. Se preferir, você pode indicar uma `URL` online absoluta como `https://www.meusite.com.br/meuarquivo.js`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":49,"value":"/* \n \n */","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"