본문 바로가기
공부/화면구현 UI

7월11일 - JavaScript 4

찡리 2019. 7. 11. 18:18

JavaScript

 

13. JavaScript 연습문제2 로또번호 

 

 문제) 1~45중에서 서로 겹치지 않게 6개 발생시킨 후 오름차순으로 정렬해서 각 텍스트 상자에 출력하시오 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>13_로또번호.html</title>
	<style></style>
</head>
<body>
	<h1>로또번호</h1>
	<hr>
	<form name="lottofrm" id="lottofrm">
		<input type="text" name="n0" id="n0" size="3" readonly>
		<input type="text" name="n1" id="n1" size="3" readonly>
		<input type="text" name="n2" id="n2" size="3" readonly>
		<input type="text" name="n3" id="n3" size="3" readonly>
		<input type="text" name="n4" id="n4" size="3" readonly>
		<input type="text" name="n5" id="n5" size="3" readonly>
		<hr>
		<input type="button" value="로또번호" onclick="lotto()">
	</form>
	<script>
	function lotto(){
		var lotto=[];
		var size=6;

		for(var a=0;a<size;a++){
			lotto[a]=parseInt((Math.random()*45)+1); 
			for(b=0; b<a; b++){  
				if(lotto[a]==lotto[b]){
					a--;       
					break;   
				}
			}
		}//for end
		
		lotto.sort(function(a,b){return a-b});
		//alert(lotto);

		for(var idx=0;idx<size;idx++){
			document.getElementById("n"+idx).value=lotto[idx];
		}//for end     

	}//lotto() end
	</script>
</body>
</html>

 

분석-> 로또번호 6개 나오는 for문에서 주의할 점, js에서의 정수형 전환표현은 parseInt로 쓴다. 

          로또번호를 출력하는 for문에서 주의할 점, 반대로 js에서의 정수형 표현은 자유롭다. 그러므로 n(x)의 x숫자를              idx로 줘서 식을 간단히 만들수 있다. 

 

 

14. JavaScript THIS

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>14_this.html</title>
	<style></style>
</head>
<body>
	<!--this: 자기 자신의 요소를 가리킴
		this는 폼컨트롤요소에서만 사용가능
		<a href="" oneclick="test5(this)"></a> 에러-->
	<form name="myform" id="myform" onsubmit="test5(this)">
	<!--<form>요소에서 this.form은 undefined 주의 !-->
		<input type="button" name="btn1" id="btn1" value="버튼1" onclick="test1()">
		<!--this 자신의 요소 , 나 자신을 가리킴-->
		<input type="button" name="btn2" id="btn2" value="버튼2" onclick="test2(this)">
		<!--this.value 자신의 요소가 가지고 있는 값-->
		<input type="button" name="btn3" id="btn3" value="버튼3" onclick="test3(this.value)">
		<!--this.form 자신의 요소가 속해있는 폼-->
		<input type="button" name="btn4" id="btn4" value="버튼4" onclick="test4(this.form)">
		<hr>
		<input type="submit" value="전송">
	</form>

	<script>
	function test1(){
		//1) name 접근
		/*
		alert(document.myform);
		alert(document.myform.btn1);

		var myform=document.myform;
		var btn1=document.myform.btn1;
		alert(myform);
		alert(btn1);
		*/

		//2) ID 접근 (추천)
		var myform=document.getElementById("myform");
		var btn1=document.getElementById("btn1");
		alert(myform);
		alert(btn1);
		alert(btn1.value);
	}//test1() end

	function test2(obj){
		alert(obj); //[object HTMLInputElement]
		alert(obj.value); //버튼2
	}//test2() end

	function test3(val){
		alert(val); //버튼3
	}//test3() end

	function test4(f){
		//this.form은 <form name=myform>을 가리킴
		alert(f); //[object HTMLFormElement]
		alert(f.btn4); //[object HTMLInputElement]
		alert(f.btn4.value); //버튼4
	}//test4()

	function test5(f){
		alert(f); //undefined
	}//test5() end

	</script>
</body>
</html>

 

15. JavaScript getElementById

  1) id=mydiv에 접근

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>14_getElementById.html</title>
	<style></style>
</head>
<body>
	<div id="mydiv" style="position: absolute; top: 10px; left: 20px; width: 150px; 
         height: 70px; background-color: green;">대한민국</div>
	<br><br><br><br><br>
	<input type="button" value="mydiv접근" onclick="test1()">
	<script>
	function test1(){
		//mydiv에 접근 [object HTMLDivElement]
		//alert(document.getElementById("mydiv"));

		//mydiv의 style에 접근 [object CSSStyleDeclaration]
		//순수 자바 스크립트
		alert(document.getElementById("mydiv").style);

		//jQuery 접근 <-강추
		//$("#mydiv").css()

		alert(document.getElementById("mydiv").style.top);
		alert(document.getElementById("mydiv").style.left);
		alert(document.getElementById("mydiv").style.width);
		alert(document.getElementById("mydiv").style.height);
		alert(document.getElementById("mydiv").style.backgroundColor); //- 를 인식못한다. 대문자로 
		alert(document.getElementById("mydiv").style.position);
	}//test1() end
	</script>
</body>
</html>

 

  2) id의 스타일 변경

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>14_getElementById.html</title>
	<style></style>
</head>
<body>
	<div id="mydiv" style="position: absolute; top: 10px; left: 20px; width: 150px; 
        height: 70px; background-color: green;">대한민국</div>
	<br><br><br><br><br>
	<input type="button" value="스타일변경" onclick="test2()">
	<script>
	function test2(){
		//스타일변경
		document.getElementById("mydiv").style.background="red"; 
		document.getElementById("mydiv").style.color="white"; 
		document.getElementById("mydiv").style.top="100px"; 
		document.getElementById("mydiv").style.left="250px"; 
		document.getElementById("mydiv").style.width="300px"; 
		document.getElementById("mydiv").style.height="100px"; 
		//순수 자바스크립트
		document.getElementById("mydiv").innerHTML="솔데스크"; 
		//jQuery
		//$("#mydiv").html("솔데스크")
	}//test2()
	</script>
</body>
</html>

 

  3) id의 이미지 변경

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>14_getElementById.html</title>
	<style></style>
</head>
<body>
	<div id="mydiv" style="position: absolute; top: 10px; left: 20px; width: 150px; 
         height: 70px; background-color: green;">대한민국</div>
	<br><br><br><br><br>
	<img src="../images/devil.png" id="myimg">
	<input type="button" value="이미지변경" onclick="test3()">	
    
    <script>
	function test3(){
		document.getElementById("myimg").src="../images/pizza.gif"; 		
	}//test3() end
	</script>
</body>
</html>

 

 

16. JavaScript 마우스이벤트

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>16_마우스이벤트.html</title>
	<style></style>
</head>
<body>
	<table border="1">
		<tr>
			<th onmouseover="show('k')">KBS</th>
			<th onmouseover="show('m')">MBC</th>
			<th onmouseover="show('s')">SBS</th>
		</tr>
		<tr>
			<td colspan="3">
				<div id="kbs" style="display: block">
					해피투게더<br><img src="../images/happy.gif" width="250px" 
                                          height="200px">
				</div>
				<div id="mbc" style="display: none">
					나혼자산다<br><img src="../images/pizza.gif">
				</div>
				<div id="sbs" style="display: none">
					런닝맨<br><img src="../images/runn.gif">
				</div>
			</td>
		</tr>
	</table>
	<script>
	function show(kind){
		//alert(kind);
		switch(kind){
			case 'k': document.getElementById("kbs").style.display="block"; 
					  document.getElementById("mbc").style.display="none"; 
					  document.getElementById("sbs").style.display="none"; 
					  break;
			case 'm': document.getElementById("kbs").style.display="none"; 
					  document.getElementById("mbc").style.display="block"; 
					  document.getElementById("sbs").style.display="none"; 
					  break;
			case 's': document.getElementById("kbs").style.display="none"; 
					  document.getElementById("mbc").style.display="none"; 
					  document.getElementById("sbs").style.display="block"; 
					  break;	
		}
	}//show() end
	</script>
</body>
</html>

 

17. JavaScript audio

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>17_audio.htmll</title>
	<style></style>
</head>
<body>
	<div style="text-align: center">
		<h1>음악✦‿✦목록</h1>
		<img src="../music/genie.jpg" width="300px" height="250px" id="poster">
		<br><br>
		<audio id="audio1" src="../music/genie.mp3" controls autoplay></audio>
	</div>
	<hr>
	<div style="margin: auto; width: 50%;">
		<ol>
			<li><a href="javascript:loadMusic('../music/genie.jpg', '../music/genie.mp3')">소원을 말해봐</a></li>
			<li><a href="javascript:loadMusic('../music/sheis.jpg', '../music/sheis.mp3')">그녀가 처음 울던 날</a></li>
			<li><a href="javascript:loadMusic('../music/candy.jpg', '../music/candy.mp3')">내 귀에 캔디</a></li>
			<li><a href="javascript:loadMusic('../music/gangnamstyle.jpg', '../music/gangnamstyle.mp3')">강남스타일</a></li>
		</ol>
	</div>
	<script>
	function loadMusic(jpg,mp3){
		//alert(jpg);
		//alert(mp3);
		var poster=document.getElementById('poster');
		var audio1=document.getElementById('audio1');
		poster.src=jpg;
		audio1.src=mp3;

		audio1.play();

	}//loadMusic()
	</script>
</body>
</html>

 

18. JavaScript 연습문제3 현재시각 띄우기 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>18_Data객체.html</title>
	<style></style>
</head>
<body>
		<h1>CLOCK</h1>
	<!--2019.07.11(목) PM 4:59:06-->
	<div id="clock"></div>
	<script>
	//날짜 관련 객체 Date객체
	//현재시스템의 날짜정보 가져오기
	var today=new Date();
	//년월일시분초,요일 값을 출력하시오 
	var str="";
	str +=today.getFullYear()+'.';
	
	if(today.getMonth()+1<10){
		str +="0";
	}
	str +=today.getMonth()+'.';
	str +=today.getDate()+' ';

	switch(today.getDay()){
		case 0 : str+="(일) ";break;
		case 1 : str+="(월) ";break;
		case 2 : str+="(화) ";break;
		case 3 : str+="(수) ";break;
		case 4 : str+="(목) ";break;
		case 5 : str+="(금) ";break;
		case 6 : str+="(토) ";break;	
	}
	
	if(today.getHours()>=12){
		str+="PM"+(today.getHours()-12)+':';
	}else{
		str+="AM"+':';	
	}//if end

	if(today.getMinutes()<10){
		str +="0";
	}
	str +=today.getMinutes()+':';
	
	if(today.getSeconds()<10){
		str +="0";
	}
	str +=today.getSeconds();

	document.getElementById('clock').innerHTML=str;


	</script>
</body>
</html>

 

저작자표시

'공부 > 화면구현 UI' 카테고리의 다른 글

7월15일 - JavaScript 6  (0) 2019.07.15
7월12일 - JavaScript 5  (0) 2019.07.12
7월10일 - JavaScript 3  (1) 2019.07.10
7월9일 - JavaScript 2  (0) 2019.07.09
7월8일 - JavaScript 1  (0) 2019.07.08

'공부/화면구현 UI' Related Articles

티스토리툴바