오늘은 랜덤한 숫자값을 맞추는 간단한 게임을 만들어 보았다 :)

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.


     let count = 0;
    //사용자가 몇 번만에 맞췄는지 나타낼 변수다, 초기값은 0

    let alertDiv = document.querySelector('.text_box')
    //사용자가 정답을 맞추거나 틀렸을 경우 문구를 띄울 장소를 가져오기

    let inputNumber = document.querySelector('input')
    //사용자가 입력한 값을 받아오기 위해 input 태그를 들고오기

    inputNumber.id = Math.floor(Math.random() * 100) + 1
    //여기서 랜덤 값을 input의 아이디에 저장하기로 했다. 굳이 id에 줄 필요는 없고 따로 변수를 만들어 그 곳에 저장해도
    똑같은 결과가 나올 것이다... (기능을 좀 더 다양하게 써보기 위해 input태그의 id 공간에 넣기로 했을 뿐)

    let randomId = inputNumber.getAttribute("id")
    //랜덤하게 바뀐 input 태그의 ID를 가져와서 변수에 저장했다.
    //문자열로 저장되기 때문에 숫자로 바꿔줘야 한다.

    let nBtu = document.querySelector('button')
    nBtu.addEventListener('click', numberAnswer)
    //사용자가 버튼을 눌렀을 때 기능이 실행되도록 한다


    function numberAnswer() {
      let userA = Number(inputNumber.value)
      //input태그에 받아온 값을 지역변수로 선언
      //input태그에 담기는 값은 문자열이기 때문에 숫자로 바꿔주는 작업이 필요하다.


      if (userA > 0 && userA < 101) {
        if (userA == randomId) {
          count++
          //사용자가 시도한 횟수 만큼 count 값을 증가시키기 때문에 모든 조건문에 붙는다.
          alertDiv.innerHTML = `정답입니다! ${count}번 만에 맞추셨습니다!`

          inputNumber.id = Math.floor(Math.random() * 100) + 1
          randomId = inputNumber.getAttribute("id")
          //정답을 맞춘 후, 기존 변수를 재선언함으로써 새로운 랜덤값이 생성된다.
          inputNumber.value = ""
            //사용자가 입력한 값을 없앤다.

          count = 0;
          //정답을 맞췄기 때문에 시도횟수는 초기화

        } else if (userA > randomId) {
          count++
          alertDiv.innerHTML = `입력한 값 ${userA}보다 낮은 숫자입니다. 다시 시도해보세요.`
          inputNumber.value = ""

        } else if (userA < randomId) {
          count++
          alertDiv.innerHTML = `입력한 값 ${userA}보다 높은 숫자입니다. 다시 시도해보세요.`
          inputNumber.value = ""
        }

      } else {
        alertDiv.innerHTML = `1~100 사이의 숫자를 입력해주세요.`
        //앞서 사용자가 1~100까지의 숫자를 입력했는지 확인하고 아닐시 else문을 실행한다.
      }
    }

 

   한 글자만 맞아도 검색 목록에 뜨는 화면을 만들어보자.

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.


    let item = [ ];
    //아이템들을 담을 변수 선언

    let itemList = document.querySelectorAll('#itemList > li')
    let itemSearch = document.querySelector('input')
    itemSearch.addEventListener('input', itemValue)
    //input = form 요소의 값이 변경될 때마다 이벤트 발생


    for (let i = 0; i < itemList.length; i++) {
      item.push(itemList[i].innerHTML)
      //배열변수에 li태그가 가지고 있는 텍스트 이름을 모두 저장
    }

    function itemValue() {
      for(let i=0; i<item.length; i++){
        let itemCode = String(item[i]) 
        let userSerach = String(itemSearch.value)

        //includes = 해당 문자열이 포함이 되어 있을 경우 true를 반환
        if(itemCode.includes(userSerach)){
          itemList[i].style.display = "block"
        } else{
          itemList[i].style.display = "none"
        }
      }
    }
    

 


    let itemList = document.querySelectorAll('#itemList > li')
    let itemSearch = document.querySelector('input')

    //keyup = 키보드를 누를 때마다 이벤트 발생
    itemSearch.addEventListener('keyup', function(){
      let itemText = itemSearch.value;
      //지역변수에 input태그에서 받아온 값을 키보드를 누를때마다 저장

      itemList.forEach(function(array){
        let listText = array.textContent;
        //textContent = 요소가 가지고 있는 텍스트를 가져옴

        //indexOf = 해당 문자열을 가지고 있을 경우 해당 위치의 인덱스 반환, 없으면 -1을 반환함
        if(listText.indexOf(itemText) !== -1){
          array.style.display = "block"
        } else {
          array.style.display = "none"
        }
      })
         //indexOf로 반환받은 숫자가 양수면 해당 li태그를 block 처리, 음수면 none처리
    })

 

'아이티에듀넷' 카테고리의 다른 글

2024-09-02 :: 029 Java Script 활용 ⑥  (0) 2024.09.02
2024-08-30 :: 028 Java Script 활용 평가  (0) 2024.08.30
2024-08-28 :: 026 Java Script 활용 ④  (0) 2024.08.28
2024-08-27 :: 025 HTML / CSS / JS 참고용 포스트  (0) 2024.08.27
2024-08-26 :: 024 Java Script 활용 ③  (0) 2024.08.26

 

   이 화면에서 JS로 만든 기능은 총 3가지 (배너 슬라이드, 네비게이션 메뉴 hover, 드롭다운 박스)

 

 

   < 배너 슬라이드 >   


let heroL = document.querySelector('#heroLeft')
let heroR = document.querySelector('#heroRight')
console.log(heroL, heroR)
//배너에 배치되어 있는 버튼을 가져온다.

let heroS = document.querySelectorAll('.hero_slider')
//움직일 배너 부분을 가져온다.

let heroCount = 0;
//기능 작동에 필요한 변수를 초기화 한다, 지역변수로 할당하면 안된다. (전역에서 변해야 하는 값이므로)

heroL.addEventListener('click', heroLeft)
heroR.addEventListener('click', heroRight)
//가져온 버튼에 이벤트를 할당한다. 클릭하면 작성한 기능이 실행된다.

function heroLeft(){
  heroCount--;
  //왼쪽 버튼을 누르면 1씩 감소된다.

  //변수의 값이 음수가 되는 경우 배너의 인덱스 마지막 부분으로 이동할 수 있도록 한다.
  //배열의 길이는 1부터 시작하지만 인덱스 번호는 0부터 시작하므로 -1을 해주어야 실제 길이가 맞다.
  if(heroCount<0){
    heroCount = heroS.length-1
  }
  heroL.style.backgroundColor = "#fda417"
  heroL.style.color = "white"
  heroR.style.backgroundColor = "white"
  heroR.style.color = "#07092f"
  //누르면 버튼의 색이 교차로 바뀌는 속성을 지정해주었다.

  heroShow()
  //실제 배너가 움직이는 기능을 포함시켜주어야 화면이 움직인다.
}

function heroRight(){
  heroCount++;
  //오른쪽 버튼을 누르면 1씩 증가한다.

  //변수의 값이 배너의 인덱스 수 보다 많아지게 되면 다시 초기값(0)으로 돌린다.
  if(heroCount>=heroS.length){
    heroCount = 0
  }
  heroR.style.backgroundColor = "#fda417"
  heroR.style.color = "white"
  heroL.style.backgroundColor = "white"
  heroL.style.color = "#07092f"

  heroShow()
}

//실제 배너가 움직이는 효과를 내어 줄 기능이다.
function heroShow(){
  console.log('배너')
  heroS.forEach(function(array){
    array.style.transform = `translateX(-${heroCount*100}%)`
  })
}

 

 

   <네비게이션 메뉴 마우스 over/out 기능 >


let navHover = document.querySelectorAll('#nav_ul > li > a')
//네비게이션 메뉴를 가져오기, CSS 선택자로 작성해도 이상없다.

navHover.forEach(function(array){
  array.addEventListener("mouseover", navColor1)
  array.addEventListener("mouseout", navColor2)
  //이벤트는 같은 항목에 여러번 할당할 수 있다.
})
//각 메뉴들에게 over와 out 이벤트를 지정하고 기능을 연결하기

function navColor1(){
  console.log('오버')
  this.style.color = "#fda417"
  // this는 해당 이벤트가 발생한 요소를 가져오게 되는데, 그렇게 가져온 요소의 속성을 변경할 수 있다.
}

function navColor2(){
  console.log('아웃')
  this.style.color = "white"
}

 

 

   <드롭다운 박스>


let testimonial = document.querySelector('#nav_test')
let testBox = document.querySelector('#nav_test_box')
let testCount = 0;
//드롭다운 박스를 클릭을 할 때마다 나타났다 사라지게 만드는 기능이다
//필요한 요소를 HTML에서 가져오고 전역변수로 필요한 카운트를 선언 및 초기화 해둔다.

testimonial.addEventListener('click', navTestbox)
//클릭 이벤트를 두번 주게되면 나타났다, 사라졌다를 순차적으로 반복하기 때문에 이번 기능에서는 그렇게 하면 안된다.

function navTestbox(){
  testCount++;
  //기본적으로 클릭 할 때마다 변수의 값이 1씩 증가하도록 한다.

  //변수의 값을 2로 나누었을 때의 나머지가 0인 경우는 짝수라는 뜻이므로, 짝수일 때 드롭박스가 보이지 않게 한다.
  //반대로 나누었을 때 나머지가 있다면 홀수라는 뜻이므로, 홀수일 때 드롭박스가 나타나게 만든다.
  if(testCount%2==0){
    testBox.style.opacity = "0"
    testBox.style.top = "50px"
  } else{
    testBox.style.opacity = "1"
    testBox.style.top = "25px"
    //투명도와 위치를 조절하여 나타나게 만든다.
  }
}

   이 화면에서 쓰인 JS기능은 탭의 색상을 바꾸는 한가지

   하단의 슬라이드는 CSS애니메이션 효과를 사용해 자동으로 넘어가게끔 만들었으므로 오랜만에 기록해보겠다.

 


let proTab = document.querySelectorAll('.pro_ul > li > a')
//탭의 버튼들을 가져와준다.

proTab.forEach(function(array){
  array.addEventListener('click', projectTap)
})
//각 탭에 이벤트를 할당한다.

function projectTap(){
  proReset()
  //색상 초기화 기능을 만들어 넣었지만 그냥 해당 기능의 구문을 여기에 작성해도 정상적으로 작동한다.
  //아래에서 색상을 바꾼 탭들이 다음으로 넘어갈 때마다 원래 색으로 돌아오게 하는 기능이다.
  //위에서부터 순차적으로 기능이 실행되기 때문에 초기화를 하고 그 이후 if문에 맞는 탭의 색상이 변하게 된다.

  let proID = this.id.charAt(this.id.length-1)
  //클릭한 탭의 속성에서 ID값의 맨 끝자리를 가져와 배열의 숫자와 비교해 같을 경우 색상을 변경하도록 만들었다.
  //탭의 아이디 뒤에는 0부터 5까지의 숫자를 입력해두었기 때문에 비교가 가능하다.

  for(let i=0; i<proTab.length; i++){
    //1씩 증가하는 i의 값이 가져온 ID의 값과 동일하면 색상이 바뀐다.
    if(proID == i){
      proTab[i].style.backgroundColor = "#fda417"
    }
  }
}

//다음 탭으로 넘어가면 원래의 색상으로 돌아오는 기능
function proReset(){
  proTab.forEach(function(array){
    array.style.backgroundColor = "white"
  })
}

 

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.


.pro_slider{
  width: 100%;
  display: inline-block;
  animation: proSlider 4.5s ease-in-out infinite;
  //keyframes로 만든 애니메이션을 지정하기
  //총 과정을 4.5초 동안 진행되게 만들고 애니메이션의 속도를 지정한 후 반복여부를 결정하면 설정은 끝
}

@keyframes proSlider{
  0% {
    transform: translateX(0%);
    //제자리인 상태
  }

  40% {
    transform: translateX(-100%);
    //-100%만큼 이동한 상태
  }

  100%{
    transform: translateX(-100%);
    //그 상태로 일시정지
  }
}

'아이티에듀넷' 카테고리의 다른 글

2024-08-30 :: 028 Java Script 활용 평가  (0) 2024.08.30
2024-08-29 :: 027 Java Script 활용 ⑤  (2) 2024.08.29
2024-08-27 :: 025 HTML / CSS / JS 참고용 포스트  (0) 2024.08.27
2024-08-26 :: 024 Java Script 활용 ③  (0) 2024.08.26
2024-08-23 :: 023 Java Script 활용 ②  (0) 2024.08.23

 

 

이미지 주소로만 변경했던 야매(?)슬라이드를 좀 더 부드러운 동작이 담긴 버전으로 구현해보자.

 


let leftB = document.querySelector('#left')
let rightB = document.querySelector('#right')
leftB.addEventListener("click", leftSlide)
rightB.addEventListener("click", rightSlide)

let sliderLi = document.querySelectorAll('.slider_li')
let count = 0;

function leftSlide(){
  count--;
  //왼쪽 버튼을 누를 때마다 count 변수에 담긴 값에서 -1
  if(count < 0){
    count = (sliderLi.length-1);
    //count가 0보다 작은 숫자가 되면 sliderLi의 마지막 인덱스 번호가 들어가게끔 if문 설정
  }
  show() //아래에 작성한 기능, 화면을 넘겨주는 이벤트  
}

function rightSlide(){
  count++;
  //오른쪽 버튼을 누를 때마다 count 변수에 담긴 값에서 +1
  if(count >= sliderLi.length){
    count = 0;
    //count가 sliderLi 배열의 길이보다 크거나 같은 숫자가 되면 count값을 초기로 되돌려 놓음
  }
  show()
}

function show(){
  sliderLi.forEach(function(array){
    array.style.transform = `translateX(-${count*100}%)`
    //for문 혹은 forEach로 배열의 각 요소에게 원하는 CSS속성을 입력함
  })
}

 

 

   이번에는 슬라이드에 이어 탭 형식도 js로 작성해보자. input태그를 통한 radio 방식으로는 그렇게 어렵지 않았는데 js는 HTML에서 읽어온 뒤, 기능을 만들어 적용해야 한다는 점이 아직은 익숙하지 않은 것 같아 상세하게 남겨보도록 하겠다.

 


<section>

    <ul id="tap_list"> //상단의 탭이 될 부분
      <li class="fashion_tab" id="ftap1">Best Sellers</li>
      <li class="fashion_tab" id="ftap2">New Arrivals</li>
      <li class="fashion_tab" id="ftap3">Hot sales</li>
    </ul>
    <div id="pro_list"> //하단의 컨텐츠가 나타나는 부분
      <div class="pro_box1 pro_box2" id="pro1"> ... </div>
      <div class="pro_box1 pro_box3" id="pro2"> ... </div>
      <div class="pro_box1 pro_box2" id="pro3"> ... </div>
      <div class="pro_box1 pro_box3" id="pro4"> ... </div>
      <div class="pro_box1 pro_box2" id="pro5"> ... </div>
      <div class="pro_box1 pro_box3" id="pro6"> ... </div>
      <div class="pro_box1 pro_box2" id="pro7"> ... </div>
      <div class="pro_box1 pro_box3" id="pro8"> ... </div> //최대한 숫자를 활용하는 편이 편하다.
    </div>

  </section>

 


let tabBtu = document.querySelectorAll('.fashion_tap')
//탭 버튼이 될 li들을 불러와서 변수에 담는다.

consol.log 확인 결과
NodeList(3) [li#ftap1.fashion_tap, li#ftap2.fashion_tap, li#ftap3.fashion_tap]
0: li#ftap1.fashion_tap
1: li#ftap2.fashion_tap.active
2: li#ftap3.fashion_tap


for(let i=0; i<tabBtu.length; i++){
  tabBtu[i].addEventListener('click', tabSelected)
}
//배열의 각 요소에 반복문을 활용하여 각 인덱스에 이벤트를 할당해준다.


function tabSelected(){
  let tabID = 'pro_box' + this.id.charAt(this.id.length-1)
  //ftap(숫자) 부분에서 마지막 숫자 부분만 들고와 테이블의 id와 똑같이 만들기

  console.log 확인 결과 //각 탭을 누를 때마다 반환되는 값이다.
  pro_box1
  pro_box2
  pro_box3

  tabActive(this) //클릭한 값을 가져와서 tap 매개변수에 삽입하여 작동하게 만듦.
  showTable(tabID) //지역변수로 선언된 tabID를 해당 기능의 매개변수에 삽입
}


function tabActive(tab){
  for(let i=0; i<tabBtu.length; i++){
    tabBtu[i].className = "fashion_tab";
    //다시 원래 값으로 돌려놓는 반복문
    //아래에서 active 값을 준 것을 다시 초기화 하기 위해서 필요하다.
    //먼저 선언된 기능이기 때문에 초기화가 먼저 돈 이후 active 추가하는 기능이 작동된다.
  }

  tab.className = "fashion_tab active"
  //active를 추가해 css속성을 주기 위함
  //해당 기능에서는 this로 값을 가져옴
}


function showTable(tabID){
  let proBox = document.querySelectorAll('.pro_box1')
  //탭이 변경 될 때마다 제품들이 나타났다 사라졌다 하기 위해 공통된 클래스 값을 가져와 변수에 저장

  for(let i=0; i<proBox.length; i++){
    proBox[i].style.display = "none"
  }

  let proTable = document.querySelectorAll("."+tabID)
  //단일이 아닌 여러개에 스타일을 줘야 하기 때문에 위와 마찬가지로 반복문을 통해 각 배열에 값을 지정해줘야한다.
  if(proTable){
    proTable.forEach(function(array){
      array.style.display = "block"
    })
   //선택된 클래스만 보이도록 none/block값을 지정하면 끝
  }
}


tabActive(tabBtu[0])
showTable('pro_box1')
//첫 화면에도 탭이 보일 수 있도록 초기값을 지정

 

   위 기능을 코드펜으로 작성하면 이렇게 된다.

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

   어려운 듯 알 듯 말 듯... 아직은 낯설지만 친해질 수 있기를...

'아이티에듀넷' 카테고리의 다른 글

2024-08-28 :: 026 Java Script 활용 ④  (0) 2024.08.28
2024-08-27 :: 025 HTML / CSS / JS 참고용 포스트  (0) 2024.08.27
2024-08-23 :: 023 Java Script 활용 ②  (0) 2024.08.23
2024-08-22 :: 022 Java Script 활용 ①  (0) 2024.08.22
2024-08-21 :: 021 Java Script 기초 ⑥  (0) 2024.08.21

 

버튼을 누를 때마다 '랜덤' 하게 색상이 바뀌는 자바 스크립트를 작성해보자.

 


let colors = ["green", "red", "rgba(133,122,200,0.8)", "#f15025", "blue", "yellow" ... ]
//백그라운드 컬러 색상을 배열에 담는다. CSS로 입력이 되는 색상이면 다 된다.

let stringColor = document.querySelector('#colorName')
// HTML 본문에서 색상이 바뀔 때마다 <span> 요소에 컬러 이름을 넣기 위해 변수를 가져오자.

let back = document.querySelector('#backColor')
// 실제 색상이 바뀔 부분을 가져오자.

기능 값은 'CHANGE' 버튼에 onclick 속성으로 지정해주었다.

 

 

 

처음 구상한 스크립트는 if / else if 를 반복하여 값을 넣는 식으로 구성하였다.


function changeColor1(){
      let randomNum = Math.floor(Math.random()*colors.length)
      //Math.random()은 0과 1사이의 랜덤한 값으로 난수를 가져오는데, 여기서 우리는 1보다 더 큰 숫자가 필요하므로 직접 수를 곱해주어야 한다. 지금은 colors 배열에 담긴 index 값 만큼 필요하므로 배열의 길이로 지정하면 된다.

       //if문으로 랜덤값이 index의 숫자와 일치하면 직접 속성과 값을 변경하는 식으로 작성해보았다.
      if(randomNum == 0){
        back.style.backgroundColor = "green"
        document.querySelector('#colorName').innerHTML = "green"
        stringColor.style.color = "green"
      } 
else if(randomNum == 1){
        back.style.backgroundColor = "red"
        document.querySelector('#colorName').innerHTML = "red"
        stringColor.style.color = "red"
      } 
else if(randomNum == 2){
        back.style.backgroundColor = "rgba(133,122,200,0.8)"
        document.querySelector('#colorName').innerHTML = "rgba(133,122,200,0.8)"
        stringColor.style.color = "rgba(133,122,200,0.8)"
      } 
else if(randomNum == 3){
        back.style.backgroundColor = "#f15025"
        document.querySelector('#colorName').innerHTML = "#f15025"
        stringColor.style.color = "#f15025"
      }

       ... (index 수 만큼 반복해야 함...)
    }

 

하지만 이렇게 작성하게 되면 늘어난 색상 만큼 else if문을 추가로 작성해야 하고 직접 속성과 값을 덮어씌우는 방식 또한 귀찮은 방법이기 때문에 다른 방법을 찾기로 했다. 그 다음 생각한 방식은 for문과 if문을 섞어 사용하는 것이었다. 처음 시도 해보는거라 사실 안되면 어쩌나 했는데 깔꼼하게 되었다...

 

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

이렇게 하니 단 몇 줄 만으로 귀찮은 작업 없이 깔끔하게 완성시킬 수 있었다!

 


//변수 i가 colors의 배열만큼 반복되게 만들어 준다.
for(let i = 0; i<colors.length; i++){

          //변수 i가 랜덤으로 나온 정수의 숫자와 일치할 때, 색상을 변경하는 문구를 작성하면 끝! 이걸로 바로 끝이다!
        if(randomNum == i){

          back.style.backgroundColor = colors[i]
          stringColor.innerHTML = colors[i]
          stringColor.style.color = colors[i]
            //들어갈 문구도 colors의 인덱스 값을 넣으면 자동으로 삽입되니 이런식으로 작성하면 됐었다...
        }
      }

 

 

 

어떤 기능은 그냥 CSS로 주는게 더 간편하지 않을까? 드는 기능이 많았지만...

CSS가 더 간편할 때가 있다면, JS도 간편해질 때가 있었는데 그건 바로 슬라이드지 않나 싶다. HTML/CSS로만 이용해서 슬라이드를 만들었을 때 되게 불편하고 만들어야 하는 것도 많았는데 JS로 하니까 생각보다 간편하게 됐다.

 


<script>
    let index = 0;
    //초기값 지정, index값으로 반환될 이미지의 순서를 정하기 때문에 변수를 하나 생성해두었다.

    let imgArray = ["url(/img/slide01.jpg)", "url(/img/slide02.jpg)", "url(/img/slide03.jpg)", "url(/img/slide04.jpg)"]
    //이미지 삽입이 아니라 div 백그라운드 이미지로 줘서 url로 입력해두었다.

     let imgDiv = document.querySelector('#imgDiv')
    let leftB = document.querySelector('#left')
    let rightB = document.querySelector('#right')
    //HTML의 div와 button을 불러와 저장했다.

    leftB.addEventListener("click", left)
    rightB.addEventListener("click", right)
     //해당 버튼에 기능값을 주었다.


    function left(){
      index--;
      //index값을 1씩 감소시키기
      //감소된 index값이 음수로 넘어가면 맨 마지막 index로 이동할 수 있도록 수치 지정하기
      if(index < 0){
        index = imgArray.length-1;
      }
      show()
    }

    function right(){
      index++;
      //index값을 1씩 증가시키기
      //index가 배열의 길이와 같아지면 더 이상 이동할 공간이 없으므로 index의 값을 초기로 지정하기
      if(index == imgArray.length){
        index = 0;
        //더 이상 슬라이드가 넘어가지 못하니까 0번째 index로 돌아가기
      }
      show()
    }
  
    function show(){
      imgDiv.style.backgroundImage = imgArray[index];
        //index에 저장된 변수를 통해 배열을 불러오게 만드는 기능
    }
  </script>

 

 

주석을 달아서 길게 보이지만 실제로 기능부를 보면 길지 않다.

CSS로만 작성하려면 일단 HTML의 길이부터 상당한데...

'아이티에듀넷' 카테고리의 다른 글

2024-08-27 :: 025 HTML / CSS / JS 참고용 포스트  (0) 2024.08.27
2024-08-26 :: 024 Java Script 활용 ③  (0) 2024.08.26
2024-08-22 :: 022 Java Script 활용 ①  (0) 2024.08.22
2024-08-21 :: 021 Java Script 기초 ⑥  (0) 2024.08.21
2024-08-19 :: 019 Java Script 기초 ④  (0) 2024.08.19

 

 

자바 스크립트를 이용하여 나만의 여행 준비물 리스트 목록을 만들어 보았다.

생각보다 막히는 부분이 많아서 고생을 좀 했지만...

아래는 자바스크립트만 해석하고 기록해보겠다. (CSS는 사용자의 입맛에 따라 꾸미면 되므로...)

 


<div id="warp">

      <h1>여행 준비물 점검 목록</h1> //제목이다, JS에서 건드는 건 없다.

      <form action="#">
        <input type="text" id="item" placeholder="준비물을 입력해주세요.">
        <button id="add">추가</button>
      </form>

      <div id="itemList">
        아무 준비도 하지 않으셨군요...
      </div>

</div>

 

붉게 표시한 부분이 자바스크립트에서 불러와 수정을 해 줄 항목들이다.

 


    let itemList = [];
    //입력된 준비물을 받을 배열 선언

    let addBut = document.querySelector('#add')
    //HTML 버튼 불러오기

    addBut.addEventListener("click", addList)
    //HTML 버튼에 기능 할당하기


    function addList(){
      let item = document.querySelector('#item').value
      //input의 내용의 값을 가져옴

      let input_item = item.trim();
      //trim - 가져온 값의 시작과 끝에 있는 공백을 없애줌 (문자열이 있는 경우 중간 공백은 건들지 않음)

      //item값이 공백 또는 아무것도 입력이 안되었을 경우를 대비한 조건식
      if (input_item != null & input_item !=""){
        itemList.push(input_item)
        //값이 있을 경우 배열에 값을 추가하기

        document.querySelector('#item').value = null;
        //input에 공백이 아닌 문자열이 있을 시, itemList 배열에 추가 및 input에 작성된 내용 초기화

        //공백일 경우
      } else {
        alert('준비물을 작성해주세요.')
        document.querySelector('#item').focus();
      }
      
      showList();
      //값을 추가한 뒤, HTML 영역에 나타나게 하는 기능
    }



    function showList(){
      let list = "<ul>"

        //item이 추가될 때마다 for문이 반복하며 업데이트가 됨
      for(let i=0; i < itemList.length; i++){
        list += `<li>${itemList[i]}<span class='close' id=${i}> X <span></li>`
      }

      list += "</ul>"
      document.querySelector('#itemList').innerHTML = list;
      //해당 내용들을 담은 list를 HTML에 출력하기 위함

      removeEvent()
      //여기에 지우는 추가 이벤트를 작성해줘야 작동을 한다...
    }



     //delList()를 수행하기 위한 이벤트 기능
    function removeEvent(){
      let delBut = document.querySelectorAll('.close')
       //변수에 class가 close인 모두를 저장 (배열처럼 저장이 됨)

      for(let i = 0; i < delBut.length; i++){
        delBut[i].addEventListener("click", delList);
        //각각 하나씩 지정하여 기능을 주기 위해 for문을 사용.
      }
    }



    //X를 눌렀을 때 가지고 있는 id 값 (for문에서 돌았던 i값)을 들고오는 기능
    function delList(){
      let id = this.getAttribute("id")
      //this(클릭한 삭제 버튼)의 id값을 가져와 변수에 저장

      itemList.splice(id, 1);
       //id값은 정수기 때문에 위치 지정으로도 쓸 수 있다.
 
      showList();
       //다시 화면 리셋
    }
 
  여기는 오답 부분
  위에와 마찬가지로 delBut에 class가 close인 값들을 담아내기는 했지만, 바로 이벤트를 주니 작동하지 않았었다.
  이유는 배열로 담겼기 때문에 배열 자체에 기능을 주다보니 정상적으로 움직이지 않았던 것이었고, 이를 해결하기 위해서
  removeEvent 기능을 만들어 각 버튼 하나 하나 기능을 지정해 주는 방식을 사용했다.

    let delBut = document.querySelectorAll('.close')

    delBut.addEventListener("click", delList)
      // 이렇게 담으면 배열 전체가 되기 때문에 기능을 넣으려 해도 동작하지 않고 에러가 뜨는겁니다...

 

 

'아이티에듀넷' 카테고리의 다른 글

2024-08-26 :: 024 Java Script 활용 ③  (0) 2024.08.26
2024-08-23 :: 023 Java Script 활용 ②  (0) 2024.08.23
2024-08-21 :: 021 Java Script 기초 ⑥  (0) 2024.08.21
2024-08-19 :: 019 Java Script 기초 ④  (0) 2024.08.19
2024-08-14 :: 018 Java Script 기초 ③  (0) 2024.08.14

   Array_join()    : 구분자를 인수로 제공한다.

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

   Array_concat()    : 2개 이상의 배열을 하나로 묶기 위해 사용된다. 다만 기존에 있는 배열에서 추가하는 것이 아니라 항상 새로운 배열을 생성하는 형식이다.

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

   push()    : 배열 끝에 하나 이상의 요소를 추가하는데 사용된다.

   pop ()    : 배열 끝 요소를 제거 및 호출할 때 사용된다.

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

   indexOf()    : 배열 요소의 값을 가지고 배열의 인덱스를 찾는다.

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

   shift()    : 배열을 좌측으로 1개 요소만큼 이동시켜 결과적으로 각 인덱스 값은 좌측 방향으로 1씩 감소하게 된다.

   unshift()    : 배열의 맨 처음(좌측 끝)에 요소를 추가하여 추가한 수 만큼 배열의 크기를 조절하여 인데스 값은 우측 방향으로 1씩 증가하게 된다.

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

   splice()    : 주어진 값의 위치부터 시작하여 정의된 수 만큼 배열 요소를 삭제하거나 다음에 주어진 배열 요소를 추가함으로써 배열을 일부 교체하는 역할을 한다.

   slice()    : 주어진 값의 위치부터 시작하여 정의된 수 만큼 배열 요소를 추출한다.

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

   sort()    : 배열의 모든 요소의 값을 문자로 변경한 후 사전적으로 정렬하는 기능이다. 실행 이후에도 해당 배열의 값들은 정렬된 상태로 재배치되어 유지된다.

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

'아이티에듀넷' 카테고리의 다른 글

2024-08-22 :: 022 Java Script 활용 ①  (0) 2024.08.22
2024-08-21 :: 021 Java Script 기초 ⑥  (0) 2024.08.21
2024-08-14 :: 018 Java Script 기초 ③  (0) 2024.08.14
2024-08-13 :: 017 Java Script 기초 ②  (0) 2024.08.13
2024-08-12 :: 016 Java Script 기초 ①  (0) 2024.08.12

+ Recent posts

티스토리툴바