2023.02.13 13일차 JavaScript

JavaScript jquery

아마 마지막프론트 말이프론트지 그냥 퍼블리싱 영역임.

이 강의에서 가장 쉽고 가장 배울만한 영역이 끝이낫다. 이제 지옥시작일듯
여러 브라우저환경에서 적용할수잇도록 하는 jQuery를 배웠다.
브라우저가 만들어 놓은 DOM을 조작해서 실제 문서를 조작한다.
어떤 element든 찾아갈 수있다. 우리한테 익숙한 css selecotor를 기준으로 객체를 가져온다.

jquery메소드들 중에서 element의 정보를 어떻게 변경, 추가, 삭제 등 하는방법

24. text() get

선택된 elemnet의 text정보들만 리턴한다.
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

<h1 id="head1">
    Lorem, ipsum.
    <span>
        Lorem.
    </span>
</h1>

---

let text1 = $("#head1").text();
console.log(text1); // Lorem, ipsum. / Lorem.
console.log($("#head1 span").text()); //Lorem.

25. html() get

선택된 element의 html내용 전부를 리턴한다.
Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

<h1 id="head1">
    Lorem, ipsum.
    <span>
        Lorem.
    </span>
</h1>

---

let html1 = $("#head1").html();
console.log(html1); //Lorem부터 /span까지 출력

26. val() get

element에 입력된 값 등 value값을 얻어온다.
Get the current value of the first element in the set of matched elements or set the value of every matched element.

<div>
    <input type="text" id="input1" value="hello">
</div>

---

let val1 = $("#input1").val();
console.log(val1); //hello 

27. attr() get

element의 속성을 얻어올 수 잇다.
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
첫번째 element의 attribute를 가져오는데 파라미터가 필요하다.

<a href="https://www.daum.net" id="link1" target="_blank">
<a href="https://www.naver.com" id="link2" title="네이버 링크">
<a href="https://www.google.com" id="link3">

---

console.log($("#link1").attr("href")); //daum
console.log($("#link1").attr("target")); //_blank
console.log($("#link2").attr("title")); //네이버링크

28. text() set

이번에 배운 메소드는 get할뿐만아니라 값을 set할수도 잇다.
파라미터를 안넣으면 get 넢으면 set기능 이다.

$("#head2").text("hello"); //Quasi.->hello
$("h2").text("world");  // Lorem.->world

29. text() set-2

<input type="text" id="input1">
<h1 id="res"></h1>

---

$("#input1").keyup(function(){
    let text = $(this).val();
    $("#res").text(text);
});

입력받은 것을 그대로 div 텍스트영역에 들어감.,

30. html() set

선택된 element의 모든 html을 세팅

$("#head3").html("hello <br/> world");

줄바꿈 적용됨

31. html() set-2

<input type="text" id="input1">
<h1 id="head1"></h1>
<h1 id="head2"></h1>

---

$("#input1").keyup(function (e) {
    if (e.key == "Enter") {
        let text = $(this).val();
        $("#head1").text(text); // <script>
        $("#head2").html(text); //<script>
    }
});

32. val() set - 1

$("#input2").val("world"); ->property에붙음

$("#input2").attr("value", "hi"); -> dom attribute가 변경됨

33. attr() set -1

dom객체가 변경이 되는 것임.
$("#link2").attr("href", "https://www.naver.com");

// link3 요소의 href 속성변경
$("#link3").attr("href", "https://www.google.com");

34. attr() set -2

!!!확인문제!!!
input입력값이 a태그 링크에들어가게 코드를작성해보자

<input type="text" id="input1">
<br>
<a href="" id="link1"></a>

---

$("#input1").keyup(function(e){
    if(e.key == "Enter"){
        $("#link1").attr("href", $(this).val());
    }
});

35. add

element를 기준으로 4부분에 넣을 수있다.
1(before)<div> 2(prepend)content 3(append)</div>4(after)
element맨앞, 맨뒤 content 앞, 뒤 4군데에 넣을 수있다.

35.1 append()

Inserts content at the end of the selected elements

$("#res1").append("world");
$("#res2").append("<h1>hi</h1>");

.append( content [,content])
파라미터는 string이어도되고 element여도되고 jquery여도된다.

let h2elem = document.createElement("h2");
h2elem.textContent = "world";
$("#res3").append(h2elem);

jQuery( html [, ownerDocument ] ) html document를 즉석에서 만들수도 있다.
let elem = $("\h3>hello h3</h3>");
$("#res1").append(elem);
이걸이용해서 새 element를 만들고 append해보았다.

저렇게 만들면 jquery객체이기때문에 jquery의 메소드를 사용할 수도 있다.
elem.slideUp(3000);

36. append()-2

이전에 햇던 예제 input박스에 내용을 입력하면 list가 추가되도록해보자.

<input type="text" id="input1"/>
<ul id="list"></ul>

---

$("#input1").keyup(function(e){
    if(e.key == "Enter"){
        let text = $(this).val();
        let li = $(`<li>${text}</li>`);
        $("#list").append(li);
        $(this).val("");
    }
});

1.Enter누르면 입력되게하기
2.input박스의 value값을 jquery로 얻기
3.jquery로 <li>input내용</li> li element객체 만들기
4.append를 이용해 ul의 content다음에 내용 넣기
5.값입력후 초기화

37.prepend()

Inserts content at the beginning of the selected elements
시작태그뒤, content의 앞에 추가한다.

$("#box1").prepend("hello");
$("#box2").prepend("<h1>hi</h1>");
$("#box3").prepend($("<h2>world</h2>"));

38. after()

Inserts content after the selected elements
element 뒤에 추가한다.

$("#head1").after("<p>hello wolrd</p>");
$("#head2").after($("<p>hi jquery</p>"));
$("#head3").after($("<p>more..</p><p>more...</p>"));

추가 한 후에 알맞게 추가되었는지 개발자도구의 element탭을 통해서 확인해주자.

39. after() - 2

36번에서 한것을 같은일을 after로 작성해보자.

<input type="text" id="input1"/>
<ul id="list">
    <li id="item">Lorem.</li>
</ul>

---

$("#input1").keyup(function(e){
    if(e.key == "Enter"){
        let text = $(this).val();
        let li = $(`<li>${text}</li>`);
        $("#list > li:last-child").after(li);
        $(this).val("");
    }
});

selector로 ul의 li중 마지막 자식을 선택
$("#list > li").last().after(li); jquery의 메소드 중 마지막 자식을 선택하는 것도 있다.

40. before()

Inserts content before the selected elements
element이전에 넣기

$("#head1").before("hello");
$("#head2").before("<p>world</p>");

-->
"hello"

Lorem.

world

s

Porro.

41. before() - 2

li추가하는 예제 before로 마지막에 추가된 element위에 쌓이게 하기

$("#input1").keyup(function(e){
    if(e.key == "Enter"){
        let text = $(this).val();
        let li = $(`<li>${text}</li>`);
        //$("#list > li:first-child").before(li);
        $("#list > li").first().before(li);
        $(this).val("");
    }
});

before로 넣으면 그녀석이 첫번째 자식이 되니 첫번째 자식을 계속 기준으로 잡을 수 있도록 해준다.
선택자의 first-child, jquery메소드의 first()를 사용하엿다.

42. remove()

element를 지워버림.

$("h1").click(function(){
    $(this).remove();
});

43. remove() - 2

!!확인문제
list중에서 삭제해보자

$("#list1 li").click(function(){
    $(this).remove();
});

삭제안됨 왤까?
처음 페이지 로딩될때 순서대로 실행되는데 스크립트 실행될때 당시에 li가 없어서삭제가 안된다.

$("#input1").keyup(function (e) {
    if (e.key == "Enter") {
        let liElem = $("<li>");
        liElem.text($(this).val());

        liElem.click(function(){
            $(this).remove();
        });

        $("#list1").append(liElem);
        $(this).val("");
    }
});

그래서 새로 li가 만들어졋을때 클릭되야 삭제할 수잇어서 생성 중간에 넣어줘야한다.

element없을때에 이벤트를 만들어놓으면 쓸모없는 일이다.

45. dom

순서대로 코드가 실행이된다.
html-head-body-h1-script이런식으로 만들어진다.
그래서 없는 것을 찾게되면 document에서 찾지 못하게 된다.

문서가 완료되엇을때 실행되도록 함수로만들어주면된다.

45. 바닐라함수

window.addEventListener("DOMContentLoaded",function(){
    실행내용
});

46. jquery

$(document).ready(function(){
    console.log($("h1"));
});

47. jquery-2

$(function(){console.log($("h1")});

->이부분 이해는 가는데 어렵다. 객체를 생성할때 삭제기능을 같이 만들어줘야한다.

$("#list1").click(function (e) {
    if (e.target.nodeName != "LI") {
        return;
    }
    e.target.remove();
});

e.target + 버블링쓰면 삭제되긴한다. 이건 왜 되는지모르겟다;;

https://okky.kr/articles/1089401 함수도 객체이고 이벤트도 객체이고 이걸 잘 생각해보면 만들때 만들어져야하는게 맞다?

48 add-remove

element에 class를 추가할 수있다.

<h1 id="head2">
    Pariatur, esse voluptatum!
</h1>

---

$("#button1").click(function() {
    $("#head2").addClass("dark");
});

버튼1을 클릭하면

<h1 id="head2" class="dark">가 된다.

49 add-remove - 2

<div class="fa-10x fa-bounce">
    <i class="fa-solid fa-basketball" id="icon1"></i>
</div>

---

$("#button2").click(function() {
    $("#icon1").removeClass("fa-bounce");
})

반대로 클래스 제거도 가능하다.
버튼2를 클릭하면
<div class="fa-10x">가 된다

50. toogle-class

<div class="fa-10x">
    <i class="fa-solid fa-frog" id="icon1"></i>
</div>

---

$("button").click(function() {
    $("#icon1").toggleClass("fa-bounce");
})

토글키로 클래스가 추가되엇다가 삭제됫다가로 설정할수도 잇다.

51. parent

$("h1").parent().addClass("red");
부모찾기

$("h1").parents().addClass("dotted");
parents니까 부모의 부모까지 다 찾기

52. parent - 2

아까처럼 입력하면 li가 생성되는 문서를 만들어보자.
아까는 클릭으로 li를 삭제햇다면 이번에는 버튼을 같이 만들어서 버튼을 누르면 li가 삭제되도록해보자.
버튼은 li의 자식이다.

$("#input1").keyup(function (e) {
    if (e.key == "Enter") {
        let text = $(this).val();
        let li = $(`<li>${text}</li>`);
        let removeButton = $("<button type=button>X</button>");
        li.append(removeButton)

        removeButton.click(function () {
            removeButton.parent().remove();
        });

        $("#list1").append(li);
        $(this).val("");
    }
});

객체가 선언될때 같이 클릭 이벤트를 만들어줘야 실행이된다.

53 find()

element기준으로 자손 element중에서 파라미터로 받은 선택자와 일치하느 것만 찾음.
$(".box").find("h1").addClass("red");
box의 자식들중 h1선택
$(".box").find(".wrapper").addClass("dotted");
box의 자식들중 wrapper 클래스 선택

54. sibling 형제

$("h3").next().addClass("red");
next()면 본인을 기준으로 다음 형제
$("h3").prev().addClass("blue");
prev()면 본인을 기준으로 이전 형제

dom트리를 생각해서 어떤 element 어떤 노드가 본인의 형제 부모일지를 생각하면 쉽다. 나무를 그려 생각해보자.

55. sibling - 2

h1클릭하면 기준으로 다음 element가 slide로 토글 되도록만들어 보자.

56. filterling

css selector로 선택을 하기때문에 여러개가 선택될 수있는데 그중에서 하나만 선택디도록 해보자.
first() dom tree에서 가장 왼쪽에 있는애이다.
last()는 dom tree에서 가장오른쪽에 있는애이다.
eq(index)는 0번부터 시작해서 인덱스에 따라서 element를 찾아내는것이다.

2023.02.13 후기

새로배운것
!!!target!!!
_blank 새 윈도우창 열기 / _self 현재 윈도우창에 띄우기 / _parent 현재 프레임의 부모프레임에서 새 웹페이지 / _top 최상위 프레임에서 열림

dom attribute vs property차이점?
if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute
.val()는 text로 밸류값을 가져오는 느낌이고 attr("value")는 element(dom)에 접근하는 것의 차이점이있다.
비슷하지만 조금차이가 있다.

36->
갑자기 떠오른
$(this).val("");은 되고 text="";이 안되는 이유
자바스크립트의 특성에서 비롯됨. 자바스크립트의 모든 변수는 참조변수임. 객체를 만들어서 바인딩시키는 것이다.
let text는 그저 참조변수임 객체에 이름을 붙인거임 후자를 하면 객체가 바인딩된게 초기화되는 것이지
value값이 초기화되는게 아니다. 그래서 전자를 해야한다.

공부를 해나가면서 조금씩 모르던걸 스스로 깨닫는 것이 있다. 그럴때 재미가있다.
AJAX는 JSP할때 다시 배운다고 한다. 내일부터 자바가 시작되고 책을 따라간다고 한다. 기존의 인강을 먼저 듣고 없는 내용을 먼저 나가면 될 것 같다. 인강에 없거나 혼자하는 부분을 제외하면 기본적인 내용이다.