1. 함수란?
자주 사용하는 프로그램을 하나로 묶어서 재사용 하는 기술
함수가 어떤 명령을 처리 해야 할지 미리 알려주는 것 : 함수 선언
선언한 함수를 가져와 사용하는 것 : 함수 실행
2. 함수 선언
function 함수명(인자1, 인자2) { //인자가 없다면 ()만 입력
//내부 프로그램
return ; // 출력할 것이 있다면 표시
}
예) function addNumber(a, b) {
var sum = a + b; //인자 2개를 받아서 합한 뒤 sum에 저장
return sum; //sum 출력
}
ES6부터는 => 표기법으로 함수 선언 가능
const hi = function() { return "하여~"; } //function 선언법
const hi = () => { return "하여~"; } //화살표 표기법으로 함수 선언
3. 함수 실행
함수명(인자1, 인자2); //인자가 없다면 ()로 생략 가능
4. let, constant 로 변수 선언
- 함수 안에서만 사용되는 변수 : 지역변수, 로컬 변수
- 스크립트 전체에서 사용되는 변수 : 전역변수, 글로벌 변수
- var : 변수를 선언하기 전에 사용해도 오류 발생 안하고, 재선언이 가능함, 같은 이름을 사용할 경우 덮어쓰기도 함(유연한 변수 선언), 함수 영역의 범위를 가짐.
- let : 블록 영역의 범위를 가짐, 지역 변수에 사용하기 좋음. 재할당은 가능, 재선언은 불가능, 변수를 초기화 하기 전까지는 사용할 수 없음.
- const : 상수로 선언함. 변하지 않음, 블록 레벨의 범위에 사용
- 전역 변수 선언 : 변수이름 = 초기값; //변수 이름 앞에 아무것도 적지 않음
5. 변수 선언 시 가이드
- 전역 변수는 최소한으로 사용
- var 변수는 함수의 시작 부분에 선언
- for문에서 카운터 변수를 사용할 때는 let를 사용하기
- ES6 버전을 사용하면 var보다 let를 사용하는 것 권장
6. 이벤트 다루기
이벤트란? 웹 브라우저나 사용자가 행하는 어떤 동작을 뜻함.
주로 마우스, 키보드를 사용할 때, 웹 문서를 불러올 때, Form에서 내용을 입력할 때 발생
이벤트와 이벤트 처리 함수를 연결해주는 것 : 이벤트 처리기 또는 이벤트 핸들러
이벤트 핸들러는 이벤트 이름 앞에 on을 붙여서 사용.(예) click 이벤트 - onclick
(예) 클릭 이벤트가 발생하면 상세 설명 내용은 화면에 표시하고 버튼은 감춤
<button class="over" id="open" onclick="showDetail()">상세설명보기</button>
function showDetail() {
document.querySelector('#desc').style.display = "block"; //상세 설명 내용을 화면에 표시
document.querySelector('#desc').style.display = "none"; //상세 설명 보기 버튼 감춤
}
7. 여러 이벤트 다루기
댓글 없음:
댓글 쓰기