웹개발 종합반 2주차 개발일지1

2주차의 목표는 Javascript 문법 익숙해지기

jQuery로 HTML 간단하게 조작해보기

Ajax로 서버 API에 데이터를 주고, 결과를 받아본다

 

jQuery란 무엇인가?

HTML의 요소들을 조작하는 Javascript를 미리 작성해 편리하게 사용할 수 있는 라이브러리

코드를 비교해보겠다

/*Javascript*/
document.getElementById("element").style.display = "none";

/*jQuery*/
$('#element').hide();

jQuery를 사용하려면?

헤드 태그 사이에 작성한다

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery를 사용해보기

input value값 가져오기 입력하기

<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();

// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

div 보이기 숨기기

<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>

// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();

// show()로 보이게 한다.
$('#post-box').show();

태그 내 HTMl 입력하기

<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>

let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);