전역의 성질이 있어서 어디든 상관 없지만 최상단에 놓는게 구분하기 쉽다.
함수 안에서는 지역변수로서 사용되지만, 함수 밖에서 선언이 될 경우 전역변수로 호이스팅 되기 때문에 혼란을 야기 할 수 있음
보통 선언 후 값을 넣는 경우도 있는데 왠만하면 선언과 동시에 값을 넣기를 추천함
변수를 재선언 할 수 있는데, 이렇게 되면 이전 변수를 덮어쓸 수 있어서 오류가 발생할 확률이 높아짐
let
- 변수(호이스팅x, 재선언 불가, 재할당만 가능)
const
- 상수(호이스팅x, 재선언 불가, 재할당 불가, 배열은 요소 추가 가능)
둘 다 블록 영역의 스코프를 지님
매개변수(parameter)
인수(argument)
똑같은 개념
이라고 생각해도 될 듯
즉시 실행함수에 매개변수와 인수를?
앞괄호에는 매개변수(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>
똑같은 개념