JavaScript: A beginners guide, Part 1

Hello Junior Developer, you have finished your HTML and CSS learning, now you want to add some interactivity to your website? Let me help you with some basic guideline for starting with it. But if you don’t know much about HTML and CSS, you can visit w3schools, the best place for learning as a beginner. You will find great documentation for javascript also, I will highly recommend you to read those. Here I will talk about some fundamentals that you should not forget about JavaSript.

Why JavaScript?

Javascript is basically a programming language for the web. But after the arrival of NODE.JS(A runtime system using JavaScript), it gained so much power that it has become the most popular programming language in the world. So if you know JavaScript well, you can make almost any front end, backend or cross-platform android or ios app very easily.

1. Variables

You can store your data using variables.

var x = 5;
var y = 6;
var z = x + y; // z=11

In 2015 a new version of javascript was introduced, that version is called ES6 or EcmaScript6. In that version, two new variables were introduced “const” and “let”.

‘const’ is used when you don’t need to change the assigned value ever.

const x=5 //you can’t change this value afterwards

So, how do we change the variable data? here comes the ‘let’ variable.

Using ‘let’ we can declare any data and change it later when necessary.

let x=5

x=6

As we can change the data we can declare a ‘let’ without assigning it to any value, which we can’t do with ‘const’.

let x;

x=5;

2 Operators

There are few operations in javascript, they help us to perform calculations and some other functionality. They are

‘+’ , ‘-’ , ‘*’, ‘/’, ‘%’

They are mostly similar to our normal mathematical syntax. Only the ‘%’ is referred to modules. It is used to find any remainder of any equations.

3%2 // 1 is the remainder

3. If-Else Condition

Javascript has a similar control structure to some other popular languages in the C family. Using ‘if’ and ‘else’ we can have a conditional behaviour in the JS program.

if (condition) {

// block of code to be executed if the condition is true

}

else if(condition 2){

// block of code to be executed if the condition 2 is true

}

else{

// block of code to be executed if all conditions arenfalse

}

4. Loop

When the same works need to be repeated over and over again, loops can be handy. Few popular loops are ‘for’, ‘for each’, ‘while’.

Instead of writing

text += cars[0] + “<br>”;
text += cars[1] + “<br>”;
text += cars[2] + “<br>”;
text += cars[3] + “<br>”;
text += cars[4] + “<br>”;
text += cars[5] + “<br>”;

we can minimize it to

var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + “<br>”;
}

5. Object and Arrays

Everything in javascript is actually an object. We can create an object like this

var obj = new Object();

//or

var obj = {};

Arrays are also ‘object’ but they have some speciality over other objects, they have length.

var a = [5,6,7]; a.length; // 3

The first item of an array starts with an Index 0, so the length is one more than the highest index.

6. Functions

Javascript functions are designed to perform some particular tasks. They can be called inside of a JS program to perform any action when necessary.

function name(parameters){ // we can pass one or more paremeters into (parameters)

logical action //all calculations an actions

return value// function returns a single vaule or object

}

The important thing is we have to call the function

name(parameters)

A simple example will be

function add() {

var sum = 0;

for (var i = 0, j = arguments.length; i < j; i++) {

sum += arguments[i]; } return sum;

}

add(2, 3, 4, 5); // 14

7. Strings

Strings are used to hold text data.

const string= “This is a string”

We can compare and run the if-else function in strings

let a = ‘a’

let b = ‘b’

if (a < b) { // true

console.log(a + ‘ is less than ‘ + b)

} else if (a > b) {

console.log(a + ‘ is greater than ‘ + b)

} else {

console.log(a + ‘ and ‘ + b + ‘ are equal.’)

}

8. Numbers

ES6 has two numeric types: Number and BigInt. In javascript numbers are not real integers, so sometimes it can mislead. We have to be careful of that.

console.log(3 / 2); // 1.5, not 1

console.log(Math.floor(3 / 2)); // 1

0.1 + 0.2 == 0.30000000000000004;

If we add a string to mathematical calculations with numbers, whole things become a string.

const string= “text”

console.log(2+string)// “2string”

There are some other ways to convert numbers to string.

100.toString()// by toString function

100+ “” // by adding an empty string to number

9. Some String Methods

To find a string in a string we can use indexOf() method.

var str = “This word is to be found”;

var result= str.indexOf(“word”); //result=5

There are 3 methods for extracting a part of a string:

• slice(start, end)
• substring(start, end)
• substr(start, length)

You will find more about string here.

10. Some Number Method

We have already discussed a method toString() which converts a number to a string. Here we will learn some more.

We already saw sometimes number or mathematical data can be misleading. To fix that we can specify the number of decimals.

x = .1+.2;//0.30000000000000004

//we can use

x.toFixed(2);//0.30

There are 3 JavaScript methods that can be used to convert variables to numbers:

• Number()
• parseInt()
• parseFloat()

You will find more about the Number method here.