• Ravi Kumar

From Zero to One: Learning JavaScript #day1



I have always been a learner and this time I decided to learn JavaScript and to make an application based on JavaScript based technologies.


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 : 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. While it is not the case with the other languages.

In c: 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 JS the type of the variable is already taken care of you don’t need to specify it.


If-Else Statements 


The syntax was quite the same as in other languages, the one thing I found interesting was the ‘===’ 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.

Will also result in ‘number is correct’ as when both will be compared both of them represent the same but as we know one is of type integer while other is of type String so here we need to check for the type also and 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.

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


Loops :


In JavaScript we use same loops and in same style top as we used them in any other language;


for loop

Here 'i' is a variable which has been used to track the count of 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  1: var i=0 : Here we are initializing the value of variable i=0 i.e the starting value.  2: i<10 : The condition till when the code will execute the body of the loop. 3: i++ : Increment the variable i 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 ++i here we are putting the ++ operators before the variable what it does is first increment the value and then it will use it.

It is simply because of the functionality of the post increment. What it does is first use the value then increment it.


There is this question that some people use i++ while some use ++i in the for loop: Well the answer is both of them works the same 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. Here JS provided a 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 you array successfully and also the dynamic one due to that inbuilt feature of the arrays Push(the inbuilt feature).


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 also we 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.


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

Here switch works the same as in other languages :











Functions


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.

Here void is the return type i.e it is the data type of the value which the function will return like for integer it would be int and similarly for other data types and '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.


Building the first Application.


As I got further I studied How JavaScript interact with the 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 to get to know how things work behind the applications.


The game is there are two players and they have a dice and they got to throw the dice one by one. The player throwing the dice keeps on throwing the dice and keeps on adding the score and 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 : 1: If one appears before 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.

As before anything in the game you need to start the game but 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 and which results in dice=[0–6) as zero in not desirable so we add a 1 to make it [1–7).

Math.floor function 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 which what we do is if we need to 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 so what i thought was this is the same situation as at the start of the game so what I did is I created a function init 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 :




0 views
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest