혼공단 자바스크립트 5주차 일지

안녕하세요 모두 새해 복많이 받으세요

벌써 5주차 입니다. 시간은 정말 빠르네요. 특히 연초는 더더욱 그런것 같습니다. 

혼공 학습이 2주밖에 남지 않았네요. 더더욱 집중해서 유종의 미를 거둘 수 있도록 최선을 다하겠습니다. 

구분	진도	기본 미션	선택 미션
1주차 (1/2 ~ 1/8)	Chapter 01 ~ 02	p.54의 <파일 만들고 저장해 실행하기>에서  "Hello World" 출력하기	Ch.01(01-1)확인 문제 1번 상세하게 적고 인증하기
2주차 (1/9 ~ 1/15)	Chapter 03	p. 139의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기	p. 139의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기
3주차 (1/16 ~ 1/22)	Chapter 04	p. 195의 확인 문제 4번 풀고 인증하기	p. 183 [좀 더 알아보기] 손코딩 실행하고 결과화면 인증하기
🙇설 연휴🙇 (1/23 ~ 1/29)	야호! 한 주 쉬어갑니다 ❣️새해 복 많이 받으세요❣️ 야호! 한 주 쉬어갑니다
4주차 (1/30 ~ 2/5)	Chapter 05	p.202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기	p. 240 확인문제 1번 풀고, 풀이 과정 설명하기
5주차 (2/6 ~ 2/12)	Chapter 06	객체, 속성, 메소드가 무엇인지 설명하기	p.288 확인 문제 3번 풀고, 풀이 과정 설명하기
6주차 (2/13 ~ 2/19)	Chapter 07 ~ 08	p. 315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡쳐하기	p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기

 

기본미션 :객체, 속성, 메소드가 무엇인지 설명하기

객체(Object)	실제로 존재하는 사물. name과 value로 구성된 속성을 가진 기본 데이터 타입
속성(Property)	name과 value로 표현되는 속성
메소드(Method)	속성ㅈ 중에서 동작(함수) 인 것.

* 객체와 배열에 대한 보충 설명

배열(Array)도 지정위치(index)에 값(value)를 넣는다는 형식으로 본다면 객체와 유사하다고 볼 수 있습니다. 

하지만 배열은 순서대로 차곡차곡 지정된 위치에 데이터를 넣는 반면

객체의 경우에는 내가 위치를 지정하고, name을 만들어서 넣을 수 있습니다. 

이를 key 값에 대응시킨다고 이야기를 합니다. 

 

객체를 생성하여 원하는 데이터를 넣고, 사용할 수 있는 것이 자바스크립트의 가장 큰 장점입니다. 

 

1> 객체 

데이터 타입 중 하나로, 다양한 데이터를 저장하고 처리하는데 사용

 

객체를 생성하는 방법에는 두가지가 있음

(1) 객체 생성자 문법 : Object() 생성자를 사용하여 객체를 생성하는 방법

let o = new Object();

(2) 객체 리터럴 문법 : 중괄호{}안에 키(key) : 값(value) 쌍으로 구성된 속성을 여러개 넣어 객체를 생성하는 방법

키에는 문자형만 가능, 값에는 모든 자료형이 올 수 있음

let o = {
  name : "Kim",
  age : 38
};

2> 속성

객체 내부에 있는 값으로, 점 표기법을 이용하여 접근 가능

console.log(o.name); // Hongong
console.log(o.age); // 18

자바스크립트는 객체에 속성을 동적으로 추가 할 수 있음

delete o.age;
console.log(o.age); // undefined​

delete 연산자를 사용하여 삭제가 가능

o.address = "Seoul"

스페이스나 "-"이 들어가는 속성이름은 따옴표로 감싸야 한다.

let o = {
  "s p a c e" : true 
}

3> 메소드

객체의 속성 중에서도 함수를 메소드라 지칭

let user = {
  // 속성
  name : "John",
  age : 18
  // 메소드
  eat : function(){
    console.log("밥을 먹습니다.");
  }
};

자바스크립트는 함수와 메소드가 분리된 개념이 아니기 때문에 기존에 정의된 함수를 메소드로 등록 가능

let user = {
  name : "John",
  age : 18,
};

function eat(){
  console.log("밥을 먹습니다.");
};

user.eat = eat;

메소드에서 this 키워드를 사용하면 자기자신이 가지고 있는 속성임을 의미

let user = {
  // 속성
  name : "John",
  age : 18
  // 메소드
  eat : function(){
    // this는 현재 객체를 나타냄 -> user.name
    console.log(`${this.name}이 밥을 먹습니다.`);
  }
};

선택미션 : p. 288 확인문제 3번 풀고, 풀이 과정 설명하기
Math 객체를 활용하여 sine 90도 값을 구하기

<script>
  // 변수를 선언합니다.
	const degree = 90  
  
  // 출력합니다.
  	console.log(Math.sin(degree)) // 0.8939966636005579
</script>

사인 90의 경우 1이 나와야 하는데 결과값은 0.89 이상한 값이 나왔습니다.

Math.sin() 함수의 인자는 라디안 값이 들어가야 정확한 결과가 나옵니다.

일반각*Math.PI/180을 함수의 인자로 넣어야 합니다. 

<script>
  // 변수를 선언합니다.
	const degree = 90  
  
  // 출력합니다.
  	console.log(Math.sin(degree * Math.PI / 180)) // 1
</script>

원하는 결과값이 나왔습니다.