1. 자바스크립트의 강점은 웹 페이지에서 사용자와 상호작용을 할 수 있다는 점입니다. 이번에는 사용자와 상호작용할 수 있는 여러 가지 입력폼을 만들어 보세요.
2. 다음과 같이 버튼과 함수를 이용한 간단한 경고장 띄우기를 만들어 봅니다.
-1) 소스코드
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>퀴즈 프로그램 만들기</title>
</head>
<body>
<button onclick="myFucntion()">버튼</button>
<script type="text/javascript">
function myFucntion() {
alert("메시지 박스 출력");
}
</script>
</body>
</html>
|
-2) 실행결과
3. 간단한 퀴즈 프로그램을 만들기 위해 버튼을 활용하는 프로그램을 만듭니다. 역사 퀴즈를 만들어 봅니다.
-1) 소스코드
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>퀴즈 프로그램 만들기</title>
</head>
<body>
<button onclick="myFucntion()">역사 퀴즈</button>
<p id="check">정답 체크</p>
<script type="text/javascript">
function myFucntion() {
var kingName = prompt("한글을 만든 왕은?", "");
if(kingName=="세종") document.getElementById("check").innerHTML = "정답입니다.";
else document.getElementById("check").innerHTML = "오답입니다.";
}
</script>
</body>
</html>
|
-2) 실행 결과
4. 한국사 객관식 문제를 만들어 봅니다. 아래와 같이 코드를 작성해 봅니다.
-1) 소스코드
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>퀴즈 프로그램 만들기</title>
</head>
<body>
<h1>한국사 8급 문제</h1>
<p> 1. 다음 중 고려시대 왕은?</p>
<form name="form">
<input type="radio" name="kingName" value="v1">근초고왕<br>
<input type="radio" name="kingName" value="v2">의자왕<br>
<input type="radio" name="kingName" value="v3">충렬왕<br>
<input type="radio" name="kingName" value="v4">성종<br>
<input type="button" name="선택" value="정답확인" onclick="myFucntion()">
</form>
<p id="check"></p>
<script type="text/javascript">
function myFucntion() {
if(form.kingName[2].checked==true) document.getElementById("check").innerHTML="정답입니다.";
else document.getElementById("check").innerHTML="오답입니다.";
}
</script>
</body>
</html>
|
-2) 실행결과
