javaScript DOM 객체와 이벤트 처리(1)

javaScript DOM 객체와 이벤트 처리를 하는 방법, 여기서 부터는 조금은 복잡한 개념들과 순서, 그리고 방법들이 들어가니 집중하길 바랍니다.

서론

(1) 주문하는 대학교 CC 커플의 체크박스를 누를 시 생기는 이벤트와 주문한 메뉴를 정리하기.

객체의 이벤트 처리 (1) 아래와같은 예제에서 뭐 먹을까 안에는 코드 체크박스가 포함되어 있는데요. 이렇게 포함된 체크박스를 클릭하면, 색깔이 변하면서 전체적인 폰트색깔이 변하는 효과를 주고 싶습니다. 

객체의 이벤트 처리 (2) 클릭이 발생한 메뉴를 [] 이 주문되었습니다의 대괄호 안에 넣어주기

 

(2) 이를 풀기 위한 자바스크립트와 부트스트랩이 연동된 코드를 나열해보겠습니다. 코드를 나열한 후 코드를 분석하는 시간을 가지도록 합니다. 아래는 객체와 이벤트처리에 관한, 위의 내용을 담기 위해서 작성된 코드라고 볼 수 있습니다.

 

여기서 사실 제가 집중한 것이 있다면, class명을 어떻게 선언하고 목록을 어떻게 만들었는지인데요. 이렇게 목록을 맏늘때마다 정형화된 네임, 그리고 누구나 판단하기 쉬운 클래스명을 사용하면 조금 더 편히 코드를 사용할 수 있다고 판단이 됩니다. 노란색으로 네모친 곳은 html이 아닌 JS에 연동되는 부분이기 때문에 주의깊게 봐주세요. 

본론

(1) 각각의 체크박스 목록에 ID는 어디에 사용될까? : 정답 체크 시, CSS에 적용됩니다.

 

위의 내용을 세부적으로 판단해본다면, 여성이 대답하는 부분중 A의 체크박스인 코드는 아래와 같습니다. 여기서 input class를 사용함으로서 각각의 checkbox 타입에 id를 설정해준 것을 볼 수 있는데요.  이런 ID의 쓰임새는 우리가 CSS를 javaScript를 통해서 효과를 줄 수 있다는 점입니다.

<div class="targets">
            <ul class="list-group">
                <li class="list-group-item">
                    <input class="form-check-input me-1" type="checkbox" name="answers" value="a" id="answer-a">
                    <label class="form-check-label">A. 중국집에서 먹기 싫어</label>
                </li>

 

ㅇ

(2) 그럼, 왜 div로 목록들을 전체로 묶었을까?

위의 코드를 조금 더 정확하게 보고 계시다면 tagets를 묶은 이유를 알 수 있을텐데요. 각각의 목록의 색깔의 변화를 주는 css를 입히고 싶다면 그들의 객체를 생성해야합니다. 하지만 목록의 객체를 생성하기보다는 클래스의 객체를 생성해서 효과를 주는 것이 조금 더 간단한 편이죠. 그렇기 때문에 div로 목록을 하나씩 감싸고, 거기에 class명을 지어주는 것입니다.

"넌 내 타겟이 될꺼야" 라고요 : 너는 CSS의 타겟이 될 것이다!

 

(1-1) 그럼 자바스크립트에서는 어떻게 작성될까?

자바스크립트에서는 CSS 적용을 하기 위해서는, DOM 객체를 가져와서, querySelecor를 통해 ID값을 가져옵니다.

여기서 querySelecor와 querySelecorALL은, 자바스크립트 내에서 요소를 찾는 것입니다. 각각의 다른 파일에 있는 자바스크립트의 요소를 가져올 때 유용하게 사용하는 명령어 중 하나이죠.

 

(1-2) 자바스크립트에서 요소를 가져오는 순서는 어떻게 될까?

자바스크립트에서 간단한 순서를 만드는 것은 쉽습니다. 객체를 가져오고, 그리고 리스너를 달아 감시 역할을 하게 한 다음에 처리를 수행시키면 되는데요. 순서대로 한번 보도록 할게요.

 

DOM의 객체의 요소를 가져옵니다 : "문서 안에 어디 뒀더라? 쓰려했던 것좀 찾아봐 내가 거기다가 찾기 쉽게 아이디 붙여놨음"

const currectInput = document.querySelecotr('#answer-c");

 

그리고 이벤트로만 설정했던 객체를 가지고 옵니다. 저는 div에 target층을 묶어두고, 그리

const checkbox = event.target;
const listItem = checkbox.parentNode;

2. 문서를 찾고 나선, 문서를 누가 입력하는 지 감시하는 부장님을 붙여줍니다. "얘들아 일해라"

 스크립트어 우리말로 번역하기 : 너희들이 뭐라 입력하는지 지키볼게 내가 니가 지원한 change 이벤트 담당 부장님인거 알지? 입력하는 게 어떤 것인지 모두 다 지켜볼거야.

currentInput.addEventListener("change",fuction(event) {

3. 그런데 말이야, 체크된 체크박스들의 상태를 확인해보고, 이들의 부모인 listItem에 클래스List를 추가할게. "text-success"를 말이야 만약 박스가 체크되어있다면 ture값을 반환해주고, 체크되어있지 않다면 else 값에 있는 중괄호를 실행해줘.

    if(checkbox.checked){
    listItem.classList.add('text-success');
    }else{
     listItem.classList.remove('text-primary');
    }
});

 

 

(3) 똑같은 방법에 따라서 answer-a/b/c를 만들어주고, 장바구니에 담아보기.

(3-1) 장바구니에 담기 위해 필요한 데이터를 배열로 생성해줄겁니다.

const menuCart = [];

(3-2) 결과를 출력하는 요소 값을 가져 올겁니다.  결과를 출력할 요소 값은 html에서 "[]이 주문되었습니다"를 출력할 order-list라는 div의 id값에 출력하도록 하겠습니다.

const resultDiv = document.querySelector('#order-list');

그리고 객체를 한번 더 생성하여, 버튼을 누를 시에 ID값이 practice-3의 버튼을 호출 할 수 있도록 입력해줍니다.

const menuButtons = 
            document.querySelectorAll('#practice-3 button');

마지막으로 각각의 리스너(감시자)를 달아서, 마무리해줍니다. 리스너를 달 때는 각각의 객체에 리스너를 달기 번거롭기 때문에 for문을 이용해서 달아줄텐데요. button에 대한 값을 인덱스 값으로 설정하고, 클릭을 할때마다, functiond의 event가 나올 수 있도록 만들어줍니다.

for(let i = 0; i < menuButtons.length; i++){
    menuButtons[i].addEventListener("click",function(event){
    const btn = event.target;
    const menuName = btn.innerText;
    menuCart.push(menuName);
    resultDiv.innerText = `>>[${menuCart}]이 주문되었습니다.`;
    });