자바스크립트

프로그래밍/JavaScript 자바스크립트 2021. 10. 6.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function getElements(attrName, attrValue) {
	//  모든 요소
	var elements = document.getElementsByTagName("*");
	var founds = [];
	
	for(var i=0; i<elements.length; i++) {
		if(elements[i].hasAttribute(attrName) && elements[i].getAttribute(attrName).toLowerCase() === attrValue.toLowerCase()) {
			founds.push(elements[i]);		
		}
	}
	
	return founds;
}

function result() {
	var s;
	
	// id로 접근
	var name = document.getElementById("name").value;
	
	// name으로 접근
	var age = document.getElementsByName('age')[0].value;

	// tag로 접근
	var birth = document.getElementsByTagName("input")[2].value;
	
	// 선택자로 접근
	// var chk = document.querySelector("input[type=checkbox]").checked;
	// 속성으로 접근
	var chk = getElements("type", "checkbox")[0].checked;
	
	// class 속성으로 접근
	var tel = document.getElementsByClassName("telClass")[0].value; 
		
	s = "<p>이름 : " + name +"</p>";
	s += "<p>나이 : " + age +"</p>";
	s += "<p>생년월일 : " + birth +", 양력:"+chk+"</p>";
	s += "<p>전화번호 : " + tel +"</p>";
	
	// document.getElementById("layout").innerText = s;
	// document.getElementById("layout").innerHTML = s;
	// 선택자로 접근(클래스등 동일한 이름의 선택자가 두개이상이면 처음 객체만 찾음)
	document.querySelector("#layout").innerHTML = s;
	
	// 스타일 변경
	var inputs = document.getElementsByTagName("input");
	for(var i = 0; i<inputs.length; i++) {
		if(inputs[i].type === "text") {
			inputs[i].style.border = "1px solid red";
		}
	}
	
	// document.getElementById("layout").style.background = '#ff0';
	// background-color
	document.getElementById("layout").style.backgroundColor = '#ff0';
}
</script>
</head>
<body>

<h3>DOM</h3>

<div>
	<p>이름 : <input type="text" id="name"> </p>
	<p>나이 : <input type="text" name="age"> </p>
	<p>생년월일 : <input type="text"> <input type="checkbox"> 양력 </p>
	<p>전화번호 : <input type="text" class="telClass"> </p>
    <p>
    	<button type="button" onclick="result()">확인</button>
    </p>	
</div>

<div id="layout"></div>

</body>
</html>

요소에 접근하기 위한 방법은 엄청 다양하다.

document.getElementsByTagName("*"); 을 통해서 모든 요소에 접근 할 수 있고 아니면 특정 태그나 클래스 이름 아이디 등등 접근할 방법이 많다.

document.getElementById("name").value; 아이디로 접근

document.getElementsByName('age')[0].value; 네임으로 접근

document.getElementsByClassName("telClass")[0].value; 클래스로 접근

querySelector("#layout").innerHTML = s; 쿼리 셀렉터로 접근

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function fun() {
	// alert("음 언제 배웠지 ???");
	alert(event.currentTarget.firstChild.nodeValue);
}

// 속성 값 및 자식 노드수 알아보기
function sub1() {
	var str;
	var div = document.getElementById("layout");
	
	// 속성값 가져오기
	str = div.getAttribute("style");
	
	// 자식 노드 정보(childNodes:문자열,공백,엔터등도검색)
	// str += "\n자식수 : " + div.childNodes.length; // 처음실행시:7
	// console.log(div.childNodes); // [text, p, text, p, text, p, text]
	// 자식 노드 정보(children:태그만)
	str += "\n자식수 : " + div.children.length; // 처음실행시:3
	console.log(div.children); // [p, p, p]
	
	alert(str);
}

// 노드를 마지막에 추가
function sub2() {
	var div = document.getElementById("layout");
	
	var node = document.createElement("p");
	node.setAttribute("onclick", "fun();") // click 이벤트 추가	
	var textNode = document.createTextNode("마지막 !!!");
	node.appendChild(textNode);
	div.appendChild(node);
}

// 노드를 특정 노드 앞에 추가
function sub3() {
	var div = document.getElementById("layout");
	
	var node = document.createElement("p");
	var textNode = document.createTextNode("앞 !!!");
	node.appendChild(textNode);
	div.insertBefore(node, div.childNodes[0]);
	// div.insertBefore(node, div.childNodes[1]);
	// div.insertBefore(node, div.children[1]);
}

// 노드 삭제
function sub4() {
	var div = document.getElementById("layout");
	if(div.childNodes.length > 1) {
		div.removeChild(div.childNodes[1]);
	}
}

// 스타일 없애기
function sub5() {
	var div = document.getElementById("layout");
	// div.style.border = "none";
	div.style.removeProperty("border");
}

// 처음 p 태그 세개를 클릭하면 요소의 text 값 가져오기
window.onload = function(){
	var ps = document.getElementById("layout").children;
	for(var i=0; i<ps.length; i++) {
		ps[i].addEventListener("click", function(){
			alert(this.firstChild.nodeValue); // 태그의 텍스트 가져오기
		});
	}
};

</script>

</head>
<body>

<h3>노드 추가 및 삭제</h3>

<div id="layout" style="width:300px; height: 300px; border: 1px solid #f00;">
	<p>자바</p>
	<p>안드로이드</p>
	<p>프레임워크</p>
</div>
<hr>

<div>
	<p>
		<button type="button" onclick="sub1()">노드정보</button>
		<button type="button" onclick="sub2()">노드추가</button>
		<button type="button" onclick="sub3()">특정노드앞에추가</button>
		<button type="button" onclick="sub4()">노드삭제</button>
		<button type="button" onclick="sub5()">스타일없애기</button>
	</p>
</div>

</body>
</html>

속성 값 가져오기 = getAttribute() 먼저 요소를 가져온 변수에 대입 해야함.

childNodes.length 랑 children.length의 결과는 다르다.

공백이나 엔터 같은것들도 포함 하는게 childNodes

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>노드 찾기</h3>
<div>
	<p><a>HTML</a></p>
	<p class="css"><a>CSS</a></p>
	<p>
		<a>javascript</a>
		<span>jquery</span>
	</p>
</div>
<hr>

<div class="pp">
	<div class="p">
		<div class="c1">javascript</div>
		<div class="c2">css</div>
	</div>
</div>

<script type="text/javascript">
// 모든 p 태그
var list = document.getElementsByTagName("p");

// 자식검색 : text(공백,문자열,엔터등), tag 검색
var c1 = list[2].childNodes;
// 자식검색 : tag만 검색
var c2 = list[2].children;
// a태그만 검색
var c3 = list[2].getElementsByTagName("a");

console.log(c1); // [text,a,text,span]
console.log(c2); // [a,span]
console.log(c3); // [a]

var child = document.querySelector(".c1");
// 부모 검색
var p1 = child.parentNode; // 부모노드, 빈공간도 포함
var p2 = child.parentElement; // 부모노드만
console.log(p1);
console.log(p2);

// 형제
var s1 = child.nextSibling; // 텍스트(빈공간)도 포함
var s2 = child.nextElementSibling; // 태그만

console.log(s1); // #text
console.log(s2); // <div class="c2">css</div>

// 텍스트
var s3 = s2.firstChild.nodeValue;
console.log(s3);

</script>


</body>
</html>

검색을 위해서는 배열을 사용해야함.

모든 p 태그를 가져와서 리스트에 담으면 리스트가 되는데

그걸 인덱스를 활용해서 뽑아냄

== 공부 해야 할 소스

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
	margin: 0; padding: 0;
    box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
a:active, a:hover {
	text-decoration: underline;
	color: #F28011;
}

.btn {
	color: #333;
	border: 1px solid #333;
	background-color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 500;
	cursor:pointer;
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
.btn:hover, .btn:active, .btn:focus {
	background-color: #e6e6e6;
	border-color: #adadad;
	color:#333;
}
.boxTF {
	border: 1px solid #999;
	padding: 5px 5px;
	background-color: #fff;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
.selectField {
	border: 1px solid #999;
	padding: 4px 5px;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}

textarea:focus, input:focus {
	outline: none;
}

.title {
	width:100%;
	font-size: 16px;
	font-weight: bold;
	padding: 13px 0;
}

.container {
    width: 800px;
    margin: 30px auto;
}

.table {
	width: 100%; border-spacing: 0; border-collapse: collapse;
}
.table tr th {
	padding: 7px 0;
	background: #eee;
}

#tbScore input {
   /* border:1px solid #999; */
	border: none;
    padding:5px 5px;
    width:100%;
    height: 30px;
}

#tbScore span {
	cursor: pointer;
}

tr.over {background: #f5fffa;}
</style>

<script type="text/javascript">
function isValidDateFormat(data){
    var regexp = /[12][0-9]{3}[\.|\-|\/]?[0-9]{2}[\.|\-|\/]?[0-9]{2}/;
    if(! regexp.test(data))
        return false;

    regexp=/(\.)|(\-)|(\/)/g;
    data=data.replace(regexp, "");
    
	var y=parseInt(data.substr(0, 4));
    var m=parseInt(data.substr(4, 2));
    if(m<1||m>12) 
    	return false;
    var d=parseInt(data.substr(6));
    var lastDay = (new Date(y, m, 0)).getDate();
    if(d<1||d>lastDay)
    	return false;
		
	return true;
}

function isValidNumberFormat(data){
	var format=/^(\d+)$/;
	return format.test(data);
}

function isValidScoreFormat(data){
	if(! isValidNumberFormat(data)) {
		return false;
	}
	
	if(parseInt(data)<0||parseInt(data)>100) {
		return false;
	}
	
	return true;
}

function init() {
	// 이벤트 등록
	var inputForm = document.getElementById('inputForm'); 
    var inputs = inputForm.getElementsByTagName('input'); 
    for (var i = 0; i < 6 /*inputs.length*/; i++ ) {
    	inputs[i].onkeypress = function(){ fnReturn('inputForm'); };
    	inputs[i].onkeyup = function(){ fnKeyup('inputForm'); };
    }
}

function fnReturn(id) {
	var inputForm = document.getElementById(id); 
    var inputs = inputForm.getElementsByTagName('input'); 
    var obj;
    
    // 이벤트를 발생시킨 객체
    if (event.srcElement) obj = event.srcElement;
    else if (event.target) obj = event.target;
    
    if (event.keyCode == 13) {
    	for (var i = 0; i < inputs.length; i++ ) {
			if(i<5 && obj==inputs[i]) {
				inputs[i+1].focus();
				break;
			} else if(i==5 && obj==inputs[i]) {
			    if(id=="inputForm")	
					insertScore();
			    else
			    	updateOk(id);
				break;
			}
    	}
    }
}

function fnKeyup(id) {
	var inputForm = document.getElementById(id); 
    var inputs = inputForm.getElementsByTagName('input');
    var obj;
    if (event.srcElement) obj = event.srcElement;
    else if (event.target) obj = event.target;
    
    var idx = 0;
   	for (var i = 0; i < inputs.length; i++ ) {
		if(obj==inputs[i]) {
				idx = i;
				break;
		}
    }
   	
    if(idx>=3 && idx<=5) {
    	var kor=inputs[3].value.trim();
    	var eng=inputs[4].value.trim();
    	var mat=inputs[5].value.trim();

    	var k = isValidScoreFormat(kor) ? parseInt(kor):0;
    	var e = isValidScoreFormat(eng) ? parseInt(eng):0;
    	var m = isValidScoreFormat(mat) ? parseInt(mat):0;
    	
    	var tot=k+e+m;
    	var ave=Math.floor(tot/3);
    	
    	if(!kor && !eng && !mat) {
    		tot="";
    		ave="";
    	}
    	
    	inputs[6].value = tot;
    	inputs[7].value = ave;
    }
}

window.addEventListener('load', function() {
	init(); 
}, false);

function check(id) {
	var inputForm = document.getElementById(id); 
    var inputs = inputForm.getElementsByTagName('input');
    var s;
    
   	for (var i = 0; i < inputs.length; i++ ) {
   		s=inputs[i].value.trim();
   		if(! s) {
   			alert("값을 입력 하세요.");
		    inputs[i].focus();
		    return false;
   		}
   		
   		if(i==2 && !isValidDateFormat(s)) {
   			alert("날짜의 형식이 잘못 되었습니다.");
		    inputs[i].focus();
		    return false;
   		}
   		
		if(i>=3 && i<=5 && (! isValidScoreFormat(s))) {
		    alert("점수를 정확히 입력 하세요.");
		    inputs[i].focus();
			return false;
		}
    }
   	
   	return true;
}

var nID=1;
function insertScore() {
	if(! check('inputForm')) {
		return;
	}
 
	var inputForm = document.getElementById('inputForm'); 
    var inputs = inputForm.getElementsByTagName('input');
    
	var tbScore = document.getElementById('tbScore');
    var tr = tbScore.getElementsByTagName('tr');
    if(tr.length==1) {
    	nID=1;
    }
    nID++;

	 var id="row"+nID;
	 var row, cell, span;
	 var tot, ave, s;

	 row=document.createElement("tr");
	 row.setAttribute("id", id);
	 row.setAttribute("height", "30");
	 row.setAttribute("align", "center");
	 row.onmouseover=function() {this.setAttribute("class", "over");};
	 row.onmouseout=function() {this.removeAttribute("class");};
	 
	 // 학번, 이름, 생년월일, 국어, 영어, 수학
	 tot=0;
	 for(var i=0; i<6; i++) {
		 s=inputs[i].value.trim();
		 cell=document.createElement("td");
		 cell.appendChild(document.createTextNode(s));
		 row.appendChild(cell);
		 
		 if(i>=3&&i<=5) {
			tot += parseInt(s);
		 }
		 inputs[i].value="";
	 }
	 ave=Math.floor(tot/3);
	 
	 inputs[6].value="";
	 inputs[7].value="";
	 inputs[0].focus();
	 
	 cell=document.createElement("td");
	 cell.appendChild(document.createTextNode(tot));
	 row.appendChild(cell);
	 
	 cell=document.createElement("td");
	 cell.appendChild(document.createTextNode(ave));
	 row.appendChild(cell);
	 
	 cell=document.createElement("td");
	 span=document.createElement("span");
	 span.appendChild(document.createTextNode("수정"));
	 span.onclick=function() { updateScore(id); };
	 // span.setAttribute("style", "cursor:pointer;");
	 cell.appendChild(span);
	 cell.appendChild(document.createTextNode(" | "));
	 span=document.createElement("span");
	 span.appendChild(document.createTextNode("삭제"));
	 span.onclick=function() { deleteScore(id); };
	 // span.setAttribute("style", "cursor:pointer;");
	 cell.appendChild(span);
	 row.appendChild(cell);
	 
	 tbScore.appendChild(row);
}

var arr=[];
function updateScore(id) {
	var row=document.getElementById(id);
	var tds = row.getElementsByTagName("td");
	var str, s, input;
	
	for(var i=0; i<tds.length; i++) {
		if(i != tds.length-1) {
		    arr[i] = tds[i].innerText;
		    s="";
		    if(i==6||i==7)
			    s=" readonly='readonly' style='border: none; text-align: center;' "
			else
			    s=" onfocus='this.select();' ";
			    
		    tds[i].innerText = "";
		    str = "<input type='text' value='" + arr[i] + "'" + s +">";
		    tds[i].innerHTML = str;
		    input = tds[i].getElementsByTagName('input')[0];
	    	input.onkeypress = function(){ fnReturn(id); };
	    	input.onkeyup = function(){ fnKeyup(id); }
		} else {
			tds[i].innerText = "";
			str = "<span onclick='updateOk(\""+id+"\");'>완료</span>&nbsp;|&nbsp;<span onclick='updateCancel(\""+id+"\");'>취소</span>";
			tds[i].innerHTML = str;
		}
	}
}

function updateOk(id) {
	if(! check(id)) {
		return;
	}
	
	var row=document.getElementById(id);
	var tds = row.getElementsByTagName("td");
	var input, str;
	
	for(var i=0; i<tds.length; i++) {
		if(i != tds.length-1) {		
		    input = tds[i].getElementsByTagName('input')[0];
		    tds[i].innerText = input.value;
		} else {
			tds[i].innerText = "";
			str = "<span onclick='updateScore(\""+id+"\");'>수정</span>&nbsp;|&nbsp;<span onclick='deleteScore(\""+id+"\");'>삭제</span>";
			tds[i].innerHTML = str;
		}
	}
}

function updateCancel(id) {
	var row=document.getElementById(id);
	var tds = row.getElementsByTagName("td");
	
	for(var i=0; i<tds.length; i++) {
		if(i != tds.length-1) {
		    tds[i].innerText = "";
		    tds[i].innerText = arr[i];
		} else {
			tds[i].innerText = "";
			str = "<span onclick='updateScore(\""+id+"\");'>수정</span>&nbsp;|&nbsp;<span onclick='deleteScore(\""+id+"\");'>삭제</span>";
			tds[i].innerHTML = str;
		}
	}	
}

function deleteScore(id) {
	if(! confirm("데이터를 삭제 하시겠습니까 ? ")) {
		return;
	}
	
	var tb= document.getElementById("tbScore");
	var row=document.getElementById(id);
	tb.removeChild(row);
}
</script>

</head>
<body>

<div class="container">

	<div class="title">
	   <h3><span>|</span> 성적 처리</h3>
	</div>

	<form name="scoreForm" method="post">
	<table class="table" border="1">
	<thead>
		<tr>
			<th width="80">학번</th>
			<th width="100">이름</th>
			<th width="100">생년월일</th>
			<th width="80">국어</th>
			<th width="80">영어</th>
			<th width="80">수학</th>
			<th width="80">총점</th>
			<th width="80">평균</th>
			<th>변경</th>
		</tr>
	</thead>
	
	<tbody id="tbScore">
		<tr id="inputForm" align="center">
			<td><input type="text" name="hak" id="hak" onfocus="this.select();"></td>
			<td><input type="text" name="name" id="name" onfocus="this.select();"></td>
			<td><input type="text" name="birth" id="birth" onfocus="this.select();"></td>
			<td><input type="text" name="kor" id="kor" onfocus="this.select();"></td>
			<td><input type="text" name="eng" id="eng" onfocus="this.select();"></td>
			<td><input type="text" name="mat" id="mat" onfocus="this.select();"></td>
			<td><input type="text" name="tot" id="tot" readonly="readonly" style="border: none; text-align: center;"></td>
			<td><input type="text" name="ave" id="ave" readonly="readonly" style="border: none; text-align: center;"></td>
			<td>
				<button type="button" class="btn" onclick="insertScore();" style="width: 100%;">등록하기</button>
			</td>
		</tr>
	</tbody>
	
	</table>
	</form> 
</div>

</body>
</html>

각 칸에 대한 요소들 확인하기

스타일 및 CSS 확인

정규식 확인

스크립트 흐름 파악

공부 해야함

저작자표시

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

자바스크립트 - 반응형 웹 (0)	2021.10.07
자바스크립트 - 파일 File (1)	2021.10.06
자바스크립트 - 정규식 (0)	2021.10.06
자바스크립트 - Form 폼 (양식) / 예제 (0)	2021.10.06
자바스크립트 - Event 이벤트 핸들러 (0)	2021.10.02

ABOUT ME

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

티스토리툴바

ABOUT ME

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

관련글 관련글 더보기

티스토리툴바