DOM과 이벤트, 그리고 Thread 정리

DOM이란?

DOM(Document Object Model)은 HTML 문서를 JavaScript로 제어하기 위한 인터페이스이다.
브라우저가 HTML 문서를 읽어 트리 구조(객체 형태)로 만들어두고, JavaScript로 이 객체들을 선택/변경할 수 있다.

---

DOM 선택

// ID로 선택
const element = document.getElementById("myId");

// 클래스로 선택
const elements = document.getElementsByClassName("myClass");

// 태그로 선택
const divs = document.getElementsByTagName("div");

// CSS 선택자로 선택
const element2 = document.querySelector("#myId"); // id로 선택
const elements2 = document.querySelectorAll(".myClass"); // 클래스로 선택

---

DOM 조작

// 내용 변경
element.textContent = "새로운 텍스트";
element.innerHTML = "<strong>HTML 내용</strong>";

// 스타일 변경
element.style.color = "red";
element.style.backgroundColor = "#f0f0f0";

// 클래스 조작
element.classList.add("active");
element.classList.remove("inactive");
element.classList.toggle("visible");

// 속성 조작
element.setAttribute("data-id", "123");
element.getAttribute("data-id");
element.removeAttribute("data-id");

---

자바스크립트 이벤트

자바스크립트 이벤트는 웹페이지에서 사용자 동작이나 브라우저 동작을 감지하고 처리하는 메커니즘이다.
버튼 클릭, 키보드 입력, 마우스 이동, 페이지 로드 등이 이벤트에 해당된다.

---

이벤트 종류

마우스 이벤트

• click, dblclick, mousedown, mouseup, mouseover

키보드 이벤트

• keydown, keyup, keypress

폼/입력 이벤트

• focus, blur, change, submit, reset, select, input, cut, paste

UI(화면) 이벤트

• load, unload, error, resize, scroll, abort

드래그 이벤트

• dragstart, drag, dragend, dragenter, dragover, dragleave, drop

---

Thread

Thread는 하나의 프로세스 내에서 독립적으로 실행되는 가장 작은 실행 단위이다.
자바 프로그램이 실행될 때 기본적으로 main 스레드가 동작한다.

---

멀티스레드

멀티스레드는 하나의 프로세스 내에서 둘 이상의 스레드가 동시에 작업을 수행하는 프로그래밍 기법이다.

---

Thread 생성과 실행

Thread를 생성하는 방법에는 두 가지가 있다.

1) Thread 클래스를 상속받아서 구현
2) Runnable 인터페이스를 구현해서 사용

---

Thread 상속 방식

public class MyThread extends Thread {
    String name;

    MyThread(String name) {
        this.name = name;
    }

    @Override
    public void run() {
        System.out.println(name + " Thread start!");
        for (int i = 0; i < 10; i++) {
            System.out.println(name + " Thread " + i);
            try {
                sleep(1000);
            } catch (Exception e) {
                System.out.println(e.getMessage());
            }
        }
        System.out.println(name + " Thread end!");
    }
}

public class ThreadTest {
    public static void main(String[] args) {
        System.out.println("main start@@");

        MyThread myThread = new MyThread("철수");
        myThread.start();

        MyThread myThread2 = new MyThread("영희");
        myThread2.start();

        MyThread myThread3 = new MyThread("순이");
        myThread3.start();

        for (int i = 0; i < 10; i++) {
            System.out.println("main " + i);
            try {
                Thread.sleep(1000);
            } catch (Exception e) {
                System.out.println(e.getMessage());
            }
        }

        System.out.println("main end@@");
    }
}

---

Runnable 구현 방식

public class MyRunnable implements Runnable {
    String name;

    MyRunnable(String name) {
        this.name = name;
    }

    @Override
    public void run() {
        System.out.println(name + " Thread start!");
        for (int i = 0; i < 10; i++) {
            System.out.println(name + " Thread " + i);
            try {
                Thread.sleep(1000);
            } catch (Exception e) {
                System.out.println(e.getMessage());
            }
        }
        System.out.println(name + " Thread end!");
    }
}

public class MyRunnableTest {
    public static void main(String[] args) {
        MyRunnable runnable1 = new MyRunnable("철수");
        MyRunnable runnable2 = new MyRunnable("영희");
        MyRunnable runnable3 = new MyRunnable("순자");

        Thread t1 = new Thread(runnable1);
        Thread t2 = new Thread(runnable2);
        Thread t3 = new Thread(runnable3);

        t1.start();
        t2.start();
        t3.start();
    }
}

---

느낀점

자바스크립트가 끝나고 다시 자바를 배우니까 뭔가 어색하기도 했다.
스레드를 처음 보니 신기했고, 이걸로 재밌는 것들을 많이 만들 수 있을 것 같다.

내일부터 3일 정도 쉬는데 그때 틈틈이 자바 공부를 해야겠다.
아직 기초가 부족한 것 같지만, 그래도 조금씩 실력이 느는 것 같아서 점점 재밌어진다.