간단한 실습 환경 -코딩수업#2

사실 코드 자체는 한 줄도 포함하지 않은 코딩 수업을 하려고 했다.

코딩 자체에 대한 논리적 이해를 하시는 분들은 굳이 실습 과정을 읽을 필요가 없어 보이기도 했다.

그러나 독자들께서 처음으로 접하여 이해한 코드가 어떻게 수행되는지를 알고 싶을 것이라는 판단에 약간의 실습과정을 넣어보기로 했다.

나는 대부분의 프로그램을 C, C++, C# 등의 컴퓨터 언어로 만들었고, 안드로이드 관련 프로그램을 해야 할 일이 있어서 대형 프로젝트 한두 개에는 자바(JAVA) 언어를 사용하였다.

그런데 처음 프로그램 언어를 접하는 독자들이 가장 쉽게 접할 수 있는 프로그램 환경이 웹 브라우저 이므로 이에 적합한 자바스크립트 언어로 실습을 해보려고 한다.

일단은 프로그램 환경이 이미 대부분의 독자 컴퓨터에 설치되어 있기 때문이다.

웹 프로그램 개발이 익숙하지 않은 나 역시 몇 번씩 참고 자료를 봐가면서 코딩(프로그래밍)을 해야 함을 고백한다.  

웹브라우저에서의 실습

크롬 웹브라우저를 설치하신 분이라면 이미 프로그램을 수행해볼 준비가 되어 있다.

윈도우즈10에 기본으로 설치된 엣지 브라우저 역시 같은 기능을 수행한다.

단 여러 브라우저에서의 기능이 거의 같으므로 크롬을 기반으로 설명하도록 하겠다.

윈도우 기반의 컴퓨터이거나 매킨토시 기반의 컴퓨터이거나 상관없다.

크롬 브라우저에서 새 탭을 선택하고 그 화면에서 Ctrl+Shift+J (매킨토시의 경우 Command-option-J)를 눌러본다.

기억이 어려우시다면 브라우저 우측 상단의 점 3개가 찍힌 아이콘을 누르면 나오는 메뉴에서 

도구더보기-개발자도구를 선택하고 화면에 표시된 것과 같이 Console탭을 선택하면 된다.

마이크로소프트 엣지를 사용하신다면 F12버튼을 누르면 동일한 화면을 보여주게 된다.

화면의 커서에 간단한 수식을 입력하고 리턴을 누르자

>5+12     => 이렇게 입력하고 리턴을 누르면

<17         => 이렇게 수식의 답을 컴퓨터가 계산해 준다.

웹브라우저는 계산기의 역할을 충실해 수행해준다.

복잡한 계산도 확실히 수행하고 괄호의 우선순위도 지켜주는 최첨단 계산기가 된 것이다.

이제 나오는 화면은 많은 기능을 가지고 있지만 텍스트를 편집하기에는 그리 좋은 환경이 아니다.

화면에 보여도 편집하기 어려운 형태를 가지기 때문이다.

그러니 흔히 사용하는 텍스트 편집기나 윈도우즈가 기본으로 제공하는 메모장을 열어서 아래의 코드를 입력해 보자.

앞서 1부터 100까지의 숫자를 더하는 코드는 아래와 같다.

var sum=0;
var x;
for ( x=1; x <= 100; x++) {
    sum=sum+x;
}

이 코드를 복사하여 화면에 붙여넣기를 하고 리턴을 입력하면

위와 같이 5050이라는 정답을 아래에 출력하여 우리의 의도를 명확하게 알고 표시해 준다.

만일 1부터 100까지 더하는 과정의 각 값을 모두 출력하기를 원한다면 아래의 위치에 보기와 같이 

  document.writeln(sum);

한 줄을 더해 준다.

var sum=0;
var x;
for ( x=1; x <= 100; x++) {
    sum=sum+x;
    document.writeln(sum);
}

리턴 키를 치면 좌측에 각 덧셈의 결과를 보여준다.

 

웹 브라우저가 가진 특성상 별도의 코드를 넣어주지 않으면 한 칸 씩의 공간을 두고 단계별 덧셈의 합인 100가지 숫자를 모두 보여주게 된다.

1=1

1+2=3

3+3=6과 같은 각 덧셈의 값이 보이게 되고, 마지막에 1부터 100까지의 합 5050을 보여준다.

document.writeln(sum)이라는 코드가 sum의 값을 화면에 보여주는 것임을 이해할 수 있다.

간단한 첫 번째 코딩 실습을 마무리한다.