Doin’ DOM stuff

Tying together major components of web content

During Phase 1 in Flatiron School our cohort was delving into various key topics. So far I’ve gone from “please explain that one more time . . . ”

To now having a firm understanding of how the various code points (events, functions, methods, properties, values, tags, etc . . .) all work together in JS and HTML interaction. Typically when coding in an editor you will keep relevant files available to visually reference for yourself, and of course we want to code our source link into HTML

<script defer src="index.js"></script>

which forms a line of communication between HTML and your script. I like throwing ‘defer’ into my tag to keep the JS a little neater. Defer is a relatively new feature with ES6 — or so I’m told.

This entry focuses on vanilla/native JS and working in Chrome browser.

Once upon a time I dabbled with HTML and figured “wEll thiS is hOw you maKe webpaGes!” Simply slapping together tags and their content sprinkled with some goofy CSS results. I think there may still be some old content from me and a couple of others that’s maybe on the way back machine . . . Since those days of youthful indiscretion I’ve grown to appreciate the advanced techniques of more professional web content which we immediately started learning in greater detail as soon as Phase 1 began!

Have you ever noticed the “inspect page” feature of your browser? Any more I simply refer to them as the Dev Tools. In Chrome we can access by right clicking on the page and selecting “Inspect” or on the keyboard Ctl + Shift + J or I. I found out while writing this that Chrome has a Dev Tools site for people who want to learn more.

Where’s that div id?

Inside the dev tools we notice there are a selection of tabs available. After a day or so of fiddling around I grew comfortable selecting between Elements and Console tabs. I’ve dabbled in the Network tab, and look forward to learning more about persisting changes to the web from my own machine! Or if those are even related topics :)

In the top left of Dev Tools there is an icon which includes a mouse pointer on a container. Simply put: that handy lil feller has sped up my code flow when putting something together. Once the Element Selector is clicked you’re able to mouse-over the elements of that page and view some handy info. G’head and check that out! You want to modify the input values of the form? Make them a string? We can easily see what it’s defined as with the mighty Element Selector. Inside my JS I’m a big fan of querySelector(‘#id’). Oh and JS allows you to make your own HTML elements. Check out this quick blog on Elements and Nodes. I’ve got a quick example of this below.

As Phase 1 progressed we were completing labs which began linking together concepts like how JS is able to manage a page’s actions — through functions and event listeners and event handlers all working in concert with variables, elements, nodes, etc. These technical terms become second nature by virtue of the courses pacing. Google helps so much in learning and handling new concepts; however,

const realMagic = document.createElement('h1')
realMagic.innerText = "THIS. IS. WHERE. IT'S. AT!"

When the light came on I had applied myself day and night with strikes and gutters (be sure to take it easy, man!) . Y’know sometimes you eat the bear . . .

Lost my train of thought. . . right
Coding various solutions often included some block which might resemble

const mainForm = document.querySelector('#main-form')
mainForm.addEventListener('submit', handleForm(data))

Here our variable mainForm is grabbed from the DOM in line one. In the next line we add the submit event listener and the handleForm callback function which passes parameter ‘data’. Data could be an object. Data could be a string. Data could be whatever data type we need it to be to carry on building out that file which requires a form. For now I like to have my event handlers just below the listener to prevent complicated debugging. Often times you want a submit event to be handled with a preventDefault() in order to keep the submit event from refreshing the page.

That’s enough for now. I may carry on talking about DOM stuff as time goes on. There’s plenty here to click around with and learn loads!!!

Hope this was worth the read! Be excellent to each other :)