Learn javascript | javascript tutorial for beginners

JavaScript

First lets clear some myth and common confusion regarding JavaScript at beginner level:

What all the different question you might come across when you hear JavaScript for the very first time.

What is JavaScript?
Is JavaScript and java are same thing?
What is the relation between ECMA Script and JavaScript?
Why should i learn JavaScript?
What JavaScript can do?
Where i can use JavaScript?
Is it worth to learn JavaScript in when we have much more stronger languages now?
Can i get some Cheat-sheet to learn all basic concept at last minute?
Any Web References to learn JavaScript
You tube channel to learn JavaScript

What is JavaScript?

JavaScript is the Programming Language for the Web.

JavaScript can update and change both HTML and CSS.

JavaScript can calculate, manipulate and validate data.

JavaScript is a logic-based programming language that can be used to modify website content and make it behave in different ways in response to a user's actions. Common uses for JavaScript include confirmation boxes, calls-to-action, and adding new identities to existing information.

Is JavaScript and java are same thing?

JavaScript and Java are completely different languages, both in concept and design.

By comparison, JavaScript is mainly used to make web pages more interactive.

Java code must be compiled, and JavaScript code is all-text.

Each language requires different plug-ins.

JavaScript code is run on a browser only, while Java creates applications that run in a virtual machine or browser.

Java is an OOP (object-oriented programming) language, and JavaScript is specifically an OOP scripting language.

JavaScript was invented by "Brendan Eich" in 1995, and became an ECMA standard in 1997.

ECMA-262 is the official name of the standard. ECMAScript is the official name of the language.

What is the relation between ECMA Script and JavaScript

ECMA is "European Computer Manufacturer's Association". ECMAScript is a Standard for scripting languages such as JavaScript, JScript, etc. It is a trademark scripting language specification. JavaScript is a language based on ECMAScript. A standard for scripting languages like JavaScript, JScript is ECMAScript. JavaScript is considered as one of the most popular implementations of ECMAScript.

Ver	Official Name	Description
1	ECMAScript 1 (1997)	First Edition.
2	ECMAScript 2 (1998)	Editorial changes only.
3	ECMAScript 3 (1999)	Added Regular Expressions. Added try/catch.
4	ECMAScript 4	Never released.
5	ECMAScript 5 (2009)	Added "strict mode". Added JSON support. Added String.trim(). Added Array.isArray(). Added Array Iteration Methods.
5.1	ECMAScript 5.1 (2011)	Editorial changes.
6	ECMAScript 2015	Added let and const. Added default parameter values. Added Array.find(). Added Array.findIndex().
7	ECMAScript 2016	Added exponential operator (**). Added Array.prototype.includes.
8	ECMAScript 2017	Added string padding. Added new Object properties. Added Async functions. Added Shared Memory.
9	ECMAScript 2018	Added rest / spread properties. Added Asynchronous iteration. Added Promise.finally(). Additions to RegExp.

Why should i learn JavaScript?

We can develop any website using HTML CSS, But it wont be responsive without Javascript..

Does anyone wants any website without response?
My answer is "A big No", as we all are addicted to see some response some interarction from website. So we should learn JavaScript to make such a interactive and resopnsive websites and perform some operations.

HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript. CSS is used to control presentation, formatting, and layout. JavaScript is used to control the behavior of different elements.
The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer. Even if you haven’t got your heart set on a tech career, being proficient in JavaScript will enable you to build websites from scratch—a pretty useful skill to have in today’s job market!

What JavaScript can Do?

This section contains some examples of what JavaScript can do:

JavaScript Can Change HTML Content
JavaScript Can Change HTML Attribute Values
JavaScript Can Change HTML Styles (CSS)
JavaScript Can Hide HTML Elements
JavaScript Can Show HTML Elements
JavaScript can Store useful values inside variables. ex. We can ask for a new name to be entered then store that name in a variable called name.
JavaScript can perform Operations on pieces of text (known as "strings" in programming).
JavaScript can be used to do neat things like creating animation in HTML.
JavaScript Running code in response to certain events occurring on a web page.
And much more!

Where i can use JavaScript?

Adding interactive behavior to web pages

Creating web and mobile apps

Building web servers and developing server applications

Game development

Smartwatch Applications

Is it worth to learn JavaScript in when we have much more stronger languages now?

The world of web development is constantly moving. With so many new tools popping up all the time, it can be extremely difficult to know where you should focus your efforts. But for any web application you must know HTML, CSS, and JavaScript as these 3 are heart of any web application.

So we can say JavaScript is pretty much everywhere on the web—and that’s not likely to change any time soon.
According to the 2019 StackOverflow developer survey, JavaScript is the most commonly used programming language for the seventh year in a row. It is currently used by 94.5% of all websites and, despite originally being designed as a client-side language, JavaScript has now made its way to the server-side of websites (thanks to Node.js), mobile devices (thanks to React Native and Ionic) and desktop (courtesy of Electron).

As long as people are interacting with the web, We can challange that JavaScript is highly relevant—there’s no doubt that this is a language worth knowing!

Can i get some Cheat-sheet to learn all basic concept at last minute?

JavaScript includes following categories of operators.

Arithmetic Operators

Comparison Operators

Logical Operators

Assignment Operators

Conditional Operators

Arithmetic Operators

Arithmetic operators are used to perform mathematical operations between numeric operands.

Operator	Description
+	Adds two numeric operands.
-	Subtract right operand from left operand
*	Multiply two numeric operands.
/	Divide left operand by right operand.
%	Modulus operator. Returns remainder of two operands.
++	Increment operator. Increase operand value by one.
--	Decrement operator. Decrease value by one.

Example: Arithmetic Operator

var x = 5, y = 10, z = 15;

x + y; //returns 15

y - x; //returns 5

x * y; //returns 50

y / x; //returns 2

x % 2; //returns 1

x++; //returns 6

x--; //returns 4

Comparison Operators

JavaScript language includes operators that compare two operands and return Boolean value true or false.

Operators	Description
==	Compares the equality of two operands without considering type.
===	Compares equality of two operands with type.
!=	Compares inequality of two operands.
>	Checks whether left side value is greater than right side value. If yes then returns true otherwise false.
<	Checks whether left operand is less than right operand. If yes then returns true otherwise false.
>=	Checks whether left operand is greater than or equal to right operand. If yes then returns true otherwise false.
<=	Checks whether left operand is less than or equal to right operand. If yes then returns true otherwise false.

Example: Comparison Operators

var a = 5, b = 10, c = "5";
var x = a;

a == c; // returns true

a === c; // returns false

a == x; // returns true

a != b; // returns true

a > b; // returns false

a < b; // returns true

a >= b; // returns false

a <= b; // returns true

a >= c; // returns true

a <= c; // returns true

Logical Operators

Logical operators are used to combine two or more conditions. JavaScript includes following logical operators.

Operator	Description
&&	&& is known as AND operator. It checks whether two operands are non-zero (0, false, undefined, null or "" are considered as zero), if yes then returns 1 otherwise 0.
\|\|	\|\| is known as OR operator. It checks whether any one of the two operands is non-zero (0, false, undefined, null or "" is considered as zero).
!	! is known as NOT operator. It reverses the boolean result of the operand (or condition)

Example: Logical Operators

var a = 5, b = 10;

(a != b) && (a < b); // returns true

(a > b) || (a == b); // returns false

(a < b) || (a == b); // returns true

!(a < b); // returns false

!(a > b); // returns true

Assignment Operators

JavaScript includes assignment operators to assign values to variables with less key strokes.

Assignment operators	Description
=	Assigns right operand value to left operand.
+=	Sums up left and right operand values and assign the result to the left operand.
-=	Subtract right operand value from left operand value and assign the result to the left operand.
*=	Multiply left and right operand values and assign the result to the left operand.
/=	Divide left operand value by right operand value and assign the result to the left operand.
%=	Get the modulus of left operand divide by right operand and assign resulted modulus to the left operand.

Example: Assignment operators 

var x = 5, y = 10, z = 15;

x = y; //x would be 10

x += 1; //x would be 6

x -= 1; //x would be 4

x *= 5; //x would be 25

x /= 5; //x would be 1

x %= 2; //x would be 1

Ternary Operator

JavaScript includes special operator called ternary operator :? that assigns a value to a variable based on some condition. This is like short form of if-else condition.

Syntax:

<condition> ? <value1> : <value2>;

Example: Ternary operator 

var a = 10, b = 5;

var c = a > b? a : b; // value of c would be 10
var d = a > b? b : a; // value of d would be 5

Some examples below
test.html

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript">

//it is valid only for 10 days

</script>

</head>

<body>



</body>

<script src="test.js"></script>

</html>
test.js

/*

document.write("This is an external js2");

document.getElementById('th').innerHTML = "This is a para";

*/

//Assignemnt and printing

var a1 = 45;

var a11=5;

var a2 = "This is me";

document.write(a1+a11," ");

document.write(a1, a11," ");

console.log("This is console");

//console.log is used for debugging purposes

//Alert Example

var age = prompt("Tell me your age");

alert("Your age is ", age);

//Arithmetic Operators

document.write("5 + 9 = ", 5+9," ");

document.write("5 - 9 = ", 5-9," ");

document.write("5 * 9 = ", 5*9," ");

document.write("5 / 9 = ", 5/9," ");

document.write("5 % 9 = ", 5%9," ");

//Split bill in number of people

var foodcost = prompt("What is the total amount");

var no = prompt("No of people");

document.write("The total cost of food was ", foodcost, " ");

document.write("Each one of you has to pay ", (foodcost/no).toFixed(2)," ");

//math function

document.write("2^9 = ", Math.pow(2,9)," " );

document.write("abs(-34) = ", Math.abs(-34)," ");

document.write("sqrt(36) = ", Math.sqrt(36)," ");

// String Functions

var str1 = "AnswerBeforeQuestion";

document.write(str1.length," " );

document.write(str1.indexOf("Before")," " );

document.write(str1.toLowerCase()," " );

// Relational Operators : ==, !=, <, >, >=

// Logical Operators : &&, ||

//if else--conditional

var age = prompt("What is your age");

if (age<20 && age>=10)

{

 document.write("You go to the school or college");

}

else if(age<10 && age>3)

{

 document.write("You also go to the school");

}

else

{

 document.write("Do whatever you want");

}

//Switch case

var age = prompt("What is your age?");

switch(age)

{

 case "22":

 document.write("22 years old.. okay");

 break;

 case "21":

 document.write("21 years old.. okay");

 break;



 case "12":

 document.write("12 years old.. okay");

 break;



 default:

 document.write("default years old.. okay");

 break;

}

//Looping

//While loop

var i =1;

while(i<=100)

{

 document.write(i," ");

 i++;

}

//do while loop

var i =101;

do

{

 document.write(i," ");

 i++;

} while(i<=100)

//for loop

for (var i = 0; i < 2; i++) {

 document.write(i," ");

}

//list

var books = ["Harry potter", "ncert", "ctci", 65];

document.write(books[3]);

//functions

function answerBeforeQuestion(){

 document.write("We are calling harry");

 console.log("We have executed answerBeforeQuestion function");

}

answerBeforeQuestion();

Any Web References to learn JavaScript?

https://www.w3schools.com/js/

https://www.javascript.com/

https://www.tutorialsteacher.com/javascript/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/

https://javascript.info/

You tube channel to learn JavaScript?

https://www.youtube.com/watch?v=onbBV0uFVpo&t=5s https://www.youtube.com/watch?v=hKB-YGF14SY https://www.youtube.com/watch?v=Qqx_wzMmFeA https://www.youtube.com/watchv=uDwSnnhl1Ng&list=PLsyeobzWxl7qtP8Lo9TReqUMkiOp446cV

That's it for today JavaScript is too wast which is impossible to cover in 1 blog, hope it is useful at beginner level after reading this you will get basic idea how JavaScript works and yo can move to any JavaScript framework.

Thanking you, Keep learning what you don't know as ABQ is all for solving your uncaught questions which you might come across in future

Comment me if you want blogs on any specific topic!!

Ticker

Learn javascript | javascript tutorial for beginners | how to start with javascript

JavaScript

Why should i learn JavaScript?

Where i can use JavaScript?

Arithmetic Operators

Comparison Operators

Logical Operators

Assignment Operators

Ternary Operator

Any Web References to learn JavaScript?

You tube channel to learn JavaScript?

Post a Comment

4 Comments

Popular Posts