JS: You should start with the easy stuff

JavaScript is a marvel... just as it could be a pain : ))
If you are a complete noob, please read on..

How to write my first line of JS?

Nope - this is not the best question to start with. A better question is, what is JS used for? The answer to this is longer than you may expect: from small web page scripts to massive Single Page Applications (SPAs), local-development scripts (NodeJS), backend/server code (NodeJS), desktop and mobile applications (various web wrappers to make an app native) and even embedded code...

But let's begin with the trivial browser-based use-case:

JavaScript makes web pages more dynamic!

This was its original purpose (to be more specific: input validation). That is, you could use JS to:

  • Validate an input has a properly-formatted value
  • Execute some logic (e.g. add/remove an element into/from the page upon some user action on the page)
  • Move / hide / resize / recolor an element programmatically

Some cooler examples?

  • draw on a canvas element / you can even create games
  • fetch and display data dynamically on actions inside of the page / you can build SPA applications like this (rich desktop-like applications), for example: Gmail

Related article: How Javascript Was Created and Why The History Behind It Is Important

Noob point: but how do I even start?

For simplicity, create a text file, name it index.html and add a small script tag to it like this:

<script>
   console.log('Hello JS World!')
</script>

Opening index.html via a browser and hitting F12 and see the Hello JS World! message displayed there (in the Console tab)

Congrats, your first line of JS got executed!

Noob point: writing JS directly in your browser?

Wait, what? Sure, yes. Today's browsers have something called developer tools. E.g. hit F12 while having opened any web page in your favorite browser, go to the Console tab and voila! You now have a console (or a REPL, call it how you like).

Try doing something like 2 + 1 in it and hit Enter. Yes, it outputs 3. You can do quite a bit in the console - basically anything you can with the JS on the page itself - manipulate, add or remove page elements, access Web APIs, anything. An example:

Noob point: but that Hello JS World was boooring, what about something cooler?

Here is a running example of Conway's Game of Life!

Game of Life is a simulation of... well... 😅 life... if it was made up of cells only, each of which has a rule when to live and when to die (and each rule is evaluated every step). So playing the simulation will create and remove generations of cells, creating a beautiful animation.

Much cooler than the Hello JS World, yeah?

The code above is around 200 lines. Those lines get executed, starting when the window is loaded: window.onload = initialize;

To sum up, for the real noobs out there, there are some APIs (or functionalities) baked in browsers. Some of those we observe in the above GoL example: attaching events on elements (like window.onload), executing an action after some period of time (like setTimeout or setInterval), manipulating the structure of the page (called DOM), by adding elements or setting the inner HTML (<element>.appendChild, <element>.innerHTML = ...), storing and manipulating data via JavaScript arrays and other language constructs.

Using all of these APIs and language constructs, we build a whole micro-project. Ofcourse, there are much more APIs and tools to make use of than those in the GoL above.

Noob point: general advice for beginners

What can we now do with this knowledge? Where do we take it from here? How do we learn the basics? Well, there are a lot of pieces, really.

My definitive simple answer would be:

  • understand more of the basics (HTML, CSS, JavaScript) - referred to as HTML5
  • set goals (to create) smaller or bigger projects - experiment with it
  • maybe take a course or 2 on it all
  • maybe also take a course or 2 on programming and Computer Science fundamentals (the more understanding of the bigger picture, the better)
  • maybe even take a job (Front End) at some point

Want a concrete free written resource? Here: MDN Learnings is a comprehensive resource, if you care to read through it, it has quite some details:

The way of the JavaScript ninja?

There is much more to the JavaScript / Front-End picture.

Want to become a ninja? Then:

  • you will get to know a powerful editor - VSCode
  • you will become aware of what package.json is
  • you will start using npm and understand what libraries are (and why are so useful)
  • you will know what Git (and source-control in general) is, even for personal projects
  • you will start using bundlers (like Webpack) to enhance your development setup
  • you will start using TypeScript and ES6
  • you will start looking into what Functional Programming is about - because its an instrinsic part of JavaScript and if you don't - you would essentialy be doing it wrong 😉
  • you may also start making extended use of various Web APIs (because its cool)
  • you will become a master at debugging awkward JavaScript issues ;)))
  • you will even go beyond those points with additional technologies, like Electron, hybrid mobile or even Wasm

Don't worry if you don't know what all of this means right now. It will get clear(er).

Good luck!