codinggiri

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

Unknown 0 JavaScript Dirty Tutorial Wednesday, April 16, 2014

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 vari… Read more »

16Apr2014

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

Unknown 0 JavaScript Dirty Tutorial Saturday, April 12, 2014

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. Use the console.log or alert , to Display this simple message: "Hello ! … Read more »

12Apr2014

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

Unknown 0 JavaScript Dirty Tutorial Saturday, March 29, 2014

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. The Basic Syntax Rules of … Read more »

29Mar2014

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)

Unknown 0 JavaScript Dirty Tutorial Thursday, March 20, 2014

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 programmi… Read more »

20Mar2014

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)

Unknown 4 JavaScript Dirty Tutorial Thursday, March 20, 2014

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 Java… Read more »

20Mar2014

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

Unknown 0 JavaScript Dirty Tutorial Wednesday, March 19, 2014

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. Please note that if you know some other programming la… Read more »

19Mar2014

Create awesome capsule buttons with pure CSS3

Unknown 2 Monday, March 17, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEgLbpfGumzMmNMbhFpe7dM6ZMZfHZb087VJqiJQQTFUefZF53fOD1mHKyV9X3IA9pYvJ4x3gbqMwmmMDOyTRPhIEOn0EzTT5fOm7qKLhqPhmgwu2Mm5y8fvkmdmUsIQzKSHglp5BkESTXq5/s1600/pr2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLbpfGumzMmNMbhFpe7dM6ZMZfHZb087VJqiJQQTFUefZF53fOD1mHKyV9X3IA9pYvJ4x3gbqMwmmMDOyTRPhIEOn0EzTT5fOm7qKLhqPhmgwu2Mm5y8fvkmdmUsIQzKSHglp5BkESTXq5/s1600/pr2.png" width="296" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqecJ2XYz8xDNHjU9yQccJp3Arx0abDA1YsztKmFe_jL4DDPSOAWq1srcsb0qjvNljrf1hqVNVr4Sa-oJD4Wb-l9BnQ37k2umB57LddLMndKRtsqRvGcA_hLQSgjm8Nh4lF2AOGPj19-9/s1600/pr1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Hey ! there guys welcome to codinggiri once again. Today we are going to code a really beautiful CSS3 button with a really cool animation and guess what we are not going to use any JavaScript for that.These animated buttons are very handy and useful when you want to show some hidden text or picture on :hover.<br />
<br />
This tutorial is for those who knows a little about CSS3. beginners will feel a little confused but don't worry i am going to post a series of tutorial very soon on CSS3<br />
<br />
Ok so lets code our mark up (HTML5) first</div>
<pre class="prettyprint"><code class="language-html">


 
<!doctype html>
<html>
 <head>
  <title>Cyclades CSS3 Capsule button</title>
  <link href = "hidden-text.css" rel = "stylesheet" type = "text/css"/>
  <link href='http://fonts.googleapis.com/css?family=Offside' rel='stylesheet' type='text/css'/>
 </head>
 <body>
  <h1 align = "center">Cyclades CSS3 Capsule button</h1>
  <h3 align = "center">
   
  </h3>
  <h3 align="center">
   Cyclades CSS3 Capsule buttons are really usefull and beautiful when 
   you want to show some hidden text on <i>:hover</i> with really cool animation
   To take a Tour Please Scroll DOwn and Hover on the button :)</h3>
   
   <h3 align = "center">Please <a href="mailto:linuxlover94@gmail.com">Email ME</a> if you have any question or problems.</h3>
   
   
   <h3 align = "center">Once Again Thank You</h3>
   
  <div class = "button-wrap">
   <a  class = "main-button">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/>
   <a class = "main-button-2">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/> 
   
   <a class = "main-button-3">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   
   <a class = "main-button-4">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/>
   
   <a class = "main-button-5">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/>
   
  </div>
  <br/>
  <br/>
  <br/>
  
 </body>
</html></code></pre>
<pre class="prettyprint"><code class="language-html"> </code></pre>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9oPETTNeA-Dm5Gx-2VPi9p3k89X4KCmk8jchJXYTTzDUoyscxNOkArYN460wbW4oTyYh3xDY3o575cdGXN8zgfR54QMjiqxIw1yRZSgtPCzRjClyrc-YZlykMoMzT3OpLJIfwzkUns-c5/s1600/Snap+2014-03-17+at+14.15.22.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/AVvXsEg9oPETTNeA-Dm5Gx-2VPi9p3k89X4KCmk8jchJXYTTzDUoyscxNOkArYN460wbW4oTyYh3xDY3o575cdGXN8zgfR54QMjiqxIw1yRZSgtPCzRjClyrc-YZlykMoMzT3OpLJIfwzkUns-c5/s1600/Snap+2014-03-17+at+14.15.22.png" /></a><br />
After that save the code with a file name index.html (Please don't forget to save it with a .html extension).Run the html file into your browser and it will look something like this  
It is looking ugly. SO what we are waiting for lets code our css for this.</div>
<pre class="prettyprint"><code class="language-css">
/*Ved Prakash Pandey*
/*2014-03-17*/

body{
background-image:url(debut_dark.png);
}
h1, h3, h3 a{
color:#FFFFFF;
font-family:'Offside', cursive;
}
.button-wrap{
margin:5%;
margin-left:45%;
}
.main-button{
background:#1DA548;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-text{
padding-top:15px;
padding-right:25px;
display:block;
font-size:18px;
white-space:nowrap;
text-shadow:0px 1px 1px rgba(255,255,255,0.3);
color:#ffffff;
/*transition*/
-webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
     -o-transition:all 0.2s linear;
        transition:all 0.2s linear;
}
.main-button-hidden-text{
position:absolute;
height:100%;
top:0px;
padding-top:13px;
right:52px;
width:0px;
background:#63707e;
text-shadow:0px -1px 1px #363f49;
color:#fff;
font-size:18px;
white-space:nowrap;
text-transform:uppercase;
text-align:left;
text-indent:10px;
overflow:hidden;
line-height:38px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
/*transition*/lzmxjh1fn7nq9qicuywygix2ccgclc80
-webkit-transition:width 0.3s linear;
   -moz-transition:width 0.3s linear;
     -o-transition:width 0.3s linear;
        transition:width 0.3s linear;
}
.divider{
position:absolute;
right:0px;
top:0px;
height:100%;
width:50px;
border-left:3px solid black;
background:url(arrow-right.png) no-repeat 50% 55%;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
}
.divider span{
width:50px;
height:60px;
opacity:0.5;
position:absolute;
left:50%;
top:50%;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
margin:-20px 0px 0px -20px;
}
.main-button:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#023F14;
}
.main-button:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Second button goes here */

.main-button-2{
background:#544FAF;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-2:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#170FAF;
}
.main-button-2:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-2:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-2:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-2:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Third Button Goes here*/

.main-button-3{
background:#CE5050;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-3:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#D31E1B;
}
.main-button-3:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-3:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-3:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-3:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Fourth button goes here*/
.main-button-4{
background:#D376BA;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-4:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#D60A9F;
}
.main-button-4:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-4:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-4:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-4:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Fifth button goes here */

.main-button-5{
background:#496066;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-5:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#000000;
}
.main-button-5:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-5:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-5:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-5:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}

</code></pre>
Save that css file with name hidden-text.css , put both html and css files in a same folder , enjoy you are ready to use this code to your website or anywhere else (Please note that in the code you find two .png images , those are simple  png images created with microsoft paint , one is for displaying the arrow on the right side of the button and the second one is for displaying dark background image. You can use your own images. )</div>

Create awesome capsule buttons with pure CSS3

Unknown 2 Monday, March 17, 2014

Hey ! there guys welcome to codinggiri once again. Today we are going to code a really beautiful CSS3 button with a really cool animation and guess what we are not going to use any JavaScript for that.These animated buttons are very handy and useful… Read more »

17Mar2014

Introduction to Objects and Types in Python

Unknown 0 Python Thursday, March 13, 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/AVvXsEjZyeIinsqn50ggO6mrNNP1bwPFHhsmUIp0BQZ5PCbZPpJYF2mOxniqWiMEWGrAsyn7ZcwD-ZMzvuEY_7REZQOWVRfVi_IhVyI7zPnSbMFxVvkMh3MdGyyisKmEQPuaqoynpDKyXiljyTjk/s1600/all_objects.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZyeIinsqn50ggO6mrNNP1bwPFHhsmUIp0BQZ5PCbZPpJYF2mOxniqWiMEWGrAsyn7ZcwD-ZMzvuEY_7REZQOWVRfVi_IhVyI7zPnSbMFxVvkMh3MdGyyisKmEQPuaqoynpDKyXiljyTjk/s1600/all_objects.png" width="279" /></a></div>
<br />
Welcome Guys to this new Post. Today we will learn about Data/Object Types in <a class="zem_slink" href="http://www.python.org/" rel="homepage" target="_blank" title="Python (programming language)">Python Programming Language</a>.<br />
<b><u>Rule You Must Follow:</u></b> <br />
<br />
<blockquote class="tr_bq">
Everything is an Object.</blockquote>
<br />
From <a href="http://docs.python.org/3/" target="_blank">Python Docs</a> , The Python Data-Model -Reference has a very clear and good definition about Objects in Python<br />
<br />
<blockquote class="tr_bq">
Objects are Python's abstraction fro data. All data in a Python Program is represented by object or by relation between objects.</blockquote>
Every Object had an identity, a type and a value.In Short Everything in Python is an Object.like <u>[42,ved,India,White house evrything is an object] </u><br />
<br />
<h2 style="text-align: left;">
TYPES</h2>
<blockquote class="tr_bq">
<div style="text-align: left;">
An object's type determines the operations that the object support and also defines the passable value for object of that type</div>
</blockquote>
 that means every object in Python has a type . You can find/discover the type(built-in-function)with the flowing method just write that code and save that with desirable name with a .py extension , run it and see the result. For better understanding see the screenshot in the last of this post.<br />
<pre class="prettyprint">a = "My name is ved"
print (type(a))
b = 42
print (type(b))
c  = 23.5
print(type(c))

</pre>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeymvhfKp1rFV6OvWTZ-fZ07kxhdsHXUKkEX3Do9_p8m0-nNJ2R8lzcJ-nHGlxO4e4Bkhd13fdK7MvhR6N_qQqKPFdfwrDbMwngLNdeiHn-zz7pn2bStirLuh30VC9k-xbU55TIaF-hEMz/s1600/Snap+2014-03-13+at+18.17.22.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeymvhfKp1rFV6OvWTZ-fZ07kxhdsHXUKkEX3Do9_p8m0-nNJ2R8lzcJ-nHGlxO4e4Bkhd13fdK7MvhR6N_qQqKPFdfwrDbMwngLNdeiHn-zz7pn2bStirLuh30VC9k-xbU55TIaF-hEMz/s1600/Snap+2014-03-13+at+18.17.22.png" width="640" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
If you are facing any problem while learning python please email me or comment below. I will help you out ASAP.  In next post we will find out more on object/data types. see you , Happy Codding :)<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>

Introduction to Objects and Types in Python

Unknown 0 Python Thursday, March 13, 2014

Welcome Guys to this new Post. Today we will learn about Data/Object Types in Python Programming Language. Rule You Must Follow: Everything is an Object. From Python Docs , The Python Data-Model -Reference has a very clear and good definition about… Read more »

13Mar2014

Coding and running your first python code

Unknown 0 all, Python Wednesday, March 12, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
Hello again guys !<br />
in this post we are going to understand the the <a class="zem_slink" href="http://en.wikipedia.org/wiki/IDLE_%28Python%29" rel="wikipedia" target="_blank" title="IDLE (Python)">IDLE</a> and it's feature.<br />
According to Mark Lutz<br />
"IDLE is a desktop <a class="zem_slink" href="http://en.wikipedia.org/wiki/Graphical_user_interface" rel="wikipedia" target="_blank" title="Graphical user interface">GUI</a> that lets you edit, run, browse, and debug <a class="zem_slink" href="http://en.wikipedia.org/wiki/Python_%28programming_language%29" rel="wikipedia" target="_blank" title="Python (programming language)">Python</a><br />
programs, all from a single interface. It runs portably on most Python platforms, including<br />
Microsoft Windows, X Windows (for Linux, <a class="zem_slink" href="http://en.wikipedia.org/wiki/Unix" rel="wikipedia" target="_blank" title="Unix">Unix</a>, and Unix-like platforms),<br />
and the Mac OS (both Classic and OS X). For many, IDLE represents an easy-to-use<br />
alternative to typing command lines, a less problem-prone alternative to clicking on<br />
icons, and a great way for newcomers to get started editing and running code. You’ll<br />
sacrifice some control in the bargain, but this typically becomes important later in your<br />
Python career."<br />
<br />
Let me tell you some good features of IDLE.<br />
You can type Python code and see the output/result of that code immediately in to the Python Shell, IDLE comes with an internal code editor which is very useful , because it provides the developer , code suggestions, syntax highlighting ,indent support and many other useful facilities.  <br />
for those who don't know that what is python shell should take a look on the image below<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihbeB2NCR04SYLcRPRM4goLe6d7DjlbKAr4IxmbwjM5VGSeT-5t6k3gFQveQyysGvHhytdLebnftGkK2KoIRNT9ZNdV-U9rgcrBxZXHD8l5Lsq-TCIjpX1aUz4MgPz20KKZe2JNuGrF-tZ/s1600/Snap+2014-03-12+at+22.56.11.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihbeB2NCR04SYLcRPRM4goLe6d7DjlbKAr4IxmbwjM5VGSeT-5t6k3gFQveQyysGvHhytdLebnftGkK2KoIRNT9ZNdV-U9rgcrBxZXHD8l5Lsq-TCIjpX1aUz4MgPz20KKZe2JNuGrF-tZ/s1600/Snap+2014-03-12+at+22.56.11.png" width="640" /></a></div>
  <br />
It's nothing but a command line interpreter of Python (Please don't get confused.follow me and every thing will be all right :) )<br />
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
So open the IDLE and type <br />
<span style="background-color: black;"><span style="color: orange;">print("Hello ! Python")</span></span></div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
<br /></div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
and press enter </div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
follow the screenshot below</div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDgIOyOa0NYJlSE2Zb7JUFgl63Ax-qjINbt47reoIZ_c1B6qCvTfWc3bQz-F1eWXnqBTF9nQxMVXIsvkEBPZ3ejPNyO2D5DY-EJ6rGWIYBld2FQGDcxe1twXb66XRI40tkNu5MbDTey0dI/s1600/Snap+2014-03-12+at+22.45.18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDgIOyOa0NYJlSE2Zb7JUFgl63Ax-qjINbt47reoIZ_c1B6qCvTfWc3bQz-F1eWXnqBTF9nQxMVXIsvkEBPZ3ejPNyO2D5DY-EJ6rGWIYBld2FQGDcxe1twXb66XRI40tkNu5MbDTey0dI/s1600/Snap+2014-03-12+at+22.45.18.png" width="640" /></a></div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
So now you know how to write and run a python program from the interpreter (where the Python commands can be typed and executed.) now let's learn how to create python program,saving the program with a .py extension and how to run it.</div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
</div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
</div>
<br />
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
well
 it's quite simple. On IDLE go to FILE >> New File or Simply Press
 Ctrl + N and it will open a new window of IDLE code editor<br />
now write a simple line of python program like you did on interpreter  ,
 yes the same hello python program after then save it with desirable 
name with a .py extension like hello.py or new.py after that hit F5 and 
the result will be there at the python shell. follow the screen shot 
below </div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
<br /></div>
<br />
<br />
<br />
<br />
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOfj449XiMIBUTVRkt0RIt4BYoxOyZgnob4DviXxQFwwYybshh-y2t8jlqkysyfgjGvi1GdrYpJ4AVnIsXXg87-tz6nM5lxKzqxg0IA0zzKeec68K0SlT3jht29F1AvAmxXY8R2u2kGWw/s1600/Snap+2014-03-12+at+23.21.12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOfj449XiMIBUTVRkt0RIt4BYoxOyZgnob4DviXxQFwwYybshh-y2t8jlqkysyfgjGvi1GdrYpJ4AVnIsXXg87-tz6nM5lxKzqxg0IA0zzKeec68K0SlT3jht29F1AvAmxXY8R2u2kGWw/s1600/Snap+2014-03-12+at+23.21.12.png" /></a></div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEY2M4ITh-3riecIcxXtbSvBg7ilqc6JCOP7PibX0KyIe6MsHeLmP7Bp1qF0GQ-3KxwgvCZDf7NxrdtZ5kuY3DEHAyF5-VCTB_vpHtucNcPSy_WpcN3BdrcMansLXDES29Bcz1oPQFnquz/s1600/5716748401_56995cd14a.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEY2M4ITh-3riecIcxXtbSvBg7ilqc6JCOP7PibX0KyIe6MsHeLmP7Bp1qF0GQ-3KxwgvCZDf7NxrdtZ5kuY3DEHAyF5-VCTB_vpHtucNcPSy_WpcN3BdrcMansLXDES29Bcz1oPQFnquz/s1600/5716748401_56995cd14a.jpg" /></a></div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
All
 right now you know how to write and run Python code with both methods .
 in next post we will encounter the data types of python and please have
 a look at the comic (left) and don't feel like that comic guy :p see you
 in next post  Happy Coding :)</div>
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
</div>

Coding and running your first python code

Unknown 0 all, Python Wednesday, March 12, 2014

Hello again guys ! in this post we are going to understand the the IDLE and it's feature. According to Mark Lutz "IDLE is a desktop GUI that lets you edit, run, browse, and debug Python programs, all from a single interface. It runs portably on most… Read more »

12Mar2014

Lets Install Python

Unknown 0 all, Python Tuesday, March 11, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
Linux an Mac are preloaded with python. On this blog post i am going to write method for windows only and please let me know if you are facing any problem in installing.<br />
<br />
so first thing first lets download the python installer from <a href="http://python.org/downloads/" target="_blank">Python's Website</a>. or download with this <a href="http://www.python.org/ftp/python/3.3.5/python-3.3.5.msi" target="_blank">direct link</a> (we will learn python with Python 3 not with Python 2 so please download the installer of Python 3)<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2qHOGmIKxEqkS9YC7d7VrjcKE8YuGmz2f__2WoZl8ttnzx8aOLFThpJFbaJU-N9mjFqt18ZqJcj-ssTIsqODA9RPn5zFd6GNfGJbWumJmgV8XGhFGajHvv8ifBC0YXlMgIMylKHbmAX89/s1600/Snap+2014-03-11+at+17.05.45.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="468" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2qHOGmIKxEqkS9YC7d7VrjcKE8YuGmz2f__2WoZl8ttnzx8aOLFThpJFbaJU-N9mjFqt18ZqJcj-ssTIsqODA9RPn5zFd6GNfGJbWumJmgV8XGhFGajHvv8ifBC0YXlMgIMylKHbmAX89/s1600/Snap+2014-03-11+at+17.05.45.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Python Download Page</td><td class="tr-caption" style="text-align: center;">\</td></tr>
</tbody></table>
After downloading the installer , install it and after that you can find this three option while typing "python" in start menu of your windows.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikv0jzXo2vjTp8Uv9x6quB_7RMrtsHacCR9WCG-w8kyHWkY_EPjrWO3g8t5CT3xHY8b90OAZX1Y4CBfj2ruR5CG4hk66mk2GhO7-GLlazG6Tb_ZdfGlIFhBBtMjQytf-Ohdr5h9R-ciIkY/s1600/Snap+2014-03-11+at+17.11.35.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikv0jzXo2vjTp8Uv9x6quB_7RMrtsHacCR9WCG-w8kyHWkY_EPjrWO3g8t5CT3xHY8b90OAZX1Y4CBfj2ruR5CG4hk66mk2GhO7-GLlazG6Tb_ZdfGlIFhBBtMjQytf-Ohdr5h9R-ciIkY/s1600/Snap+2014-03-11+at+17.11.35.png" width="293" /></a></div>
Congratulations , Python is successful installed into your windows we can also add path variables for python but we will encounter it later.<br />
<br />
<u><b>Next step :-  </b></u>click on IDLE(Python GUI) to start coding with python.<br />
<br />
in Next post we will take a look at the IDLE and understand it's functions.</div>

Lets Install Python

Unknown 0 all, Python Tuesday, March 11, 2014

Linux an Mac are preloaded with python. On this blog post i am going to write method for windows only and please let me know if you are facing any problem in installing. so first thing first lets download the python installer from Python's Website. … Read more »

11Mar2014

Inroduction to Python

Unknown 0 all, Python Tuesday, March 11, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
</div>
<div style="text-align: right;">
</div>
<div style="text-align: right;">
</div>
<div style="text-align: right;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxXou0zdjtsw_fVnRrwVDo0FQ_mv7wPPNjUfwdZPTj9Cc9ZfLmHUWX4bwMqKbKYtznlhOdT8eY1Y4gbhXC0KJ3S2a34TFHAGSqBc8SHIorKES3N2hYSb1NB6zh6mhwsPNaUEaHVS36hNY/s1600/python-logo-master-v3-TM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxXou0zdjtsw_fVnRrwVDo0FQ_mv7wPPNjUfwdZPTj9Cc9ZfLmHUWX4bwMqKbKYtznlhOdT8eY1Y4gbhXC0KJ3S2a34TFHAGSqBc8SHIorKES3N2hYSb1NB6zh6mhwsPNaUEaHVS36hNY/s1600/python-logo-master-v3-TM.png" width="320" /></a></div>
<br />
<br />
Python is a great programming language to choose if you are a beginner.<br />
 Let me tell you some point , why you should choose python as your first programming language (as a learner).<br />
<br />
<br />
<br />
<ol style="text-align: left;">
<li>Learning Pythnon is easy and fun</li>
<li>No Boilerplate like #include or using  or import just start coding</li>
<li>Less line of code , you can write a simple hello world program in just one line but other languages take 10-15 line to write the same hello world program.( Fewer lines of code=fewer bugs. )</li>
<li>It's Free </li>
<li>Free doesn't mean no or less support. There are countless communities and forum on internet where you can get help.</li>
<li>Tons of modules to jump start a new project.</li>
<li>Python codes are 1001 % more readable than any other programming languages .</li>
<li>Python is flexible no matter which OS you are using Linux , windows , mac , free BSD or any other Python codes supper flexible the same code will run on any OS with no or  little change.</li>
<li>Good quality documentation is there.</li>
<li>It's easy to start up and light weight, but can add a ton of value.</li>
</ol>
</div>

Inroduction to Python

Unknown 0 all, Python Tuesday, March 11, 2014

Python is a great programming language to choose if you are a beginner. Let me tell you some point , why you should choose python as your first programming language (as a learner). Learning Pythnon is easy and fun No Boilerplate like #include or us… Read more »

11Mar2014

Understanding the paragraph tag

Unknown 0 Monday, March 10, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
The <p> tag</h2>
To show a individual paragraph on your page you have to use the <p> tag<br />
<p> = = paragraph tag<br />
<br />
take a look at the code below<br />
notice what is written between <p> and </p> . save and run the code to see the result.<br />
<br />
<pre class="prettyprint lang-html"><!doctype html>
<html>
 <head>
  <title>
  My first Web page
  </title>
  <body>
   <p>
    This is a paragraph in HTML5
   </p>
  </body>
 </head>
</html>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3TTXNzZdMaanA1BwwLHUFft6a3_9h7Riu1A3W7mlAD921et6rsfqWQLbIGXvh4Xj_3iga4JvwW3lUPl8cqt-xC1QCmWnRLeSuE7R24XMDDPUOz4ex6efQSsObLaPDtjtUy1tcVGS2i6nU/s1600/Snap+2014-01-21+at+11.44.05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3TTXNzZdMaanA1BwwLHUFft6a3_9h7Riu1A3W7mlAD921et6rsfqWQLbIGXvh4Xj_3iga4JvwW3lUPl8cqt-xC1QCmWnRLeSuE7R24XMDDPUOz4ex6efQSsObLaPDtjtUy1tcVGS2i6nU/s1600/Snap+2014-01-21+at+11.44.05.png" /></a></div>
<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>

Understanding the paragraph tag

Unknown 0 Monday, March 10, 2014

The tag To show a individual paragraph on your page you have to use the tag = = paragraph tag take a look at the code below notice what is written between and . save and run the code to see the result. My first Web page Thi… Read more »

10Mar2014

codinggiri

Title

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

Create awesome capsule buttons with pure CSS3

Introduction to Objects and Types in Python

Coding and running your first python code

Lets Install Python

Inroduction to Python

Understanding the paragraph tag

Popular Posts

Labels

Blog Archive