document api 실습_js

1.
backColor 아이디를 가진 버튼을 클릭 시 body 태그의 배경 색상이
'빨강','초록','파랑'으로 순환되며 배경 색상이 변경되도록 하여라.

<button type="button" id="backColor">배경색상전환</button>

2.
아래의 화면의 탭 기능을 구현하도록 하여라.

<button type="button" class="tab">탭1</button>
<button type="button" class="tab">탭2</button>
<button type="button" class="tab">탭3</button>
<div class="tab-contant">콘텐츠1</div>
<div class="tab-contant" style="display:none">콘텐츠2</div>
<div class="tab-contant" style="display:none">콘텐츠3</div>

3.
아래의 버튼을 클릭 시 name 속성에 userName이라는 값을 가진 input 태그가 body 태그 하위의 제일 마지막에 생성될 수 있도록 코드를 작성하고 실행하시오.
(input 태그는 사용자가 사용자명을 입력 할 수 있어야 한다.)

<button type="button" id="addHtml01">객체생성 01</button>

4.
아래의 버튼을 클릭 시 테이블을 행이 추가 될 수 있도록 하여라.

<table border="1">
<thead>
	<tr>
		<th>제목</th>
	</tr>
</thead>
<tbody id="addRow">
	<tr>
		<td>공지사항</td>
	</tr>
</tbody>
</table>
<button type="button" id="addRowBtn">버튼</button>

5.
아래의 버튼 클릭 시 해당 행의 input 태그 값을 ksmart로 변경하도록 하시오

<table>
	<tbody>
		<tr>
			<td><input type="text" value="한국스마트정보교육원"></td>
			<td><button type="button" class="changeTextBt">변경</button></td>
		</tr>
		<tr>
			<td><input type="text" value="한국스마트정보교육원"></td>
			<td><button type="button" class="changeTextBt">변경</button></td>
		</tr>
		<tr>
			<td><input type="text" id="test" value="한국스마트정보교육원"></td>
			<td><button type="button" class="changeTextBt">변경</button></td>
		</tr>
	</tbody>
</table>

6.

버튼 클릭 시 해당 행을 제거하시오.

<ul>
	<li><button type="button" class="removeBtn">제거</button></li>
	<li><button type="button" class="removeBtn">제거</button></li>
	<li><button type="button" class="removeBtn">제거</button></li>
</ul>

7.
esc 키를 눌렀을 경우 'esc키는 사용 하시면 안됩니다.' 라는 문구를 띄우는 코드를 작성하도록 하시오.

8.
아래의 input 태그를 텍스트 입력 후 엔터키 눌렀을 경우 'ksmart.or.kr' 웹사이트로 이동시키도록 하시오.

<form id="searchForm" action="http://ksmart.or.kr" method="get">
	<input type="text" id="moveInput">
<input type="text" id="moveInput" name="userName">
</form>

엔터 눌렀을 때 

 

9.
추가 버튼을 클릭 시 행 추가, 삭제 버튼 클릭 시 해당 행 제거를 하도록 하시오.

<table border="1" id="myTable">
	<tr>
	<td>
		<input type="text">		
	</td>
	<td>
		<button type="button" class="delBtn">제거</button>
	</td>
	</tr>
</table>
<button type="button" id="addRowBtn">추가</button>

1. 답

<button type="button" id="backColor">배경색상전환</button>
<script type="text/javascript">
	var body=document.getElementsByTagName('body');
	var backColor=document.getElementById('backColor');
	var color=['#f00','#0f0','#00f'];
	var cnt=0;
	backColor.onclick=function(){
		body[0].style.backgroundColor=color[cnt];
		cnt++;
		if(color.length==cnt){cnt=0};
	}
</script>

2. 답

<button type="button" class="tab">탭1</button>
<button type="button" class="tab">탭2</button>
<button type="button" class="tab">탭3</button>
<div class="tab-contant">콘텐츠1</div>
<div class="tab-contant" style="display:none">콘텐츠2</div>
<div class="tab-contant" style="display:none">콘텐츠3</div>
<script type="text/javascript">
	var tabArray = document.getElementsByClassName('tab');
	var tabContantArray = document.getElementsByClassName('tab-contant');
	for (var i = 0; i < tabArray.length; i++) {
		(function(j, tab) {
			tab.onclick = function() {
				for (var x = 0; x < tabContantArray.length; x++) {
					tabContantArray[x].style.display='none';
				}
					tabContantArray[j].style.display = 'block';
			}
		})(i, tabArray[i]);

	}
</script>

3. 답

<button type="button" id="addHtml01">객체생성 01</button>
<script type="text/javascript">
	var addHtml01 = document.querySelector('#addHtml01');
	var body = document.querySelector('body');
	addHtml01.onclick = function () {
		var createInput = document.createElement('input');
		createInput.setAttribute('type', 'text');
		createInput.setAttribute('name', 'userName');

		body.appendChild(createInput);
	}	
</script>

4. 답

<table border="1">
<thead>
	<tr>
		<th>제목</th>
	</tr>
</thead>
<tbody id="addRow">
	<tr>
		<td>공지사항</td>
	</tr>
</tbody>
<button type="button" id="addRowBtn">버튼</button>
</table>
<script type="text/javascript">
	var addRowBtn=document.querySelector('#addRowBtn');
	var addRow=document.querySelector('#addRow');
	var tr=document.createElement('tr');
	var td=document.createElement('td');
	addRowBtn.onclick=function(){
		addRow.appendChild(tr);
		addRow.appendChild(td);
		td.innerText="바나나똥";
		td.style.color='red';
	}
</script>

5. 답

<table>
	<tbody>
		<tr>
			<td><input type="text" value="한국스마트정보교육원"></td>
			<td><button type="button" class="changeTextBt">변경</button></td>
		</tr>
		<tr>
			<td><input type="text" value="한국스마트정보교육원"></td>
			<td><button type="button" class="changeTextBt">변경</button></td>
		</tr>
		<tr>
			<td><input type="text" id="test" value="한국스마트정보교육원"></td>
			<td><button type="button" class="changeTextBt">변경</button></td>
		</tr>
	</tbody>
</table>
<script type="text/javascript">
	var changeTextBt = document.querySelectorAll('.changeTextBt');
	for(var i=0;i<changeTextBt.length;i++){
		changeTextBt[i].onclick=function(){
			var tr=this.parentElement.parentElement;
			var input=tr.querySelector('input');
			input.value='ksmart';
		}
	}
</script>

6. 답

<ul>
	<li><button type="button" class="removeBtn">제거</button></li>
	<li><button type="button" class="removeBtn">제거</button></li>
	<li><button type="button" class="removeBtn">제거</button></li>
</ul>
<script type="text/javascript">
	var Remove = document.querySelectorAll('.removeBtn');
	for (var i = 0; i < Remove.length; i++) {
		Remove[i].onclick = function () {
			this.parentElement.remove();
		}
	}
</script>

7. 답

<script type="text/javascript">
	document.addEventListener('keyup',function(e){
		console.log(e);
		if(e.keyCode==27){
			alert('esc키는 사용하시면 안됩니다.');
		}
	})
</script>

8. 답

<form id="searchForm" action="http://ksmart.or.kr" method="get">
	<input type="text" id="moveInput">
<input type="text" id="moveInput" name="userName">
</form>
<script type="text/javascript">
	var moveInput=document.querySelector('#moveInput');
	var searchForm=document.querySelector('#searchForm');
	moveInput.addEventListener('keyup',function(e){
		console.log(e);
		if(e.keyCode==13){
			searchForm.submit();
		}
	});
</script>

9. 답

<table border="1" id="myTable">
	<tr>
		<td>
			<input type="text">
		</td>
		<td>
			<button type="button" class="delBtn">제거</button>
		</td>
	</tr>
</table>
<button type="button" id="addRowBtn">추가</button>
<script type="text/javascript">
	var myTable = document.querySelector('#myTable');
	var addRowBtn = document.querySelector('#addRowBtn');

	addRowBtn.addEventListener('click', function () {
		var trClone = myTable.querySelector('tr').cloneNode(true);
		trClone.querySelector('input').value = '';
		console.log(trClone);
		myTable.appendChild(trClone);
	});

	myTable.addEventListener('click', function (e) {
		console.log(e.target)
		console.log(e.target.classList)
		//contains
		if (e.target.classList.contains('delBtn')) {
			if (myTable.querySelectorAll('tr').length > 1) {
				e.target.parentElement.parentElement.remove();
			} else {
				alert('더 이상 삭제 하실 수 없습니다.');
			}
		}
	});

</script>