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