✅ 함수

☑️ 함수(function) 장점

• 각 명령의 시작과 끝은 명확하게 구분
• 필요할 때마다 해당 함수 실행가능(이름 있을 경우)

☑️ 함수 선언(함수 정의)

• 함수가 어떤 명령을 처리해야 할지 미리 알려주는 것
• function 예약어를 사용하고, {} 안에 실행할 명령을 작성
  

☑️ 함수 호출

• 함수 이름을 사용해 실행
  

☑️ 함수 적합 위치

전역의 성질이 있어서 어디든 상관 없지만 최상단에 놓는게 구분하기 쉽다.

✅ let 과 const

☑️ var 단점

함수 안에서는 지역변수로서 사용되지만, 함수 밖에서 선언이 될 경우 전역변수로 호이스팅 되기 때문에 혼란을 야기 할 수 있음

보통 선언 후 값을 넣는 경우도 있는데 왠만하면 선언과 동시에 값을 넣기를 추천함

변수를 재선언 할 수 있는데, 이렇게 되면 이전 변수를 덮어쓸 수 있어서 오류가 발생할 확률이 높아짐

☑️ 개념

let - 변수(호이스팅x, 재선언 불가, 재할당만 가능)
const - 상수(호이스팅x, 재선언 불가, 재할당 불가, 배열은 요소 추가 가능)
둘 다 블록 영역의 스코프를 지님

☑️ 사용 방법

• 전역 변수는 최소한으로 사용한다
• var 변수는 함수의 시작 부분에서 선언한다 (호이스팅 방지)
• for문의 카운터 변수는 블록 변수(let)를 사용하는게 좋다
• ES6를 사용한 프로그램이라면 var보다 let을 사용한다

☑️ 매개변수와 인수

• 매개변수(parameter)
  

• 인수(argument)
  

똑같은 개념이라고 생각해도 될 듯

☑️ return 문

• 함수 실행을 종료하고, 값을 반환하는 문
  

☑️ 함수 표현식

• 함수에 이름을 넣지 않고 변수에다가 넣는 것
• 함수는 전역의 성질을 지니고 있지만, 변수에 넣는 순간 호이스팅이 안됨
  

☑️ 즉시 실행함수

• 함수 정의와 동시에 실행하는 함수
• 변수 할당 가능
  

즉시 실행함수에 매개변수와 인수를?

앞괄호에는 매개변수(a, b), 뒷괄호에는 인수(3, 5)를 넣는다.

☑️ 화살표 함수

• => 을 사용해서 함수 선언

const hi = () => "출력값";

const hi = (a, b) => a + b;

☑️ 이벤트와 이벤트 처리기

• 웹 문서 안에서 하는 동작 그 자체

이벤트 처리기는?

• 이벤트가 발생했을 때 어떤 함수를 실행할지 알려줌
• 태그 안에서 이벤트를 처리할 때는 "on" + "이벤트명" 사용(ex. 클릭하면 onclick 사용)

💯 마우스 이벤트

• click : 마우스로 눌렀을 때 이벤트가 발생.
• dbclick : 더블 클릭
• mousedown : 버튼을 누르는 동안
• mousemove : 마우스 포인터가 움직일 때 발생
• mouseover : 마우스 포인터가 요소 위로 올라갈때 발생
• mouseout : 마우스 포인터가 요소에서 벗어날 때
• mouseup : 마우스 버튼을 누르다가 손을 땔 때 발생

💯 폼 이벤트

• blur : 폼 요소에 포커스를 잃었을 때 발생
• change : 목록이나 체크 상태 등이 변경되었을 때 이벤트가 발생
  ( <input>, <select>, <textarea> 태그에서 사용됨 )
• focus : 폼 요소에 포커스가 놓였을 때 발생
  ( <label>, <select>, <textarea>, <button> 태그에서 사용됨 )
• reset : 폼이 다시 시작되었을 때 이벤트가 발생
• submit : submit 버튼을 눌렀을 때 이벤트가 발생합니다.

💯 키보드 이벤트

• keypress : 사용자가 키를 눌렀을 때 이벤트가 발생합니다.
• keydown : 사용자가 키를 누르는 동안에 발생
• keyup : 키에서 손을 땔 때 발생

💯 문서 로딩 이벤트

• abort : 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생
• error : 문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
• load : 문서 로딩이 끝나면 이벤트가 발생합니다
• resize : 화면의 크기가 바뀌었을 때 이벤트가 발생합니다
• scroll : 문서 화면이 스크롤되었을 때 이벤트가 발생합니다
• unload : 문서를 벗어날 때 이벤트가 발생합니다.

☑️ 이벤트 예시

<div id="item">
  <img src="images/flower.1.jpg" alt="">
  <button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
</div>

• 버튼에서 click 이벤트가 발생하면, click 이벤트 처리를 찾아서 함수 실행

<div id="desc" class="detail">
  <h4>민들레</h4>
  <p>어디서나 매우 흔하게 보이는 __ 널리 퍼진다.</p>
  <button id="close" onclice="hideDetail()">상세 설명 닫기</button>
</div>

똑같은 개념