28일차 2024 - 4 - 4

1차 미니 프로젝트 서서히 시작

수업과 병행하며 주간 과제로 점차 준비

(4월 말 쯤에 미니프로젝트 본격적으로 시작 / 기간은 대략 2~3주)

 

오늘의 수업.

jQuery 계속해서 학습

 

 

●  ID, Class, Tag, 체크박스에서 체크된 것만 찾기

<script>
    function findElementById() {
        var jq_p1 = $("#p1");
        console.log("찾은 엘리먼트 수: ", jq_p1.length);
        // jq_p1 객체는 배열이 아니지만 배열처럼 사용가능하다.
        // jQuery 내부에 배열이 있다는 것을 알아두자.
        console.log("내부 배열의 0인덱스 저장된 엘리먼트: ", jq_p1[0])
    }
    function findElementByClass() {
        var jq_class1 = $(".class1");  // jquery리 객체를 반환
        console.log("찾은 엘리먼트 수: ", jq_class1.length);
        console.log("내부 배열의 0인덱스 저장된 엘리먼트: ", jq_class1[0]);  // 타입은 다르지만 사용 방법은 같다..
        for(var el of jq_class1){
            console.log(el);
        }
    }
    function findElementByTag() {
        jq_p = $("p");
        console.log("찾은 엘리먼트 수: ", jq_p.length);
        for(var el of jq_p){
            console.log(el);
        }
    }
    function findElementByChecked() {
        var jq_checked = $("[name=skill]:checked");
        for(var el of jq_checked){
            console.log(el);
        }
    }
</script>

<!-- body 태그 내부 -->
<!-- 버튼을 이용하여 상태 변화 시키기 -->
<button onclick="findElementById()" class="btn btn-info btn-sm">ID로 찾기</button>
<button onclick="findElementByClass()" class="btn btn-info btn-sm">Class로 찾기</button>
<button onclick="findElementByTag()" class="btn btn-info btn-sm">Tag로 찾기</button>
<button onclick="findElementByChecked()" class="btn btn-info btn-sm">체크된 것만 찾기</button>
<hr/>

<div class="d-flex"> <!-- display box model에서 학습했었다. display:flex; = 행 방향으로 배치 -->
    <!-- p태그는 원래 블록요소인데, display:flex가 적용되어 한 행에 모두 표현된다. -->
    <p id="p1" class="border border-danger bg-success" style="width: 100px; height: 100px;"></p>
    <p class="class1 border border-dark bg-danger" style="width: 100px; height: 100px;"></p>
    <p class="class1 border border-danger bg-info" style="width: 100px; height: 100px;"></p>
</div>
<hr/>

<!-- <div class="d-flex align-items-center justify-content-center" style="height:300px;"> -->
<div class="d-flex align-items-center">
    <div class="me-3"><input type="checkbox" name="skill" value="java"/>java</div>
    <div class="me-3"><input type="checkbox" name="skill" value="javascript"/>javascript</div> 
    <div class="me-3"><input type="checkbox" name="skill" value="vue"/>vue</div> 
</div>

 

 

● 엘리먼트 변경 및 추가 / 삭제

<script>
    function changeContent(){
        // 기존 내용을 대체  // jqeury는 .innerHTML을 사용하지 못함. 항상 메소드로 사용한다.
        // jQuery 리퍼런스 도큐먼트 살펴보자.
        $("#div1").html("<img src='/htmlcssjs/resources/image/ul/king1.jpg' width='150'/>");
    }
    function appendContent(){
        // 기존 내용 뒤에 추가
        // jQuery 리퍼런스 도큐먼트 add
        $("#div1").append("<img src='/htmlcssjs/resources/image/ul/king2.jpg' width='150'/>");
    }
    function deleteContent(){
        // 맨 뒤에 있는 엘리먼트 삭제
        $("#div1").find("img:last-Child").remove();
        // 기존 내용을 모두 삭제
        // $("#div1").html("");
        //$("#div1").empty();
        // $("#div1").remove();를 실행하게 되면 "#div1"이 것 자체를 지워버리겠다는 의미이다.
    }
    function changeSize(){
        $("#img1").css("width", "50px");
        $("#img1").css("height", "50px");
        $("#img1").css("border-radius", "25px");
        $("#img1").css("border-width", "2px");
        $("#img1").css("border-color", "red");
        $("#img1").css("border-style", "solid");
    }
    function chageAttribute(){
        $("#img2").attr("src", "/htmlcssjs/resources/image/ul/king6.jpg")
    }
</script>

<!-- body 태그 내부 -->
<button onclick="changeContent()" class="btn btn-warning btn-sm">변경</button>
<button onclick="appendContent()" class="btn btn-warning btn-sm">추가</button>
<button onclick="deleteContent()" class="btn btn-warning btn-sm">삭제</button>
<hr/>
<div id="div1"></div>

<!-- 스타일 변경 -->
<button onclick="changeSize()" class="btn btn-primary btn-sm">크기 변경</button>
<hr/>
<div id="div2">
    <img id="img1" src="/htmlcssjs/resources/image/ul/king3.jpg" width="200" />
    <img class="rounded-circle" src="/htmlcssjs/resources/image/ul/king4.jpg"
            width="200" height="200"/>
</div>

<!-- 속성값 변경 -->
<button onclick="chageAttribute()" class="btn btn-primary btn-sm">속성값 변경</button>
<hr/>
<div id="div3">
    <img id="img2" 
        src="/htmlcssjs/resources/image/ul/king5.jpg"
        class="rounded-circle"
        width="200" height="200"/>
</div>

 

 

● jQuery ready 이벤트 처리

<script>
    console.log("해석 전: ", $("img").length);

    function loadCompleted() {
        console.log("모든 자원이 다운로드 완료됨");
        console.log("모든 자원이 다운로드 완료된 후: ", $("img").length)
    }

    // documnet 자체를 jquery 객체로 변환하여 해석(ready)이 끝나면 실행
    $(document).ready(function() {
        console.log("HTML 해석이 완료됨 (1)");
        console.log("해석 후: ", $("img").length);
    });

    $(function() {
        console.log("HTML 해석이 완료됨 (2)");
        console.log("해석 후: ", $("img").length);
    });

    $(() => {
        console.log("HTML 해석이 완료됨 (3)");
        console.log("해석 후: ", $("img").length);
    });
</script>

<body onload="loadCompleted()">
    <div class="card">
      <div class="card-header">jQuery ready 이벤트 처리</div>
      <div class="card-body">
        <!-- <button class="" onclick="">이미지 다운로드</button> -->
        <img src="/htmlcssjs/resources/image/ul/king1.jpg" width="150" height="150" class="me-2 mb-2">
        <img src="/htmlcssjs/resources/image/ul/king2.jpg" width="150" height="150" class="me-2 mb-2">
        <img src="/htmlcssjs/resources/image/ul/king3.jpg" width="150" height="150" class="me-2 mb-2">
        <img src="/htmlcssjs/resources/image/ul/king4.jpg" width="150" height="150" class="me-2 mb-2">
        <img src="/htmlcssjs/resources/image/ul/king5.jpg" width="150" height="150" class="me-2 mb-2">
        <img src="/htmlcssjs/resources/image/ul/king6.jpg" width="150" height="150" class="me-2 mb-2">
        <img src="/htmlcssjs/resources/image/ul/king7.jpg" width="150" height="150" class="me-2 mb-2">
        <img src="/htmlcssjs/resources/image/ul/king8.jpg" width="150" height="150" class="me-2 mb-2">
        <img src="/htmlcssjs/resources/image/ul/king9.jpg" width="150" height="150" class="me-2 mb-2">
        <img src="/htmlcssjs/resources/image/ul/king4.jpg" width="150" height="150" class="me-2 mb-2">
      </div> 
    </div>
</body>

 

★ 동기적 반응

요청에 의한 다운로드를 기다리고 나서 그 다음 작업을 수행하는 것.

 

★ 비동기적 반응

요청에 의한 다운로드를 다시 요청하고, 그 다음 요청을 계속적으로 수행하는 것. HTML 문서구조를 파악하면서 다운로드는 따로 진행한다는 것이다.

 

→ 웹 이미지나 다운로드할 파일이 많을 경우 비동기적으로 구성해야 한다.

 

● ready 이벤트와 load 이벤트

ready : 해석

load : 모든 자원 적재 완료

→ 우리가 여태 했던 $(img)같은 코드는 다운로드를 받기 전에는 사용하지 못한다.

ex) console.log($("img").length);  →  최소한 해석 후 사용을 해야한다.

 

---

※ 정리

HTML 문서 구조의 해석과 로드 과정의 흐름
1. 순차적으로 문서의 구조를 위에서 부터 아래로 해석한다. (비동기적일 때)
2. 기타 시각적 자료(이미지) 등이 많다면 로드가 길어짐.
3. 이렇게 해석 후 실행할 것, 로드가 완료된 후 실행할 것들을 컨트롤 할 수도 있다. 따라서 이해하는 것이 관건이다.

 

---

# AJAX 는 스프링 이 후로 배울 것이다.
Asynchronous JavaScript and XML

 

## 오늘의 과제 (쇼핑몰) ##
프로젝트 홈페이지 구성하기

프로젝트 주제 선정.
 ??? 쇼핑몰 → 어떤 아이템을 다룰 것인가?

1) 주제 선정

2) 개발 범위 정하기 → *쇼핑몰 홈페이지 [*로그인, *회원가입, *상품상세 페이지, *마이페이지, *장바구니, 게시판]
상품 상세 페이지 → [*장바구니 넣기, *바로 구매하기]
마이페이지 → [내 정보, 현재 잔액, ... ]
*게시판 → 구매 후기, 리뷰 (쓰기, 수정, 보기, 삭제, 목록)
*관리자 페이지 → [*상품 등록, *상품 조회, *상품 수정]

3) 디자인 (설계)

4) 기능 구현

 

ex)
@ 프로젝트 명
teamname_mini_web
ㄴ src

팀 소스 관리 (수업 내일)
ㄴ git / github

ppt로 프로젝트의 대략전인 구성 표현
벤치마킹 사이트 찾기