prompt 이용해 사칙연산
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload = "insertQuestion()">
<h1 id = "question"></h1>
<script>
function insertQuestion(){
let q = prompt("사칙연산의 수식을 입력하세요. 예(100+50)");
let answer = eval(q);
let result = q + "="+answer;
document.getElementById('question').innerHTML = result;
}
</script>
</body>
</html>eval()함수를 활용하여 사칙연산을 구현하였다. 따로 메서드를 만들지 않고 실행하였으며 id값을 가져오면서 입력한 값의 결과를 가져온다. 또한 prompt를 이용해 박스에 값을 입력한다.
또한 question이라는 ID를 가진 HTML 요소의 내용을 result로 설정하여, 계산 결과를 화면에 표시했다.
페이지 이동
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>History 객체</h1>
<a href = "#" onclick = "history.back();return false;">이전 페이지로 이동</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> History객체</h1>
<a href = "history2.html">페이지 이동</a>
<a href = "#" onclick = "history.forward();return false;">앞 페이지 이동</a>
</body>
</html>
id값 가져와서 적용시키기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>HTML</li>
<li id = "active">CSS</li>
<li>Javascript</li>
</ul>
<script>
let li = document.getElementById('active');
li.style.color = "tomato";
</script>
</body>
</html>코드를 보면 알겠지만 CSS만 id를 active로 할당해주고, getElementById를 이용하여 id값을 받아온 후 색깔을 tomato로 입힌다. 핵심은 id값을 할당하고 받아온다는 것.
- 번외)
<body>
<!--onclick : 클릭했을 때-->
<input type = "button" value = "Hello " onclick ="alert('Hello world')"/>
</body>이 코드가 무엇을 의미하는지 아는가? 정말 간단한 코드이다. 타입을 버튼을 줌으로서 버튼을 만들고, 그 버튼의 이름을 hello로 지정, 버튼을 눌렀을 때 Hello world가 출력된다.
인증번호 무작위로 할당하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="authNo()">
<!--
1. 페이지를 최초로 load시 랜덤 인증번호 5자리가
id auth 세팅
(onload,
document.getElementById(해당id).innerHTML = 값;)
2. 인증번호 새로 받기버튼 클릭시, 페이지 새로고침
(location.reload())
-->
<p>
고객님의 인증번호는
<strong id="auth">00000</strong> 입니다.
</p>
<input type="button" value="인증번호 새로 받기"
onclick="refresh()"/>
<script>
function authNo(){
// 5자리 인증번호를 id값이 auth인 요소에게 출력
let value = "";
for( let i=0; i<5; i++ ){
value += random(0,9);
}
document.getElementById("auth").innerHTML= value;
}
function random(n1, n2){
return parseInt(Math.random() * (n2-n1+1)) + n1;
}
function refresh(){
location.reload();
}
</script>
</body>
</html>처음 인증번호를 00000으로 설정하지만 authNo 함수를 통해 생성한 인증번호로 업데이트 하고, 랜덤 값을 받아오는 함수를 만들어 값을 부여받는다. location.reload를 통해 계속해서 페이지를 새로고침한다.
초보 개발자 이야기