국비/Client(HTML&CSS&JavaScrpit)

2023.02.09 11일차 JavaScript

춘핑이 2023. 2. 9. 16:53

JavaScript

함수 이어서 자바스크립트 나라에는 1급시민이고 값이다.
객체의 값중에 함수가 값인 것을 메소드라고 한다.
객체는 property와 메소드로 이루어져잇다.

90. object

객체라는 것? 현실세계의 객체가 프로그래밍으로 들어온 것 각각의 객체는 값들이 있다.
어떤 물체는 기능이 있다. 각 물체가 가진 기능이 메소드로 반영이 된다.

let car = {
    name: "kia",
    price: 5000,
    drive: function () {
        console.log("운전기능 실행 중...");
    }
}

91. object

let person = {
    name : "son",
    age:33,
    describe: function (){
        console.log(`이름은 ${this.name}이고 나이는 ${this.age}입니다.`);
    }
}

객체에 존재하는 property에 접근하기 위해서 this라는 키워드를 사용해야한다.
this는 실행되고 있는 메소드의 소유객체를 가리킨다.

92. this

function introduce(){
    console.log(`이름은 ${this.name}이고 나이는 ${this.age} 입니다.`);
}
let person1 = {
    name : "son",
    age : 22,
    describe: introduce
}

let person2 = {
    name : "cha",
    age : 55,
    describe: introduce
}

describe의 값이 introduce function으로 되게 만들었다. 함수를 값으로 넣은것임.
person1.describe();
person2.describe();
같은 함수이지만 각자 실행되는 메소드객체를 가져다 사용함.

JavaScript DOM

1. JavaScript HTML DOM(Document Object Model)

html은 브라우저가 각각의 element를 모두 객체로 만든다. 얘를 tree구조에 넣어둔다. 이 넣어놓은 객체를 자바스크립트에서 활용한다.
그래서 element객체의 정보를 얻거나 수정할 수 있게 된다. 그러면 객체를 고칠수있게 되고 그걸 DOM이라고 한다.
문서를 객체화한 형태


dom은 객체들의 tree구조로 이루어져잇고 각 객체는 각 element이다.
우리는 element를가지고 html코드를 만들엇다. 부모자식간의 관계로 tree를 만든다.

HTML DOM(Document Obejct Model)
HTML 문서의 각 요소를 객체로 만들어 트리 구조화 시킨 형태이다.

2. getElement element객체 얻는법 -1

css에서 element선택할때 선택자를 사용했는데 javascipt에서도 선택자를 이용하면된다.
document객체는 이미 html에서 만들어져있어서 그냥 document의 메소드를 사용하면된다.
let o1 = document.getElementById("head1"); 이것은 id를 가져오라는 메소드이다.
이것은 객체를 만드는 메소드 이고 o1이라는 변수에 반환되는 객체를 담은 것이다.
console.log(o1.textContent);
car.name햇듯이 o1의 textContent를 보는 것이다.

이런식으로 객체를 얻어서 property를 사용하는 것이다.
o1.textContent = "HELLO DOM";하면 객체.property하듯이 수정할 수 있게 된다.
페이지 소스에는 그대로인데 개발자도구를 보면 현재 DOM의 내용을 볼 수 있다.

!!!확인문제!!!
아이디가 head3 요소의 텍스트 콘텐트를 바꾸기
//객체 생성
let o3 = document.getElementById("head3");
// let o3 = document.querySelector("#head3"); //따로 배운 선택방법
o3.textContent = "망했다."

객체가 굉장히 많고 각 element의 property와 메소드를 어디서 찾는가? 다배울수는 없다.
https://www.w3schools.com/jsref/default.asp
w3schools의 JavaScript and HTML DOM Reference
()가있으면 method이다.
아주 일부 소개받을 것이고 필요한 기능을 검색해서 알아보자. dom element property등등 검색어로 검색

3 getElement element-2

let heads = document.getElementsByTagName("h1");
태그이름으로 얻어오면 여러개 잇을 수 있으니 elements이다.
array로 받아온다.
console.log(heads[0].textContent);
배열을 읽는 방식으로 읽으면 된다.

4. getElement element-3

css에서 클래스로 선택을 햇듯이 javascipt도 클래스로 선택할 수 있다.
let elems1 = document.getElementsByClassName("note");
note라는 클래스를 가진 element를 가져올 수 있다.
클래스 이름은 여러개 들어갈 수 잇기 때문엔 또다른 클래스 명으로 객체를 만들수도 있다.
<h1 id="head2" class="note error">이 있으면
let elems2 = document.getElementsByClassName("error"); 두가지 방식으로 element객체를 만들 수 있는 것이다.

5. querySelector

css selector로 element를 선택할 수 있다. 가장 최근에 등장한 메소드이다.
getElement시리즈는 구식이다. 하지만 둘다 자주 사용한다.
let elem1 = document.querySelector("#head1");
이 메소드는 선택자로 선택한 element객체를 리턴해준다.
let elem3 = document.querySelector(".note");
class로도 가져올 수있다. 그런데 클래스는 여러 element가 잇을수 있다.
이렇게하면 elements가 아니라 맨위에있는 element만 리턴한다.

6. querySelectorAll

하나의 element가아니라 여러 element를 가지고 오고 싶다면 querySelectorAll을 사용하면 된다.
let heads = document.querySelectorAll("h1"); 역시나 배열로 가지게 오게 된다.

!!확인문제!!
note클래스인 요소의 객체를 dom에서 가져와서 요소들의 textContent를 출력하기

let notes = document.querySelectorAll(".note");

for (let i = 0; i < notes.length; i++) {
    console.log(notes[i].textContent);

}

getElementById와 css문법사용하는 querySelector / querySelectorAll 이 셋을 많이 사용한다.

7. dom -1

<h1>
    Lorem.
</h1>
<h1>
    Temporibus.
</h1>
<div id="res"></div>

h1와 연결해서 div객체에 text를 넣어보자.

let heads = document.querySelectorAll("h1");
let text = "";

for (let i = 0; i < heads.length; i++) {
    text += heads[i].textContent;
}

let res = document.querySelector("#res");
res.textContent = text;

자바스크립트를 조작해서 문서 내용을 바뀌게 했다.

8. dom - 2

<h1 id="head1"></h1>

h1 element에 promt로 메시지를 입력받아 텍스트를 넣어보자.

let message = prompt("메세지를 입력하세요", "안녕하세요.");
let head = document.querySelector("#head1");

head.textContent = message;

9. createElement - 1

이미잇는 element를 조작햇다. 존재하지 않는 element를 만들어보자.
append메소드로 넣을 수있다.

let elem = document.querySelector("#head1");

elem.append("hello");
elem.append("world");
elem.append("!");
elem.append("it", "is", "a", "dom");

element를 만들어서 추가하고 싶다면?
document.createElement("span"); 태그명을 적어주면됨
spanElem.append("새로운 스팬 요소");
이 새롭게 만든 요소를 dom에 붙여야함.
elem.append(spanElem);

10. createElement - 2

<ul id="list1">
    <li>
        Lorem.
    </li>
    <li>
        Nesciunt!
    </li>
</ul>

list아이템을 추가해보자.

let ul = document.querySelector("#list1")
let text = "";
do {
    text = prompt("새 목록을 작성하세요.", "study");
    let li = document.createElement("li");
    li.textContent = text;
    ul.append(li);
} while(text !== "exit");

text가 exit면 탈출하게 만들었다.
1.createElement로 <li></li>를 만든다.
2.이 li의 textContent를 text로 만든다. <li>text</li>가 만들어진다.
3.ul에 append로 <li>text</li> 요소를 추가한다.

11. HTML DOM Events - 1

어떨때 하고 싶다. 버튼을 누르면 발생하게 하기등등
Mouse Events의 onclick 이벤트 element의 attribute이다.
html의 태그에 attribute를 작성할 수 있엇다. 그중 onclick이 있는데 이것의 value는 script이고 따라서 여기에 javascipt명령어를 넣을 수 있다.

<h1 id="head1" class="note" onclick="console.log(999);">
    Lorem.
</h1>
<h1 onclick="console.log('hello event');">Lorem.</h1>

근데 element와 자바스크립트 코드가 섞이는게 불편하다. 코드가 매우 길면? 코드 해석이 어려워진다.
<h1 onclick="myfunc();">Lorem.</h1>
나중에 실행되는 함수를 만들면된다.

특정이벤트가 발생할때 코드를 발생시키고싶으면 해당 element의 attribute를 사용하면된다.

12. HTML DOM Events- 2

event attribute를 직접 html에 넣어서 햇다.

<input type="text" id="input1"/>
<button onclick="show()">출력</button>
//input에잇는걸 콘솔에 출력하기
function show() {
    let input1 = document.querySelector("#input1");
    console.log(input1.value); 
}

13. HTML DOM Events - 3

onkeyup키보드 입력중 누르던게 떨어졋을때 

<input type="text" id="input1" onkeyup="show();">
<div id="res"></div>
function show() {
    let text = document.querySelector("#input1").value;
    document.querySelector("#res").textContent = text;
}

input element에 값을 입력하면 div의 textcontent를 채우는 이벤트

14. HTML DOM Events - 4

!!!확인문제!!!
input에 값을 넣으면 list로 만들어서 추가하기 whlie프롬프트 계속추가햇던것 응용하기

<input type="text" id="input1">
<button onclick="add()">추가</button>
<ul id="list1">
    <li>Lorem.</li>
    <li>Et.</li>
</ul>
<script>
    let input1 = document.querySelector("#input1");
    let ul = document.querySelector("#list1");

    function add() {
        let text = input1.value;
        let li = document.createElement("li");
        li.textContent = text;
        ul.append(li);
    }
</script>

1.#input1의 value얻기
2.새 li요소만들고
3.새요소의 textContent를 1에서 얻은 값으로 할당
4.#list1 요소얻기(위에서 얻음)
5.4에서 얻은 요소에 2에서 만든 요소 append하기

15. HTML DOM Events - 5

간단한계산기 만들기

<input type="text" id="input1">
<input type="text" id="input2">
<div>
    <button onclick="sum()">+</button>
    <button onclick="substract()">-</button>
    <button onclick="devide()">/</button>
    <button onclick="multiply()">*</button>
</div>

<div id="res"></div>
let input1 = document.querySelector("#input1");
let input2 = document.querySelector("#input2");
let res = document.querySelector("#res");

function sum() {
    num1 = parseInt(input1.value);
    num2 = parseInt(input2.value);
    res.textContent = num1 + num2;
}

function substract() {
    let num1 = parseInt(input1.value);
    let num2 = parseInt(input2.value);
    let result = num1 - num2;
    res.textContent = result;
}

function devide() {
    num1 = parseInt(input1.value);
    num2 = parseInt(input2.value);
    res.textContent = num1 / num2 ;
}

function multiply() {
    num1 = parseInt(input1.value);
    num2 = parseInt(input2.value);
    res.textContent = num1 * num2;
}

!!!!주의!!!!
let num1 = parseInt(input1.value);
let num2 = parseInt(input2.value);
얘들을 다른 함수에서도 변수를 사용하니까 빼서 작성하고 싶엇는데
function sum() {
res.textContent = num1 + num2;
}
->이러면 함수를 누를때 num1 num2가 더해지는데 이 num1 과 num2는 누구를 참조하는 지 모르는 것이다.
이미 정의된 애들을 가져다 쓰지 않는다.
java의 클래스처럼 생각을 해버렷다.
let input1 = document.querySelector("#input1");
이런애들은 문서를 만들때 객체를 생성하는건데 우리는 그 안의 값을 사용하는것이라 미리 선언해도 상관이 없는거임.

16. event-object - 1

이벤트가 발생하면 할수 잇게 되엇다. 그런데 이벤트도 역시 객체로 만들 수 잇다.
이벤트가 발생하면 이벤트 객체가 만들어진다 어떤 이벤트가 발생햇을때 어떤 이벤트가 발생하는지를 알아야한다.
예를들어 click이벤트가 발생하면 MouseEvent가 발생한다.
https://www.w3schools.com/jsref/obj_mouseevent.asp
이중 MouseEvent button Property 마우스의 어떤 버튼이 클릭되엇는지 알 수 있다.

다외우지말고 이런식으로 검색해서 가보자.

paramter가잇으면 클릭이벤트가 발생할때 파라미터를 넣어줌.

<button onmousedown="whichButton(event);">클릭</button>
function whichButton(param) {
    console.log(param);
}

하면 클릭이벤트가 발상핼때의 이벤트 객체가 만들어져서 함수에 전달이된다.

<button onmousedown="whichButton(event);">클릭</button>
<div id="res"></div>

function whichButton(param) {
    //console.log(param);
    let message = "";
    switch (param.button) {
        case 0:
            message = "왼쪽 버튼 클릭됨";
            break;
        case 2:
            message = "오른쪽 버튼 클릭됨";
            break;
        default:
            message = "다른버튼 클릭됨";
            break;
    }
    document.querySelector("#res").textContent = message;
}

객체의 내용을 확인하고 이벤트의 button이 이벤트 발생마다 달라짐을 알았다.
event.button의 종류에따라 다른 메시지를 출력하도록 해보앗다.

17. event-object - 2

키보드 이벤트 key: "a"

<input type="text" onkeyup="whichKey(event)">
<div id="res"></div>
function whichKey(e){
    //console.log(e);
    document.querySelector("#res").textContent = e.key;
}

이러면 키를입력할때마다 어떤키가 입력되엇는지 키가 떨어질때마다 보여준다.

18. event-object - 3

키보드 엔터눌럿을때 리스트 추가되게 하기

<input type="text" onkeypress="add(event)" id="input1">
<ul id="list1"></ul>
let ul = document.querySelector("#list1");
let input1 = document.querySelector("#input1");

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

e.key가 "Enter"일때 객체를 만들고 삽입하는기능을 만들엇다.
하나의 키를 누르는게 정해져잇어서 onkeypress라는 기능이 더 맞을거 같아서 이걸 사용햇다.

결론은 javascipt가 dom을 통해서 객체를 조작할 수 있다는 기억하고 나머지는 찾아서 해결하자.

19. event-handler

event attribute를 사용햇는데 다른방법
이벤트를 다룬다 이벤트 다루는 법은 함수이다.
onclick attribute는 element시작하기전에 사용 onclick property는 element가 가지고 있는 속성인데 이것을 사용할것이다
property에 함수를 할당하는 것임. 이벤트 핸들러가 작동하면 이 함수가 실행됨.

<button id="btn1" onclick="btnClick1()">1버튼 클릭</button>
<button id="btn2">2버튼 클릭</button>
function btnClick1() {
    console.log("1번 클릭 됨");
}

let btn2 = document.querySelector("#btn2");

btn2.onclick = function () {
    console.log("2번 클릭 됨.");
}

property가 함수라면? 메소드임 즉 버튼 객체의 onclick메소드를 사용한 것이다.

둘 중에 어떤걸 많이 사용하나? 둘다 많이 씀
stackoverflow에서 onclick="" vs onclick property
두번째 방법추천 1번은 버그를 찾기가 어렵고 유지보수하기가 더힘들다.

react에서는 전자같이 유사한걸 사용한다...?

19.3 addEventListener

3번째 방법도 있다. addEventListener라는 메소드를 사용할수도 잇다.
addEventListener("이벤트명", 실행할 함수);
이벤트명은 on~에서 on뺀게 보통들어감. 레퍼런스 확인하기

let btn3 = document.querySelector("#btn3");

btn3.addEventListener("click", function(){
    console.log("3번 클릭 됨");
});

강사님은 3번을 선호하심. 다음강사가 바꿔서 자주사용하면 맞춰서 배워라.

20. addEventListener

18번에서 리스트에 넣기를 addEventListener사용해보기

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= "";
    }
});

2023.02.09 후기

갑자기 dom을 나가고 내일부터 jquery를 나가신다고 한다. 진짜 수박겉핥기로만 배우고 여러 이벤트를 다루지 않는다. 알아서 필요한 부분들은 검색해나가면서 스스로 고찰할 필요가 있어보인다.

벌써 2주가 지낫다. 말이 안된다. 나혼자 진행된게 없는 것 같고 며칠전 방황하던 내가 ㅂㅅ처럼 느껴진다.
기간이 생각보다 훨 씬 더 짧다. 그래도 해야한다. 커리큘럼을 열심히 따라가며 내가 모르는 부분들을 추가로 공부해나가는게 최선 인 것 같다.