ํ์ต ๋ด์ฉ
์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ
- ์ด๋ฒคํธ ํธ๋ค๋ฌ (์ด๋ฒคํธ๋ช ์์ on์ด ๋ถ๋๋ค.)
: ์ด๋ฒคํธ์ ์ฐ๋ฆฌ๊ฐ ์ค๋นํ ํ๋ก๊ทธ๋จ์ ์ฐ๊ฒฐํด ์ฃผ๋ ์ญํ
ex )
onload : ํ์ด์ง๊ฐ ๋ก๋๋ ๋
onblur : ํฌ์ปค์ค๊ฐ ํด์ง๋ ๋
onchange : ์ ๋ ฅ ๊ฐ์ด ๋ณ๊ฒฝ๋์์ ๋
onMouseDown : ๋ง์ฐ์ค ๋ฒํผ์ ๋๋ฅด๊ณ ์์ ๋
onMouseUp : ๋ง์ฐ์ค๋ฅผ ๋์์ ๋
onMouseOver : ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ค ๋์์ ๋
onMouseOut : ๋ง์ฐ์ค๋ฅผ ๋ฐ๊นฅ์ผ๋ก ์ด๋ํ์ ๋
- ์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ ๊ฐ์ฒด
scroll : ํ์ด์ง ์คํฌ๋กค ์ด๋
keydown : ํค๋ฅผ ๋๋ฆ
onkeypress : ํค๊ฐ ๋๋ ค์ ๋ฌธ์๊ฐ ์ฐ๊ฒฐ๋์์ ๋
- DOM : Document Object Model
๊ฐ tag๋ฅผ ์ ๊ทผํ๊ธฐ ์ํ Object
๊ทธ Object๋ฅผ ์ ๊ทผํ๊ธฐ ์ํ ํจ์
- childNodes : ์์ ๋ ธ๋ ๋ชจ์ ๋ฐํ
function func() {
let text = document.getElementById('demo').childNodes[0].nodeValue;
alert(text);
}
-> 'demo' id๋ฅผ ๊ฐ์ง 0๋ฒ์ง ํ๊ทธ๋ฅผ ๊ฐ์ ธ์จ๋ค.
(nodeValue : ํด๋น ๋ ธ๋์ Value๊ฐ ๋ฐํ)
- select์์ childnode ๊ฐ์
<select id="car"> <!-- 1 -->
<option>benz</option> <!-- 2 3 -->
<option>BMW</option> <!-- 4 5 -->
<option>volvo</option> <!-- 6 7 -->
</select>
<button type="button" onclick="cars()">์๋์ฐจ ์ ํ</button>
<script type="text/javascript">
function cars() {
let carName = document.getElementById('car').childNodes;
alert(carName[3].text);
}
</script>'car'์ childnode ์๋ ์ด 7๊ฐ๊ฐ ์๋ค.
carName[1] = benz, carName[3] = BMW, carName[5] =volvo
๊ฐ ๋์ค๊ณ .
๋๋จธ์ง๋ 0, 2, 4, 6๋ฒ์ง๋ undefined๊ฐ ๋์จ๋ค.
- appendChild(๋ค), insertChild(์)
ํน์ ๋ ธ๋์ ์, ๋ค๋ก ๊ฐ์ ๋ฃ์ ๋ ์ฌ์ฉํ๋ ํจ์
<div id="div1">
<p id="p1">์ฒซ๋ฒ์งธ pํ๊ทธ</p>
<p id="p2">๋๋ฒ์งธ pํ๊ทธ</p>
</div>
<button type="button" onclick="appendfunc()">๋ค์ ์ถ๊ฐ</button>
<button type="button" onclick="insertfunc()">์์ ์ถ๊ฐ</button>
<button type="button" onclick="deletefunc()">์ญ์ </button>
<script type="text/javascript">
function appendfunc() {
let ptag = document.createElement('p'); //<p></p> ์ถ๊ฐ
//ํ
์ด๋ธ ์ถ๊ฐํ ๋ ์ข์
let textNode = document.createTextNode("์๋ก์ด pํ๊ทธ"); //๋ฌธ์์ด
ptag.appendChild(textNode); // <p>์๋ก์ด ํ๊ทธ</p>
//appendChild() : ํ ๋
ธ๋๋ฅผ ํน์ ๋ถ๋ชจ ๋
ธ๋์ ์์ ๋
ธ๋ ๋ฆฌ์คํธ ์ค ๋ง์ง๋ง ์์์ผ๋ก ๋ถ์ธ๋ค.
let element = document.getElementById("div1"); //์์ฑ๋ ์์น ์ง์ ํ๋ ๊ณผ์
element.appendChild(ptag);
}
function insertfunc() {
let h3tag = document.createElement('h3');
let textNode = document.createTextNode("์๋ก์ด h3ํ๊ทธ");
h3tag.appendChild(textNode);
let element = document.getElementById("div1");
let = elementBefore = document.getElementById("p2");
element.insertBefore(h3tag, elementBefore);
}
function deletefunc() {
let element = document.getElementById("div1");
let removeElement = document.getElementById("p2");
element.removeChild(removeElement);
}
- ์ซ์ 2๊ฐ๋ฅผ ์ ๋ ฅํ๋ฉด ๊ณ์ฐํด์ฃผ๋ ๋์ ํ ์ด๋ธ ๋ง๋ค๊ธฐ
๋ก์ฐ ์์ฑํ์ ์๋ก์ด ๊ฐ์ ๋ฐ์์ ๊ณ์ฐ์ ๊ฐ๋ฅํ์ผ๋, ๋ค๋ ์์ฑ ํ์ ์ด์ ์ ๋ก์ฐ์์ ๊ณ์ฐ์ด ๋์ง ์์๋ค.
์ธ๋ฑ์ค ๋๋ฒ๋ฅผ ๊ฐ์ฅ ๋ง์ง๋ง์ ๋ง๋ค์ด์ง ๋ก์ฐ์ ๋๋ฒ๋ก ์ ํด๋์๊ธฐ ๋๋ฌธ์ ๋ง์ง๋ง ๋ก์ฐ์์๋ง ๊ฐ์ด ์์ฑ๋์๋ค.
๋์ ํ ์ด๋ธ์์ ๊ฐ ๋ก์ฐ ํด๋ฆญ์ ํด๋น ๋ก์ฐ์ ์ธ๋ฑ์ค๋ฅผ ์ฐพ๋ ๋ฐฉ๋ฒ์ ๊ณต๋ถํด๋ด์ผ๊ฒ ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
width: 400px;
border : 1px solid #444444;
text-align: center;
}
tr, td{
border : 1px solid #444444;
width: 100px;
height: 20px;
}
th{
border : 1px solid #444444;
background-color: #afafaf;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<th>์ฒจ์</th>
<th>a</th>
<th>b</th>
<th>axb์ ๊ณ์ฐ</th>
</tr>
<tr id="myTr">
<th id="myRowNum">0</th>
<td id="aVal" onclick="insertVal()"></td>
<td id="bVal" onclick="insertVal2()"></td>
<td id="result"><button type="button" onclick="result()">๊ณ์ฐ๊ฒฐ๊ณผ</button></td>
</tr>
</table>
<br>
<button type="button" onclick="appendfunc()"> ์ถ๊ฐ </button>
<script type="text/javascript">
let numCount = 0;
var btn = document.getElementsByTagName("button");
var tdList = document.getElementsByTagName('td');
var thList = document.getElementsByTagName('th');
// alert(thList[4].innerHTML);
function appendfunc() {
numCount++;
/*
let table = document.getElementById('myTable');
let newRow = table.insertRow();
let cell_num = newRow.insertCell(0);
let cell_a = newRow.insertCell(1);
let cell_b = newRow.insertCell(2);
let cell_ = newRow.insertCell(3);
*/
let myTable = document.getElementById("myTable"); //ํ
์ด๋ธ
let tr = document.createElement('tr'); //๋ก์ฐ
let th = document.createElement('th'); //์ธ๋ฑ์ค๋ฒํธ
let count = document.createTextNode(numCount);
th.appendChild(count);
let td = document.createElement('td'); //์ฒซ๋ฒ์งธ์ซ์
td.onclick = insertVal;
let td2 = document.createElement('td'); //๋๋ฒ์งธ์ซ์
td2.onclick = insertVal2;
let td3 = document.createElement('td'); //๊ฒฐ๊ณผ๋ฒํผ
let btn = document.createElement('button');
let text = document.createTextNode("๊ณ์ฐ๊ฒฐ๊ณผ");
td3.appendChild(btn);
btn.appendChild(text);
btn.onclick= result;
tr.appendChild(th);
tr.appendChild(td);
tr.appendChild(td2);
tr.appendChild(td3);
myTable.appendChild(tr);
}
function insertVal() {
let a = parseInt(prompt("๊ฐ์ ์
๋ ฅํ์ธ์"));
tdList[3*numCount].innerHTML = a;
}
function insertVal2() {
let a = parseInt(prompt("๊ฐ์ ์
๋ ฅํ์ธ์"));
tdList[3*numCount+1].innerHTML = a;
}
function result() {
// let select = document.querySelector('.myRowNum');
// let index = tr.rowIndex -1;
// alert(index);
let r = tdList[3*numCount].innerHTML * tdList[3*numCount+1].innerHTML;
tdList[3*numCount+2].innerHTML = r;
}
</script>
</body>
</html>
'๐ป ๊ฐ๋ฐ > ๐ TIL (Today I Learned)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 21.03.09 TIL(D+39 XML, JSON) (0) | 2021.03.09 |
|---|---|
| 21.03.05 TIL(D+37 jQuery) (0) | 2021.03.05 |
| 21.03.03 TIL(D+35 JavaScript) (0) | 2021.03.03 |
| 21.03.02 TIL(D+34 JavaScript) (0) | 2021.03.02 |
| 21.02.22 TIL(D+29 JDBC ํ์ฉ AccountBook ๋ง๋ค๊ธฐ) (0) | 2021.02.22 |
