* 순서도 그리기
- 간략하게 기본 순서도 먼저 그려보기
시작 -> 숫자 입력 -> 연산자 입력 -> 숫자 입력 -> =버튼 -> 계산 ->결과표시 -> 끝
- 변수에 저장해야할 것을 찾아내기 (저장공간부터 만든다)
시작 -> 숫자 입력 -> 연산자 입력 -> 숫자 입력 -> =버튼 -> 계산 ->결과표시 -> 끝
- 이벤트가 발생한 이후의 순서도를 그려본다.
숫자버튼 클릭 -> 숫자를 변수에 저장한다 -> 대기
연산자 버튼 클릭 -> 연산자를 변수에 저장한다 -> 대기
=버튼 클릭 -> 숫자 1과 숫자 2에 연산자를 적용해 계산한다 -> 계산 결과 표시 -> 끝
- 판단이 필요한 경우를 파악하여 순서도를 수정한다.
- 처음에 입력된 숫자와 그 이후에 입력된 숫자를 다른 곳에 저장해야하기 때문에 구분이 필요하다.
- 계산기가 제대로 실행될 수 있게 alert 하기 위해 판단이 필요하다.
* input 태그의 기타속성
- placeholder : 텍스트 박스 안에 회색 글씨 넣어서 무슨 칸인지 알려주거나 표시하기
- value: 박스 안에 글씨 넣어두기
- readonly: 텍스트박스 안에 넣은 value값 수정 불가
- required : 실행되어야만 다음 작동 가능
<input readonly id="operator">
<input readonly type="number" id="result">
-> 수정이 불가능하고 결과값만 표시하는 input 박스를 만들겠다.
* 기본 문법 : 함수
1) 형식 : 예약어 function을 사용 || =>화살표 기호를 사용함.
function() {}
// 또는
() => {}
2) 함수에 이름 붙이기
- 선언문
function a () {}
- 표현식
const b = function() {};
- 화살표 함수
const c = () => {};
3) 호출하기 (call)
함수 a를 선언한 후 a(); 로 함수를 호출한다.
function a() {}
a();
4) 반환값 (return)
함수를 호출(call)할 때 항상 결괏값이 나오는데 이 값을 반환값이라고 함.
function a() {
return 10;
}
a();
10
- 반환값의 기본값 = undefined 인데 반환값을 직접 정하려면 return 문을 추가하면 됨.
- 함수의 반환값을 상수나 변수에 대입할 수도 있음.
function a() {
return 10;
}
const b = a();
console.log(b);
10
- 함수의 실행을 중간에 멈추는 역할 수행
function a() {
console.log('hello');
return;
console.log('return');
}
a();
hello
-> a라는 함수가 있는데 그 함수는 hello를 console.log하고 실행을 멈춘다. return문이 실행되면 그 아래 코드부터는
아예 실행이 되지 않는다.
5) 매개변수와 인수 사용하기
함수 a를 호출하면 argument가 parameter의 자리에 가게 되어서 parameter = 'argument'가 됨.
function a(parameter매개변수) {
console.log(parameter);
}
a('argument');
argument
- 여러개의 매개변수와 인수를 가질 수 있음
function a (w,x,y,z){
console.log(w,x,y,z);
console.log(arguments);
}
a('hello','parameter','argument');
hello parameter argument undefined
Arguments(3) ['hello', 'parameter', 'argument']
화살표 함수에서는 arguments를 사용할 수 없음.
6) 다른 변수 사용하기
함수 안팎에 변수나 상수를 사용하거나 선언할 수 있다.
const a = 100;
function minus2 (x,y) {
return (x-y) * a;
}
console.log(minus2(5,3));
200
* 고차함수 (high order function)
함수를 만드는 함수, 함수를 반환(return)하는 함수.
{와 return을 생략할 수 있음.
const func = (msg) => {
return () => {
console.log(msg);
};
};
// 생략 후
const func = (msg) => () => {
console.log(msg);
};
* if문 중첩 줄이기
const onClickNumber = (event) => {
if (operator) { // 연산자가 입력되었을 때
if (!numTwo) { // 연산자는 입력되었지만 numTwo는 입력되기 전일 때
$result.value = ''; // 값을 빈값으로 초기화해라(numOne의 값을 지워라)
}
numTwo += event.target.textContent; // numTwo가 입력되었을 때의 값을 변수에 저장해라
}else { // 연산자가 입력되기 전이면
numone += event.target.textContent; // event가 발생한 타겟의 textContent가
}
$result.value += event.target.textContent; // 그리고 그 값을 보여줘라
};
1) if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.
$result.value += event.target.textContent;
const onClickNumber = (event) => {
if (operator) { // 연산자가 입력되었을 때
if (!numTwo) { // 연산자는 입력되었지만 numTwo는 입력되기 전일 때
$result.value = ''; // 값을 빈값으로 초기화해라
}
numTwo += event.target.textContent; // numTwo가 입력되었을 때의 값을 변수에 저장해라
$result.value += event.target.textContent; // 그리고 그 값은 보여줘라
}else {
numone += event.target.textContent;
$result.value += event.target.textContent;
}
};
2) 분기점에서 짧은 절차부터 실행하도록 if문을 작성한다.
const onClickNumber = (event) => {
if (!operator) { // 연산자가 입력되지 않았으면
numOne += event.target.textContent; // 첫번째 입력된 숫자로 봐라
$result.value += event.target.textContent; // 그리고 그 값을 보여줘라
}else { // 연산자가 입력되어 있을때
if(!numTwo) { // 아직 두번째 숫자가 입력되지 않았으면
$result.value = ''; // 앞에 값을 빈값으로 초기화해서 보여줘라
}
numTwo += event.target.textContent; // 그 후에 이벤트가 발생한 것을 두번째 숫자변수에 저장해라
$result.value += event.target.textContent; // 그 값을 보여줘라.
}
};
3) 짧은 절차가 먼저 끝나면 return으로 중단한다.
const onClickNumber = (event) => {
if (!operator) { // 연산자가 입력되지 않았으면
numOne += event.target.textContent; // 첫번째 입력된 숫자로 봐라
$result.value += event.target.textContent; // 그리고 그 값을 보여줘라
return;; // 이 밑으로는 실행이 중단됨
}else { // 연산자가 입력되어 있을때
if(!numTwo) { // 아직 두번째 숫자가 입력되지 않았으면
$result.value = ''; // 앞에 값을 빈값으로 초기화해서 보여줘라
}
numTwo += event.target.textContent; // 그 후에 이벤트가 발생한 것을 두번째 숫자변수에 저장해라
$result.value += event.target.textContent; // 그 값을 보여줘라.
}
};
4) else를 제거하여 중첩 하나를 제거한다.
return이 나온 이후에는 else가 필요 없어지니까 없애버린다.
const onClickNumber = (event) => {
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; // 그 값을 보여줘라.
}
};
5) 다음 중첩된 분기점이 나오면 위의 과정을 반복한다.
* If문 / Switch문
1) if 문
if (조건식) {
실행문;
} else if (조건식) {
실행문;
} else {
실행문;
};
2) switch 문
" 조건식(변수)=== 비교조건식(변수와 비교할 값) "일 때 실행문이 실행됨.
switch (조건식) {
case 비교 조건식:
실행문;
}
- 실행문이 여러 개여도 다 실행가능함.
let value = 'A';
switch (value) {
case 'A':
console.log('A');
console.log('B');
}
> A
> B
- else if 처럼 여러 방향으로 분기 가능함.
일치하는 case가 발견된 순간부터 그 밑에는 일치하지 않아도 실행문이 전부 실행됨.
let value = 'B'';
switch (value) {
case 'A':
console.log('A');
case 'B':
console.log('B');
case 'C':
console.log('C');
}
> B
> C
// switch문은 일치하는 case를 발견하면 그 아래 case들의 실행문 모두를 무조건 실행함.
- break문 추가시
정확히 일치하는 case만 실행됨.
예약어 default는 어떠한 case도 일치하지 않을 때 실행하는 case를 만들고 싶을 때 사용함.
let value = 'F';
switch (value) {
case 'A':
console.log('A');
break;
case 'B':
console.log('B');
break;
case 'C':
console.log('C');
break;
default: // 예약어
console.log('아무것도 일치하지 않음');
}
아무것도 일치하지 않음
3) if문과 switch문의 비교
- if문
let fruit = '사과';
if (fruit ==='사과') {
console.log('사과입니다');
}else if (fruit ==='배') {
console.log('배입니다');
}else if (fruit ==='포도') {
console.log('포도입니다');
}else {
console.log('뭔지 모르겠습니다');
}
- switch문
default를 어느 위치에 놔둬 상관없음.
let fruit = '사과';
switch (fruit) {
default:
console.log('뭔지 모르겠습니다');
break;
case '사과':
console.log('사과');
break;
case '배':
console.log('배');
break;
case '포도':
console.log('포도');
break;
}
* 결과 계산하기
document.querySelector("#calculate").addEventListener("click", () => {
if (numTwo) {
//calculate눌렀을 떄 numTwo 입력되어 있으면
switch (
operator //operator의 값이
) {
case "+": // +라면
$result.value = parseInt(numOne) + parseInt(numTwo); //+는 문자열을 숫자로 바꿔줘야해서
break;
case "-":
$result.value = numOne = numTwo;
break;
case "x":
$result.value = numOne * numTwo;
break;
case "/":
$result.value = numOne / numTwo;
break;
default:
break;
}
} else {
// numTwo가 아직 입력되지 않았다면
alert("숫자를 먼저 입력하세요.");
}
});
* 연이어 계산하기
document.querySelector("#calculate").addEventListener("click", () => {
if (numTwo) {
//calculate눌렀을 떄 numTwo 입력되어 있으면
switch (
operator //operator의 값이
) {
case "+": // +라면
$result.value = parseInt(numOne) + parseInt(numTwo); //+는 문자열을 숫자로 바꿔줘야해서
break;
case "-":
$result.value = numOne - numTwo;
break;
case "x":
$result.value = numOne * numTwo;
break;
case "/":
$result.value = numOne / numTwo;
break;
default:
break;
}
$operator.value = ""; // 연산자칸을 빈칸으로 만들어라
numOne = $result.value; // 첫번째 결괏값을 numOne변수에 저장해라
operator = ""; // operator 변수를 빈값으로 만들어라
numTwo = ""; // numTwo 변수를 빈 값으로 만들어라
} else {
// numTwo가 아직 입력되지 않았다면
alert("숫자를 먼저 입력하세요.");
}
});
*
*
*
*
*
*
'Studying > Javascript' 카테고리의 다른 글
# Let's get it 자바스크립트 프로그래밍 : 로또 추첨기 (0) | 2023.03.14 |
---|---|
# Let's get it 자바스크립트 프로그래밍 : 숫자야구 게임 (0) | 2023.03.13 |
바닐라 JS로 크롬 앱 만들기 #3.0~#3.8 (0) | 2023.03.09 |
# Let's get it 자바스크립트 프로그래밍 : DOM객체 다루기 (1) | 2023.03.07 |
바닐라 JS로 크롬 앱 만들기 #1.0~#2.16 (0) | 2023.02.21 |