WITH US

※ 모든 예제는 여기 에서 진행됩니다.

※ Coffee Script 언어 설명은 여기서 확인할 수 있습니다.

※ Framer 의 클래스, 객체, 변수, 함수에 대한 설명은 여기서 확인할 수 있습니다.

1. 본론 - Switch

0. Switch 문 - Switch

: Switch 문은 여러개의 선택지가 있을때 사용합니다.

위와 같은 사용법 말고 다른 사용법도 있지만, 일단 이정도만 알아도 됩니다.

0. Switch 문 - 예제

switch_exam.txt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
bg = new BackgroundLayer
bg.backgroundColor = "gray"
 
tap = new Layer
    width : Screen.width
    height : 80
    backgroundColor : "#2196F3"
    html : "Change Color Example"
    style : {"font-size" : "30px", "font-weight" : "100", "text-align" : "center","line-height":"#{tap.height}px"}
    
tapWidth = tap.width/4
tapHeight = 40
tapY = tap.height
 
tapRed = new Layer
    x: tapWidth*0
    y: tapY
    width : tapWidth
    backgroundColor : "Red"
    height : tapHeight
    html : "Red"
    style : {"font-size" : "20px", "font-weight" : "100", "text-align" : "center","line-height" : "#{tapHeight}px"}
    
tapYellow = new Layer
    x: tapWidth*1
    y: tapY
    width : tapWidth
    backgroundColor : "Yellow"
    height : tapHeight
    html : "Yellow"
    style : {"font-size" : "20px", "font-weight" : "100", "text-align" : "center","line-height" : "#{tapHeight}px","color" : "black"}
 
tapGreen = new Layer
    x: tapWidth*2
    y: tapY
    width : tapWidth
    backgroundColor : "Green"
    height : tapHeight
    html : "Green"
    style : {"font-size" : "20px", "font-weight" : "100", "text-align" : "center","line-height" : "#{tapHeight}px"}
 
tapBlue = new Layer
    x: tapWidth*3
    y: tapY
    width : tapWidth
    backgroundColor : "Blue"
    height : tapHeight
    html : "Blue"
    style : {"font-size" : "20px", "font-weight" : "100", "text-align" : "center","line-height" : "#{tapHeight}px"}
    
tapRed.onTap ->
    changeColor "red"
tapYellow.onTap ->
    changeColor "yellow"
tapGreen.onTap ->
    changeColor "green"
tapBlue.onTap ->
    changeColor "blue"
    
changeColor = (x) -> 
    print x
    switch x
        when "red" then bg.backgroundColor = "red"
        when "yellow" then bg.backgroundColor = "yellow"
        when "green" then bg.backgroundColor = "green"
        when "blue" then bg.backgroundColor = "blue"
        else bg.backgroundColor = "gray"
    
Colored by Color Scripter
cs
 switch 예제 입니다. 웹환경에서는 잘 돌아가지 않으니, 프로그램으로 돌려보세요

탭이 눌렸을 때 탭에 해당하는 색으로 배경이 바뀌는 예제 입니다. 웹 환경의 Framer에서는 잘 돌아가지 않으니, 프로그램에서 돌려보세요~

※ 모든 예제는 여기 에서 진행됩니다.

※ Coffee Script 언어 설명은 여기서 확인할 수 있습니다.

※ Framer 의 클래스, 객체, 변수, 함수에 대한 설명은 여기서 확인할 수 있습니다.

0. 도입 - 조건문이란?

 조건문은 프로그래밍에서 굉장히 중요한데요, 조건문이란 조건에 따라 참인지 거짓인지 말해주는 것을 말합니다.

 예를 들어 봅시다.

여왕 : 거울아, 거울아 내가 이쁘니 백설공주가 이쁘니?

거울 : (두뇌 풀가동!...)

거울 : FALSE입니다.

왕비 : 이 백설공주 나쁜 기지배...

 이처럼 거울이 조건문을 파악해서 그 결과를 알려주게 됩니다.

 지금은 단 하나의 조건만 판단하였지만, 프로그램을 짜다보면, 셀수없을정도로 많은 조건을 판단하게 됩니다. 

 그렇기 때문에 조건문은 기초이지만 굉장히 편리하며 꼭 알아두어야할 구문입니다.

1. 본론 - 조건문의 종류

 조건문의 종류는 크게 if ,문 switch문, while문 이 있습니다.

 각각의 구문은 사용하는 시기가 조금씩 다른데요, 그냥 하나만 알고 있어서 사용해도 되지만, 각각의 경우에 알맞게 쓴다면 불필요하게 드는 시간을 줄일수 있겠지요?

 꼭 각각의 상황에 맞게 사용하는 습관을 들이세요!

출력하기 - print

 일단 값을 출력해보려면 밑의 기본적인 문법을 아셔야 합니다. 

0. if 문 - 단순 if 문

: 단순히 하나의 조건문만 비교할 때 사용되어집니다.

  위의 그림에서 볼 수 있듯이, if문 다음에는 TRUE인지 FALSE인지 판단할 수 있는 조건문이 옵니다. 혹은, TRUE나 FALSE값이 직접 들어가도 괜찮습니다. 

 조건문을 만들때 사용되어지는 연산식은 다음과 같습니다.

0. if 문 - else if

: 여러개의 조건문을 "단계별로" 비교할 때 사용되어집니다.

0. if 문 - if - else

: 모든 조건이 성립하지 않을 때 else가 실행되어집니다. 조건에 속하지 않는 경우가 없도록, 즉 예외의 경우가 없도록 설정해주는 것입니다.

2. 적용 - Drag하여 불켜기

 Framer 공식 홈페이지의 Document를 확인해보면, Drag 라는 예제를 볼 수 있습니다.

  이를 실행시켜보면, 오른쪽박스가 드래그 가능해지고 움직이면, 드래그된 좌표를 볼 수 있습니다. 저는 layerA의 x값의 좌표를 출력해보았어요.

이를 응용해보면,

3. 결론

bg = new BackgroundLayer
    backgroundColor: "yellow"
	
layerA = new Layer
	opacity: 1
	backgroundColor: "gray"
	html : "꺼짐"
	
layerB = new Layer
	width	: layerA.width * 2
	opacity: 1
	backgroundColor: "white"
	
layerB.placeBehind(layerA)
layerA.draggable.constraints = layerB.frame
layerA.draggable.vertical = false
layerA.draggable.enabled = true 
 
# Returns the offset (x, y), layer.draggable and the layer 
layerA.on Events.Move, (offset, draggable, layer) ->
	if layerA.x >layerA.width
		bg.backgroundColor = "green"
		layerA.html = "켜짐"		
	else if layerA.x <= 0
		bg.backgroundColor = "yellow"
		layerA.html = "꺼짐"
	else
		layerA.html = "중간"

다음 시간에는 switch 구문을 확인해보겠습니다.

※ 모든 예제는 여기 에서 진행됩니다.

※ Coffee Script 언어 설명은 여기서 확인할 수 있습니다.

※ Framer 의 클래스, 객체, 변수, 함수에 대한 설명은 여기서 확인할 수 있습니다.

0. 도입 - 객체지향 vs 절차지향

 다소 틀린 점이 많더라도 이해해주세요!

 언어에는 크게 두가지 종류가 있다고 생각합니다. 

 객체 지향 언어와 절차 지향 언어이죠!

 우리가 배울 Coffee Script언어는 객체 지향 언어에 속하는데요, 

 예를 들어서 두가지 언어의 차이점을 알아볼께요

객체 지향

객체 지향 언어를 사용하는 프로그래머들 끼리 밥을 먹고 있었습니다. 그런데 친구 한명이 늦게 도착했습니다. 그래서 한명이

아주머니 여기 1인분이요

라고 외쳤습니다.

절차지향

절차 지향 언어를 사용하는 프로그래머들 끼리 밥을 먹고 있었습니다. 그런데 친구 한명이 늦게 도착했습니다. 그래서 한명이

아주머니 여기 숟가락하구요 젓가락하구요 컵하구요 물도좀 따라주시구요 고기도 더 가져다 주세요

라고 외쳤습니다.

1. 본문

 무슨 차이가 나는지 느껴지시나요? 대충 느낌만 가져가시면 됩니다.

 이처럼 객체 지향 프로그래머는 "1인분" 이라는 단어 안에 숟가락, 젓가락, 컵, 물, 고기, 물따라는 행위, 고기를 가져다 주는 행위, 세팅하는 행위... 등등 다양한 개념들을 포함시켰습니다. 

 여기서 객체 지향의 주요 개념들을 뽑아낼 수 있습니다.

- 1인분 ==> 클래스

- 숟가락     ==> 변수

- 젓가락     ==> 변수

- 컵           ==> 변수

- 고기        ==> 변수

- 세팅해주는 행위     ==> 함수

 위의 개념도를 보면 각각의 변수(숟가락, 젓가락...)와 함수(행위...)를 클래스(1인분)가 포함하고 있다는 것을 확인할 수 있습니다. 

 즉, Coffee Script를 사용하는 우리는 어떤 일을 하려고 할 때 1인분(클래스)를 호출하면, 1인분안에 있는 것들을 사용할 수 있다는 것입니다.

2. 적용 - CoffeeScript 적용

 그렇다면 Coffee Script에서는 어떻게 동작하는 지 알아볼까요?

 여기에 들어가서 왼쪽 입력창에 new Layer라고 입력을 해보세요.

 그러면 오른쪽 창에 네모 박스가 생긴것을 볼 수 있습니다.

 그럼 Layer가 Class라면 내부에는 많은 변수와 함수들이 있겠지요? 그것들을 한번 사용해보겠습니다.

위의 그림에서 Layer라는 클래스안에 있는 x, y, width, hegith, html 이라는 변수의 값을 수정함으로써, 오른쪽 박스를 변형시킨 것을 볼 수 있습니다.

 이처럼, 같은 클래스라도 안에 있는 변수를 어떻게 다르게 하느냐에 따라서 모양, 속성 들이 달라지게 됩니다.

 그리고, layer = new Layer처럼 Layer에 이름을 지어 줌으로써 나중에 불러와 쓸 수 있습니다. 이를 "객체" 라고 합니다. 

(프로그래밍에서 "=" 등호는 같다라는 뜻이 아니라, "넣는다 혹은 대입한다" 라는 뜻을 가집니다.) 

 그럼 이번에는 함수를 실행시켜볼까요?

3. 결론

 이번에는 객체지향 프로그래밍의 가장 중요한 클래스, 객체, 변수, 함수를 배웠습니다. 다음 시간에는 조건문에 대해서 배워보도록 하겠습니다.