[인프런]Javascript입문 - DOM으로 버튼 추가

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[인프런]Javascript입문 - DOM으로 버튼 추가 본문

프로그래밍/Javascript 자바스크립트

[인프런]Javascript입문 - DOM으로 버튼 추가

비비 bibi 2020. 10. 22. 18:40

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

이번 시간에는 DOM을 통해 버튼을 추가해 볼 것.

- 기존 element에 계층 구조로 자손을 추가하기
- 버튼을 추가하기

준비하기

아래의 내용이 포함된 html 파일을 하나 작성합니다.

<div id="test">메뉴판 예제</div>
<script src="add_button.js"></script>

+ 연결할 add_button.js도 함께 만들어 준다.

console.log("addButton.js");

DOM을 이용해 html 객체 추가하기

DOM으로 html에 객체도 추가할 수 있다.

document.getElementById("");
문서 내에서 id가 ""인 대상을 가져오는 메서드..
document.createElement("");
""내의 요소(=태그)를 만드는 메서드.
대상.innerHTML = "넣을 내용";
대상 안에 "넣을 내용"을 넣는 메서드?
A.appendChild(B);
자식요소를 추가하는 메서드. A의 하위요소로 B를 추가한다.

var test = document.getElementById('test');
test; // <div id="test">메뉴판 예제</div>

// document.createElement(); : ()내의 요소(태그)를 만드는 메서드이다.
var menu = document.createElement('ul'); // ul태그가 생긴다.
menu; // <ul></ul>

var item1 = document.createElement('li'); // li태그가 생긴다.
item1; // <li></li>

item1.innerHTML = "치킨"; // item1에 치킨을 넣는다.
item1; // <li>치킨</li>

// A.appendChild(B); : 자식을 추가하는 메서드. A의 하위요소로 B를 추가한다.
menu.appendChild(item1); // menu의 하위요소로 item1을 추가한다.
menu; 
/* <ul>
	<li>치킨</li>
   </ul> */

var item2 = document.createElement('li'); 
item2.innerHTML = "짜장면"; 
item2; // <li>짜장면</li>

menu.appendChild(item2); // menu의 하위요소로 item2를 추가한다.
menu; 
/* <ul>
	<li>치킨</li>
    <li>짜장면</li>
   </ul> */

test; // <div id="test">메뉴판 예제</div>
test.appendChild(menu); // div영역에 menu의 내용이 하위요소로 들어간다.

input 과 button 엘리먼트(태그)의 동작 샘플

먼저 input과 button엘리먼트가 어떻게 동작하는지 확인해 보자.

input과 button을 넣은 html파일을 만든다. dom_button.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>html 연습</h1>
<div id="test">메뉴판 예제</div>
<div id="test2">
    input과 button <br>
    <input id="input1" type="text">
    <button id="btn1">확인</button>
</div>
<script src="add_button.js"></script>
</body>
</html>

<input> : 내용을 입력받을 수 있는 태그.
type="" : 입력받을 데이터의 형식을 정하는 속성. type="text"는 텍스트를 입력받음.

<button></button> : 버튼을 만드는 태그. 버튼 이름은 콘텐츠로 들어간다. (여는태그~닫는태그 사이)

✔ id="" : 대상에 고유한 식별자를 부여하는 속성.
id값이 있으면, id를 통해 그 값을 가져오기 쉬워진다.
id값은 유니크한 특징을 가진다. ( 같은 파일 내에 중복되는 id값이 없어야 한다 )

// input태그 내에 입력된 값을 읽어오는 함수를 만든다.
<script>
    var readInput = function() {
        var input = document.getElementById('input1');
        console.log(input.value); 
    };
</script>

// input 창에 아무거나 입력하고
readInput(); // 을 입력하면, input창 안에 입력되어 있는 값을 가져올 수 있다.

✔ input창 안의 값을 가져올 때는 .value 를 사용한다.

지금은 함수를 호출해야 input창 안의 값을 가져올 수 있다.
하지만 이제 더 편리하게 가져오기 위해, button을 누르면 함수가 실행되도록 할 것이다.
->button 의 onclick이라는 속성을 활용해서!

아래와 같이 콘솔 창으로 명령해도 되고,

// 콘솔 창 버전
var btn1 = document.getElementById("btn1");
btn1; // <button id="btn1">확인</button>

// button의 속성 onclick을 사용해 함수와 버튼을 연결한다.
btn1.onclick = readInput; // 함수명만 작성. ()는 html등에서 함수를 호출할 때만 사용

btn1.onclick = function() {
    console.log("click");
    var input = document.getElementById('input1');
    console.log(input.value);
}

아래와 같이 html & js 파일을 만들어 각각 직접 작성해도 된다

// html과 js 각각의 파일로 만든 버전.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>html 연습</h1>
<div id="test">버튼 예제
    <input id="input1" type="text">
    <button id="btn1" onclick="readInput()">확인</button>
</div>
<script src="add_button.js"></script>
</body>
</html>

console.log("addButton.js");
var readInput = function() {
    var input = document.getElementById("input1");
    console.log(input.value);
}

콘솔 창에서 직접 버튼을 하나 더 만들고, 추가할 수도 있다.

// 버튼2를 만든다.
var btn2 = document.createElement('button');
btn2.innerHTML = "버튼2";
btn2; // <button>버튼2</button>

// 버튼2에 onclick으로 readInput함수를 연결한다. (함수 호출이 아니므로 ()는 적지 않는다)
btn2.onclick = readInput;
btn2.onclick; 
// function() {
      var input = document.getElementById("input1");
      console.log(input.value);
  }
  
// 만든 버튼2을 html파일의 div 영역에 추가한다. (div 아이디 = test)
var test = document.getElementByID('test);
test; // <div id="test">...</div>
test.appendChild(btn2);

js파일에서 버튼을 만드려면 아래와 같은 방식으로 하면 된다.

console.log("addButton.js");

var readInput = function() {
    var input = document.getElementById("input1");
    console.log(input.value);
}

var btn2 = document.createElement("button");
btn2.innerHTML = "버튼2";
btn2.onclick = readInput;
var test = document.getElementById("test");
test.appendChild(document.createElement('br'));
test.appendChild(btn2)

❗ btn2.onclick = readInput; 처럼
단순히 함수를 연결해 줄 때는 ()를 붙일 필요가 없다. (함수 호출이 아닌 함수 연결이기 때문)
그러나 자바스크립트파일이 아닌 다른 파일 (HTML등..)에서는 함수 호출이 맞으므로
<button onclick="readInput()"></button> 처럼 ()를 붙여 주어야 한다.

프로그래밍 연습

DOM을 이용해서 JS로 버튼을 추가해 봅시다.

저작자표시 비영리 변경금지

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

[인프런]Javascript입문 - 계산기 구현(문자열 계산기 시작, 사칙연산 계산 및 출력, ) (0)	2020.10.26
[인프런] Javascript입문 - 추가로 공부할 것들(2) CSS (참고 강좌) (0)	2020.10.22
[인프런] Javascript입문 - DOM과 HTML (요소/태그/엘리먼트, 속성, 블록 태그/인라인 태그, html과 JS 분리, JS로 DOM 제어하고 값 바꾸기) (0)	2020.10.22
[인프런]Javascript입문 - 객체와 프로토타입 (프로토타입, 배열/객체/참조변수) (0)	2020.10.21
[인프런]Javascript입문 - 참조 변수와 Call by Reference (참조변수/일반변수, call by Value/call by Reference) (0)	2020.10.21

'프로그래밍/Javascript 자바스크립트' Related Articles

Bibi's DevLog 🤓🍎

[인프런]Javascript입문 - DOM으로 버튼 추가 본문

[인프런]Javascript입문 - DOM으로 버튼 추가

준비하기

DOM을 이용해 html 객체 추가하기

input 과 button 엘리먼트(태그)의 동작 샘플

프로그래밍 연습

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

티스토리툴바