-
KOSTA 교육 32일차(내장객체, Array, String, Date, 정규표현식, 이벤트)Review 2020. 6. 23. 00:59
18.12.12(수)
배운 내용
- 내장객체
- Array
- String
- Date
- 정규표현식
- 이벤트
1. 내장객체
내장객체는?
JavaScript내에 있는 이미 정의된 내장 객체를 말한다.- 내장객체는 웹브라우저에서 모습을 드러내지 않는 것이 특징이다.
내장객체의 종류
2. Array
Array는?
모든 데이터 형식의 배열변수를 만들 수 있도록 지원하는 객체이다.- 배열을 생성하여 해당 배열에 값들을 넣을 수 있다.
Array 내장객체
- concat을 이용하면 arr3의 배열과 arr2의 배열이 결합되어 출력된다.
- slice를 이용하면 추출한 부분만 출력이 된다.
- 삭제된 배열은 삭제된 부분만 출력이 되고 삭제 후 기존의 배열은 남은 부분이 출력된다.
- 오름차순 정렬시 sort()를 사용하여 정렬이 가능하다.
- 내림차순 정렬시 sort(함수(인자1, 인자2))를 사용하여 a보다 b가 크면 1을 리턴하고, 작다면 -1을 아니라면 0을 리턴한다.
3. String
String은?
문자열을 사용하거나 조작을 지원하는 객체이다.- new 연산자를 사용하지 않고 생성한다.
String 내장객체
- 이 예제에선 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 내장객체
- <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. 이벤트
이벤트는?
웹브라우저에서 일어나는 어떤 동작을 말한다.- 이벤트 핸들러 : 이러한 이벤트를 처리해주는 역할을 말한다.
이벤트 예제
- 기존에는 이벤트를 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로 멈추라는 의미이다.
오늘 교육 간 느낀점
JavaScript를 배운지 2일 차가 되는 날이다. 오늘은 정말 이해가 너무 안된 날이다.
Java의 문법과 너무 다르고 다루는 내용이 다르다보니 비슷한 구조 이긴 해도 오히려 Java와 헷갈려서 더 어려운 부분이 있다.특히 이벤트 부분은 들으면서도 이해가 안됐지만 정리를 하고 복습을 하면서도 이해가 안된다. 내일이면 JavaScript가 마무리 되는데 처음 부터 끝까지 제대로 이해한 것이 사실 없다. 정말 중요한 언어이지만 짧기도 하고 할 과목도 많아서 빨리 진도를 나가야 한다는 것이 서럽기도 하고 참 슬프기도 하다.
다음 프로젝트를 진행할 때 JavaScript를 다시 복습하고 전부 흡수할 수 있도록 노력해야겠다.
'Review' 카테고리의 다른 글
KOSTA 교육 34일차(JQuery, 선택자, function, array, event, style, animate, DOM) (0) 2020.06.23 KOSTA 교육 33일차(This, Window, DOM, AJAX, JQuery) (0) 2020.06.23 KOSTA 교육 31일차(JavaScript, 문법, 변수, 함수, 객체, Prototype) (0) 2020.06.23 KOSTA 교육 30일차(HTML5, 시맨틱 마크업, CSS, link, Font, 박스모델, 테이블&테두리 속성) (0) 2020.06.23 KOSTA 교육29일차(HTML, Tag, div, ol, ul, li, head, meta, body, form, h, input, type) (0) 2020.06.23