개발/KH국비지원과정

[KH국비지원 웹개발자 과정] Day_46 키워드, JS배열, 함수,이벤트 등

mabb 2022. 8. 17. 16:55
반응형

해당 포스팅은 강의 복기용으로 키워드를 기록하는 용도의 포스팅입니다.
--------------------------------------------------------------------------------------------------

Javascript 배열
배열의 생성
var arr = new Array();
var arr2 = ["값1","값2","값3","값4",...]

배열 메소드
arr.indexof("값")
  : 배열에서 값이 위치한 인덱스를 리턴함
arr.concat(배열명2)
  : arr.concat(arr2,arr3,arr4,...,) 여러개도 가능, 배열끼리 결합함
arr.join()
  : 배열의 요소를 결합하고 문자열로 반환, 디폴트 시 요소를 ","로 구분함
arr.reverse()
  : 배열의 요소의 순서를 뒤집음
arr.sort()
  : 배열을 정렬함
arr.push("값")
  : 배열의 맨 뒤에 값 추가
arr.pop()
  : 배열의 맨 뒤의 값을 제거함
arr.shift()
  : 배열의 첫번재 요소 제거
arr.unshift()
  : 배열의 맨 앞에 새로운 값 추가
arr.toString()
  : 배열을 문자열로 반환

자바스크립트의 함수
  기본함수
  익명함수
  리턴값이 있는 함수
  매개값이 있는 함수
  자동 실행 함수

내장함수
  encode() / decode()  암호화, 복호화 함수
  eval() 문자열을 자바스크립트 코드로 변환해 실행하는 함수

이벤트
웹 페이지에서 어떠한 행위(사용자의 행동)이 발생한 것을 이벤트라고 한다.
onclick, onchange, onmouseover 같은 것들.
이벤트 활용
이벤트 속성과 이벤트 핸들러(함수)를 연동하여 이벤트 발생 시 특정 기능을 수행하도록 한다.

요소 객체가 가지고 있는 이벤트 속성.
이벤트 속성과 이벤트 핸들러를 연결하는 방법.
함수 작성과 함수 호출을 하는 방법이라고 이해해 봄.

요소객체에 이벤트를 발생시키는 3가지 방법
1) 고전 이벤트 모델
  : 요소객체가 가지고 있는 이벤트 속성에 이벤트 핸들러(함수) 작성
2) 인라인 이벤트 모델
  : 요소객체에 이벤트 속성과 함수명을 설정하고 함수를 따로 작성함
3) 표준 이벤트 모델
  :addEventListener()이용. 한번에 여러가지 이벤트 핸들러 설정 가능.

해당 요소객체는 this

이벤트 버블링
  :자식노드에서 부모노드로 이벤트가 전달되는 것.
이벤트 버블링 방지
  : 이벤트가 발생하면 이벤트 객체가 생성된다. e
  그 이벤트 객체가 e라는 파라미터에 할당이 된다.
  e에는 발생한 이벤트에 대한 정보가 담기게 된다.

 

반응형