day09. Javascript 기본(2)

아는벌·2023년 2월 6일

web (1)

목록 보기

11/16

Object

논리적으로 연관이 있는 것들의 묶음
- 객체는 중괄호{}를 사용하여 정의
Property 접근
- 마침표를 사용하여 접근
- 대괄호 및 문자열 인덱스 사용
  ex) saram['name'] == saram.name
Function을 가질 수 있음

let saram = {
	name: '홍길동',
    greeting: function() {
    	return "hello"+this.name;
    }
}

Prototype

원형, 기초 형태, 원래의 초기 모델
다른 객체로부터 상속 가능하게 한다.
자바스크립 function은 prototype이라는 property가 기본 포함됨
constructor : function의 생성자 함수를 참조
_ _prto__ : 함수의 prototype

	 // ES5 이전에는 function 키워드를 class 대신 사용
        function People(name, age) {
            this.name = name;
            this.age = age;

            // 생성자 내부에 함수를 추가하면 소스코드가 모든 객체에 복제된다
            this.showInfo = function() {
                document.write("name: " + this.name + " age: " + this.age);
            };
        }

        var kim = new People("홍길동", 24);
        kim.showInfo();
		var lee = new People("이길동", 22);
        lee.showInfo();
		var park = new People("박길동", 24);
        park.showInfo();

클래스 생성자 내부에 함수를 추가하면 소스코드가 모든 객체가 복제되는 문제가 있다.

        function People(name, age) {
            this.name = name;
            this.age = age;
        }
        People.prototype.showInfo = function() {
            document.write("name: " + this.name + " age: " + this.age);
        };

        var kim = new People("홍길동", 24);
        kim.showInfo();
        var lee = new People("이길동", 22);
        lee.showInfo();
		var park = new People("박길동", 24);
        park.showInfo();

클래스.prototype은 모든 객체가 공유하는 속성으로 해당 소스코드가 객체 생성에 따라 복제 되지 않고 모든 객체들이 사용가능하다.

class

이전에는 function을 이용하여 클래스 생성자 함수를 선언하였지만 ES6부터 class를 지원함
class는 Object를 위한 템플릿이라고 할 수 있음(관련 항목을 묶는 것)
new 연산자를 이용하여 객체를 생성
const saram = new Saram("홍길동", 24);
constructor() 생성자 함수가 별도로 정해져 있음
class로 일관되게 비슷한 형태의 인스턴스가 생성됨
생성된 인스턴스들은 각각 다른 property 값을 가짐

class Saram {
	constructor(name, age){
     	this.name = name;
      	this.age = age;
    }
  // 메소드 생성 가능
}
let saram = new Saram("홍길동", 24);

Array 컬렉션

리스트 기능을 가진 배열
대괄호 [ ] 사용
가능한 같은 타입의 요소들로 배열 구성하는 것을 권장
자바스크립트는 다이나믹 타입으로 다른 타입 요소로 배열 구성 가능
속성도 배열기호를 사용하여 접근 가능
window['name'] == window.name == this.name
Array Methods
- forEach - 기본 interation
- map - 요소에 새 매핑
- filiter - 검색 후 조건에 맞는 값으로 새 배열 생성
- reduce - 배열을 돌면서 한 값을 계산(총합, 평균 등)
- push/pop
- splice - 위치, 삭제, 추가
- slice - 잘라서 새 배열 생성
- findIndex - 위치 찾기
- every - 모든 요소가 조건 만족 하는지
- some - 조건 만족하는 요소가 있는지

예제

const numbers = [65, 44, 12, 4];
const newArr = numbers.map(function(num) {
  return "<h2>"+num+"</h2>";
});

newArr.forEach(function(elem) {
   document.getElementById("demo").innerHTML += elem;
});

화살표 함수(Arrow Function)

기존 function 키워드보다 간결하게 함수 표현 가능
불필요한 보일러 플레이트가 없어 사용하기 편리
화살표 함수는 Anonymouse function(익명 함수)로 콜백 함수로 많이 사용됨
setTimeout(), setInterval() 함수에 사용되는 콜백함수도 화살표 함수로 처리 가능
Arrow(화살표) 사용

1) 기본 문법 : (매개변수) => { 실행 처리 문장 }
2) 매개변수가 없는 경우 : () => { 실행 처리 문장 }
3) 매개변수가 한 개인 경우 괄호 생략 가능
매개변수 => { 실행 처리 문장 }
4) 실행 처리문이 return 한 줄뿐이라면 중괄호 생략 가능
(매개변수, 매개변수) => 반환 값(또는 식)
ex) (a,b) => a+b
5) 객체를 반환 할 때는 괄호가 필요
(매개변수, 매개변수) => (객체)

실습

드래그 앤 다운 기능 구현

Box를 드래그하면 Box의 위치가 마우스의 위치에 따라 바뀐다. Target Box 밖의 범위에서 마우스 다운 시 다시 Box의 위치는 원점으로 돌아가고 Target Box 범위 안에서 마우스 다운을 하면 그 위치에 Box가 놓아진다.
mousemove, mouseup, mousedown 이벤트와 콜백함수를 사용하였다.

짝 맞추기 퍼즐 구현중

문자가 새로고침때 마다 재배치되며 3초 뒤에 글자가 사라지도록까지 구현되었다.

        class Cell {
            constructor(parentElement, content, callback) {
                this.callback = callback;
                this.parentElement = parentElement;
                this.newDiv = document.createElement("div");
                this.newDiv.innerHTML = content;
                this.newDiv.className = "cell";
                parentElement.appendChild(this.newDiv);
                return this;
            }
            startCellEvent() {
                this.newDiv.addEventListener('click', (event)=>{
                    this.callback();
                });
            }
        }

셀 하나에 대한 클래스이다. 생성자에서 newDiv가 셀 하나에 대한 div를 만들고 글을 넣는다. 그리고 이 div 클래스 이름을 cell이라고 정한다. startCellEvent() 메소드로 셀이 클릭되도록 한다.

	class Puzzle {
            constructor(element) {
                this.element = element;
                this.cells = []
                for(var i=0; i<16; i++) {
                    this.cells.push(new Cell(this.element, String.fromCharCode(65+i%8), function() {
                        this.newDiv.innerText = this.newDiv.ch;
                    }) );
                }
            }
          // shuffle() 메소드
  
          // hide() 메소드

            start() {
                // 버튼의 이벤트 핸들러 작동
                for(var i=0; i<this.cells.length; i++) {
                    this.cells[i].startCellEvent();
                }
                return this;
            }
        }
        var puzzle = document.getElementById("puzzle");
        new Puzzle(puzzle).shuffle().hide().start();

Puzzle 클래스는 전체 셀들을 담고 있는 div 기능을 담당한다.
생성자에서 Cell 클래스 객체를 생성하고 이를 this.cells에 push한다.

		hide() {
                setTimeout(()=>{
                    for(var i=0; i<this.cells.length; i++) {
                        var ch = this.cells[i].newDiv.innerHTML;
                        this.cells[i].newDiv.ch = ch;
                        this.cells[i].newDiv.innerHTML = "";
                    }
                }, 3000);
                return this; 
            }

3초간 셀의 내용을 보여주고 그 후 셀의 내용을 숨기는 메소드이다.
setTimeout의 첫 번째 인자에는 실행할 코드가 들어가고, 두 번째 인자로는 지연시간을 넣는다.

  		shuffle() {
                // cells의 위치를 랜덤하게 0~15까지 내용 뽑아서 섞어준다.
                for(var i=0; i<30; i++) {
                    var j = Math.floor(Math.random() * 16);
                    var k = Math.floor(Math.random() * 16);
                    var a = this.cells[j].newDiv;
                    var b = this.cells[k].newDiv;
                    var tmp = a.innerText;
                    a.innerText = b.innerText;
                    b.innerText = tmp;
                }
                return this; // 메소드 체인
            }