If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

시작하기

lesson 소개

코드를 배울 준비가 됐나요?

이 lesson에서는 간단한 눈사람 모델을 만들고 javascript를 이용해 조작해 보겠습니다. 그리고 이 모델을 마지막 프로젝트에서 만들 캐릭터에 적용해 볼 수 있습니다.
이 lesson에서는 픽사에서 사람들이 소프트웨어를 다루는 방식과 비슷하게 훨신 큰 프로그램의 일부분을 채우게 됩니다.

수업 개요

먼저 객체를 사용해 원들을 만듭니다.
그리고 여러 도형을 객체의 배열을 통해 합쳐봅니다.
마지막으로 deformer 함수를 작성해 만든 모델을 움직여 봅니다.
이를 마치고 나면 마지막 프로젝트에 준비가 될 것입니다.

시작하기 전에 어떤 것을 알아야 하나요?

  • 프로그래밍을 해본 적이 없다면, 칸아카데미의 JS란?에서 변수, 배열, 함수, 객체에 대한 개념을 배우는 것을 추천합니다. 그리고 당연하지만 준비가 되면 여기로 돌아오세요!
  • 칸아카데미에서는 아니지만 프로그래밍을 해본 적이 있다면 여기에 새 프로그램을 만들어 칸아카데미 환경에 적응하는 것을 추천합니다.
  • 칸아카데미에서 프로그래밍을 배웠다면 완벅합니다! 다음 개념을 복습하고 기억이 잘 나지 않는 개념을 연습하세요.
  • 이 lesson은 기하학적 변환 같은 수학 개념을 사용하고 8학년 이상에게 적합합니다. 이 개념은 세트와 연출 lesson에서 복습할 수 있습니다.

보게 될 프로그래밍 개념에 대한 간단한 복습

변수

var sulleysAge=15;
  • 이는 sulleysAge라는 변수를 생성하고 15라는 값을 저장합니다.

배열

var ages=[2,4,8];
  • 이는 ages라는 배열을 생성하고 2,4,8 세 값을 저장합니다.
  • ages[1]4라는 값을 가지고 있습니다.

함수

var sayHello=function() {
text("Hello world!",100,200);
}
  • 이는 sayHello라는 함수를 만들고 호출되었을 때 "Hello world!"를 화면 (100,200) 위치에 출력합니다.
var sayHello=function(x, y) {
text("Hello world!", x, y);
}
  • sayHello 함수는 이제 텍스트의 좌표를 정의할 두 개의 입력 매개변수 x and y가 있습니다.

객체

var snowman={};
  • 이는 snowman라는 비어있는 객체를 생성합니다.
var snowman={
age:2,
color:"white",
likes:["milk", "cold days"]
}
  • 객체 snowman는 이제 다음 세 개의 프로퍼티가 생깁니다: snowman.age=2, snowman.color="white". snowman의 세 번째 프로퍼티는 likes란 이름의 배열입니다.

즐거운 시간 보내세요!