Alberto Montalesi - Complete Guide to Modern JavaScript

About Me

My name is Alberto Montalesi, I am from Italy and I am working in Vietnam as a Software Developer creating enterprise software.

My passion for programming started late in life, in 2016, at the age of 24 after a bachelors degree in Law.

My path to becoming a self-taught software developer has not been easy, but it's definitely something I would do again.

You can read my story on DevTo at this link: https://dev.to/albertomontalesi/my-journey-from-esl-teacher-to-software-developer-5h30.

Writing a book that can help other aspiring developers fills me with pride as I know very well how hard it can be to find the motivation and the resources to continue studying and improving your skill.

Apart from programming, my other passions include photography, traveling, and gaming.

If you want to get in touch for any type of collaboration or discussion you can find me on:

1. Twitter

1. DevTo at https://dev.to/albertomontalesi

1. Github at https://github.com/AlbertoMontalesi

1. InspiredWebDev my personal blog https://inspiredwebdev.com

Any contributions you make are of course greatly appreciated.

If you enjoy my content and you want to donate a cup of coffee to me, you can do so at https://www.paypal.me/albertomontalesi .

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 4.0 Unported License.

If you already have a code editor installed on your computer and you already know how to use the chrome developer tools or similar tools, then you can skip this chapter and move on.

In order for you to play around with the code we are going to use in this book I suggest you download a code editor that you will use to write and run the JavaScript code we will talk about.

My personal choice is Visual Studio Code, made by Microsoft and available for free here: https://code.visualstudio.com/

Other alternatives are:

1. Atom: https://atom.io/

1. Sublime Text: https://www.sublimetext.com/

Whatever is your choice, they will all be enough for your needs.

After installing it you just have to open the software and create a new file and save it as .js and you will have your first JavaScript file.

The second thing we will look at are the developer tools .

Open your browser to any page and right click somewhere. You will see a set of options, one of which being inspect or inspect element . If you click it it will open the developer tools that you can use to look at web pages code, play around with JavaScript or debug your application.

This is how the Chrome Developer Tools will look like.

The first tab Elements will let you look at the code of the page you are inspecting, the second tab Console is where you can write your JavaScript and experiment.

What I did here was defining a variable and calling it. You will learn about variables and much more in the next chapter where I will introduce you to the basics of JavaScript .

JavaScript is a programming language created by Brendan Eich in 1995 that enables interactive web pages and is an essential part of web applications.

If you want to learn more about the history of the language and its name, I suggest that you read this brief article on Medium.com .

If you have ever opened the Chrome developer tools or a similar tool you may have already seen how JavaScript is inserted into an HTML page.

We do that by using the script tag and either inserting our JavaScript code directly inside of it or by referencing an external file.

Code inside of the script tag:

type="text/javascript"> [YOUR_SCRIPT_HERE]

Reference an external file:

src="/home/script.js">

Of course you can add as many scripts as you want and also use both relative, absolute and full path such as:

src="/home/script.js">

src="script.js">

src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">

It's better to not write your code inside of the script tag but instead put it in its own file so that it can be cached by the browser and downloaded only once, regardless of how many files import it. Those files will use the cached version of the file, improving performance.

We use variables to store values, which can be anything from a username, an address or an item from our e-commerce site, for example.

Prior to ES6 (ES2015) the way we would declare a variable was:

var username = "Alberto Montalesi"

Now we have 2 more options when it comes to declaring variables:

let username = "Alberto Montalesi"
const username = "Alberto Montalesi"

We will go deeper into the differences between these three keywords in the Chapter 1 but let me give you a quick explanation.