$$\begin{align} (x+1)^2 &\cssId{Step1}{= (x+1)(x+1)}\\ &\cssId{Step2}{= x(x+1) + 1(x+1)}\\ &\cssId{Step3}{= (x^2+x) + (x+1)}\\ &\cssId{Step4}{= x^2 + (x + x) + 1}\\ &\cssId{Step5}{= x^2+2x+1}\\ \end{align}$$

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}. \tag{1}$$

$$\begin{align} (x+1)^2 &\cssId{Step1}{= (x+1)(x+1)}\\ &\cssId{Step2}{= x(x+1) + 1(x+1)}\\ &\cssId{Step3}{= (x^2+x) + (x+1)}\\ &\cssId{Step4}{= x^2 + (x + x) + 1}\\ &\cssId{Step5}{= x^2+2x+1}\\ \end{align}$$

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">

<script type="text/javascript" src="http://www.charlie-roberts.com/gibberish/build/gibberish.js"></script>

<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>

<div id="jxgbox" class="jxgbox" style="width:400px; height:400px; border">

<script type="text/javascript">

 Gibberish.init();

 Gibberish.Time.export();

 Gibberish.Binops.export();

 var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,10,10,-10], axis:false});

 var sinewave = new Gibberish.Sine( 440, .25 ).connect();

 var slide = board.create('slider', [[2, 8], [8, 8], [100, 440, 1000]]);

 var sinecurve = board.create('functiongraph', [function(x) { return 5 * Math.sin((sinewave.frequency / 200.0) * 2* Math.PI * x); }]);

 board.on ('update', function() {

    sinewave.frequency = slide.Value();

 } );

</script>

</div>

<canvas id="myCanvas" width="360" height="400" style="border:1px solid #d3d3d3;">

Your browser does not support the canvas element.

</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// X축 그리기

for(x=0; x<360; x += 20){

    ctx.moveTo(x+5,180);

    ctx.lineTo(x,180);

}

// 청색 사인파 그리기

ctx.moveTo(0,180);

ctx.strokeStyle="blue";

for(x=0; x<=360; x+=1){

    y = 180.0 - Math.sin(x*Math.PI/180)*120;

    ctx.lineTo(x,y);

}

ctx.stroke();

// 적색 사인파 그리기

ctx.beginPath();

ctx.moveTo(0,180);

ctx.strokeStyle="red";

for(x=0; x<=360; x+=1){

    y = 180.0 - Math.sin(2*x*Math.PI/180)*120;

    ctx.lineTo(x,y);

}

ctx.stroke();

</script>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(100, 75, 50, 0,  2* Math.PI);

ctx.stroke();

</script> 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(100, 75, 50, 0,  1.5* Math.PI);

ctx.stroke();

</script> 

img : 사용할 이미지

sourceX : 이미지 안에서 x 좌표

sourceY : 이미지 안에서 y 좌표

sourceWidth : 사용할 폭

sourceHight : 사용할 높이

x : 캔버스 안에서 x 좌표

y : 캔버스 안에서 y 좌표

Width : 사용할 폭

Hight : 사용할 높이

<p>사용한 이미지</p>

<img id="alien" width="240" height="277" src="https://github.com/gregquat/inbeda/raw/master/sprite.png" style="background-color: black">

<p>캔버스:</p>

<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;background-color:black">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

window.onload = function() {

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    var img = document.getElementById("alien");

    ctx.drawImage(img, 0,0,28,20,10, 10, 28, 20);

    ctx.drawImage(img, 0,0,28,20,40, 10, 28, 20);

    ctx.drawImage(img, 30,0,28,20,10, 28, 28, 20);

}

</script>

<p>사용한 이미지:</p>

<img id="alien" width="240" height="277" src="https://github.com/gregquat/inbeda/raw/master/sprite.png" alt="The Scream"style="background-color: black">

<p>Canvas:</p>

<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;background-color:black">

Your browser does not support the HTML5 canvas tag.

</Canvas>

<script>

window.onload = function() {

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    var img = document.getElementById("alien");

    ctx.drawImage(img, 0,0,28,20,10, 10, 28, 20);

    ctx.drawImage(img, 28,0,28,20,10, 40, 28, 20);

    ctx.drawImage(img, 28,0,28,20,38, 40, 28, 20);

    ctx.drawImage(img, 56,0,28,20,10, 70, 28, 20);

    ctx.drawImage(img, 56,0,28,20,38, 70, 28, 20);

    ctx.drawImage(img, 56,0,28,20,66, 70, 28, 20);

// 메소드 설명: http://ilvjesus.tistory.com/1446

}

</script>

<canvas id="aliensCanvas" class="mesCanvas" width="530" height="600">Votre navigateur ne supporte pas les Canvas :(</canvas>

<script>

var Alien = function (aType, aLine, aCol) {

    this.type = aType;

    this.line = aLine;

    this.column = aCol;

    this.alive = true;

    this.height = 20;

    this.width = 28;

    this.positionX = 100 + this.width * this.column;

    this.positionY = 100 + 30 * this.line;

    this.state = 0;

    this.draw = function () { //draw the alien to his new position

        if (this.alive) { //draw the alien

            canvas.drawImage(

            pic,

            this.width * (this.type - 1),

            this.state,

            this.width,

            this.height,

            this.positionX,

            this.positionY,

            this.width,

            this.height);

        } 

    }

};

Game = {

    types: [1, 2, 2, 3, 3], //define kinds of aliens

    aliens: [

        [11],

        [11],

        [11],

        [11],

        [11]

    ],

    height: 0,

    width: 0,

    interval: 0,

    intervalDefault: 1000,

    init: function (aWidth, aHeight) { //initialize default position and behaviour

        for (i = 0; i < 5; i++) {

            for (j = 0; j < 11; j++) {

                this.aliens[i][j] = new Alien(this.types[i], i, j);

                this.alives++;

                this.aliens[i][j].draw();

            }

        }

        this.play();       

    },

    animate: function () { //move the aliens

        for (i = 0; i < 5; i++) {

            for (j = 0; j < 11; j++) {

                this.aliens[i][j].draw();

            }

        }     

    },

    play: function () { //play the game

        this.interval = this.intervalDefault;

        this.interval = this.interval - (this.level * 20);

        this.animation = setInterval("Game.animate()", this.interval);

    }

};

//define the global context of the game

var element = document.getElementById('aliensCanvas');

if (element.getContext) {

    var canvas = element.getContext('2d');

    var pic = new Image();

    pic.src = 'https://github.com/gregquat/inbeda/raw/master/sprite.png';

    Game.init(530, 500);

}

</script>

var list= [ "A", "B", "C", "D"] 

list.length

배열에 할당 된 갯수를 센다.

var list= [ "A", "B", "C", "D"] 

list.push(1)

기능

배열에 끝에 값을 추가한다.

var list= [ "A", "B", "C", "D"] 

list.pop()

기능

배열 끝에 값을 삭제한다.

var list= [ "A", "B", "C", "D"] 

list.shift()

기능

배열의 첫번째 값을 삭제한다.

var list= [ "A", "B", "C", "D"] 

list.unshift(1)

배열 첫번째에 값을 추가한다.

var list= [ "A", "B", "C", "D"] 

list.splice(2, 1, 1, 0)

기능

배열에 값을 추가한다.

var list= [ A, B, C, D] 

list.splice(2, 1)

기능

배열 중간 부분 값을 삭제한다.

<input type="range" min="1" max="20" value="10" class="slider" id="amplitude">

  <p>진폭: <span id="demo"></span></p>

<input type="range" min="1" max="20" value="10" class="slider" id="count">

  <p>파장 갯수: <span id="demoCount"></span></p>

<p><br /></p><canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var slider = document.getElementById("amplitude");

var output = document.getElementById("demo");

output.innerHTML = slider.value;

slider.oninput = function() {

  output.innerHTML = this.value;

}

var sliderCount = document.getElementById("count");

var outputCount = document.getElementById("demoCount");

outputCount .innerHTML = sliderCount .value;

sliderCount .oninput = function() {

  outputCount .innerHTML = this.value;

}

function draw() {

 var canvas=document.getElementById("canvas");

 var ctx=canvas.getContext("2d");

 var cx=150;

 var cy=150;

 var radius=100;

 var amp=slider.value;

 var sineCount=sliderCount .value;

 ctx.clearRect(0,0,300,300);

 ctx.beginPath();

 for(var i=0;i<360;i++){

  var angle=i*Math.PI/180;

  var pt=sineCircleXYatAngle(cx,cy,radius,amp,angle,sineCount);

  ctx.lineTo(pt.x,pt.y);

 }

 ctx.closePath();

 ctx.stroke();

}

function sineCircleXYatAngle(cx,cy,radius,amplitude,angle,sineCount){

  var x = cx+(radius+amplitude*Math.sin(sineCount*angle))*Math.cos(angle);

  var y = cy+(radius+amplitude*Math.sin(sineCount*angle))*Math.sin(angle);

  return({x:x,y:y});

}

setInterval ( draw, 10);

</script>