자바스크립트 코드 모음 – 칸아카데미

코드로 그림그리기 1 size(400, 400); frameRate(30); // 얼굴 ellipse(200, 200, 300, 300); // 입 ellipse(200, 250, 100, 73); // 왼쪽 눈 ellipse(150, 150, 30, 30); // 오른쪽 눈 ellipse(250, 150, 30, 30); 코드로 그림그리기 2 size(400, 400); frameRate(30); // 얼굴 ellipse(200, 200, 300, 300); // 입 ellipse(200, 250, 100, 73); // 왼쪽 눈 ellipse(150, 150, 30, 30); // 오른쪽 눈 ellipse(250, 150, 30, 30); 코드로 색칠하기 size(400, 400); noStroke(); background(0, 255, 242); // RGB // face fill(255, 242, 0); ellipse(202, 208, 300, 300); // eyes fill(0, 0, 0); ellipse(157, 151, 40, 40); ellipse(304, 142, 40, 40); // mouth fill(255, 0, 0); ellipse(257, 240, 120, 136); // headband stroke(191, 0, 255); […]

객체 상속성 (Object Inheritance)

출처: 객체 상속성 getImage(“creatures/Hopper-Happy”);가 작동하지 않습니다. 출처에서 직접 확인하시기 바랍니다. size(400, 400); var Creature = function(nickname, age, x, y) { this.nickname = nickname; this.age = age + “yrs old”; this.x = x; this.y = y; }; Creature.prototype.talk = function() { text(“SUPPP!?!?!?!??!”, this.x+20, this.y+140); }; var Hopper = function(nickname, age, x, y) { Creature.call(this, nickname, age, x, y); }; Hopper.prototype = Object.create(Creature.prototype); Hopper.prototype.draw = function() { fill(217, 90, 0); var txt = this.nickname + “, ” + this.age; text(txt, this.x+10, this.y-7); }; Hopper.prototype.hooray = function() { text(“Hooooray!!!”, this.x+29, this.y+140); }; var Winston = function(nickname, age, x, y) { Creature.call(this, nickname, age, x, y); }; Winston.prototype = Object.create(Creature.prototype); Winston.prototype.draw = function() { […]

객체 메소드 (Object Methods)

출처: 객체 메소드 getImage(“creatures/Winston”);는 작동하지 않습니다. 출처를 참고하시기 바랍니다. size(400, 400); var Winston = function(nickname, age, x, y) { this.nickname = nickname; this.age = age + “yrs old”; this.x = x; this.y = y; }; // the draw method Winston.prototype.draw = function() { fill(255, 0, 0); var txt = this.nickname + “, ” + this.age; text(txt, this.x+20, this.y-10); }; Winston.prototype.talk = function() { text(“I’m Winston!”, this.x+20, this.y+150); }; var winstonTeen = new Winston(“Winsteen”, 15, 20, 50); var winstonAdult = new Winston(“Mr. Winst-a-lot”, 30, 229, 50); winstonTeen.draw(); winstonTeen.talk(); winstonAdult.draw(); winstonAdult.talk(); size(400, 400); var Winston = function(nickname, age, x, y) { this.nickname = nickname; this.age = age + “yrs old”; this.x = […]

객체 유형 (Object Types)

출처: 객체 유형 이미지가 작동하지 않습니다. 출처에서 확인하시기 바랍니다. size(400, 400); var Winston = function(nickname, age, x, y) { this.nickname = nickname; this.age = age + “yrs old”; this.x = x; this.y = y; }; var winstonTeen = new Winston(“Winsteen”, 15, 20, 50); var winstonAdult = new Winston(“Mr. Winst-a-lot”, 30, 229, 50); var drawWinston = function(winston) { fill(255, 0, 0); var txt = winston.nickname + “, ” + winston.age; text(txt, winston.x+20, winston.y-10); }; drawWinston(winstonTeen); drawWinston(winstonAdult); size(400, 400); // Object oriented programming /* Winston – nickname – age – x – y */ var Winston = function(nickname, age, x, y) { this.nickname = nickname; this.age = age + “yrs old”; this.x […]

객체의 배열

출처: 객체의 배열 size(400, 400); var drawWinston = function(facePosition) { var faceX = facePosition.x; var faceY = facePosition.y; fill(255, 255, 0); ellipse(faceX, faceY, 180, 180); // face fill(46, 46, 41); ellipse(faceX – 30, faceY – 50, 30, 30); // eyes ellipse(faceX + 44, faceY – 55, 30, 30); fill(252, 65, 65); ellipse(faceX + 19, faceY + 32, 82, 81); // mouth }; var positions = [ {x: 99, y: 117}, {x: 294, y: 117}, {x: 101, y: 316}, {x: 294, y: 316}, {x: 200, y: 200} ]; for (var i = 0; i < positions.length; i++) { drawWinston(positions[i]); } size(400, 400); var drawWinston = function(facePosition) { var faceX = facePosition.x; […]

객체란?

출처: 객체란? size(400, 400); var winston = { age: 19, eyes: “black”, likes: [“programming”, “being programmed”], isCool: true, birthplace: { city: “Mountain View”, state: “California” } }; fill(0, 0, 0); textSize(16); text(“All about Winston:”, 10, 30); text(“Winston is ” + winston.age + ” years old”, 10, 50); text(“Winston has ” + winston.eyes + ” eyes”, 10, 70); text(“Winston likes ” + winston.likes[0] + ” and ” + winston.likes[1], 10, 90); text(“Winston was born in ” + winston.birthplace.city + “, ” + winston.birthplace.state, 10, 110); size(400, 400); var winston = { age: 19, eyes: “black”, likes: [“programming”, “being programmed”], isCool: true, birthplace: { city: “Mountain View”, state: “California” } }; fill(0, […]

배열 수정하기

출처: 배열 수정하기 size(400, 400); var xPositions = [100, 200]; // var newInd = 2; draw = function() { if (mousePressed) { /* xPositions[newInd] = mouseX; newInd++; */ xPositions.push(mouseX); } noStroke(); background(212, 254, 255); stroke(64, 117, 207); fill(196, 33, 255); for (var i = 0; i < xPositions.length; i++) { line(xPositions[i], 120, 194, 285); ellipse(xPositions[i], 104, 32, 46); } }; size(400, 400); var xPositions = [100, 200]; // var newInd = 2; draw = function() { if (mousePressed) { /* xPositions[newInd] = mouseX; newInd++; */ xPositions.push(mouseX); } noStroke(); background(212, 254, 255); stroke(64, 117, 207); fill(196, 33, 255); for (var i = 0; i < xPositions.length; i++) { line(xPositions[i], 120, 194, […]

배열에 루프 사용

출처: 배열에서 반복문 사용하기 size(400, 400); var myFriends = [“Sophia”, “John”, “Leif”, “Winston”, “OhNoes Guy”, “Sal”]; fill(255, 0, 0); var friendNum = 0; while(friendNum < myFriends.length) { text(myFriends[friendNum], 10, 30+friendNum*30); friendNum++; } for(var friendNum = 0; friendNum < myFriends.length; friendNum++) { text(myFriends[friendNum], 87, 30+friendNum*30); } size(400, 400); var myFriends = ["Sophia", "John", "Leif", "Winston", "OhNoes Guy", "Sal"]; fill(255, 0, 0); var friendNum = 0; while(friendNum < myFriends.length) { text(myFriends[friendNum], 10, 30+friendNum*30); friendNum++; } for(var friendNum = 0; friendNum < myFriends.length; friendNum++) { text(myFriends[friendNum], 87, 30+friendNum*30); } 응용: 좋아하는 동물 size(400, 400); var animals = ["cat", "dog", "cow", "lion", "tiger"]; var animalNum = 0; while(animalNum< animals.length) { fill(255, 0, 0); text(animals[animalNum], […]

배열이란?

출처: 배열이란? size(400, 400); // Arrays! var myFriend = “Sophia”; var myFriends = [“Sophia”, “John”, “Leif”, “Winston”, “OhNoes Guy!!”]; // myFriends[1] fill(255, 0, 0); text( myFriends[0], 10, 30); text( myFriends[1], 10, 80); text( myFriends[2], 10, 130); text(“I have ” + myFriends.length + ” friends!!!”, 10, 150); // Arrays! var myFriend = “Sophia”; var myFriends = [“Sophia”, “John”, “Leif”, “Winston”, “OhNoes Guy!!”]; // myFriends[1] fill(255, 0, 0); text( myFriends[0], 10, 30); text( myFriends[1], 10, 80); text( myFriends[2], 10, 130); text(“I have ” + myFriends.length + ” friends!!!”, 10, 150); 응용: 좋아하는 과일 size(400, 400); var fruits = [“apple”, “orange”, “grapes”]; fill(255, 0, 0); text(fruits[0], 10, 30); text(fruits[1], 10, 80); text(fruits[2], 10, […]