1. 변수 선언문
=> (var / let / const) aaa => 변수
2. 함수 선언문(명령어)
=> function Function'Name ( parameter )
Function'Name(Optinal) 이름은 구분을 위한 것이기 때문에 구분이 필요 없을시 삭제 가능
- 자동으로 실행 안됨(호출 시에만)
함수
1. 내장함수 : 만들어져 있는 명령어 => redefine HTML Tag
2. 사용자 정의 함수 : 만들어서 사용하는 명령어
함수 : aa( )
메서드 : ____.aa( )
2. 사용자 정의 함수
2-1) 사용자가 임의로 생성한 함수
2-2) 선언문 : function
2-3) function 함수명( 매개변수, 매개변수,...){
선언문;
선언문;
}
2-4) 호출 시에만 실행
2-4-1) 사용자 정의 호출 방법
- 단독 실행 => function's Name( ) <e.g> testFunc( );
- 변수 의한 실행 => 반환되는 정보값이 있을 경우 사용 <e.g> var i = testFunc( );
- 다른 함수(내장 함수 등)에 의한 실행
=> <e.g>
1) setTimeout("testFunc( )", 5000);
2) setTimeout(testFunc( ), 5000);
- 이벤트에 의한 실행(언제 실행)
=> body tag에서만 작동
<body onload="testFunc( )" > ===> body가 열렸을 때, testFunc()를 수행하라
event : 상황 자체를 가르키는 말(when)
handler / trigger : 상황이 발생했을 때 => on+event
2-5) 함수명 규칙 : 변수명 규칙과 동일
함수 선언의 축소되는 과정
1. 뚱뚱한 화살표( arrow fuction)를 사용하여 함수 선언
2. ES5 일반함수 선언
function(매개변수) {
실행할 문장
}
3. 화살표 함수
(매겨변수) => {
실행할 문장
}
예시
4. 매개변수가 하나인 경우 ( ) 생략 가능
매개변수 => {
실행할 문장
}
5. 매개변수가 없는 경우 빈 괄호 사용
( ) => {
실행할 문장
}
Event(이벤트) + Event handler(이벤트 핸들러)
1. '언제'
2. 이벤트 : 상황,
3. 이벤트 핸들러 : 1) 이벤트 사용, ~~했을 때 2) 이벤트 앞에 'on' 추가
event : 상황 자체를 가르키는 말(when)
handler / trigger : 상황이 발생했을 때 => on+event
<Event> => <Event Handler>
load => onload
unload => onunload
mouseover => onmouseover
mouseout => onmouseout
focus => onfocus
blur => onblur
click => onclick
mousedown => onmousedown(물리적으로 마우스를 누르고 있는 순간)
mouseup => onmouseup(물리적으로 마우스를 누르고 있는 상태에서 띈 순간)
TIP
focus(선택 된 상태) against blur(선택이 사라진 상태)
mousedown (물리적으로 마우스를 누르고 있는 순간)
mouseup (물리적으로 마우스를 누르고 있는 상태에서 띈 순간)
load(문서가 시작하다/읽다/ 등등)
'나의 FE피봇이야기 > Javascript' 카테고리의 다른 글
| [addEventListner] (0) | 2023.11.10 |
|---|---|
| [Javascript] 변수선언, 함수, 생성자, 매서드 등 확인하는 방법 (0) | 2023.11.08 |
| HTML과 JavaScript 차이점 2개 (0) | 2023.11.08 |
| [JS] 대입 연산자의 활용 '지역변수 -> 전역변수' (0) | 2023.11.07 |
| [Swiper]swiper 라이브러시 사용시 시행착오 (0) | 2023.10.16 |
