[JavaScript] 연산을 해보자 - 1편

안녕하세요. 개발 토끼입니다.

 

그간 열심히 올린다는 강좌가 조금 늦어져 너무 죄송하게 생각합니다. ㅠ.ㅠ

 

제가 개발하는 패턴이 이것 저것 다양한 것들을 개발하는 스타일이라 오늘은 저거 했다고 내일 다른 거 하는 습성이 있습니다.

 

 

 

그치만, 자바스크립트 만큼은

 

 

 

놓치지 않을 거예요~

 

 

 

ㅎㅎㅎ 이제 공부를 시작하도록 합시다.

 

오늘 다룰 내용은 JavaScript의 연산에 대해서 다루어 볼까 합니다.

 

연산이라 함은 흔히 우리가 초등학교 때 배운 더하기(+), 빼기(-), 곱하기(*), 나누기(/)를 뜻합니다.

 

2가지 이상의 변수들을 위의 사칙연산을 통해 새로운 답을 찾아내는 과정이죠.

 

이러한 사칙 연산은 컴퓨터에게 아주 중요한 의미를 가집니다.

 

 

 

왜요?

 

 

 

컴퓨터가 탄생하게된 이유를 생각하면 아주 쉽게 이해 할 수 있습니다.

 

인간은 창조와 상상 같은 새로운 무언가를 탄생시키기에 아주 적합한 두뇌를 가지고 있습니다.

 

그래서 여러가지 도구를 만들어 생활했고 인간이 가진 신체적 약점을 극복하고 오늘날 지구 상에서 가장 번창한 동물 중 하나가 되었습니다.

 

근데, 우리 인간이 가진 상상력은 너무나 무한하고 넘쳐나는 호기심을 조절하지 못하는 경향이 있습니다.

 

궁금한 것이 있으면 그 답을 알고 싶어하죠.

 

 

예를 들어 1,765,121,100,047,778,123,302,787,567,181,982,246,663,112,119,911 이 숫자의 제곱은 무엇일까? 하고 생각한다든지

 

혹은 임의의 숫자가 소수 인지 아닌지를 파악하는 것들 말이죠.

 

 

사람의 머리로 계산할 수 있으나 인간의 두뇌는 한 가지의 연산에 대해서 장시간의 연산을 허락하지 않습니다.

 

어떤 이는 수학 자체를 싫어할 수도 있고 어떤 이는 집중력이 흩어져 저 위와 같은 큰 수를 계산할 수 없게 되죠.

 

그렇다면 이렇게 반복적인 연산 혹은 작업을 정확하게 대신해줄 누군가가 필요합니다.

 

 

 

그것이 바로 컴퓨터죠.

 

 

 

 

현재 우리는 인터넷을 통해 웃긴 글을 보며 지내는 나날들이 더 많지만 원래 컴퓨터의 용도는 연산 입니다.

 

연산하지 못하는 컴퓨터는 존재할 가치가 없는 거죠. 지금도 여러분의 컴퓨터는 연산을 하고 있습니다.

 

그래서 연산은 컴퓨터에게 아주 중요한 기능 중 하나 입니다.

 

 

 

 

쓰다 보니 또 잡설이 길어졌군요. 본격적으로 프로그래밍에 들어가봅시다.

 

 

 

WebStorm을 실행합니다.

 

기존에 사용하셨던 index.html을 실행하셔도 되고 새로운 HTML 파일을 추가 해서 진행하셔도 무방합니다.

 

저는 새로운 HTML 파일을 추가 하겠습니다.

 

 

 

새 HTML 추가하기.

 

 

 

 

 

이름은 Calulation이라고 명명하겠습니다.

calculation은 우리나라 말로 계산, 연산이라는 뜻입니다.

 

 

 

 

 

 

 

공부할 때 쓰는 기본 양식입니다.

같이 공부하시는 분들은 이 기본양식을 다른 곳에다가 저장하셔도 좋고

그냥 제 블로그에서 보셔도 무방합니다.

저는 항상 이 기본 양식에서 출발하여 강좌를 진행하겠습니다.

 

 

 

 

 

document.write() 를 알아보자.

저번엔 <p> 태그를 통해서 HTML 화면에 결과값을 출력했으나 

오늘부턴 자바스크립트에 좀 더 신경쓰기 위해 

document.write() 함수를 쓰도록 할 것입니다.

간단하게 설명을 드리면 document.write("~ 뭐가 들어가~");

이렇게 쓰면

~뭐가 들어가~ 가 출력됩니다. ㅎㅎㅎㅎ 간단하죠?

그럼 출력해봅시다.

WebStorm에서 ALT + F2 키를 누르시면 각 브라우저 별로 실행이 가능합니다.

 

 

 

 

 

오늘은 연산을 공부하자!

아주 손쉽게 결과가 출력되는 것을 보실 수 있을 겁니다.

그럼 앞서 말씀드린 대로 자바스크립트의 사칙연산을 해보도록 하죠

 

 

 

 

 

스크립트를 작성합니다.

result라는 변수를 선언하여  1 더하기 1 연산을 해보도록 하죠.

1더하기 1 연산을 하면 result에 결과 값이 담겨지게 됩니다.

그럼 result를 출력해보죠.

document.write(result); 라고 작성하시면

위와 같이 이상한 내용이 나올 것입니다.

 

왜 이러지?

 

ㅎㅎㅎㅎ 아마 브라우저로 출력해도 아무런 내용이 나오지 않을 것입니다.

그 이유를 자세히 살펴보도록 하죠.

 

먼저, WebStorm에 내장된 DHTML.js를 통해 우리가 사용한 방식에

무슨 문제가 있는 지 살펴 봅시다.

 

정의로 이동하기!

CTRL(컨트롤)을 누르신 상태에서 document.write()에서 write를 클릭해보세요.

 

 

 

 

 

짠! 정의로 이동하여 DHTML.js를 보실 수 있습니다.

코드가 많이 나왔지만 두려워 하실 것 없습니다.

나중에 생각하시면 여기 있는 내용들이 "자바스크립트에서 가장 쉬운 코드이구나 ...." 하고 생각하실 겁니다.

 

 

 

 

 

우리가 틀린 내용은 무엇일까?

prototype.write = function(text) 이 부분을 보시면 됩니다.

프로토 타입이니 뭐니 하는 건 무시하시고 write = function(text) 이 부분만 보세요.

write라는 function에는 텍스트만 들어갈 수 있다고 하네요.

텍스트는 말 그대로 문자열만 들어갈 수 있다는 거죠.

 

 

1 + 1 = 2 인데 이것도 문자열 아닌가요??

 

프로그래밍에서는 숫자와 숫자의 연산의 경우 데이터 종류를 숫자로 간주하고

 

문자열로 간주하지 않습니다.

 

문자열로 변환하려면 특별한 문구가 필요하죠.

 

그것은 나중에 알아보도록 합시다.

 

 

 

 

 

result의 내용을 문자열로 바꾼다면?

이렇게 되면 document.write(result)에서 밑줄이 가는 에러 표시가 나오지 않게 되는 군요.

즉, write() 괄호 안에는 무조건 문자열만 들어가야 하네요. ㅎㅎㅎㅎ

 

 

그러면 숫자를 문자열로 바꾸어 준다면 곧바로 표시 가능하지 않을까요?

 

네 ^.6 맞습니다.

앞서 약간 언급했지만 숫자에서 문자열로 바꾸어 준다면 write() 함수에서 출력이 될 수 있습니다.

그럼 바꿔봅시다.

 

 

 

 

 

 

오늘도 언제나 JSHint를 도움 받아서 작성하기!! 

JSHint를 사용하는 방법은 이전 편들을 보신 분들은 잘 아시겠지만

이번 편은 처음 보신 분들을 위해서 다시

ALT + Enter키

 

 

 

 

 

toString() 함수를 사용해 숫자를 문자로 전환하기

이전 시간에도 사용했던 toString() 함수입니다.

프로그래밍 하시면서 많이 쓰는 함수라 굳이 암기 안하셔도

머릿속에 오랫동안 기억에 남을 거에요 ㅎㅎㅎㅎ

 

 

 

 

 

 

그럼 브라우저에서 결과를 실행해봅시다.

 

 

 

 

 

 

1 + 1 은 2 !!

결과 값이 아주 정확하게 나오네요.

그럼 다른 연산도 해봅시다.

일반적인 빼기 연산 말고 음수가 나올 수 있는 상황을 만들어 보아요.

 

 

 

 

 

 

1 - 5 = ?

 

 

 

 

 

-4 !!

자바스크립트는 음수 표현도 할 수 있습니다.

사실, 프로그래밍에서 음수, 양수를 표현하는 것은 그리 대단한 것은 아닙니다.

ㅎㅎㅎㅎㅎ 그렇다면 이번엔 소수점 자릿수를 표현해봅시다.

 

 

 

 

 

 

 

2/ 10 = ? ㅎㅎㅎ 벌써 결과 나오셨나요?

 

 

 

 

 

 

 

 

분수 표현이 아닌 소숫점으로 표현되는 자바스크립트

보통 소수점으로 표현하는 것이 연산에 간결성을 유지할 수 있어서

우리가 학교에서 흔히 사용했던 분수는 찾아볼 수 없습니다.

프로그래밍에서는 소수점으로 연산을 할 수 있습니다.

 

네! 여기까지 잘 따라오셨는지 모르겠네요. ㅎㅎㅎㅎ

너무 쉽다고 생각하시는 분들이 아주 많으실 거라 생각합니다.

그럼 프로그래밍으로 구구단을 짜보는 단계로 넘어가 봅시다.

 

 

 

 

 

 

// 썌얘 아니라  //TODO 사용하기

프로그래밍을 하다보면 이 로직을 언젠간은 작성해야 하는 데 지금 당장 작성하지 못하는 경우가 있습니다.

그럴경우에 보통 // 을 써서 주석으로 남겨 놓기도 하죠.

주석은 프로그래밍 로직에는 아무런 영향을 주지 않고 코드 내부에 일종의 메모를 남길 수 있는 기능을 뜻합니다.

근데 위 사진에 보시면 일반적인 주석은 저렇게 회색빛이 나서 눈에 잘 띄지 않죠.

 

이러한 문제를 해결하기 위해 JetBrains 사에서 제공하는 모든 Tool에서는 TODO라는 기능을 지원합니다.

//TODO라고 써보세요.

 

위와 같이 색상이 바뀐 주석을 보실 수 있습니다.

 

나중에 큰 규모의 자바스크립트 프로그램을 작성하실 때 유용하게 사용하실 수 있을 겁니다. ㅎㅎㅎㅎ

저도 강좌를 진행하면서 계속해서 보여드릴 꺼에요. ㅎㅎ

 

 

 

 

 

2단을 만들어 보자

변수 gugudan 이라고 선언하고 그 초기 값을 2로 설정해줍니다.

 

gugudan에 왜 밑줄이 가지???

 ㅎㅎㅎ 무시 하셔도 됩니다.

웹스톰은 사용자가 작성한 변수 명의 철자까지 검사합니다.

알아보기 쉬운 혹은 올바른 철자를 사용해 변수를 사용함으로써 코드의 가독성을 높이는 것이죠.

 

지금은 그냥 무시하고 다음 단계를 진행해 봅시다.

 

 

 

 

 

 

반복문을 사용하자.

프로그래밍을 이미 접하신 분들이라면 다들 한번쯤 써보셨을 겁니다.

for 반복문

모르시는 분들을 위해 간단하게 설명 드리면

var i = 1; 은 반복이 시작할 값입니다. '1부터 시작하겠다'는 거죠.

i<=9; 는 '반복이 9까지 가면 멈추겠다' 입니다.

i++ 는 반복문이 한번 실행될 때 i의 값을 1씩 증가 시키겠다는 것입니다.

 

즉, 1부터 9까지 1단계씩 반복을 진행하겠다는 뜻이죠. ㅎ

 

근데,

반복문을 작성하다 보니 코드가 몰린 눈코입 처럼 딱 붙어 있네요.

코드를 정리 해줍시다.

 

CTRL(컨트롤) + ALT(알트) + L 을 눌러 보세요.

 

 

 

 

 

 

 

 

 

 

정리된 코드의 모습

for 반복문이 일정한 간격을 유지하면서 읽기 좋게 바뀌었군요.

코드 정리하는 단축키는 많이 사용하셔요.

그래야 나중에 코드를 봐도 어렵지 않게 보실 수 있습니다.

코드가 딱 붙어있으면 읽기 힘들어요.

 

 

 

휴~ 작성하다보니 너무 길어졌네요.

보시는 분들도 너무 길어서 질려 하시겠네요. ㅎㅎㅎ

 

프로그래밍의 즐거움을 드리고자 이렇게 작성하는 포스팅인데

 

지루함을 드리면 안되겠죠? ㅎㅎㅎ

 

오늘은 이만 줄이고 내일 2편을 짧게 준비해서 오도록 하겠습니다.

 

오늘도 좋은 밤 보내시고 좋은 꿈 꾸시길 바랍니다.

 

내일 뵐께요. 안뇽~ㅎㅎㅎ