웹 형식 프로그램 구현 - 코딩수업#15
HTML과 JavaScript
너무 오래 코딩 글을 쓰지 않았다. 게으름에 빠지기보다 쉬운 건 없는 것 같다ㅠㅠ
앞서 이야기하기로 한 개발 환경(적용 플랫폼일 수도 있다)의 변경을 간단히 설명하고 다음 주제로 넘어가자.
HTML과 웹 프로그램 개발에 대해 잘 아시는 분들은 본 이야기를 읽을 필요가 없다.
----------
웹 브라우저 환경에서 개발 코드와 출력을 함께 보며 알고리즘을 이해하기 위한 방법으로 앞선 개발 환경을 꾸몄다면, 이제는 입출력을 동시에 진행할 수 있는 구성을 만들어서 다음 단계를 배우기 위한 환경을 꾸미는 방법을 보여주려고 한다.
웹 브라우저의 기본 언어는 HTML이다. 우리가 배우고 있던 언어는 JavaScript 였다.
웹 브라우저에서 원활하게 프로그램을 수행하려면 이 두 가지 언어를 적절히 구사해야 한다.
알고리즘을 공부하는 입장에서는 별 필요가 없을지도 모르나, 추가로 CSS라는 것을 이해할 필요도 있지만, 차차 설명하겠다.
그리고 본 강좌에서 배워 나갈 것은 어떻게 특정 환경에서 프로그램을 만드냐가 아니고, 문제 해결 방법, 다른 말로 알고리즘을 어떻게 만들어 갈 것이냐 이기 때문에 화려한 웹 화면을 만들어 가고 싶어서 본 강좌를 보는 분들에게는 썩 도움이 되지 않을 것이다.
앞선 말한 바와 같이 나 역시 웹 프로그램 환경에 익숙하지 않은 시스템 프로그래머 이기 때문에 오류를 야기할 수 있다. 본 강좌에서 프로그램의 문법에 관련된 내용은 필요할 때 찾아 쓰는 형편일 정도이다.
이를 양해해 주기 바라며, 도움이 될 만한 이야기는 메일이나 댓글로 전달을 부탁드린다.
이전 환경 다시 보기
1부터 100까지 더하기를 설명하며 보여주었던 개발환경을 되돌아보자.
var sum=0;
var x;
for ( x=1; x <= 100; x++) {
sum=sum+x;
document.writeln(sum);
}
위와 같은 코드를 개발환경에서 입력하고, 그 결과를 화면 좌측에서 확인했다.
이제는 이러한 내용을 아래와 같이 발전시켜보려고 한다.
사용자와 데이터 주고받기
기존의 프로그램에서 만일 1부터 100이 아니고 1부터 30까지 더하거나 1000까지 더하고 싶을 때 코드의 변수 값을 바꾸거나 코드를 수정해야 했다.
그 화면을 아래와 같이 변경하여 원하는 숫자까지의 더하기를 실행할 수 있을 것이다.
이렇게 폼을 만들어서 원하는 숫자를 입력하고 실행하게 되면 아래와 같은 실행화면을 보여줄 수 있다.
물론 약간의 코드 수정은 필요하다.
어차피 알고리즘 구현이 목적인 수업이므로 이 정도만 저작도구 변경 이유를 설명하고, 이러한 코드를 간단한 텍스트 작성기에서 프로그램화하고 수행하는 과정으로 수업을 연결하겠다. 물론 위의 웹 프로그램을 기반으로 하여 시작한다.
데이터를 받는 첫 화면의 코드는 아래와 같다.
해당 코드에서 HTML이기 때문에 어쩔 수 없이 꼭 들어가는 코드는 아래와 같다.
이 부분은 모든 프로그램에서 항상 들어갈 것이고.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
</body>
</html>
우리가 변경할 화면 보이기의 대부분은 <body>와 </body> 사이에 들어갈 것이다.
위의 코드에서도
<body>와 </body> 사이에 필요한 내용이 들어갔다.
이러한 코드 부분은 다른 분들의 훌륭한 HTML 강의에서 충분히 설명하고 있으니 깊은 설명은 하지 않겠다.
또한 내가 잘 설명할 수 있는 영역이 아니기도 하다.
우리가 앞서 공부했던 모든 내용은 <script>와 </script> 사이에 들어간다.
초기 화면에서 불러온 test.html의 Javascript 코드새롭게 열리는 HTML 프로그램에 위와 같이 코드가 들어간다.
프로그램은 원래 우리가 더하기를 구현하기 위해 작성했던 코드와 앞선 프로그램에서 파라미터를 가져와서 분리하는 코드로 분리되지만 어찌 되었던 위와 같이 구성된 파일을 통해 더하기가 종료된 화면을 볼 수 있다.
당장 너무 많은 것을 이해하려 하지 않아도 된다.
이렇게 처리된 모든 내용을 다음 시간부터 다시 공부해 나갈 것이다.
더 나은 화면 출력과 사용자를 배려한 프로그램에 얼마나 많은 노력이 필요한지 확인하게 될 것이다.
물론 우리는 알고리즘과 논리에 주력하겠지만...
다음 강좌 주제인 "소인수 분해" 프로그램에서 웹 환경처럼 컴퓨터와 데이터를 주고받는 과정을 하나씩 배워 보도록 하자.
