Primeiro Exemplo

29:null 2a:["$","title",null,{"children":"Introdução ao HTML, JS, CSS e SVG | Marcos Lage | Observable"}] 2f:[] 2d:{"id":"e6157be545eb5983","slug":"introducao-ao-html-js-css-e-svg","title":"Introdução ao HTML, JS, CSS e SVG","thumbnail":"e94a7aa6bc3037a27c815e0bf7829f709563a3566df9ca3b9bfcef063238cec4","access_level":"public","create_time":"$D2022-09-08T15:42:13.709Z","update_time":"$D2023-04-20T18:09:28.187Z","view_time":null,"first_public_time":"$D2022-09-08T18:28:02.473Z","has_unpublished_edits":null,"fork":{"id":"dcfc057ce43b706d","slug":"breve-revisao-de-html-js-css-e-svg","title":"Breve revisão de HTML, JS, CSS e SVG","owner":{"id":"b56cd86b9f048540","login":"mlage","name":"Marcos Lage"}},"stars":2,"starred":false,"owner":{"type":"team","id":"b56cd86b9f048540","login":"mlage","name":"Marcos Lage","avatar_url":"https://avatars-next.observableusercontent.com/5a7bd22b657c0e1224801f5729eac05c2b33a163251a927aa4ea576bdcf55e46","tier":"starter_2024"},"version":352,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c9fd3702a791124","login":"mlage","name":"Marcos Lage","avatar_url":"https://avatars-next.observableusercontent.com/5a7bd22b657c0e1224801f5729eac05c2b33a163251a927aa4ea576bdcf55e46","tier":null}],"members":[{"type":"individual","id":"9c9fd3702a791124","login":"mlage","name":"Marcos Lage","avatar_url":"https://avatars-next.observableusercontent.com/5a7bd22b657c0e1224801f5729eac05c2b33a163251a927aa4ea576bdcf55e46","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"2a6e84afe8fbd7c1","slug":"visualizacao-de-dados-pci","title":"Visualização de Dados (PCI)","owner":{"id":"b56cd86b9f048540","login":"mlage","name":"Marcos Lage"}},"type":"notebook","body":{"title":"Introdução ao HTML, JS, CSS e SVG","cells":[{"id":0,"value":"# Introdução ao HTML, JS, CSS e SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"## Introdução","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Uma página web é composta por:\n- Marcações *HTML* que definem os **elementos que compõem** uma página;\n- Estilos *CSS* que definem a **aparência** dos elementos;\n- Códigos *JavaScript* que definem o **comportamento** dos elementos.\n\nOs elementos de uma página web são organizados em uma estrutura de árvore, conhecida como Document Object Model, ou apenas **DOM**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Tomemos como exemplo o código em HTML:\n\n```HTML\n\n\n\n \n Primeiro Exemplo\n\n \n\n```\nOs elementos da página originada a partir desse código são armazenados pelo *browser* na seguinte estrutura de árvore:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"{\n const dom = d3.hierarchy({\n name: \"html\",\n children: [\n {\n name: \"head\",\n children: [\n {name: \"meta\"},\n {name: \"title\"}\n ]\n },\n {\n name: \"body\",\n children: []\n }\n ]\n });\n \n return graph(dom, {label: d => d.data.name})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"## Manipulação do DOM","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"Com JavaScript, podemos adicionar, modificar e remover elementos do DOM dinamicamente. A linguagem fornece uma [API]() que permite criar, selecionar e remover elementos do DOM.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"No exemplo que segue, criamos um parágrafo com o texto *Olá Mundo* utilizando a API de manipulação do DOM. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"{\n const div = document.createElement(\"div\");\n\n for (let index = 0; index < 5; ++index) {\n const a = document.createElement(\"p\");\n a.textContent = `novo paragrafo de indice: ${index}`; \n\n div.appendChild(a);\n }\n \n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"O paragrafo criado é inserido pelo Observable dentro do elemento do DOM que armazena a saída do código que compõe a célula.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"## Alterando estilos dinamicamente","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"No próximo exemplo um elemento do tipo `div`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"new_div = {\n const div = document.createElement(\"div\");\n \n div.id = 'retangulo';\n \n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"Como o elemento criado está vazio e sem estilo associado, o impressão inicial é que ele não foi criado. Entretanto, se utilizarmos as **ferramentas de desenvolvimento** (pressione *Control*+*Shift*+*I*) do *browser* conseguimos ver que o elemento foi criado.\n\nSendo assim, podemos **alterar seu estilo** para que ele se torne visível. \n\nSe modificarmos a altura (*height*) e a largura (*width*) do `div` e adicionarmos uma cor para o fundo (*backgroundColor*), temos o seguinte resultado.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"{\n const div = new_div; //document.querySelector('#retangulo');\n \n div.style.height = '30px';\n div.style.width = '500px';\n div.style.backgroundColor = \"blue\";\n\n return 'div atualizado :)'\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"## Desenhando elementos SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"Para criarmos visualizações usando o browser precisamos aprender a desenhar primitivas geométricas como pontos, linhas, retângulos, círculos, etc. \n\nExistem diversas formas de adicionar desenhos a um documento *HTML*, uma delas é através de [**SVGs**](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shape).\n\nOs *SVGs* são um tipo especial de elemento que pode ser adicionado ao *DOM*. Sendo assim, tudo o que vimos até agora pode ser aplicado a eles.\n\nVeja o exemplo a seguir.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"{\n const width = 400;\n const height = 200;\n const raio = 20;\n \n const svg = DOM.svg(width, height)\n\n for (let id = 0; id < 80; id ++) {\n const circle = DOM.element(\"svg:circle\");\n\n circle.setAttribute('cx', Math.random() * (width - 2 * raio) + raio);\n circle.setAttribute('cy', Math.random() * (height - 2 * raio) + raio);\n circle.setAttribute('r', raio * ( 0.5 * Math.random() + 0.5) );\n \n circle.setAttribute('fill', '#bbb');\n circle.setAttribute('stroke', '#555'); \n\n svg.appendChild(circle);\n }\n\n \n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"O código anterior na prática altera o **DOM** incluindo novos elementos: \n- Um canvas *SVG* construído usando o comando `DOM.svg(width, height)`;\n- Círculos *SVG* construídos usando o comando `DOM.element(\"svg:circle\")`.\n\nAssumindo que os elementos foram incluídos dentro de `body`, a **DOM** passaria a ter a seguinte configuração:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"{\n const dom = d3.hierarchy({\n name: \"html\",\n children: [\n {\n name: \"head\",\n children: [\n {name: \"meta\"},\n {name: \"title\"}\n ]\n },\n {\n name: \"body\",\n children: [\n {\n name: \"svg\",\n children: [\n {name: \"circle\"},\n {name: \"...\"},\n {name: \"circle\"}\n ]\n }\n ]\n }\n ]\n });\n \n return graph(dom, {label: d => d.data.name})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"É importante observar que o objeto `DOM`, utilizado no exemplo anterior, é fornecido pelo Observable. Em um código JavaScript usual, elementos *SVG* são criados usando o comando [`document.createElementNS`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS) .","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"## Códigos Auxiliares","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"import {graph} from \"@mlage/d3-hierarchy\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"