2023.02.10 12일차 JavaScript

JavaScript jquery

html css javascipt 문서만들고 스타일주고 문서조작할 수 잇다.

짧은시간에 배워서 익숙하진 않지만 할 수있다까지 배웟다.
브라우저가 만든 dom을 이용해서 조작한다. element얻거나 제거하는 드의 일으하고
그 이벤트가 일어날 때 객체도 생성이 된다.

0. Jquery

우리가 만든 javascipt가 여러 브라우저에서 돌아간다. 굉장히 많은 브라우저가 엔진이 달라서 다른일을 하는 경우가 잇다.
dom의 메소드가 다른 경우가 있다. 엣지이전에 IE는 메소드 프로퍼티 종류가 달랏다.
그래서 브라우저에 맞게 코딩을햇어야햇느넫 이걸 해결해주는게 jquery이다.
dom의 객체 메소드 element가 가지고 있는 메소드 프로퍼티를 간결하게 사용할 수 있게 해준다.
굉장히 많이 쓰엿다. 그런데 dom에서 jquery만 지원하는 메소드를 dom에 추가되고 잇엇다.
그래서 사용량이 줄어들고 잇는데 여전히 꽤 사용되고 잇다.

https://jquery.com/이라는 공식 사이트에서 다운받아야한다.

코드가 간결해지고 읽기 쉬워진다

min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
그냥 js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js" integrity="sha512-nO7wgHUoWPYGCNriyGzcFwPSF+bPDOR+NvtOYy2wMcWkrnCNPKBcFEkU80XIN14UVja0Gdnff9EmydyLlOL7mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
차이점?
https://cdnjs.com/libraries/jquery

//보통의 자바 스크립트 코드(vanilla javascript)
let ul = document.querySelector("#list1");
let input1 = document.querySelector("#input1");

input1.addEventListener("keypress", function(e){
    if (e.key === "Enter") {
        let text = this.value;
        let li = document.createElement("li");
        li.textContent = text;
            ul.append(li);
        this.value= "";
    }
});

어제 작성한 코드를 jquery로 작성해보앗다

//Jquery
$("#input2").keyup(function(e){
    if (e.key === "Enter"){
        $("#list2").append(`<li>${$(this).val()}</li>`);
        $(this).val("");
    }
});

훨신 간결해진다.

1.jquery - 1

jquery는 잘만들어진 함수이다.

function a(){
    return{
        name:"son",
        val:function(){
            return soccer;
        }
    }
}

console.log($().name);
console.log($().val());

2. jquery - 2

https://api.jquery.com/ jquery.com에서 api document를 보면 jquery에서 사용할 수 있는 함수가 나온다.
$() = jQuery()이다.
Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.
이라고 설명하고 잇다. argument로 전달받은 element를 리턴한다.
주로 사용하는 방식은 (selector [, 콘텐트]) 넣는게 보통이다. []는 생략가능이라는뜻이다.
꼭 입력해야하는 argument는 selector하나인것이다. string으로 작성된 CSS selector를 받아서 사용하면 된다.
여기서 선택된 element들이 선택이 되는 것이다.
->이게 반환하는 타입은 jquery객체이다. 그래서 변수에 담아서 쓰고 jquery의 메소드를 사용할 수 있게 된다.

.~~로 하는 것들이 jquery의 메소드이다.

결론은 $함수와 이것의 메소드가 뭐가 잇고 어떻게 사용하는지를 알면된다.

3. jquery Effects- 3

효과를 주는 메소드
let head1 = $("#head1");
head1.hide();
hide()
element들을 숨긴다.

4. hide() -2

$("p").hide(5000); 원래대로엿다면 p를 반복문돌려서 display:none햇어야햇는데
한줄로 처리 될 수 있게 되엇다.

5. show()

<button onclick="hideHeads()">숨기기</button>
<button onclick="showHeads()">보이기</button>

---

function showHeads() {
    $("h1").show(1000);
}

function hideHeads(){
    $("h1").hide(1000);
}

show를 누르면 hide한게 나타난다.

7.toogle

<h1>
    Lorem.
</h1>
<h1>
    Voluptates.
</h1>
<h1>
    Eveniet!
</h1>
<button onclick="toogleHeads();">숨기기/보이기</button>

---

function toogleHeads() {
    $("h1").toggle(1000);
}

누르면 숨겨지고 또누르면 보인다.
hide(), show()류임

toogle()의 경우 2개가잇는데 Deprecated된게 잇다.
새로운것은 애니메이션이 추가가 되엇다. 이런 것을 잘 구분하고 사용하자.
매뉴얼을 보고 사라질 것은 쓰지말자.

8. fadeIn() fadeOut() faseToggle()

function fadeOutHead() {
    $("h1").fadeOut(2000);
}

function fadeInHead() {
    $("h1").fadeIn(2000);
}

function fadeToggleHead(){
    $("h1").fadeToggle(2000);
}

얘들도 숨기기는 하는데 none로 하는 것은 아니고 숨겨지기만한다.

13 event-3

on addEventListener와 같은 역할임.
on(event [select][data][function] )

jquery는 바닐라 자바스크립트의 함수에 불과해서 섞어서 사용해도된다.

18. event

여러 elements가 있을때의
h1 element가 10개가 잇다고 해보자.

$("h1").on("click", function(){
    $(this).hide(3000);
});

이러면 클릭된 녀석만 사라진다.

19. 만들어진 event

.on(event,[selecotr], [data] handler)
event를 직접 정의할수도 있고 다른 사람이 정의한것을 넣을 수도 잇다.
bootstrap에서 이벤트가 정의된게 잇다. 이것을 핸들러에 등록할 수 있다.

shown.bs.modal btootstrap의 modal이 보여지고 난 후에 발생하는 이벤트를 사용해보자.

$("#exampleModal").on("shown.bs.modal", function(){
    $(".modal-body").text("hi");
    console.log("모달 보여짐");
});

이런식으로 원래 있는 이벤트가 아니라 만들어진 이벤트도 사용할 수 있다.

이게 jquery에서만 가능한거이냐? 아님 . 바닐라에서도 가능한데 좀 더 간결할뿐임.

20. 자주 사용하는 이벤트들

자주사용하는 이벤트들을 위한 메소드들을 따로 만들어 놓앗다.

$("#btn1").on("click", function(){
    $("#res").text("1번버튼 클릭됨.");
});

---

$("#btn2").click(function(){
    $("#res").text("2번버튼 클릭됨.");
});

한개는 on메소드를 사용하고 한개는 click메소드를 그냥 사용햇다.
이런식으로 자주 사용하는 이벤트는 그냥 따로 메소드가 잇는 것이다.

$("#btn3").contextmenu(function(){
    $("#res").text("3번버튼 클릭됨.");
});

contextmenu는 우클릭시 나타나는 것이다.
오른쪽 클릭 금지 같은 것들이 이걸 사용한다.

이외에도 dblclick(더블클릭) mouseenter(마우스 들어왓을때) mouseleave(마우스 나갈때)

21. hover - 1

.hover는 신기하게도 매개변수의 handler가 두개다. 들어올때 & 나갈때에 따라 정할 수 잇다.

$("#btn1").mouseenter(function(){
    $("#res").text("1번 버튼 마우스 들어옴.");
    $(this).css("background-color", "red");
});

$("#btn1").mouseleave(function(){
    $("#res").text("1번 버튼 마우스 떠남.");
    $(this).css("background-color", "buttonface")
});

$("#btn2").hover(function(){
    $("#res").text("2번 버튼 마우스 들어옴.");
    $(this).css("background-color", "pink");
}, function(){
    $("#res").text("2번 버튼 마우스 떠남.");
    $(this).css("background-color", "buttonface")
});

22 hover - 2

!!!확인문제!!!
h1요소에 마우스 포인터가 들어가면 p요소가 보이게
h1 요소에 마우스 포인터가 떠나면 p요소가 숨겨지게

$("h1").hover(function(){
    $("p").fadeIn();
}, function(){
    $("p").fadeOut();
});

23. keyup event;

input element에 keyup이벤트가 발생하면 input의 value를 h1 text에 넣는다.
$("input").keyup(function () {
let text = $(this).val();
$("h1").text(text);
});

2023.02.10 후기

https://mjmjmj98.tistory.com/25 jquery를 어디에 둬야하는가?
-> js파일을 따로뺄때와 script를 html에 작성할때와 차이가 잇는듯하다.
js파일을 따로빼면 모든 것이 로드될때 js실행해라 할 수잇는데 같이쓰면 그게 안되니 먼저 해야한다
jquery가 함수이기 때문인듯 하다.

.onclick 메소드보다
addEventListener를 더 많이 사용하는 이유
더많은 기능을 담을 수 잇다. 여러 이벤트가 겹쳐잇을 경우 구분되서 실행할 수 잇음. 버블링이 발생햇을때 해딩 element까지전달할지 window까지 결정할지를 결정할수잇음.

속성변경하려면 .attr 선택상자서선택된것?
$("#section5-2 .img").attr("src", "images/" + $("#section5-2 .img-select option:selected").val());

css바꾸려면? .css하기
$("#section5-2 .img").css("border-color", $(".color-input").val());

셀렉트박스 선택된것의 밸류얻기 보는법
https://snowple.tistory.com/379

$("#section5-2 .change-button").click(function() {
    $("#section5-2 .img").attr("src", "images/" + $("#section5-2 .img-select option:selected").val());
    $("#section5-2 .img").css("border-color", $(".color-input").val());
});

element복제 .clone()하면된다. true넣으면 다복사 아니면 껍데기만 복사하는것은 같다.
그리고 손자중 td를 찾아서 순서대로 하고 값을 넣엇다.

let trNode = $("#section7 tbody").find("tr:eq(0)");
let cloneNode = trNode.clone(true);
cloneNode.find("td:eq(0)").text(notices[0].id);
cloneNode.find("td:eq(1)").html('<a href="">' + notices[0].title + '</a>');
cloneNode.find("td:eq(2)").text(notices[0].regDate);
cloneNode.find("td:eq(3)").text(notices[0].writerId);
cloneNode.find("td:eq(4)").text(notices[0].hit);
$("#section7 tbody").append(cloneNode);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Arrow_functions 자바에서의 람다식과 비슷함 나중에한번 봐보자.