Learn With a Layman: Beginning With The Basics

summitdecent (51)in #javascript • 5 years ago (edited)

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.

If you have already read it (you don't need to read it again) you may recall that a motivator of mine is the lack of explanations of basic JavaScript (JS) concepts in pure layman's terms. Expanding on that, this post will attempt to get the ball rolling by giving a simple explanation of the following concepts/languages and their role in a traditional website:

Javascript
HTML
CSS
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...

What is Javascript?

The official explanation of JavaScript, given by the Mozilla Foundation (the guys who pretty much made it) is as follows:

JavaScript is a programming language that adds interactivity to your website
[...] JavaScript ("JS" for short) is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites

Mozilla Foundation

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?

Full Fledged

Upon trying to concisely define what makes a full(y) fledged language I became pretty fixated on the term and, due to my wondering mind loving to get caught up on semantics, ended up asking the /r/learnJavascript community, on Reddit, for their opinion.

JavaScript and the DOM
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.

This means general purpose or, full fledged, languages are usable on a variety of machines. Using the example of Javascript this is definitely true. You, more than likely, use applications written in JS multiple times everyday -- it's everywhere!

Dynamic

This is a lot more straight forward and, I hope, won't lead to any rabbit holes. As I assume you know, something which is dynamic is something which is able to change or adapt. The terminology is no different when referring to Javascript.

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.

That makes you the human equivalent of Javascript. Dynamic languages validate the type of data they are processing while they are processing it. If you were more akin to a static language (the opposite), like C++, you would never have left your home. This is due to the fact that static languages validate data types before they actually process the data.

So, as a static language, you would have phoned your local Tesco, asked for smooth OJ, got told they don't have any and then shouted abuse down the phone. Both systems have their own benefits and downfalls, as this series is about Javascript we don't need to go into them. I say that as if I actually know C++, I don't.

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

HTML

Phew, that ended up being a hell of a lot longer than anticipated! If you recall from the above explanation of Javascript: "when applied to an HTML document". You may have noticed that this implies a link between Javascript and some strange initialised thing called HTML.

If you haven't Googled it already, HTML stands for HyperText Markup Language and is a coding language in its own right. However, as the name suggests, it differs from Javascript in the fact that it is a markup language. The first line of the Wikipedia page about markup languages describe them as:

A system for annotating a document in a way that is syntactically distinguishable from the text. Wikipedia

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.

But What About Javascript?

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 HTML document's interaction with JavaScript is essentially limited to telling the browser (yes, the thing you use to view websites) which javascript files to load (usually placed in the header or footer) for every user that visits the document. And to provide the browser with any JavaScript which may have been written inline -- between </script></script> tags.

Once the entire HTML document has been parsed (analysed) by the browser, it turns it into a Document Object Model -- The DOM. It is this Document Object Model which allows JavaScript to dynamically and interactively update what the browser displays.

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 initially wanted to cover CSS and the DOM in this post however, I now realise that it was a tad ambitious. Im currently 1,457 words deep and all we've covered is HTML and JavaScript!

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.