Título do Documento

2e:null 2f:["$","title",null,{"children":"Introduction to Web (HTML, CSS, JS) | Fabio Miranda | Observable"}] 34:[] 32:{"id":"4f910d548f717ddd","slug":"introduction-to-web-html-css-js","title":"Introduction to Web (HTML, CSS, JS)","thumbnail":"1f573473cadef56a411fc5a65f2c593a41c9b6a3925b139aef4718fa33c4b48a","access_level":"public","create_time":"$D2022-09-21T22:45:02.635Z","update_time":"$D2022-09-22T16:54:43.070Z","view_time":null,"first_public_time":"$D2022-09-22T00:52:42.790Z","has_unpublished_edits":null,"fork":{"id":"a57df2c004ac4501","slug":"introduction-to-web-html-css-js","title":"Introduction to Web (HTML, CSS, JS)","owner":{"id":"ad37929384f8c890","login":"jlrulff","name":"João Rulff"}},"stars":2,"starred":false,"owner":{"type":"team","id":"dcd69a45dee5714d","login":"fmiranda","name":"Fabio Miranda","avatar_url":"https://avatars-next.observableusercontent.com/7e8b6de3156e361f3b4a19d0f7c96048eec88648c1992cfd1b3c2ad804904073","tier":"starter_2024"},"version":242,"publish_version":242,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ec14b623de07061","login":"fmiranda","name":"Fabio Miranda","avatar_url":"https://avatars-next.observableusercontent.com/7e8b6de3156e361f3b4a19d0f7c96048eec88648c1992cfd1b3c2ad804904073","tier":null}],"members":[{"type":"individual","id":"3ec14b623de07061","login":"fmiranda","name":"Fabio Miranda","avatar_url":"https://avatars-next.observableusercontent.com/7e8b6de3156e361f3b4a19d0f7c96048eec88648c1992cfd1b3c2ad804904073","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"23a5054a6240131d","slug":"intro-to-observable-and-d3","title":"Intro to Observable and D3","owner":{"id":"dcd69a45dee5714d","login":"fmiranda","name":"Fabio Miranda"}},"type":"notebook","body":{"title":"Introduction to Web (HTML, CSS, JS)","cells":[{"id":201,"value":"# Introduction to Web (HTML, CSS, JS)\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"This notebook is based on Marco Lage's Observable and D3 [course](https://observablehq.com/collection/@mlage/minicurso-ic-uff) and translated by [Joao Rulff](https://observablehq.com/@jlrulff)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"A web page is usually composed of three main components:\n\n- HTML Tags to define the page structure\n- CSS stylesheets to define the appearance of the elements\n- Javascript code to define the behavior of elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"The elements of a web page are organized in the form of a tree known as Document Object Model, **DOM**. Let's check a simple HTML page:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"```HTML\n\n\n\n \n Título do Documento\n\n\n ...\n\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"The tree will look like the following:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"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":54,"value":"## Manipulating the DOM","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"With JavaScript we can manipulate the **DOM** by changing the content of HTML tags or adding new tags to our document. Throughout the years many different libraries were developed to make this task easier. JQuery, D3, React, Angular.... ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"{\n const p = document.createElement('p');\n p.textContent = 'Hello, World';\n\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"## Changing Styles dynamically","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"Let's create a new div","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"div = {\n const div = DOM.element(\"div\");\n div.id = 'rectangle';\n div.style.height = '100px';\n div.style.width = '150px';\n div.style.backgroundColor = \"red\";\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"Now, let's change the style of the div","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"{\n div.style.height = '100px';\n div.style.width = '150px';\n div.style.backgroundColor = \"green\";\n\n return 'div updated :)' \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"## Drawing with SVG (Scalable Vector Graphics)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"Although we can create visualizations using only standard HTML tags, it would be very costly from an implementation point of view.\n\nScalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"{\n const width = 400;\n const height = 200;\n const radius = 20;\n \n const svg = DOM.svg(width, height)\n\n for (let id = 0; id < 20; id ++) {\n \n const circle = DOM.element(\"svg:circle\");\n\n circle.setAttribute('cx', Math.random() * (width - 2 * radius) + radius);\n circle.setAttribute('cy', Math.random() * (height - 2 * radius) + radius);\n circle.setAttribute('r', radius * ( 0.5 * Math.random() + 0.5) );\n \n circle.setAttribute('fill', 'red');\n circle.setAttribute('stroke', '#555'); \n\n svg.appendChild(circle);\n }\n\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"The previous code changes the **DOM** to include new elements:\n\n- A SVG canvas built using *DOM.svg(width, height)*\n- A SVG circle built using *DOM.element(\"svg:circle\")*\n\nAssuming that the elements were inserted inside the *body*, the DOM would then have the following configuration:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":219,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"It's important to notice that the *DOM* object used in the previous example is made available by Observer. In a regular JavaScript code, SVG elements are created using *document.createElementNS*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"import {graph} from \"@mlage/d3-hierarchy\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"