JavaScript Fundamentals
Try to imagine HTML as a mannequin, and CSS as the clothes you put
on the mannequin. In this analogy JavaScript would be the Christmas
magic, or Greek muse, or Ancient Egyptian goddess that possesses the
mannequin and makes it come to life.
See
Mannequin (1987 film),
Xanadu (1980 film), and
Bobs Burgers (S03.E09)
for examples.
While HTML and CSS are important for giving structure and appearance
to a website, JavaScript is what gives webpages responsiveness and
interactivity. Pretty much everything you use a webpage for is
powered by JavaScript, from search boxes, to interactive menus, to
anything that is animated. Without JavaScript we would just be
having weird relationships with static, bland, unresponsive dummies.
See
Lars and the Real Girl (2007 film),
Umbrella Academy (S01.E03), and
The Late Late Show with James Corden
for examples.
Control flow and Loops
The order in which statements are executed is called the control
flow. Generally, in JavaScript instructions are run in the order
they are written, with a few exceptions. For instance a "function"
can be accessed and run anywhere on the page even if it’s described
later on. If you were doing the dishes by hand, “Run dish under
water” might be a function that you want call a few times.
Establishing that function by staying by the sink would allow you to
do that at any point during the process.
Looping is a process by which you repeat a process a certain amount
of times. Using the earlier example of doing the dishes, when
washing a frying pan you may need to scrub the pan, rinse the pan,
see if there’s more gunk on there, then repeat a few times. In
Javascript that might look something like this:
While (pan is still dirty){
Scrub pan
rinse pan
check if pan is still dirty
}
return
pan
The DOM
The DOM (Document Object Model) is the way in which JavaScript
interacts with HTML and CSS. The DOM breaks the HTML into objects
within objects which we can then reference and change using
JavaScript. For example every HTML document should have a
<body> tag, therefore we could use JavaScript to grab that
body (and everything within it) and turn the website’s
background blue like so:
document.body.style.backgroundColor = "blue";
As the DOM puts everything into objects, not Arrays we would be using dot notation (document.body) to access it, not square bracket notation (array[0])
In conclusion, JavaScript is truly a land of contrasts.
Thank you
Examples
HTML
HTML with CSS
HTML with CSS and JavaScript
