250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

개린이 개발노트

국비지원 JAVA(자바) 프로그래밍(자바스크립트) 본문

국비지원(국비교육) 웹 개발자 과정

국비지원 JAVA(자바) 프로그래밍(자바스크립트)

개린이9999 2022. 12. 27. 07:24
728x90

장바구니 만들기 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>장바구니</h1>
  <div class="list">
    <!-- 여기에 장바구니 목록 표시 -->
  </div>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
  <!-- JS -->
  <script src="script.js"></script>
</body>
</html>
img {
  height: 200px;
}
let fruits = [
  {name: 'apple', memo: '빨개요'},
  {name: 'mango', memo: '달달함'},
  {name: 'melon', memo: '맛있음'},
];

/*
for(let i=0; i<fruits.length; i++) {
  let second = `<div class="col">
                <div class="card" style="width: 18rem;">
                  <img src="img/${fruits[i].name}.jpg" class="card-img-top">
                  <div class="card-body">
                    <h5 class="card-title">${fruits[i].name}</h5>
                    <p class="card-text">${fruits[i].memo}</p>
                    <button class="btn btn-primary">담기</button>
                  </div>
                </div>
                </div>`;
  // js
  // document.querySelectorAll('.row').insertAdjacentHTML('beforeend', second);
  // jQuery
  $('.row').append(second);
}*/

fruits.forEach((data) => {
  let second = `<div class="col">
                <div class="card" style="width: 18rem;">
                  <img src="img/${data.name}.jpg" class="card-img-top">
                  <div class="card-body">
                    <h5 class="card-title">${data.name}</h5>
                    <p class="card-text">${data.memo}</p>
                    <button class="btn btn-primary cart">담기</button>
                  </div>
                </div>
                </div>`;

  $('.row').eq(0).append(second);
})

$('.cart').on('click', function(e) {

  let name = $(e.target).siblings('h5').html();

  if(localStorage.getItem('name') != null) {

    let temp = localStorage.getItem('name');
    temp = JSON.parse(temp);

    temp.push(name);
    
    temp = JSON.stringify(temp);

    localStorage.setItem('name', temp);


  } else {
    localStorage.setItem('name', JSON.stringify([name]));
  }
});





// $('.cart').on('click', function(e) {
//   let name = $(e.target).siblings('h5').html();

//   if(localStorage.getItem('name') != null) {
//     let temp = JSON.parse(localStorage.name);
//     temp.push(name);
//     localStorage.setItem('name', JSON.stringify(temp));
//   } else {
//     localStorage.setItem('name', JSON.stringify([name]));
//   }
// });


let list = localStorage.getItem('name');

list = JSON.parse(list);

list.forEach((data) => {

  $('.list').append(`<div>${data}</div>`);

});

담기를 클릭한 이름을 저장-> name

 

로컬스토리지에 있는 목록을 빼와야함

 

빼온데에다 name을 추가시킴

 

다시 로컬 스토리지에 등록 

 

로컬스토리지에 

name:[과일명, 과일명, 과일명]

cnt: [ 1, 1,1]

 

items=[

{name: 과일명, 

 

장바구니를 클릭했을 때 어떤 과일명을 몇개 선택했는지 

img {
  height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>장바구니</title>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="navbar bg-light">
    <form class="container-fluid justify-content-start">
      <button class="btn btn-outline-success me-2" type="button" onclick="location.href='cart.html'">장바구니</button>
      <!-- <button class="btn btn-outline-secondary me-2" type="button">기능생각안함</button>       -->
    </form>
  </nav>
 
  <div class="container m-2">
    <div class="row row-cols-1 row-cols-md-3 g-4">
    
      
    </div>
  </div>


  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
  <!-- bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
  <!-- JS -->
  <script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>장바구니</h1>
  <div class="list">
    <!-- 여기에 장바구니 목록 표시 -->
  </div>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
  <!-- JS -->
  <script src="script.js"></script>
</body>
</html>
let fruits = [
  {name: 'apple', memo: '빨개요'},
  {name: 'mango', memo: '달달함'},
  {name: 'melon', memo: '맛있음'},
  {name: 'strawberry', memo: '맛있음'},
  {name: 'watermelon', memo: '맛있음'},
];

fruits.forEach((data) => {
  let second = `<div class="col">
                <div class="card" style="width: 18rem;">
                  <img src="img/${data.name}.jpg" class="card-img-top">
                  <div class="card-body">
                    <h5 class="card-title">${data.name}</h5>
                    <p class="card-text">${data.memo}</p>
                    <button class="btn btn-primary cart">담기</button>
                  </div>
                </div>
                </div>`;

  $('.row').eq(0).append(second);
})

$('.cart').on('click', function(e) {

  let name = $(e.target).siblings('h5').html();

  if(localStorage.getItem('items') != null) {
    
    let isHave; // 과일이 로컬스토리지에 있나 없나를 알려주는 변수 
    let index; // 과일이 로컬스토리지에 있으면 해당 위치를 저장하는 변수 

    let temp = localStorage.getItem('items');
    temp = JSON.parse(temp);

    /*↓로컬스토리지에 담기를 누른 과일(name)이 있나없나를 찾아주는 반복*/ 
    temp.forEach((data,i) => {
      if(data.name==name){
        isHave=true; index=i; 
        /*index=i; 한 이유는 몇번째 배열방에 있는지, 해당과일이있는 배열방 위치를 나타냄 */
      }
    });
    
    if(isHave) {
      temp[index].cnt++; /*temp에 들어있는 i번방에 있는 index를 1증가시켜라*/
    } else{
      temp.push({'name':name,'cnt':1});  /** cnt가 0이면 아무것도 실행이 
      안되기 때문에 cnt1 이라는 경우의 수를 만들어주고, 배열안에 오브젝트로 넣어줌 */
    }

    // temp.push(name);
    
    temp = JSON.stringify(temp);

    localStorage.setItem('items', temp);


  } else {
    localStorage.setItem('items', JSON.stringify([{'name':name, 'cnt':1 }]));
    /**로컬스토리지안에 배열로에 오브젝트 넣고 싶음 근데 로컬스토리지엔 문자밖에 저장이안되므로
     * JSON을 이용해서 문자로 바꿔서 배열 형태로 넣음.
     */
  }
});


let list = localStorage.getItem('items');

list = JSON.parse(list);

list.forEach((data) => {

  $('.list').append(`<div>${data.name}:${data.cnt}</div>`);

});

class를 자바스크립트로 탈부착하기 

.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="2.css">
<title>Document</title>
</head>
<body>

    
      <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav>

      <ul class="list-group">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
      </ul>

    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="2.js"></script>
</body>
</html>

위의 html 코드에서 class명 확인 

 

 

.list-group{
    display: none;
}

.show{
    display: block;
}

우선 css로 보였다 안보였다 하는 코드를 작성 show라는 클래스는 html에 없지만 자바스크립트에서 활용하기 위해

임의로 먼저 만든것임

 

 

document.querySelector('.navbar-toggler').addEventListener('click',function() {

 document.querySelector('.list-group').classList.toggle('show');

});

자바스크립트에서 click 할때 show클래스가 사라졌다가 나타나게끔 하는 코드 .toggle를 사용해야한다.

 

 

  // $('클래스명').addClass //추가 = .classList.add()
   // $('클래스명').removeClass //추가 .classList.remove()
  $('list-group').toggleClass // 토글(뗏다 붙였다 하기)  
 

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

이런 곳에서 기억 안나는 코드나 메서드 활용법 검색하기 

z-index: ; 어떤걸 앞으로 뺼껀지

"1".padStart(2,0)

'01'

"1".padStart(5,0)

'00001'

-> 문자로 밖에 처리가 안됨.

 

728x90

'국비지원(국비교육) 웹 개발자 과정' 카테고리의 다른 글

국비지원 JAVA(자바) 프로그래밍  (0) 2022.12.29
국비지원 JAVA(자바) 프로그래밍(자바스크립트)  (0) 2022.12.28
국비지원 JAVA(자바) 프로그래밍(자바스크립트,JSON)  (0) 2022.12.26
국비지원 JAVA(자바) 프로그래밍(자바스크립트)  (0) 2022.12.23
국비지원 JAVA(자바) 프로그래밍 (자바스크립트)  (2) 2022.12.22
'국비지원(국비교육) 웹 개발자 과정' Related Articles more