코딩 강의/왕초보인데 가능할까요

[왕초보 코딩 5강] 웹 계산기 만들기 1 - HTML, JavaScript(자바스크립트)

아미넴 2020. 9. 2.
반응형

#지난강의

sangminem.tistory.com/22

 

[왕초보 코딩 4강] 프로그래머 첫걸음

이 글을 우연히 보고 들어오신 분이 대부분이겠죠? 만약 꾸준히 공부할 마음이 생겨서 일부러 찾아 오신 분이라면 책임지고 끝까지 가르쳐 드리겠습니다. 열정만큼은 이미 합격입니다. 코딩 별

sangminem.tistory.com

 

지금까지는 내가 얼마나 코딩에 흥미를 느낄 수 있을까 알아보기 위한 시간이었다면 5강부터는 그 흥미를 바탕으로 조금씩 실력을 늘려가는 시간을 가져보도록 할거예요.

 

이 강의는 자연스럽게 코딩과 가까워지고 싶은 분들을 위한 것이므로 진행에 있어서 필요하지 않은 교과서적인 설명은 따로 하지 않습니다.

 

또한 코딩 왕초보를 위한 강의인 만큼 전문적인 용어는 가급적 쓰지 않고 이해를 바탕으로 진행하겠습니다.

웹 언어에 대한 기초적인 사항을 알고 계신 분들은 조용히 뒤로가기를 눌러주세요 :)

 

자 그렇다면 어떤 걸 해보는 게 좋을까요?

라는 고민을 하다가 모두가 쉽게 이해할 수 있는 계산기를 한 번 만들어 보는 것이 의미가 있지 않을까 하고 생각을 해 봤어요.

강의와는 관련 없는 이미지입니다

 

물론 프로그래밍 언어는 웹 브라우저가 이해할 수 있는 HTML 및 JavaScript를 사용할 예정입니다.

 

모양이 예쁘고 다양한 기능을 가진 계산기는 당장 만들 수 없겠지만 단순 사칙 연산이 가능한 정도는 해 볼만 하지 않을까요.

아직은 감이 안 잡히시겠지만 설명을 듣고 따라오시면 어렵지 않게 이해할 수 있을 거예요.

 

간단하게 숫자 값 2개와 사칙 연산자(+,-,*,/)를 입력 받아 결과를 보여주는 기능을 만드는 것을 목표로 하겠습니다.

 

그럼 차근차근 작성해 볼까요.

 

먼저 Visual Studio Code(이하 VS Code)를 실행합니다.

 

저는 C:\test\ 폴더를 생성하고 그 위치에 cal.html 파일을 만들겁니다.

원하는 곳에 파일을 만드시면 됩니다.

 

VS Code에서 test 폴더를 선택하고 새 파일 아이콘을 클릭하여 cal.html을 입력하고 Enter를 치면 파일이 생성됩니다.

 

다음으로 앞서 배웠듯이 HTML의 기본 틀을 먼저 작성해 보겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>간단한 계산기</title>
    </head>
    <body>
    </body>
</html>

첫 줄에 작성한 내용은 이 파일에 작성할 내용이 html5 문서다 라는 것을 알리는 선언문입니다.

그리고 html 문서의 시작과 끝을 알리기 위해 가장 바깥쪽에 html 태그(Tag)를 작성합니다.

마찬가지로 head, body 태그도 작성을 했구요.

우리는 계산기를 만들 예정이므로 head 안쪽 title 태그에 '간단한 계산기' 라고 작성했습니다.

 

일부 단일 태그를 제외하고는 태그의 대부분은 시작과 끝이 있습니다.

 

이 부분은 2강에서 자세히 설명했기 때문에 가물가물 하신 분은 2강 다시 참고하시면 될거 같아요 :)

sangminem.tistory.com/20

 

[왕초보 코딩 2강] 컴퓨터와의 첫 소통

안녕하세요 많이 기다리셨다구요? 아닌거 알아요 죄송합니다 오늘은 실제로 뭐라도 하나 직접 해보면서 대체 컴퓨터와 의사소통을 어떻게 한다는거야 하고 막연하게만 느껴졌던 부분을 살짝

sangminem.tistory.com

 

 

기본 틀은 만들어졌으니 이제 필요한 요소들을 하나씩 넣어볼까요.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>간단한 계산기</title>
    </head>
    <body>
        값1: 
        <input type="text" id="v1"><br> <!-- 값1 input 태그 추가 -->
        값2: 
        <input type="text" id="v2"><br> <!-- 값2 input 태그 추가 -->
        연산자: 
        <input type="text" id="op"><br> <!-- 연산자 input 태그 추가 -->
        결과: 
        <input type="text" id="res"> <!-- 결과 input 태그 추가 -->
        <br><br>
        <input type="button" value="계산하기"> <!-- 계산하기 버튼 추가 -->
        <input type="button" value="초기화"> <!-- 초기화 버튼 추가 -->
    </body>
</html>

우리가 실제 화면에 표현하고자 내용은 body 태그 안에 작성을 합니다.

여기서는 type이 text인 input 태그 4개, type이 button인 input 태그 2개를 활용하였습니다.

 

type이 text인 input 태그 2개는 값1, 값2, 다른 1개는 연산자를 입력 받을 목적이고 마지막 1개는 결과 값을 표시하기 위한 목적으로 추가를 하였습니다.

그리고 type이 button인 input 태그 2개는 각각 클릭 시 계산, 초기화 하기 위해 추가를 하였습니다.

 

중간중간 보이는 br 태그는 줄바꿈을 위해 넣었습니다.

코드 상에서 Enter 키를 쳐서 줄바꿈 하더라도 웹 브라우저에서는 줄바꿈 되지 않으므로 유의하셔야 합니다.

 

그런데 여기서 input 태그 속성 중 id 부분은 뭘까요?

컴퓨터는 뭐든지 명확해야 한다고 했던거 기억하시죠.

그래서 각 태그 요소마다 유일한 id 값을 붙여준 겁니다.

나중에 이 id 값으로 input 태그에 입력된 value 값을 가져올 수 있습니다.

참고로 input 및 br은 단일 태그이고, <!-- 어쩌구 --> 부분은 따라 입력하실 필요 없습니다.

 

자 그럼 작성한 내용을 저장하고 실행을 한 번 시켜볼까요.

파일 탐색기에서 저장한 파일에 커서를 두고 마우스 오른쪽 버튼을 클릭한 다음 연결 프로그램 > Chrome 을 선택하여 프로그램을 실행해 보겠습니다.

 

어떤가요? 모양은 예쁘지 않지만 저희가 의도하고자 한 모든 요소들이 표시가 되었습니다.

다만 기능을 구현하지 않았기 때문에 지금은 클릭해도 당연히 아무것도 되는게 없습니다.

 

이러한 기능은 JavaScript 언어로 구현을 해야 합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>간단한 계산기</title>
        <!-- 추가된 부분 시작 -->
        <script>
            // 계산하기 함수 선언
            function cal(){
                alert("계산 기능 구현 예정");
            }

            // 초기화 함수 선언
            function reset(){
                alert("초기화 기능 구현 예정");
            }
        </script>
        <!-- 추가된 부분 끝 -->
    </head>
    <body>
        값1: 
        <input type="text" id="v1"><br>
        값2: 
        <input type="text" id="v2"><br>
        연산자: 
        <input type="text" id="op"><br>
        결과: 
        <input type="text" id="res">
        <br><br>
        <input type="button" value="계산하기" onclick="cal()"> <!-- 수정된 부분 -->
        <input type="button" value="초기화" onclick="reset()"> <!-- 수정된 부분 -->
    </body>
</html>

JavaScript 언어를 작성하기 위해서는 head 태그 안에 script 태그를 추가하고 그 안쪽 영역에 작성을 하면 됩니다.

 

우리가 원하는 기능은 계산과 초기화 입니다.

기능들을 정의하기 위해 function 이라는 키워드를 사용했고 기능의 이름을 각각 cal, reset으로 정의했습니다.

()는 함수 표현 문법인데 여기서는 그냥 넘어가겠습니다.

그리고 실제 기능 작성은 {}(중괄호) 안에 기술을 할 예정입니다.

이 각각의 덩어리를 우리는 함수라고 부르겠습니다.

 

일단 기능이 제대로 동작하는지 확인하기 위해 알림 창을 띄워 볼게요.

alert이라는 기본 기능을 활용하여 기능 구현 예정이라는 문구를 넣었습니다.

 

마지막으로 button type의 input 태그에 onclick 속성을 사용하여 JavaScript로 정의한 함수인 cal(), reset()를 각각 대입하였습니다.

버튼을 클릭하면 그 함수를 수행하겠다는 의미예요.

 

여기까지는 이해하는 데 무리 없으시죠?

 

 

그럼 저장한 다음 다시 실행해 보겠습니다.

기존에 크롬 실행한 창이 그대로 있다면 새로고침을 하셔도 되고 파일 탐색기에서 새로 다시 실행하셔도 됩니다.

 

실행 후에 버튼을 한 번 클릭해볼까요?

계산하기 버튼을 클릭하니 "계산 기능 구현 예정" 이라는 알림이 정확히 표시가 되네요.

마찬가지로 초기화 버튼을 클릭하면 "초기화 기능 구현 예정" 이라는 알림이 잘 뜹니다.

 

지금까지는 딱히 어려운 부분은 없었는데 다음부터 새로운 개념들이 좀 더 등장하기 시작합니다.

따라서 이번 강의는 여기까지만 진행을 하도록 하겠습니다.

다음 강의에서 실제 기능을 구현해 보도록 할게요.

 

감사합니다 :)

 

#다음강의

sangminem.tistory.com/33

 

[왕초보 코딩 6강] 웹 계산기 만들기 2 - HTML, JavaScript(자바스크립트)

안녕하세요. 5강을 보지 않으신 분은 아래 5강부터 봐주시기 바랄게요. sangminem.tistory.com/23 [왕초보 코딩 5강] 웹 계산기 만들기 1 - HTML, JavaScript(자바스크립트) 지금까지는 내가 얼마나 코딩에 흥

sangminem.tistory.com

 

반응형

댓글

💲 추천 글