DeeCoder

Creating Cookies in JavaScript   We all use a browser which automatically logs us in to our favorite sites without us having to login manually every time. A cookie is sent from a web site and stored locally on your computer. It is just a piece of data which allows web sites to remember their users. In this post we will learn how to create cookies with JavaScript. How are cookies stored? Cookies are stored in name-value pairs i.e. like this, user = deecoder This value is stored in a text file. Whenever the site related to this is visited, the cookie is added to the web request. Hence web-server doesn’t have to remember about you. How to create Cookies in JavaScript? Cookies can be created by assigning a name-value pair to the document.cookie object. This can be done like this.., document.cookie="username=Yourname; expires=Wed, 19 Nov 2018 12:00:00 UTC; path=/";     // username, expires, path are called parameters. Here we have created a...

Lets's Learn Document Object Model  The " DOM "document object model) allows JavaScript to access the content of a web page.The DOM is like a class monitor, where HTML elements are the like the students of a class.It monitors or keeps track of HTML documents. JavaScript is like class teacher it tell the monitor to do something. Or in other words JavaScript can manipulate HTML elements with DOM. Show Me your ID In DOM you can give  unique names to HTML elements, these are called Id of the element, further this id can be used by JavaScript to manipulate or access the HTML elements.To give id to an element you can use id attribute like this ; <h1 id="Hello" >Hello</h1> ID  Hello then can be then used to access the heading tag <h1> later by Javascript. Let's Catch this guy Now, when we have the name given we can catch this guy and manipulate it. To use this element we use method document.getElementById in our...

Html 5 Canvas Text App Part II Last time we made the Canvas text app.This time we will add shadows and download functionality to it. Lets get started. If you haven't seen the first part of this series , I recommend you to do so here..., HTML 5 Shadows In html 5 you can give shadows not only to the text. HTML 5 Shadows provides four properties make awesome effects. context.shadowColor For the color of the shadow.Color is given in the format  “#RRGGBB”. context.shadowOffsetX A positive or negative number showing x offset of shadow.  context.shadowOffsetY A positive or negative number showing x offset of shadow.  context.shadowBlur Provides blur filter for diffusion of the shadow. The higher the value, the more diffusion. An example of it can be  context.shadowColor = "#00FF00"; context.shadowOffsetX = 4; context.shadowOffsetY = 4; context.shadowBlur = 1; This will produce this result..., ...

Let's Make an Html 5 Text Canvas App So last time we made a cool tileboard ,this time we will make a Html 5 canvas text App.Sounds cool here's what we are going to have at the end of this post.. The Idea.     So i was making this video and i made every slide in blender3d(Iknow that's a bad idea) and it was a pain in the........ so i Was wondering if there is easy way to do it...and i am still wondering. My Story which not at all useful for you ........ So I ended up with this idea.....this is first part as this project is little big.... 1) An app which let us create slides and export them... 2) Slides may include text and images. 3) Text and images can have some basic effects like shadows.... If you DON'T KNOW JAVASCRIPT you can follow my learning javascript series which is short and sweet introduction to the world of javascript......., Learning JavaScript V Learning Javascript Part IV Learning Javascript Part III Learn...

Make a HTML5 Canvas Colorful Tile Board Part II So last time we created a HTML 5 Canvas TileBoard in javascript . But it was not so flexible and we were not able to control it properly. So Lets develop this project it little more.                   THE IDEA 2) User can Change the Background color of the Board 2) User can assign a single color to some specific tiles 3) User can clear the Canvas Completely (Just for fun). THE IMPLEMENTATION Lets Make the Background color Chooser First, we can implement it with HTml5 Color Chooser So add this Code to your Html File. Create a new function for drawing Backgorund function drawBG() { ct.fillStyle = document.getElementById("ColorChooserBG").value; ct.fillRect(0,0,Can.width,Can.height); } Call this Function in  Draw() Before Calling the TileMaker........ function D...

Learning Javascript Part VI Loops and Jumps So we Learned about Functions in javascript and how useful they are when we want to reuse code.But what if we want to do some thing more often, like what if we want something to happen multiple times.For instance what if we want to print something multiple times on console.Lets say thousand times.Again it would be ridiculous to do it ourselves.So what can helps in this.A loop can this problem and in any programming language they are meant to do it.A loop statement is used when we want to repeat some programming statements until a specified condition is reached. There are basically four types of loops. 1) For Loops 2) While Loop 3) Do- While Loop The Basic concept of  a loop is checking the condition and doing somenthing. For Loop Let's first discuss about for loop .The for loop have initialization, condition checking and increment/decrement done very nicely and easily. The Syntax of for loop is shown below. ...

Learning Javascript Part V So we learned about arrays and objects earlier, this time we are going to take a look at the Functions.If you have'nt checked out the earlier tutorials then i recommend you to do so. Please open your console in browser to understand better.If you are new to this series then please first go through the earlier posts as this is an follow up series.Every post is short and sweetso don't worry much about it. Need Of Functions Lets say i want to do some thing like lets say a + b , but i want to do it five times at different place in my code.So one way to do this is that I copy-paste it 5 times at the places i need it.But What if I am working on a much bigger code and want it thousand times, than doing the  Copy paste is not a good idea.  Here comes the functions, simply a function is a way to bundle code so that it can be reused.In this post we will learn how to make function and use them.Lets get started. A Basic Function...

Make a HTML5 Canvas Colorful Tile Board We have already know how to draw shapes in html 5 canvas,now lets apply that knowledge to make something more interesting. We all love colorful environments. So lets create a Tile Board. The IDEA 1.)A canvas with many tiles. 2.)Each tile will have its own different color. 3.)User will have the ability to redraw the Tile Board. The IMPLEMENTATION Now we will implement the idea.Lets get started....., Lets create a simple Html 5 file. TODO supply a title Now create a html 5 canvas. Now Create a script tag and get the context 2d for our canvas. var can = document.getElementById("Can"); var ct = can.getContext("2d"); Now lets set our initial coordinates to zero var can = document.getElementById("Can"); var ct = can.getContext("2d"); var Cordi...

oi Learning Javascript Part IV So t ill now we know what are arrays in javascript . In this pot we are going to talk about Objects. OOP Concepts are really very vast section to explore,So we are just going to have a introduction of them. Objects in JavaScript Objects are just like arrays, but they use strings instead of numbers to access the different elements. These strings used are called keys or properties , and the elements they point to are called values. But unlike the arrays which stores multiple values the objects usually represent single thing's multiple characteristics. Creating Objects in Javascript There are two ways to create objects in javascript.          var myObject = new Object();                      OR            ...