function calc(){
//첫번째 수 입력
var x = parseInt(prompt("첫번째 수 입력"));
//두번째 수 입력
var y = parseInt(prompt("두번째 수 입력"));
//연산자 입력
var z = prompt("연산자 입력(+,-,*,/,% 중 하나)");
//계산 - 연산자 비교 - switch
switch(z){
case "+":
result = x + y;
break;
case "-":
result = x - y;
break;
case "*":
result = x * y;
break;
case "/":
result = x / y;
result = result.toFixed(2);
break;
}
//출력내용
if(result == "잘못 입력하셨습니다."){
str = result;
}else{
str = "첫번째 수 : " + x + "<br>";
str += "두번째 수 : " + y + "<br>";
str += "연산자 : " + z + "<br><br>";
str += x + " " + z + " " + y + " = " + result;
}
//div 요소 검색 - 첫번째 div만 검색한다.
out = document.querySelector('div');
//출력
out.innerHTML = str;
}
//function score(){}
var score = function(){
//입력
num1 = prompt("점수를 입력하세요.");
//계산 - 수우미양가 - switch
num2 = parseInt(num1/10);
switch(num2){
case 9:
case 10:
str = "수";
break;
case 8:
str = "우";
break;
case 7:
str = "미";
break;
case 6:
str = "양";
break;
default:
str = "가";
break;
}
//출력 내용 작성
content = "점수 : " + num1 + "<br>" + "결과 : " + str;
//출력
out = document.getElementById('out');
out.innerHTML = content;
}
</script>
<style>
div{
border: 1px solid green;
padding: 10px;
font-size: 1.5em;
}
</style>
</head>
<body>
<pre>
확인버튼 클릭하면 두개의 수와 연산자를 입력받는다
입력은 prompt를 이용한다
연산자를 비교해서 두수를 연산한다
div에 출력한다
</pre>
<input type="button" onclick="calc()" value="확인">
<br>
<div></div>
<br>
<hr>
<pre>
버튼 클릭하면 prompt를 이용하여 0~100사이의 정수를 입력 한다
switch case문을 이용하여 수우미양가 를 계산 후 출력
출력은 id="out"에 한다
</pre>
<input type="button" onclick="score()" value="확인">
<br>
<div id="out"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
var calc = function(op){
xvalue = parseInt(document.getElementById('x').value);
yvalue = parseInt(document.getElementById('y').value);
funSwitch(op, 'result1');
}
var vcalc = function(but){
xvalue = parseInt(document.getElementById('ix').value);
yvalue = parseInt(document.getElementById('iy').value);
funSwitch(but.value, 'result2')
}
var funSwitch = function(value, vdiv){
switch(value){
case "+":
res = xvalue + yvalue;
break;
case "-":
res = xvalue - yvalue;
break;
case "*":
res = xvalue * yvalue;
break;
case "/":
res = xvalue / yvalue;
res = res.toFixed(2);
break;
}
str = "첫번째 수 : " + xvalue + "<br>";
str += "두번째 수 : " + yvalue + "<br>";
str += "연산자 : " + value + "<br>";
str += xvalue + value + yvalue + "=" + res + "<br>";
out = document.getElementById(vdiv);
out.innerHTML = str;
}
</script>
</head>
<body>
<pre>
각각의 버튼에서 함수 호출시 파라미터로 +,-,*,/를 전달한다
onclick="calc('+')"
onclick="calc('-')"
onclick="calc('*')"
onclick="calc('/')"
</pre>
<form>
첫번째수<input type="text" id="x"><br>
두번째수<input type="text" id="y"><br>
<input type="button" value="+" onclick="calc('+')">
<input type="button" value="-" onclick="calc('-')">
<input type="button" value="*" onclick="calc('*')">
<input type="button" value="/" onclick="calc('/')">
</form>
<div id="result1"></div>
<br>
<hr>
<pre>
각각의 버튼을 클릭할 때 vcalc 함수 호출
파라미터는 클릭하는 버튼의 객체 자신인 this로 전달한다
script에서 this에 해당하는 버튼의 value값을 비교하여 계산한다
</pre>
<form>
첫번째수<input type="text" id="ix"><br>
두번째수<input type="text" id="iy"><br>
<input type="button" value="+" onclick="vcalc(this)">
<input type="button" value="-" onclick="vcalc(this)">
<input type="button" value="*" onclick="vcalc(this)">
<input type="button" value="/" onclick="vcalc(this)">
</form>
<div id="result2"></div>
</body>
</html>
반복문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
var proc1 = () =>{
sum = 0;
for(i = 1; i<=100; i++){
sum += i;
}
str = "1~100 합 = " + sum;
document.getElementById('result1').innerHTML = str;
}
var proc2 = () =>{
dan = prompt("구구단 몇 단을 출력할까요?")
str ="";
for(i = 1; i <= 9; i++){
str += `${dan} * ${i} = ${dan*i} <br>`
}
document.getElementById('result2').innerHTML = str;
}
var proc3 = () =>{
str = "";
for(i = 1; i < 10; i++){
for(j = 2; j <10; j++){
str += `${j} * ${i} = ${j*i} \t`;
}
str += `<br>`;
}
document.getElementById('result3').innerHTML = str;
}
</script>
</head>
<body>
<pre>
es6 백틱
백틱을 이용하는 문자열을 템플릿 문자열이라고 하고 기호로 ``
템플릿 문자열안에서 변수는` ${변수} 일반 문자열`
1. 1~100까지의 합을 구한다
2. 수를 입력받아 구구단을 출력한다
</pre>
<input type="button" value="확인" onclick="proc1()">
<div id="result1"></div><br>
<input type="button" value="확인" onclick="proc2()">
<div id="result2"></div><br>
<input type="button" value="확인" onclick="proc3()">
<div id="result3"></div><br>
</body>
</html>
