[항해99(7기)] 웹개발 종합반 2주차

JQurey+ajax

 

CSS를 사용하지 않고 처음부터 영화 기록 창을 닫고 싶어서

$('#post-box').show();

function openBox() {
	$('#post-box').show();
}

function closeBox() {
    $('#post-box').hide();
}

적용을 했는데 잘 되지 않았다.

.mypost {
    max-width: 500px;
    width: 95%;
    margin: 1rem auto 1rem auto;

    box-shadow: 0px 0px 3px 0px;
    padding: 1rem;

    display: none;
}

CSS의 .mypost에서 display: none 속성을 지정해 주어야 가려졌다.

 

// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기

function q2() {
            let email = $('#input-q2').val();

            if (email.includes('@')) {
                alert(email.split('@')[1].split('.')[0]);
            } else {
                alert("이메일이 아닙니다.");
            }
        }

alert(email.split('@')[1].split('.')[0]); 부분을 수행할 때 email.includes('@') && email.includes('.')을 해주려고 했는데 split('.')[0]은 항상 존재한다.

 

function q1() {	
        $('#names-q1').empty(); 
        
        $.ajax({
        type: "GET",
        url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
        data: {},
        success: function (response) {
            let miseData = response['RealtimeCityAir']['row'];
            let gu_name = [];
            let mise = [];
            for (let i = 0; i < miseData.length; i++) {
                gu_name.push(miseData[i]["MSRSTE_NM"]);
                mise.push(miseData[i]['IDEX_MVL']);
                let dataHtml = `<li>${gu_name[i]} : ${mise[i]}</li>`
                $('#names-q1').append(dataHtml);
            	}
            }
        })

        }

$('#names-q1') 에서 ${'#'}라던지 #없이 $('')라고만 적어서 오류가 발생했다. 시간 많이 잡아먹었다.

function q1() {
        $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rtan",
        data: {},
        success: function (response) {
                let msg = response['msg'];
                let img = response['url'];

                $('#img-rtan').empty();
                $('#text-rtan').empty();

                $('#img-rtan').attr("src", img);
                $('#text-rtan').text(msg);
                }
            }
        )}

$('#img-rtan').attr("src", img); .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. 파라미터를 하나만 작성하면 속성값을 가져오고, 파라미터를 2개 작성하면 선택한 요소의 속성을 추가한다.