DEV Community

Cover image for HTML Function-ality
Aoppman
Aoppman

Posted on

HTML Function-ality

Continuing the discussion of JavaScript functions, I have covered the general outline of a function - as well as Anonymous functions. I still have to touch base on Callback functions, and now is the perfect time as my current learning topic is manipulating the DOM (The Document Object Model) via HTML using JavaScript code. Over the last week while diving into this subject, I have learned a little more about the inter-connections and functionality shared between HTML and JavaScript languages.

When we are "manipulating the DOM", I am referencing temporarily editing or modifying HTML elements visually on a web page in real time. We do this using the Web Dev Tools to access a console in the browser, and instructing these changes through JavaScript commands.

(pictured below is a webpage in Google Chrome, utilizing the Dev Tools console to implement changes with JavaScript code commands)
Image description

When doing this it is crucial to utilize functions, anonymous functions, and callback functions, all of that good stuff. When manipulating the document we usually need to incorporate a callback function.

A Callback Function is a function passed as an argument into another function, and then is invoked inside the outer function to complete an action.

Image description

(Taking a look back at the earlier example, here you can see we have defined a function, and then used that function as a callback in another function action.)
Image description

As a busy student with a lot of work to do, I don't have enough time to get too in depth on this topic but figured I'd continue to share my new found knowledge.

Until next time... 👋

Top comments (0)