본문 바로가기
JavaScript

[JavaScript] - 이벤트버블링 응용 & Dataset / Array & Object & DataBindin / select / JS에서 HTML 문법 사용 / forEach & forIn

by nam_ji 2023. 12. 12.

자바스크립트 (JavaScript) 기초

이벤트버블링(Event Bubbling) 응용 및 Dataset 속성 이용

  • 이벤트버블링이란
    • 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말합니다.
  • Dataset이란
    사용자가 해당 요소에 커스텀 속성을 추가한 객체를 의미합니다.
  • 탭 버튼을 이용하여 두 가지의 예를 보여드리겠습니다.
<-- -------------------html 코드-------------------- -->
<!document html>
<html lang="en">

    <head>

        <!--Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--Bootstrap CSS-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="main.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

        <title>deepeventlistener</title>

    </head>

    <body>

        <div class="container mt-5">
            <ul class="list">
            <-- li태그에 data를 입력하여 js에서 사용할 수 있게 했습니다. -->
            <-- dataset 준비 -->
                <li class="tab-button" data-id="0">Products</li>
                <li class="tab-button orange" data-id="1">Information</li>
                <li class="tab-button" data-id="2">Shipping</li>
                <li class="tab-button" data-id="3">Shopping</li>
            </ul>
            <div class="tab-content">
                <p>상품설명입니다. Product</p>
            </div>
            <div class="tab-content show">
                <p>스펙설명입니다. Information</p>
            </div>
            <div class="tab-content">
                <p>배송정보입니다. Shipping</p>
            </div>
            <div class="tab-content">
                <p>상품목록입니다. Shopping</p>
            </div>
        </div>

        <script src="deepeventlistenerjs.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
</html>

// ----------------------js 코드-------------------------
var tab = $('.tab-button');
var content = $('.tab-content');

// 클래스명에 dataset 이용하기
// 내가 지정한 dataset의 아이디가 클릭되면
// 그 값을 내가만든 함수에 입력될 수 있게 코드 작성

$('.list').click(function(e) {
    tabChange(e.target.dataset.id);
});

// for문을 사용하지 않고 버블링 응용하는 방법
// 내가 tab-button을 클릭하면 이벤트 버블링에 의해 list도 클릭한 것이 되기 때문에
// list클래스를 가져와 click 이벤트를 사용하여 for문을 사용하지 않고
// 탭버튼을 구현해 봤습니다.
// $('.list').click(function(e) {
//     if (e.target == document.querySelectorAll('.tab-button')[0]) {
//         tabChange(0);
//     }
//     if (e.target == document.querySelectorAll('.tab-button')[1]) {
//         tabChange(1);
//     }
//     if (e.target == document.querySelectorAll('.tab-button')[2]) {
//         tabChange(2);
//     }
//     if (e.target == document.querySelectorAll('.tab-button')[3]) {
//         tabChange(3);
//     }
// });

function tabChange(i) {
    tab.removeClass('orange');
    tab.eq(i).addClass('orange');
    content.removeClass('show');
    content.eq(i).addClass('show');
}

Array & Object & Data Binding

  • 배열 (array)이란
    • 자바스크립트에서 배열은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의됩니다.
      배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다.
    • 배열의 특징으로
      1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다.
      2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다.
      3. 자바스크립트에서 배열은 Array 객체로 다뤄집니다.
  • 배열 선언 방법
var arr = [배열요소1, 배열요소2,...];          // 배열 리터럴을 이용하는 방법
var arr = Array(배열요소1, 배열요소2,...);     // Array 객체의 생성자를 이용하는 방법
var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법
  • 객체(Object)란
    • 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 이름(key, name)과 값(value)으로 구성된 프로퍼티의 집합입니다.
    • 자바스크립트에서는 원시타입(Primitive Type)을 제외한 모든 것이 객체(Object)로 정의됩니다.
// 객체명을 정하고 중괄호 안에 key : value 형태로 작성합니다.
// 여러가지 데이터를 넣을 때에는 ,로 구분하면 됩니다.
const obj = {
	key : value,
    key : value
}

// new 키워드를 사용하여 Object 생성자 함수를 호출하고
// 객체명 = new Object(); 이렇게 작성하고
// 객체명.key = value; 이렇게 대입하면 됩니다.
let obj = new Object();
obj.key = value;
  • Data Binding이란
    • HTML에 데이터를 보내는 것을 데이터 바인딩이라고 합니다.
  • array, object와 Data Binding을 사용한 예시를 간단한 코드로 보여드리겠습니다.
<!document html>
<html lang="en">

    <head>

        <!--Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--Bootstrap CSS-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="main.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

        <title>Array_Object</title>

    </head>

    <body>

        <div class="container mt-3">
            <div class="card p-3">
                <span class="car-title">상품명</span>
                <span class="car-price">가격</span>
            </div>
        </div>

        <script>

            var car = {name : '프라이드', price : 7000000};
            document.querySelector('.car-title').innerHTML = car['name'];
            document.querySelector('.car-price').innerHTML = car['price'];
            // 위 코드 변수 삽입 가능
            // document.querySelector('.car-title').innerHTML = car.name;
            // document.querySelector('.car-price').innerHTML = car.price;
            // 위 코드 변수 삽입 불가

            // var car2 = {name : '소나타', price : 50000};
            // console.log(car2['name']);
            // car2.price = 60000;
            // console.log(car2['price']);

            // var car = {key:value, key:value 등등}
            // object 자료형 key : value 형태의 자료형

            // var car = [
            //     '소나타',
            //     50000,
            //     'white'
            // ];
            // car[3] = '아반떼'; car 배열에 추가됨
            // console.log(car);

            // var car = [자료1, 자료2, 자료3 등등]; Array 자료형

            // var car = '소나타 50000 white';

            // var car = '소나타';
            // var carPrice = 50000;
            // var carColor = 'white';

        </script>
    </body>
</html>
  • 위 코드는 Array와 Object 사용 밑 코드는 Data Binding 예시입니다.
		<div class="container mt-3">
            <div class="card p-3">
                <span class="car-title">상품명</span>
                <span class="car-price">가격</span>
            </div>
        </div>

        <script>
            
            var car = {name : '프라이드', price : [50000, 300000, 7000000]};
            document.querySelector('.car-title').innerHTML = car['name'];
            document.querySelector('.car-price').innerHTML = car.price[1];
            console.log(car['name']);
            console.log(car['price']);
            console.log(car.price[2]);

        </script>

select 태그

  • select태그란
    • 옵션 메뉴를 제공하는 드롭다운 리스트를 정의할 때 사용합니다.
    • <select>요소 내부의 <option> 요소는 드롭다운 리스트에서 사용되는 각각의 옵션을 정의합니다.
      이러한 <select> 요소는 사용자로부터 입력을 받기 위한 폼(form)에 사용될 수 있습니다.
  • select 태그를 이용한 상품 주문할 때 볼 수 있는 간단한 드롭다운 리스트를 만들어 보겠습니다.
<!document html>
<html lang="en">

    <head>

        <!--Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--Bootstrap CSS-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="main.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

        <title>Array_Object</title>

    </head>

    <body>

        <form class="container my-5 form-group">
            <p>상품선택</p>
            <select class="form-select mt-2">
              <option class="cap">모자</option>
              <option class="shirt">셔츠</option>
            </select>
            <select class="form-select mt-2 form-hide" >
                <option>100</option>
                <option>95</option>
                <option>90</option>
            </select>
        </form>

        <script>

            $('.form-select').eq(0).on('input', function(e) {
                var value = e.currentTarget.value;

                    if (value == '셔츠') {
                    $('.form-select').eq(1).removeClass('form-hide');
                    } else {
                    $('.form-select').eq(1).addClass('form-hide');
                    }
                    
            });

            // $('.form-select').eq(0).on('input', function() {
            //     var value = $('.form-select').eq(0).val();
            //         if (value == '셔츠') {
            //         $('.form-select').eq(1).removeClass('form-hide');
            //     } else {
            //         $('.form-select').eq(1).addClass('form-hide');
            //     }
            // });

            // $('.form-select').eq(0).on('click', function() {
            //     $('.form-hide').removeClass('.form-hide');
            // });

        </script>
    </body>
</html>

JS에서 HTML 문법 사용

  • 자바스크립트를 이용하여 HTML 문법을 사용할 수 있습니다.
  • 변수명을 정하고 그 변수에 HTML 태그를 사용하면 됩니다.
  • 밑에는 예시 코드입니다.
<!doctype html>
<html lang="ko">
 <head>
  <meta charset = utf-8">
  
  <title>jsInnerHTML</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="main.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

 </head>
 <body>

    <div id="test">

    </div>

    <script>

        var template = '<p>Hello</p>';
        $('#test').append(template);

        // var template = '<p>Hello</p>';
        // document.querySelector('#test').insertAdjacentHTML('beforeend', template);

        // var inHTML = document.createElement('p');
        // inHTML.innerHTML = 'Hello';
        // document.querySelector('#test').appendChild(inHTML);

    </script>
 </body>
</html>

forEach & forIn

  • forEach()란
    • forEach() 함수는 배열을 순회하여 처리하는데 사용되는 메소드로, 배열의 각 요소에 대해 주어집 함수를 순서대로 한 번씩 실행합니다.
    • forEach() 함수를 사용하면 반복문을 통해 배열의 요소에 접근하지 않고도, 간편하게 배열 요소들을 처리할 수 있습니다. 각 요소의 값뿐만 아니라 인덱스와 배열 자체도 콜백 함수에서 사용할 수 있습니다.
  • 작성방법
const arr = ['a', 'b', 'c'];

// function 사용
arr.forEach(function(element) {
	console.log(element);
});

// arrow function
arr.forEach((element) => {
	console.log(element)
});
  • for...In이란
    • 객체(Object)의 모든 열거할 수 있는 프로퍼티를 순회 할 수 있도록 도와줍니다.
    • for..in 반복문은 모든 객체에서 사용이 가능합니다.
    • 또한 객체의 key 값에 접근이 가능하고, value 값에는 직접 접근이 불가능합니다.
  • 작성방법
// for (const 반복변수 in 배열 or 객체) {
//	실행문
// }

let 변수 = {
	key1 : value1,
    key2 : "value2",
    key3 : value3,
};

// 배열 요소 하나하나 꺼내서 특정 문장을 실행할 때
const 변수 = ["1", "2", "3"];

for (const i in 변수) {
	console.log(`${i}번째 : ${변수[i]}`);
}
  • forEach와 for ... in 반복문 예시
<!document html>
<html lang="en">

    <head>

        <!--Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--Bootstrap CSS-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="main.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

        <title>jsInnerHTML</title>

    </head>

    <body>

        <form class="container my-5 form-group">
            <p>상품선택</p>
            <select class="form-select mt-2">
              <option class="cap">모자</option>
              <option class="shirt">셔츠</option>
              <option class="shirt">바지</option>
            </select>
            <select class="form-select mt-2 form-hide" >
                <option>100</option>
                <option>95</option>
                <option>90</option>
            </select>
        </form>

        <script>

            var pants = [28,30,32,34];
            var shuirt = [90, 95];

            $('.form-select').eq(0).on('input', function(e) {
                var value = e.currentTarget.value;

                    if (value == '셔츠') {
                        $('.form-select').eq(1).removeClass('form-hide');
                    } else if (value == '바지') {
                        $('.form-select').eq(1).removeClass('form-hide');
                        $('.form-select').eq(1).html('');

                    pants.forEach(function(e) {
                        $('.form-select').eq(1).append(`<option>${e}</option>`);
                    });
                    // arrow function
                    //  pants.forEach((e) => {
                    //     $('.form-select').eq(1).append(`<option>${e}</option>`);
                    //  });
                    } else {
                        $('.form-select').eq(1).addClass('form-hide');
                    }
                
            });

            var obj = {name : 'nam', age : 20}

            for (var key in obj) {
                console.log(1);
                console.log(key);
                console.log(obj[key]);
            }

        </script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
</html>

공통 css

  • 위에 있는 실습 코드에서 공통으로 사용하는 css 입니다.
:root {
  scroll-behavior: auto; 
}

/* root는 bootstrap을 사용할 시 
css를 원상복구하여 
내가원하는 css를 사용할 수 있게 할 때 사용 */

.alert-box {
    background-color: skyblue;
    padding: 20px;
    color: white;
    border-radius: 5px;
    display: none;
  } 

.list-group {
  display: none;
}

.black-bg {
  width : 100%;
  height : 100%;
  position : fixed;
  background : rgba(0,0,0,0.5);
  z-index : 6;
  padding: 30px;
  visibility: hidden;
  opacity: 0;
  transition: all 1s;
}

.show {
  display: block;
}

.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
} 

.show-modal {
  visibility: visible;
  opacity: 1;
}

.close-modal {
  visibility: visible;
  opacity: 0;
}

.main-bg {
  padding: 50px 20px;
  background: lightgrey;
}

.dark {
  background-color: black;
  color: white;
}

.slide-container {
  width: 300vw;
  transition: all 1s;
}

.slide-box {
  width: 100vw;
  float: left;
}

.slide-box img {
  width: 100%;
}

.navbar {
  /* position: fixed; */
  width: 100%;
  z-index: 5;
  transition: all 0.5s;
}

.navbar-brand {
  font-size: 25px;
  /* transition: all 0.5s; */
}

.lorem {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
}

ul.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
}

ul.list::after {
  content: '';
  display: block;
  clear: both;
}

.tab-button {
  display: block;
  padding: 10px 20px 10px 20px;
  float: left;
  margin-right: -1px;
  margin-bottom: -1px;
  color: grey;
  text-decoration: none;
  cursor: pointer;
}

.orange {
  border-top: 2px solid orange;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid white;
  border-left: 1px solid #ccc;
  color: black;
  margin-top: -2px;
}

.tab-content {
  display: none;
  padding: 10px;
}

.show {
  display: block;
}

.form-hide {
  display: none;
}

.grey {
  background: lightgrey;
  height: 2000px;
  margin-top: 300px;
}

.text {
  float: left;
  width : 400px;
}

.image {
  float: right;
  width : 400px;
  position: sticky;
  top: 100px;
}

.card-background {
  height: 3000px;
  margin-top: 800px;
  margin-bottom: 1600px;
}

.card-box img {
  display: block;
  margin: auto;
  max-width: 80%;
}

.card-box {
  position: sticky;
  top: 300px;
  margin-top: 200px;
}

'JavaScript' 카테고리의 다른 글

[JavaScript] - HTML / CSS / JavaScript  (1) 2023.12.31
[JavaScript] - AJAX / sort,map,filter / 웹스토리지 / switch ~ case  (0) 2023.12.13
[JavaScript] - setTimeout / 정규식 / 캐러셀 / 스크롤 / for문  (0) 2023.12.01
[JavaScript] - JavaScript 작성 방법 / alert창 / 이벤트리스너 / 클래스네임 / modal  (1) 2023.11.29
[JavaScript] - AJAX란  (1) 2023.11.09

관련글

티스토리툴바