codinggiri: JavaScript Dirty Tutorial

A quick intorduction to arrays in JavaScript - Part 1

Unknown 0 JavaScript Dirty Tutorial Wednesday, April 16, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBPTbHbHHBJV5U3ZgrmcnoYATBwtlW-kqSWxpYbDJ_Mf16ZfPgAupbOO_5PnsgfBJjSSkx63jKaUnLw8iaqSECSZjxV1xAr8j4jwAzYUYojsuP_2njAoa9itjxtaXeLscqIIUtFePrrAu/s1600/Snap+2014-04-16+at+23.36.31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBPTbHbHHBJV5U3ZgrmcnoYATBwtlW-kqSWxpYbDJ_Mf16ZfPgAupbOO_5PnsgfBJjSSkx63jKaUnLw8iaqSECSZjxV1xAr8j4jwAzYUYojsuP_2njAoa9itjxtaXeLscqIIUtFePrrAu/s1600/Snap+2014-04-16+at+23.36.31.png" /></a></div>
<br />
what's up guys welcome to this blog once again. Today we will learn about arrays in JavaScript
, You know how to create variables and assign there value you also know that there ara data types like 
integer , float , string etc. I mean with one variable you can store data of similar data type BUT what if you want to
store data of different data type in one place ? In that situation Array comes in action.
Array is similar to a variable in which you can store / hold any type of data to clear your doubts let me give you an example
 
<br />
<blockquote>
As you already know that a variable an store one piece of data at a time and when the value of that variable is changed
the previous value is lost like take the example below:- 
</blockquote>
<pre class="prettyprint lang-js">	var myVar = 10; // The value of variable myVar is 10 now
	alert(myVar) //This will open a alert box with value 10
	/*---------------------------------------------
	*
	But what if i again assign the value of
	variable myVar to 22 and use the alert
	method to display the value of variable myVar?
	Yes you are thinking right the new value on
	alert box will be 22 and the previous value 10
	will be lost.
	*
	-----------------------------------------------*/
	
	var myVar = 22; // The value is changed now
	alert(myVar) // Previous value is lost and we have now 22
	
</pre>
<blockquote>
The main difference between a variable and an array is , A variable can hold only one piece of data at a time
but an array can store more than  one piece of data at a same time i mean you can store the both value 10 and 22
into an array .
</blockquote>
<h3>
Creating an array in JavaScript</h3>
Let me remind you once again that JavaScript is a case sensitive language and if you use array() rather than
Array() , the code will not work <br />
so , to create an array you have to declare the variable first and then tell JavaScript that you want this variable as 
and Array.
<br />
<pre class="prettyprint lang-js">	var myArray;
	myArray = new Array();
	/*-----------------------------------
	This was method of declaring an Array 
	now if you want to store data into 
	your new Array you have to follow this
	--------------------------------------*/
	
	var myArray = new Array(1,2,3,4,5,6);
	 /*--------------------------------------
	 Just put your data between parentheses 
	 separated by comma(,) and you are done 
	 ----------------------------------------*/
	 
	 /*---------------------------------------
	 you can put strings also , not only numbers
	 -----------------------------------------*/
	 
	 var myArray = new Array("Ved", "love" , "Code");
	 
	 /*-----------------------------------------
	 Even you can mix the type of data in an
	 Array
	 -------------------------------------------*/
	 
	 var myArray = new Array("Hello","ved",22, null);
</pre>
<h3>
Indexing of an JavaScript Array</h3>
<blockquote>
Always remember that we humans start counting from one(1) not zero(0) but computers are 
not like that , computers start counting from zero(0) not (1).
that's means first piece of data will store at position 0,
second piece of data will store at position 1,
third piece of data will store at position 2 and so on
 for example lets take the 
example of our previous Array
</blockquote>
<pre class="prettyprint lang-js">	var myArray  new Array("Hello","ved",22,"code")
	/*-----------------------------------------
	If we start counting ( like humans ) then 
	we will index the items of this Array like
	
	
	*-*-*-*-*-*-*-*-
	| Hello - 1st, |
	* ved - 2nd,   *
	| 22- 3rd,     |
	* code- 4th    *
	*-*-*-*-*-*-*-*-
	
	but on other side computer will index this 
	array as follow
	
	
	*-*-*-*-*-*-*-*-*-*-
	| Hello - 0(zero), |
	* ved - 1st,       *
	| 22 - 2nd,        |
	* code - 3rd,      *
	*-*-*-*-*-*-*-*-*-*-
	
	
	-------------------------------------------*/
</pre>
<h3>
Adding data into an JavaScript Array</h3>
It is not necessary to pre-store data in a JavaScript Array, That's mean you can create an Empty Array 
and later then add data to that Array with indexing like thale the example above
<br />
<pre class="prettyprint lang-js">	var myArray = new Array(); //we create an Emplt array here
	//now we will add data to this Array with Indexing
	myArray[0] = "I";
	myArray[1] = "love";
	myArray[2] = "coding";
	myArray[3] = 24;
	myArray[4] = "X";
	myArray[5] = 7;
	
	/*
	---------------------------------------------------------
	after that to check that the data is stored in myArray or
	not you can do that with alert(myArray) and it will display
	the values stored in myArray
	-----------------------------------------------------------
	*/
	
	
</pre>
<h3>
Using .push method to add data into an Array</h3>
You can also insert/add data into an JavaScript Array with .push method
if our Array is an Empty Array then the Data will store at position Zero otherwise
if there are 10 items in your Array then your new item will be stored at position 
ten(remember that computer start counting from zero)
have a look at the Example Below we will use the .push method with our 
previous Array
<br />
<pre class="prettyprint lang-js">	var myArray = new Array(); //we create an Emplt array here
	//now we will add data to this Array with Indexing
	myArray[0] = "I";
	myArray[1] = "love";
	myArray[2] = "coding";
	myArray[3] = 24;
	myArray[4] = "X";
	myArray[5] = 7;
    myArray.push("hello",34); //The data will be added 
    alert(myArray); // Display the result
</pre>
All right folks i think this is enough for this post , in next post we will learn more on Arrays
in JavaScript like and some other feautures of it like push , pop , slice , shift , sort etc.
Thanks for reading guys please comment below if you facing any problem :)
</div>

A quick intorduction to arrays in JavaScript - Part 1

what's up guys welcome to this blog once again. Today we will learn about arrays in JavaScript , You know how to create variables an...

JavaScript Exercise Session 1st - Solutions with explanation

Unknown 0 JavaScript Dirty Tutorial Saturday, April 12, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqROCxOEmThEgsiB81DvFdPZdqipqqnTzXurqAxNv2JV7AtjAE60lEfSC9oZg_p3iIVgH4nIqO-D3YPlTOz0nvXvMWqu8M3b4Pv8jdmHSxD6le8dymXHdoxdc7xaij1-5A3uYRXH-7xMfH/s1600/Snap+2014-04-12+at+10.03.50.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqROCxOEmThEgsiB81DvFdPZdqipqqnTzXurqAxNv2JV7AtjAE60lEfSC9oZg_p3iIVgH4nIqO-D3YPlTOz0nvXvMWqu8M3b4Pv8jdmHSxD6le8dymXHdoxdc7xaij1-5A3uYRXH-7xMfH/s1600/Snap+2014-04-12+at+10.03.50.png" width="289" /></a></div>
<br />
<br />
Hey there welcome once again Hope you are enjoying learning coding :) . In this post i am going to post the answer of those 5
 questions which was  posted in last blog post.
<br />
<ul>
<li>Use the console.log or alert , to Display this simple message: </li>

 <blockquote>
"Hello ! JavaScript"</blockquote>
Here is the answer<br />

<pre class="prettyprint lang-js">  console.log("Hello ! JavaScript");
 </pre>
or you can use the alert method too<br />

<pre class="prettyprint lang-js">  alert("Hello ! JavaScript");
 </pre>
<li>Take three variables a,b and c. assign some integer values to first two variables a and b. now show 
 assign (a and b) sum (+) , diffrence(-) and multiplication(*) values in to variable c </li>

 Here is the answer<br />

<pre class="prettyprint lang-js">  var a = 10; /*Assigning the value of a to 10*/
        var b = 5; /*Assigning the value of b to 5*/
        var c = a+b; /*Telling the interpreter that value of c is equal to sum of a and b */
        alert(c); /*Displaying the result */
 </pre>
Please follow the comments <br />
<li>Take a variable A, now use prompt to ask user his/her name and print a greeting message. </li>

 Here is the answer<br />

<pre class="prettyprint lang-js">  var a = prompt("What is your name: ");
  /*Take a variable a 
  then ask user to enter his/her name nad store the value entered
  by user into variable a
  */
  alert("Nice to Meet you " + a); 
  /*Now use the alert method to 
   disply the greeting message 
  */

</pre>
<li>Take a variable A and print the square value. </li>

 we will use mathematical operator to square the value<br />

<pre class="prettyprint lang-js">  
  var a = prompt("Please give me a number: ");// store the value entered by user in variable a
  a = parseFloat(a); // This may sound tricky but we will cover it later
  var b = Math.pow(a,2); // This is pow method in JS
  b = parseFloat(b); 
  alert(b);
  /*Overall this answer may bounce over from your head but don't
  you worry you will master them all soon just saty tuned 
  and read my next posts
  */
 </pre>
<li>We are going to find out the area of a rectangle so for that Take Three variables named 
 first,second and Final. use prompt to ask user to give the length and width, then store the 
 area of rectangle into third variable and finally print the area. </li>

 Here is the answer<br />

<pre class="prettyprint lang-js"> 
 var first = prompt("Please tell me the length: ");/*store value of length in variable first*/
 first = parseFloat(first); /*Now convert the entred value into float*/
 var second = prompt("Please tell me the width: ");/*store the value of width in variable second*/
 second = parseFloat(second); /*Now convert the entred value into Float*/
 var final = (first * second); /*value of final is equal to the multiplication of first and second (variables) */
 final = parseFloat(final); /*Again convert the value of final in float with parseFloat*/
 alert("The area of rectangle is " + final ); /*Finally display the result like a boss*/
 </pre>
So folks i hope you can understand the explained answers and agian if you are facing any problem feel free to comment below
 and let me know i'll surely help you out 
 <br />

</ul>
</div>

JavaScript Exercise Session 1st - Solutions with explanation

Hey there welcome once again Hope you are enjoying learning coding :) . In this post i am going to post the answer of those 5 question...

JavaScript Exercise Session 1st

Unknown 0 JavaScript Dirty Tutorial Saturday, March 29, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDu8hyphenhyphenmHWtTZl6AQ-knh4JugrPHa7HL1zpfVujtew3sEsoLqYQ9Rdb4E5Bubp6XFBQSIn-SckylNxJtIKo979s2Dma26YVZJ238fZjQZhfBYCfMia4vLROyJ6ARUA7C3zIbWJXH2EZIJIK/s1600/JavaScript-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDu8hyphenhyphenmHWtTZl6AQ-knh4JugrPHa7HL1zpfVujtew3sEsoLqYQ9Rdb4E5Bubp6XFBQSIn-SckylNxJtIKo979s2Dma26YVZJ238fZjQZhfBYCfMia4vLROyJ6ARUA7C3zIbWJXH2EZIJIK/s1600/JavaScript-logo.png" width="400" /></a></div>
<br />
Hey There ! Hope you are enjoying your Learning. Today I am going to Post 5 problem in JS so that you can solve those with JS Approch. Before starting to solve Problems Please Go through a Quick Look to basic JS Rules etc.<br />
<br />
<h3>
The Basic Syntax Rules of JS</h3>
<ol>
<li>JavaScript is Case Sensitive. Thats Means Java, JAVA and java are three diffrent things for JavaScript Interpreter</li>
<li>JavaScripts Ignore the extra whitespaces within statements</li>
<li>Each JS statement ends with a semicolon (i called them "Terminators" because they terminate the staement)</li>
</ol>
<br />
<h3>
Rules for Creating Identifires in JavaScripts</h3>
<ol>
<li>Identifires can only contain letter,numbers,the underscore and the dollor($) sign.</li>
<li>Identifires can't starts with a number. like 1337x is not legal.</li>
<li>Identifires are Case Sensitive</li>
<li>Identifires can be any lenth</li>
<li>Identifires can't be the same as represented words(KeyWords).The list of KeyWords or Reserved Words below</li>

</ol>
<br />
<blockquote>
Don't be confuse about Identifires. Identifires are the name we give to the variables , objects, functions, properties and methods like <i>var ved = 5;</i>. Here ved is the name i gave to the variable so it's (ved) is an Identifire </blockquote>
<br />
<h3>
Using Comments in JavaScript</h3>
Comments are very Important part of any programming language.Just imagine that you are a programmer(don't just imagine, feel it :) ) , You wrote some lines of code of any software or website and you coded it very rough so that only you are able to understand the code easily , for others it will be pain in ass to understand the code but if you commented your code nicely it will not only help the other developers to understand the code but it will help you too. So it's always a good desition to comment your code<br />
Well in JS there are two types of comments<br />
<ol>
<li>Single line comment</li>

<pre class="prettyprint lang-js">
 //This is a single line of comment in JavaScript
</pre>
<li>Multi line comment</li>

<pre class="prettyprint lang-js"> 
 /*
  This is a multi Line Comment
  */
</pre>
</ol>
<br />
<h3>
JavaScript Data Types</h3>
Programming is more like playing/manuplating with data (we input data and we get data stuff) and there are Data Type to perform diffrent kind of manuplation. Let's Have a Quick look to it.<br />
<br />
JavaScript provide three primitive(again don't confused iwth "primitive" we will cover it later )<br />
<ol>
<li>The number Data Type</li>
Number data type can be used to represent either integers or decimal values. Integers are whole numbers like 45,98,64,6,8, etc. and decimal values are number that can have one or more decimal digits. like 34.5, 56.8, etc<br />
<li>The string Data Type</li>
To represent string data , you code the srtring within single or double quotation marks like 
		
	<br />
<li>The boolean data Type</li>
To represent Boolean data you code either the word "true" or "false"<br />

</ol>
<br />
<h3>
Excercises:-</h3>
There are 5 question in this series. Please don't cheat if you really want to be a good developer.(I will Post the Solution with code and description so that you can have a better understanding of Js and once again Please don't Cheat :) <br />
<ol>
	
<li>Use the console.log or alert , to Display this simple message: <br />
		<blockquote>
"Hello ! JavaScript"</blockquote>
</li>

<li>Take three variables a,b and c. assign some integer values to first two variables a nd b. now show assign (a and b) sum (+) , diffrence(-) and multiplication(*) values in to variable c
		<br />
		<blockquote>
HINT: use mathematical operators and use <i>console.log</i> or <i>alert</i> to display outputs</blockquote>
</li>
<br />
	
<li>Take a variable A, now use <i>prompt</i> to ask  user his/her name and print a greeting message.
		<br />
		<blockquote>
HINT:- You have to store the value of what user will input into the variable A. Later then you can use console.log or alert to display the greeting message </blockquote>
</li>
<br />
	
<li>Take a variable A and print the square value.
		<br />
		<blockquote>
HINT:- Well use your comman sence here :p .</blockquote>
</li>
<br />
<li>
We are going to find out the area of a rectangle so for that
		Take Three variables named first,second and Final.
		use <i>prompt</i> to ask user to give the length and width, then store the area of rectangle into third variable and finally print the area.
		<br />
		<blockquote>
HINT:- formula is [area of rectangle = Length x Width]</blockquote>
</li>
</ol>
<br />
Practice it and i will post the solution with code and description in next post:) </div>

JavaScript Exercise Session 1st

Hey There ! Hope you are enjoying your Learning. Today I am going to Post 5 problem in JS so that you can solve those with JS Approch. B...

JavaScript Quick and Dirty Tutorial-Part - 3 ,(Working with Variables and Data Types in JavaScript)

Unknown 0 JavaScript Dirty Tutorial Thursday, March 20, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
Hey There Guys. Welcome to the third post of this series "Quick and Dirty Introduction to JavaScript". Today we will encounter variables in JavaScript.
Please not that variables are very important part of any programming language , because programming is like playing with data and to play with data we must store it somewhere.
and we store data in variables.try to remember your high schools math's book there ere variables and constants. Yes variables in JavaScript is same like that.
we were using variables in algebra like , a=5,b=10,b=a+b etc. but in JavaSCript we can take variables as full names like<br />
<pre class="prettyprint lang-js">var first_number = 10;
var second_number = 15;
var third_number = first_number + second_number;
alert(third_number);
</pre>
Creating a Variable in JavaScript is a three way Process.
<br />
<ol>
<li>Declaring a variable</li>
<li>Giving it a unique name</li>
<li>Assign a value to your variable  </li>
</ol>
like lets take an example you want to create a new variable, for that you would type
<br />
<pre class="prettyprint">var dev = 17;
</pre>
Here var is a Keyword (don't be confused we will cover the keywords in JavaScript later ) which tells the JavaScript interpreter that dev is a unique name and 17 is it's value.<br />
<h3>
Rules you must follow while working with variables in JS</h3>
Well there are few rules in JS which you must follow like<br />
<ol>
<u>
<li>JavaScript is Case Sensitive </li>
</u>
Yes Folks JS is Case Sensitive that means ved,Ved and VED all three are different from each other <br />

<u>
<li>You must begin with a letter,$ or _</li>
</u>
That means Ved, My_Num, $My_pay, _NewYork are correct but 1india,%bills,*Jesus are not  <br />

<u>
<li>Your variable name must contain number,$,letters and _  </li>
</u>
You  can’t  use spaces or any other special characters anywhere in the variable name: fish&chips
and fish and chips aren't legal, but fish_n_chipsand plan9are.<br />

</ol>
<h3>
Assigning Variables </h3>
To assign a variable you must declare a variable then give it a unique name and in last give it a value like<br />
<pre class="prettyprint"> var my_age = 22;
</pre>
Here Var is keyword , my_age is the unique name and 22 is the value of variable my_age<br />
<h3>
 Working with Variables and Data Types in JavaScript </h3>
As i told you before that programming is more like playing with data, we play with data and we get new data ummmm like we take three variables
a,b and c.we assign values to a  and  b like a = 5, b = 10 anc c = a+b. see what goes on here that we manipulate the data to get new data  
<br />
<pre class="prettyprint lang-js"> var a = 5;
 var b = 10;
 var c = a+b;
</pre>
To manipulate we use operators like in c = a+b, + is the operator. In JavaScript there are different operators for 
different data types<br />
<h3>
Basic Mathematics with JavaScript</h3>
JavaScript Supports Basic Mathematical operations (see the table below)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOMmJAhhKtR8Vh_6gFD_PM5BOGOHt9U0h4IUTZ3k0H8TqUuyp6dwQmMMnZVZlrxVCTAGoYlY6XVHdjUTblwlKY87AuUV2stXzf2TlBPLx5GFBD-qFXYaDJOC-IR9GZQXNktkH_vi_3tIQR/s1600/Snap+2014-03-20+at+08.39.00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOMmJAhhKtR8Vh_6gFD_PM5BOGOHt9U0h4IUTZ3k0H8TqUuyp6dwQmMMnZVZlrxVCTAGoYlY6XVHdjUTblwlKY87AuUV2stXzf2TlBPLx5GFBD-qFXYaDJOC-IR9GZQXNktkH_vi_3tIQR/s1600/Snap+2014-03-20+at+08.39.00.png" /></a></div>
<br />

<br />
Lets take an example of Basic Math in JavaScript<br />
<pre class="prettyprint lang-js">    var priceOfOne = 15;
    var totalItem = 5;
    var totalCost = priceOfOne * totalItem;
    alert (totalCost);
</pre>
In Next Post i will Post some Simple JavaSCript Programs so that you can do exercise. Thanks for reading, see you in next Post :)</div>

JavaScript Quick and Dirty Tutorial-Part - 3 ,(Working with Variables and Data Types in JavaScript)

Hey There Guys. Welcome to the third post of this series "Quick and Dirty Introduction to JavaScript". Today we will encounter va...

JavaScript Quick and Dirty Tutorial-Part - 2 ,(Writing JavaScript Code and Indroduction to JS console in Chrome & Firefox)

Unknown 4 JavaScript Dirty Tutorial Thursday, March 20, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpyAHtMCo-yNf6S3fKVFC_2hXvQPyxC2zfSvYsXtMPJfmbZZWyWzym5eGenXKEuVBfqHEAK-cf3BajfXv1gdLjM9O5pLjIV_amCJxskr8s0cx438-yDgUrXoIKQXimeqMIGaD-vjuBjyVg/s1600/Snap+2014-03-19+at+22.41.55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpyAHtMCo-yNf6S3fKVFC_2hXvQPyxC2zfSvYsXtMPJfmbZZWyWzym5eGenXKEuVBfqHEAK-cf3BajfXv1gdLjM9O5pLjIV_amCJxskr8s0cx438-yDgUrXoIKQXimeqMIGaD-vjuBjyVg/s1600/Snap+2014-03-19+at+22.41.55.png" /></a></div>
<br />
Hey there Guys ! Welcome to the second post of this series "Quick and Dirty Introduction to JavaScript". In this post we will learn how to write JavaScript
Programs. Well There are two ways to write JavaScript Programs (if you are a beginner in JavaScript ) and the two methods are
<br />
<ol>
<li>Putting your JS in HTML</li>
<li>Writing JS in Browser's Console</li>
</ol>
Lets take the first method first. Now we will put our JS code in HTML document to execute.first we need a HTML(core markup). Here it is 
<br />
<pre class="prettyprint"><!doctype html>
<html>
 <head>
  <title>JS in HTML</title>
   
  <script type = "text/javascript">
   alert("Hello ! Javasript ");
  </script> 
 </head>
 <body>
 
 </body>
</html>
</pre>
save that code with a .html extension and run it in your browser it will execute and show a message box in your browser like this<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5DcXHWb8suxie0YLESPqlRh8vwYZTG14hA3R6JnDJMTzz4eW01qmyP8AE5B4UuXR83oza1hDeKB98KrL2wSfgewYBkYfmkVO7J_NmaYKsi2Rve0UG1JNaNwuTIBrQI_db21KyHtbrQuUV/s1600/Snap+2014-03-19+at+22.15.25.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5DcXHWb8suxie0YLESPqlRh8vwYZTG14hA3R6JnDJMTzz4eW01qmyP8AE5B4UuXR83oza1hDeKB98KrL2wSfgewYBkYfmkVO7J_NmaYKsi2Rve0UG1JNaNwuTIBrQI_db21KyHtbrQuUV/s1600/Snap+2014-03-19+at+22.15.25.png" /></a></div>
<br />

<br />
The second Method is Writing JavaScript into Browser's Console. I am using Coogle Chrome but you are free to use any other as wel. <br />
To open JavaScript Console in Chrome follow this<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvQsI7ZnX9xeu60pAO0oS0-uwHPj03qwZKak4qNTNkOW5i4bJ4BUWct7ZjdFb18-hpYHkJVXFbtnh4tI12yU0oHB5ogMH83EQ69JujaKFC6TcMKKOGvDfpMJsJtdiuZye1Kmg2YswPbjt/s1600/Snap+2014-03-19+at+22.23.54.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvQsI7ZnX9xeu60pAO0oS0-uwHPj03qwZKak4qNTNkOW5i4bJ4BUWct7ZjdFb18-hpYHkJVXFbtnh4tI12yU0oHB5ogMH83EQ69JujaKFC6TcMKKOGvDfpMJsJtdiuZye1Kmg2YswPbjt/s1600/Snap+2014-03-19+at+22.23.54.png" /></a></div>
<br />
<br />

After this you will see a JS Console like this<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtVyTGuLs-kR8PyofX3NKPdsJuH-aRT3V0d6d86RYnVHXhqk_ivqNXHZXgwKaUEar18qmVMmd9q6TvyTxvS1sqXUfmhoEVlpFq3pWdgp1CD_gc6_holFpSvng1Myfjn0j1dU-_rIPDLizU/s1600/Snap+2014-03-19+at+22.26.24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtVyTGuLs-kR8PyofX3NKPdsJuH-aRT3V0d6d86RYnVHXhqk_ivqNXHZXgwKaUEar18qmVMmd9q6TvyTxvS1sqXUfmhoEVlpFq3pWdgp1CD_gc6_holFpSvng1Myfjn0j1dU-_rIPDLizU/s1600/Snap+2014-03-19+at+22.26.24.png" /></a></div>
<br />

<br />
now you can directly Execute JS from Your Browser follow the ScreenShot Below<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-65fbQv6jS-bSZ9kQISvRpIx0G-2VGMG4GV6adBcwE_Kj9GQNDqdAgzwFSiObgXXm4ru4GrDHbNhb2bgdmyHk9VgATe8u0cwufQ2l11j4BaLiI8pcTigtCxGH-VkfXcXN2M6QDqvmIFiy/s1600/Snap+2014-03-19+at+22.32.54.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-65fbQv6jS-bSZ9kQISvRpIx0G-2VGMG4GV6adBcwE_Kj9GQNDqdAgzwFSiObgXXm4ru4GrDHbNhb2bgdmyHk9VgATe8u0cwufQ2l11j4BaLiI8pcTigtCxGH-VkfXcXN2M6QDqvmIFiy/s1600/Snap+2014-03-19+at+22.32.54.png" /></a></div>
<br />

<br />
So now you know how to write JavaScript by both methods. In Next Post<br />
<br />
<br />
<h3>
I know there are some firefox fans so i am gonna write a little on Js Console in Firefox and Installing Firebug</h3>
follow the screenshot below<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlX5rMgCaoEGq_JVpihGafxNtlXYiatxsl4Dkz-xhSnPQpQVtgRvxj6fua04jk3kwtaXWTEUQC0WrJYaoJPDfjnjMLaDt4wBzucqTl4l3Ss8x71rVjhOzFi_HP8hvh5y-gCHYAjlnsufq_/s1600/Snap+2014-03-24+at+19.21.44.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlX5rMgCaoEGq_JVpihGafxNtlXYiatxsl4Dkz-xhSnPQpQVtgRvxj6fua04jk3kwtaXWTEUQC0WrJYaoJPDfjnjMLaDt4wBzucqTl4l3Ss8x71rVjhOzFi_HP8hvh5y-gCHYAjlnsufq_/s1600/Snap+2014-03-24+at+19.21.44.png" /></a></div>
<br />
Lets take the firefox's built in Js Console first press ctrl + shift + j and you will see something like this (screenshot below) <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPr2NPWBKe7L1LFX4Gt9EMrQpIlNiDouL99sv6Vt-9n0elGS2HguRQaHPnu91lEEO32yCVb9R8I4RDOKCNWFGYUKM2xCaseiB2gxZuNmaSCrzIsDvrWv4XPoG0-Z4ReF6h9BOPadlysx3/s1600/Snap+2014-03-24+at+19.37.18.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPr2NPWBKe7L1LFX4Gt9EMrQpIlNiDouL99sv6Vt-9n0elGS2HguRQaHPnu91lEEO32yCVb9R8I4RDOKCNWFGYUKM2xCaseiB2gxZuNmaSCrzIsDvrWv4XPoG0-Z4ReF6h9BOPadlysx3/s1600/Snap+2014-03-24+at+19.37.18.png" /></a></div>
<br />
Now lets take the second option which is Scratch Pad , Press Shift + f4 and the Scratch Pad window will appear(Screenshot below)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNmaPN5IAQ4bW_mGFhLrEvWI1qiY8JjoXVtfFxHxsXd0nfCTKvkSiCCE6zH8aZebNXcbAK5Wcyi6QV5hd-l-YKUKGjrr2BZxVrSWRDdjaBFP6WhFL6WVWKfm3OgfFkIWTSOB9GBTApVMv/s1600/Snap+2014-03-24+at+19.40.27.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNmaPN5IAQ4bW_mGFhLrEvWI1qiY8JjoXVtfFxHxsXd0nfCTKvkSiCCE6zH8aZebNXcbAK5Wcyi6QV5hd-l-YKUKGjrr2BZxVrSWRDdjaBFP6WhFL6WVWKfm3OgfFkIWTSOB9GBTApVMv/s1600/Snap+2014-03-24+at+19.40.27.png" width="640" /></a></div>
<br />
You can also run your JS from There<br />
We will Take a Step forward to learn more about JavaScript 
If you have any problem in finding JavaScript Console in Any Other Browser Please Comment. See you in Next Post Thanks For Reading</div>

JavaScript Quick and Dirty Tutorial-Part - 2 ,(Writing JavaScript Code and Indroduction to JS console in Chrome & Firefox)

Hey there Guys ! Welcome to the second post of this series "Quick and Dirty Introduction to JavaScript". In this post we will ...

JavaScript Quick and Dirty Tutorial, Part - 1

Unknown 0 JavaScript Dirty Tutorial Wednesday, March 19, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAkybkfIG_s4ZolE7tyOrJY36sBoLJ4BGKk7_dbGP7E3UyQFerPcfD2H_O92mbiXuoqYppspcnawb_1hVgFrD8j48aOjMGNQBo21JXSP6o5s3iwSN1hSslIrAZfTFWm-74jI-9xl1LX1T/s1600/JavaScript-Logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAkybkfIG_s4ZolE7tyOrJY36sBoLJ4BGKk7_dbGP7E3UyQFerPcfD2H_O92mbiXuoqYppspcnawb_1hVgFrD8j48aOjMGNQBo21JXSP6o5s3iwSN1hSslIrAZfTFWm-74jI-9xl1LX1T/s1600/JavaScript-Logo.png" width="200" /></a></div>
<br />
Hey There Guys. Welcome to the first post of this series "Quick and Dirty Introduction to JavaScript". You are here because you want to 
 learn JavaScript from Scratch and in a very little time.
<br />
Please note that if you know some other programming languages , then you'll find out that JavaScript is a high-level, dynamic, untyped interpreted programming language
that is well-suited to object-oriented and functional programming styles. To created a beautiful web page it needs three major ingredients<br />
<br />
<br />
<ol>
<li>HTML (for structure)</li>
<li>CSS(For Presentation)</li>
<li>JavaScript(For Behaviour)</li>
</ol>
JavaScriptis is a programming language that lets you supercharge your HTML with animation, interactivity, and dynamic visual effects.
You can add a lot of functionality to your HTML with JavaScript like, if you’ve filled out an online form and  
hit  the  “submit”  button,  the  web  page  can  use 
JavaScript to check your entries in real-time and 
alert you almost instantly if you had filled out the 
form incorrectly.<br />
<br />
JavaScript can make web pages more useful by supplying immediate feedback from your Website Visitor.
<br />
<br />
A JavaScript-powered shopping cart page can instantly display a total cost, 
with tax and shipping, the moment a visitor selects a product to buy. JavaScript can 
produce an error message immediately after someone attempts to submit a web form 
that’s missing necessary information and it's all take no time at all because JavaScript Execute on Client's Side (Your Browser) not on a Server.
<br />
<h3>
A quick look to the history of JavaScript</h3>
JavaScript was Developed at Netscape in the early days of the World Wide Web and JavaScript is nearly as old as the web itself,technically, “JavaScript” is a trademark licensed from Sun Micro systems (now Oracle)
used to describe Netscape’s (now Mozilla’s) implementation of the language. Netscape submitted the
language for standardization to ECMA—the European Computer Manufacturer’s Association—and because of trademark issues, the standardized version of the language
was stuck with the awkward name “ECMAScript.” For the same trademark reasons,
Microsoft’s version of the language is formally known as “JScript.” In practice, just
about everyone calls the language JavaScript.
<br />
<blockquote>
There is not a single similarity between Java and JavaScript.JavaScript was originally 
named LiveScript, but the marketing guys at Netscape decided they’d get more publicity if they tried to 
associate the language with the then-hot Java. Don’t make the mistake of confusing the two…especially 
at a job interview
</blockquote>
<h3>
Writing JavaScript and Executing it Directly from your Browser.</h3>
All Major Browsers like Google Chrome, Apple Safari , Mozilla FireFox, Opera and IE (IE sucks Don't Use it )
comes with a integrated JavaScript Console. In This Series i will mostly use Chrome's JavaScript Console but you are free to use any other as well.In Future Tutorials in this Series , I will Introduce you to FireBug and tell you how to use it so that you can develop website rapidly.In Next tutorial we will write our firs JavaScript Program. Thanks for reading, See you in next post   
</div>

JavaScript Quick and Dirty Tutorial, Part - 1

Hey There Guys. Welcome to the first post of this series "Quick and Dirty Introduction to JavaScript". You are here because yo...

codinggiri

A quick intorduction to arrays in JavaScript - Part 1

JavaScript Exercise Session 1st - Solutions with explanation

JavaScript Exercise Session 1st

JavaScript Quick and Dirty Tutorial-Part - 3 ,(Working with Variables and Data Types in JavaScript)

JavaScript Quick and Dirty Tutorial-Part - 2 ,(Writing JavaScript Code and Indroduction to JS console in Chrome & Firefox)

JavaScript Quick and Dirty Tutorial, Part - 1

Popular Posts

Labels

Blog Archive