계산기만들기
-
JavaScript 입문 : 계산기 만들기 응용 - 연달아 계산하기 (1)컴퓨터 알아가기/JavaScript 2022. 3. 10. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 고차함수의 기본형은 눈에 익히게 사용할 필요가 있습니다. 아래 함수식을 가끔 머리속에 그려 두시기 바랍니다. const function ( ) => { return ( ) => { console.log('JS'); }; }; 중괄호와 return( ) 함수가 같이 있으면 생략도 가능합니다. const function ( ) => ( ) => { console.log('JS'); }; ▒ 연달아 계산하기 (1) 지금까지 만든 계산기는 연달아서 하는 계산이 되지 않습니다. 그냥 기본적인 숫자 두개를 가지고 하는 계산기의 역할을 만들어 보았는데 지금부터는 연달아 계산이 되는 코딩을 하고자 합니다. 저도 초보자인 관계로 연달아 계산하는 과정을 ..
-
JavaScript 입문 : 계산기 만들기 - 결과 계산, switch문을 if문으로, Clear 적용컴퓨터 알아가기/JavaScript 2022. 3. 8. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. ▒ 계산결과 출력 1. 순서도 이제는 계산결과를 출력하기 위해 등호 버튼을 눌렀을때 순서도를 다시 볼 필요가 생겼습니다. 간단하게 생각하는게 이제 도움이 되더라구요. 계산을 하기 위해서 연산자 다음에 계산되는 수 (편의상 두번째 수)가 존재하는냐 존재하지 않느냐를 구분해 줘야 합니다. 존재하지 않으면 경고를 내보내고 존재하면 사직연산에 대한 게산을 하면 됩니다. 다행히 자바스크립트가 작동되는 브라우저에서 확인해 보면 브라우저 자체에서 계산이 되도록 설계가 되어있기 때문에 일반 사칙연산을 진행하면 됩니다. 2. 사칙연산 코딩 if문을 사용하여 연산자 이후 나오는 두번째 수 여부에 따라 계산을 합니다. 특히 이번에는 Switch문으로 각 c..
-
JavaScript 입문 : 계산기 만들기 - if문 중첩 줄이기컴퓨터 알아가기/JavaScript 2022. 3. 3. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간 계산기 연산자 함수를 사용하는데 있어 다음과 같이 if문안에 if문을 사용 하였습니다. 프로그램을 하다보면 if문들이 중첩이 되는 경우가 발생이 되는데 가능한 중첩을 없애서 깔끔하게 하는게 좋습니다. 그럼 if문의 중첩을 제거해 보도록 하겠습니다. 1. if문 내에서 공통으로 사용되고 있는 항목(함수)을 각 분단별로 배치 if문내에 공통적으로 사용되고 있는 항목은 $screen_result.value += number; 입니다. 이 항목을 다음과 같이 각 문단별로 써 줍니다. 2. 짧은 문장을 if문 맨 앞으로 이동 보통 짧은 문장은 else문 뒤에 나오는 경우가 많은데 이 경우에서도 else문 다음에 나오는 문장들이 짧습니다...
-
JavsScript 입문 : 계산기 만들기 - 숫자버튼 함수 및 고차함수 이용 중복제거컴퓨터 알아가기/JavaScript 2022. 2. 21. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간 만들어 보았던 계산기의 프레임입니다. 이제부터는 이 프레임을 이용하여 각각의 버튼에 자바스크립트 이벤트를 연결하여 실제 계산기가 작동하는 원리를 공부해 보고자 합니다. 1. HTML에 자바스크립트 파일 연결하기 CSS파일처럼 태그내에 다음과 같이 자바스크립트 파일을 연결해 줍니다. 이제는 script.js라는 파일을 깉은 폴더에 만들어서 사용해도 됩니다. VS Code 위 3가지 파일이 같은 폴더안에서 서로 연동이 된다고 보면됩니다. 2. 기본과정 (변수만들기, 태그선택하기, 이벤트 활성화 준비) 순서도에 따라 시작에 대한 변수를 만들고 태그를 선택하고 각각의 ID를 이용하여 이벤트활성화 준비를 합니다. 가능한 초보인만큼 주석을..
-
JavaScript 입문 : 계산기 만들기 - CSS활용 계산기 그리기컴퓨터 알아가기/JavaScript 2022. 2. 16. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있으며 CSS는 그동안 공부한 내역을 가지고 복습하면서 만들어 가고자 합니다. 우선 계산기의 기본모양을 HTML과 CSS를 통하여 만들어야 합니다. ▒ CSS를 이용한 계산기 모양 1. 원래 계산기 모양 본 과정 공부에 도움을 받는 사이트에서는 자바스크립트 강좌가 메인이기 때문에 구체적으로 CSS를 활용힌 강의는 진행이 되지 않습니다. 그래도 계산기 그림하에 작동하는 프로그램이 필요합니다. 아래 그림은 아주 기본적인 계산기 모양입니다. 2. CSS를 이용하여 계산기 꾸미기 ① 태그와 태그를 이용하여 계산기 기본형 만들기 아래 그림과 같이 버튼을 16개 만들어서 기본 계산기 모양을 만들고 각각에 id를 부여합니다. 아울러 공부를 하다가 모르는 문법들..
-
JavaScript 입문 : 계산기 만들기 - 순서도컴퓨터 알아가기/JavaScript 2022. 2. 15. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 이제부터는 조금 더 다른 자바스크립트를 배워보고자 합니다. 그 중 하나인 계산기 작동을 하게해서 결과값을 도출하는 계산기에 대한 자바스크립트 프로그램을 공부해 보고자 합니다. ▒ 계산기 순서도 지난 시간까지 배웠던 순서도를 계산기에도 적용하여 프로그래밍 하는 습관이 필요합니다. 아직 실력이 되지 않기때문에 공학용 계산기는 만들수 없고 사칙연산이 가능한 계산기를 만들면서 필요한 자바스크립트 언어를 배우는 목적으로 해야겠네요. 1. 기본 순서도 계산기의 기본원리에 대한 순서도를 만들어 봅니다. 아래 그림과같이 계산기를 작동하는 순서대로 순서도를 그려 봅니다. 2. 순서도 세분화 기본순서도 기준으로 각각 항목에 대해 세분화를 시켜야 합니다 ...