JavaScript. day4

1. 객체

: 명령문으로 어떤 처리를 지시하고자 하는 대상을 가리킨다. 자바스크립트 코드 내에서 객체란 '값 또는 기능을 가지고 있는 데이터'이다.
개발자는 자신이 원하는 값이나 기능으로 구성된 객체를 직접 만들 수 있다.
객체에 내릴 수 있는 명령은 두가지다.

• 객체.데이터
  : 객체가 가지고 있는 숫자, 문자 등의 다양한 데이터를 사용할 수 있다.
  객체가 가지고 있는 데이터(정보)를 가리켜 일반적으로 '속성'이라 한다.
• 객체.기능()
  : 객체가 가지고 있는 다양한 기능을 수행할 수 있다.
  객체가 가지고 있는 기능을 가리켜 일반적으로 '메소드'라 한다.

1-1. 생성자

: 객체를 생성할 때 사용하는 함수로서, '생성자 함수'라고도 한다. 사용할 기능을 정의한 일반 함수와 생성자 함수 사이에 특별한 문법적 차이는 존재하지 않는다.
즉, 함수는 생성자 역할을 할 수 있다. 단, 생성자 함수는 객체생성을 목적으로 만드는 것이다. 생성자는 자바스크립트가 제공하지 않는 유형의 데이터를 창조할 수 있다.
일반적으로, 생성자 함수명의 첫글자는 대문자로 한다.

• this 키워드
  : 생성자 함수 정의 시 this 키워드는 객체 그 자신을 의미한다. this를 이용해 해당 객체의 속성이나 메소드를 추가할 수 있다.

function Dog(){
    this.name = "콩이"
    this.breed = "시츄"
}

• new 연산자
  : 생성자 함수는 정의일 뿐이며, 실제 객체가 생성되기 위해서는 new 연산을 통해 겍체를 반환해야한다.

function Dog(){
    this.name = "콩이"
    this.breed = "시츄"
}

const myDog = new Dog();
console.log(myDog.name)
console.log(myDog.breed)

생성자 함수는 설계도의 역할을 하기 때문에, 함수 하나로 객체를 여러개 만들 수도 있다.

function Dog(eachName, eachBreed){
    this.name = eachName
    this.breed = eachBreed
}

const one = new Dog("바둑이", "진돗개");
const two = new Dog("하나코", "시바견");
const thr = new Dog("마르코", "셰퍼드");

1-2. 빌트인 생성자

: 자바스크립트는 개발자의 편의를 위해 유용한 기능을 제공하는 빌트인 생성자 또는 빌트인 객체를 지원한다.

• 빌트인 생성자 : 자바스크립트에 내장된 생성자. 이를 이용해 객체를 생성할 수 있다.
• 빌트인 객체 : 자바스크립트에 내장된 객체. 이를 이용해 값이나 기능을 호출할 수 있다.

대표적인 내장 생성자 중 하나인 Date를 이용해 실습을 해보자.

• Date 빌트인 생성자
  : 날짜와 시간을 처리하는 다양한 메소드가 정의된 빌트인 생성자이다.

const now = new Date()
// 코드가 실행되는 시점의 날짜와 시간 정보를 담은 객체
const then = new Date(2023,12,25)
// 2023년 12월 24일의 날짜와 시간정보를 담은 객체
const interval = now - then
// now에서 then을 뺀 시간정보를 담은객체. Date객체끼리는 밀리초(ms) 단위로 연산된다.
console.log(interval)

• date 객체 주요 기능들
  : 날짜와 시간을 다룰 수 있는 속성과 메소드들을 포함하고 있다.
  • getFullYear : 연도를 뜻하는 숫자 값 반환
  • getMonth : 월을 뜻하는 숫자 값 반환. 0~11 로 나타내어진다. 즉, 0 => 1월
  • getDate : 날짜를 뜻하는 숫자 값 반환
  • getDay : 요일을 뜻하는 숫자 값 반환. 0~6 으로 나타내어진다. 즉, 3 => 수요일
  • getHours : 시간 중 시각을 나타내는 숫자 반환
  • getMinutes : 시간 중 분을 나타내는 숫자 반환
  • getSeconds : 시간 중 초를 나타내는 숫자 반환
  • toLocaleString : 지역 날짜 및 시간 문자열 반환. '2021/09/17 16:40:31'형태

1-3. 타이머 메소드

• setTimeout
  : 정해진 시간이 지나고 나면 주어진 함수를 실행 해주는 메소드

  setTimeout(실행할함수, ms단위의 시간)

  예시
• setTimeout(function(){ console.log("스게") },1000) // 1000ms => 1초 가 지나고 나면 함수를 실행한다.
• 사용법
• setInterval
  : 일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 타이머 메소드

  setInterval(실행할함수, ms단위의 시간)

  예시
• setInterval(function(){ console.log("ㅎㅇ") },500) // 500ms 마다 함수를 반복실행한다.
• 사용법
• clearInterval
  : setInterval 메소드가 호출되어 반복 실행할 함수 타이머를 등록하면, 타이머는 0이 아닌 숫자를 반환한다.
  숫자는 타이머의 ID를 의미하며, 이를 clearInterval 메소드에 전달하면 해당 타이머의 반복 실행이 취소된다.
• let timer; timer = setInterval(function(){ console.log("ㅎㅇ") }, 500) // 셋팅된 타이머의 반환 값(ID)를 변수에 저장 clearInterval(timer) // 셋팅된 타이머를 멈춰달라는 의미

1-4. Math 빌트인 객체

: 수와 관련된 속성과 메소드를 가진 내장 객체이다.

Math.메소드()
Math.속성

• Math 메소드 및 속성
  • abs : 주어진 숫자의 절대값을 반환
  • floor : 주어진 숫자보다 작거나 같은 수 중에서 가장 큰 정수를 반환
  • pow : 주어진 첫 번쨰 숫자에 두 번째 수만큼 제곱해서 반환
  • random : 0 이상 1미만의 난수를 반환
  • sign : 주어진 숫자가 양수인지 음수인지 나타내는 부호를 반환
  • sqrt : 주어진 수의 제곱근을 반환

2. 배열

: 여러 개의 데이터를 보관하는 역할을 수행하는 객체이다. 배열을 사용하면 여러 개의 데이터를 대입할 수 있다.

let numbers = [1,2,3]
// 배열을 이용해 숫자 세 개를 대입!

• 배열 리터럴
  : 쉼표로 구분한 값들을 대괄호로 묶어서 표현한다.

const arr = [1,2,3,4,5,6,7,8,9]

• array 생성자
  : javascript는 배열을 만드는 데 사용하는 기본 내장 생성자가 존재한다.

const arr = new array(1,2,3,4,5)

• 배열의 특징
  • 배열에 포함된 값 하나하나를 '요소'라고 한다.
  • 각 배열 요소는 왼쪽부터 순서가 매겨지는데 이를 'index'라 한다.
  • index는 0부터 시작한다.
  • 배열 요소 수는 원하는 개수만큼 포함시킬 수 있으며, 0개일 수도 있다.
  • 다양한 유형의 데이터를 포함할 수 있다. 숫자, 문자열, 객체 등등
• 참조
  : 대괄호 [] 연산자를 이용해서 특정 인덱스 번호의 배열 요소를 참조하여 읽거나 쓸 수 있다.

const Ive = ["원영", "가을", "유진", "이서", "레이", "리즈"]

console.log(Ive[0])
console.log(Ive[1])
console.log(Ive[2])
console.log(Ive[3])
console.log(Ive[4])
console.log(Ive[5])

Ive[0] = "갓원영"
console.log(Ive[0])

• 배열의 메소드
  • push : 배열의 끝에 하나 이상의 요소를 추가하고 배열의 길이를 반환한다.
  • pop : 배열의 마지막 요소를 뽑아내고 , 그요소를 반환한다.
  • index Of: 배열에서 주어진 값과 일치하는 첫번째 인덱스를 반환한다. 없으면 -1을 반환한다.
  • splice(i,n,data) : 배열 요소를 원하는 위치에서 원하는 수만큼 추가하거나 제거한다. i는 시작인덱스, n은 지울개수, data는 지우고나서 추가할 데이터(생략가능)
  • forEach(function(){}) : 배열의 각각의 요소에 대해서 콜백을 호출한다. => 배열의 개별 요소에 대해서 각각 함수를 차례대로 호출한다.
  • length : 배열의 길이를 반환하는 속성(메소드가 아니다.)

3. 클래스 속성

• classList
  : 웹 요소로부터 클래스 콜렉션을 반환하는 속성이다.

<p class="hello greet good">
    안녕하세요
</p>

const p = document.querySelector('p')
console.log(p.classList)

• 클래스 콜렉션 메소드
  • add : 지정한 클래스 값을 추가. ex)add("new_class")
  • remove : 지정한 클래스 값을 제거. ex)remove("old_class")
  • item : 인덱스를 이용해 클래스 값을 반환. ex) item(1)
  • toggle : 클래스 값 토글링 => 있으면 제거, 없으면 추가. ex)toggle("some_value")
  • contains : 지정한 클래스 값 존재 여부 확인. ex)contains("is_contain")
  • replace : 기존 클래스를 새 클래스로 대체. ex) replace("old", "new")