Learn JavaScript in 10 minutes [part-1]

#javascript #webdev #beginners #programming

Why do you need JavaScript?

JavaScript is one of the most popular programming languages. People use it all around the world and its demand has been increasing everyday.
People use JavaScript, along with HTML and CSS, for Web Development. JavaScript provides functionality of a website and make it “interact-able” with the users.
JavaScript is easy to learn but takes time to master, yet, kudos to you for taking your first step here.
So, let’s get started:

Linking JS with the HTML

You need to establish a link between your JS and HTML file to control HTML objects. You can write your JS code into the HTML file, but the standard practice is to create a separate JS file and link it to your HTML file.

You can link them by writing the code snippet down below within the

tag of your HTML file, at the end of the tag.

Here the src points to the location of your JS file and the “yourjsfile.js” represents your JS file. If your JS file is stored in a different location, you need to include the full directory address of the file.

Selecting Objects from the HTML file

To control the functionalities of HTML objects, you first need to select each of the objects. You can do this by either selecting the class or ID of the target object.

document selects the HTML document
document.getElementById(“id“) selects the the object with the ID of “id”. This method only works for IDs.
Another way of selecting object is by using the querySelector() method where you have to include a “.” if you are selecting an object using its class and “#” if done by selecting their ID.

Syntax

A syntax of a programming language defines how to write and organize it to execute it. Each programming language has their own different syntax, so does Javascript.

Unlike Python, Javascript uses curly braces “{ }“ to set the boundaries (scope) of a function. And another symbol we use is the semi-colon “;” which signifies the end of a line.

The code snippet above uses curly braces to define the scope of the example function. The code within is only ran when you call the example function.

After that, the semi-colon is used at the end of the line to signify the end of that piece of code. It is applicable for all lines of code.

Another thing you may notice is the use of “.” in many occasions. This “.” is used after an object to call the methods that object contain.

For example: the document object in the previous example contained both getElementById() and querySelector() methods.

Seeing the Output

While programming, you must check whether your code is running as intended - this is debugging. This is usually done by checking whether a variable is giving out the expected value.

The code snippet above is used to check the output. The first line of code shows how you can output a string (a string refers to words or sentences) using double quotes (””).
The second line of code outputs the value of the variable (we will discuss this shortly).

Declaring Variables

Variables are the vital part of every programming language as it's a container that holds values. We later access it and manipulate the values as needed.

First off, let’s look at the snippet above and check the different components of each line. First you will notice three keywords colored yellow: var, const and let.
These three keywords are used to tell the JS file that this object is a variable which will hold value(s).

The next thing to notice is the blue words variable1. variable2 and variable3. These three are the names assigned to a variable - you can name you variable anything as long as they don’t start with a number.

The third thing to notice is the = sign. That is the assignment operator, which tells the JS file that whatever is on the right of the = sign belongs to the variable to its left. Which means the value of variable1 is a.

You can also initialize a variable without assigning values to it. You can do this by putting the semi-colon right after the variable name. But you must assign a value to the variable at some point.

Difference between var, const and let

One of the key confusion people make is differentiating between these three. Although all the keywords do the same thing, there are some differences in them.

The var keyword declares a variable and stores data but it was commonly used till 2015. Now it is being replaced by const and let.

The const keyword declares a variable and stores the value which will not be changed again. You can remember it better by recalling that the const variable keeps the values constant.

The let keyword, on the other hand, is the only used keyword whose values can be changed without any limitations.

To be Continued . . .

This is the beginning, there is so much more to cover - but fear not. Learning JS bit by bit will not only make the process easy but enjoyable as well. On the next part, we will learn about operators, arithmetic operations, data types, functions etc.