아래 코드를 실행하면 어떤 값이 나올 지 생각해 봅시다.

var a=1;

function printA(){
  console.log(a);
}

printA();

변수 a를 선언하여 1을 대입하였고, printA함수는 a를 출력하므로 1이 출력됩니다.

하지만 아래와 같이 변수 선언을 함수 안에서 했다면, 함수 밖에서는 해당 변수를 호출할 수 없습니다.

function printB(){
  var b=2;
  console.log(b);
}

printB();
console.log(b);

위 함수를 실행하면 printB에 의해서 2가 출력되지만, 함수 밖의 console.log(b)는 'b is not defined'라는 에러를 냅니다.

b는 함수 안에서 선언되었으므로, 함수 밖에서 b를 호출하려고 하니 b가 뭔지 모르겠다 라고 하는 에러입니다.

만약 변수가 함수 안에도 있고 밖에도 있으면 어떨까요?

var c=3;

function printC(){
  var c=4;
  console.log(c);
}

printC();
console.log(c);

printC()는 함수 안의 c의 값인 4를 출력하고, console.log(c);는 함수 밖의 c의 값인 3을 출력합니다.

이것은 함수 밖의 c와 함수 안의 c의 스코프(scope)가 다르기 때문입니다. scope는 범위라는 뜻으로, 여기에서는 변수의 적용 범위라는 뜻으로 생각하면 되겠습니다. 함수 안에서 생성된 변수는 지역 변수(local variable)이라고 하고 적용범위가 함수 안으로만 한정이 됩니다. 함수 밖에서 생성된 변수 전역 변수(global variable)이라고 하며 어디서든 호출할 수 있습니다. 변수 이름이 전역 변수에도 해당하고 지역 변수에도 해당하는 경우, 지역 변수가 우선 호출됩니다.

var d=5;

function someFunc1(){
  var e=6;
  // 어떤 일을 하는 코드
}

function someFunc2(){
  var f=7;
  // 어떤 일을 하는 코드
}

위와 같은 코드가 있을 때, d는 전역변수로 someFunc1안이나, someFunc2안에서도 호출될 수 있습니다. 하지만 e는 someFunc1 함수의 스코프에 있기 때문에, 자신의 스코프 밖인 함수 밖이나 someFunc2에서는 호출될 수 없습니다. 마찬가지로 f도 같은 이유로 함수밖이나 someFunc1에서 호출될 수 없습니다.

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

[자바스크립트 연습문제] 18 출석부 인사 함수  (0) 2018.11.14
자바스크립트로 프로그래밍 입문 18. 배열(Array)  (0) 2018.11.14
자바스크립트로 프로그래밍 입문 14. HTML, 파일로 저장하기  (0) 2018.11.03
[자바스크립트 연습문제] 13 풀이  (0) 2018.10.30
[자바스크립트 연습문제] 13 별찍기 예제  (0) 2018.10.27

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

자바스크립트 코드는 웹문서 파일인 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>

<script type="text/javascript" src="hello_world.js"></script>로 외부 js파일을 불러올 수 있습니다. script 태그에 type항목과 src항목이 추가된 형태로, src에 대상의 위치가 들어갑니다. 위의 코드처럼 대상의 위치에 경로 표시가 없는 경우 해당 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-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

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

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

그림을 살펴보면, 첫째줄에는 별이 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

+ Recent posts

티스토리툴바