Jam's story
명품 html+css+javascript 10장 실습문제 본문
1
2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
function welcomeWin(){
var newWin=window.open("" ,"", "width=200, height=80");
newWin.document.write("접속감사합니다");
newWin.document.title="환영";
newWin.document.body.style.backgroundColor="yellowgreen";
newWin.document.close();
}
</script>
</head>
<body onload="welcomeWin()">
</body>
</html>3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<script type="text/javascript">
function opWin(){
var select= document.getElementById('site');
var url=select.options[select.selectedIndex].value;
window.open(url," ","width=400, height=500");
}
</script>
<body onchange="opWin()">
<select id="site">
<option value="http://www.naver.com">네이버</option>
<option value="http://www.google.com">구글</option>
<option value="http://www.daum.net">다음</option>
</select>
</body>
</html>4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
var agent= navigator.userAgent.toLowerCase();
if(agent.indexOf("chrome")!=-1){
alert("크롬브라우저입니다.");
}else {
alert("크롬브라우저가 아닙니다");
}
</script>
</head>
<body>
<h3>구글 Chrome 브라우저 감별</h3>
<hr>
웹 브라우저에 따라 지원되는 자바스크립트들이 다를 수도 있습니다.
DOM의 기능은 표준화되어 있어 동일하지만, BOM 객체들을 많이
다릅니다. 얼른 모두 표준화되었으면 하지만 독창적인 기능으로 승부하고자
하여 쉽지는 않을 것 같습니다.
</body>
</html>5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div{
display: inline-block;
width: 10em;
border: 1px solid darkgray;
background: aliceblue;
}
</style>
<script type="text/javascript">
function startClock(){
var clock=document.getElementById("clock");
timeout(clock);
}
function timeout(obj){
var current=new Date();
obj.innerHTML=current.toLocaleTimeString();
setTimeout("timeout(clock)",1000);
}
</script>
</head>
<body onload="startClock()">
<div id="clock"></div>
</body>
</html>6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div{
display: inline-block;
width: 10em;
border: 1px solid darkgray;
background: aliceblue;
}
</style>
<script type="text/javascript">
var time=null;
function onofftime(){
if(time!=null){
clearinterval(time);
time=null;
document.getElementById("clock").style.color="gray";
}
else{
time=setInterval("outtime(clock)",100);
document.getElementById('clock').style.color="black";
}
}
function gotime(){
var clock= document.getElementById('clock');
outtime(clock);
time=setInterval("outtime(clock)",100);
}
function outtime(e){
var date=new Date();
e.innerHTML=date.toLocaleTimeString();
}
</script>
</head>
<body onload="gotime()">
<h3>div 태그에 시계 만들기</h3>
시계를 클릭하면 시계가 멈추고 다시 클릭하면 가기 시작하다.
<hr>
<div id="clock"></div>
</body>
</html>7
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>산수를 풀어 봅시다</title>
<style> td { padding-left : 10px; padding-right : 10px; } </style>
<script>
function calc() {
var total = 0;
var qArray = document.getElementsByClassName("question");
var aArray = document.getElementsByClassName("answer");
for(i=0; i<qArray.length; i++) {
var question = qArray[i].innerHTML;
var correctAnswer = eval(question);
var userAnswer = aArray[i].value;
if(userAnswer=="" || isNaN(userAnswer)) { // 답이 없거나 문자 입력
total += 0;
qArray[i].style.textDecoration = "line-through";
} else if(parseInt(userAnswer)==correctAnswer) { // 답이 맞는 경우
total += 1;
// 이전에 틀린 문제에 다시 답을 하고 채점버튼을 누르는 경우
qArray[i].style.textDecoration = "none";
} else { // 답이 틀린 경우
total += 0;
qArray[i].style.textDecoration = "line-through";
}
}
document.getElementById("score").innerHTML = total;
}
function makeExpression() {
var qArray = document.getElementsByClassName("question");
var aArray = document.getElementsByClassName("answer");
for(i=0; i<qArray.length; i++) {
// 결코 0이 될 수 없음
var number1 = Math.floor(Math.random()*20)+1;
var number2 = Math.floor(Math.random()*20)+1;
var op = Math.floor(Math.random()*4);
var operator="+"; // 디폴트
switch(op) {
case 0 : operator = "+"; break;
case 1 : operator = "-"; break;
case 2 : operator = "*"; break;
case 3 : operator = "/"; break;
}
qArray[i].innerHTML = number1 + operator + number2;
qArray[i].style.textDecoration = "none";
aArray[i].value=""; // 답 입력 난 지우기
// 맞은 문항 수 지우기
document.getElementById("score").innerHTML = 0;
}
}
</script>
</head>
</head>
<body onload="makeExpression()">
<h3>산수 문제를 풀어 봅시다.</h3>
자동으로 문제가 만들어집니다. 답 입력 후 채점 버튼을 누르세요. 다시 버튼을 누르면 새로운 문제가 출력됩니다. 나누기
결과는 정수입니다.
<div id="clock" onclick="controlClock()"></div>
<hr>
<form>
<table>
<tr><td class="question"></td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question"></td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question"></td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question"></td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td><button type="button" onclick="calc()">채점</button></td><td><span id="score">0</span>
<button type="button" onclick="makeExpression()">다시</button></td></tr>
</table>
</form>
</body>
</html>8
<!DOCTYPE html>
<html>
<head>
<title>산수를 풀어봅시다</title>
<style>
td
{
padding-left : 13px;
padding-right : 13px;
}
</style>
<script>
var show=null, count;
function ontime()
{
document.getElementById("grade").innerHTML = 0;
var time = document.getElementById("time");
count = 10;
if(show != null)
clearTimeout(show);
outtime(time);
}
function outtime(cls)
{
count--;
cls.innerHTML = count;
if(count != 0)
show = setTimeout("outtime(time)", 1000);
else
correct();
}
function make()
{
var one = document.getElementsByClassName("one");
var two = document.getElementsByClassName("two");
for(i=0; i<one.length; i++)
{
var num1 = Math.floor(Math.random()*99);
var num2 = Math.floor(Math.random()*99);
var op = Math.floor(Math.random()*4);
var operator;
switch(op)
{
case 0 : operator = "+";
break;
case 1 : operator = "-";
break;
case 2 : operator = "*";
break;
case 3 : operator = "/";
break;
}
one[i].innerHTML = num1 + operator + num2;
}
}
function correct()
{
var countgrade = 0;
var one = document.getElementsByClassName("one");
var two = document.getElementsByClassName("two");
for(i=0; i<one.length; i++)
{
var question = one[i].innerHTML;
var answer = two[i].value;
var correct = Math.floor(eval(question));
if(parseInt(answer) == correct)
countgrade += 1;
else if(answer=="")
one[i].style.textDecoration = "line-through";
else if(isNaN(answer))
one[i].style.textDecoration = "line-through";
else
one[i].style.textDecoration = "line-through";
}
document.getElementById("grade").innerHTML = countgrade;
}
</script>
</head>
<body onload="ontime(), make()">
<h3>산수 문제를 풀어 봅시다.</h3>
문제는 자동으로 생성되며, 10초가 지나면 자동 채점됩니다.
<div>
남은 시간 <span id="time">0</span>
</div>
<hr>
<form>
<table>
<tr>
<td class="one"></td>
<td><input class="two" type="text" size="6"></td>
</tr>
<tr>
<td class="one"></td>
<td><input class="two" type="text" size="6"></td>
</tr>
<tr>
<td class="one"></td>
<td><input class="two" type="text" size="6"></td>
</tr>
<tr>
<td class="one"></td>
<td><input class="two" type="text" size="6"></td>
</tr>
<tr>
<td><button type="button" onclick="ontime(), make()">다시</button></td>
<td><span id="grade">0</span> </td>
</tr>
</table>
</form>
</body>
</html>9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
function checkScreen(){
if(screen.width<1280 || screen.height<1024){
alert('스크린 해상도가 낮습니다.'); }
}
</script>
</head>
<body onload="checkScreen()">
<p>스크린의 해상도가 1280x1024 보다 작은 경우
웹 페이지가 정상적으로 출력되지 않을 수 있음을
알리는 경고창을 출력한다.
</body>
</html>'2021-2학기 > html+css+javascript' 카테고리의 다른 글
| 예제에서 추가된 사항까지 (0) | 2021.12.06 |
|---|---|
| 명품 html+css+javascript 7장 실습문제 복습 (0) | 2021.12.02 |
| 중간고사 시험 (0) | 2021.10.21 |
| 중간고사연습다시 (0) | 2021.10.20 |
| 중간고사 기출 다시풀어보기 (0) | 2021.10.20 |
Comments