Jquery

why use JQUERY – for compatibility purposes. cross-browser.

 

standards mode – followed w3c recommendation

quirks mode –

 

download – http://docs.jquery.com/Downloading_jQuery

$jquery(); = $();

 

<script src = “jquery-1.8.1.js”></script>

<script>

$(window).load(function(){

 

– render html code

 

};

$(function(){

 

};

</script>

http://html5games.com/2012/09/blocks-on-blast-2/

 

source code:

<!DOCTYPE html>

<html>
    <head>
        <title>THIS FILE IS FOR jquery REFERENCE</title>
                <style type=”text/css” media=”screen”>
                    #watch {border:1px solid #ababab;}                               
                </style>       
                <script charset=”utf-8″ src=jquery-1.18.1.js”><script>
                <script charset=”utf-8″>
                $(function(){               
                    $(“#watch”).html(“Hello World”);
                    var mybutton = $(“#btn1”);
                    mybutton.click(function(){
                        mybutton.val(“Hello Function callback”);
                        });
                    }
                });
                functionx(){
                    alert(“hello”);
                }
                </script>               
    </head>
    <body>       
        <div id=”watch”>
        </div>
        <input type=button id=”btn1″>
    </body>
</html>

 

touch README

echo “This is readme” > README

 

git add

git commit –m “”

git push –u origin master

Advertisements

HTML – day 4

<!DOCTYPE html>

<html>
    <head>
        <title>THIS FILE IS FOR KEYPOS REFERENCE</title>
        <style type=”text/css” media=”screen”>
        #canv {border: 1px solid #ababab;}
        </style>
        <script type=”text/javascript” charset=”utf-8″>
            var c = null; // you can only get the dom element, when the html has been fully loaded
            var cx = null;   
            var xpos = null;
            var xpos2 = null;
            window.onload = function(){ // init sub-routine               
                c = document.getElementById(“canv”);
                cx = c.getContext(“2d”);
                xpos = 10;
                xpos2 = 10;
                stopDrawing = false;
                c.onclick = function(){
                    stopDrawing = !stopDrawing;               
                }
                draw();
            }
            function draw(){

                if(!stopDrawing){               
                    cx.clearRect(0,0,c.width,c.height);                   
                    if(xpos > c.width){
                        xpos = 0;
                    }else{
                        xpos++;       
                    }
                    if(xpos2 > c.width){
                        xpos2 = 0;
                    }else{
                        xpos2 += 5;;       
                    }           
                    cx.fillRect(xpos,10,40,40);
                    cx.fillRect(xpos2,40,20,20);
                }                   
                setTimeout(draw,30);
            }
        </script>       
    </head>
    <body>       
        <canvas id=”canv” width=500 height=250>
        </canvas>
    </body>

</html>

 

 

<!DOCTYPE html>

<html>
    <head>
        <title>THIS FILE IS FOR KEYPOS REFERENCE</title>
        <style type=”text/css” media=”screen”>
        #canv {border: 1px solid #ababab;}
        </style>
        <script type=”text/javascript” charset=”utf-8″>
            var c = null; // you can only get the dom element, when the html has been fully loaded
            var cx = null;   
            var s1 = null;
            var s2 = null;
            var s3 = null;
            var image = null;
            var imagefile = null;
            window.onload = function(){ // init sub-routine   

                imagefile = “singaporew.jpg”;
                image = new Image();
                image.src = imagefile;
                c = document.getElementById(“canv”);
                cx = c.getContext(“2d”);
                stopDrawing = false;
                c.onclick = function(){
                    stopDrawing = !stopDrawing;               
                }
                s1 = new Square(150,10,60,60);
                s2 = new Square(120,80,20,20);
                s3 = new Square(60,140,10,50);
                s2.setAcceleration(2);
                s1.setAcceleration(5);
                s3.setAcceleration(10);
                draw();
            }
            function draw(){
                cx.clearRect(0,0,c.width,c.height);
                //s1.x++;
                //s2.x += 4;
                s1.move2();
                s2.move3();
                s3.move3();
                cx.drawImage(image,-60,-200);
                cx.fillRect(s1.x,s1.y,s1.width,s1.height);
                cx.fillStyle =”red”;
                cx.fillRect(s2.x,s2.y,s2.width,s2.height);
                cx.fillStyle =”blue”;
                cx.fillRect(s3.x,s3.y,s3.width,s3.height);
                cx.fillStyle =”yellow”;
                setTimeout(draw,33);

            }
            function Square(x,y,width,height){
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.direction = true;
                var acceleration = 1;
                this.setAcceleration = function(accel){               
                    acceleration = accel;
                }
                this.move2 = function(){
                    if(this.direction && this.x > c.width){
                        this.x = c.width;
                        this.direction = !this.direction;
                    }
                    else if(this.direction == false && this.x < 0){
                        this.x = 0;
                        this.direction = !this.direction;
                    }
                    if(this.direction){
                            this.x += acceleration;
                    }else{
                            this.x -= acceleration;                       
                    }
                }
                this.move3 = function(){
                    if(this.direction && this.y > c.width){
                        this.y = c.width;
                        this.direction = !this.direction;
                    }
                    else if(this.direction == false && this.y < 0){
                        this.y = 0;
                        this.direction = !this.direction;
                    }
                    if(this.direction){
                            this.y += acceleration;
                    }else{
                            this.y -= acceleration;                       
                    }
                }
                this.move = function(){
                    if(this.x > c.width){
                        this.x = 0;
                    }else{
                    this.x += acceleration;
                    }
                }
            }
        </script>       
    </head>
    <body>       
                <canvas id=”canv” width=700 height=500>
                </canvas>
    </body>

</html>