Tuesday, 3 November 2020

JavaScript Basics and Importance of JavaScript

Introduction : 

JavaScript is world's most well liked programming language for front-end development. It adds interactivity to the web site. For example, when user clicks on button or any element on web page, you want some output. This includes searching, sorting, alert, redirection, showing details etc. That thing can't be done by HTML and CSS. 

Here, JavaScript comes into the picture. 

JavaScript is a scripting language


Programming language vs Scripting language : 

Primary difference between scripting language and programming language is in their execution. If you are somewhat familiar with programming then you may know that when we write code (code that is human readable, ex. C, C++, Python, JavaScript etc.), it is converted into machine code (code that is machine readable, ex. binary code (00000101)) internally because computers understand only binary. That conversion is done by compiler or interpreter. Compiler links different code files into programs that gives .exe file (executable file) and finally program runs. 

Programming languages use a compiler to convert human readable code into machine code while scripting languages use an interpreter. 


Interpreter vs Compiler 

Interpreter translates just one line of code into machine code at a time. Compiler first scans entire program and then coverts whole of it into machine code. 

An Interpreter doesn't generate any intermediary code therefore, it's memory efficient. A Compiler always generate an intermediary object code therefore, memory inefficient.

Programming language like C, C++, Java, C# use compilers while Python, JavaScript, Ruby etc. use interpreters. 

JavaScript is open source and cross-platform language (enables developer to develop cross-platform software which can be run on all or most systems with little or no modification.)


Top companies that use JavaScript 

Now, 

Some of the great organizations that uses JavaScript are..

1. Microsoft 

You might be not aware about it but Microsoft relies on JavaScript quite a lot. 

Now, they have accepted NodeJS a whole lot else. They utterly support NodeJS on Azure cloud platform.

2. Netflix 

Like everyone, initially Netflix was using Java for everything. They too ran into trouble with time required to develop, complexity of code and it's size. 

Over time, they switch from their traditional way to cloud and started using JavaScript. That helped to speed up the things and the rest is history!

Today, large portion of Netflix is running with JavaScript. 

3. Google 

You're probably aware that Google uses JavaScript. It's kind of hard to miss. 

Yes, JavaScript is everywhere. Google's search results springs up as user types with JavaScript. Gmail web client is also powered by JavaScript. Google docs is too rely on JavaScript. 

4. Facebook 

If you want to predict how much Facebook is involved in JavaScript development, try to disable JavaScript in your web browser and use Facebook. You'll be unable to even login! 

5. Uber 

Uber need to handle bunch of data in real time. Millions of requests of customer, track driver's  location, track rider's location. It needs to optimally sort data and match rider as fast as possible. 

All this stuff is handled by JavaScript strength. 

Another Examples are Instagram, Reddit, LinkedIn, PayPal, eBay, Walmart, Slack, Airbnb, Stack, Vox media etc. 

These are only few examples. but there are a lot more. Major of the web runs on JavaScript. It would be a bit harder to find a company or a software that doesn't use JS at all. 

Now, we have understood usage and importance of it, Let's thrive into it. 


Editors to write JavaScript Code : 

You can use any editor to run JS code. Sublime Text, Brackets, Atom, Comodo Edit, Vim, Visual Studio Code or even Notepad++ or Notepad. You just need to give extension .js while saving the file. 


JavaScript Syntax : 

Syntax in programming means set of rules that determines how program is constructed. For example, if you know C language, you may know that how to declare variable, how to write loops etc. in C. 

Declare variable in JavaScript : 

var a  

var a, b 

var a,b,c,d 

Assign values to variables 

var a = 5                 // assign value at the time of initialization 

var a 

a = 5                     //  first initialize variable then assign value 

var a=5, b=7;        // assign value at the time of initialization (more than one variable in single line)

var a, b 

a=5; b=7              // first initialize variable then assign value  (more than one variable in single line)


Perform Operations on Variables : 

var e = a + b; 

var f = a/b; 


JavaScript Values  :

It defines two types of values : 

  • Fixed values (Literals and Constants)
  • Variable values (Variables)

Before 2015, JavaScript had only var. After release of ES6 or ECMAScript 2015, second major revision of JS, let and const were introduced. 

These two keywords provides Block scoped variables and constants in JS. Before ES6, JS had only two scopes : Global Scope and Functional Scope. 


Comments : 

Comments are used in programming language for explanation of code i.e. what's this code for? 

They are ignored by compilers and interpreters. 

Single-line comments : 

Start with // and end with //

Example : 

// declare var x and assign value  = 10 

var x =10 

Multi-line comments : 

Start with /* and end with */

/*The below code will declare a varible x and 

assign value of 10 to it in web page */ 

var x = 10 


Identifiers : 

Identifiers are names that is given to the variables, functions, keywords and labels. 

First character must be a letter, an underscore (_), or a dollar sign ($).

Example : 

var abc,              // correct 

var _ab             // correct 

var $ab             // correct 

var a2             // correct 

var 2a             // Incorrect 

Moreover, you should not use any JS keyword as variable name 

Example, 

var boolean         // Incorrect 

var while             // Incorrect 


Hyphens: 

Hyphens are not allowed as identifier because it is reserved for subtractions. 

Example:

First-name, last-name         // incorrect 


Character Set : 

JS follows Unicode character set. 

Unicode includes almost all characters, punctuations, and symbols in the world. 

To make understanding deeper, Take a look at Unicode character set.  


Case Sensitivity : 

JavaScript is case-sensitive. It means Value and value convey different meanings in JS. This should be taken care while declaring variables, function names etc. 

Example : 

try to execute following code : 

var Value ; 

value = 6;

alert(Value)

you will get undefined in alert box. This is because we have assigned 6 to the value, Value is still undefined. 


Semicolons are optional. 

JavaScript statements are generally followed by semicolons, like C,C++  and Java to sustain compatibility. However, you can omit it if each statement is on separate line. 

Example, 

var a = "John"

var b = "Joy"

However, when formatted in single line, you must use semicolon. 

Example : 

var a = "John";  var b ="Joy"


Placement in HTML file : 

There are four ways : 

  • Script in <head> ... </head> section. 
  • Script in <body> ...</body> section. 
  • Script in <body> ...</body> section and <head> ... </head> sections. 
  • Script in external file and include in <head> ... </head> section. 


If you are writing JavaScript code in body tag, insert it just before the body tag ends. 

Because HTML document executes from top to bottom. If you write it at starting of body tag or in between, your script run before your HTML document body is not loaded fully. So you will get error in console.

If you are writing JavaScript code in external file, use src attribute to specify file name in html document. 

E. g. <script src="MyScript.js></script>


Data Types : 

It has many data types like number, string, objects etc. 

Concept of Data Types

Data type is a primitive concept in programming. 

Example: 

var a = 100 + "John". 

Well, it doesn't make sense to add 100 to a string "John". 

Output will be: 

100john 

It means JS treat it as "100" + "John"

Note : while adding a number and a string, JS treats number as a string. 

Execution will be from left to right 

Example :

 var a = 100 + "John".             // Output :  100John 

var a = "John" + 100               // Output :  John100

var a = 100 + 20 + "John"       // Output : 120John

var a = "John" +100 + 20       // Output : John10020

 as first operand is string, all operand is treated as string

JavaScript types are dynamic. 

Same variable can be used to hold different data type. 

Example : 

var a                             // a is undefined. 

var a =10                     // a is number

var a = "John"             // a is string. 


Strings 

Strings can be written in single quotes or double quotes. 

Example : 

var product1= "iPad"

var product2 = 'refrigerator'

You can use quotes inside quotes like this :

var statement1 = "My name is 'Bella' ";        

//Single quotes inside double quotes

var statement2 = 'My name is "Bella" ';      

//Double quotes inside single quotes

var statement3 = "My name is "Bella" "   //Incorrect

This is Incorrect , because computer consider quotes starting before Bella as closing quotes of quotes at the beginning of statement.        

 var statement4 = 'My name is 'Bella' '    //Incorrect 

This is too incorrect due to above reason.        

 

Numbers 

Numbers can be written with or without decimals.

Example 

var n = 100.00            // With decimal 

var n =100                // Without decimal 

Extra large numbers can be written with scientific notation 

Example 

var y = 123e5                       // 12300000

var z = 123e-5                      //0.00123


Booleans 

Booleans are used for conditional testing.

Example 

var a = 8

var b = 8

var c = 8.5

a = = b         // returns true

a = = c        // returns false


Arrays : 

Arrays are written with square brackets  

Example : 

var array= ["Mobile Phone", "iPad", "Laptop", 6, 2.5]


Objects 

Objects are written with curly braces 

Example 

var book  = { title : "Two States ", author : "Chetan Bhagat" , genre : "Fiction" , publisher : "Rupa publication Pvt. Ltd. " }

Here book is the Object.

It has four properties : title, author, genre, publisher


typeof operator 

Used to determine type of JS variable. 

Example. 

typeof  "Bella"   // returns string

typeof ""            // returns string

typeof 324        // returns number 

typeof 3.24       //returns number 


Undefined 

variable without value has the value undefined 

Example : 

var product

typeof product                //returns undefined 

variable can be emptied by assigning value undefined. Here type will also be undefined 

example 

var product = undefined         // value is undefined. 

typeof product                         // type is undefined 


Empty values 

var product = ""                  // here value is "" 

typeof product                  // returns string

Note : empty value is completely unrelated with undefined. It's totally different. 


Null 

In JS, Null means nothing. 

Surprisingly, data type of null in JS is an object. 

Example : 

var product ; 

product = null 

typeof product         // returns object 

Note: you can consider it as bug in JS that typeof null is an object. Ideally, It should be null. 


Undefined Vs Null 

They are same in value but different in type. 

Example :

var a = 100            // a is number

var a = "100"        // a is string

here, a and b has the same value but their data type is different. 

same way is undefined and null. 

typeof undefined         // returns undefined

typeof null                 // returns object 


Data type of Array 

 typeof operator returns object for an array because in JavaScript arrays are objects 

Example : 

var array = [4,5,12,78.36]

typeof array                                 // returns object 


These are some basics of JS. We will dig deeper in JavaScript concepts Next time. 

Stay tuned!

Thanks. 






 

No comments:

Post a Comment