Learn Javascript In One Day [ 24 Hours ] – Complete Guide For Beginners


So, you want to learn javascript. That too in a single day. No problem. You are in the right place.

Why me? there is a lot of good tutorials and books on the internet.

I know. But, If you try those, you have to spend more time and they cover each and every topic and moreover, it kills your curiosity of learning javascript.

What is Javascript?

Javascript is the most popular and most used programming language. It is the language of the web.

It is the only language which works in both the client-side and server-side scripting. If you learn javascript you work for either client-side or server-side or you can work for both also.

Firstly, I want to convey that, I am not going to teach you everything about javascript.  But I will teach you, the basic and core concepts of Javascript in a simple language. Which are more important to enter the world of javascript.

If you learn these basics, you can start read and write javascript code. Moreover, you can learn these basics in a day. I am sure, if you focus.

I will try to explain, each topic in a simple language. But, it will be an advantage, if you know any of one programming languages.

So let’s get started.

Setup

Throughout this post, I am not using any software’s, editors, tools, etc. Because I would like to make your learning more easy.

The only thing you need to have is the web browser.

So, make sure you have installed any of one web browser in your computer.

In this tutorial, I am using Google Chrome browser.

Step 1: Firstly, Open google chrome browser.

Step 2: Now Press F12 to open the console. Below I given the screenshot of chrome console.

Google Chrome Console Preview - Javascript

Ok, that’s it for the setup.

In this tutorial, we will work everything on the console only.

All the best! Enjoy Coding.

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. Javascript 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.

There are two types of comments in javascript

Single line comments: These comments starts with  // (double left slashes) and ends with the end of the line.

Below are the example of single line comments

// javscript single line comments

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

Below is the example of multiline comments

/* 
  This is the
  javascript multi line  
  comments
*/

2. Javascript 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.

For example, below I created a two variables with one var keyword.

var name = 'Jhon',age = 35;

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

console.log(name);
//prints Jhon

console.log(age);
//prints 35

3. Javascript Strings

In Javascript, anything between double quotes or single quotes is known 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, find 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. Javascript 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 starts from 0.

The syntax for creating an Array:

var array_name = [num1,num2,num3 .... numN];

For Example

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

Unlike other programming languages, Array elements can be any type. Means you can store different 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.

To access an array element, you have to write the index of an array between square brackets with a prefix of an array name.

Take a look at on below example.

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 an 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.

For example, 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.Javascript Objects

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

The syntax for creating object:

var object_name = { name1:value1, name2:value2, name3:value3, .... nameN:valueN };

For 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

For 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

For Example :   var x = 5;

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


2.  === checks the exact equality

For Example : var x = 8;

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


3.  < less than

For Example : var x = 5;

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


4. > greater than

For Example : var x =10;

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


5. ++ increments a value

For Example : var x = 3;

x++    //returns 4;


6. -- decrement a value

For Example: var x = 4;

x--   //returns 3;

Here the detailed tutorial on javascript operators

6. Conditional Statements

Hey! Now you need some more attention. Because conditional statements 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
}

For 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 a single block of code based on one condition. What about if you need to execute a single block of code with multiple conditions. Don’t worry! you can do that with else if.

else if statement 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
}

For 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:

  • Firstly, the Javascript interpreter 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 executes every condition until it finds the correct one.

Imagine, you have 100 if statements and none of them are right conditions 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:

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

switch( expression ){

  case n:
    //statements
  break;

  case n:
    //statements
  break;

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

Switch statement first executes the expression and then looks for the case labels whose expression evaluates to the same value. If it finds the matching label, it starts executing that block of code.

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.

For 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 types of loops in javascript which are while, do/while, for, and for/in

while loop

It is the basic loop in javascript.

while loop Syntax 

while( expression ){

   //statements

}

This is how while loop works:

  • Firstly, the interpreter evaluates the expression
  • If the expression is true, then it executes the statement inside the while loop. This process repeated continuously until the expression evaluates to false.

For Example :

var x = 1;

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

The above code prints the numbers 1 to 4.

This is how the above code works:

  • First of all, the while loop checks the expression is true or not.
  • If it evaluates to true, the body of the loop is executed.
  • We initialize 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 evaluates to false.
  • Then the while loop stops executing. and the interpreter moves 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.

do/while loop syntax:

do{
   //statements
}while( expression );

For 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. It is a little bit harder to understand. So, first of all, have a look at on the syntax to better understand.

see the syntax below to better understand.

for(initialize; text; increment){

   //statements

}

initialize, test, and the increment is the 3 expressions which are separated by semicolons and are responsible for initializing a variable, testing a variable and incrementing a variable of the loop.

Finally, Putting them all in one line makes for loop easy to understand.

For 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

  • First of all, The interpreter initialize the variable i = 0;
  • Secondly, it checks the condition i < 5;
  • If it is true, the interpreter executes the body of the loop.
  • Finally, it increments the value of i;
  • This process repeats continuously 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

}

For 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 javascript function is a block of code which is defined once but executed many times.

Syntax :

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

   //statements

}

The syntax for calling a function :

function_name(p1,p2);

Where p1 and p2 are the parameters which are 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.
Let’s check yourself.

If you understand all the above concepts, you may able answer the following questions.

  1. Why we use comments and how to write javascript comments?
  2. What is a variable? How to write variables?
  3. Write some examples of string variables in javascript?
  4. How to write arrays?
  5. Give an example for creating an object and accessing properties.
  6. How many conditional statements in javascript? write their syntax.
  7. What are looping statements in javascript and list them with syntax?
  8. What is a function in javascript give an example?

Conclusion:

In conclusion, you can learn all the basics of javascript in one day. But, you can’t be an expert in one day.

To become an expert, you have to practice a lot. You have to solve a lot of problems.

Here are the 150 javascript problems for you to solve.

If you have any doubts feel free to comment below. If you like this article, please share with your friends.

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Powered by Pixelbart

1 Comment

Leave a Reply

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