[JavaScript] 함수와 객체(내장객체), 이벤트
함수(Function)
함수(Function)란 실행문을 저장해서 사용하게 만들어 놓은 기능 단위의 묶음이다. 여러 번 반복되는 작업을 함수로 저장해 놓고 필요할 때 호출해서 쓸 수 있다.
함수를 호출하기 위해서는 먼저 선언(정의)을 해야 한다. function 함수명(매개변수1, ...) { 실행문; } 식으로 선언해서 함수명(데이터1, ...); 으로 호출하면 되는데, 매개변수와 데이터는 필요 없을 경우 안 써도 된다. 리턴 값이 있을 때는 실행문 뒤에 return문을 쓰기도 한다.
그리고 익명함수를 사용하고 싶으면 참조변수=function( ) { 실행문; } 으로 선언하고 참조변수명( ); 으로 호출한다. 참고로 어떤 함수든, 함수 안에 선언된 변수(지역변수)는 함수 안에서만 사용 가능하고 그 외(전역변수)에는 함수 밖에서도 가능하다.
alert( ); 나 prompt( ); 와 같은 것도 함수인데, javascript 안에 기본으로 포함되어있는 내장함수라고 불린다.
함수가 끝나는 시점은 2가지 경우가 있다.
1. 끝까지 실행했을 경우
2. 값을 return한 경우(return문을 만난 경우)
여기서 return문은 이 함수를 끝내고 빠져나간다는 뜻으로 제어문의 break문과 같은 역할을 한다. 또한 함수 안에서 해당 함수를 호출하게 되면 재귀함수, 즉 무한루프가 된다.
아래는 prompt 대신 함수를 사용하여 id와 pw를 받는 로그인 코드다. 리턴 값은 필요하지 않기 때문에 생략했다.
function login(id, pw) { //매개변수 id와 pw
var ID = "admin", PW = "1234"; //입력값과 비교할 기본값
if(id == ID) {
if(pw == PW) {
alert(id + "님 로그인 성공");
}
else {
alert("비밀번호 오류");
}
}
else {
alert("아이디 없음");
}
}
login("admin","5678"); //함수 호출(데이터 id와 pw : 입력값), 비밀번호 오류 출력
객체(Object) - 내장객체
자바스크립트에서 객체는 String, Date, Array, document, location 등이 있다. 객체를 사용해서 프로그래밍할 수 있도록 구분하는 것을 객체 추상화라고 한다. 객체의 구성에는 속성과 기능이 있는데, 속성은 변수, 기능은 함수 또는 메서드를 쓴다. 그리고 메모리에 로드되어 실행 대기상태인 객체는 인스턴스라고 한다. 객체를 메모리에 로드하려면 var 참조변수(=레퍼런스) = new 객체생성함수( ); 로 하면 되고, new는 객체를 생성한다는 뜻의 연산자다.
객체는 내장객체, 브라우저 객체 모델(BOM), 문서 객체 모델(DOM)로 나누기도 하며, 먼저 내장객체는 자바스크립트 안에 포함된 객체로 Array, String, Date, Math, Number 등이 있다. 여기서 날짜 객체인 Date는 1~12월이 아닌 0~11월까지 있어서 사용 시 +1 해줘야 한다.
var phone = new Object(); //객체 생성
phone.price = 100;
phone.color = "black"; //객체 속성
phone.on = function() {
document.write("전원 on"); //객체 기능
}
phone.on(); //호출
//Date
var day = new Date("2022/1/1"); // 2022년 1월 1일
day = new Date(2022,1,1); // 2022년 2월 1일
배열(Array)은 데이터를 한 번에 여럿 저장하는 연속된 공간을 말한다. 데이터 타입 상관없이 저장할 수 있고, 배열 객체를 생성할 때는 var 참조변수 = new Array(값1, ...); 형식으로 쓰거나 우변에 그냥 [값1, 값2, ...]; 을 써서 바로 초기화할 수도 있다. 배열의 각 데이터(요소)는 배열 이름, 즉 객체 주소를 불러 접근한다. 각 요소들은 변수처럼 사용할 수 있고 인덱스는 1이 아니라 0부터 시작한다. 만약 존재하지 않는 인덱스를 호출할 경우, undefined로 표기된다. for문에 배열을 사용할 때는 조건식, 증감식이 없어도 for(var 변수명 in 배열명) { }; 식으로 사용할 수도 있다.
문자 객체(String)도, 문자들이 나열된 것이기 때문에 배열의 한 종류다. 선언은 var 참조변수 = new String(문자); 로 하고, 초기화는 우변에 "문자"; 를 쓰면 된다. 문자열 데이터에 사용하는 특정 함수들이 있는데, charAt(인덱스)는 인덱스 위치의 문자를 가져오는 것이고 indexOf('문자')와 lastIndexOf('문자')는 해당 문자가 문자열에 있는지 체크하는 것이다. 또한 문자열을 특정 위치에서 자르는 함수로 substring(시작부분, 끝부분+1)과 slice(시작, 끝+1), substr(시작, 문자갯수)가 있다.
//Array
var arr = new Array("apple", "banana", "lemon");
for(var i in arr) {
document.write(arr[i]); //모든 데이터 출력 후 반복 종료
}
document.write(arr.join("/")); //데이터 연결문자(apple/banana/lemon 출력)
arr.sort(); //오름차순 정렬
arr.reverse(); //역순 정렬
//String
var txt = "안녕 하세요";
txt.length //문자열 길이(6)
txt.charAt(3) //3번 인덱스 문자(하)
txt.indexOf("안") //해당 문자 인덱스(0)
txt.slice(0,3) //0~2번 인덱스 문자(안녕)
txt.substr(0,2) //0번 인덱스부터 2문자(안녕)
txt.split(" ") //" "를 기준으로 구분(안녕,하세요)
이벤트
BOM과 DOM을 설명하기 전에 이벤트를 먼저 알아야 한다. 이벤트는 브라우저 방문자(클라이언트)가 행동하는 모든 동작을 의미한다. 이벤트 리스너가 이벤트 형태를 감지하면 이벤트 핸들러가 동작하여 처리한다. 보통 html 코드로 작성하지만 이벤트 핸들러 동작은 JS도 사용 가능하다.
아래 화면은 이벤트 핸들러를 동작시키는 예시다. JS에서 함수를 작성하여 html 코드에서 호출하는 방식으로 결합할 수 있고, html 코드에서 onclick(클릭했을 때), onmouseover(마우스를 위에 올렸을 때) 등 on~ 이라고 적힌 곳에 넣어서 사용한다.
<!-- javascript -->
<head>
<script type="text/javascript">
function fun() {
alert("함수");
}
</script>
</head>
<!-- html -->
<body>
<input type="button" value="버튼1" onclick="alert('버튼1 클릭');"><br>
<input type="button" value="버튼2" onclick="fun();"><br>
<input type="button" value="버튼3" onclick="location.href='https://www.naver.com';"><br>
<input type="button" value="버튼4" ondblclick="alert('더블클릭');"><br>
<input type="text" onkeyup="alert('키업');"><br>
<input type="text" onfocus="alert('포커스');" onblur="alert('블러');"><br>
<hr>
<table>
<tr bgcolor="yellow" onmouseover="style.background='green';" onmouseout="style.background='yellow';">
<td>1</td><td>2</td>
</tr>
<tr bgcolor="yellow" onmouseover="style.background='green';" onmouseout="style.background='yellow';">
<td>1</td><td>2</td>
</tr>
</table>
</body>위와 같이 코드를 작성한 후 런을 하면 아래처럼 페이지가 뜬다.
각 버튼을 클릭(onclick), 더블클릭(dblclick)했을 때 경고창이 뜨거나 네이버로 이동하는 동작이 실행된다. 텍스트의 경우 키보드 버튼에서 손을 떼거나(onkeyup) 텍스트가 활성화됐을 때(onfocus)와 포커스가 해제됐을 때(onblur) 해당 경고창이 뜬다.
그리고 테이블에서 각 행에 마우스를 올리면(onmouseover) 초록색으로 바뀌고, 마우스를 내리면(onmouseout) 다시 노란색으로 바뀌는 동작이 수행된다.
참고사항으로 웹 페이지에서 F12를 누르면 console창을 볼 수 있다. 에러가 났을 때 콘솔 창에 혹시 SyntaxError가 뜬다면 문법 에러, 즉 코드를 잘못 쓴 것이다. 더불어 페이지에서 동작을 실행할 때 디버깅(코드에 브레이크 포인트를 걸어 포인트마다 멈춰서 코드를 체크하는 것)을 해볼 수도 있다. 디버깅은 웹 페이지에서 F12 - Sources - html 파일 선택 - 브레이크 포인트 지정 - F5 - F8 로 실행하고 F5로 빠져나가면 된다.