프로그래머스 데브코스 TIL 7일차

프로그래머스 데브코스 TIL 7일차이다.

 

팀도 정해졌고 오늘부터 스터디를 시작하기로 했다.

 

슬슬 취업준비의 부스팅이 시작되지 않을까 싶다.

 

취업 드가자!!

 

 

---

마우스 및 키보드 이벤트, 폼 제어, AJAX 통신 정리

1. 마우스 이벤트

마우스 이벤트는 사용자가 웹 페이지의 특정 요소에 마우스를 클릭하거나 올리는 등의 행동에 반응하여 실행되는 이벤트이다. 대표적으로 .click(), .mouseover(), .mouseout() 등이 있으며, jQuery를 사용하면 더욱 간결하게 처리할 수 있다.

예제 – 마우스를 올렸을 때 요소 보이기

$("h3").mouseover(function() {
    $(".ticket").slideDown();
});

마우스 포인터가 h3 요소 위에 올라가면 .ticket 클래스를 가진 요소가 슬라이드되며 나타난다.

주요 마우스 이벤트 종류

이벤트 설명

click()	클릭 시 발생
dblclick()	더블 클릭 시 발생
mouseover()	마우스를 요소 위로 올렸을 때
mouseout()	마우스가 요소를 벗어났을 때
hover()	마우스를 올렸을 때와 벗어났을 때 각각 함수 실행
mousedown()	마우스 버튼을 눌렀을 때
mouseup()	마우스 버튼을 떼었을 때
mouseenter()	요소 영역 안으로 마우스가 들어왔을 때
mouseleave()	요소 영역을 벗어났을 때
mousemove()	요소 내에서 마우스를 움직일 때
scroll()	스크롤 시 발생

---

2. 키보드 이벤트

키보드 이벤트는 사용자가 키보드를 누르거나 떼는 등의 행동에 따라 발생한다. 주로 입력 필드에서 값을 실시간으로 계산하거나 검증할 때 사용된다.

예제 – 입력값으로 가격 계산

$("#quantity").keyup(function() {
    let quantity = parseInt($(this).val());
    let result = 399.99 * quantity;
    $(".total").text("총 가격: " + result.toFixed(2) + "원");
});

주요 키보드 및 포커스 이벤트

이벤트 설명

keydown()	키를 누르는 순간 발생
keyup()	키를 놓는 순간 발생
keypress()	문자 키 입력 시 발생 (현재는 deprecated)
focus()	요소에 포커스가 생길 때
blur()	포커스가 사라질 때
change()	요소의 값이 바뀌고 포커스가 이동될 때 발생

---

3. 폼 요소 제어

jQuery를 통해 input, select, checkbox, radio, textarea 등 폼 요소의 값과 상태를 쉽게 가져오거나 조작할 수 있다.

input / textarea

let email = $("#email").val();         // 값 가져오기
$("#email").val("user@example.com");   // 값 설정

select

let job = $("#jobs option:selected").val();  // 선택된 값 가져오기
$("#jobs").val("developer");                 // 값 설정

$("#jobs").change(function() {
    alert($(this).find("option:selected").text());
});

checkbox / radio

let isChecked = $("#agree").prop("checked");   // 체크 여부 확인
$("#agree").prop("checked", true);             // 체크 설정

$("#selectAll").click(function(){
    $("input[type='checkbox']").prop("checked", this.checked);
});

---

4. AJAX (Asynchronous JavaScript and XML)

AJAX는 웹 페이지를 새로 고침하지 않고도 서버와 데이터를 주고받을 수 있도록 해주는 기술이다. jQuery의 $.ajax() 또는 간편한 $.get(), $.post() 등을 통해 요청을 처리할 수 있다.

기본 ajax 형식

$.ajax({
    url: "sample.json",
    type: "GET",
    dataType: "json",
    success: function(data) {
        console.log("데이터 수신 성공", data);
    },
    error: function() {
        alert("데이터 수신 실패");
    }
});

예제 – JSON 데이터를 테이블로 출력

$.ajax({
    url: "sample.json",
    dataType: "json",
    success: function(data) {
        let tb = $("<table />");
        data.forEach(function(item) {
            let row = $("<tr />").append(
                $("<td />").text(item.id),
                $("<td />").text(item.first_name),
                $("<td />").text(item.last_name),
                $("<td />").text(item.email),
                $("<td />").text(item.gender)
            );
            tb.append(row);
        });
        $(".wrap").append(tb);
    }
});

예제 – 셀렉트 박스 동적 변경

$.ajax({
    type: "POST",
    url: "semester_code.php",
    data: {
        semesterDivision: semesterDivision,
        campus_id: campus_id
    },
    success: function(response){
        $("#semester_id").html(response);
    }
});

예제 – 쿠폰 적용에 따른 가격 계산

$("#couponSelect").change(function () {
    let couponId = $(this).val();
    let classRoomId = $(".class_time p").attr("id");

    if (couponId !== "none") {
        $.ajax({
            type: 'POST',
            url: '/coupon_apply',
            data: { couponId, classRoomId },
            success: function (data) {
                if (data.result === 'success') {
                    let 할인금액 = originPrice - data.price;
                    $(".originPrice").text(data.price);
                    $(".value-text1").text(data.info);
                    $(".coupon_price").text("(-) " + 할인금액 + "원");
                }
            }
        });
    } else {
        // 쿠폰이 선택되지 않았을 때 기본값 복원
        $(".originPrice").text(originPrice);
        $(".value-text1").text(valueText1);
        $(".coupon_price").text(valueText2);
    }
});

---