[Javascript]

[반복문]

for(var index=0; index<9; index++){}

[Event 심화]

1. 이벤트의 종류

• 이벤트는 프로그램에서 행하는 유저의 행동

1. onchange : 유저가 값을 변화시켰을 때
2. onmouseover : 마우스가 태그에 올라갔을 때
3. onmouseleave : 마우스가 태그에서 벗어날 때
4. onscroll 스크롤을 할 때

2. Drag & Drop

• 이 이벤트를 실질적으로 3개의 이벤트가 합쳐져서 구동되는 이벤트

1. ondragstart: 드래그를 시작 했을 때
2. ondragover: 드래그가 된 채로 태그 위로 마우스에 올라갔을 때
3. ondrop : 드롭이 됐을 때

[ Drag & Drop Example ]

var color = null

function dragStartEvent(e) {
  var target = e.target
  color = window.getComputedStyle(target).backgroundColor
}
function dragOverEvent(e) {
  e.preventDefault()
}
function dropEvent(e) {
  var target = e.target
  target.style.backgroundColor = color
}

[컨벤션]

[정의]

• 코딩 규약 : 코딩을 하는 룰 (작성 하는 규칙)

[why?]

• 개발은 기본적으로 협업이 베이스
  -> 서로의 코드를 쉽게 알아보기 위한 방안

[구성]

• 엔터를 치는 위치 , 탭을 언제 넣을지 , 이름 짓는 방법 등

[이름 짓기의 중요성]

• 누구나 이 단어를 봤을 때 기능을 한 번에 유추할 수 있게
• 변수의 이름이 길어지는 것은 상관 없음
• 방식
  1. 개발자들이 많이 사용하는 단어를 써야 함
  2. 요약 하지 말 것
  3. 이미 개발자들이 작성하는 작성 규칙 중에 한 개를 사용할 것
     a. Camel : 단어 기준 끊어서 대문자로 시작 (mainLoginBtn)
     b. Snake : 단어 기준 끊어서 언더바 넣기 (main_logi_btn)
     c. Pascal : Camel이지만 맨 앞을 대문자 (MainLoginBtn)
     -> 파일이나 class의 이름 지을 때 주로 사용
  4. 이름의 구성
     a. 페이지명_기능_역할 : main_login_button
     b. 함수의 이름엔 동사 먼저 쓰기 등
     

[과제]

• 퍼즐 만들기
• 위에 9칸 / 밑에 9칸
• 완전한 드래그앤드랍 구현