KOSTA

KOSTA 교육(내장객체, Array, String, Date, 정규표현식, 이벤트)

코린이 연대기 2021. 3. 19. 09:39

 배운 내용

  1. 내장객체
  2. Array
  3. String
  4. Date
  5. 정규표현식
  6. 이벤트

 

1. 내장객체

내장객체는?
JavaScript내에 있는 이미 정의된 내장 객체를 말한다.

  • 내장객체는 웹브라우저에서 모습을 드러내지 않는 것이 특징이다.

내장객체의 종류

내장 객체의 종류

2. Array

Array는?
모든 데이터 형식의 배열변수를 만들 수 있도록 지원하는 객체이다.

  • 배열을 생성하여 해당 배열에 값들을 넣을 수 있다.

Array 내장객체

Array 내장객체

배열 예제 1

  • concat을 이용하면 arr3의 배열과 arr2의 배열이 결합되어 출력된다.
  • slice를 이용하면 추출한 부분만 출력이 된다.
  • 삭제된 배열은 삭제된 부분만 출력이 되고 삭제 후 기존의 배열은 남은 부분이 출력된다.

배열 예제 2

  • 오름차순 정렬시 sort()를 사용하여 정렬이 가능하다.
  • 내림차순 정렬시 sort(함수(인자1, 인자2))를 사용하여 a보다 b가 크면 1을 리턴하고, 작다면 -1을 아니라면 0을 리턴한다.

3. String

String은?
문자열을 사용하거나 조작을 지원하는 객체이다.

  • new 연산자를 사용하지 않고 생성한다.

String 내장객체

String 내장객체

String 내장 객체 예제 1

  • 이 예제에선 String 내장 객체에서 가장 자주 사용하는 indexOf()와 charAt()을 풀어볼 것이다.
  • 먼저 <body>에 input문으로 아이디, 이메일을 입력하는 text와 name을 선언하고 submit을 선언하여 check함수의 이벤트를 생성한다.
  • check()의 함수를 만들어 함수 내부에 checkId(), checkEmail()를 넣어서 호출시 호출될 수 있도록 한다.
  • checkEmail() 함수에는 . 을 이용하여 <body>의 value값까지 접근한다.
  • 여기서 email.indexOf(‘@’);를 통하여 ‘@’ 를 반환하게 선언한다.
  • 그리고 if문으로 그 반환값이 -1이라면 재입력을 요구한다.
  • checkId() 함수도 마찬가지로 .을 이용하여 value에 접근한다.
  • for문을 사용하여 반복하여 입력한 문자열의 끝까지 반복을 하며
    그 문자열을 출력하기 위해 id.charAt(i)를 indexOf에 선언하여 반환할 수 있게 해준다.
  • result가 -1인 것을 먼저 선별하여 break를 선언하여 만약 str내에 있지 않는 문자를 입력할 경우 입력이 불가능 하게끔 조치하고 재입력하도록 요구한다.

4. Date

Date는?
날짜와 시간을 처리할 수 있도록 지원하는 함수이다.

  • Date 객체는 밀리초 단위까지 특정 시간을 나타내는 숫자로 되어 있다.

Date 내장객체

Date 내장 객체 1

Date 내장 객체 2

Date 내장 객체 예제

  • <body>에 input botton, text를 선언한다.
  • show() 함수 내에 new 연산자로 Date()인 현재시간을 불러온다.
  • 그리고 각 변수에 시, 분, 초를 선언하고 display value값에 timeValue 변수를 선언하여 표시될 수 있도록 한다.
  • setTimeout함수를 이용하여 show()함수를 1초 간격으로 진행시킨다.
  • clearTimeout(id)함수를 이용하기 위해 Id를 지역변수로 선언하고 Id를 setTimeout의 변수값으로, 그 변수를 종료함수 내 clearTimeout(id)에 선언한다.
  • 각 시작의 함수를 넣는데 종류 후 시작을 실행하면 현재시각이 아닌 멈춘 시간 기준으로 시간이 가게 된다. 그러면 현재 시각의 의미가 없기 때문에 스위치 형식으로 켰다 껐다를 선언하여 시작과 종료를 구분해준다.
  • 지역변수로 0을 선언하고 0이면 종료된 상황, 1이면 실행된 상황으로 나누고 종료시 0으로 초기화, 시작을 누를시 1로 초기화 될 수 있도록 선언한다.

5. 정규표현식

정규표현식는?
일종의 기호로서 특정한 규칙을 가진 문자열의 집합 표현이다.

정규표현식을 적용한 출력방법

정규표현식 예제

  • ‘문자열'.match(/해당문자열/);로 해당문자열에 해당되는 문자열을 출력한다.
  • 번외로 if문에는 조건이 꼭 붙지 않아도 결과값이 있다면 출력이 가능하다.
  • ReqExp.exec(‘문자열')로 해당 문자열에 해당되는 문자열을 출력한다.
  • i : 소대문자 구분 없이, g : 전역검사 를 해주는 역할을 한다.
    정규표현식 선언 시 상황에 맞게 함께 써주면 된다.
  • ReqExp부분에 정규표현식을 정의한 변수를 넣어주고 .exec(문자열 변수)를 선언하여 문자열을 매칭한다.
  • 문자열 변수.replace(정규표현식, 변경할 문자열)를 통해서 순서를 바꾸는 역할을 한다.
  • 예제의 경우 $2-$1을 통하여 Java와 JavaScript의 순서를 바꿨다.
  • 정규표현식 변수.test(문자열)

6. 이벤트

이벤트는?
웹브라우저에서 일어나는 어떤 동작을 말한다.

  • 이벤트 핸들러 : 이러한 이벤트를 처리해주는 역할을 말한다.

이벤트 예제

이벤트 예제 1

  • 기존에는 이벤트를 input에 직접 onclick으로 선언하였지만 script문에서도 선언하여 활용하는 에제이다. doProcess()는 기존의 방법으로, doProcess2()는 예제로 알아보자
  • doProcess()함수에는 result값을 가져오는 DOM인 document.getElementByid (id)를 선언하여 출력을 해주는데 innerHTML을 선언하여 데이터를 뽑아준다.
    그래서 doProcess button을 클릭하였을 때 ‘이벤트 결과'를 출력하도록 한다.
  • doProcess2()는 alert로 출력하도록 한다.
  • 여기서 window.onload는 로드가 끝나고 마지막으로 호출되게 한다.
  • btn 변수에 DOM을 이용하여 객체에 접근한다.
  • btn.onclick을 이용하여 함수를 출력할 수 있다.
    하지만 하나만 출력할 수 있기 때문에 addEventListener를 통하여 출력해야한다.
    addEventListener은 익스플로러 낮은 버전에서 구동이 되지 않기 때문에
    cross browser Event를 사용하여 출력한다.
  • Script문에 src를 js파일을 참조하도록 한다.

  • 그래서 js파일을 생성하여 리터럴객체 를 생성하고 해당 객체에 함수에 매개변수 값을 넣고 capture를 넣어서 capture or bubble을 선언한다.
  • 표준 브라우저 일 때는 element의 매개변수값을 선언하고
    구형 IE를 사용한다면 attachEvent를 선언한다.
  • eventBubble을 방지하기 위하여 표준 브라우저는stopPropagation이 있다면 event를 멈추고 아니라면 cancelBubble로 멈추라는 의미이다.