(2024 03 07-08)16-17일차 js

(2024 03 07-08)16-17일차 js

 

객체란?

변수화 함수들의 집합으로  js에서의객체는 {}로 생성하면 다음 과 같은 형태의 자료를 쉼표로 연결해서 입력

        const product = {
            제품명:"망고",
            유형:"당절임",
            성분:"망고,설탕,항색소",
            eat:function(food) {}
        }

호출
        product["제품명"]
        product.제품명

 

속성

속성은 객체안의 자료형
메소드는 객체의 속성중 함수 자료형인 속성 =>eat이 메소드라고 한다 

객체 속성 추가

        const student = {}
        student.이름="윤인성"
        student.취미="악기"
        console.log(JSON.stringify(student,null,2)) // 이건 출력형식

속성 제거

delete student.취미

 

화살표 함수를 사용한 메소드

        const text={
            a:function(){
                console.log(this)
            },
            b:() => {
                console.log(this)
            }
        }

 

=>function 을 이용해서 함수를 만들던것을 화살표로 대신할수 있다 

 

prototype

-누구나 사용할수 있는 메소드가 된다

        //powe이라는 메소드를 추가합니다

        Number.prototype.power = function (n=2) {

            return this.valueOf()**n

        }

        //power() 메소드 이용

        const a= 12

        console.log('a.power():',a.power())

        console.log('a.power(3):',a.power(3))

.

결과

 

 

indexOf() 배열 내부에 어떤 자료가 있는지 확인 있으면 인덱스값 출력 없으면 -1 출력

toFixed()  소수점 이하 몇짜리까지만 사용
isNaN() NaN인지 아닌지 확인 하는 
isFinite() 유한인지 아닌지 확인하는 함수로

trim() 문자열 양쪽끝 공백없애는 함수 
split() 문자열을 특정 기호로 자르기

 

JSON

-자료표현방법
-값을 사용할때에는 문자열,숫자,불자료형만 사용
-문자열은 반드시 큰 따옴표로 만들어야 한다
-KEY에도 반드시 따옴표를 붙여야 한다 
        const data = [{
            name:"파이썬",
            price:"1800"

        },{ 
            name:"자바",
            price:"2800"}]

        console.log(JSON.stringify(data))
        console.log(JSON.stringify(data,null,2))

 

 

내부 속성이 존재하는지 안하는지 확인 

 

다중 할당 
        let[a,b]=[1,2]

 

//얕은 복사
        const 물건1=["우유","식빵"]
        const 물건2=물건1

        물건2.push("고구마")
        console.log(물건1)
        console.log(물건2)
=> 얕은 복사같은경우는 물건 2에만 추가해도 1에도 추가된다

//깊은복사
        const 물건3=[...물건1]
        물건3.push("토마토")
        console.log(물건1)
        console.log(물건3)

        물건 3에만 내용이 추가된다


        const 구름 ={
            이름 : '구름',
            나이 : 0,
            종족 : '강아지'
        }
        const 별 = 구름
        별.이름='별'
        별.나이=1

        const 하늘 ={...구름}
        하늘.이름='하늘'
        console.log(JSON.stringify(구름)) => 별 1 강아지 출력
        console.log(JSON.stringify(별)) => 별 1 강아지 출력
        console.log(JSON.stringify(하늘)) => 하늘 1 강아지 출력

        const 하늘 ={...구름,예방접종:'ture',나이:12,이름:'하늘}
        =>{"이름":"하늘","나이":12,"종족":"강아지","예방접종":"ture"}

        만약 ... 구름을 뒤에 넣었다면  
        이름은 구름이 원래 가지고 있던 내용으로 덮어 지고 없난 부분인 예방접종 부분만 추가된다

 

문서객체 모델 

-문서 객체를 조합해서 만든 전체적인 형태 

 

DOMContenLoaded 이벤트

=>문서객체를 읽고 난후 실행되기에 

 

문서객체 가져오기

document.querySelector(선택자)
document.querySelectorAll(선택자)

 

아이디 선택자 #아이디
클래스 선택자 .클래스
속성 선택자 [속성=값]
후손 선택자 선택자_A 선택자_B

 

속성조작하기

문서객체.setAttribute() => 속성 집어넣기
문서객체.getAttribute() =>속성 꺼내기

            const rects = document.querySelectorAll('.rect')

            rects.forEach((rect,index) => {

                const width = Math.floor(Math.random() * 100) + 1;

                const src=`http://placekitten.com/${width}/250`

                rect.setAttribute('src',src)

            })

            document.body.innerHTML += "<div></div>"

        })

 

아이디가 rect인 곳에 src값을 집어 넣을수 있다 

 

문서객체 생성하기
document.createElement() 메소드를 사용 
어떤 문서 아래에 추가할지 지정
    => 부모 객체.appendChild()

            //태그 생성
            const header = document.createElement('h1')

            //h1 태그를 body태그 아래에 추가하기
            document.body.appendChild(header)

문서객체 제거하기
부모객체.removeChild(자식)
문서객체.parentNode.removeChild()

 

클릭이벤트
                    h2.addEventListener("click",(event)=> {
                        count++
                        h2.textContent=`클릭 횟수:${count}`

                    })

이벤트 연결
 h2.addEventListener('click',listenner)
 이벤트 제거하기
 h2.removeEventListener('click',listenner)

 

기본이벤트 막기
preventDefault()

            link.addEventListener('click',(event) => {

                if(!status) {

                    event.preventDefault()

                }

            })