Coffee script for Framer - 조건문 if

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

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

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

0. 도입 - 조건문이란?

---

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

 예를 들어 봅시다.

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

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

거울 : FALSE입니다.

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

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

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

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

1. 본론 - 조건문의 종류

---

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

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

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

출력하기 - print

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

0. if 문 - 단순 if 문

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

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

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

비교 연산자	내용	예제	결과
a<b	a보다 b가 크면 true	1<3	true
a>b	a보다 b가 작으면 true	1>3	false
a<=b	b가 a보다 크거나 같으면 true	1<=1 or 1<3	true
a>=b	b가 a보다 작거나 같으면 true	1>=1 3>=1	true
a == b	a와 b가 같으면 true	1==1	true
a!=b	a와 b가 같지않으면 true	1!=1	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 = "중간"

간단하게 코드를 짜보았는데요, 잘 모르겠는 함수나, 변수는 Framer Doc을 확인하시기 바랍니다! 

결국 공부는 혼자 하는거니까요!

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