1월 8일 work 2, work 3

2020. 5. 30. 15:51ㆍ프론트엔드 & 백엔드 개발자 과정/javascript

<< work2-NewFile >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="">

<!-- 문제 1 -->

<h1>배경색의 변경</h1>
※다음 버튼을 클릭하면 홈페이지의 배경색을 변경할 수 있습니다.<br><br>
<button onclick="document.bgColor='red'">빨강</button>
<button onclick="document.bgColor='#00ff00'">초록</button>
<button onclick="colorSet(1)">파랑</button>
<button onclick="colorSet(2)">노랑</button>

<script type="text/javascript">
function colorSet( c ) {
	if(c == 1){
		document.bgColor = "#0000ff";
	}else if(c == 2){
		document.bgColor = "yellow";
	}
}


</script>

<!-- <button type="button" onclick="func()" value="빨강">빨강</button>
<button type="button" onclick="func1()" value="녹색">녹색</button>
<button type="button" onclick="func2()" value="청색">청색</button>
<button type="button" onclick="func3()" value="주황색">주황색</button>
<button type="button" onclick="func4()" value="검정색">검정색</button>
<button type="button" onclick="func5()" value="흰색">흰색</button>

<script type="text/javascript">
function func() {
	document.bgColor = "#ff0000"		
}
function func1() {
	document.bgColor = "#00ff00"
}
function func2() {
	document.bgColor = "blue"
}
function func3() {
	document.bgColor = "orange"
}
function func4() {
	document.bgColor = "#000000"	
}
function func5() {
	document.bgColor = "white"
	
}
</script> -->

</body>
</html>

<< NewFile1 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 문제2 -->
<p><b>(문제)</b></p>
영어 속담으로  "1일 1개씩 먹으면 의사 필요없다"라고 하는 과일은 무엇일까요?<br>

<!-- <form name="frm">	부모 태그
	<input type="checkbox" id="eng">영어를 선택<br><br>
	답:<input type="text" id="answer" size="20">

	<button type="button" onclick="check()">답을 클릭</button> 함수명으로 click은 사용금지
</form> -->

<script type="text/javascript">
function check() {
//	alert( document.getElementById("eng").checked );
/*	var eng = document.getElementById("eng").checked;
	var answer = document.getElementById("answer").value;
	if(eng == true){ 	/* uppercase, lowercase 사용 가능 *//*
		if(answer == "apple"||answer == 'Apple' ||answer == "APPLE"){
			alert("정답입니다");
		}else{
			alert("오답입니다");
		}
	}else{
		if(answer == "사과"||answer == '능금'){
			alert("정답입니다");
		}else{
			alert("오답입니다");
		}
	}
*/

//	var eng = document.frm.eng.checked;
//	alert(eng);
//	var answer = document.frm.answer.value;
//	alert(answer);
}
</script>

<form>
	<input type="checkbox">영어를 선택합니다<br><br>
	답:<input type="text" size="20">
	<button type="button" onclick="check2()">정답</button> <!-- 함수명으로 click은 사용금지 -->
</form>

<script type="text/javascript">
function check2() { // 첫번째 formdml 첫번째 elements(checkbox)
	var eng = document.forms[0].elements[0].checked;
//	alert(eng);
	var answer = document.forms[0].elements[1].value;	// textfield
//	alert(answer);
	
	if(eng == true){ 	/* uppercase, lowercase 사용 가능 *//*
		if(answer == "apple"||answer == 'Apple' ||answer == "APPLE"){
			alert("정답입니다");
		}else{
			alert("오답입니다");
		}
	}else{
		if(answer == "사과"||answer == '능금'){
			alert("정답입니다");
		}else{
			alert("오답입니다");
		}
	}
}

</script>

<!-- <form name="frm"> //졔
<input type="checkbox" id="check">영어(소문자)로 답한다 <br>
답:<input type="text" id="answer" name="_answer">
<button type="button" onclick="func()">답을 체크</button>
</form>

<script type="text/javascript">
function func() {
	var str = document.getElementById("check").checked;
	var asw = document.getElementById("answer").value;
	
	if(check == true){
		if(asw.equals("apple") || asw.equals("APPLE")){
			alert("정답이다잉!");
		}else{
			alert("틀렸다잉!");
		}			
	}else{
		alert("틀렸다잉!");
		
}
</script> -->

</body>
</html>

<< NewFile2 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 문제3 -->
<h1>미술관 및 박물관의 링크</h1><br>

<form name="frm">
<select name="links" id="_links" onchange="golink()">
	<option>대상을 선택</option>	<!-- 0 -->
	<option>미술관--------</option>	<!-- 1 -->
	<option value="http://sema.seoul.go.kr/">서울 시립 미술관</option>
	<option value="http://www.mmca.go.kr/">국립 현대 미술관</option>
	<option value="http://www.sac.or.kr/">예술의 전당</option>
	<option>박물관--------</option>	<!-- 5 -->
	<option value="http://www.museum.go.kr/">국립 중앙 박물관</option>
	<option value="http://www.museum.seoul.kr/">서울 역사 박물관</option>
	<option value="http://www.nfm.go.kr/">국립 민속 박물관</option>
</select>
</form>

<script type="text/javascript">
function golink() {
//	var selectIndex = document.getElementById)("_links").selectedIndex;
//	alert(selectIndex);
	var selectIndex = document.frm.links.selectedIndex;
	alert(selectIndex);
	
	// Uniform Resource Locator(한결같은 자원 탐지(html 주소))
//	var url = document.getElementById("_links").options[selectIndex].value;
//	alert(url);
	var url = document.frm.links.options[selectIndex].value;
//	alert(url);

	if(selectIndex != 0 && selectIndex != 1 && selectIndex != 5){
		location.href = url;
	}
}

</script>

<!-- <form action="" name="frm"> // 졔
<select id="selid" name="choice">
	<option value="서울시립미술관" onclick="goPage">서울시립미술관</option>
	<option value="국립현대미술관" onclick="goPage">국립현대미술관</option>
	<option value="예술의전당" onclick="goPage">예술의전당</option>
	<option value="국립중앙박물관" onclick="goPage">국립중앙박물관</option>
	<option value="서울역사박물관" onclick="goPage">서울역사박물관</option>
	<option value="국립민속박물관" onclick="goPage">국립민속박물관</option>
</select> 
</form>

<script type="text/javascript">
function goPage() {
	var select = document.getElementById("selid").value;
	
	if(select = "서울시립미술관"){
		location.href = "http://sema.seoul.go.kr/";
	}else if(select = "국립현대미술관"){
		location.href = "http://www.mmca.go.kr/";
	}else if(select = "예술의전당"){
		location.href = "http://www.sac.or.kr/";
	}else if(select = "국립중앙박물관"){
		location.href = "http://www.museum.go.kr/";
	}else if(select = "서울역사박물관"){
		location.href = "http://www.museum.seoul.kr/";
	}else if(select = "국립민속박물관"){
		location.href = "http://www.nfm.go.kr/";
	}
	}
}
</script>

http://sema.seoul.go.kr/
http://www.mmca.go.kr/
http://www.sac.or.kr/
http://www.museum.go.kr/
http://www.museum.seoul.kr/
http://www.nfm.go.kr/
-->

</body>
</html>

<< NewFile3 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 문제4 -->

<h1>2개의 주사위</h1>
버튼을 클릭하면 2개의 주사위가 랜덤됩니다.<br>

<img alt="" id="d1" src="./images/sai_1.gif">
<img alt="" id="d2" src="./images/sai_2.gif">
<br>
<p id="dic1">dic</p>
<br>
<button onclick="dice()">주사위를 던졌다</button>

<script type="text/javascript">
function dice() {
	var r1 = Math.random() * 6;
	var r2 = Math.random() * 6;	
	
	r1 = Math.ceil(r1);		// 소수점 올림, 정수 반환 
	r2 = Math.ceil(r2);
	
//	alert("r1:" + r1 + " r2:" + r2);

//	document.getElementById("d1").src = "./images/sai_" + r1 + ".gif";
//	document.getElementById("d2").src = "./images/sai_" + r2 + ".gif";

	document.images[0].src = "./images/sai_" + r1 + ".gif";
	document.images[1].src = "./images/sai_" + r2 + ".gif";
	
	document.getElementById("dic1").innerHTML = r1 + r2;
	
}

</script>

<!-- <input type="image" src="./images./sai_1.gif"	// 졔
	onmousedown="mouseDown(this)">
	
<input type="image" src="./images./sai_6.gif"
	onmousedown="mouseDown(this)">
	

<input type="button" value="주사위를 굴린다" onclick="random">
	
<script type="text/javascript">
function mouseDown( obj ) {
	obj.src = "";
}

</script> --> 

</body>
</html>

<< NewFile4 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 문제5 -->

<h1>환영합니다</h1>

<form name="frm">
※현재 시각은 <input type="text" size="20" name="timebox">입니다.
</form>

<script type="text/javascript">
function nowTime() {
	var now = new Date();
	
	var hour = now.getHours();	// 0 ~ 23 -> 1 ~ 12
	var minute = now.getMinutes();
	var second = now.getSeconds();
	
	if(hour < 10){
		hour = "0" + hour;	// 0 ~ 9  9:12 -> 09:12
	}
	if(minute < 10){
		minute = "0" + minute;
	}
	if(second < 10){
		second = "0" + second;
	}
	
	document.frm.timebox.value = hour + ":" + minute + ":" + second;
}
setInterval("nowTime()", 1000);

</script>

</body>
</html>

<< NewFile5 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="black" text="white">

<!-- 문제6 -->

<h1>풍경 사진</h1>
이미지 위로 마우스를 이동하면, 그 이미지가 컬러로 표시됩니다.
<br><br>

<div align="center">
<table>
<col width="33%">
<col width="33%">
<col width="33%">
<tr>
	<td>
	<img alt="" src="./images/m_nature01.jpg"
		onmouseover="this.src='./images/nature01.jpg'"
		onmouseout="this.src='./images/m_nature01.jpg'">
	</td>
	<td>
	<img alt="" src="./images/m_nature02.jpg"
		onmouseover="this.src='./images/nature02.jpg'"
		onmouseout="this.src='./images/m_nature02.jpg'">
	</td>
	<td>
	<img alt="" src="./images/m_nature03.jpg"
		onmouseover="this.src='./images/nature03.jpg'"
		onmouseout="this.src='./images/m_nature03.jpg'">
	</td>
</tr>
<tr>
	<td>
	<img alt="" src="./images/m_nature04.jpg"
		onmouseover="this.src='./images/nature04.jpg'"
		onmouseout="this.src='./images/m_nature04.jpg'">
	</td>
	<td>
	<img alt="" src="./images/m_nature05.jpg"
		onmouseover="this.src='./images/nature05.jpg'"
		onmouseout="this.src='./images/m_nature05.jpg'">
	</td>
	<td>
	<img alt="" src="./images/m_nature06.jpg"
		onmouseover="this.src='./images/nature06.jpg'"
		onmouseout="this.src='./images/m_nature06.jpg'">
	</td>
</tr>
</table>
</div>

</body>
</html>

<< NewFile6 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 문제7 -->

<h1>다음 생일까지 남은 일수</h1>
다음 버튼을 클릭하여 생일을 입력하면,<br>
다음 생일까지 남은 일수를 볼 수 있습니다.
<br><br>
<button onclick="func()">생일을 입력</button>
<br><br>

남은 일수:<h3 id="days"></h3>

<script type="text/javascript">
function func() {
	// prompt
	var birthMonth = prompt("생일 월을 작성해 주십시오(1 ~ 12)");
	var birthDay = prompt("생일 날짜를 작성해 주십시오(1 ~ 31)");
	
	// 현재 날짜와 비교
	// 현재 날짜를 구한다
	var nowday = new Date();	// 현재 시간
	var birth = new Date();		// setter
	
	//자신의 생일을 Set
	birth.setMonth(birthMonth - 1);
	birth.setDate(birthDay);
	
	// mSecond가 -값이 나오는 경우 -> 생일이 지났을 경우가 된다
	var mSecond = birth.getTime() - nowday.getTime();
	if(mSecond <= 0){ // 생일이 지난 경우
		var birthYear = birth.getFullYear();
		birth.setFullYear(birthYear + 1);	// 내년으로 설정
		
		mSecond = birth.getTime() - nowday.getTime();
	}
	
	var days = mSecond / (24 * 60 * 60 * 1000);	// 시간, 분, 초, 밀리세컨드로 나누면 남은 일수가 나온다.	
//	alert(days);

	document.getElementById("days").innerHTML = days;
}

</script>

</body>
</html>

<< work3 index >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 문제1 -->
<!--
<table border="1">
<col width="50"><col width="80"><col width="80"><col width="100">
<tr>
	<th>첨자</th><th>a</th><th>b</th><th>a * b</th>
</tr>
<tr>
	<th>0</th><td id="n11">5</td><td id="n12">33</td>
	<td>
		<button type="button" onclick="multi(0)">계산결과</button>
	</td>
</tr>
<tr>
	<th>1</th><td id="n21">12</td><td id="n22">14</td>
	<td>
		<button type="button" onclick="multi(1)">계산결과</button>
	</td>
</tr>
<tr>
	<th>2</th><td id="n31">18</td><td id="n32">65</td>
	<td>
		<button type="button" onclick="multi(2)">계산결과</button>
	</td>
</tr>
</table>

<script type="text/javascript">
var a = new Array(3);	// 5, 12, 18
var b = new Array(3);	// 33, 14, 65

for(i = 0;i < a.lenghth; i++){
a[i] = parseInt( document.getElementById("n" + (i + 1) + "1").innerHTML );
b[i] = parseInt( document.getElementById("n" + (i + 1) + "2").innerHTML );
}

function multi( n ) {
	result = a[n] * b[n];
	alert("결과는 " + result + "입니다");
}
</script>
<br><br>
-->

<table border="1">
<col width="50"><col width="80"><col width="80"><col width="100">
<tr>
	<th>첨자</th><th>a</th><th>b</th><th>a * b</th>
</tr>
<tr>
	<th>0</th><td>5</td><td>33</td>
	<td>
		<button type="button" onclick="multi(0)">계산결과</button>
	</td>
</tr>
<tr>
	<th>1</th><td>12</td><td>14</td>
	<td>
		<button type="button" onclick="multi(1)">계산결과</button>
	</td>
</tr>
<tr>
	<th>2</th><td>18</td><td>65</td>
	<td>
		<button type="button" onclick="multi(2)">계산결과</button>
	</td>
</tr>
</table>

<script type="text/javascript">
// NodeList
var nodeNum = document.getElementsByTagName("td");
//alert(nodeNum[3].innerHTML);	// 0, 1,  3, 4,  6, 7
var a = new Array(3);	// 5, 12, 18
var b = new Array(3);	// 33, 14, 65

for(i = 0;i< a.length; i++){
	a[i] = Number( nodeNum[0 + (3 * i)].innerHTML );	// parseInt
	b[i] = Number( nodeNum[1 + (3 * i)].innerHTML );	// parseInt
}

function multi( n ) {
	result = a[n] * b[n];
	alert("결과는 " + result + "입니다");
}


</script>

<!-- <table border="4"> // 졔
	<caption><b>배열의 연산</b></caption>
	<col width="100"><col width="100"><col width="100"><col width="100">
	
	<tr bgcolor="gray">
		<th>첨자</th>
		<th>a</th>
		<th>b</th>
		<th>a*b을 계산</th>
	</tr>
	<tr align="center">
		<th bgcolor="gray">0</th>
		<td id="5">5</td>
		<td id="33">33</td>
		<td><input type="button" value="계산결과" onclick="func(1)"></td>
	</tr>
	<tr align="center">
		<th bgcolor="gray">1</th>
		<td id="12">12</td>
		<td id="14">14</td>
		<td><input type="button" value="계산결과" onclick="func(2)"></td>
	</tr>
	<tr align="center">
		<th bgcolor="gray">2</th>
		<td id="18">18</td>
		<td id="65">65</td>
		<td><input type="button" value="계산결과" onclick="func(3)"></td>
	</tr>	
</table>

<script type="text/javascript">
function func( c ) {
	if(c == 1){
		var zero1 = document.getElementById("5").innerHTML;
		var zero2 = document.getElementById("33").innerHTML;		
		var answer = zero1 * zero2;
		alert(answer);
	}else if(c == 2){
		var zero1 = document.getElementById("12").innerHTML;
		var zero2 = document.getElementById("14").innerHTML;		
		var answer = zero1 * zero2;
		alert(answer);		
	}else if(c == 3){
		var zero1 = document.getElementById("18").innerHTML;
		var zero2 = document.getElementById("65").innerHTML;		
		var answer = zero1 * zero2;
		alert(answer);
	}
		
}
</script> -->

</body>
</html>

<< index1 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 문제2 -->
<h3><b>단가*수량 일람표</b></h3>

<table border="1" id="mytable">
<tr>
	<th>갯수</th><th>제품 A</th><th>제품 B</th><th>제품 C</th>
</tr>
<!-- 
<tr>
	<th>1</th><td>300</td><td>450</td><td>520</td>
</tr> 
-->


</table>

<script type="text/javascript">

var a = 300;
var b = 450;
var c = 520;

var tbody = document.getElementById("mytable"); // Object

for(i = 0;i < 10; i++){	
var trow = document.createElement("tr");		// <tr></tr>

var thead = document.createElement("th");		// <th></th>
thead.appendChild(document.createTextNode(i + 1));	// <th>1</th>

var tdata1 = document.createElement("td");		// <td></td>
tdata1.appendChild(document.createTextNode(a * i + a + "원"));	// <td>300원</td>

var tdata2 = document.createElement("td");		// <td></td>
tdata2.appendChild(document.createTextNode(b * i + b + "원"));	// <td>450원</td>

var tdata3 = document.createElement("td");		// <td></td>
tdata3.appendChild(document.createTextNode(c * i + c + "원"));	// <td>520원</td>

// th, td -> tr 추가
trow.appendChild(thead);
trow.appendChild(tdata1);
trow.appendChild(tdata2);
trow.appendChild(tdata3);

// tr -> table 추가
tbody.appendChild(trow);
}
</script>

<!-- <form>		// 졔
<table border="2">
	
	<col width="70"><col width="70"><col width="70"><col width="70">
	
	<tr>
		<th><b>개수</b></th>
		<th><b>제품 A</b></th>
		<th><b>제품 B</b></th>
		<th><b>상품 C</b></th>
	</tr>
	<tr>
		<th><p id="one"><b>1</b></p></th>
		<td><p id=""></p></td>
		<td><p id=""></p></td>
		<td><p id=""></p></td>
	</tr>
	<tr>
		<th><p id="two"><b>2</b></p></th>
		<td><p id=""></p></td>
		<td><p id=""></p></td>
		<td><p id=""></p></td>
	</tr>
	<tr>
		<th><p id="three"><b>3</b></p></th>
		<td><p id=""></p></td>
		<td><p id=""></p></td>
		<td><p id=""></p></td>
	</tr>
	<tr>
		<th><p id="four"><b>4</b></p></th>
		<td><p id="4-1"></p></td>
		<td><p id="4-2"></p></td>
		<td><p id="4-3"></p></td>
	</tr>
	<tr>
		<th><p id="five"><b>5</b></p></th>
		<td><p id="5-1"></p></td>
		<td><p id="5-2"></p></td>
		<td><p id="5-3"></p></td>
	</tr>
	<tr>
		<th><p id="six"><b>6</b></p></th>
		<td><p id="6-1"></p></td>
		<td><p id="6-2"></p></td>
		<td><p id="6-3"></p></td>
	</tr>
	<tr>
		<th><p id="seven"><b>7</b></p></th>
		<td><p id="7-1"></p></td>
		<td><p id="7-2"></p></td>
		<td><p id="7-3"></p></td>
	</tr>
	<tr>
		<th><p id="eight"><b>8</b></p></th>
		<td><p id="8-1"></p></td>
		<td><p id="8-2"></p></td>
		<td><p id="8-3"></p></td>
	</tr>
	<tr>
		<th><p id="nine"><b>9</b></p></th>
		<td><p id="9-1"></p></td>
		<td><p id="9-2"></p></td>
		<td><p id="9-3"></p></td>
	</tr>
	<tr>
		<th><p id="ten"><b>10</b></p></th>
		<td><p id="10-1"></p></td>
		<td><p id="10-2"></p></td>
		<td><p id="10-3"></p></td>
	</tr>	
	
</table>
</form>

<script type="text/javascript">
function func() {
	var one = document.getElementById("one").innerHTML;
	document.forms[0].one.
}
</script>
 -->
 
</body>
</html>

<< index2 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 문제3 -->
<h3>(문제)</h3>
사나이들의 영화인 탑건은 군인 영화입니다. 그러면 육군,해군,공군 중 어느 군의 영화일까요?<br><br>
<button onclick="answer()">답을 보다</button>
<br><br>
※버튼을 한 번 클릭하면 힌트가 표시됩니다.<br>
※버튼을 두 번 클릭하면 답이 표시됩니다.

<script type="text/javascript">
var n = 0;	// global variable, 전역변수
function answer() {
	if(n == 0){
		alert("[힌트]바다에서 싸우는 군인입니다");
		n = 1;
	}else{
		alert("[정답]해군입니다");
		n = 0;
	}
	
}

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

<< index 3 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 문제4 -->

<h3>(문제)</h3> <!-- 2, 3 -->
다음 이차 방정식의 해를 구하고, 그 버튼을 클릭하십시오.<br>
<p style="font-size: xx-large;margin-left: 30px">
x<sup>2</sup>-5x=-6
</p>

<br>
<button onclick="result(1)">x = 1</button>
<button onclick="result(2)">x = 2</button>
<button onclick="result(3)">x = 3</button>
<button onclick="result(4)">x = 4</button>
<button onclick="result(5)">x = 5</button>
<br><br>
올바른 답은 2개가 있습니다.

<script type="text/javascript">
function result( n ) {
	
	var re = Math.pow(n, 2) - (5 * n);
//	alert(re);
	if(re == -6){
		alert("올바른 값입니다");
	}else{
		alert("틀린 값입니다");
	}
}

</script>

<!-- <p id="ptag" value="-6"><b>x²-5x=-6</b></p>	// 졔
<button id="one" value="1" onclick="func(1)">x = 1</button>
<button id="two" value="2" onclick="func(2)">x = 2</button>
<button id="three" value="3" onclick="func(3)">x = 3</button>
<button id="four" value="4" onclick="func(4)">x = 4</button>
<button id="five" value="5" onclick="func(5)">x = 5</button><br>
※올바른 답은 2개가 있습니다.

<script type="text/javascript">
function func( c ) {
	if(c == 1){	// -4
		var a = document.getElementById("one").value;
		alert(Math.pow(a, 2) - (5 * a));
		/* var b = document.getElementById("ptag").value;
		if(Math.pow(a, 2) - (5 * a) == b {
			alert("정답입니다!");
		}else{
			alert("오답입니다!");
		} */		
	}else if(c == 2){
		var a = document.getElementById("two").value;
		alert(Math.pow(a, 2) - (5 * a));	// -6
	}else if(c == 3){
		var a = document.getElementById("three").value;
		alert(Math.pow(a, 2) - (5 * a));	// -6
	}else if(c == 4){
		var a = document.getElementById("four").value;
		alert(Math.pow(a, 2) - (5 * a));	// -4
	}else if(c == 5){
		var a = document.getElementById("five").value;
		alert(Math.pow(a, 2) - (5 * a));	// 0
	}
} 

</script>
-->

</body>
</html>

<< index 4 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 문제5 -->

<h1>포털 사이트</h1>
"열기"버튼을 클릭하면 해당 홈페이지를 새 창에서 볼 수 있습니다.
<br><br>

<table border="1">
<tr>
	<th style="background-color: #00ff00; padding: 10px">네이버</th>
	<td id="naver">http://www.naver.com</td>
	<td>
		<button type="button" onclick="func('naver')">열기</button>
	</td>
</tr>
<tr>
	<th style="background-color: #00ff00; padding: 10px">구글</th>
	<td id="google">http://www.google.com</td>
	<td>
		<button type="button" onclick="func('google')">열기</button>
	</td>
</tr>
</table>

<script type="text/javascript">
function func( n ) {
	if(n == 'naver'){
		var url = document.getElementById("naver").innerHTML;
		location.href = url;	// 기존 창에서 열림
	}else if(n == 'google'){
		var url = document.getElementById("google").innerHTML;
		window.open(url);	// 새창에서 열림
	}
}

</script>

</body>
</html>

<< index 5 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="#000" text="#fff">	<!-- 검정 배경, 하얀 글씨 -->

<!-- 문제6 -->
<h1>영화들</h1>
<div align="center">
<table>
<tr>
	<td>
		<img alt="" src="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000082/82537/82537_320.jpg" name="photo" border="3">
	</td>
	<td valign="top" style="padding-left: 10px"> <!-- valign: 위아래 맞춤 -->
		<form name="frm">
			영화 선택<br>
			<select name="picture" onchange="photochange()">
				<option>영화제목</option>
				<option value="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000082/82537/82537_320.jpg">스타워즈- 라이즈 오브 스카이워커 </option>
				<option value="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000082/82531/82531_320.jpg">닥터 두리틀</option>
				<option value="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000082/82747/82747_320.jpg">백두산</option>
			</select>
		</form>
	</td>
	
</tr>
</table>
</div>

<script type="text/javascript">
function photochange() {
	var indexNum = document.frm.picture.selectedIndex;
	// alert(indexNum);
	if(indexNum != 0){
		document.photo.src = document.frm.picture.options[indexNum].value;
	}
	
}
</script>

</body>
</html>
​
저작자표시 비영리 변경금지

'프론트엔드 & 백엔드 개발자 과정 > javascript' 카테고리의 다른 글

1월 7일 sample2, sample3,sample4, sample5, sample6, sample7  (0) 2020.05.24
11월 6일 sample1, sample2, (과제: work1)  (0) 2020.05.24

관련글

댓글 0

티스토리툴바