TIL - [DAY 8]

var mailTitile = document.querySelector('#main-title small');

        consol.log(mailTitle);

        var ilbuni = document.querySelector('.ibuni');

        consol.log(ilbuni);

        // querySelector는 여러개라도 첫번째것만 가져온다

        // 다 가져오고 시픈데? => querySelectorAll

        // 그래도 하나만 가져올래 => querySelectorAll로 가져와 console.log(ibuni[1]);로 []개체 가져오기

        // 자바로 보더 넣기

        ilbuni[0].style.border = '1px solid red';

        ilbuni[1].style.border = '1px solid red';

        ilbuni[2].style.border = '1px solid red';

        // => for문으로 반복

        ilbuni[0].style.border = '1px solid red';

        for (var i = 0; i < ilbuni.length; i++) {

            ilbuni[i].style.border = '1px solid red'

        }

        var link = do.querySelector('.ilbuni a';);

        console.log( link.getAttribute('href'));

        // getAttribute 가져와

        // setAttribute 세팅해

        link.setAttribute('href', 'https://studiomeal.com');

        console.log(link.getAttribute('href'));

        /* => 구글링크 -> 스튜디오밀링크 바뀐걸 알 수 있다

        속성값을 세팅해 가져와본다

        리턴된값이 있어서 답이 찍힌것

        없다면 undifined뜰것

        문자열 가져오는 게 뜨니까 있음

        setAttribute는 세팅값만 바꾸고 답이 없으니 리턴값이 없어 */

        // class 넣고 빼기

            <style> .special {

                background: pink;

                }

                .link-google {

                color: red;

                }

            </style>

        var link = document.querySelector('.ilbuni a');

        link.className = 'special';

        => 속성을 '통재로' 바꿔서 빨강은 사라지고 핑크만 남아

        => 원래로 두고 추가만 하고 싶다

        => link.classList.add('special');

        없애고 싶다

        => link.classList.remove('link-google');

        여러개는 ,를 이용해 뒤에 붙여 넣는다 ('special', 'foo'...)

        setTimeout(function () {

            link.classList.remove('link-google');

        }, 2000);

        // 초는 1/1000 ->2000은 2초

        // 로드 되고 2초 이후에 값을 바꾼다

        console.log(link.classList.contains('special'));

        // true

        // 이 클래스를 가지고 있으면 true 아니면 false

        // 없는것 만들어 조립

        var ilbuniMom = document.querySelector('.libuni-mom'); //- ul -> il의 부모

        var listElem = document.createElement('li');

        listElem.innerHTML = '<span>일분이</span>';  //만들고 넣기

        ilbuniMom.appndChild(listElem); //붙이기

        // 이벤트

        갑자기 발생하는 사건 -> 클릭, 마우스 무브, 더블클릭, 휠, 눌렀을 때, 땠을 때

                                터치, 스와이프, 데이터로드가 끝난 후, 사이즈가 바뀔때 resize시 등

        클릭으로 해보자~ // 클릭하면 제목의 색이 바뀌도록~

        <h1 id="main-title">Event</h1>

        <button class = "btn">클릭하세요!</button>

        var btn = document.querySelector('.btn');

        var mainTitle = document.querySelector('#main-title');

        function btnClickHandler() {

            mainTitle.stle.background = 'dodgerblue';

        }

        // 기능 함수만 만들었지 연결을 하지 아늠

        btn.addEventListner('click', btnClickHandler);

        // 이벤트의 등장 (이벤트이름, 이벤트 발생시 실행시킬 함수);

        // 자바로 넣어주면 html태그 내에 style로 들어 간다

        btn.onclick = btnClickHandler;

        // 도 가능하고 간단하지만 기능이 별로 없어 잘 안씀 (함수값을 하나만 지정 가능)

    </script>

 

 

---

<!-- 예제 -->

    <style>

        .menu-link {

            margin: .1erm;

            padding: .3erm;

            color: #fff;

            text-decoration: none;

            background: dodgerblue;

            list-style: none;

        }

        .menu-active {

            background: orange;

        }

        .menu {

            background: yellowgreen;

        }

    </style>

    <h1 id="main-title">

        Event 예제

    </h1>

    <nav class="menu">

        <a href="#" class="menu-link" data-menu="1">menu 1</a>

        <a href="#" class="menu-link" data-menu="2">menu 2</a>

        <a href="#" class="menu-link" data-menu="3">menu 3</a>

    </nav>

    <script>

        var currentMenu;

        // 현재 활성화된 메뉴를담을 변수

        var menuLinks = document.querySelectorAll('.menu-link');

        // 앞에 on이나 뒤에 Listnerer나 Handler가 붙어 있으면 addEventListener사용할거라는 것

        function clickMenuHandler() {

            if (currentMenu) {

             currentMenu.classList.remove('menu-active');

            } //두번째 클릭부터 currnetMenu에 값이 들어가니 작동

            this.classList.add('menu-active');

            //this는 아래 for문의 menuLinks를 뜻한다 => 현제 클릭하는 애를 잡아낸다

            currentMenu = this;

        }

        for (var i = 0; i < menuLinks.length; i++) {

            menuLinks[i].addEventListener('click', clickMenuHandler);

        } //i가 백만개라면..? 계속 도라가~

        /

        var currentMenu;

        var menu = document.querySelector('.menu');

        function clickHandler(e) {

            /* // console.log(this == e.currentTarget); 아래 menu를 가져온다

            console.log(e.target); // 클릭하는 <a>를 잘가져온다 */

           

            if (currentMenu) {

                currentMenu.classList.remove('menu-active');

            }

            e.target.classList.add('menu-active');

            currentMenu = e.target;

        }

        menu.addEventListener('click', clickHandler);

    </script>

 

---

수업만 들어서는 뭐가 뭔지 모르겠고 다른 예시도 보고 나서 강의를 다시 생각하며 교재를 보면 어느정도 이해가 간다.

그래서 시간이 두배가 걸리는 것 같다.

과제 못한게 늘어나고 있다.

주말에 어떻게든 해보고 진도를 따라 잡아야 겠다.