https://github.com/YOOGOMJA/javascript_study
solution branch에 답 있음
[example1.html]
1. getElementById로 요소 찾기
개발자도구(f12) - console을 보자!
입력) document.getElementById("head1")
결과) <h1 id='head1'>Hello World!</h1>
- class와 id의 차이
class는 카테고리화
id는 그 요소 하나를 딱 집어서 할 때!
2. getElementsByClassName으로 요소 찾기
입력) document.getElementsByClassName("head1")[0]
결과) <h1 class='head1'>Hello!</h1>
class는 여러 개의 '의자'를 가져온다고 생각하기 때문에 (이게 표준) elements인거다!
3. 요소 생성하기
입력) document.createElement("h1")
결과) <h1></h1>
근데 console에서 진행해도 똑같다 vscode에서 진행하는거랑 같아
3.1 요소 추가하기
var createdElem = document.createElement("h1");
createdElem.innerText = "Jello!";
elem.append(createdElem);
4. 요소 삭제하기
for(var i = 0 ; i < elem.children.length ; i++){
var item = elem.children[i];
if(item.innerText === "World!"){
item.remove();
}
}
근데 === 주의!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 id='head1'>Jello World!</h1>
<h1 class='head1'>Jello!</h1>
<div id='elem'>
<p id='item'>World!</p>
</div>
<script type='text/javascript'>
var obj = {
key : 'value',
name : 'yoo'
};
obj.key
obj.name
window //이 객체가 젤 먼저 초기화됨
//javascript에 필요한 건 다 있음. 브라우저에 이미 있음. like c include <stdio.h>
//window 아래 있는게 document. but window. 안붙여도됨.
// 1. "head1"의 내용을 바꾸기
document.getElementById("head1").innerText = "Hello World!";
document.getElementsByClassName("head1")[0].innerText = "Hello!!";
// 2. 요소를 생성하기
var elem = document.getElementById("elem");
var createdElem = document.createElement("h1");
createdElem.innerText = "Jello!";
elem.append(createdElem);
var createdElem2 = document.createElement("h2");
createdElem2.innerText = "hello~~"
elem.append(createdElem2);
// 3. 요소를 삭제하기
for(var i = 0 ; i < elem.children.length ; i++){
var item = elem.children[i];
if(item.innerText === "World!"){
item.remove();
}
}
</script>
</body>
</html>
===================================
[example2.html]
.innerText했는데 안나오면 .value~
console.log(document.getElementById("elem"))
콘솔에 찍는다
디버깅할 때 console.log(함수, int, string, 배열) 등등 아무거나 들어가도 됨
아주 많이 쓰는 것! console.log!!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#elem{
height : 50px;
font-size : 1.3em;
border-radius: 10px;
}
</style>
</head>
<body>
<button type='button' id='btn1' onclick='func1()'>
Click me
</button>
<br/>
<input type='text' id='elem'/>
<button type='button' id='btn2' onclick='func2()'>show me</button>
<script type='text/javascript'>
// 1. 클릭시 실행되는 함수
function func1(){
// 알림창 띄우기
alert("Hello!");
}
// 2. 클릭시 요소의 내용을 alert으로 띄우기
function func2(){
console.log(document.getElementById("elem"))
// innerText가 아닌 value임에 주의
alert(document.getElementById("elem").value);
}
</script>
</body>
</html>
[prac1.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#count {
display:inline-block
}
.insertContainer h3 {display:inline-block;}
</style>
</head>
<body>
<h1>
Practice 1 : 장바구니를 추가해보자
</h1>
<hr/>
<div>
<!-- count의 숫자는 항상 list안으 요소의 갯수와 같아야한다 -->
<h2>현재 장바구니 갯수 : <p id='count'>3</p></h2>
<ul id="list">
<li>사과</li>
<li>두리안</li>
<li>망고</li>
</ul>
<!-- 가장 앞에 있는 요소를 삭제한다 -->
<button id='btnRemove' type='button' onclick='remove()'>remove</button>
<div class='insertContainer'>
<h3>추가 할 항목 : </h3>
<input id='txtItem' type='text'/>
<!-- list에 txtItem의 내용을 추가한다 -->
<button id='btnInsert' type='button' onclick='insert()'>추가하기</button>
</div>
</div>
<script>
//전역변수로 사용가능
var list = document.getElementById("list");
var count = document.getElementById("count");
function insert(){
//심화 : txtItem의 내용이 비어있을 때는 작동하지 않게 해보자
var txtItem = document.getElementById("txtItem");
if (txtItem.value.trim() === "") { alert('text를 입력해주세요'); return; }
//txtItem의 내용을 list의 자식 요소로 추가한다
var createdElem = document.createElement("li");
createdElem.innerText = txtItem.value;
list.append(createdElem);
// 추가 후에는 count의 내용이 현재 list의 갯수를 출력하도록 한다.
count.innerText = list.children.length;
txtItem.value = '';
}
function remove(){
// list의 하위 요소를 맨 앞부터 삭제한다
if (list.children.length !== 0) {
list.children[0].remove();
count.innerText = list.children.length;
// 삭제 후에는 count의 내용이 현재 list의 갯수를 출력하도록 한다.
}
else {
alert("no");
}
// 심화 : list의 하위 요소가 비어있을때는 삭제되지 않도록 해보자
}
</script>
</body>
</html>
- <list>의 자식요소 개수 출력하기
입력) count.innerText = list.children.length;
출력) count에는 list의 자식개수가 출력됨.
trim은 띄어쓰기로만 구성된 공백문자여도 다 공백으로 처리!!
" ".trim() = ""
" ".trim() = ""
"".trim() = ""
[prac2.html]
- <Element(tagName) attribute=""> 주의!
- 어디서든 .value 잊지않기 txtMaj2.innerText = txtMaj.value;
- 버튼 추가하기
var btn = document.createElement("input");
btn.type = "button";
btn.innerText = "삭제";
btn.setAttribute("onClick", "remove(this)");
tr.append(btn);
- table 찾고 tbody도 찾기. 그러나 tbody에 id가 없을때! -> getElementsByTagName("tbody")[0]
- s 니까 [] 필수!!!
var tblList = document.getElementById("tblList");
tblList.getElementsByTagName("tbody")[0].append(tr);
- 삭제하기
function remove(target){
// ## 삭제 버튼을 클릭하면
// 현재 행을 삭제합니다.
var tr = target.parentElement.parentElement.remove();
// 현재 요소의 부모요소는 parentElement로 접근할 수 있습니다.
}
target은 button에서 (this)로 한거다. 그러니까 tr은 button의 부모(td)의 부모(tr)이다!
- 빈칸 검사
if (txtMaj.value.trim() === "" || txtName.value.trim() === "" || txtDeg.value.trim() === "") {
alert("빈칸을 채워주세요");
return;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<table id='tblList'>
<thead>
<tr>
<th>학과</th>
<th>이름</th>
<th>학년</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<tr>
<td>컴퓨터학부</td>
<td>강다니엘</td>
<td>4</td>
<td>
<button type='button' onclick='remove(this)'>삭제</button>
</td>
</tr>
<tr>
<td>컴퓨터학부</td>
<td>김슬기</td>
<td>4</td>
<td>
<button type='button' onclick='remove(this)'>삭제</button>
</td>
</tr>
<tr>
<td>컴퓨터학부</td>
<td>하연수</td>
<td>4</td>
<td>
<button type='button' onclick='remove(this)'>삭제</button>
</td>
</tr>
</tbody>
</table>
<div>
<h4># 추가하기</h4>
<input id='txtMaj' type='text' placeholder='학과'/>
<input id='txtName' type='text' placeholder='이름'/>
<input id='txtDeg' type='number' placeholder='학년'/>
<button type='button' onclick='insert()'>추가</button>
</div>
<script type='text/javascript'>
function insert(){
// ## 추가 버튼을 클릭하면
// 1. 학과, 이름, 학년이 비어있지 않은지 확인합니다
var txtMaj = document.getElementById("txtMaj");
var txtName = document.getElementById("txtName");
var txtDeg = document.getElementById("txtDeg");
if (txtMaj.value.trim() === "" || txtName.value.trim() === "" || txtDeg.value.trim() === "") {
alert("빈칸을 채워주세요");
return;
}
// 2. 모두 정상일 경우 tblList의 tbody에 학과,이름,학년을 추가합니다
var txtMaj2 = document.createElement("td");
txtMaj2.innerText = txtMaj.value;
var txtName2 = document.createElement("td");
txtName2.innerText = txtMaj.value;
var txtDeg2 = document.createElement("td");
txtDeg2.innerText = txtMaj.value;
var tr = document.createElement("tr");
tr.append(txtMaj2);
tr.append(txtName2);
tr.append(txtDeg2);
// 이때 삭제 버튼도 추가해야합니다. 내용은 기존의 항목을 참조합시다
// 3. 삭제 버튼의 onclick내용은 setAttribute함수로 추가할 수 있습니다.
var btn = document.createElement("input");
btn.type = "button";
btn.innerText = "삭제";
btn.setAttribute("onClick", "remove(this)");
tr.append(btn);
var tblList = document.getElementById("tblList");
tblList.getElementsByTagName("tbody")[0].append(tr);
}
function remove(target){
// ## 삭제 버튼을 클릭하면
// 현재 행을 삭제합니다.
var tr = target.parentElement.parentElement.remove();
// 현재 요소의 부모요소는 parentElement로 접근할 수 있습니다.
}
</script>
</body>
</html>