It’s a DOM World…
…after all!
About this song
Structure (HTML) • Flex (BS5)
Yeah! The ‘Fantastic Four’ (HTML, CSS, JavaScript and Bootstrap 5) inspire singing and dancing…
…and are used in this app, set to the tune of the world’s most persistent ear worm. The various verses, categorized by their content, whimsically chronicle the use of these four web technologies in the web world. Future versions will include graphics and hyperlinks to reinforce each concept.
Don’t remember the original tune? We’ve got you covered with the It’s a Small World movie clip — fair warning: it will take up permanent residence in your brain.
Need a review on the original Fantastic Four? We’ve got you covered!
The Basics
Introducing! The Fantastic Four!
It's a marvel you just can not ignore You are friendly with The Fantastic Four! HTML, CSS JavaScript, Bootstrap, yes! It's a DOM World after all!
Basic web page elements
We can place a tag Implement a style (It's not Java so No need to compile) Write a script Bootstrap on, Link a cute favicon It's a DOM page after all!
It’s a DOM World after all
It’s a DOM World after all
It’s a DOM DOM world!
Validation
One big thing your teacher Appreciates Is when all your web pages validate Structures strong, styling sound You're not clowning around It's a DOM DOM world!
DOM Stuff
Page loading readiness
Once the body loads Grab an element It's an object found in the document! Use a class or ID Modify properties It's a DOM DOM page!
Target and update web content
Target elements with well-named IDs And updating content becomes a breeze! It is great, it is swell, InnerHTML! It's a DOM page after all!
Create/Insert DOM tag node elements
Have a data set that you need to load You can tackle that with a parent node Make a child to append To your data attend It's a DOM DOM world
JavaScript Data Structures
General reference: Data structures
Data structures wow! Give them lots of praise Using tons of them, Likely earns 'a raise' Did you see This verse done Did you catch the big pun? It's a DOM DOM web!
Array mechanics: push, pop, loop iteration
With arrays for storage We push and pop Iterating through them Till the loop stops Use a 'for' or a 'while' It depends on your style It's a DOM DOM web
Bootstrap and DOM
Add/remove Bootstrap classes from an element
Bootstrap thrives on class, And with JavaScript To change classList members You're now equipped Add, remove to improve Yeah the process is smooth It's a DOM world after all!
Widget Wonders
Range input: <input type="range">
Type range attributes in An input tag Make a slider bar Everyone will brag Set a min, a max too Midrange values ensue, It's a DOM DOM world!
P5JS Animation
P5JS: setup, draw, loop
Using animations Caused much distress Till the advent of framework P5JS Setup, draw with a loop Watch some object go 'swoop' It's a DOM DOM web
Multi-page Sites
Local storage
Local storage solves all your Transfer woes Sending data tween pages There it goes Stringify, parse, JSON Try them out, it's game on! It's a DOM DOM web