[JavaScript]웹개발시 자주 사용하는 메서드들

JavaScript

[JavaScript]웹개발시 자주 사용하는 메서드들

hans-j 2023. 2. 1. 03:34

JavaScript로 HTML 내용 변경하기

주의해야할 점!

getElementById는 s가 없다.

근데 다른 메서드들은 모두 s가 있다.

이유는! Id는 중복사용이 안되기때문에 하나일 수 밖에 없Da.

주의합시다.

버튼 누르면 HTML내용 바꾸기

click하면 내가 설정한 함수가 실행됨!!

JSON에서 값 받아오기 + Promise패턴

백틱!!을 사용해서 레이아웃 잡아주고
forEach로 배열의 길이만큼 레이아웃을 추가/append 해준다.

해당 메서드가 이행해서 data를 받아오면! products 변수에 = data.products를 담아두도록 명령.

then() 메서드는 Promise (en-US)를 리턴하고 두 개의 콜백 함수를 인수로 받음.

하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수!!

promise1.then((value) => {
  console.log(value);
  // Expected output: "Success!"
});

p.then(onFulfilled, onRejected);

p.then(function(value) {
  // 이행
}, function(reason) {
  // 거부
});

콜백함수랑 비슷하면서도 다른데

차이점은!!

콜백함수는 바로 실행하게 해주지만

promise패턴은 성공,실패,실행 시 실행할 함수를 따로 명령할 수 있다.

근데 저기서 성공,실패를 어떻게 설정하냐면~!!

event target => e.target

이벤트가 발생한 요소의 값을 가져올 때 사용.

e.target.dataset.id;

let productId = e.target.dataset.id;
//변수에 선택한 요소의 아이디 값 가져오삼

$(".add").click(function(e){
            let productId = e.target.dataset.id;
        })
//add 클래스를 가진 요소 클릭하면
//해당 id 값을 변수 productId에 담아라
//id랑 id값 같은거 아님

사용 예 ) 상품 번호!!! 값을 가져올 때

상품 선택해서 카트에 담기

1 :

e.target.dataset.id

event의 target에서!!!!!!!! dataset 의 id값을

productId 변수에 저장한다는 의미.

2 :

findIndex()메서드

배열의 요소가 조건에 충족하는 경우

해당 배열 의 인덱스 를 반환.

그렇지 않으면 -1이 반환

//findIndex 기본구문

// Arrow function
findIndex((element) => { /* ... */ } )
findIndex((element, index) => { /* ... */ } )
findIndex((element, index, array) => { /* ... */ } )

// Callback function
findIndex(callbackFn)
findIndex(callbackFn, thisArg)