728x90
๋ฌธ์ 1
๋ฌธ์ ํ์ด ->
๋๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>๋ฐฐ์ด์ ์ฐ์ฐ</h3>
<table border="1">
<col width="30"><col width="50"><col width="50"><col width="80">
<tr>
<th>๋ฒํธ</th><th>a</th><th>b</th><th>a x b</th>
</tr>
<tr>
<th>1</th><td id="n11">5</td><td id="n12">33</td>
<td>
<button onclick="multi(0)">๊ณ์ฐ๊ฒฐ๊ณผ</button>
</td>
</tr>
<tr>
<th>2</th><td id="n21">12</td><td id="n22">14</td>
<td>
<button onclick="multi(1)">๊ณ์ฐ๊ฒฐ๊ณผ</button>
</td>
</tr>
<tr>
<th>3</th><td id="n31">18</td><td id="n32">65</td>
<td>
<button onclick="multi(2)">๊ณ์ฐ๊ฒฐ๊ณผ</button>
</td>
</tr>
</table>
<script type="text/javascript">
let a = new Array(3);
a[0] = document.getElementById("n11").innerHTML;
a[1] = document.getElementById("n21").innerHTML;
a[2] = document.getElementById("n31").innerHTML;
let b = new Array(3);
b[0] = document.getElementById("n12").innerHTML;
b[1] = document.getElementById("n22").innerHTML;
b[2] = document.getElementById("n32").innerHTML;
function multi( n ) {
a[0] = Number(document.getElementById("n11").innerHTML);
a[1] = Number(document.getElementById("n21").innerHTML);
a[2] = Number(document.getElementById("n31").innerHTML);
b[0] = parseInt(document.getElementById("n12").innerHTML);
b[1] = parseInt(document.getElementById("n22").innerHTML);
b[2] = parseInt(document.getElementById("n32").innerHTML);
let res = a[n] * b[n];
alert("๊ฒฐ๊ณผ๋ " + res + "์
๋๋ค");
}
</script>
</body>
</html>๋ฌธ์ 2
๋ฌธ์ ํ์ด ->
๋๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>๋จ๊ฐx์๋ ์ผ๋ํ</h3>
<!--ํ
์ด๋ธ๋ผ์ธ -->
<table border="1">
<tr>
<th>๊ฐ์</th><th>์ ํA</th><th>์ ํB</th><th>์ํC</th>
</tr>
<script type="text/javascript">
let cost = new Array(3);
cost[0] = 300;
cost[1] = 450;
cost[2] = 520;
for(i=1;i<=10;i++){
document.write("<tr>"); //์ด ๊ป๋ค๊ตฌ ๋ง๋ค๊ธฐ
document.write("<th>"+i+"</th>"); //์ซ์ ๋ถ์ฌ!
for(j=0;j<cost.length;j++){ //์ด 3๊ฐ ๋ง๋ค๊ธฐ!
document.write("<td>"+(cost[j]*i)+"์</td>"); //๋ฐ์ดํฐ ๋ฃ๊ธฐ !
}
document.write("</tr>"); //์ด๊ป๋ค๊ตฌ ๋๋๋๊ณณ -> 10๋ฒ ๋ฐ๋ณต
}
</script>
</table>
</body>
</html>๋ฌธ์ 3
๋๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>(๋ฌธ์ )</h3>
์ฌ๋์ด๋ค์ ์ํ์ธ ํ๊ฑด์ ๊ตฐ์ธ ์ํ์
๋๋ค. ๊ทธ๋ฌ๋ฉด ์ก๊ตฐ,ํด๊ตฐ,๊ณต๊ตฐ ์ค ์ด๋ ๊ตฐ์ ์ํ์ผ๊น์?
<br><br>
<button type="button" onclick="checkTheAnswer()">๋ต์ ๋ณด๋ค</button>
<br><br>
โป๋ฒํผ์ ํ ๋ฒ ํด๋ฆญํ๋ฉด ํํธ๊ฐ ํ์๋ฉ๋๋ค.
<br>
โป๋ฒํผ์ ๋ ๋ฒ ํด๋ฆญํ๋ฉด ๋ต์ด ํ์๋ฉ๋๋ค.
<script type="text/javascript">
let i = 1;
function checkTheAnswer(){
if(i==1){
alert("[ํํธ]๋ฌผ๊ฐ");
}
else{
alert("์ ๋ต -> ํด ๊ตฐ");
}
i++;
}
</script>
</body>
</html>(์ฃผ์ธ์ฅ์ ๋ฌผ๊ฐ์ ๋๋ค)
๋ฌธ์ 4
๋๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>๋ฌธ์ </h1>
๋ค์ ์ด์ฐจ ๋ฐฉ์ ์์ ๊ตฌํ๊ณ , ๊ทธ ๋ฒํผ์ ํด๋ฆญํ์ญ์์ค
<img src="number.png">
<br>
<button onclick=answermethod(1)>x=1</button>
<button onclick=answermethod(2)>x=2</button>
<button onclick=answermethod(3)>x=3</button>
<button onclick=answermethod(4)>x=4</button>
<button onclick=answermethod(5)>x=5</button>
<br>
<br>
โป์ฌ๋ฐ๋ฅธ ๋ต์ 2๊ฐ๊ฐ ์์ต๋๋ค.
<script type="text/javascript">
function answermethod(n){
if(n<=1){
alert("์ค๋ต์ด์ผ์๋ง");
}
else if(n<=3){
alert("์ ๋ต์
๋๋ค.");
}
else{
alert("์ค๋ต์
๋๋ค.");
}
}
</script>
</body>
</html>๋ฌธ์ 5
๋๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
th{
background-color: green;
}
</style>
</head>
<body>
<h1>ํฌํธ ์ฌ์ดํธ</h1>
<br>
"์ด๊ธฐ"๋ฒํผ์ ํด๋ฆญํ๋ฉด ํด๋น ํํ์ด์ง๋ฅผ ์ ์ฐฝ์์ ๋ณผ ์ ์์ต๋๋ค.
<br><br>
<table border="1">
<tr>
<th>๋ค์ด๋ฒ</th><td>http://www.naver.com/</td>
<td><button onclick="goWeb(1)">์ด๊ธฐ</button></td> <!-- ๋ฒํผ์์ญ -->
</tr>
<tr>
<th>๋ค์</th><td>http://www.daum.net/</td>
<td><button onclick="goWeb(2)">์ด๊ธฐ</button></td> <!-- ๋ฒํผ์์ญ -->
</tr>
<tr>
<th>๋ค์ด๋ฒ</th><td>http://zum.com/</td>
<td><button onclick="goWeb(3)">์ด๊ธฐ</button></td> <!-- ๋ฒํผ์์ญ -->
</tr>
</table>
<script type="text/javascript">
function goWeb(n){
if(n==1){
window.open("http://www.naver.com/");
}
else if(n==2){
window.open("http://www.daum.net/");
}
else{
window.open("http://zum.com/");
}
}
</script>
</body>
</html>๋ฌธ์ 6
๋ฌธ์ ํ์ด์ ํ์ํ ์ด๋ฏธ์ง ํ์ผ
choose.png
0.01MB
pic01.jpg
0.03MB
pic02.jpg
0.03MB
pic03.jpg
0.04MB
pic04.jpg
0.04MB
์ฃผ์ : (choose.png์ ๊ฒฝ์ฐ ์ ๊ฐ ๋ฅ์์ผ๋ก ๋ง๋ ๋ฉ์ธํ๋ฉด ์ด๊ธฐ๋๋ฌธ์ ์ฑ์๊ฐ ์์ต๋๋ค. ๋ณธ์ธ์ด ์ํ๋ ์ฌ์ง์ ๋ฃ์ด์ฃผ์ธ์)
๋๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>์ฌ์ง๋ค</h1> <!-- ๋ฉ์ธ -->
<br>
<table border="1">
<tr>
<td>
<img alt="" src="choose.png" name="MainPhoto">
</td>
<td valign="top">
<form name="pom">
์ฌ์ง์ ์ ํ<br>
<select name="picture" onchange="ChangePhoto()">
<option>์ฌ์ง ์ ํ</option>
<option value="pic01.jpg">์ฒซ๋ฒ์งธ ์ฌ์ง</option>
<option value="pic02.jpg">๋๋ฒ์งธ ์ฌ์ง</option>
<option value="pic03.jpg">์ธ๋ฒ์งธ ์ฌ์ง</option>
<option value="pic04.jpg">๋ค๋ฒ์งธ ์ฌ์ง</option>
</select>
</form>
</td>
</tr>
</table>
<script type="text/javascript">
function ChangePhoto(){
let selnum = document.pom.picture.selectedIndex;
//alert(selnum);
if(selnum!=0){
document.MainPhoto.src = document.pom.picture.options[selnum].value;
}
}
</script>
</body>
</html>
๋๊ธ