43일차: 자바스크립트_Date객체 / 배열 / String객체 / Math 객체 / 이벤트 처리 2021.08.12

목차

1.     내장 객체: Date 객체

2.     배열

3.     내장 객체: String 객체

4.     내장 객체: Math 객체

5.     내장 함수 : 계산기 프로그램 작성

6.     자바스크립트 이벤트 처리 방식

 

 

1. 내장 객체: Date 객체                → ★date02.html 참고

 

1) 브라우저 내장 객체의 종류

• status: 브라우저 상태선에 나타날 문자열 (한글 6장 참고)

• setTimeout(): 지정된 시간동안 기다린 후 명령 실행 (한글 6장 참고)

• clearTimeout(): setTimeout() 해제

• onload: 브라우저를 실행하면 시작됨

• onMouseOver: 마우스를 위로 올렸을 때 실행됨

• onMouseOut: 마우스를 뗐을 때 실행됨

 

2) Date 객체를 이용해서 브라우저 상태 표시줄에 시간 출력하기

• 브라우저 상태 표시줄에 출력: window.status=y+"-"+m+"-"+d+" "+h+":"+mm+":"+s;

• 지정된 시간이 경과된 다음에 명령을 실행: setTimeout(명령, 시간(1/1000초))):

w=setTimeout("show()", 1000);                 // 1초에 한 번씩 show() 함수 호출

 

2. 배열                 

 

1) 배열의 형식              → ★array01.html 참고

① 방법 1

str=new Array();

str[0]=80;

str[1]=90;

str[2]=70;

 

② 방법 2

str=new Array(80, 90, 70);

 

③ 방법 3

str=[80, 90, 70];

 

2) 배열의 속성과 메소드             → ★array02.html / array03.html 참고

① length

- 배열의 크기를 구하주는 속성

 

② join()

- 특정 문자(ex. '-')를 기준으로 배열 값들을 하나의 문자형 데이터로 결합

- ex) document.write(num.join('-')+"<br>");              // 사당-교대-방배-강남

       document.write(typeof(num.join('-'))+"<br>");    // string

 

③ reverse()

- 배열 객체의 값 순서를 반대로 바꾸어주는 함수

- ex) document.write(num.reverse()+"<br>");          // 강남,방배,교대,사당

       document.write(typeof(num.reverse())+"<br>"); // object

 

④ sort()

- 배열 객체의 값들을 오름차순으로 정렬 (문자 : 사전 순 정렬)

- ex) document.write(num.sort()+"<br>");              // 강남,교대,방배,사당

 

⑤ sort() + reverse()

- 배열 객체의 값들을 내림차순 정렬 (문자 : 사전 역순 정렬)

- ex) document.write(num.sort().reverse()+"<br>");   // 사당,방배,교대,강남

 

⑥ slice(start index, end index)

- start ~ end-1번 원소를 추출

- ex) document.write(greenLine.slice(1,3)+"<br>");   // 교대,방배

 

⑦ concat()

- 2개의 배열 객체를 하나로 결합

- ex) document.write(greenLine.concat(yellowLine)+"<br>");  // 사당,교대,방배,강남,미금,정자,모란,수서

 

⑧ pop()

- 배열 데이터 중에서 마지막 데이터를 삭제

- ex) greenLine.pop();                              // '강남' 삭제

       document.write(greenLine+"<br>");     // 사당,교대,방배

 

⑨ push()

- 배열 객체의 마지막 인덱스에 새로운 데이터를 삽입

- ex) greenLine.push('삼성');                    // '삼성' 삽입

       document.write(greenLine+"<br>");   // 사당,교대,방배,삼성

 

⑩ shift()

- 배열 데이터 중에서 첫번째 데이터를 삭제

- ex) greenLine.shift();                            // '사당' 삭제

       document.write(greenLine+"<br>");   // 교대,방배,삼성

  

⑪ unshift()

- 배열 객체에 첫번째 인덱스에 새로운 데이터를 삽입

- ex) greenLine.unshift('신도림');              // '신도림' 삽입

       document.write(greenLine+"<br>");   // 신도림,교대,방배,삼성

 

3. 내장 객체: String 객체                      

 

1) 개념

- 우리가 일반적으로 자바스크립트에서 사용하는 문자열을 의미

 

2) 생성 방법                 → ★string01.html 참고

- Date 객체와는 다르게 객체를 만들 때 new 연산자를 사용하지 않는다.

- 외따옴표(‘ ‘) 또는 쌍따옴표(“ “)를 통해 문자열을 만들어 주기만 하면 된다.

- 객체 생성 후, 문자열.속성 문자열.메소드(매개변수) 형태로 속성과 메소드를 사용한다.

 

3) 속성                        → ★string01.html 참고

• length : 문자열의 길이를 구해주는 속성

 

4) 메소드                     → ★string02.html / string03.html 참고

① charAt(16)

- 예를 들면, 인덱스 16번 문자를 추출

- ex) document.write(t.charAt(16)+"<br>");                        // g

          

② indexOf('you')

- 가장 먼저 나오는 'you'의 인덱스 번호를 구해줌

- ex) document.write(t.indexOf('you')+"<br>");                   // 12

          

③ indexOf('you', 16)

- 인덱스 16번 이후에 가장 먼저 나오는 'you'의 인덱스 번호를 구해줌

- ex) document.write(t.indexOf('you', 16)+"<br>");           // 29

          

④ lastIndexOf('you')

- 가장 마지막에 나오는 'you'의 인덱스 번호를 구해줌

- ex) document.write(t.lastIndexOf('you')+"<br>");           // 29

          

⑤ match('luck')

- 가장 먼저 나오는 'luck'과 일치가 되는 문자를 반환

- ex) document.write(t.match('luck')+"<br>");                // luck

          

⑥ toUpperCase()

- 대문자로 변환

- ex) document.write(t.toUpperCase()+"<br>");             // HELLO THANK YOU GOOD LUCK TO YOU

          

⑦ toLowerCase()

- 소문자로 변환

- ex) document.write(t.toLowerCase()+"<br>");            // hello thank you good luck to you

 

⑧ substring()

- start 인덱스 번호부터 end-1 인덱스 번호까지의 문자를 추출

(ex. substring(6,12) : 인덱스 6번부터 11번까지의 문자를 추출)

- ex) document.write(t.substring(6,12)+"<br>");          // Thank

 

⑨ substr(start index, 추출할 문자의 길이)

(ex. substr(21,4) : 인덱스 21번부터 4개의 문자를 추출)

- ex) document.write(t.substr(21,4)+"<br>");             // luck

  

4. 내장객체: Math 객체 

 

1) Math 객체 개념과 사용법

• 개념

- 수학 계산을 위한 내장 객체

- new를 통해 객체를 만들지 않고 곧바로 사용할 수 있다.

- 객체 이름은 대소문자를 구분하므로 ‘Math’로 써야한다.

 

• 사용법

- Math.속성

  Math.메소드(매개변수)

 

2) Math 객체의 속성과 메소드                → ★math01.html 참고

 

var num = 2.5234;

 

document.write("PI="+ Math.PI+"<br>");                         // 3.141592653589793

document.write("오일러 상수="+ Math.E+"<br>");              // 2.718281828459045

document.write("절대값="+ Math.abs(-30)+"<br>");           // 30

document.write("max="+Math.max(10,5,8,30,50)+"<br>");    // 50

document.write("min="+Math.min(10,5,8,30,50)+"<br>");     // 5

document.write("올림="+Math.ceil(num)+"<br>");              // 3

document.write("반올림="+Math.round(num)+"<br>");        // 3

document.write("내림="+Math.floor(num)+"<br>");            // 2

document.write("Random="+Math.random()+"<br>");         // 0 ~ 1 사이의 난수 출력

document.write("거듭제곱="+Math.pow(2,3)+"<br>");         // 8 (2의 3제곱 = 8)

document.write("제곱근="+Math.sqrt(9)+"<br>");              // 3 (루트 9 = 3)

 

5. 내장 함수 : 계산기 프로그램 작성     → ★calculator.html 참고

 

- 내장 함수 eval()을 이용해서 계산기 프로그램을 만들 수 있다.

 

6. 자바스크립트 이벤트 처리 방식

 

1) 이벤트 처리 방식       

① inline 방식                                                → ★event01.html 참고

<input type="button" id="btn" value="확인" onClick="check()">

 

② property 방식                                            → ★event02.html 참고

- 이벤트 타겟이 되는 객체의 프로퍼티(속성)에 이벤트를 등록하는 방식

 

③ 표준 이벤트 모델 방식(DOM Level 2 방식)       → ★event03.html 참고

- 한 객체에  여러 개의 이벤트를 등록할 수 있다.

- DOM Level 2 방식은 W3C를 따르는 표준방식의 브라우저(크롬,파이어폭스,사파리 등)와 비표준 방식으로 동작하는  IE8 이하 버전 브라우저 등에서 모두 동작하도록 구분자(if ~ else if문)로 나눠서 작성해야 한다.