JavaScript

🔸 학습내용

1. 웹페이지만들기

• js 작성코드

  const txtArr = ['Web Publisher', 'Front-End Developer', 'Web UI Designer', 'UX Designer', 'Back-End Developer'];
  let index = 0;
  let currentTxt = txtArr[index].split("");
  //
  function writeTxt(){
     spanEl.textContent += currentTxt.shift();
     if(currentTxt.length !== 0){
        setTimeout(writeTxt, Math.floor(Math.random() * 100));
     }else{
       currentTxt = spanEl.textContent.split("");
       setTimeout(deleteTxt, 3000);
     }
   }
   writeTxt();
  //
  function deleteTxt(){
     currentTxt.pop(); 
     spanEl.textContent = currentTxt.join("");
     if(currentTxt.length !== 0){ 
       setTimeout(deleteTxt, Math.floor(Math.random() * 100));
     }else{ 
       index = (index + 1) % txtArr.length;
       currentTxt = txtArr[index].split("");
       writeTxt();
     }
   }
  //
  const headerEl = document.querySelector("header");
  window.addEventListener('scroll', function(){
  const browerScrollY = window.pageYOffset;
   if(browerScrollY > 0){
     headerEl.classList.add("active");   
   }else{
     headerEl.classList.remove("active");  
   }
  });
  //
  const animationMove = function(selector){
     const targetEl = document.querySelector(selector);
     const browserScrollY = window.pageYOffset;
     const targetScorllY = targetEl.getBoundingClientRect().top + browserScrollY;
     window.scrollTo({ top: targetScorllY, behavior: 'smooth' });
   };
  //
  const scollMoveEl = document.querySelectorAll("[data-animation-scroll='true']"); 
  for(let i = 0; i < scollMoveEl.length; i++){
   scollMoveEl[i].addEventListener('click', function(e){
     const target = this.dataset.target;
     animationMove(target);
   });
  }

🔸 어려웠던 점, 해결방법, 학습소감

오늘은 개념보다는 실습위주로 강의를 해주셔서 학습내용 정리는 많이 없다.
html, css 코드도 전부 올리기에는 문제가 있을까봐 작성한 js 코드만 정리했다.
그리고 어려웠던 점은 수업중에 강사님과 함께 코드를 작성하는데 생각보다 오타때문에 나는 오류가 많았다. 또 아직은 코드를 이해하고 작성한다기보다 이런게 있구나.. 정도의 실력이기 때문에 더욱 노력을 해야할 것 같다~