alt + 위 or 아래 방향키
두 개의 줄. 서로의 줄 위치 바꾸기
이게 강의에서 올려준 최종 코드 따라친 완성본이라할 수 있다.
강의에서 if문의 복잡함을 완화해주는 방법, 코드를 수정하는 모습을 보여주기 등을 해주었으나
솔직히 내가 한,두번 따라해서 얻을 스킬이 아니다.
답지 따라서 읽으면 알겠는데... 조금만 비틀기해도 ㅈ되는... 이 상황 예전과 참 비슷하다? ㅋㅋㅋㅋ
1문제당 이해하는데 30분을 걸리는 걸, 시험에서는 비튼 문제를 30분만에 풀어라고... 했었다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>계산기</title>
<style>
* { box-sizing: border-box }
#result { width: 180px; height: 50px; margin: 5px; text-align: right }
#operator { width: 50px; height: 50px; margin: 5px; text-align: center }
button { width: 50px; height: 50px; margin: 5px }
</style>
</head>
<!-- 계산기 버튼 구현 -->
<body>
<input readonly id="operator">
<input readonly type="number" id="result">
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>
</div>
<div class="row">
<button id="num-4">4</button>
<button id="num-5">5</button>
<button id="num-6">6</button>
<button id="minus">-</button>
</div>
<div class="row">
<button id="num-1">1</button>
<button id="num-2">2</button>
<button id="num-3">3</button>
<button id="divide">/</button>
</div>
<div class="row">
<button id="clear">C</button>
<button id="num-0">0</button>
<button id="calculate">=</button>
<button id="multiply">x</button>
</div>
<script>
let numOne ='';
let operator ='';
let numTwo ='';
const $operator = document.querySelector("#operator");
const $result = document.querySelector("#result");
const onClickNumber = (event) => { // 함수가 함수를 return하고 있다.
if (!operator) { //연산자 칸이 비어있다.
numOne += event.target.textContent;
$result.value += event.target.textContent;
return;
}
//연산자 칸이 비어있지 않다
if (!numTwo) {
$result.value = '';
}
numTwo += event.target.textContent; // 내가 클릭한 글자를 그
$result.value += event.target.textContent;
};
document.querySelector('#num-0').addEventListener('click', onClickNumber);
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-4').addEventListener('click', onClickNumber);
document.querySelector('#num-5').addEventListener('click', onClickNumber);
document.querySelector('#num-6').addEventListener('click', onClickNumber);
document.querySelector('#num-7').addEventListener('click', onClickNumber);
document.querySelector('#num-8').addEventListener('click', onClickNumber);
document.querySelector('#num-9').addEventListener('click', onClickNumber);
const onClickOperator = (op) =>{ return () => {
if (numTwo) {
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
$result.value = numOne - numTwo;
break;
case '*':
$result.value = numOne * numTwo;
break;
case '/':
$result.value = numOne / numTwo;
break;
default:
break;
}
numOne = $result.value;
numTwo ='';
}
if (numOne) {
operator = op;
$operator.value = op;
} else {
alert('숫자를 먼저 입력하세요.');
}
};
}
document.querySelector('#plus').addEventListener('click', onClickOperator('+'));
document.querySelector('#minus').addEventListener('click', onClickOperator('-'));
document.querySelector('#divide').addEventListener('click', onClickOperator('/'));
document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));
document.querySelector('#calculate').addEventListener('click', () => {
if (numTwo) {
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
$result.value = numOne - numTwo;
break;
case '*':
$result.value = numOne * numTwo;
break;
case '/':
$result.value = numOne / numTwo;
break;
default:
break;
}
$operator.value ='';
numOne = $result.value;
operator = '';
numTwo = '';
} else {
alert('숫자를 먼저 입력하세요');
}
});
document.querySelector('#clear').addEventListener('click', () => {
});
</script>
</body>
|
cs |
아래처럼 가벼운 계산기부터 만들어 봤어야 됬는데 윗처럼 어려운 것부터 하니깐 잘 진도가 안나가지.
<script type="text/javascript">
function add() {
let a = document.getElementById("op1").value;
let b = document.getElementById("op2").value;
document.getElementById("result").value = parseInt(a) + parseInt(b)
}
function minus() {
let c = document.getElementById("op3").value;
let d = document.getElementById("op4").value;
document.getElementById("result2").value = parseInt(c) - parseInt(d)
}
function multiply() {
let e = document.getElementById("op5").value;
let f = document.getElementById("op6").value;
document.getElementById("result3").value = parseInt(e) * parseInt(f)
}
function divide() {
let g = document.getElementById("op7").value;
let h = document.getElementById("op8").value;
document.getElementById("result4").value = parseInt(g) / parseInt(h)
}
</script>
<form>
<input id="op1" type="text" size="2"> + <input id="op2" type="text" size="2">
<input type="button" value="=" onclick="add()">
<input type="text" id="result" size=3>
</form>
<form>
<input id="op3" type="text" size="2"> - <input id="op4" type="text" size="2">
<input type="button" value="=" onclick="minus()">
<input type="text" id="result2" size=3>
</form>
<form>
<input id="op5" type="text" size="2"> * <input id="op6" type="text" size="2">
<input type="button" value="=" onclick="multiply()">
<input type="text" id="result3" size=3>
</form>
<form>
<input id="op7" type="text" size="2"> / <input id="op8" type="text" size="2">
<input type="button" value="=" onclick="divide()">
<input type="text" id="result4" size=3>
</form>
개발과 코테는 느낌이 다르단 말이지...
코테 잘하는게 필요한데.. 결과물은 개발실력으로 나온단 말이지?
그때 방법이
기출을 돌리는 것.
객관식을 돌리는 것.
내가 기출을 다 맞추진 않았음.
그런데 객관식으로 갔단 말이지?
기출은 기본이론의 이해.
객관식은 기본이론 빠르게 짜맞추는 연습.
코테는 나중에 가면 암기 부분이 크다. 유형마다 시간에 따라 그 방식이 통과가 될수도 있고, 안될수도 있다.
그래서 문제 유형을 반복 학습으로 외워간다.
개발은 기본이론을 학습하고 전반적으로 응용하는게 중요하다. 계속 새로운 방식이 등장한다.
<과거의 기억>
기초가 안되서. 다시 기초강의를 들었다? 그런데 공부가 안되다가
사교수를 만났지.
사교수를 통해 이론 다시 이해하고. 프레임을 세웠다.
프레임 후에 기출을 주구장창 풀었다.
기출을 풀고. 객관식 풀다가 객관식 너무 어려운 상태에서
다시 기본이론 압축 강의 들었다.
객관식 문제를 풀었다. 시험 점수가 정체되었다.
객관식 어려운 문제까지 계속 풀었다.
모르면 강의 도움 받으면서 최대한 많이 문제를 풀었다.
우선 목표는 1일 1플젝이 될 수준.
'🗃️javascript > 프로젝트' 카테고리의 다른 글
| node.js로 html화면과 mysql 연결 및 값 저장 || query문 '?'쓰는 이유 (0) | 2023.11.04 |
|---|---|
| 숫자야구게임 (0) | 2023.06.19 |
| 사칙연산 계산기(1)[중복제거 : 고차함수와 target.event.textContent ] (0) | 2023.04.05 |
| 쿵쿵따 게임 (0) | 2023.04.04 |
| 끝말잇기 게임 (0) | 2023.03.28 |