In this JavaScript tutorial, you’ll learn the basics of JavaScript. Together with HTML and CSS, JavaScript forms the core of the worldwide web. The tutorial is full of links to other websites and resources to help you deepen your knowledge.
Why this JavaScript tutorial?
So why should you read this tutorial, instead of the many others out there? Here are a couple of reasons:
- It’s concise: no dreaded explanations
- For beginners: I assume you have little knowledge of programming and the ecosystem
- I include lot’s of example code
- Excercises: you won’t learn programming languages by just reading, hence I included many exercises
This tutorial is a great introduction to JavaScript, but If you want all the gory details, however, I surely recommend you to continue your learning journey through other tutorials and books as well. Below, I included a few free resources that I can highly recommend:
- JavaScript for cats is an introductory tutorial, covering the absolute basics. If you are completely new to programming, you might want to try this first (I hope you like cats though).
- The modern JavaScript tutorial at javascript.info is an online book that, just like my tutorial, includes the option to directly try and tinker with the code samples. It also includes lots of excercises with accompanying sample solutions. It’s an easy to follow, but at the same time very complete tutorial. It’s a great read if you already have some programming experience and want to deepen your knowledge.
- Eloquent Javascript is more of a complete introduction to programming, that happens to use JavaScript as an example. It’s a bit slow and verbose though. To get started quickly, you might prefer another tutorial.
What is JavaScript?
JavaScript is a programming language that browsers can understand. Thanks to JavaScript, we can turn a static website into an actual application that can do a whole range of things that would otherwise be impossible:
- Check user input, even before sending it to a backend server
- React to user events, like clicking an element and hovering the mouse somewhere
- Fetch data from a backend interactively, without having to reload the page
- Show or hide parts of a website, based on certain conditions
Although it was originally intended to run in browsers, JavaScript can also be used outside of them thanks to Node.js. Node.js separated the JavaScript engine that is part of the Chrome browser into a stand-alone tool, allowing you to run JavaScript code anywhere.
How to include JavaScript in a page
Let’s get started right away, shall we? To include JavaScript in your pages, you use <script>.. </script> tags. There are two ways to include JavaScript using these tags:
- Embedding it directly in the page, between the script tags.
- Linking to another file that contains the JavaScript code
Embedding JavaScript in the page
Let’s create that Hello world example right away, to demonstrate option 1:
<script>
alert('Hello, world!');
</script>The alert function shows a simple dialog box or popup in your browser, with the provided text and an OK button to close it. Feel free to run and modify the example above.
Linking to external JavaScript files
If you write a lot of JavaScript, it gets messy quickly. Most programmers put their JavaScript code in separate files, just like you put CSS in separate files. This way, the code is separated from the HTML and thus easier to find.
Another, more important advantage of putting your code into a file, is reuse. You can include your JavaScript from more than one page, reusing it every time from a single file instead of repeating the same code in each HTML document.
To reference an external JavaScript file, we again use the script tag. This time, however, we use the src-attribute to link to a file. It’s customary to use the .js file extension for JavaScript files, so we would end up with the following:
<script src="hello-world.js"></script>
In hello-world.js, you put just the code, without any tags:
alert('Hello, world!');These files, hosted in the same directory together, have the same effect as the first example where we embedded the code directly. The difference is that the browser now first fetches the HTML page, then the JavaScript. On a slow network connection, it can happen that the page gets rendered, but the JavaScript is loaded a bit later. The timing of this can be controlled to some extent, but that’s not something you need to worry about now. Let’s first learn the basics!
Doing both at once
Please note that you can’t do both at once; at least not with the same script element. You either use the script tags to reference an external file or to embed JavaScript directly. If you need to do both, simply use multiple script tags. There’s no limit to how many script elements you use. In the example below, we include two external files and embed a short piece of JavaScript on the page too:
<script src="code-file-1.js"></script>
<script src="code-file-2.js"></script>
<script>
alert('Hello world!');
</script>Please note that the examples that reference external files don’t work here, since the files don’t exist on my server.
Dynamic typing
Many programmers despise JavaScript, especially programmers coming from strongly typed languages, like Java or C#. In a strongly typed language, you need to specify the exact type of each variable, like String, int, and float.
JavaScript is dynamically typed, meaning the type of a variable can change. This offers a lot of flexibility, but it can also introduce hard-to-track bugs. As an example, you can subtract the string ‘5’ from the number 12 in JavaScript:
<script> alert(12 - '5'); </script>
If you run this, the popup will show you the result, which is the number 7.
There are not many situations where this is desirable. E.g., you could use it to directly do calculations from user input, but I would still want to check the user input first, just to be sure they didn’t enter something else than digits, causing a NaN (not a number) result.
Having said that, dynamic typing does have many advantages. In general, it makes it easier to get started quickly. Some will tell you that it’s more error-prone. A strongly typed language like Java won’t compile when there’s a type error. JavaScript will probably continue running, but the output will be unexpected.
No choice?
Another reason why some hate JavaScript is that you have little choice when it comes to programming in the browser. JavaScript is the only browser-native programming language that is supported in all big-name browsers. In contrast, when it comes to ‘regular’ programming, e.g. for the backend, you can pick any language you like.
The simple fact is: you have no choice, and thus JavaScript became the most used language in the world.
ECMAScript
It might start to look like it, but it’s not my intention to discourage you to learn JavaScript! JavaScript is actually a very convenient, powerful language. And although most call the language JavaScript, the language is standardized by an organization called ECMA International, in a standard specification called ECMAScript.
You might see references like es5, es2015, es6, etcetera on other sites. They are all JavaScript, but just more specific versions of the language. Thanks to this standardization effort, a lot of improvements have been made to the JavaScript language in the past decade. ECMAScript continues to add improvements to the language with each iteration, adapting the language to the changing needs of the modern web, and fixing imperfections of the past.
JavaScript alternatives
On top of the improvements made on the ECMAScript standard, a couple of alternative languages have appeared. One of the more prominent ones is TypeScript, which is a so-called superset of JavaScript. It adds typing to the language, as well as features that are to appear in future ECMAScript specifications.
The downside is that TypeScript does not run natively in the browser, and there are no plans to change this. You need to compile TypeScript to JavaScript. If you’re building big, complicated sites, this compilation step is actually not a big deal. You’re running all kinds of tools anyway to build the website, and adding a TypeScript compiler actually becomes a minor step in that process.
TypeScript has gained a lot of ground quickly. People use it extensively in combination with popular JavaScript frameworks like Angular and React.