본문 바로가기
학원에서 배운 것/JavaScript

KDT 5th 웹개발자 입문 수업 15일차

by 쿠리의일상 2023. 2. 15.

1. todo 리스트 해설

createElement() -> setAttribute() -> onclick or addEventListener -> appendChild 순서로 만들어서 붙여주는 형식으로 수행

 

1-1. input 필드의 값은 value에 들어간다. 그러므로 입력 받은 값을 value로 읽어올 수 있다.

 

1-2. 체크박스의 체크됨을 확인하기 위해선 checked 프로퍼티로 boolean 확인

 

1-3. DOM요소에 style 프로퍼티로 직접 접근이 가능하며, 스타일 속성명의 경우 카멜형식(text-decoration -> textDecoration) 으로 접근할 수 있다

 

1-4. addEventListener 와 onclick

이벤트가 일어나는 대상을 접근하는 방법

addEventListener 는 이벤트 객체인 e

onclick은 this 

deleteBtn.addEventListener('click', function(e){
	e.target.parentNode.remove();
});

또는
deleteBtn.onclick = function() {
   this.parentNode.remove();
}

또는
deleteBtn.setAttribute('onclick', 'deleteList(this)')

function deleteList(e) {
  e.parentNode.remove();
}

이벤트를 넣어주는 방식들

 

 

1-5. 정리

// 강사님 구현
const todoInputField = document.querySelector('.input-task');
const todoSendBtn = document.querySelector('.input-btn');
const todoUlist = document.querySelector('.todo-list');

//삭제 이벤트
function deleteList(e) {
  e.parentNode.remove();
}

let addList = function() {
  if(todoInputField.value === "") {
    todoInputField.setAttribute('placeholder', '내용을 입력하세요');
    return;
  }

  const addLi = document.createElement('li');
  const checkBtn = document.createElement('input');
  const deleteBtn = document.createElement('button');

  checkBtn.setAttribute('type', 'checkbox');
  checkBtn.addEventListener('click', function() {
      if(checkBtn.checked === true) {
        checkBtn.parentNode.style.textDecoration = 'line-through';
      } else {
        checkBtn.parentNode.style.textDecoration = 'none';
      }
  });

  deleteBtn.textContent = '삭제';
  // deleteBtn.addEventListener('click', function(e) {
  //   e.target.parentNode.remove();
  // });

  // deleteBtn.onclick = function() {
  //   this.parentNode.remove();
  // }

  deleteBtn.setAttribute('onclick', 'deleteList(this)')

  addLi.appendChild(checkBtn);
  addLi.append(todoInputField.value);
  addLi.appendChild(deleteBtn);

  todoUlist.appendChild(addLi);

  todoInputField.value = "";
  todoInputField.focus();
};

//이벤트 리스너
todoSendBtn.addEventListener('click', addList);

 

 

2. 스케쥴 달력 구현

<html>
  <head>
    <meta charset="UTF-8" />
    <title>내 스케줄</title>
    <style>
      td {
        width: 100px;
        height: 100px;
      }

      tr > td:first-child > p,
      tr > th:first-child > p {
        color: red;
      }

      tr > td:last-child > p,
      tr > th:last-child > p {
        color: blue;
      }

      td > p:hover {
        transform: scale(1.2);
        cursor: pointer;
      }
    </style>
    <script defer src="./schedule.js"></script>
  </head>

  <body>
    <div>
      날짜 : <input type="text" id="date" readonly /> <br />
      내용 : <input type="text" id="content" /> <br />
      <button type="button" onclick="writeSchedule();">작성</button> <br />
    </div>
    <div class="year-month" style="font-size: 2em; color: green; text-align: center">
      2023년 2월
    </div>
    <br />
    <table align="center" width="500" style="text-align: center">
      <tr>
        <th>日</th>
        <th>月</th>
        <th>火</th>
        <th>水</th>
        <th>木</th>
        <th>金</th>
        <th>土</th>
      </tr>
      <tr>
        <td>
          <p></p>
        </td>
        <td>
          <p></p>
        </td>
        <td>
          <p></p>
        </td>
        <td>
          <p>1</p>
        </td>
        <td>
          <p>2</p>
        </td>
        <td>
          <p>3</p>
        </td>
        <td>
          <p>4</p>
        </td>
      </tr>

      <tr>
        <td>
          <p>5</p>
        </td>
        <td>
          <p>6</p>
        </td>
        <td>
          <p>7</p>
        </td>
        <td>
          <p>8</p>
        </td>
        <td>
          <p>9</p>
        </td>
        <td>
          <p>10</p>
        </td>
        <td>
          <p>11</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>12</p>
        </td>
        <td>
          <p>13</p>
        </td>
        <td>
          <p>14</p>
        </td>
        <td>
          <p>15</p>
        </td>
        <td>
          <p>16</p>
        </td>
        <td>
          <p>17</p>
        </td>
        <td>
          <p>18</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>19</p>
        </td>
        <td>
          <p>20</p>
        </td>
        <td>
          <p>21</p>
        </td>
        <td>
          <p>22</p>
        </td>
        <td>
          <p>23</p>
        </td>
        <td>
          <p>24</p>
        </td>
        <td>
          <p>25</p>
        </td>
      </tr>

      <tr>
        <td>
          <p>26</p>
        </td>
        <td>
          <p>27</p>
        </td>
        <td>
          <p>28</p>
        </td>
        <td>
          <p></p>
        </td>
        <td>
          <p></p>
        </td>
        <td>
          <p></p>
        </td>
        <td>
          <p></p>
        </td>
      </tr>
    </table>
  </body>
</html>
// 내가 구현
const calendar = document.querySelector("table");
const date = document.querySelector("#date");
const inputField = document.querySelector("#content");
// 클릭 된 요소를 저장하기 위한 전역 변수
let targetEl;

const info = document.querySelector('.year-month');

let clickDate = function(e) {
  //캐싱
  targetEl = e.target;
  tag = e.target.tagName;
  today = info.textContent;

  if(tag === "P" && !(tag.textContent === "")) {
    date.value = `${today.trim()} ${targetEl.childNodes[0].textContent}일`;
  } else if (tag === "TD" && !(targetEl.children[0].textContent === "")) {
    date.value = `${today.trim()} ${targetEl.children[0].textContent}일`;
  }
}

let writeSchedule = function() {
  if(inputField.value === "" && date.value === "") {
    inputField.placeholder = "내용을 입력하시오";
    date.placeholder = "날짜를 선택하시오";
    return;
  } else if (inputField.value === "") {
    inputField.placeholder = "내용을 입력하시오";
    return;
  } else if (date.value === "") {
    date.placeholder = "날짜를 선택하시오";
    return;
  }

  const divEl = document.createElement('div');
  divEl.innerText = inputField.value;
  divEl.addEventListener('click', function(el) {
    el.target.remove();
  });

  if(targetEl.tagName === "P") {
    targetEl.parentNode.appendChild(divEl);
  } else if (targetEl.tagName === "TD") {
    targetEl.appendChild(divEl);
  }

  inputField.value = "";
  inputField.focus();
}

//이벤트 리스너
calendar.addEventListener('click', clickDate);

 

기능해야했던 내용은

1. 날짜나 날짜 칸을 클릭하면 날짜 input에 날짜가 입력되게

2. 내용을 입력한 뒤 작성 버튼을 누르면 해당 날짜에 스케쥴이 추가되게

3. 이미 작성된 스케쥴은 클릭하면 삭제가 되게

 

클릭된 요소를 let 전역 변수로 두어 e.target을 전역으로 사용할 수 있게 하는게 포인트

다만 유이미한 클릭 이벤트는 달력 내부에서만 발생해야 하므로 캘린더 안의 클릭 이벤트만 저장하게끔

 

 

 

 

 

어떤 태그가 클릭 되었는지 확인하는 방법으로는 tagName 이라는 API를 사용, 리턴값은 태그명이 대문자로 리턴된다.

 

 

 

 

 

 

 

 

 

3. 스타벅스 홈페이지에 js 기능 넣기

script는 defer로 연결해주기

 

3-1. 서브 메뉴의 search 변경하기

기존에는 CSS의 :focus를 사용하여 구현하고 돋보기를 피해서 인풋필드를 클릭해야 했다.

 

----> 돋보기를 클릭하면 기능이 동작하도록 변경

돋보기를 클릭하면 focus가 가도록 설정하여 기존의 CSS 사용

포커스 시 통합 검색이라는 placeholder도 추가해준다.

<div class="search">
	<input type="text"/>
	<span class="material-symbols-outlined">
		search
	</span>
</div>
// sub-menu
// search
const searchEl = document.querySelector('.search');
const searchInputEl = searchEl.querySelector('input');

searchEl.addEventListener('click', function() {
  searchInputEl.focus();
});

searchInputEl.addEventListener('focus', function() {
  searchInputEl.placeholder = '통합검색';
}); //포커스 됐을 때
searchInputEl.addEventListener('blur', function() {
  searchInputEl.placeholder = '';
}); //포커스 없어질 때

 

 

3-2. 공지사항의 슬라이드 메뉴

https://swiperjs.com/

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

// CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

Swiper 라이브러리 사용하기

 

to be continue...

'학원에서 배운 것 > JavaScript' 카테고리의 다른 글

KDT 5th 웹개발자 입문 수업 16일차  (0) 2023.02.16
지금까지 배운 것을 바탕으로 To do List 구현  (0) 2023.02.16
KDT 5th 웹개발자 입문 수업 14일차  (0) 2023.02.14
KDT 5th 웹개발자 입문 수업 13일차  (0) 2023.02.13
KDT 5th 웹개발자 입문 수업 12일차  (0) 2023.02.10

관련글

티스토리툴바