If you owned a computer in the mid-1990s you probably remember that little lighthouse icon on your desktop - called Netscape Communicator. It was like your portal to a whole bunch of stuff - I think it was a web browser.
Well in 1995, while toiling away at Netscape programmer by the name of Brendan Eich would spend 10 days punching out a new programming language that would go on to revolutionise the experience of using the internet. Originally called, “Mocha” after the disgusting chocolate coffee craze sweeping the world - he would, mercifully, rebrand the language JavaScript.
The thing that takes the internet from being one big Madam Tussauds in cyberspace and turning it into dynamic, functional, fun little apps is JavaScript!
In short, JavaScript is responsible for making websites functional in an interactive sense. Click a button and something pops up? JavaScript. Submit a form? JavaScript. Post a picture to social media? Write a comment? Fever, aches, loss of taste? JavaScript! JavaScript! JavaScript! Oh, no, wait, coronavirus.
To get things running, JavaScript uses an exciting little process called Control Flow. Oooooh, exciting… (?) Basically, Control Flow means that the computer starts the code from Line 1 and then just runs it in a straight line to wherever the code ends. However, on the way down the flow may hit three different things that changes the flow of the code - spinning it around, repeating it, bouncing it back up etc. etc. these are loops, functions and conditionals.
Loops essentially are code that will keep running over and over until either there is nothing left to loop over or the condition for the loop becomes false. Most commonly these are called a for loop and they confuse the shit out of us when we are just starting to learn. But they are actually great.
So think of control flow like a rollercoaster. Your code sets off on a fairly straight track heading towards the finish line and- uh oh a loop, oh god oh christ this is so scary AHHHHH AHHHH AHHHH - oh god oh god thank god that’s over - OH GOD ANOTHER LOOP AHHHH AHHHH AHHHH AH oh my- stop - I hate it I want to GET OFF!!! - oh ok the loop is done phew okay great let’s just head towards the end of the code and we can all re- OH JESUS ANOTHER LOOP HOLY MERCY WHY WON’T IT STOP!? WHAT? INFINITE LOOP? OH MY GODDDDDDD….
And so on.
Okay - some other fun things to know about webpages... I’ll just kinda rush through this:
The DOM - stands for Document Object Model - google this and you will get heaps and heaps of pictures of flowcharts, it’s a god damn management consultant’s heaven - these are the DOM.
The DOM is a programming interface for web document, that represents the page and allows changes to be made to web-document’s structure, style and content. Everything on a webpage - from the page itself to the buttons you press - are called nodes (I don’t know why but the word “node” kinda grosses me out). You can hook onto these nodes with your CSS and JavaScript and do things with them. Like make em look certain ways (CSS) or make them interactive (JS).
Uh yeah, I don’t feel super confident with that paragraph but I think it is essentially correct - Gerard correct me if I’m wrong.
Which leads me to arrays and objects. Arrays are lists of data and are encased in nice neat little [square brackets] and [look, like, this]. You can put all kinds of neat little data types into arrays - let your imagination run wild… as long as it is within the five categories of data… we don’t want you going crazy now.
We can access data from an array using bracket notation. Here is an example:
let animals = [‘cat’, ‘dog’, ‘sloth’]
console.log(animals[0]) //will return ‘cat’ in the console because cat is the first item in the array
Objects, on the other hand are unordered sets of key-value pairs. Woah, woah, woah back it up there poindexter - unordered? Key-value pair? HAND?
Unordered is like a set of data without any particular order. Key-value pair consists of a key, which is a constant that defines the data set (e.g., gender, color, price), and a value, which is a variable that belongs to the set (e.g., male/female, green, 100). And a hand is a prehensile, multi-fingered appendage located at the end of the forearm or forelimb of primates such as humans, chimpanzees, monkeys, and lemurs.
Instead of neat little square brackets a JS object goes between disgusting, messy looking curly-braces. And to access data from a JavaScript object we can use bracket or dot notation.
const car = {
type: "Fiat",
model: "500",
color: "white"
};
console.log(car.type) //this is dot notation and will log 'Fiat'
console.log(car[model]) //this is bracket notation and will log '500'
Okay, that wraps up this blog post and, what? I have to talk about functions too? But this post is already like a million words long..
Ok ok. Functions. A JS function is just a block of code that you can invoke throughout your code and run that block of code. It takes away the pain of rewriting code over and over again and, in turn, makes everything run quicker. You can pass data to your functions to do stuff with, you can do loops in your functions, you can do all kinds of nifty things with functions.
So yes, JavaScript is very powerful, very cool.