22.10.11.Tue - Class의 위계(상속),실습,jQuery 맛보기,제일 중요한 것.

22.10.11.Tue - Class의 위계(상속),실습,jQuery 맛보기,제일 중요한 것.

오늘의 요약 = 복습, Class의 위계(상속),실습,jQuery 맛보기,제일 중요한 것.

1.함수,객체,배열 복습 + 새로운 방법

함수,객체 복습| hoisting, 얕은 깊은 복사 ,배열 선언

함수

• 함수 선언
• 리터럴
  • 변수를 선언하고 함수를 할당
  • hoisting
  • var : 선언과 초기화가 동시에 된다. (undefined)
  • 선언은 hoisting이다 (끌어올림)

    객채

• 얕은 복사(공유)
  • 객체를 담은 변수1에 다시 변수2에 담으면 복사가 된다.
  • 변수2의 객체의 값을 바꾸면 원본의 데이터도 바뀐다. (덮어쓰기)
• 깊은 복사 (복제)
  • 식 : Object.assign ({},객체를 담은 변수1)
    • 빈 객체에 변수1의 값은 복사한다.
  • 복사한 값을 변수2에 담는다.
    • let copy1 = Object.assign({},객체를 담은 변수1);

      배열

      let arrData = [1,2,3];
      let [a,b,c] = arrData; // let [a,b,c] = [1,2,3]; 변수 a,b,c를 만들어서 배열의 값을 할당하라.
      // a = 1, b = 2, c = 3
      let [aa,,cc,dd]= addData; // let [aa,,cc,dd]= [1,2,3]; // 2의 값은 건너뛰어라.
      // 함수호출하는 쪽에서 매개값을 배열, 객체로 받았을 때 호출되는 함수에서 전개구문을 사용할 수 있다.

      ---

2. 전개 구문 / 수학 메소드

전개구문

let objData = {aaa : '인사하세요' , bbb : 123};
let {aaa,bbb} = objData;
console.log ( aaa ); cosole.log(bbb);
// 1 예제

let {aaa,bbb} = objData;
console.log ( aaa:first ); cosole.log(bbb:second);
console.log ( first ); cosole.log(second);
// 2 예제

// 함수호출하는 쪽에 매개값을 배열 , 객체로 받았을 때 호출되는 함수에서 전개구문 사용할 수 있다.

let irums = 'doil gildong mingi dohyuk'.split(' ');
function receive ([one, two, three]){
     console.log(one);
     console.log(two);
     console.log(three);
} // let[one,two,three]= irums
receive(irums);

let objData2 = { id : 'dohwa' , age : 23};
function receiveObj({id,age}){ 
     console.log(id);
     console.log(age);
}
receiveObj(objData2);

변수의 데이터 맞 교환

//상자 1 상자2 의 데이터를 바꾸고 싶을때. (변수 맞 교환)

/*
예전 버전
임시 상자 1를 만들어 데이터 할당하고 풍차 돌려버리면 변경 완료.
*/

let box1 = 50; let box2 = 100
let imsi = box1;
box1 = box2;
box2 = imsi;
// box1 : 100 , box2 : 50 , imsi : 50

// 요즘 버전
// [상자1,상자2] = [상자2,상자1] 

수학 함수중 중요한것.

• 구분에서 사용할 것 (음수)
  • ceil
  • floor
  • round
• 임의의 수

method

let num1 = 12.0001;
let num2 = -12.0001;
console.log (Math.round(num1),Math.round(num2)); 
// 출력값 round : 12,-12 | floor : 12 , -13  | ceil : 13 , -12
/* 
round : 소수점 제거
floor : 값보다 작은 수에서 가장 큰
ceil  : 값보다 큰수 에서 가장 작은 정수
*/
// 임의의 수 생성 Math.random  0보다 크면서 1보다 작은 수
for(let i = 0; i<10; i++){
     console.log(Math.random());
}

---

3.

random

일정 범위의 임의의 정수형 숫자를 만들어 내야 할때

game -> 테트리스. 임의로 나오지만 최대 7개 내에서 나온다.
배열에 블록을 담은 data를 담는다. 난수를 배열의 인덱스값에 맞게 출력.

let shapes = ['ㅣ','ㅁ','ㄱ','ㄴ','ㅗ','ㅡ','ㅓ'];
for(let i = 0 ; i<7; i=i+1){
   let randomIndex   = ( Math.floor(Math.random()*shapes.length)+0 /*시작값*/);
   console.log(shapes[randomIndex]);
   // 테트리스 도형 배열 랜덤값 호출
}

명명의 중복의 주의점.

let print = (console.log);

fun1(30,37);
function fun1(...data){
     print(data[0] + data[1])
}
// 코드  500줄 + 

function fun1(data1,data2){
     print(Math.abs(data2-data1))
}
// 호출이 되면 제일 밑에 있는 놈으로 덮어쓰인다. 즉 명명을 잘해야 한다.  
// 함수의 리턴문에서 배열이나 객체를 리턴하고 호출하는 쪽에서 전개 구문을 사용할 수 있다.

---

4.

const 의 배열에 data 넣기

const로 선언된 상자의 값은 변경할 수 없다.

const arr1 =[];
// arr1 배열에 데이터 넣기
arr1.push('hello');
arr1.push('World');
console.log(arr1);

/*
출력 :  ['hello', 'World']
배열은 메모리상의 다른구역에 저장되고, 변수상자는 이정표의 역할이니까.
배열의 데이터를 넣어도 변수상자와 별개의 처리이다. 
*/

// 리터럴
// let rect = { width : 100 ,height : 50 , area : function(){return this.width * this.height }};
// let triangle = { width : 100 ,height : 50 , area : function(){return this.width * this.height * 0.5 }};

class Shape {
     constructor(width,height){
          this.width = width;
          this.height = height;
     }
     area(){
          return this.width * this.height;
     }
} // 객체를 만들 수 있는 클래스 또는 함수를 정의해 놓고 사용
let rect1 = new Shape(100,50);
console.log(rect1);

// 공통적인 부분을 담는 공식을 슈퍼클래스로 만든다.
class Shape {
     constructor(width,height){
          this.width = width;
          this.height = height;
     }
     area(){
          return this.width * this.height;
     }
}
// 하위의 도형의 너비를 구하는 공식 클래스로 만든다.
class Triangle extends Shape{
     area(){
          return this.width * this.height * 0.5;
          return super.area() * 0.5;
     }
};

let triangle = new Triangle(100,50);
console.log(triangle);

extends 클래스명

클래스의 위계
공통적인 명령을 담은 클래스를 슈퍼 클래스
그 아래 세부를 담은 클래스 서브 클래스.

슈퍼클래스의 식을 변경하는 것을 오버라이드.

java의 상속 등등을 배우면 알게 된다.

---

5-6

형태별 이미지 띄우기 실습

7. jQuery

방법이 중요한게 아니다. 시나리오,흐름,어떻게 할지가 중요.

---

8.

복습

• ---