'프로그래밍 입문' 카테고리의 글 목록 (3 Page)

프로그래밍 입문

자바스크립트로 프로그래밍 입문 14. HTML, 파일로 저장하기 2018.11.03
[자바스크립트 연습문제] 13 풀이 2018.10.30
[자바스크립트 연습문제] 13 별찍기 예제 2018.10.27
자바스크립트로 프로그래밍 입문 13. 반복문(Loop Statement) 2 - for, continue, break, 2018.10.25

자바스크립트로 프로그래밍 입문 14. HTML, 파일로 저장하기

2018. 11. 3. 08:36

지금까지 코드를 웹브라우저 콘솔에 직접 작성해 왔는데, 작성한 코드를 파일로 저장하는 방법을 알아봅시다.

자바스크립트 코드는 웹문서 파일인 HTML 파일에 저장되거나, 별도의 파일로 저장된 후 웹문서 파일에서 호출될 수 있습니다. 두가지 방법 다 HTML 파일을 필요로 합니다.

HTML

HTML은 Hyper Text Markup Language로 웹문서를 작성하기 위한 언어입니다. 프로그래밍을 하기 위한 언어가 아닌 웹페이지를 만들기 위한 언어로, 그 구조와 용법이 자바스크립트와 상당히 다릅니다. 하지만 어렵진 않으므로 이번 기회에 간단하게 정말 기초만 배워보도록 합시다.

HTML파일은 아래와 같은 기본 구조를 가지고 있습니다.

<html>
  <head></head>
  <body></body>
</html>

html, head, body 등 <>안에 들어있는 이들을 HTML 태그(tag)라고 부르고, 태그들은 <html>와</html>, <head>와</head>, <body>와</body>같이 일반적으로 여는 태그와 닫는 태그 두가지가 짝으로 존재합니다. 태그 안에 다른 태그들이 들어 갈 수 있는데, 위 코드는 html 태그 안에 head 태그와 body 태그가 들어 있는 형태입니다.

head 태그에는 페이지 설정에 관한 내용이 들어갑니다. 웹페이지 제목을 설정하는 title 태그를 head 태그 안에 작성해 봅시다.

<html>
  <head>
    <title>HTML Hello World</title>    
  </head>
  <body></body>
</html>

메모장 등의 텍스트 에디터 프로그램을 열고 위 코드를 붙여넣기 해 봅시다.

hello_world.html이라는 이름으로 저장합니다. html 확장자는 HTML 코드 파일을 나타내는 확장자로, 웹브라우저로 열 수 있습니다. 파일 형식은 모든 파일 (*.*)으로, 인코딩은 UTF-8으로 합니다. 위치는 아무곳이나 괜찮습니다.

hello_world.html파일을 브라우저로 엽니다.

작성한 페이지 제목이 상단에 표시되는 것을 볼 수 있습니다.

다음으로 body에는 페이지에 표시될 내용을 작성합니다. 문단(paragraph)을 작성하는 p 태그를 사용해 봅시다.

<html>
  <head>
    <title>HTML Hello World</title>
  </head>
  <body>
    <p>내 Hello World HTML 페이지</p>
  </body>
</html>

다시 hello_world.html파일을 저장하고 페이지를 새로고침해봅시다.

이런식으로 간단한 웹페이지를 만들 수 있습니다. 그림을 넣으려면? 그림을 넣을 수 있는 img 태그를 사용하고, 글씨 모양, 크기를 조절하려면 font 태그를 사용하는 등, HTML 코드를 사용하여 웹페이지를 만들 수 있습니다. 관심이 있으신 분들은 따로 찾아서 공부해 보시기 바랍니다.

HTML과 자바스크립트

위에서 살펴봤듯이 HTML은 단순히 문서를 작성하기 위한 언어입니다. 정보(텍스트, 그림, 영상, 소리 등)의 표현만 가능하고, 페이지 이동 외에는 어떠한 기능도 지원하지 않습니다. 그래서 자바스크립트가 나오기 전까지 웹페이지의 모든 프로그래밍적 기능들은 서버에서 처리하여야만 했습니다.

그 시절 웹사이트의 프로그래밍적 기능들은 주로 폼을 작성하고 처리하는 기능들이 였는데, 인터넷이 굉장히 느렸던 시절이라 폼을 전송하고 결과를 받기 까지 시간이 꽤 걸렸습니다. 한번에 몇 초씩 걸렸다고 합니다.

특히 사람들은 폼에 입력된 정보가 규격에 맞는지 판단을 서버에서 처리하는 것에 불만이 많았습니다. 예를들어 id와 password를 입력하여 로그인을 하는 폼이 있고, id와 password는 4글자 이상 8글자이하여야 한다고 합시다. id나 password에 이 규칙에 맞지 않는 글자수가 들어가면 로그인이 안되는 것은 분명한데도 무조건 입력된 정보를 서버로 전달하고 서버가 글자수가 맞지 않다는 것을 사용자에게 알리게 되서 불필요하게 시간이 걸리게 됩니다.

이런 문제를 해결하기 위해 브라우저에서 작동하는 자바스크립트를 만들게 되었습니다. 서버로 정보를 보내기전에 간단한 규칙 정도는 스스로 판단하고 경고를 띄워서 시간을 절약할 수 있게 되었습니다. 스크립트라는 이름에서 알 수 있듯이 처음에는 언어가 아니라 단순한 명령어로서 발전해오다가 지금은 상당한 발전을 하여 독립된 프로그래밍 언어가 되었습니다.

HTML파일에 자바스크립트 코드 넣기

자바스크립트 코드는 script 태그안에 작성될 수 있고, script 태그는 body에 넣을 수 있습니다. 이 방법은 하나의 파일로 모든 것을 저장 할 수 있지만, 요즘은 HTML과 자바스크립트는 분리시키는 것이 대세이므로 연습할 때만 사용하기 바랍니다.

위에서 작성한 HTML 파일에 hello world 예제를 넣어 봅시다.

<html>
  <head>
    <title>HTML Hello World</title>
  </head>
  <body>
    <p>내 Hello World HTML 페이지</p>
    <script>
      console.log("hello world");
    </script>
  </body>
</html>

들여쓰기는 html 코드를 더 잘 볼 수 있게 하기 위한 것인데, 우린 자바스크립트에만 관심이 있으므로 아래와 같이 script 태그에 들여쓰기를 없애면 코드 작성에는 더 편합니다.

<html>
  <head>
    <title>HTML Hello World</title>
  </head>
  <body>
    <p>내 Hello World HTML 페이지</p>
<script>

console.log("hello world");

</script>
  </body>
</html>

파일을 저장하고 브라우저에서 새로 고침 해봅시다. console.log 함수는 브라우저 콘솔에 문자열을 출력하므로 브라우저 콘솔을 엽니다.

콘솔에 "hello world"라는 문자열이 출력되고, 우측에는 hello_world.html:9라고 표시되는데, 이는 해당 문자열이 hello_world.html 파일의 9번째 줄에 의해서 출력되었음을 나타냅니다.

코드를 별도의 파일로 저장 한 후 HTML에서 호출하기

자바스크립트는 .js 확장자를 사용합니다. 메모장 등의 텍스트 에디터 프로그램을 열고 hello world 코드를 작성한 후 hello_world.js라는 이름으로 저장합시다. 파일 위치는 hello_world.html과 같은 위치, 파일 형식은모든 파일 (*.*)으로, 인코딩은 UTF-8으로 합니다.

hello_world.html은 아래와 같이 내용을 수정합니다.

<html>
  <head>
    <title>HTML Hello World</title>
  </head>
  <body>
    <p>내 Hello World HTML 페이지</p>
    <script type="text/javascript" src="hello_world.js"></script>
  </body>
</html>

이 스크립트 코드는 head에 넣어도 작동하지만, 일반적으로 body가 끝나기 바로 전에 넣는 것이 좋습니다. 페이지 내용을 수정하는 코드의 경우 페이지 내용 전에 스크립트가 호출되면 작동하지 않기 때문입니다.

수정된 hello_world.html파일을 브라우저에서 열어서 결과를 확인해 봅시다.

"hello world" 우측에 표시되는 코드의 위치가 hello_world.js:1로 바뀐 것을 볼 수 있습니다.

단순히 코딩 연습 파일을 저장하는 용도로는 파일이 하나인 것이 편하지만, 브라우저의 cache 기능때문에 실무에서는 js를 따로 빼는 것이 맞습니다. 실무에서는 반드시 js파일을 따로 빼도록 합시다.

'프로그래밍 입문' 카테고리의 다른 글

자바스크립트로 프로그래밍 입문 18. 배열(Array) (0)	2018.11.14
자바스크립트로 프로그래밍 입문 16. 변수2-지역변수, 전역변수, 스코프 (0)	2018.11.07
[자바스크립트 연습문제] 13 풀이 (0)	2018.10.30
[자바스크립트 연습문제] 13 별찍기 예제 (0)	2018.10.27
자바스크립트로 프로그래밍 입문 13. 반복문(Loop Statement) 2 - for, continue, break, (0)	2018.10.25

[자바스크립트 연습문제] 13 풀이

2018. 10. 30. 08:09

이번 글은 연습문제 풀이입니다. 이전 글에서 연습문제를 풀어 보신 분들만 아래 내용을 확인하시길 바랍니다.

13-1 풀이

for(var i=0; i<5; i++){

  var string = "";

  for(var j=0; j<5-i; j++){
    string = string+"*";
  }

  console.log(string);
}

전체 줄수가 5이고, i가 현재 줄의 번호이므로 각 줄당 5-i개의 별을 찍어주면 됩니다.

13-2 풀이

for(var i=0; i<5; i++){

  var string = "";

  for(var j=0; j<i; j++){
    string = string+" ";
  }

  for(var j=0; j<5-i; j++){
    string = string+"*";
  }

  console.log(string);
}

첫째줄에는 빈칸이 0칸, 별이 5칸, 둘째 줄에는 빈칸이 1칸, 별이 4칸 ... 즉 빈칸을 줄 번호-1(j<=i-1이 되고, 이것은 j<i와 같죠)만큼 먼저 찍어 준 다음, 별을 줄 번호의 반대로 찍어주면 되겠죠.

위 풀이에서는 for문 안에 2개의 for문을 사용했는데, 하나만 사용할 수도 있습니다.

for(var i=0; i<5; i++){

  var string = "";

  for(var j=0; j<5; j++){
    if(j<i){
      string = string+" ";
    }
    else {
      string = string+"*";
    }
  }

  console.log(string);
}

별찍기 예제를 처음 보시는 분들은 쉽게 이해가 잘 안되실 텐데, 노트에 i와 j의 값을 기록해 가면서 차근차근 코드를 따라 반목문을 진행해 봅시다. 저도 반복문 처음 배우고 별찍기 예제 처음 풀 때 몇 시간씩 걸려서 이해하려고 했었습니다. 결코 쉬운 예제가 아니므로 시간을 두고 이해하도록 합시다.

13-3 풀이

이 문제는 못풀어도 괜찮습니다. 참고만 하고 넘어가신 후 나중에 다시 도전해 보세요.

for(var i=0; i<5; i++){

  var string = "";

  for(var j=0; j<5; j++){
    if(j<5-i){
      string = string+"*";
    }
    else{
      string = string+" ";
    }
  }

  for(var j=0; j<5; j++){
    if(j>=i){
      string = string+"*";
    }
    else{
      string = string+" ";
    }
  }

  console.log(string);
}

왼쪽 반쪽을 그리는 조건과, 오른쪽 반쪽을 그리는 조건을 따로 나누어서 코딩한 모습입니다.

이걸 합치면 아래와 같이 됩니다.

for(var i=0; i<5; i++){

  var string = "";

  for(var j=0; j<10; j++){
    if(j<5&&j<5-i || j>=5&&j-5>=i){
      string = string+"*";
    }
    else{
      string = string+" ";
    }
  }

  console.log(string);
}

왼쪽 반쪽(j가 5보다 작은 경우)와 오른쪽 반쪽(j가 5와 같거나 큰 경우)을 합쳤습니다. 오른쪽 반쪽은 j값이 5부터 10까지이므로 조건에 사용되는 j에 5를 빼줍니다.

'프로그래밍 입문' 카테고리의 다른 글

자바스크립트로 프로그래밍 입문 16. 변수2-지역변수, 전역변수, 스코프 (0)	2018.11.07
자바스크립트로 프로그래밍 입문 14. HTML, 파일로 저장하기 (0)	2018.11.03
[자바스크립트 연습문제] 13 별찍기 예제 (0)	2018.10.27
자바스크립트로 프로그래밍 입문 13. 반복문(Loop Statement) 2 - for, continue, break, (0)	2018.10.25
[자바스크립트 연습문제] 12-1 풀이 (0)	2018.10.24

[자바스크립트 연습문제] 13 별찍기 예제

2018. 10. 27. 08:05

별찍기 예제는 반복문을 연습하는데 좋은 예제입니다.

반복문을 사용하여 위 그림처럼 별문자를 출력하려면 어떻게 코딩해야 할까요? 이 글에서는 우선 위 그림처럼 별찍는 방법을 설명한 후, 다른 모양으로 별찍는 방법을 연습문제로 드리겠습니다.

그림을 살펴보면, 첫째줄에는 별이 1개, 둘째줄에는 별이 2개.. 이런식으로 다섯번째 줄에는 별이 5개로 되어 있습니다. 출력을 5번 반복한다는 것을 알 수 있죠.

for(var i=0; i<5; i++){

  var string = "";

  //줄당 별의 갯수를 조절하는 부분
  //...

  console.log(string);
}

우선 이렇게 만들면 5줄을 출력하는 코드를 만들 수 있습니다. 다음으로 각각 줄의 별의 갯수를 조절해 주어야 합니다.

n번째 줄에는 n개 만큼의 별이 찍힙니다. 이때 몇번째 줄인지 알 수 있는 방법은 i입니다. 첫번째 줄은 i가 0, 2번째 줄은 i가 1 ... 이런 식이죠. 즉 i만큼 반복하여 별을 찍어주면 됩니다.

for(var i=0; i<5; i++){

  var string = "";

  for(var j=0; j<=i; j++){
    string = string+"*";
  }

  console.log(string);
}

이렇게 반복문 안에 반복문이 들어 있는 것을 다중반복문이라고 하고, 위의 경우에는 2중반복문이 되겠습니다. 반복문안의 반복문에는 반복에 사용되는 변수 이름으로 j를 사용하였는데, j는 단순히 알파벳 순서상 i 다음이기 때문에 주로 사용됩니다. 3중 반복문인 경우에 3번째 반복문에는 k가 주로 사용됩니다.

자 그럼, 위의 내용을 바탕으로 아래 그림처럼 별을 찍는 반복문을 만들어 봅시다.

연습문제 13-1

힌트: 별의 숫자가 줄 번호와 반대로 움직입니다.

연습문제 13-2

힌트: 빈칸을 먼저 찍고, 별을 찍어줘야 합니다.

연습문제 13-3

이 문제는 고난이도 보너스 문제입니다. 너무 어렵다면 그냥 넘어가셔도 좋습니다.

'프로그래밍 입문' 카테고리의 다른 글

자바스크립트로 프로그래밍 입문 14. HTML, 파일로 저장하기 (0)	2018.11.03
[자바스크립트 연습문제] 13 풀이 (0)	2018.10.30
자바스크립트로 프로그래밍 입문 13. 반복문(Loop Statement) 2 - for, continue, break, (0)	2018.10.25
[자바스크립트 연습문제] 12-1 풀이 (0)	2018.10.24
자바스크립트로 프로그래밍 입문 12. 반복문(Loop Statement) 1 - while, 증감연산자 (0)	2018.10.18

자바스크립트로 프로그래밍 입문 13. 반복문(Loop Statement) 2 - for, continue, break,

2018. 10. 25. 07:15

이번에는 또다른 반복문인 for 문과, 모든 반복문에서 공통으로 사용되는 continue, break 예약어에 대해서 알아봅니다.

for 문

for(초기값;조건;후처리){
  조건 만족시 이곳의 코드가 반복됨
}

for문은 ()안에 ;로 구분된 세가지 부분을 가집니다.

첫번째 부분 - 초기값: for 문이 처음 실행될 때 단 한번만 실행되는 코드로, 반복에 관련된 변수들의 초기값을 지정합니다.
두번째 부분 - 조건: 이 부분의 결과값이 true면 {}안의 코드가 실행됩니다.
세번째 부분 - 후처리: {}안의 코드를 실행하고 이곳의 코드가 실행됩니다. 이곳에서 조건에 관련된 값을 조절한 후 다시 조건을 확인합니다.

아래 코드는 hello world를 3번 출력하는 코드를 for 문으로 작성한 예제입니다.

for(var i=0; i<3; i++){
  console.log("Hello World");
}

초기값 부분에서 I라는 변수를 선언하여 0을 대입하였습니다.(여기서 i는 index의 첫글짜로 for 문에서 관용적으로 사용됩니다.) 조건은 i가 3보다 작을 때이며, 각 반복이 끝날때마다 ++증가연산자로 i의 값을 1 증가시킵니다.

이 코드를 while 문으로 바꾸면 아래와 같습니다.

var i=0
while(i<3){
  console.log("Hello World");
  i++;
}

while 문과 비교했을 때 for 문은 반복문을 작동시키는 변수와 규칙들이 한 곳에 모여있어 코드의 이해가 쉽습니다. 이 때문에 정해진 수만큼 반복하는 경우 보통 for문이 사용되고, 지정되지 않은 수만큼 반복하는 경우 while 문이 주로 사용됩니다.

지정되지 않은 수만큼 반복하는 반복문에 대해서는 다음 항목에서 알아보겠습니다.

break

break 는 반복문 안에서만 사용할 수 있는 예약어로 현재 진행중인 반복을 끝내고 반복문을 탈출합니다. 아래 코드를 살펴봅시다.

// 이전에 만들었던 dice함수를 재사용합니다.
function dice(num){
  return Math.floor(Math.random()*num)+1;
}

// 무한반복문
while(true){
  var number = dice(6);
  console.log("주사위 눈금: "+number);

  if(number>4) break;

  console.log("주사위의 값이 4보다 크지 않습니다. 주사위를 다시 굴립니다");
}

while 문의 조건으로 true가 들어갔으므로 while문은 무한히 반복되게 됩니다. 하지만 dice 함수로 생성된 값이 4보다 큰 경우 break문을 통해서 반복문을 멈추게 됩니다.

break 코드가 실행되면 현재 작동중인 반복문이 바로 중단됩니다. 즉, 반복문안 break 이후의 코드들은 실행되지 않습니다.

continue

continue 역시 반복문 안에서만 사용할 수 있는 예약어로, 현재 진쟁중인 반복을 끝내고 후 반복문의 조건을 확인다시 확인합니다. 조건이 만족된다면 다시 반복문을 실행하고, 조건이 만족되지 않는 다면 반복문이 종료됩니다. for문의 경우 continue가 호출되더라도 후처리 과정을 거칩니다.

for(var i=0; i<5; i++){
  var number = dice(6);
  console.log("주사위 눈금: "+number);

  if(number>4) continue;

  console.log("주사위의 값이 4보다 크면 이 텍스트가 표시되지 않습니다.");
}

위 코드를 실행시키면 주사위 값이 4보다 크든 적든 무조건 5번 주사위를 굴리지만, 주사위값이 4보다 크면 continue에 의해 나머지 코드가 실행되지 않고 바로 다음 반복으로 넘어갑니다.

혹시 위 코드를 보고,

for(var i=0; i<5; i++){
  var number = dice(6);
  console.log("주사위 눈금: "+number);

  if(number<=4){
    console.log("주사위의 값이 4보다 크면 이 텍스트가 표시되지 않습니다.");
  }
}

랑 같은데 왜 continue를 쓰는 건지? 하시는 분도 있으실 텐데, 위 예제는 continue 다음 코드가 1줄 밖에 안되서 continue가 크게 차이가 없습니다. 하지만 continue 다음에 굉장히 긴 여러줄의 코드가 있다고 한다면,

for(var i=0; i<5; i++){
  var number = dice(6);
  console.log("주사위 눈금: "+number);

  if(number<=4){
    //굉장히 긴 여러줄의 코드
  }
}

가 되어 코드를 읽을 때 number가 4와 같거나 작지 않은 경우 뒤에 다른 할 일이 있는지 if문 다음 코드를 확인해야 합니다.

for(var i=0; i<5; i++){
  var number = dice(6);
  console.log("주사위 눈금: "+number);

  if(number>4) continue;

  //굉장히 긴 여러줄의 코드
}

로 되어 있다면 continue가 나온 지점에서 나머지 코드는 확인할 필요도 없이 바로 다음 반복으로 넘어갈 수 있습니다. 즉, continue는 가독성을 높히기 위해 사용한다고 할 수 있겠습니다.

i=0? i=1?

for 문으로 5번 반복하는 코드를 작성할 때 for(var i=0; i<5; i++){ ... }와 같이 작성했는데, 혹시 for(var i=1; i<=5; i++){ ... } 이렇게 작성하는 게 더 쉽지 않나? 하고 생각하실 수도 있습니다. 첫번째 처럼 작성하면 i는 0부터 4까지 변화하면서 5번 반복되고, 두번째 처럼 작성하면 i는 1부터 5까지 변화하면서 5번 반복하게 됩니다.

일반적으로 수를 셀 때 1부터 세기 때문에 두번째가 더 맞는 것 같지만, 프로그래머들은 숫자를 0부터 세는 것이 더 익숙합니다.

나중에 배울 '배열'이라는 개념때문인데요, 배열에서 순서가 0번부터 시작합니다. 배열과 반복문은 같이 쓰이는 일이 많으므로 보통 반복문을 만들 때 0부터 시작하도록 만드는 것이 편리합니다. 이부분은 배열에서 다시 살펴보도록 하고, 일단은 반복문을 만들 때 0부터 시작하도록 연습합시다.

물론 반복문 내에서 쓰이는 수가 1부터 시작하는 경우에는 i=1로 하셔도 됩니다. (연습문제 12의 Fizz Buzz같은 경우)

정리 및 요약

for 문:

for(초기값;조건;후처리){
  조건 만족시 이곳의 코드가 반복됨
}

break: 반복문 안에서만 사용할 수 있는 예약어로 현재 진행중인 반복을 끝내고 반복문을 탈출함
continue: 반복문 안에서만 사용할 수 있는 예약어로 현재 진쟁중인 반복을 끝내고 후 반복문의 조건을 확인다시 확인하여 반복문을 처음부터 다시 진행함

'프로그래밍 입문' 카테고리의 다른 글

[자바스크립트 연습문제] 13 풀이 (0)	2018.10.30
[자바스크립트 연습문제] 13 별찍기 예제 (0)	2018.10.27
[자바스크립트 연습문제] 12-1 풀이 (0)	2018.10.24
자바스크립트로 프로그래밍 입문 12. 반복문(Loop Statement) 1 - while, 증감연산자 (0)	2018.10.18
[자바스크립트 연습문제] 11-1, 2 풀이 (0)	2018.10.18

PREV 1 2 3 4 5 6 ···8 NEXT

Ian H Blog