noreply@blogger.com (Ayesha) — Wed, 4 Apr 2018 03:28:00 -0700

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 :

Rhino, managed by the Mozilla Foundation, open source, developed entirely in Java
SpiderMonkey, the first JavaScript engine, which powered Netscape Navigator and today powers Firefox
V8 - open source, developed by Google in Denmark, part of Google Chrome
JavaScriptCore - open source, marketed as Nitro and developed by Apple for Safari
KJS - KDE's ECMAScript/JavaScript engine originally developed by Harri Porten for the KDE project's Konqueror web browser
Chakra (JScript9), for Internet Explorer [17][18]
Chakra (JavaScript) for Microsoft Edge
Nashorn, open source as part of OpenJDK, written by Oracle Java Languages and Tool Group[19]
Juce, a C++ application framework, contains a custom embedded interpreter using part of JavaScript's syntax.
JerryScript, is an ultra-lightweight JavaScript engine for the Internet of Things.
Jsish, a JavaScript engine with type-checking modelled after Tcl.

(Source Wikipedia)

JavaScript Syntax

The syntax of JavaScript is the set of rules that define a correctly structured JavaScript program

Source

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

Uncaught TypeError

noreply@blogger.com (Ayesha) — Sat, 24 Mar 2018 04:31:00 -0700

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 from top to bottom ,when we place our script in <head>tag our script execute first then the other elements are loaded and our script trying to access the element id before it has render by the DOM in result it throw the null error,As we want that our label shows on page load with values which we assign to our four variables so we write our script after it first DOM load our all labels the execute the script .