Introduction to Javascript

Engineering•Aug 20, 2019

Ravi Kumar

I have always been a learner and this time I decided to learn JavaScript and to make an application based on JavaScript. In this blog I have also compared it with C language for a better understanding of the Javascript basics.

An Introduction to Javascript

How to Declare a Variable in Javascript?

Declaring a Variable

As usual I started with the very basics of any language i.e by declaring a variable and this was interesting as in JavaScript you can declare a variable of any type with the use of var keyword.

I was quite surprised to see this and also happy as now we don’t need to remember how to declare other variable and how to print like in other languages.

In C Language : For integer we use int to declare and %d to print and for character we use char and %c.

In Java : For integer we use int and similarly for string we use String.

In JS we can write our text directly over the screen by just using the variable name which is quite different from other languages.

In C Language : We need to tell the data type also with the help of the %d for int, %s for string and different for others.

In Java: We do not need to define the type of the variable here like in JavaScript.

In JavaScript : We can write on the screen without the need of data type.

In Javascript the type of the variable is already taken care of you don’t need to specify it.

If-Else Statements

The syntax is quite the same as in other languages, the one thing I found interesting was the ‘===’ symbol .
Firstly, I was surprised by this and thought it is incorrect then I got to know that the extra ‘=’ sign is to match the type of the variable otherwise a string of number can also be treated as number.

This statement is correct as we can see both the numbers represent 123.

but this one should not execute the if statement.

It will also result in ‘number is correct’ because when both will be compared both of them will represent the same number but as we know one is of type integer while other is of type String so always check the type.

We should always use ‘===’ as it give an extra protection against the error of type. And we use this extra ‘=’ sign with ‘!==’ ‘Not Equal’ also due to the same reasons.

There is this ternary operator which is quite handy as it saves the time and you also get the same result as through if-else statements in Javascript.

Here if x is greater than 15 then it will assign ‘Yes it is greater’ otherwise ‘NO it is not’.

Loops in Javascript

In JavaScript we use same loops and in same style that we use in any other language;

for loop

Here ‘i’ is a variable which has been used to track the count the number of times the loop executes or the number of times we want it to execute.

Example if you want to run a loop ten times then :

Here loop will be executed till x is less than 10 as x becomes equal to 10 or greater is loop breaks.

There are three parts in the loop
1: var i=0 : Here we are initialising the value of variable i=0 i.e the starting value.

2: i<10 : The condition till the code will execute the body of the loop.

3: i++ : Increment of the variable’s value i.e adding 1 to the value of i.

Here i++ can be written as i=i+1;

There are terms related to these expressions that are pre increment and post increment

Pre increment is written as ++i here we are putting the ++ operators before the variable. It will first increment the value and then it will use it.

It is simply because of the functionality of the post increment. Post Increment first uses the value and then increment it.

There is this commonly asked question that why some people use i++ while some use ++i in loop: Well the answer is both of them works alike as we don’t need to print them anywhere when this operation is taking place.

while loop

In while-loop. The loop executes till the condition holds to be true.

Now this loop will run till the condition i is less than 5 holds true.

Arrays

Here In arrays I found something different from other languages.

JavaScript provided an inbuilt feature for the array “push”. What it does is it provides us a unique ability of dynamic array.

That’s it you have declared your array successfully.

Push Feature in Javascript
Push feature will push the desired element into the array and due to this feature the array becomes dynamic i.e the size of the array keep on increasing as you put another element into it.

If you want to add a new element just push it into the array and now your array is bigger then before without any difficulty unlike in other languages where you need to define the size of the array as you declare it and if you want to increase its size then you need to create a new one with bigger length and then copy paste the element from the previous array.

In Java : We declare an array using the keyword new and define the size of the array too.

In C : We need to define the size of the array at the beginning.

Here 100 is the length of the array which is defined at the time of declaration.

Switch Statement In Javascript
The Switch statements here are not much different as compared to other languages.

Here switch works the same as in other languages :

Functions In Javascript

Firstly, I got to understand the basic syntax like how to declare a function:

As in C we declare a function as.

And to invoke the function we use

Here void is the return type i.e it is the data type of the value which the function will return. For an integer it would be int.

‘functionName’ is the name of the function and then the parameters.

While in JavaScript when we declare a function. It starts with the keyword function and then the function name and then the parameters if any.

And to invoke the function.

When a function returns a value it is said to be a function expression in Javascript.

Building the first Application In Javascript.

As I got further I studied how JavaScript interact with HTML and CSS. And to understand it better I tried to build a game to get a practical experience of the things I learned till now and also understand how things work behind the applications.

Creation of a Game In Javascript.
There are two players in the game and they have a dice and they will get to throw the dice one by one. The player throwing the dice keeps on throwing the dice and keeps on adding the score.

If in between a 1 appears then the score becomes zero but if the player chose to hold the score then that will be added to his score and the turn will get transferred to the other player.

Rules Of The Game

1: If 1 appears you chose to hold then your score for that round/strike becomes zero and the other player gets the chance.

2: If you chose to hold the score of the round/strike then that score get added to your total score and other player gets the chance to roll.

3: First player to cross the 100 point mark is the winner.

To begin with I got the HTML and CSS code already written.

Then I began to build the application or basically the functioning of the game.

Before any thing I got to decide my global variable i.e the variables that can be accessed from anywhere in the file.

As we needed to know the score of the player all the time and also about the active player i.e the player rolling the dice. To do this task I declared an array of score and a variable active player and will initialize them later.

score : To keep the score of the players.

activePlayer : To know which player is rolling the dice.

roundScore : To know the round score so that when the player holds the score it can be added to his score.

After this I made an event listener which would respond when ever we will click on the button roll.

This event listener will respond to the click and will roll the dice and then will show the image associated with that number.

Random function gives us some decimal value so to get them in the range of 6 we multiply it with 6, which results in dice=[0–6) as zero in not desirable so we add a 1 to make it [1–7).

Math.floor function in Javascript is used to round off the number passed as parameter to the nearest integer in downward direction. .

Math.floor(2.333)=2; Math.floor(5.2648)=5;

In this event Listener I made sure that when 1 appears round score becomes zero and player gets switched.

After this I made event listener for the hold button as if players want to hold the score. In this I updated the score of the player by adding the round score and also checking if the player won or not. And if the player has won then change the name to winner.

Here if the player has won then the game ends and the dice disappears and if not then the player is switched.

You may want to know how this player switch in working well this thing is taking place with the help of a function nextPlayer().

As I needed to write this again and again so to avoid that I created this function so that whenever I need them all I need to do is call this and I found out this nice terminology of DRY(Don’t Repeat Yourself).

In DRY , what we do is if we need a piece of code again then we make a function out of it so that if we needed to change anything we can change it there only and the changes will be visible to all the subsequent places.

And at last in the project I created the last event listener for the new button available in the application.

This button resets the game. Resetting the button will lead to the the same situation as at the start of the game so what I did is I created a function in it which is usually called before everything. And evoked the function at the beginning and also passed it to the event listener.

and the project started working fine.

The total work flow was like:

→ Roll the dice + add the round score + display it too

→ Hold the score i.e add the round score to the total + change the active player+ if winner stop the game show the winner

→ Adding the new button and to get the things to initial values like scores to zero and active player to player 0.

Final Application :

What’s the biggest thing you’re struggling with right now that we as a technology consulting company can help you with? Feel free to reach out to us at info@jalantechnologies.com. We hope our assistance will help!