본문 바로가기
개발자/백엔드 웹 개발자 과정(국비)

221230_자바스크립트(4)

by 초응 2022. 12. 30.
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 <script>
 function time_display(){
	var now = new Date();
	var h = now.getHours();
	var m = now.getMinutes();
	var s = now.getSeconds();
	var str = h+'시 '+m+'분 '+s+'초'; 
	document.fm.timer.value =str;

	window.setTimeout('time_display()',1000);
 }
 </script>

 </head>
 <body onload ="time_display();">
 <form name="fm">
 <label>현재 시간:</label>
 <input type = "text" name="timer">

 </form>
  
 </body>
</html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
function show(){
	var str = document.fm.str.value;
	var ch = document.fm.ch.value;
	var count = 0;

	for(var i=0;i<str.length;i++){
		if(str.charAt(i)==ch){
			count ++;
		}
	}
	var msg = '메시지: '+ch+'는 총'+count+'개 입니다.';

	document.all.count_char.innerText = msg;
}
  </script>
 </head>
 <body>
 <h1>문자열내 문자 개수찾기</h1>
	  <form name="fm">
		  <label>문장 : </label>
		  <input type = "text" name ="str"><br/>
		  <label>문자 : </label>
		<input type = "text" name = "ch"><br/>
		<input type = "button" value= "문자 개수 확인"  onclick="show();" >

	 <div id="count_char">
	 메시지 :
	</div>
	  </form>
 </body>
</html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
<script>
var msg = '지각, 결석을 하지 맙시다...    ';
var len = msg.length;

function show(){
	document.fm.notice.value = msg;
	msg = msg.substring(1,len)+msg.charAt(0);
	
	window.setTimeout('show()',200);
}
</script>
 </head>
 <body onload = "show();">
 <form name = "fm">
	<label>공지사항 : </label>
	<input type = "text" name = "notice" size = "40">
 </form>
 </body>
</html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
	 var msg = '지각, 결석을 하지 맙시다....   ';
	 var count = 0;
	var temp ='';
	function show(){
		count ++;

		document.fm.notice.value = msg.substring(0,count);
		if(count == msg.length){
			count=0;
		}
		window.setTimeout('show();',200);
	}
  </script>
 </head>
 <body onload = "show();">
  <form name = "fm">
	  <label>공지사항: </label>
	  <input type = "text" name = "notice" size="40">
  </form>
 </body>
</html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <div style = "border:1px solid gray; width:300px; height:250px;">
	  <h1 style = "text-align:center;">공 지 사 항</h1>
	  <h3>1. 지각을 하지 맙시다.</h3>
	  <h3>2. 결석을 하지 맙시다.</h3>
	  <h3>3. 복습을 철저히 합시다.</h3>
	  <h3>4. 건강관리 유의합시다.</h3>
  </div>
  <!--input type ="button" value ="닫기" onclick = "window.self.close();"-->

  <a href="javascript:window.self.close();">[닫기]</a>
 </body>
</html>
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 <script>
 function popup_open(){
	window.open('popup.html','popup','width =350; height=300; top =100 left = 300');
	/*
	형식
	window.open(url정보 ,'식별자','옵션');
	-식별자는 생략 가능.
	-옵션
	1. width/height
	2. top/left
	(menubar/location/toolbar/status...는 요즘 사용 안함)

	*/
 }
 </script>
 </head>
 <body onload ="popup_open();">
  <h1>해당 페이지는 main페이지입니다.</h1>
 </body>
</html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
  function open_findaddr(){
	window.open('findaddr.html','findaddr', 'width =450, height=160');
  }
  </script>
 </head>
 <body>
  <form name = "joinform">
	<label> 우편번호 </label><input type ="text" name ="zip" size ="5" readonly>
	<a href="javascript:open_findaddr();">[주소검색]</a>
	<br/>
	<label> 기본주소 </label><input type = "text" name = "addr1" size ="45" readonly><br/>
	<label> 상세주소 </label><input type = "text" name = "addr2" size ="45"><br/>
  </form>
 </body>
</html>
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
  function auto_write(){
	//1. 사용자가 입력한 값 가져오기.
	var fulladdr = document.find.address.value;
	
	//2. 데이터 쪼개기
	var zip = fulladdr.substring(1,6);
	var addr = fulladdr.substring(8);
	
	//3. 본페이지에 데이터 넘기기
	opener.document.joinform.zip.value=zip;
	opener.document.joinform.addr1.value=addr;
	window.self.close();
  }
/*Internet Explorer로 실행하기.*/
  </script>
 </head>
 <body>
  <form name = "find">
<fieldset>
<legend>주소검색</legend>
<label>주소</label>
<input type ="text" name = "address" size ="45"><br>
<input type ="button" value = "주소확인" onclick = "auto_write();">
</fieldset>
  </form>
 </body>
</html>