Skip to main content
JS















JavaScript In detail

Introduction

I am trying to write a article series which start from begineer level and slowly slowly move towards professional level,I will try to cover each and every phase of JavaScript programming with possible errors when we code JavaScript and how debug that code also try to cover how JavaScript use with ASP.Net and MVC framework

Background

Now a days JavaScript become more and more famous language due to it's recent frameworks like Angular,Backbone,React etc. JavaScript frameworks are famous among developers for their efficiency and cost (opensource). 
Angular is one of the favorite JavaScript framework for developing single page application(SPA) and it is powered by google.Many developers adapt Angular for their application as well as Angular is highly preferred for hybrid application.
But before start work on framework ,you have to take a look on JavaScript,I also tell you one thing that JavaScript itself a very useful language and at the end of my tutorial you assume that JavaScript much useful for you in your projects 
I start my tutorial from beginner and we travel different "Vila of JavaScript",I try to make tutorial with scenario my all tutorial series around a project in which we cover all areas of JavaScript language in depth 

Introduction to JavaScript 

JavaScript is a programming language which require engine for interpreting program and runing it,so we can say that JavaScript compile on runtime.
Most Common JavaScript Engines are :

JavaScript Syntax

The syntax of JavaScript is the set of rules that define a correctly structured JavaScript program
JavaScript syntax is case sensitive like C , Java ,C# . It's means that CodeMug and codemug are not equal or CODEMUG not equal to codemug or CodeMug.
JavaScript program is a group of statements.If you familiar with programming in C# or C then you know the term statement terminator which separate one statement from other so at the end of every statement we use " ; " for separate one statement from other so we can say that every JavaScript statement end with semicolon or new line.
 <html><head><title>CodingMug:First Vila of JavaScript</title><script>
     alert("Welcome to CodeMug")
     alert("We start JavaScript")
   </script></head>
</html>
First we use <script> tag that tell browser we use script (like JavaScript> within our html document and within these <script> tag we write our code of JavaScript .
Our code simply show two dialog boxes when web page is load with the help of JavaScript method "alert".
Two statement written in two different line ,we are not using semi colon here because JavaScript have ASI (Automatic Semi Colon Insertion) process but in some cases we have to use semi colon so it is good for you to write each statement in new line and use semi colon both together.
<html><head><title>CodeMug:First Vila of JavaScript</title><script>
     alert("Welcome to CodeMug");
     alert("We start JavaScript");
   </script></head>
</html>

What is Variable?

For beginner this question is very important but for intermediate level or professional level programmer or you have just how know about programming then ,I am sure you must know about variable but for beginner the definition of variable is
         "Variable are container in which we store values ,they are also changeable ,We use
                variable for storing a value in memory for later use in program "
Let discuss variable in detail and take example from real world,variable are changeable so school class is best example of this where students are values and class is variable after the pass out of old student ,new student become the value of class,like this variables are the entity which change its value at the execution of the program.
In JavaScript we declare variable using the keyword var ,if you declare a variable without assigning it ,its type is undefined by dafault,But the important thing which you always have to remember that if you declare variable without var keyword ,it become implicit global.
<html><head><title>CodeMug:First Vila of JavaScript::Variables</title><script>var variable_one;
        alert(variable_one);
     </script></head></html>
So when we run our program in browser the dialogue box shows the message undefined ,it means you have not assign any value to variable_one.We assing a string literal to variable_one.
   String is a plain text,which is wrapped by single quote ' ' or with double quote " ".
So we assigning value which is string to variable like this 
 <HTML><head><title>CodingMug::String Literal</title><script>
         variable_one = "This is string literal";
         alert(variable_one);
      </script></head>
</HTML>
Now refresh the page in browser and notice that dialogue box shows the message "This is string".

Rules for naming variable in JavaScript

  • Variable name can start with upper or lower case letter of alphabets

      For e.g:
       var person
       var PERSON
       var pERSON
       var PerSon

  •    Variable name can start with ( _ ) and ( $ ) symbol
      For e.g:
      var _Person
      var $Person
      var _PeRsOn
      var $PerSoN

  • Variable contain numbers but not start with numbers
    For e.g:
     var Person123
     var pErsOn 123

  • Variables are case sensitive 
      Person not equal to PERSON or person
The naming convention of variable usually done in two ways,Camel Case which start with lowercase letter and then each word is capital like uPERSON and the other use of underscore like _person or new_person on the other way we also use person or PERSON but the above two cases give your code professional look.


Now it's time to play more with variables using variables with html tags like label etc etc,so let start

<html><head><title>CodeMug:First Vila of JavaScript::Variables</title></head><body><label id="label_one" style="color:blue;"></label><label id="label_two" style="color:blue;"></label><label id="label_three" style="color:blue;"></label><label id="label_four" style="color:blue;"></label>
          <script>
             var variable_one = 'Greeting  ';
             var variable_two = "HIE!";
             var variable_three = "from";
             var variable_four = "CodingMug";
             document.getElementById("label_one").innerHTML = variable_one;
             document.getElementById("label_two").innerHTML = variable_two;
             document.getElementById("label_three").innerHTML = variable_three;
             document.getElementById("label_four").innerHTML = variable_four;
          </script></body></html>
Now here we declare four variable naming variable_one,varible_two,variable_three,variable_four and assign them a values "Greeting","HIE",''from","CodingMug" respectively ,after that we use JavaScript method document.getElementById() which returns the element of specific id and we use HTML property name innerHTML ,every element have innerHTML property which tell you what is between the opening and closing tag of HTML element.
Take a look of our code if we evaluate our line of code which is
    document.getElementById("label_one").innerHTML = a;
In beginning of our statement we use document.GetElementById because before using innerHTML we must give the element which we want to change so here we use getElementById which return the specific element with id which we write after document.getElementById so come to the code 
document.getElementById("label_one").innerHtML = variable_one  means that fetch the element with id "label_one" change its innHTML to value of variable_one,same logic for other three line
Now after above example we play more with string and check how we can join multiple strings together ,In JavaScript we join two or more then two strings by using "+" concatenate operator.In our last example we have four labels what happen if we want to show our four string literal in single html label .
<HTML><head><title>CodeMug:First Vila of JavaScript::Concatenation</title></head><body><label id="label_concate" style="color:blue;"></label><script>var variable_one = 'Greeting  ';
         var variable_two = "HIE!";
         var variable_three = "from";
         var variable_four = "CodingMug";
         var concating_var = variable_one + " " + variable_two + " " +  variable_three + " "  + variable_four;
         document.getElementById("label_concate").innerHTML = concating_var;

         </script></body>
</HTML>
So first we assign string literal to our four variables and by using concatenation operator in among these variable we form a single statement and then show it in a single label we use " " for making space between our variables ,we also do the same thing in another way like this
<HTML><head><title>CodeMug:First Vila of JavaScript::Concatenation</title></head><body><label id="label_concate" style="color:blue;"></label><script>var variable_one = 'Greeting  ';
         variable_one += " HIE!";
         variable_one += " from";
         variable_one += " CodingMug";
         document.getElementById("label_concate").innerHTML = variable_one;

         </script></body>
</HTML>
We take only single variable here and concate it with "+=",the result is same ,now move forward and evaluate more the fun of concatenation let suppose we have a number and a string like we have 5 as number and ABC is our string
Now we concatenate number literal with string literal
<HTML><head><title>CodeMug:First Vila of JavaScript::Concatenate String Literal With Number Literal</title></head><body><label id="label_concate" style="color:blue;"></label><script>var variable_one = 5;
         var variable_two = "ABC";
         var concating_var = variable_one + " " + variable_two ;
         document.getElementById("label_concate").innerHTML = concating_var;

         </script></body>
</HTML>
Or like this
<HTML><head><title>CodeMug:First Vila of JavaScript::Concatenate String Literal With Number Literal</title></head><body><label id="label_concate" style="color:blue;"></label><script>var variable_one = 5;
         variable_one += " ABC";
        
         document.getElementById("label_concate").innerHTML = variable_one;

         </script></body>
</HTML>
Now in above both example we use " " with our string and number without single or double quote shows number then concatenation between them give result 5 ABC,Dive more in concatenation
<HTML><head><title>CodeMug:First Vila of JavaScript::Concatenate String Literal With Number Literal</title></head><body><label id="label_concate" style="color:blue;"></label><script>var variable_one = 5;
          var variable_two = "5";
          var concatenate_stringwithnumber = variable_one + variable_two;
         document.getElementById("label_concate").innerHTML = concatenate_stringwithnumber;

         </script></body>
</HTML>
The output of above example is "55" , 5 number and "5" is string literal because it is with double quote so when we use concatenate operator between them our result is 55 ,but on the other way + also use for arithmetic operation if we remove double quote from our variable_two so our result will be 10 because without double quote interpreter treat 5 as a number so our concatenate operator(+) working as arithmetic operator for addition operation.
The another way to concate string in JavaScript is concate string using concat() method like this
<HTML><head><title>CodeMug:First Vila of JavaScript::Concatenate String Literal With Number Literal</title></head><body><label id="label_concate" style="color:blue;"></label><script>var variable_one = "String Concate";
          var variable_two = " using concat method";
          var variable_three = " another way to concate in JavaScript";
          var concatenate_stringwithnumber = variable_one.concat(variable_two,variable_three)
         document.getElementById("label_concate").innerHTML = concatenate_stringwithnumber;

         </script></body>
</HTML>
Functionally concatenate operator + and concate() method are mostly same but performance wise concatenate operator + better then concat() method.
Continue in next post

Comments

Post a Comment

Popular posts from this blog

Uncaught TypeError

  Now from beginning of the tutorial series we notice that we write our JavaScript in head section on our html page but what happen in this that we write our JavaScript within our body tag and after our <label> </label>tags ,what happen if we use JavaScript within head lets take look   refreshing our page in browser and we see blank screen ,now we have to check the error so if you are using google chrome  in windows use Ctrl+Shift+J and on Mac Cmd+Option+J ,console screen open on your browser which show an error like this Uncaught TypeError:Cannot set property 'innerHTML' of null at (your code line number) click on that line Now this is time to understand what going behind the scene of our code When we write JavaScript code inside the <script> tag  which is present in <head>section of our HTML file,our JavaScript execute by our browser rendering engine even before the whole DOM is loaded because it load our whole DOM ...
Post a Comment
Read more