240215

한라봉봉·2024년 2월 15일

JS와 React

기업연계 BE 교육 TIL

목록 보기

53/58

마우스 오버와 마우스 엔터

버블링 이슈로 마우스 엔터를 사용할것
https://piowm123.tistory.com/77

let과 var의 스코프

여기서 아래부분의 let은 어떻게 이벤트에 지정된 함수 실행시 각 인덱스를 출력할까?
// console.log(index); // var인경우 4만 나온다

let은 스코프를 가져서 해당 블럭내에서는 각 for문 인덱스별 저장이 되어있다. 자세히 알기보다는 this.num 형태로 안전하게 코딩하면 var로 for문 변수를 선언해도 문제가 발생하지 않는다.

		for (let index = 0; index < aTagList.length; index++) {
			console.log(index);
			aTagList[index].num = index;
			aTagList[index].onmouseenter = function(){
				// console.log(index); // var인경우 4만 나온다

				for (let i = 0; i < aTagList.length; i++) {
					// console.log(i,this.num);
					if(i == this.num){
						aTagList[i].className = "bx-pager-link active";
						liTagList[i].style.display = "block";
					}else{
						aTagList[i].className = "bx-pager-link";
						liTagList[i].style.display = "none";
					}
				}
			}

		}
	  }

jQuery

cdn 방식으로 라이브러리 download

https://jquery.com/download/
https://developers.google.com/speed/libraries#jquery

프레임워크와 라이브러리의 차이

갖다쓰면 라이브러리
룰에 맞춰서 코드를 넣기 쓰기시작하면 프레임워크

jquery와 javascript 문법비교

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        const init = function(){
            console.log($("#box"));
            //jquery로 찾았으면 프로퍼티는 동작하지 않는다. jquery 함수로 사용해야 한다.
            //$("#box").innerText("권진철또존다");
            $("#box").on(
                "click",
                function(){
                    //1번방법, js this.innerText = "권진철또존다";
                    //2번방법, jquery $("#box").text("권진철또존다");
                    //3번방법, jquery
                    $(this).text("권진철또존다");
                    console.log($(this).attr("id"));
                }
            )
        }
        window.onload = init;
    </script>

element 수정삭제

append(), prepend()의 차이점 : https://devilfront.tistory.com/40

            $("#addBtn").on(
                "click",
                function(){
                    // $("#myList").append("<li>a</li>");
                    $("#myList").prepend("<li>a</li>");
                    //js도 쓰까서 쓰기
                    // const li = document.createElement("li");
                    // $("#myList").prepend(li);
                }
            )

            $("#delBtn").on(
                "click",
                function(){
                    $("#box").remove();
                    // $("#myList li:first").remove(); 
                    $("#myList li:last").remove(); 

                }
            )

element 이동

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        const init = function(){
          $("#moveBtn").on(
            "click",
            function(){
                $("#list1").prepend($("#list2 li:first"));
            }
          )

        }
        window.onload = init;
    </script>
    <title>Document</title>
</head>
<body>
    <button id ="moveBtn">move</button>
    <ul id = "list1"></ul>
    <hr />
    <ul id="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

Tree Traversal

    <script type="text/javascript">
        const init = function(){
          $("#moveBtn").on(
            "click",
            function(){
                $("#list1").prepend($("#list2 li:first"));
            }
          );
          $("#checkBtn").on(
            "click",
            function(){
                //$("#list3 li:eq(1)").text("check");
                //$("#list3 li:eq(1)").prev().text("check");
                // $("#list3 li:eq(1)").next().text("check");
                //부모노드 수정
                // $("#list3 li:eq(1)").parent().css("border", "1px dashed red");
                //자식노드 수정
                $("#list3 li:eq(1)").find("a").text("MS");

            }
          );

        }
        window.onload = init;
    </script>