Javascript – Learn Javascript in one Day


Today Javascript is the most popular and most used programming language. It is the language of the web, and it is the only language which used in both the client-side and server-side.

In this tutorial, I am not going to teach you everything about javascript.  But I will teach you, all the basics of Javascript which are most important to enter the world of javascript.

By learning these basics, you can read and write javascript code. I am sure, if you focus, you can learn these basics in a day. I will try to explain what is what?. But, it will be an advantage, if you know any of one programming languages.

So let’s get started.

Setup

Throughout this post you don’t need any software’s, editors, tools, etc. The only thing you need is the Google Chrome browser or Firefox browser.

Open Google Chrome, now open the console by pressing F12.  Ok, that’s it for the setup. In this tutorial, we will work everything on the console only.

All the best! Have fun, by learning Javascript.

In this tutorial, I am going to teach you, the following concepts take a look at on the list.

  1. Comments
  2. Variables
  3. Strings
  4. Arrays
  5. Objects
  6. Operators
  7. Conditions
  8. Loops
  9. Functions

1. Comments

Informal any of the programming languages, comments are used to explain the code and make the code more readable. Javascript is not except for that.

In javascript there are two types of comments:

Single line comments: These comments start with  // and end with the end of the line.

Below are the example of single line comments

// javscript single line comments

Multi-line comments:  These comments start with /* and ends with */. These may be span into multiple lines. Multi-line comments are also called Block Comments.

Below are the example of multiline comments

/* 
  This is the
  javascript multi line  
  comments
*/

2. Variables

Variables are like containers. How the containers are used to store different kinds of things, likewise variables are also used to store different forms of data.

Before you use a variable in javascript, you need to declare it. Variables are declared using var keyword.

Below are the examples for variable declaration.

var name = 'Jhon';
var age = 35;

In the above code name and age, both are the variables which hold some data. If you don’t specify a value for a variable, the variable is declared but, the value of the variable is undefined.

You can declare multiple variables using a single var keyword.

var name = 'Jhon',age = 35;

If you want to display the value of variable ( what a variable stores ), use console.log() console.log() is used to display the value of a variable.

console.log(name);
//prints Jhon

console.log(age);
//prints 35

3. Strings

In Javascript, anything between double quotes or single quotes is called as a string.

Examples for string creation:

var string1 = ' This is Single Quote String ';

var string2 = " This is Double Quote String ";

You may use either two single quotes or two double quotes. But don’t use the single quote with double quote and vice versa. If you do so, you got an error.

javascript - string quotes error

There are several string functions in javascript.

For example, finding the length of a string:

var name = 'south joovin';

console.log(name.length);
//prints 12

Converting all characters into uppercase:

console.log(name.toUpperCase());
//prints SOUTH JOOVIN

There lot more string functions, but I am not going to cover them all. I will teach them about in the upcoming articles in detail.

4. Arrays

An Array is a collection of elements, and each element is separated by a comma. Each element has a unique position in the array and is called as an index which is starts from 0.

The syntax for creating an Array:

[num1,num2,num3 .... numN]

Example

var myArr=[1,2,3,4,5]

Unlike other programming languages, Array elements can be any type. Means you can store multiple types of data in a single array like strings, numbers, boolean values, etc.

var myArr = ['south', 20, true];

Accessing Array Elements

As I told before, each and every element in the array has an index. The index is zero-based means it starts from 0.

var myArr = [1,2,3,4,5];

In the above array, element 1 has an index 0, element 2 has an index 1, and element 5 has an index 4.

If you want to access element 2, you need to write the code like below.

console.log(myArr[1]);
//prints 2

If you want to access element 4

console.log(myArr[3]);

Like strings, javascript arrays also have a number of methods. I mentioned below a few of them.

Finding the length of an array.

console.log(myArr.length)
//prints 5

Here the length means the number of elements.

Pushing elements to an array.

myArr.push(6);

The push method adds the element at the end of the array.

5.Objects

Javascript object is a collection of properties. Each property has a name and value.

The syntax for creating object:

{ name1:value1, name2:value2, name3:value3, .... nameN:valueN }

Example

var myObj = { name:'south joovin', age:22, job:'web developer' }

To access properties of objects use objectName.propertyName

console.log( myObj.name );
//prints south joovin

console.log( myObj.age );
//prints 22

To create a new property after the creation of the object

objectName.newPropertyName=value

Example :   myObj.city='Hyderabad'

Now myObj also have city property.

6. Operators

Operators are special characters which are used to perform different kinds of operations like arithmetic operations, compare values, assigning values, etc.

There are a bunch of operators in javascript, but I will teach you a few of them which is mostly used in conditions and loops.

1.  ==  checks the equality

Example :   var x = 5;

x == 5 //return true; and  x == 8 //return false;


2.  === checks the exact equality

Example : var x = 8;

x === '8' //returns false; x === 8 //returns true;


3.  < less than

Example : var x = 5;

x < 10 //returns true; x < 4 //returns false;


4. > greater than

Example : var x =10;

x > 5 //returns true; x > 11 //returns false;


5. ++ increments a value

Example : var x = 3;

x++    //returns 4;


6. -- decrement a value

Example: var x = 4;

x--   //returns 3;

6. Conditional Statements

Hey! Now you need some more attention. Because conditional satements are the little bit harder to understand than other topics.

Conditional statements are used to executes, the code when the value of the specified expression is true and skips, the code when the value of the specified expression is false. These are the decision points of your code.

In javascript,3 kinds of conditional statements are there. which are if, else if, and switch

if statement :The if statement, executes the code when the given expression is true. Otherwise, it skips the code.

Syntax

if( condition ){
    // code to be executed if the condition is true
}else{

    // code to be executed if the condition is false
}

Example

var name = 'south';

if( name === 'south' ){ // if name is equals to south
   console.log(" Hey It's south ");// print the message
}else{

   console.log(" Hey It's not south "); //prints when name is not equal to south

}

In the above code, if the value of name exactly equals to the 'south', then the if  block is executed,  if the name is not equal to ‘south’ then the else block is executed.

else if statement :

The if statement executes single block of code based on one condition. What about if you need to execute multiple blocks of code with multiple conditions. Don’t worry! you can do that with else if. else if  executes multiple conditions in a series.

Syntax :

if (n == 1) {
// executes first code block
}
else if (n == 2) {
// executes second code block
}
else if (n == 3) {
// executes third code block
}
else {
// If all else fails,executes fourth code block
}

Example

var num = 2;
if( num === 1){
    console.log(" number 1 ");
}else if( num === 2){
    console.log(" number 2 ");
}else if( num === 3){
    console.log(" number 3 ");
}else{
    console.log("all are failed"); 
}




//prints number 2

This is how the above code works:

  • Javascript interpreter first executes the if statement.
  • If that condition fails, then it goes to the else if statement.
  • It executes all the else if statements until it found the desired expression.
  • If none of the statements evaluates to true, it will go through the else statement.

Switch Statement: 

The problem with else if statement is, it is executed every block until if finds the correct condition.

Imagine, if you have 100 of if statements and none of them is right condition every condition returns false. But javascript executes 100 statements. In this case, it is wasteful to repeatedly evaluate that expression in multiple if statements.

This situation will be overcome using Switch statement:

Switch is a confusing statement to explain so first have a look at on switch syntax.

switch( expression ){

  case n:
    //statements
  break;

  case n:
    //statements
  break;

  case n:
    //statements
  break;
  
  default:
    //statements
  break;
}

switch statement first executes the expressioin and then look for the case label whose expression evaluates to the same value. If it finds the matching label, it starts executing the block of code at the statement labeled by the case. If it does not find a case with matching value, it looks for a statement labeled default: if there is no default label, the switch statement skips the block of code altogether.

example:

var n = 3;
switch( n ){
  case 1:
   console.log( "executing the first block" );
  break;

  case 2:
   console.log( "executing the second block" );
  break;
  
  case 3:
   console.log( "executing the third block" );
  break;

  default:
   console.log( "executing if not matched anyone" );
  break;
}


//prints executing the third block

7. Loops

Loops are used to execute a block of code number of times based on condition. There are 3 loops in javascript  which are while, do/while, for, and for/in

while loop –  It is the basic loop in javascript.

Syntax 

while( expression ){

   //statements

}

This is how while loop works:

  • The interpreter first evalutes the expression
  • If the expression is true, then it executes the statement inside the while loop. This process repeated continuosly until the expression evaluates to false.

example :

var x = 1;

while( x < 5 ){
  console.log( x );
  x++;
}

The above code prints the numbers 1 to 5.

This is how the above code works:

  • The value of variable x is 1 and is incremented each time the body of the loop runs.
  • If the value of x is 5, the expression  x < 5 evalutes to false. because the value of x is no  longer less than  5.
  • Then the while statement finishes and interpreter can move to the next statement.

do/while loop :

The major difference between while and do/while loop is the expression executed at the bottom of the loop. So you can execute the body of the loop at least once.

syntax:

do{
   //statements
}while( expression );

example:

var x = 5;

do{

  console.log( x );

} while(x < 5);

In the above case, the expression x < 5 evaluates to false, but it prints 5. Because the do/while loop executes the expression after executing the body of the loop.

for loop : 

The for loop statement is the combination of 3 expressions. see the syntax below to better understand.

for(initialize; text; increment){

   //statements

}

initialaize, test, and increment are the 3 expressions which is separated by semicolons and are responsible for initializing a variable, testing a variable and incrementing a variable of the loop. Putting them all in one line makes loop easy to understand.

Example:

for( var i = 0; i < 5; i++ ){
   
   console.log(i);

}

The above code prints the values from 0 to 4.

This is how the for loop works

  • The interpreter first initialize the variable i = 0;
  • Then it checks the condition i < 5;
  • If it is true, interpreter executes the body of the loop.
  • Then it increment the value of i;
  • This process repeated continuosly until i < 5 is false.

Note : The initialize expression ( var i = 0 ) executes only once.

 

for/in loop : 

The for loop is used to iterate over the properties of an object.

Syntax :

for( var p in obj ){
  
   // statements

}

Example :

var obj = { name:'south', age:22, website:'joovintechcafe' };

for( var p in obj ){
 
  console.log( obj[p] );

}

/* output 

south
22
joovintechcafe

*/

In the above code for/in loop executes until it iterates all the properties of an obj.

Each time it iterates, it stores the current  property name in variable p.

8. Functions

A function is a block of javascript code which is defined once but may be executed or called any number of times.

Syntax :

function function_name(p1,p2, ... pn){

   //statements

}

Syntax for calling function :

function_name(p1,p2);

Where p1 and p2 are the parameters which is optional. If you want to use them in a function you need to pass them while calling a function.

function add( a,b ){
  
   console.log( a+b );

}

add(5,5);

// prints 10.

If you understand all the above concepts you may able write the answers to the following question.

  1. what is a javascript comment and how many types are there?
  2. what is a variable in javascript and give an example?
  3. what is a string in javascript and give an example?
  4. what is an arrayin javascript and give an example?
  5. what is a javascript object give an example?
  6. what are conditional statements in javascript and list them?
  7. what are looping statements in javascript and list them?
  8. what are functions in javascript give a sample?

Leave a Reply

Your email address will not be published. Required fields are marked *