My Slider

Image Slider By Humayoun Kabir Lets Express our emotion with blog Email me at humayounk@ymail.com #htmlcaption

বুধবার, ৪ ডিসেম্বর, ২০১৩

Regular Expression Shorcut Tutorial

Today I am going to write a tutorial on Regular Expression which is needed in daily basis of our programming life. And some of friends will agree with me that it can make us a little bit of trouble. But nothing to worry my dear friends . Here is the shortcut which i used in my programming life. If you don't like it please don't mind on me because i am not  a good blogger !!

RegExp has exec and test method

string has match,replace,search,split method for regular expression


var re = /ab+c/;  // You can call this way to initialize regular expression pattern

var re = new RegExp("ab+c"); // more standard when you not know the pattern [This is construct way]

/a*/ matches aaaaaaaa o or more times

but /a\*/ matches only a*

/a\b/ matches a with boundary word.
^ matches beginning of  input like as /^a/ matches in "a teddy bear" but not "A in E"

/ (foo) (bar) \1 \2/  // matches and remember first two words these called capturing parenthesis

/ (?:foo){1,2}/  non capturing parenthesis but not foo in "foo foo" but o in "foo"

x(?=y) match only if x is followed by y this is called look ahead

/ Jack (?=Frost|Sprat) / matches only jack followed by Frost or Jack Sprat.

x(?!y) match only if x is not followed by y negated look ahead
example : /\d+(?!\.)/ that matches "141" but not "3.141"

x|y matches either x or y
example : /green|red/ matches either in "green apple" or "red apple"

{n} matches exactly n occurrence of the preceding character
example : /a{2}/ matches in "caandy" but not in "candy"

{n,m} matches at least n and at most m occurrence of the preceding character
example : /a{1,2}/ matches 1 for in "Candy" , 2 for in "Caandy" , 3 for "Caaandy" and also in "Caaaaaaaaandy" because its matches preceding 3a like aaa

[xyz] matches any of the characters in brackets , this is same as [x-z]
example : [abcd] matches the 'b' in "brisket" and the 'c' in "city". The patterns /[a-z.]+/ and /[\w.]+/ match the entire string "test.i.ng".

[^xyz]  it matches anything that is not enclosed in the brackets
example: [^a-c] matches r in "briefcase"

[\b] matches a backspaces

\b matches a word boundary example: /\bm/ matches the m in "moon" , but  /\boo/ does not matches oo in "moon" because oo is followed by n , /oon\b/ matches in "moon" because oon is the end of word boundary.

\d matches a digit character equivalent to [0-9]

\s matches a single white space character example: /\s\w*/ matches bar  in "foo bar".

\w matches a alpha numeric character including the underscore equivalent to [A-Za-z0-9_]


Example with JavaScript (how to implement)

var myReg = /a(m+)i/g;
var myArray = myReg.exec("programming");
 
// Or this way If you want to construct the regular expression from a string 

var myReg = new RegExp("a(m+)i", "g");
var myArray = myRe.exec("programming");

সোমবার, ১০ জুন, ২০১৩

Create and Play Snake game with HTML5 and Jquery

Hello Friends,
Are you feeling boring today and want to play some game.What about if you play a game that was made be you !!! And it is made with only html5 and Jquery Then how about this ha.... (Really !!! Is it possible  !!! ) absolutely why not . So get ready, today i will share a full source code with you. Just copy and paste it on plain notepad and save as [any name].html (format). After saving just open this *.html file with recent browser that support html5. don't worry recent all browser support html5. And most importantly you need latest jquery version to download.Click here to download latest jquery.So why we waiting for....

Here is the  html source code below : (Just copy and Paste it)

<!DOCTYPE HTML>
<html>
<head>
  <title>Simple Snake Game with Html5 </title>
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
    //Canvas stuff
    var canvas = $("#canvas")[0];
    var ctx = canvas.getContext("2d");
    var w = $("#canvas").width();
    var h = $("#canvas").height();
   
    //Lets save the cell width in a variable for easy control
    var cw = 10;
    var d;
    var food;
    var score;
   
    //Lets create the snake now
    var snake_array; //an array of cells to make up the snake
   
    function init()
    {
        d = "right"; //default direction
        create_snake();
        create_food(); //Now we can see the food particle
        //finally lets display the score
        score = 0;
       
        //Lets move the snake now using a timer which will trigger the paint function
        //every 60ms
        if(typeof game_loop != "undefined") clearInterval(game_loop);
        game_loop = setInterval(paint, 60);
    }
    init();
   
    function create_snake()
    {
        var length = 5; //Length of the snake
        snake_array = []; //Empty array to start with
        for(var i = length-1; i>=0; i--)
        {
            //This will create a horizontal snake starting from the top left
            snake_array.push({x: i, y:0});
        }
    }
   
    //Lets create the food now
    function create_food()
    {
        food = {
            x: Math.round(Math.random()*(w-cw)/cw),
            y: Math.round(Math.random()*(h-cw)/cw),
        };
        //This will create a cell with x/y between 0-44
        //Because there are 45(450/10) positions accross the rows and columns
    }
   
    //Lets paint the snake now
    function paint()
    {
        //To avoid the snake trail we need to paint the BG on every frame
        //Lets paint the canvas now
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "black";
        ctx.strokeRect(0, 0, w, h);
       
        //The movement code for the snake to come here.
        //The logic is simple
        //Pop out the tail cell and place it infront of the head cell
        var nx = snake_array[0].x;
        var ny = snake_array[0].y;
        //These were the position of the head cell.
        //We will increment it to get the new head position
        //Lets add proper direction based movement now
        if(d == "right") nx++;
        else if(d == "left") nx--;
        else if(d == "up") ny--;
        else if(d == "down") ny++;
       
        //Lets add the game over clauses now
        //This will restart the game if the snake hits the wall
        //Lets add the code for body collision
        //Now if the head of the snake bumps into its body, the game will restart
        if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
        {
            //restart game
            init();
            //Lets organize the code a bit now.
            return;
        }
       
        //Lets write the code to make the snake eat the food
        //The logic is simple
        //If the new head position matches with that of the food,
        //Create a new head instead of moving the tail
        if(nx == food.x && ny == food.y)
        {
            var tail = {x: nx, y: ny};
            score++;
            //Create new food
            create_food();
        }
        else
        {
            var tail = snake_array.pop(); //pops out the last cell
            tail.x = nx; tail.y = ny;
        }
        //The snake can now eat the food.
       
        snake_array.unshift(tail); //puts back the tail as the first cell
       
        for(var i = 0; i < snake_array.length; i++)
        {
            var c = snake_array[i];
            //Lets paint 10px wide cells
            paint_cell(c.x, c.y);
        }
       
        //Lets paint the food
        paint_cell(food.x, food.y);
        //Lets paint the score
        var score_text = "Score: " + score;
        ctx.fillText(score_text, 5, h-5);
    }
   
    //Lets first create a generic function to paint cells
    function paint_cell(x, y)
    {
        ctx.fillStyle = "blue";
        ctx.fillRect(x*cw, y*cw, cw, cw);
        ctx.strokeStyle = "white";
        ctx.strokeRect(x*cw, y*cw, cw, cw);
    }
   
    function check_collision(x, y, array)
    {
        //This function will check if the provided x/y coordinates exist
        //in an array of cells or not
        for(var i = 0; i < array.length; i++)
        {
            if(array[i].x == x && array[i].y == y)
             return true;
        }
        return false;
    }
   
    //Lets add the keyboard controls now
    $(document).keydown(function(e){
        var key = e.which;
        //We will add another clause to prevent reverse gear
        if(key == "37" && d != "right") d = "left";
        else if(key == "38" && d != "down") d = "up";
        else if(key == "39" && d != "left") d = "right";
        else if(key == "40" && d != "up") d = "down";
        //The snake is now keyboard controllable
    })
   
})
</script>
</head>
<body>

<!-- Lets make a simple snake game -->
<canvas id="canvas" width="450" height="450"></canvas>


</body>
</html>

Facebook Tricks with Javascript



1. Select all Friends for an Invitation instantly
You can select all friends easyli just open any page or group click on suggest or invite and copy this code and paste in the url box. and hit Enter....thats it
javascript:elms=document.getElementById('friends').getElementsByTagName('li');for(var fid in elms){if(typeof elms[fid] === 'object'){fs.click(elms[fid]);}}
2. View the Hidden content of a page without making a Like
This trick is used to view the hidden content of any Facebook page without making a like to that page. This trick was also previous published in our recent post  How to view the hidden content of Facebook pages without making a Like, you can find even more tricks related to this topic in this post.
javascript:(function(){for(var%20t=document.getElementsByTagName("*"),l=t.length;l--;){t[l].style.visibility=""}}())
3. View Private Photos on Facebook
This trick is used to view the photos of people blocked due to privacy issue even without adding them on Facebook. Just go to the person’s page and enter the following code in the address bar. Now as soon as you hit the Enter key, the private photos are unveiled to you now.
javascript:(function(){CSS.removeClass(document.body,%20'profile_two_columns');
tab_controller.changePage("photos");})()
4.Edit any page
Javascript:document.body.contentEditable=”true”;document.designMode=”true”;void 0

I hope this will help to make some fun!! any feedback mail me : humayounk@ymail.com