Título do Documento

29:null 2a:["$","title",null,{"children":"Breve revisão de HTML, JS, CSS e SVG | Marcos Lage | Observable"}] 2f:[] 2d:{"id":"dcfc057ce43b706d","slug":"breve-revisao-de-html-js-css-e-svg","title":"Breve revisão de HTML, JS, CSS e SVG","thumbnail":"705e67d5f6610014102c6dfd0c27d8f07a42672c08ddcbc268a7cbf186c8415b","access_level":"public","create_time":"$D2021-08-19T15:05:59.832Z","update_time":"$D2022-10-10T17:09:30.105Z","view_time":null,"first_public_time":"$D2021-10-08T14:23:15.707Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b56cd86b9f048540","login":"mlage","name":"Marcos Lage","avatar_url":"https://avatars-next.observableusercontent.com/5a7bd22b657c0e1224801f5729eac05c2b33a163251a927aa4ea576bdcf55e46","tier":"starter_2024"},"version":282,"publish_version":282,"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":1,"collection":{"id":"12645be1b152bb7a","slug":"minicurso-ic-uff","title":"Visualizações Interativas Usando Observable e D3","owner":{"id":"b56cd86b9f048540","login":"mlage","name":"Marcos Lage"}},"type":"notebook","body":{"title":"Breve revisão de HTML, JS, CSS e SVG","cells":[{"id":0,"value":"# Breve revisão de 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 Título do Documento\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 p = document.createElement(\"p\");\n p.textContent = \"Olá Mundo\";\n \n return p;\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":"rect = {\n const div = document.createElement(\"div\");\n \n div.id = 'retangulo';\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 = document.querySelector('#retangulo');\n \n rect.style.height = '100px';\n rect.style.width = '150px';\n rect.style.backgroundColor = \"red\";\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 < 20; 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', '#aaa');\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"},{"id":267,"value":"### Próximo Notebook: Introdução ao D3\n[Avançar →](https://observablehq.com/@mlage/introducao-ao-d3)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"