Learn JavaScript From Scratch- A Modern Guide (+PDFs, Tips & Free Resources)

JavaScript is an evergreen programming language. It has gained a lot of popularity over the time. In this Javascript Tutorial, we will understand the overview to Learn JavaScript from Scratch, What is JavaScript, How does JS engine works behind the scene and other things.

But before anything else, here’s a survey conducted by StackOverflow Team in 2020, that you should have a look

“JavaScript is currently used by 94.5% of all websites and nearly 70% of programmers from all over the world are using it or worked with it”.

Let’s take a deep dive to learn JavaScript from scratch-

---

Having better knowledge of JavaScript would definitely help you in your Tech career^. If you’ll mention it in your CV/Resume, and show your projects, you’ll get more attention from recruiters for sure.

If you’ve started learning JavaScript or working with JS in recent time, Today, you’ll know- The best way to Learn JavaScript from Scratch. And here are the 4 major aspects of today’s guide-

★ What should I know before learning JavaScript?
★ How do I start JavaScript? (How do I run JavaScript)?
★ Guide to be better in JS (What is the best way to practice JavaScript?),
★ (Personal) Tips & tricks: How to Start strong in JavaScript?
★ Bonus: Top 5 resources to be Expert in JS.

There are so many reasons, Why a modern programmer or web developer must know- How to leverage the benefits of JavaScript!

So with all that in mind, let’s jump on to today’s learning path-

---

Guide To JavaScript 

Quick Intro – Learn JavaScript from Scratch

You may already have some knowledge of HTML and CSS. If not, take quick side notes from our recent tutorials:

HTML– A markup language that is used to provide a structure to the web pages, and

CSS– A style sheet language used to design (and make the web pages more presentable).

If you’re thinking- “What should I know before learning JavaScript?”, then learning HTML and CSS would be the best for you. These 2 will take you to the next level.

With JavaScript, you can programmatically manipulate things on the web pages. It allows us to write simple (as well as complex) and powerful commands.

These instructions perform certain actions, to make any web app or web page a lot more dynamic-a lot more interactive.

Most of the beginners ask- Why learning JavaScript is harder than learning HTML and CSS?

They’re somewhere correct, because- HTML and CSS are markup languages, while the JavaScript is a programming language* (There’s a reason for the asterisk/star).

JavaScript is a programming language, that was first created in 1994 as a way to add functionality. Nowadays, it’s best used to provide rich user interfaces to almost all the modern websites and web-apps. JavaScript is one of the major building blocks of the web.

Use of JavaScript: Who uses JavaScript?

Many developers working with JS, recommend to start directly with a JavaScript Framework instead of having basic command on (Vanilla or Pure) Javascript.

However, it has its own pros & cons.

One of the major cons is, the journey might be troublesome for beginners.

Let’s see a live example of a web app that happily uses Vanilla JavaScript in its app’s production version.

• Go to Twitter’s Web app: Twitter.com/ShubhamKLogic (or your handle),

• Do ‘right-click’ and select ‘View page source’.

The next screen what you’ll probably see is below-

Don’t get scared of it. It’s just a mix of HTML, CSS, and JavaScript code.

To design & develop the functionality for Twitter, core JavaScript is being proudly used by them.

You might not understand- What that JS code is doing here? (Even, I am also trying to understand :). But the goal was to show you the importance of JavaScript.

Almost all the gigantic Tech companies (like- Google, Twitter, Facebook, others) and trillions of websites & apps are currently running with JavaScript (vanilla or in some form).

Now you can imagine the scope, career opportunity and essence of this technology.

Let’s Write Some Code 

Writing Your First JavaScript Program

Fundamentally, JavaScript is a scripting language. It’s a kind of a subset of the programming language family. There is a fact that, Markup languages^ (as HTML) and programming language (JavaScript/ Python or Java) are different. So, let’s go ahead and explain the difference very quickly.

 

Difference between JavaScript and Markup Language

Languages defined as a Markup language are those, which represent and provide better-structured data in a textual format. For eg. Headings, Sub-headings, Paragraphs and so on. They use some hidden keywords known as Tags (<h1> tag: for Heading, <h2> tag: for Sub-heading, <p> tag: for paragraphs, and more^).

However, languages defined as a Programming language are those, that can be used to compute some conditional statements, repetitive actions, and similar others.

 

Start JavaScript Programming

To start coding in JavaScript, you can use any web browser like Google Chrome. Code editors (as VS Code, Brackets, even Notepad++) are used most of the time to write JavaScript code and programs in a file with extension .js (dot js).

In this way, you can write code in a separate file, and then include it by providing the path to the file on any HTML page. The HTML <script> tags will help you to do that-

<script src="complete/path/to/your/file.js"></script>

 

But, being one of the favorite languages of the Internet, that run from within a Web browser, we’ll see an another way to write & run JS step by step.

Using this technique, you can write the statements and watch it run in real-time right in your browser. As you’ll press F12 (in Windows machines), or Cmd+option+J (in Mac) in Chrome browser, the ‘Developer’s Tools’ gets open.

For Windows/Linux developers:

Step #1: Open any browser (say Chrome),

Step #2: Press F12 or Right click then select inspect element or type ‘Control + Shift + i’,

Step #3: The developer tools will be open, now Go to the ‘Console’ tab and click on the clear button (or press “Control + L”)

For macOS developers:

Step #1: Open any browser (say Chrome),

Step #2: Press shortcut Option + ⌘ + J or at the top-right side click on the three dots. After that, Select ‘More options’, then select ‘Developers tools’.

Step #3: The developer tools will be open, now Go to the ‘Console’ tab and click on the clear button.

Finally, everything is ready to go. Now you can write and run your JavaScript code directly in the console tab of developer tools provided by the web browser.

 

Example:

while(confirm("Hey Googler, Click 'OK' to Prompt again, or 'Cancel' to stop !!!")){ }

 

‘Copy’ the above code > Paste in ‘Console’ tab.

 

Then hit ‘Enter’…

You’ll instantly see the output. It’s that simple to start writing code in JavaScript.

Here, you can also play with a number of JavaScript features or do direct calculations here:

 

For Example:

10000-3355;
// Output: 6645
400 * 30;
// Output: 12000

 

---

How do JavaScript engines work?

 

JavaScript Engines are complicated to understand thoroughly. However, you can take these simple notes-

#1. First, the engine reads (or parses) the script and code,
#2. Converts (or compiles) the code into your OS understandable language (technically known as ‘Machine language’),
#3. Finally, the machine code runs and shows us the output.

The JavaScript engine processes the commands at each line of code. Firstly, it reads a compiled script and processes the data passed in the JavaScript engine. After that, it translates the code and converts it into machine language.

When this whole process is completed, the JS scripts run quite fast and display the output.

The Keynote is – No programming language article would be useful without explaining its fundamental building blocks. JavaScript is also in the same line, and I believe those to be the following:

Values, Variables, Operators, Functions, and Data Structures.

So, enough to talk, Let’s begin & Learn JavaScript from Scratch !!!

---

5 things in JavaScript to Start strong

Don’t get me wrong!!! There are many other things in JavaScript that are so crucial in development. But, a decent base-level knowledge of these 5 topics and concepts, will put you in a better position, to begin your journey smoothly and understand new concepts very quickly.

Not only with programming in JavaScript, but with programming in any other similar technologies or language.

#1: Values

As of now, there are overall 8 types of values in JavaScript. Seven of these are that are best known as Primitives.

These are the first seven (with example):

1. Boolean – true/false,
2. Null – null,
3. Undefined – undefined,
4. Number – 0,100,34.52
5. BigInt – 55n, 23442n,
6. String – “a string”, ‘another string with single quote’, and `string with backtick1`,
7. Symbol – Symbol(“first symbol”).

A symbol value is created by calling a function ‘Symbol()’, which dynamically produces an anonymous, unique value for further processing.

The 8th type of value in JavaScript is ‘Object’.

This special type of value allows you to call some of its functions to save some time in processing the information.

 

#2: Variables

Using variables in JavaScript, we can hold or store data by tagging it with a name.

A few lines for example:

 

let theNameObject = 'ShubhamKLogic.com';
let theNewObject = theNameObject.toUpperCase( theNameObject );
console.log( 'The name = ' + theNewObject );
// Output→ The name = SHUBHAMKLOGIC.COM

 

 

Simple Explanation:

#1 Line: Created a variable- theNameObject, and stored the (String type) data ‘ShubhamKLogic.com’.

#2 Line: We called a method toUpperCase() of a string object theNameObject. Then we have stored it in another variable theNewObject.

#3 Line: The last line prints the data present inside theNewObject in the console tab of the Developer’s tool using the console.log() method.

It’s so helpful to think of variables (and objects) as containers or boxes that hold information.

Tight-fight among ‘let’, ‘var’ and ‘const’ variable declarations:

Some words on the use of let for creating variables.

In JavaScript, There are actually two more ways that we can create variables in JS. Instead of using let to declare variables, we can swap it out for either const or var.

In above example, instead of creating variable as let theNameObject, we could also write as- var theNameObject or const theNameObject.

In the very beginning, JavaScript was originated with just var but after 2015 update later let and const  were got added into it.

During your JS programming journey, you may hear some people cry out that, You should never use var to create variables, and you should only use let or const.

After some time, you may even hear people tell you that you should never use var or let and should only use const.

In a nutshell, it’s due to the differences of something known as ‘Scope’.

And its unawareness can impact your code too. I’ll not go to dig deeper in this discussion, however, you can refer to this thread of https://StackOverflow.com

---

#3: Operators

Have you ever used a calculator? The JavaScript Operators are just similar to that. These are the main four falls under the arithmetic operators category:

• + (addition)
• – (subtraction)
• * (multiplication)
• / (division)
  and a few more are there in arithmetic operator category.

Let’s have a look at a couple of other operators in JavaScript:

• Assignment operators (=, +=, -=, *=, /=, **=)
• String operators (+, +=)
• Comparison operators (==, ===, !=, more)
• Logical operator (&&, ||, /)
• Type operator (typeof, instanceof)
• Bitwise operators (&, !, >>, more)

Operators in javascript with example-

Using operators and variables, you can also write a program in JavaScript for performing Shopping calculations-

let moneyInPocket = 10000;								// '=' refers to assignment operator : Used to assign value
let shoppingBill = 4354;
let remainingBalance = moneyInPocket - shoppingBill;	        // '-' refers to subtraction operator : Used to perform substraction
console.log("Remaining balance = "+ remainingBalance);	// '+' refers to concatenation operator: Used to concatenate String with numbers

 

---

#4: JavaScript Functions

Functions are one of the key building blocks of literally any programming language. A function is basically a set of statements that performs a task or calculates a value whenever it gets invoked.

For example, here is a function, which is responsible for, whenever a user clicks on the ‘Let’s Check’ button, it will take a number and print its table.

function myFunction() 
{
    var favNum = prompt("What's your favorite number?", "7"); // Step 1&2
    var txt = document.getElementById("txt");
    txt.innerText = "";
    for (var i = 1; i <= 10; i++) // Step 3,
        txt.innerText += txt.value + favNum * i + " "; // Step 4
}

 

Easy Explanation- How does JavaScript work?

Here are the 4 steps to compute the table of your favorite number, as you’ll click ‘Let’s Check’:

Step 1: Took input from the user,

Step 2: Saved that input in a variable (‘favNum’),

Step 3: To print the multiplication table, we need to iterate (using something known as, ‘for loop’), from 1 to 10.

So, we need to start from 1 and increment it on each iteration till 10.

Step 4: Print the calculated number.

And it’s done !!!

---

A Live Example 

There are many ways that we can create a function in JavaScript. But for now, we are only going to focus on the most common and simplest method of doing so, which is the one used above in the Table calculation example.

If you copy the above code, (add some CSS to beautify), paste into a file named “xyz.html” and then, run it (or open it) using a web browser,

Here is its Output-

In JavaScript, whenever we want to create a function, we use a javascript keyword- ‘function’ at the very beginning. This tells the browser’s JavaScript engine that we are going to create a function. And now you are ready to define and invoke numerous times.

---

#5: Data Structure in JS

Sometimes the data that we get to store will not fit in primitives (an integer, string, or other), and that’s the case when Data structures are to the rescue.

For example:

Let’s say, we are building a web app for a college, and we want to store data of hundreds of students. Trust me, it might feel like a nightmare to create thousands of variables for hundreds of Roll no., names, addresses and other information.

Somehow, if we created those variables (or memory blocks), we’ll not be in a situation to process the information gracefully.

So in this situation, a variety of Data structures are there, to provide a more convenient way in order to perform CRUD operations.

CRUD means: Create (records), Read (or retrieve information), Update and Delete (information).

Array:

While one variable typically holds one piece of information, an array can hold as many as you like. You can think of an array as a data structure that allows us to hold a list of information.

So let’s try it with a list of courses in a college:

let courseList = ["JavaScript", "HTML", "CSS"];
courseList.push("Java");

 

You might have noticed that we wrapped the list of items inside square brackets [ ].

There’re no special words to remember here, we simply use those square brackets and that creates the array in JavaScript.

Diagrams are the best ‘Gurus’ of programmers –

If we wanted to add Java to our courseList, we could write courseList.push(“Java”). Now, our new courseList would now look like this:

Arrays provide a number of useful methods. These methods provide us easy ways to read items from an array, as well as to add, update, and delete items.

Here numbering started from ‘0’, because with an array, the first element placed at 0th index, second element gets 1st index and so on.

Indexing provides a convenient mechanism to access a list of thousands of elements in a fraction of second.

There are other methods out there for updating, shifting, and removing the elements from the list of an array. You can check the complete list from MDN docs.

Similar data structures in JavaScript–

JavaScript provides a few other data structures for quick and easy manipulation of complex information. We’ll not see all of them here but definitely mention them here, so that you can be aware of them-

Object: Objects are variables too, but objects can contain many values. They have pairs of ‘property’ and ‘value’.

var course = {name:"JavaScript", version:"ES7", level:"beginner"};

 

Special Data structures:

Using the above fundamentals, we can also create custom Data structures. For eg: Queue, Stack, LinkedList and others.

Such data structures are helpful to provide a new and convenient way to manage simple as well as complex information.

---

Become a JavaScript Expert

If you arrived as an absolute beginner, now you have 5 new programming concepts under your belt.

But don’t stop there!!!

Start writing some JavaScript code right away.

After all, the best way to achieve mastery is practice, practice and practice !!!

Other than that, here is an Ultimate list of Resources that would help you a lot to learn javascript from scratch, and here the best 5 for you-

#1. Learn JavaScript In One Week– All basics of JS at CoderByte

#2. JS Building Blocks– Learn JavaScript from Scratch using MDN docs for all levels [Beginner/Mid/Experts]

#3. Learn JavaScript at Home– Build projects with FreeCodeCamp

#4. Easiest way to learn JavaScript from Scratch– Read short lessons, Take notes, and Complete challenges directly in your browser

#5. An introduction for new programmers- Learn JavaScript Step by Step- JsForCats

#6. Bonus– A cheatsheet .PDF of JavaScript concepts and features.

---

We Learned Today 

It is incredibly important that you understand how these tools and resources can help you.

Try to understand what should be the order and transformations of your code for better performance. Try to understand how your logic and methods are being bundled, so you can optimize them better.

And that’s it! I hope there is a decent amount of value to derive from this post to learn javascript from scratch.

There is no need to take it all in at once- focus on basics and core concepts, and you will be well on your way.

Now, It’s your turn:

★ Learn and practice JS,
★ Get the right tools to be better in it,
★ Join web communities as Sitepoint,
★ And keep an eye on upcoming trends and technologies,

If you found this useful, please give ratings on Facebook Page of ShubhamKLogic.com

Learning these skills will definitely help you to build a in Web and App development. So, have some patience, and practice each and every day.

– “Keep Smiling | Think Logical”

– ShubhamKLogic.com

 

---