자바스크립트 정리(6)

DOM : Document Object Model

->HTML(웹문서, 웹페이지 ) 문서를 객체 기반으로 표현한 것

 

        childNodes : 자식 노드 리스트

        parentNode : 부모 노드

        firstChild : 첫 번째 자식 노드

        lastChild : 마지막 자식 노드

        childNodes[index]: index 번째 노드

 

        previousSibling : 이전 형제 노드

        nextSibling : 다음 형제 노드

 

Node와 Element의 차이

    Node : 태그, 속성 , 주석, 내용 등을 모두 노드라고 표현함.

    Element : Node의 하위개념으로 요소 노드만들 가리킨다.

 

Element만 선택하는 방법

        children: 자식 요소만 선택

        parentElement : 부모 요소 선택

        firstElementChild: 첫 번째 자식 요소 반환(없으면 null)

        lastElementChild: 마지막 자식

 

자바스크립트의 객체

자바스크립트의 객체는 {}내에 Key Value가 모여있는 형태로 작성된다

        (Map 형식)

        {k:v , k:v , k:v}

-객체생성방법

        1) {} (객체 리터럴 표기법)을 이용한 생성 방법

        2) 생성자 함수 + new 연산자를 이용한 생성 방법

// {}객체 리터럴 표기법을 이용한 객체 생성

const brand ="투썸";

const product ={
        pName : "텀블러",
        brand : "스타벅스",
        color : ["white", "black","silver"],
        amount : 100,
        mix : function(add){alert(add+"를 자동으로 섞어줍니다.")},
        // 기능(메서드임)
        information : function(){console.log(brand);},
        //객체 안에서 brand를 호출하지만 객체 밖의 brand가 호출된다
        information2 : function(){console.log(this.brand);}
        // 객체 안의 brand는 this를 붙혀야 함
    };
    
    
     //생성자 함수
    //1. 생성자 함수 정의
    //**생성자 함수의 함수명은 반드시 대분자로 시작한다! */
    
     function Student(name, age, java, db, html, css){
        //매개변수로 전달받은 값을 생성되는 객체의 속성에 대입하기
        // 여기서 this == 생성될 객체 / this.name속성에 넣고 없으면 속성 생성
        this.name = name;
        this.age = Number(age);
        this.java = Number(java);
        this.db = Number(db);
        this.html = Number(html);
        this.css= Number(css);

        //평균 점수 반환(소수점 둘째 자리까지 표시)
        this.getAvg = function(){
            const sum =  this.java+ this.db  + this.html+  this.css
            const avg = sum/4;
            // 숫자.toFixed(자릿수) : 소수점 자리수를 지정하는 함수
            //지정된 자릿수 밑에서 반올림처리
            
            return avg.toFixed(2);
        }//this : 현재 객체가 가지고있는 속성의 값
        
    }

내장객체

date 객체 : 날짜 관련 객체

document.getElementById("btn1").addEventListener("click",function(){

    const date1 = new Date();

    //GMT
    const date2 = new Date("Mon Nov 08 2021 16:33:50");

    console.log(date1);
    console.log(date2);

    //UTC
    const date3 = new Date(2021, 11,8,9,0,0);
    console.log(date3);

    //Date객체에서 년 월 일 시 분 초 요일 얻어오기
    console.log("년도 : " + date1.getFullYear());
    // 월은 0~11로 표현되므로 1 더해줘야 표현됨
    console.log("월 : " + (date1.getMonth()+1));
    console.log("일 : " + date1.getDate());

    //일요일== 0 ~ 토요일==6
    const arr =["일","월","화","수","목","금","토",];
    //index로 요일 지정 가능
    
    console.log("요일 : " + date1.getDay());
    console.log("시 : " + date1.getHours() );
    console.log("분 : " + date1.getMinutes() );
    console.log("초 : " + date1.getSeconds());
})

windows 객체 : 브라우저 창 자체를 나타내는 객체

-window 객체는 창 자체를 나타내고 있으므로 어디서든 접근이 가능하다

-그래서 window라는 객체 호출부를 생략할 수 있다.

(window.alert() == alert())

 

-window.setTimeout(함수, 지연시간(ms))

지정된 지연 시간마다 함수가 반복 수행됨

 

-window.setInterval(함수, 지연시간)

지정된 지연 시간마다 함수가 반복 수행됨

->setInterval은 중복되서 사용될수 있기 때문에 여러번 호출되지 못하게 처리가 필요함