14-1. JS 객체 (객체, 인스턴스, 프로퍼티, 메서드, Array객체, Date 객체, Math 객체), 연습문제

14-1. JS 객체 (객체, 인스턴스, 프로퍼티, 메서드, Array객체, Date 객체, Math 객체), 연습문제

2021. 10. 20. 14:41ㆍHTML + CSS + JS

728x90

1.자바스크립트 객체

1️⃣ DOM (문서 객체 모델) : 웹 문서 자체가 객체이기도 하고, 웹 문서에 포함된 이미지나 링크 , 텍스트 필드 모두 객체에 해당한다,

2️⃣ 브라우저 관련 모델 : 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다. (history, location, link...)

3️⃣ 내장 객체 : 웹 프로그래밍 할 때 자주 사용하는 요소로 자바 스크립트 안에 미리 객체로 정의 되어 있는 것을 내장객체라고 한다.

2. 객체의 인스턴스 만들기

자바스크립트에서 객체는 참조 형식으로 만들어서 사용해야한다.

즉 객체 자체가 아닌 인스턴스의 형태로 만들어서 사용해야한다.

자바스크립트의 객체가 틀이라면 그 틀을 기본으로 해서 계속 같은 모양으로 찍어 내는 것이 인스턴스이다.

객체의 인스턴스를 만들 때는 new 객체명 이런식으로 사용한다.

3. 프로퍼티와 메서드

객체에는 프로퍼티와 메서드가 존재한다.

프로퍼티는 객체의 특징이나 속성을 나타내고, 메서드는 객체에서 할 수 있는 동작을 표현한다.

인스턴스는 객체의 프로퍼티와 메서드를 그대로 물려받아서 똑같이 사용할 수 있다.

인스턴스명 뒤에 (.)을 붙여서 사용하면 된다.

DATE 객체에는 toLocaleString()이라는 현재 날짜와 시간을 로컬형식으로 바꿔주는 메서드가 있다.

4. 자바스크립트의 내장객체

1️⃣ Array 객체

Array 객체는 자바스크립트의 여러가지 내장 객체 중에서 배열을 다룬다.

var name = new Array();

var name = new Array(4);

var numbers = ["one", "two", "three", "four"]

var numbers = Array("one", "two", "three", "four");

Array 객체 메서드

concat : 기존 배열에 요소를 추가해 새로운 배열을 만든다.

every : 배열의 모든 요소가 주어진 함수에 대해 참이면 true, 그렇지 않으면 false를 반환한다.

filter : 배열 요소 중에서 주어진 필터링 함수에 대해 true 인요소만 골라 새로운 배열을 만든다.

forEach : 배열의 모든 요소에 대해 주어진 함수를 실행한다.

indexOf : 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾는다.

join : 배열 요소를 문자열로 합친다. (구분자 지정 가능)

push : 배열의 맨 끝에서 새로운 요소를 추가한 후 새로운 length를 반환한다.

unshift : 배열의 시작부분에 새로운 요소를 추가한다.

pop : 배열의 마지막 요소를 꺼내 그 값을 결과로 반환한다.

shift : 배열의 첫번째 요소를 꺼내 그 값을 결과로 반환한다.

splice : 배열에 요소를 추가하거나 삭제한다.

slice : 배열의 특정한 부분만 잘라 낸다.

reverse : 배열의 배치 순서를 역순으로 바꾼다.

sort : 배열요소를 지정한 조건에 따라 정렬한다.

toString : 배열에서 지정한 부분을 문자열로 반환한다.

- concat()

concat() 메서드는 서로 다른 배열 2개를 합쳐서 새로운 배열을 만든다.

- join()

join() 메서드는 배열 요소를 연결해서 하나의 문자열로 만든다.

이때 요소 사이에 구분자를 넣을 수 있는데 따로 지정하지 않으면 , 로 구분된다.

- push() , unshift()

push() 메서드는 배열 맨 끝에 요소를 추가하고, unshift() 메서드는 배열의 맨 앞에 요소를 추가한다.

요소를 추가하고 나면 원래 배열 바뀐다는 것 주의하기

- pop(), shift()

pop() 메서드는 배열에서 뒤에 있는 요소를 꺼낼 때 사용하고, shift() 메서드는 앞에 있는 요소를 꺼낼 때 사용한다.

- splice()

splice() 메서드는 괄호 안에 들어 있는 인수에 따라 배열 요소를 삭제하거나 새로운 요소를 추가한다,

- slice()

slice() 메서드는 기존 배열을 바꾸지 않으면서 요소를 꺼낼 수 있다.

-> 첫번째 인수는 배열의 시작 인덱스이고, 두번째 인수는 끝 인덱스의 바로 직전 인덱스를 가르킨다.

❗ splice와 slice의 차이점

slice() 메서드는 기존 배열에 영향을 주지 않지만, splice() 메서드는 요소를 추가, 삭제하면 기존 배열 자체가 수정된다.

2️⃣ Date 객체

Date 객체는 날짜와 시간 정보를 나타낼 수 있다.

new Date();

- 날짜 입력 방식

YYYY-MM-DD

YYYY-MM-DDTHH (T : 시간을 나타낼 때 사용)

MM/DD/YYYY

- Date 객체의 메서드

날짜, 시간 정보 가져오기

getFullYear()

getMonth()

getDate()

getDay()

getTime()

getHours()

getMinutes()

getSeconds()

getMillseconds()

날짜, 시간 정보 설정하기

setFullYear()

setMonth()

setDate()

setDay()

setTime()

setHours()

setMinutes()

setSeconds()

setMillseconds()

날짜, 시간 형식 바꾸기

toLocaleString() : 현재 날짜와 시간을 현지 시간으로 표시한다.

toString()

* 연습문제

나는 책을 연속으로 읽고 있는가?

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>독서 챌린지</title>
  <style>
    #container{
      margin:50px auto;
      width:300px;
      height:300px;
      border-radius:50%;
      border:2px double #222;
      background-color:#d8f0fc;
      text-align: center;
    }
    h1 {
      margin-top:80px;
    }
    .accent {
      font-size:1.8em;
      font-weight:bold;
      color:red;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>책 읽기</h1>
    <p><span class="accent" id="result"></span>일 연속으로 <br> 책 읽기를 달성했군요.</p>
    <p>축하합니다!</p>
  </div>  


  <script>
    var now = new Date("2021-10-20");
    var firstDay = new Date("2021-10-01");

    var tonow = now.getTime();
    var tofirst = firstDay.getTime();
    var passedTime = tonow- tofirst;

    passedTime = Math.round(passedTime/ (1000*60*60*24));

    document.querySelector('#result').innerText = passedTime;
  </script>
</body>
</html>

Date 객체로 오늘 날짜를 알아내고, getTime()을 통해서 시간을 알아냄.

그리고 오늘과 시작일의 시간을 빼고나면 그 값은 밀리초로 계산되는데

이를 (1000 *60 * 60 * 24)로 나눠주면 일수로 나타낼 수 있다,

3️⃣ Math 객체

Math객체는 따로 인스턴스를 생성하지 않는다는 것이 특징이다.

Math.프로퍼티명

Math.메서드명

- Math 객체의 프로퍼티

SQRT2

SQRT1_2

LN2

LN10

LOG2E

LOG10E

-Math 객체의 메서드

abs() : 절대값 반환

acos() : 아크코사인 값 반환

asin() : 아크 사인 값 반환

atan() : 아크탄젠트 값 반환

atan2() : 아크 탄젠트 값 반환

ceil() : 매개변수 소수점 이하 부분을 올린다.

cos() : 코사인 값 반환

exp() : 지수 함수를 나타냄

floor() : 매개변수의 소수점 이하 부분을 버린다.

log() : 매개변수에 대한 로그 값을 반환

max() : 매개변수 중 최대값 반환

min() : 매개변수 중 최소값 반환

pow() : 매개변수 지수값 반환

random() : 0과 1 사이 무작위 수 반환

round() : 매개변수의 소수점 이하 부분을 반올림

sin() : 사인 값을 반환

sqrt() : 매개변수에 대한 제곱근을 반환

tan() : 탄젠트값 반환

* 연습문제2

당첨자를 뽑는 프로그램

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>당첨자 발표</title>
    <style>
      h1 {
        border:1px solid black;
        padding:10px;
        text-align:center;
        background:#eee;
      }
    </style>
  </head>
  <body>    
    <h1>당첨자 발표</h1>

    <script>
       var num = prompt("전체 응모자 수 :" , "");
       var pick = Math.floor((Math.random() * num) + 1);

       document.write("전체 응모자 수 : " + num + "명 <br>");
       document.write("당첨자 : " + pick + "번 ");
    </script>
  </body>
</html>

Math.random()에 100을 곱하고 +1 해주면 1~100 사이의 값 확인 가능

728x90

'HTML + CSS + JS' 카테고리의 다른 글

14-3. JS 객체 연습문제 1, 2 (0)	2021.10.20
14-2. JS 브라우저와 관련된 객체 (window객체, navigator 객체, history 객체, location 객체, screen 객체) (0)	2021.10.20
13-4. JS 함수 연습문제 (0)	2021.10.19
13-3. JS 함수 (익명함수, 화살표함수, 이벤트, DOM ) (0)	2021.10.19
13-2. JS 함수 (let, const, 재사용 가능한 함수) (0)	2021.10.19

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'HTML + CSS + JS' 카테고리의 다른 글

관련글

티스토리툴바