prototype(프로토타입)

자바스크립트의 모든 객체는 프로토타입이라는 객체를 포함하고 있다.
모든 객체는 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.
자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다.
자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 Object.prototype과 자신의 객체를 프로토타입으로 가진다.

const mycar = new Car();
mycar -> Object.prototype, Car.prototye을 상속 받는다.

function Car(brand, color, price){
            this.brand = brand;
            this.color = color;
            this.price = price;
  }
        console.log(typeof(Car))    // function 타입이다. 
        
        const mycar = new Car('Ferrari', 'Red', 65000);
        console.log(typeof(mycar))    // Object 타입이다. 
        console.log(mycar)    // 아래에 만든 Car의 prototype을 포함하고 있다. 

        const momcar = new Car('K7', 'white', 4000);
        // 기존에 없던 roofOpen이라는 프로퍼티에 새로운 값을 넣어줌으로써 
        // 그 객체에게 프로퍼티를 추가할 수 있다.
        mycar.roofOpen = function(){
            console.log(this.brand + "roofOpen")
        }

        //단, 아래와 같이 mycar 객체에 직접 값을 할당하면 prototype에는 할당되지 않는다.
        mycar.hp = 4000;
        mycar.roofOpen();
        //momcar 는 프로퍼티를 가지고 있지 않으므로 실행 불가능

        //Car 생성자로 만들어지는 프로토타입
        Car.prototype.wheel = 4;
        Car.prototype.enginStart = function(){
            console.log(this.brand +"시동 켜기")
        }
        //프로토타입에 추가되어 mycar와 momcar에서도 불러올 수 있다
        console.log(mycar.wheel);
        console.log(momcar.wheel);
        
        //momcar에는 mycar에 직접 값을 할당한 것을 제외한 프로토타입에 선언된 값들이 포함되어 있다. 
        console.log(momcar)
        //프로토타입에 Object 프로토타입이 포함되는데 이때 프로토타입도 사용가능하다.
        Object.prototype.sport = 'sport';

아래는 mycar에 할당한 프로퍼티를 나타내며, mycar.hp = 4000, mycar.roofOpen = function(){}과 같이 직접 할당한 값들이 잘 보인다. 또한 프로토타입으로 할당한 값들이 객체로 포함되어있다.

아래의 momcar에는 mycar에 직접할당한 hp와 roofOpen함수를 제외한 나머지 프로토타입이 잘 들어가 있다.

Math

수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 내장 객체

• min() : 최소값을 반환, 매개변수가 전달되지 않는다면 Infinity를 반환
  비교할 수 없는 값이 포함되어 있다면 NaN을 반환
  

• max() : 최대값을 반환, 매개변수가 전달되지 않는다면 -Infinity를 반환
  비교할 수 없는 값이 포함되어 있다면 NaN을 반환
  

• round() : 소수점 첫째자리에서 반올림

• floor() : 소수점 첫째자리에서 내림

• ceil() : 소수점 첫째자리에서 올림

• random(): 0보다 크거나 같고 1보다 작은 무작위 실수를 반환

• toFixed() : 지정한 소수점 이하 자릿수까지 숫자를 나타낼 수 있다.(문자열로 리턴함)

 
        console.log(Math.min(1,156,"0",156,1,1));
        console.log(Math.max());

        console.log(Math.round(10.49)) // 10
        console.log(Math.round(10.5)) // 11
        console.log(Math.round(-10.7)) // -11
        console.log(Math.round(-10.2)) // -10
        console.log(Math.floor(10.99)) //10
        console.log(Math.floor(-10.99)) //-11
        console.log(Math.ceil(10.0001)) // 11
        console.log(Math.ceil(-10.9998)) //-10

        //둘째자리에서 반올림 하는 방법 
        console.log(Math.round(10.48*10) / 10)
        //n째 자리에서 반올림 하려면
        //1. 10의 (n-1)제곱을 곱하기
        //2. 반올림하기(round())
        //3. 곱했던 만큼 다시 나눠주기

        //위와 같이 복잡한 과정을 생략하고 싶다면 아래와 같이 toFixed를 활용한다. 
        //먼저 바꾸고자 하는 숫자를 변수에 담아서 toFixed로 연산한다. 이때 toFixed()에 매개변수는 정수형으로 반올림하고자 하는 자리수를 적으면 된다. 
        //문자열로 리턴하기때문에 숫자형을 사용하고 싶으면 강제형변환시킨다.
        let num = 10.48
        console.log(Number(num.toFixed(1))) // 10.5

        for (let i = 0; i < 11; i++) {
            //랜덤한 숫자를 구하기 위해서는 구하고자 하는 수의 바로 직전의 수를 곱하면 된다. 아래는 해당 숫자를 정수로 변환시킴
            console.log(`랜덤한 숫자 ${parseInt(Math.random()*10)}`)
        }

String

문자열을 쉽게 만들고 다룰 수 있게 한다.
const str = 'Javascript';
const str = new String('Javascript');

주의

let a = new String("javascript");
console.log(typeof(a)); // object

위와 같이 a는 stirng 타입이 아니다. 원시 값이 "javascript" 가 아니다.

let b = "javascript";
a === b //false

즉, 동일한 값이 아니라 전혀 다른 값임.
직접 객체 형태로 써야할 이유는 거의 없음, 필요시 엔진이 알아서 암시적으로 박싱하게 하는 것이 낫다. 즉, new String("javascript"), new Number(42)처럼 쓰지 말고 그냥 원시값 그대로 쓰는 것이 좋다.

하지만 String의 prototype에는 유용한 기능들이 많다. new String을 사용하지 않더라도 프로토타입을 사용하면 유요하게 사용이 가능하다.

• length : 문자열 길이
  
• indexOf( ) : 매개변수로 넘긴 문자열이 처음 등장하는 인덱스를 반환
  
• charAt( ) : 매개변수로 넘긴 인덱스에 위치한 문자를 반환
  
• includes( ) : 매개변수로 전달된 문자열이 포함되어 있는지를 확인 후 반환
  
• substring( ) : 매개변수 1개일때 전달된 인덱스부터 끝까지 잘라서 반환
  매개변수 2개일때 첫번째 인덱스부터 두번째 인덱스 전까지 잘라서 반환
  
• substr( ) : 매개변수 1개일때 전달된 인덱스부터 끝까지 잘라서 반환
  매개변수 2개일때 첫번째 인덱스부터 두번째 인덱스의 값만큼의 길이로 자름
  
• split( ) : 매개변수로 전달된 구분점을 기준으로 문잔열을 나눈 후 배열로 저장해서 반환
  
• replace( ) : 첫번째 매개변수로 전달된 문자열을 찾아서 두번째 문자열로 치환
  
• trim( ) : 문자열의 앞 뒤 공백을 제거

const str1 = "Hello Javascript!";
       console.log(str1.indexOf('J')); // 6
       console.log(str1.indexOf('Java')); // 6
       console.log(str1.indexOf('java')); // -1
       console.log(str1.indexOf('a')); // 7 : 좌에서 우로 검색
       console.log(str1.lastIndexOf('a'));// 9 : 찾은 값의 마지막 인덱스

       console.log(str1[6]) // J : 유사배열처럼 사용 가능함.
       console.log(str1.charAt(6)) // J 
    
       console.log(str1.includes('J')) // true : 포함여부를 불리언으로 반환
       console.log(str1.substring(6)) //Javascript! : 해당 인덱스 부터 잘라서 보여주기 -> 원본이 바뀌지 않음
       console.log(str1.substring(6, 8))//Ja : 6번부터 8번 전까지 자름 
       
       console.log(str1.substr(6)) // Javascript! : 해당 인덱스 부터 잘라서 보여주기
       console.log(str1.substr(6, 8)) // Javascri : 6번부터 8개의 갯수

 const str2 = "apple/banana/cherry/durian"
       let fruit = str2.split('/');
        //배열을 반환시킴
       console.log(fruit)
       //['apple', ''], 공백임. 
       console.log('apple/'.split('/')[1]);
       
        //원본은 그대로임 첫번째 매개변수는 바꿀 대상, 두번째는 바꿔서 들어갈 값
       console.log(str1.replace("Hello", "bye"))

       const str3 = "     Javascript    ";
       console.log(str3 === "Javascript") // false
       console.log(str3.trim() === "Javascript") // true

Date

날짜, 시간 등을 쉽게 다룰 수 있는 내장 객체
2자리로 표현한 연도는 1900 ~ 1999
4자리로 표현한 연도는 작성한 연도 그대로

월의 범위는 0 ~ 11월
new Date() : 현재 날짜, 시간을 저장하는 객체(브라우저 기준)
new Date("날짜 문자열") : 해당 날짜 시간을 가리키는 객체가 생성
ex) new Date('2021-12-19')
new Date(n) : 1970년 1월 1일 0시 0분 0초 부터 n 밀리초만큼
지난 시간의 날짜 객체가 생성
new Date(년, 월, 일, 시 ,분, 초, 밀리초) : 해당 특정 날짜, 시간을 가리키는 객체 생성

 	//아래와 같이 Date 생성자에 매개변수를 직접 넣을 수 있다
        console.log(new Date())
        //Sun Dec 19 2021 16:15:52 GMT+0900 (한국 표준시)
        
        console.log(new Date(21,12,19))
        //Thu Jan 19 1922 00:00:00 GMT+0900 (한국 표준시)

        console.log(new Date(2021,11,19))
        //Sun Dec 19 2021 00:00:00 GMT+0900 (한국 표준시)

        console.log(new Date("2021-12-19"))
        //Sun Dec 19 2021 09:00:00 GMT+0900 (한국 표준시)

        console.log(new Date(2021,11,19,16,21,32))
        //Sun Dec 19 2021 16:21:32 GMT+0900 (한국 표준시)

        console.log(new Date(1639998383326))
        //유닉스 타임을 가져 올때 아래 처럼 now()를 사용하면 된다
        console.log(Date.now()) // 1639998383326
        //유닉스 타임
        //Tue Jan 20 1970 08:31:38 GMT+0900 (한국 표준시)
        

        // 아래에 date에 현재 날짜를 초기화 하고 
        const date = new Date();
        //day라는 배열에 일~토까지 한글로 적어 준다음 
        const day = ['일','월','화','수','목','금','토'];
        //아래와 같이 요일까지 가져올 수 있다. 
        console.log(`현재 년도  : ${date.getFullYear()}`)
        console.log(`현재 월 : ${date.getMonth() + 1 }`)
        console.log(`현재 일 : ${date.getDate()}`)
        console.log(`현재 요일 : ${day[date.getDay()]}요일`)
        console.log(`현재 시간 : ${date.getHours()}`)
        console.log(`현재 분 : ${date.getMinutes()}`)
        console.log(`현재 초 : ${date.getSeconds()}`)

window

현재 웹 브라우저의 창이나 탭을 표현하기 위한 객체, 비표준 객체

• setTimeout(함수, 밀리초) : 넘겨준 함수를 해당 밀리초만큼 흐른 후 호출
• clearTimeout(설정된 타임아웃 객체) : setTimeout에서 설정된 것을 취소
• setInterval(함수, 밀리초) : 넘겨준 함수를 해당 밀리초마다 호출
• clearInterval(설정된 인터벌 객체) : setInterval에서 설정된 것을 취소

 let to = setTimeout(function(){
            alert('5초가 흘렀다유')
        },5000)
        //setTimeout을 종료시킴
        window.clearTimeout(to);

        function hello(){
            for (let i  = 0; i < 10; i++) {
                document.write("안녕하세요");
            }
        }
        //2초 뒤에 hello을 실행 시킴
        window.setTimeout(hello,2000)

 //input 태그를 샐렉트 합니다.
        let input = document.querySelector('input');
        // input.onclick으로 클릭이 되었을때 다음 함수를 실행시킵니다.
        input.onclick = function stop(){
            window.clearInterval(iv)
            alert('콘솔을 멈춥니다.')
        }
        //setinterval로 3초마다 함수를 실행합니다.
        let iv = window.setInterval(() => {
            console.log('안녕하슈')
        },3000);

callback function(콜백함수)

매개변수로 함수를 전달받아 함수 내부에서 그 함수를 호출하는 경우

 //2. test2라는 매개변수가 들어가서
       function f(callback){
            console.log("콜백 함수를 호출합니다.")
            //3. test2()로 실행됩니다. 
            callback();
       } 
       function test(){
           alert('테스트 함수를 호출합니다.')
       }
       //4. test2()를 불렀기 때문에 다음 함수가 실행됩니다. 
       function test2(){
           alert('테스트2 함수 입니다.')
          
       }
    //    f(function(){
    //        alert("테스트3 함수입니다.")
    //     })
        
        f(test2);
        //1. f라는 함수에 test2라는 매개변수를 넣습니다.

document

문서 객체 모델(Document Object Model)

Dom이라고도 한다.
xml이나 html 문서에 접근하기 위한 일종의 인터페이스
문서내의 모든 요소를 정의하고 각 요소에 접근하는 방법들을 제공해준다.

• 웹 페이지 자체를 의미하는 객체
• 웹 페이지에 존재하는 HTML요소에 접근할때는 반드시 document 객체로부터 시작

getElementsByTagName( ) : 해당 태그 이름의 요소들을 모두 선택(배열)
getElementById( ) : 해당 아이디의 요소를 선택(1개만)
getElementsByClassName( ) : 해당 클래스에 속한 요소를 모두 선택
getElementsByName( ) : 해당 name 속성값을 가지는 요소를 모두 선택
querySelectorAll( ) : CSS 선택자로 선택되는 요소를 모두 선택
querySelector( ) : CSS 선택자로 선택되는 요소를 1개만 선택

	let bytag = document.getElementsByTagName('h2')
        console.log(bytag) //[h2.head, h2.head, h2.head] 

        let className = document.getElementsByClassName('head')
        console.log(className) //[h2.head, h2.head, h2.head, p.head]

        let all = document.querySelectorAll('.head')
        console.log(all) //[h2.head, h2.head, h2.head, p.head]

        let arr = document.getElementsByTagName("h2")
        console.log(arr) // [h2.head, h2.head, h2.head]
        //arr의 첫번째 배열요소를 가져와 classList 객체에 active를 추가한다.
        console.log(arr[0].classList)
        arr[0].classList.add('active')

주의

1개의 요소를 선택하는 것을 제외한 나머지 DOM 객체들은 배열을 리턴한다.
따라서 배열 요소처럼 생각하고 사용해야한다.