Think of a well designed, modernistic building.
Any such building will be designed, constructed, and integrated in order to effectively serve its purpose. It will have a refined structure, architectural aesthetics and flair, and an interconnected collection of technical features, functions, and services.
A web page isn't much different. Similarly, it has its three core components: HTML, CSS, and JavaScript.
Consider a large venue, or concert hall. Fundamentally, it will be built around an intricately designed structure. The hall itself will no doubt have high ceilings, a vast surround of staggered seating, and a number of niche fixtures and spaces. Around the hall will be a supporting structure designed to accomodate hospitality needs, ranging from bathrooms, ticketing, and concessions, among other things. Behind the hall itself will be back-end spaces serving the needs of the logistical crews, performers, in-house teams, and other facilities.
This structure, is HTML. The framework around and upon which everything is built.
The design of the building itself no doubt is very beautiful. Almost certainly the buildings façade has a uniquely artistic flair, and the foyer styled similarly. Bathrooms may look like something out of science fiction, and help desks inviting and warm. The hall itself will be designed with acoustics in mind, with all materials and surfaces carefully sculpted to enhance and control invisible sound waves. Their design helps to project quiet tones far into the audience, and keep the loudest of sounds from reverberating in an uncontrolled manner.
This design language, is CSS. It builds upon the buildings structure to set a certain ambience, or tone, and to heighten the sense of occasion that is visiting such a unique space.
And what about the integrated systems? The audio, visual, and lighting systems? The paging system, communications, ticketing services, and Wi-Fi? That's the JavaScript component. The invisible network of cabling and interconnected equipment. It is the language through which all of these things communicate, interact, sequence, and synchronise, providing a seamlessly dynamic experience from the moment you arrive, to the moment you leave.
A map. A real-time, interactive road map, shaped like a tree. Though perhaps discard the concept of its roots for now.
At the base of the stem, we have the 'window'. That's your browser, more or less. Just down from the window, right before we get to the branches, we have HTML, the 'root element,' the trunk of the tree. From here we reach the main branches, each representing one of the core components of the HTML structure, like the pages header, body, and footer.
From these main branches, we get smaller branches, and smaller branches still. Eventually, we get to the leaves, and flowers. Each stage in this process takes us to a differenc element, or part of the HTML structure. The DOM, or Document Object Model, is the entire collection of pathways with which we may reference, reach out, and touch, with JavaScript.
CSS's part in the DOM tree is perhaps a little less visible. It could be considered as being the genome that dictates the shape and colour of the flowers, and leaves. JavaScript, being the biological processes by which this information reaches through the structured pathways, to those flowers and leaves.
JavaScript also send information back along those pathways, informing the tree of changing weather conditions, and of anything that may have happened to it. Perhaps it's lost some branches in heavy winds, and needs to seal off its exposed areas. Perhaps it's telling the tree that pollination has taken place, setting off biological reactions that in turn produce seeds.
Consider again the aforementioned DOM tree. Control flow may be considered as being the specific route that a biological process may take to reach from the heart of the trees trunk, to its extremities, and back again. Each stage along the route is referred to as a node, funnily enough, much in the same way as the term may be used in plant biology.
Control loops are a touch more specific again, and perhaps relate more to gardening, than a tree itself. Consider yourself out tending to your plants. For each garden bed, you repeatedly pull unwanted weeds out from the soil, until the bed is clear. Perhaps you then layer on some fertile soil, before mixing it in, nourishing the plants it hosts.
Perhaps for each plant you do a little pruning, or treat them for invasive species that may harm them? Each of those processes is a control loop, a specific, repetitive task, that is moved on from once a specified goal has been reached.
Much as in real life, an object can be many things, and so here with JavaScript, an object is what you define it to be. An object may have features, or attributes, and values attached. These may be static, for reference, or dynamic, available to be changed at will by other objects.
An array, may very well be such an object. It is defined, named, and may contain a sequence of values of any kind. They may be 'strings,' such as a list of items, or perhaps numberical values such as integers. If desired, you could nest a number of arrays within an array, creating a 2-dimensional array. A list of lists, if you will.
You could also have an array of specific functions, that may be selected as needed. A function itself may be described most simply as a customisable command, which when called upon, activates a pre-determined sequence of events. This functionality is beneficial for many reasons, but notably functions help to simplify and refine code, preventing it from becoming convoluted and challenging to parse and work with.