2024.08.08. 이벤트, 배열

* 이벤트(EVENT)

- 웹 브라우저나 사용자가 행하는 어떤 동작. 웹 문서 영역 안에서 이루어지는 동작만을 의미함. 

  예를들어 웹 문서 영역을 벗어나 제목 표시줄을 클릭하는 행위는 이벤트가 아님.
- 웹에서의 이벤트란? 어떤 대상(요소)에 사용자가 특정 액션을 취하는 것
  ex) 버튼 클릭, 텍스트(키보드 키) 입력, 마우스 이동 등
- 이벤트가 발생하면 해당 이벤트에 대한 동작을 처리하도록 하는 것을 
  이벤트 처리(Event Handling)라고 하고, 
  이벤트 처리를 위한 함수를 이벤트 처리기(Event Handler) 라고 한다.

[ 이벤트 처리(Event Handling) ]
- 이벤트가 발생했을 때 특정 작업을 수행하도록 하는 것
  ex) 버튼 클릭 이벤트 발생 시 alert() 함수를 호출하여 메세지를 표시
      텍스트 입력 이벤트 발생 시 숫자가 입력됐는지 판별
      이미지에 마우스 오버 이벤트 발생 시 다른 이미지로 전환
- 이벤트가 등록될 대상 컴포넌트(버튼, 텍스트상자 등의 요소) 태그에 
  onXXX 속성을 사용하여 이벤트 종류를 지정하고
  해당 속성의 값으로 자바스크립트 코드(이벤트 핸들러)를 통해 이벤트 처리 수행 가능
  ex) 마우스 버튼을 클릭 시 동작할 이벤트 : click => onclick 으로 등록
      마우스를 특정 대상 위에 가져다 대는 이벤트 : mouseover => onmouseover 로 등록
  => onXXX 속성의 값으로 자바스크립트 함수(내장함수 포함) 를 직접 호출하여 작업 수행
     (이 때, XXX 부분에 이벤트명을 지정)
     ex) onclick="alert('버튼클릭됨!')" 
         => 주의! 함수 호출 코드를 큰따옴표 내부에 지정할 경우
            문자열 데이터 등을 표현할 때는 작은따옴표를 사용하여 표현하면 된다!

< 특정 태그에 대한 이벤트 등록 기본 문법 >
<XXX태그  onXXX="자바스크립트함수호출()">   

 

< 사용방법 >

<input type="button" value="버튼3" ondblclick="alert('버튼 3 더블클릭')">
<!-- 버튼 더블클릭시 작동하는 이벤트-->

<button onclick="numberGame(prompt('숫자를 입력하세요.'))">숫자게임 시작</button>
<!-- 사용자 정의 함수 numberGame()안에 또다른 함수 prompt()를 넣어 사용가능함. -->

<img alt="" src="../images/1.jpg" width="200" height="150" onmouseover="zoomIn(event)" onmouseout="zoomOut(event)">
<!-- 이미지 위에 마우스를 올릴때(onmouseover)와 내릴때(onmouseout) 발생하는 이벤트 -->

 

---

[ 배열(Array) ]
- 복수개의 데이터를 하나의 묶음으로 관리하기 위한 자료구조
  => 일반 변수는 한 번에 하나의 값만 저장 가능하지만
       배열은 한 번에 여러개의 값(데이터)을 저장 가능하며 하나의 변수로 모두 처리 가능
- 배열도 객체이다.
- 배열은 복수개의 데이터가 저장되는 공간을 인덱스(번호)로 구분하며,
  배열의 인덱스는 0번부터 차례대로 자동 부여됨(n개 배열 : 0 ~ n-1 번까지)
  => 5개의 데이터 저장이 가능한 배열 공간의 인덱스는 0 ~ 4번까지 부여됨  

[ 자바스크립트에서의 배열 ]
- Array 객체 사용
- new Array() 형식으로 배열 객체(인스턴스) 생성 가능
  (필요에 따라 Array() 괄호 내부에 배열 크기를 정수로 지정 가능함)
- 배열객체명.length 속성을 통해 배열의 크기 리턴 가능(자바와 동일)
- 자바의 배열과 달리 자바스크립트에서의 배열은 생성 후에도 크기가 변할 수 있다!
- 하나의 배열에 저장되는 데이터 타입에는 제한이 없다!
  (정수, 실수, 문자열, 객체, 배열, 함수 등 모든 타입 저장 가능)
- 단순히 배열 내의 요소 전체를 출력하기 위해서는 출력문에 배열명만 지정하면 출력 가능

< 배열 생성 기본 문법 >
1. 배열에 저장할 데이터가 미리 준비되지 않은 경우(배열만 먼저 생성하는 경우)
=> new Array(); 또는 new Array(배열크기);
=> let 변수명 = new Array(); (배열 생성 후 해당 배열을 좌변의 변수에 저장)

2. 배열에 저장할 데이터가 미리 준비된 경우(배열 생성 시점에서 데이터를 저장하는 경우)
=> let 변수명 = [데이터1, 데이터2, ..., 데이터n];
   또는
   let 변수명 = Array(데이터1, 데이터2, ..., 데이터n);

< 배열 접근 기본 문법 >
배열명[인덱스]
=> 배열에 데이터 저장 시 배열명[인덱스] = 데이터; 형식으로 저장
   (메서드를 호출하여 저장하는 방법도 있음)
   
< 배열을 순차적으로 접근하는 기본 문법 = 공식 >
=> for문을 활용하여 배열의 첫번째 인덱스(0)부터 마지막 인덱스(배열크기 - 1) 까지 반복

for(let i = 0; i < 배열명.length; i++) {}
=> 제어변수 i 를 배열의 인덱스로 활용

 

 [자바스크립트 에서 제공하는 배열 메서드 - 배열명.메서드명()]
1. push() : 배열 내의 맨 마지막 인덱스에 새 데이터(요소) 추가. 기본적인 배열데이터 추가방법.
  => 요소 추가 후 증가된 배열의 크기를 리턴해줌.
  => 파라미터 : 추가할 데이터(요소) 리턴값 : 증가된 배열 크기

// 아무런 데이터도 갖지 않는 arr 배열 생성
let arr = new Array();
// 정수 데이터 1,2,3 을 갖는 arrNum 배열 생성
let arrNum = [1, 2, 3];
// 문자 데이터 "a" ~ "e" 갖는 arrStr 배열생성
let arrStr = ["a","b", "c", "d", "e"];
	
arr.push("홍길동"); // arr 배열의 마지막 인덱스로 "홍길동" 추가
// => 기존에 아무것도 없는 배열이므로 0번 인덱스에 홍길동이 추가됨.

arr.push("이순신"); // arr 배열의 마지막 인덱스로 "이순신" 추가
// => 1번 인덱스에 이순신이 추가됨.

// arrNum 배열 맨 뒤에 정수 4 추가
arrNum.push(4);

// arrStr 배열 맨 뒤에 "f" 문자열 추가 => 메서드 호출 후 리턴되는 값을 변수 pushResult에 저장.
let pushResult = arrStr.push("f");
document.write("리턴값 : " + pushResult); // 리턴값 : 6

2. pop : 배열 내의 맨 마지막 인덱스 요소 꺼내서 리턴
  => 파라미터 : 없음, 리턴값 : 꺼내진 마지막 요소(데이터)
 => 배열 내에서 꺼낸 데이터는 배열에서 제거됨.

let popResult = arrNum.pop();  // 4
let popResult2 = arrNum.pop(); // 3
document.write("arrNum : " + arrNum +", arrNum.length : " + arrNum.length + "<br>")
// arrNum : 1,2, arrNum.length : 2

3. unshift() : 배열내의 맨 처음 인덱스에 새 데이터 추가.(기존데이터가 한칸씩 뒤로 밀림.)
 => 증가됨 배열의 크기 리턴.
 => push() 의 반대

let unshiftResult = arrNum.unshift(0);
document.write("unshift 메서드 호출 시 리턴값 : " + unshiftResult + "<br>")
// unshift 메서드 호출 시 리턴값 : 3
document.write("arrNum : " + arrNum +", arrNum.length : " + arrNum.length + "<br>")
// arrNum : 0,1,2, arrNum.length : 3

4. shift() : 배열내의 맨 처음 인덱스 요소 꺼내서 리턴(배열 내의 해당 데이터 제거)
 => pop() 의 반대 

let shiftResult = arrNum.shift(0);
document.write("shift 메서드 호출 시 리턴값 : " + shiftResult + "<br>")
//shift 메서드 호출 시 리턴값 : 0
document.write("arrNum : " + arrNum +", arrNum.length : " + arrNum.length + "<br>")
//arrNum : 1,2, arrNum.length : 2

* push() + pop() 메서드 조합하여 Stack(스택) 자료구조 구현 가능
  => 후입선출(Last In First Out) 구조 : 마지막에 삽입된 데이터가 먼저 출력됨.
  => 웹브라우저의 뒤로/ 앞으로, 응용프로그램의 Undo/Redo , ctrl + z , ctrl + y 기능에 활용됨. 

* push() + shift() 메서드 조합하여 Queue(큐) 자료구조 구현 가능
  => 선입선출(First In First Out) 구조 : 먼저 삽입된 데이터가 먼저 출력됨.
  => 은행의 대기표, 식당의 대기시스템 등에서 활용됨.

* indexOf() 메서드 : 배열 내에서 특정 요소 탐색하여 해당 요소의 위치(인덱스) 리턴
  : 단, 찾을 요소가 없는 경우 -1 리턴

document.write("arrNum 배열의 정수2의 위치 : " + arrNum.indexOf(2) + "<br>"); //1
document.write("arrNum 배열의 정수2의 위치 : " + arrNum.indexOf(12) + "<br>");//-1