Before we start I’d like to point you towards the introductory post for Learn With a Layman. It will provide you with some background information about this series and some vital resources to aid learning.
- The DOM
As you are reading this I assume you are new to JS and have little to zero coding knowledge/experience. And that’s a good thing. This means that you, hopefully, won’t pickup the bad habits I, and so many others, did. But let’s be real, that depends on my ability to teach you.
Anyway, let’s get the ball rolling…
Let’s break it down. We start with it being a “a programming language that adds interactivity to your website”. Simple enough, let’s continue, “full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity”… gibberish, right?
Let’s try and dissect then explain this witches brew of strange words and initialisations. My assumption is that the first hurdle for any layman is going to be the following phrase: full-fledged dynamic programming language. What even is that?
If you read through the linked Reddit thread you will see that Reddit user, /u/insertAlias cleared up some of my own misconceptions about the way in which JS interacts with the DOM (Document Object Model). I will explain this in the next part of this post.
Back to the Full Fledged
The returned consensus seemed to be that it is a terrible term, a better fit being General-purpose programming language. The linked Wikipedia article describes a general purpose language as one which doesn’t “require a specific application domain”. I know, gibberish, again. But it isn’t as complex as it sounds.
To actually explain the difference between a static and dynamic language, in layman’s terms, I need to quickly explain the concept of data types and their relation to static and dynamic languages.
All coding languages tend to categorise the data which they are handling, this helps them decide how to process and store it. Similar to how you categorise food — tinned goods in the cupboard, fresh in the fridge, frozen in the freezer.
As humans, we tend to validate our shopping as we are buying it, or as we are storing it — aka when we process it. In either case we tend to validate our shopping in a dynamic manner, we are flexible.
A Strange Analogy
Imagine this, you’re a bit of a crazy person and your particular ‘thing’ is you have a meltdown when there isn’t any smooth orange juice in Tesco. One day, you decide you want some of your beloved OJ and head to Tesco expecting some OJ of the smooth type. As a human you validate the type of OJ while buying (processing) it in the shop. This means you will have a meltdown (throw an error) during the event.
The Jargon: full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity
The Layman: A language which can communicate with humans and multiple machines, and checks the type of data it is handling, while it is handling it.
StackOverflow question on static and dynamic languages: https://stackoverflow.com/questions/20563433/difference-between-static-and-dynamic-programming-languages
A system for annotating a document in a way that is syntactically distinguishable from the text.
It’s All About Text
You should be seeing a regular theme here: the word text. There is good reason for that. Languages such as HTML are, to put it as simply as possible, a means of displaying and structuring text on a document.
Think about any web page you have visited, it is essentially a load of text elements on a screen with some embedded media dotted about. It is the HTML that, with the assistance of CSS, decides where on the page that text is displayed, and those media elements are dotted.
The relevance of the term hypertext is simply to refer to the links which connect each web page together, whether on the same website or not. For example: Twitter > Facebook or Google > Google.
When talking in reference to the quote above, specifically the part about “annotating a document”, think of HTML code as the glaring red notes your teacher used to leave on your homework. HTML codes such as
<button>Click Me</button> are not much different. That code is basically a glaring red note which is telling the machine “make the text ‘click me’ look like a button”. This is also an example of why it is considered semantic — both humans and machine can read it.
Finally we arrive at the lovely phrase: “syntactically distinguishable from the text”. You may have an idea of what this is about already, if not read on. Take the example from above again:
<button>Click Me</button> — it is easy for anybody to see that the HTML code is
<button></button> and that the text is
Click Me. That is it, it basically means the text and code can easily be identified.
If you followed the Reddit thread I linked above you’ll most likely know what I am about to write already. If not, continue — not that you can’t continue if you did read it!
The Jargon: A system for annotating a document in a way that is syntactically distinguishable from the text.
The layman: A way of presenting text/data to a user in a structured manner which can be read by both human and machine.
Wrapping It Up
I hope this has been a good introduction and has helped some of you to get a better idea of what HTML and JS actually are. For me, as you would have seen in the Reddit thread, learning is life long and the basics are sometimes missed in pursuit of the fancy
async/await || resolve/reject ecstasy.
As always, I have left some extra reading and remain available for corrections — if I am wrong let me know! — and any further assistance.
Love, peace and happiness.