initial commit

10 files changed, 3793 insertions, 0 deletions

diff --git a/files/ko/learn/javascript/first_steps/a_first_splash/index.html b/files/ko/learn/javascript/first_steps/a_first_splash/index.html
new file mode 100644
index 0000000000..fd29057f86
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/a_first_splash/index.html
@@ -0,0 +1,680 @@
+---
+title: 자바스크립트 기초
+slug: Learn/JavaScript/First_steps/A_first_splash
+translation_of: Learn/JavaScript/First_steps/A_first_splash
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">이제 우리는 자바스크립트에 대한 이론적인 몇몇 부분을 살펴볼 것이다. 이곳에서 무엇을 할 수 있는지 실용적인 연습을 통한 자바스크립의 기본적 사항들을 다루는 과정이 되겠다. 하나하나씩 "숫자맞추기" 게임을 간단하게 구성해나갈 것이다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">알아야할 것들:</th>
+   <td>기본적인 컴퓨터 사용과 HTML CSS와 자바스크립트에 대해 알아야 함.</td>
+  </tr>
+  <tr>
+   <th scope="row">수업 목표:</th>
+   <td>자바스크립트로 코딩하는 것을 처음으로 알아보고 자바스크립트로 쓰여진 프로그램이 가지고 있는 특징들을 조금이라도 이해한다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>지금현재로서는 코드를 자세히 이해하려고 하지는 않을 것이다. 단지 지금은 넓게 개념을 이해하고, (다른 프로그래밍 언어를 포함해) 자바스크립트가 어떻게 운용되는지에 대한 아이디어가 필요하다. 자, 이제부터 자세한 부분에 대해 공부하고 알아보자!</p>
+
+<div class="note">
+<p>Note: 자바스크립트에서 보는 다양한 요소들은 여타 프로그래밍 언어와 거의 똑같다.(함수나 반복문 등)  언어마다 문법이 다를 뿐이지 개념은 넓은범위에서 보자면 일맥상통하다.</p>
+</div>
+
+<h2 id="프로그래머처럼_사고하기">프로그래머처럼 사고하기</h2>
+
+<p>프로그래밍에서 가장 어려운 것은 우리가 배우려고 하는 문법이 아닌, 어떻게 실생활의 문제를 프로그래밍으로 적용시킬까하는 문제이다. 이제부터는 프로그래머처럼 생각하는 것이 필요하다. 이는 일반적으로 프로그램이 필요한 부분과 어떻게 코드가 문제를 해결하기위해 작동되고, 협업해야 되는지에 대한 설명을 알고있어야 된다는 것이다.</p>
+
+<p>이는 프로그래밍 문법에 대한 경험과 노력, 그리고 창의성을 비롯한 노력의 조합이 필요하다. 코드를 많이 작성할수록 얻는 것은 더 많아질 것이다. 지금 당장 "프로그래머의 사고능력"으로 발전시킨다고는 보장하지는 못하지만, 이 수업을 통해 여러분들에게 프로그래머처럼 생각하는 많은 연습의 기회는 줄 수 있다.</p>
+
+<p>이러한 개념을 마음속에 품고, 앞으로 우리가 만들어나갈 예제를 한번 살펴보자. 여기서 실생활의 문제를 프로그래밍할 수 있도록 쪼개는 일반적인 과정을 볼 것이다.</p>
+
+<h2 id="예제-숫자맞추기">예제-숫자맞추기</h2>
+
+<p>아래 보이는 간단한 게임을 통해, 프로그램을 구성하는 방법을 알아볼 것이다.</p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Number guessing game&lt;/title&gt;
+    &lt;style&gt;
+        html {
+            font-family: sans-serif;
+        }
+
+        body {
+            width: 50%;
+            max-width: 800px;
+            min-width: 480px;
+            margin: 0 auto;
+        }
+
+        .lastResult {
+            color: white;
+            padding: 3px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;h1&gt;Number guessing game&lt;/h1&gt;
+    &lt;p&gt;We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.&lt;/p&gt;
+    &lt;div class="form"&gt; &lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="Submit guess" class="guessSubmit"&gt; &lt;/div&gt;
+    &lt;div class="resultParas"&gt;
+        &lt;p class="guesses"&gt;&lt;/p&gt;
+        &lt;p class="lastResult"&gt;&lt;/p&gt;
+        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;script&gt;
+    // Your JavaScript goes here
+    var randomNumber = Math.floor(Math.random() * 100) + 1;
+    var guesses = document.querySelector('.guesses');
+    var lastResult = document.querySelector('.lastResult');
+    var lowOrHi = document.querySelector('.lowOrHi');
+    var guessSubmit = document.querySelector('.guessSubmit');
+    var guessField = document.querySelector('.guessField');
+    var guessCount = 1;
+    var resetButton;
+
+    function checkGuess() {
+      var userGuess = Number(guessField.value);
+      if (guessCount === 1) {
+        guesses.textContent = 'Previous guesses: ';
+      }
+
+      guesses.textContent += userGuess + ' ';
+
+      if (userGuess === randomNumber) {
+        lastResult.textContent = 'Congratulations! You got it right!';
+        lastResult.style.backgroundColor = 'green';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else if (guessCount === 10) {
+        lastResult.textContent = '!!!GAME OVER!!!';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else {
+        lastResult.textContent = 'Wrong!';
+        lastResult.style.backgroundColor = 'red';
+        if(userGuess &lt; randomNumber) {
+          lowOrHi.textContent='Last guess was too low!' ;
+        } else if(userGuess &gt; randomNumber) {
+          lowOrHi.textContent = 'Last guess was too high!';
+        }
+      }
+
+      guessCount++;
+      guessField.value = '';
+    }
+
+    guessSubmit.addEventListener('click', checkGuess);
+
+    function setGameOver() {
+      guessField.disabled = true;
+      guessSubmit.disabled = true;
+      resetButton = document.createElement('button');
+      resetButton.textContent = 'Start new game';
+      document.body.appendChild(resetButton);
+      resetButton.addEventListener('click', resetGame);
+    }
+
+    function resetGame() {
+      guessCount = 1;
+      var resetParas = document.querySelectorAll('.resultParas p');
+      for(var i = 0 ; i &lt; resetParas.length ; i++) {
+        resetParas[i].textContent='';
+      }
+
+      resetButton.parentNode.removeChild(resetButton);
+      guessField.disabled = false;
+      guessSubmit.disabled = false;
+      guessField.value='';
+      guessField.focus();
+      lastResult.style.backgroundColor='white';
+      randomNumber=Math.floor(Math.random() * 100) + 1;
+    }
+&lt;/script&gt;
+
+&lt;/html&gt;</pre>
+
+
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}</p>
+
+<p>한 번 실행해서 어떻게 이루어져 있는지 살펴보고 알아보자.</p>
+
+<p>만약 너의 상사가 예제에 관련되어 다음의 짦은 안내만 주어졌다고 생각해보자.</p>
+
+<blockquote>
+<p>나는 간단하게 숫자 맞추기 게임을 만들고 싶다.1과 100사의 수 중에서 무작위로 선택되어야하고, 플레이어는 10번의 기회안에 그 숫자를 맞춰야 한다. 각 순서마다 숫자를 맞춰는지 틀렸는지는 당연히 알려줘야 하고, 틀렸다면 큰지 작은지도 포함해서 말해야 한다.또한 이전에 써냈던 번호들도 보여줘야 한다. 게임은 플레이어가 숫자를 맞추던가, 기회를 모두 소진하면 끝나게 된다. 게임이 끝나면 플레이어가 다시 게임을 할 것인지 묻게된다.</p>
+</blockquote>
+
+<p>위의 안내문을 보고, 우선 문제를 가능한 한 작게 쪼개서 간단한 작업으로 만드는 것부터 시작하자.</p>
+
+<ol>
+ <li>1과 100사이의 숫자 중 무작위로 추출한다.</li>
+ <li>1부터 플레이어의 차례를 기록한다.</li>
+ <li>플레이어에게 숫자를 맞출 수 있게 한다.</li>
+ <li>숫자를 맞추면 어딘가에 저장하고, 사용자는 이전의 추측한 숫자를 볼 수 있도록 한다.</li>
+ <li>그다음, 숫자가 일치한지 확인한다.</li>
+ <li>만약 일치한다면:
+  <ol>
+   <li>축하 메시지를 표시한다.</li>
+   <li>더 이상 숫자를 맞출필요가 없다.</li>
+   <li>플레이어가 다시 게임을 할지 묻는다.</li>
+  </ol>
+ </li>
+ <li>숫자가 틀렸고, 차례가 남아있다면:
+  <ol>
+   <li>틀렸다고 알린다.</li>
+   <li>다른 숫자를 입력할 수 있도록 한다.</li>
+   <li>차례가 1 증가한다.</li>
+  </ol>
+ </li>
+ <li>숫자가 틀렸고, 차례가 없다면:
+  <ol>
+   <li>게임이 종료되었음을 알린다.</li>
+   <li>더 이상 숫자를 맞출필요가 없다..</li>
+   <li>플레이어가 다시 게임을 할지 묻는다.</li>
+  </ol>
+ </li>
+ <li>게임이 재시작 되면, 게임의 구조와 UI는 완전히 리셋되며, step1 부터 다시 로직이 시작된다.</li>
+</ol>
+
+<p>이제 다음 단계로 넘어가서 각 단계들을 코드로 어떻게 만들고, 예제 소스와 통합하며, 그와 관련된 자바 스크립트 기능은 무엇인지 살펴보도록 하겠다.</p>
+
+<h3 id="초기_구성">초기 구성</h3>
+
+<p>수업에 앞서, 로컬에 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> 파일을 저장하길 바란다. (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">see it live here</a>). 그러고 파일을 에디터와 브라우저에서 동시에 열어보자.  간단하게 요약된 설명과 추측하는 폼을 볼 때, 아직 숫자를 입력하는 폼은 아무런 기능을 하지 않는다</p>
+
+<p>여러분들의 코드를 추가하는 부분은 HTML안의 {{htmlelement("script")}} 요소 사이에 있다. </p>
+
+<pre class="brush: html">&lt;script&gt;
+
+  // Your JavaScript goes here
+
+&lt;/script&gt;
+</pre>
+
+<h3 id="데이터_저장을_위한_변수_추가">데이터 저장을 위한 변수 추가</h3>
+
+<p>이제 시작해보자! 먼저 {{htmlelement("script")}} 태그안에 다음의 코드들을 추가하자.</p>
+
+<pre class="brush: js">var randomNumber = Math.floor(Math.random() * 100) + 1;
+
+var guesses = document.querySelector('.guesses');
+var lastResult = document.querySelector('.lastResult');
+var lowOrHi = document.querySelector('.lowOrHi');
+
+var guessSubmit = document.querySelector('.guessSubmit');
+var guessField = document.querySelector('.guessField');
+
+var guessCount = 1;
+var resetButton;</pre>
+
+<p>이 코드의 부분은 프로그램에서 사용될 데이터를 저장할 변수를 세팅해준다. 변수들은 기본적으로 값들을  저장하고 있다. (숫자나 문자열 등). 변수들은 var이라는 키워드를 변수의 이름앞에 붙여줌으로써 선언이된다.  변수 에 넣고자 하는 값 앞에 등호(=)를 통해 변수에 값을 지정할 수 있다.</p>
+
+<p>예제에서</p>
+
+<ul>
+ <li>첫번째 변수 <code>randomNumber</code>는 수학적 알고리즘을 통해 계산해 1과 100사이의 임의의 수를 지정한다 .</li>
+ <li>다음의 세 개의 변수들은 각각 HTML에서 결과 문장을 저장하는 기준으로 저장되고, 코드상에서 나중에 문장에 추가되도록 사용된다.
+  <pre class="brush: html">&lt;p class="guesses"&gt;&lt;/p&gt;
+&lt;p class="lastResult"&gt;&lt;/p&gt;
+&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>다음의 2개 변수는 다음의 입력과 버튼을 받고, 추측된 값을 나중에 받도록 하는 역할을 한다.
+  <pre class="brush: html">&lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
+&lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;</pre>
+ </li>
+ <li>마지막 2개의 변수에는 (얼마나 많은 추측을 했는지) 추측 개수와, 아직은 있지않은 버튼을 리셋하는 변수가 있다.</li>
+</ul>
+
+<div class="note">
+<p><strong>주의</strong>: 앞으로 변수에 대해서는 더 많이 배울 것이다. <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">next article</a>를 참고해보자.</p>
+</div>
+
+<h3 id="함수">함수</h3>
+
+<p>다음으로, 아래의 자바스크립트 코드를 추가하자.</p>
+
+<pre class="brush: js">function checkGuess() {
+  alert('I am a placeholder');
+}</pre>
+
+<p>함수는 재사용이 가능한 코드의 묶음으로 한 번만 명시하면 몇번이고 실행이 가능하여 전체적인 코드에서 반복을 줄일 수 있다 . 이는 매우 유용하다. 함수를 정의하는 방법에는 여러가지가 있지만, 일단 여기서는 가장 간단한 방법을 집중적으로 살펴볼 것이다. 앞에 <code>function</code>키워드를 사용하고, 함수의 이름을 작성하며, 함수의 이름 뒤에 괄호를 넣어줌으로서 함수를 정의할 수 있다.그러고 나서 중괄호로 묶어준다. 중괄호 안에는 함수가 호출되면 실행되는 반복적인 코드들이 들어있다.</p>
+
+<p>코드는 괄호 앞에 위치한 함수의 이름을 적음으로 실행된다.</p>
+
+<p>코드를 저장하고 브라우저에서 새로고침을 통해 실행해보자.</p>
+
+<p><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>에 들어가서 다음의 문장을 입력해보자</p>
+
+<pre class="brush: js">checkGuess();</pre>
+
+<p>"I am a placeholder"라고 알리는 alert를 볼 수 있을 것이다. 여기서는 함수가 호출되면 alert가 생성되는 함수로 정의되어 있다.</p>
+
+<div class="note">
+<p><strong>Note</strong>:더 많은 함수에 대한 내용은 차후의 학습에서 볼 수 있을 것이다.</p>
+</div>
+
+<h3 id="연산자">연산자</h3>
+
+<p>자바스크립트의 연산자는 테스트를 진행하고, 수학적인 것을 다루고, 문자열을 결합하는 등의 것들을 가능케한다.</p>
+
+<p>다음의 코드를 저장하고 브라우저의 페이지에서 보이도록 새로고침 해보자. <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">개발자 도구 JavaScript 콘솔</a>을 열고 아래 표시된 에제를 입력 해보자. 표시된대로 정확히 입력하고 Return/Enter 키를 누른 후 어떤 결과가 반환되는지 보자. 브라우저 개발자 도구에 쉽게 액세스 할 수 없는 경우, 아래 표시된 간단한 콘솔을 사용 할 수 있다:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+      inputDiv.focus();
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<p>먼저 산술 연산자를 살펴보자.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">연산자</th>
+   <th scope="col">이름</th>
+   <th scope="col">예</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>더하기           </td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>빼기</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>곱하기</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>나누기</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>또한 + 연산자는 문자열들을 서로 연결할때에도 사용된다.(이를 프로그래밍에서 '문자열접합'이라고 한다.) 다음 코드를 입력해보자.</p>
+
+<pre class="brush: js">var name = 'Bingo';
+name;
+var hello = ' says hello!';
+hello;
+var greeting = name + hello;
+greeting;</pre>
+
+<p>그리고 '복합 대입 연산자' 라고 불리는 소스를 간단하게 하는 연산자도 있다. 예를 들어, 단순히 새로운 문자열을 기존에 있는 문자열에 추가하고, 그 결과를 반환받는 일을 하고 있다면 다음 코드를 사용할 수 있다.</p>
+
+<pre class="brush: js">name += ' says hello!';</pre>
+
+<p>이 코드는 다음 코드와 같은 의미이다.</p>
+
+<pre class="brush: js">name = name + ' says hello!';</pre>
+
+<p>참/거짓을 판명할때 (조건문이 있을 때 — {{anch("Conditionals", "아래")}}를 참조하자) , 비교연산자를 사용한다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Example</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Strict equality (is it exactly the same?)</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Non-equality (is it not the same?)</td>
+   <td><code>'Chris' !== 'Ch' + 'ris'</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Less than</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Greater than</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="조건문">조건문</h3>
+
+<p>함수가 반환되었을때, 자리표시자 메시지(Placeholder Message, 텍스트를 입력할 때 무엇을 입력해야되는지 알려주는 기능 - 역자)를 표시하지 않는 것이 더 좋을 것이라고 본다 . 우리는 사용자의 추측이 옳은지, 틀린지만 보고 적절하게 응답하도록만 할 것이다.</p>
+
+<p>이 시점에서 이제, 현재 checkGuess()함수를 다음과 같이 수정해보자.</p>
+
+<pre class="brush: js">function checkGuess() {
+  var userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Previous guesses: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Congratulations! You got it right!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!GAME OVER!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = 'Wrong!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess &lt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too low!';
+    } else if(userGuess &gt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too high!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}</pre>
+
+<p>꽤 코드가 길다. 각 부분별로 이제 하나하나씩 파헤쳐보자!</p>
+
+<ul>
+ <li>2번 줄까지는 userGuess변수를 선언하고, 텍스트 필드에서 입력된 현재 값들을 변수의 값으로 지정한다. 여기서는 빌트인된 <code>Number()</code>메소드(값이 숫자라는 것을 알 수 있다.)로 실행된다.</li>
+ <li>그러고나서, 처음으로 조건문을 맞딱드린다. (3-5번 줄). 조건문 블록은 조건이 옳은지 그른지에 따라 선택적으로 코드가 실행된다. 함수와 비슷하나, 꼭 그렇지는 않다. 가장 간단한 조건문의 형태는 키워드 <code>if</code>를 사용하고, 괄호가 있고, 중괄호가 있다. 괄호안에는 조건이 삽입된다. 만약 조건문이 옳다면, 중괄호안의 코드들이 실행된다. 거짓이라면, 다음 코드로 넘어가게 된다. 이 코드에서 조건문은 <code>guessCount변수가 1인지 이다.</code> (즉, 현재 플레이어의 게임이 처음인지 아닌지를 판단하는 조건)</li>
+</ul>
+
+<pre class="brush: js">guessCount === 1</pre>
+
+<p>참이라면, guessess 변수의 텍스트는 "Previous guesses: "가 된다. 그렇지 않다면, 실행되지 않는다.</p>
+
+<ul>
+ <li>6번 줄에서는 현재의 userGuess 값에 마지막 guesses 문장을 추가하고, 끝에 공백을 더함으로서 각각의 추측한 수끼리 간격을 두고 보여진다.</li>
+ <li>다음 블록도 함번 살펴보자(8-24번 줄)
+  <ul>
+   <li>첫 <code>if(){ }</code> 는 처음에 지정한 <code>randomNumber</code>과 사용자가 추측한 값(<code>userGuess</code>)이 값은지 본다. 참이라고 계산되면, 플레이어는 숫자를 맞춘것이고 게임을 이기게 된다. 따라서 플레이어에게 초록색, 인포메이션 박스로 축하메시지를 보여주고, 게임을 더할지와 관련된 <code>setGameOver() </code>함수를 불러온다.</li>
+   <li>이제 <code>else if(){ }</code> 구조를 사용하여 다른 조건문을 추가하게 된다. 이 조건은 사용자가 마지막 순서인지를 계산한다. 참이라면 프로그램은 이전과 같은 블록을 실행한다. 대신 게임을 이기지는 않았기 때문에 축하메시지를 제외된다</li>
+   <li>마지막 블록은  (the <code>else { }</code>)로 앞선 두 개의 조건이 모두 거짓일 때 실행된다. (i.e. 숫자를 맞추지도 못하고 차례가 남았을 때). 이 경우, 틀렸음을 알려주고, 정답보다 숫자가 큰지 작은지도 계산하여 적절한 메시지를 표시하도록 한다.</li>
+  </ul>
+ </li>
+ <li>함수상의 마지막 3줄(26-28번 줄)은 다음 숫자 추측을 위한 것이다. guessCount 변수에 1을 더함으로, 사용자의 차례가 지나갔음을 안다. (<code>++</code>이란 증감연사자이다. - 1을 더함). 그리고 값에 상관없이 텍스트필드를 공란으로 만들고, 커서를 위치시키므로, 다음값이 입력될 수 있도록 한다.</li>
+</ul>
+
+<h3 id="이벤트">이벤트</h3>
+
+<p>여기서 우리는 <code>checkGuess()</code> 함수를 잘 구현해 보았지만, 아직 호출하지 않았기 때문에 아무런 역할을 하지 않는다. 실제로는  "Submit guess" 버튼이 눌러져야 호출받도록 할 것이므로, 이벤트를 사용해서 구현할 것이다. 이벤트란 버튼을 클릭하고, 페이지가 로딩되고, 비디오가 실행되는 등 코드가 실행되기 위한 응답으로 브라우저상에서 일어나는 액션이다. 이벤트가 발생하여 발생된 이벤트를 처리하는 것을 <strong>이벤트 리스너(event listeners)</strong>라 하고, 이벤트가 발생했을 때 실행되는 코드 블록을 <strong>이벤트 핸들러(event handlers)</strong>라고 한다.</p>
+
+<p><code>checkGuess()</code>함수의 중괄호가 끝난뒤, 다음의 코드를 추가해보자.</p>
+
+<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p><code>이는 guessSubmit</code> 버튼에 이벤트 리스너를 추가하는 과정이다. 두개의 입력(인수)를 가지는 <code>addEventListner</code>메소드이다. 문자열로서 클릭을 처리하는 이벤트이고, 이벤트가 발생했을 때 실행하고자 하는 코드는 <code>checkGuess()</code> 함수이다. 특히, {{domxref("EventTarget.addEventListener", "addEventListener()")}}안에서는 함수의 괄호가 필요없다는 것에 주의하자.</p>
+
+<p>코드를 저장하고 새로고침해보자, 예제가 실행됨을 볼 수 있다.  아직 게임이 종료되면 실행되는 setGameOver() 함수가 정의되지 않았으므로, 정답을 맞췄을때나 추측에 상관없이 실행되었다면 프로그램의 실행이 멈춰야 한다. 필요한 코드를 작성하고 함수를 추가해보자.</p>
+
+<h3 id="함수로_프로그램_종료하기">함수로 프로그램 종료하기</h3>
+
+<p><code>setGameOver()</code>함수를 코드 아래쪽에 추가하고 살펴보자.  자바크스립트 코드의 맨 마지막에 추가하도록 하자.</p>
+
+<pre class="brush: js">function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}</pre>
+
+<ul>
+ <li>2-3번 줄은 텍스트 입력과 버튼의 diabled 속성을 true로 함으로써 작동되지  않도록 한다. 그렇지 않다면 사용자들이 게임이 종료된 후에도 계속 정답을 제출할 것이기 때문에 필수적이다. </li>
+ <li>4-6번 줄은 새로운 {{htmlelement("button")}} 엘리먼트를 생성하고, "Start new game"라고 표시되게 지정하고 현재의 HTML 아래쪽에 추가하도록 한다.</li>
+ <li>7번 줄은 새 버튼으로 하여금 이벤트 리스너를 지정하여 클릭되면 <code>resetGame() </code>함수가 실행되도록 한다.</li>
+</ul>
+
+<p>물론 이 함수도 정의해야 한다. 또다시 코드의 가장 아래에 다음 코드를 추가하자.</p>
+
+<pre class="brush: js">function resetGame() {
+  guessCount = 1;
+
+  var resetParas = document.querySelectorAll('.resultParas p');
+  for (var i = 0 ; i &lt; resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}</pre>
+
+<p>앞서 보는 함수 블록 코드는 게임이 어떻게 시작되고 사용자가 다시 시작할 수 있도록 초기화하는 코드이다.</p>
+
+<ul>
+ <li><code>guessCount 변수를 1로 한다.</code></li>
+ <li>표시된 정보를 모두 초기화한다.</li>
+ <li>코드상에서 초기화 버튼을 제거한다.</li>
+ <li>폼 작성을 위해 텍스트를 입력하는 곳을 비워놓고 커서를 위치시킨다.</li>
+ <li><code>lastResult</code>변수 상의 문장<code> </code>배경색을 제거한다.</li>
+ <li>임의의 수를 다시 지정함으로, 앞썬 <code>randomNumber</code>와 겹치지 않도록 다시 설정한다.</li>
+</ul>
+
+<p><strong>축하한다! 이제 여기까지 완료됬다면 프로그램이 정상적으로 작동될 것이다.</strong></p>
+
+<p>이제 살펴볼 것은 코드에서 볼 수 있는 중요한 부분중 하나이다.</p>
+
+<h3 id="반복문">반복문</h3>
+
+<p>위 코드상에서  자세히 살펴볼 것 중 하나는 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> 반복문에 관한 부분이다. 반복문은 프로그래머가 지정한 코드의 부분을 조건에 부합할때까지 계속 실행시키는 등 프로그래밍에서 중요한 개념 중 하나이다.</p>
+
+<p>시작에 앞서, <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a>에 들어가서, 다음을 입력해보자.</p>
+
+<pre class="brush: js">for (var i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+
+<p>어떤 일이 일어났는가? 숫자 1부터 20까지 차례대로 콘솔창에 표시됨을 볼 수 있다.이는 반복이라는 컨셉 때문이다. for 반복문에는 세 개의 입력값(아규먼트)이 있다.</p>
+
+<ol>
+ <li><strong>시작값</strong>: 위 코드에서는 1부터 시작하였지만, 프로그래머 임의대로 지정할 수 있다. i 대신 다른 변수를 사용할 수 있지만, 짧고 기억하기 쉬운 관습으로 인해 간단한 알파벳 i가 주로 사용된다.</li>
+ <li><strong>종료 조건</strong>: 여기서는 <code>i &lt; 21 라고 명시되었다. 이는 i가 21보다 작을때까지 반복이 이루어진다는 말이다. i가 21이 되었을 때, 반복은 종료된다.</code></li>
+ <li><strong>증감식</strong>:  <code>i++이라 명시된 것은 i에 1씩 더하라는 의미이다.반복은 i의 값에 따라 i가 21이 될때까지 반복된다</code>. 여기서는 {{domxref("Console.log", "console.log()")}} 를 사용하여 콘솔창에 반복적으로 i의 값을 출력시키는 간단한 예제를 보였다.</li>
+</ol>
+
+<p>숫자 맞추기 프로그램의 앞선 <code>resetGame()</code> 함수에서 반복문을 한 번 살펴보자.</p>
+
+<pre class="brush: js">var resetParas = document.querySelectorAll('.resultParas p');
+for (var i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p>이 코드에서는 {{domxref("Document.querySelectorAll", "querySelectorAll()")}} 메소드를 사용하여 <code>&lt;div class="resultParas"&gt;</code>안의 모든 문장들의 배열을 변수로 만들고 있다. 그러고 반복을 통해 각각의 배열 원소에 접근하여, 내용을 제거하게 된다.</p>
+
+<h3 id="객체에_대한_간단한_고찰">객체에 대한 간단한 고찰</h3>
+
+<p>이제 마지막으로 한단계 더 나아갈 수 있는 부분을 배워보자.  <code>var resetButton; </code>아래에 다음 코드를 추가해보자.(코드 위쪽에 있으니 참고하고, 저장까지 해보자)</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>여기서는 {{domxref("HTMLElement.focus", "focus()")}} 메소드를 통해 자동으로 커서를 페이지가 뜨자마자 {{htmlelement("input")}} 텍스트 필드에 위치시킬 수 있기때문에, 사용자가 처음에 폼 필드를 클릭할 필요없이 바로 글을 쓸 수 있게 된다. 아무것도 아닌 것처럼 보이지만, 사용자에게 굉장히 편리함을 주기 때문에 프로그램에서 좋은 효과를 가져다 준다.</p>
+
+<p>여기서 이루어지는 일들을 좀 더 자세히 분석해보자. 자바스크립트에서는 모든 것이 객체이다. 객체란 하나의 그룹안에 관계되는 기능(함수)들을 모아놓은 것이다.혼자서 객체를 생성할 수 있겠지만, 아직은 이르기 때문에 나중에 살펴보자. 지금은 간단히 브라우저에 내장된 객체를 사용함으로서 좀 더 많은 일들을 해보는 것에 중점을 두자.</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">여기서는, 먼저 HTML의 입력 폼 필드의 정보를 저장하는 </font>guessField</code> 변수를 생성해보자. (다음 코드는 맨 위의 변수 선언문에서 볼 수 있다.)</p>
+
+<pre class="brush: js">var guessField = document.querySelector('.guessField');</pre>
+
+<p>이 정보를 얻기 위해, {{domxref("document")}} 객체의 {{domxref("document.querySelector", "querySelector()")}}메소드를 사용한다. <code>querySelector()는 특정 정보(필요한 요소를 추출하는 </code><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a>)<code>를 가져오는 역할을 한다.</code></p>
+
+<p><code>이제 </code>{{htmlelement("input")}} 요소의 정보를 담고 있기 때문에, 속성(기본적으로 객체안의 변수나 변수 변경이 없는 경우)과 메소드(기본적으로 객체안의 함수)를 접근할 수 있게 된다. 입력 요소에 이용 가능한 메소드 중 하나가 <code>focus()이며</code>, 따라서 이 메소드를 통해 텍스트 입력에 커서를 가져다 놓을 수 있는 것이다.</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>폼 요소의 정보를 가지고 있지 않은 변수는 <code>focus()</code> 를 사용할 수 없다. 예를 들어,  <code>guesses </code>변수는 {{htmlelement("p")}} 요소의 정보를 가지고 있고, <code>guessCount</code> 변수는 단순한 숫자를 포함하고 있다.</p>
+
+<h3 id="브라우저_객체로_다루기">브라우저 객체로 다루기</h3>
+
+<p>이제 브라우저를 객체로서 다뤄보자.</p>
+
+<ol>
+ <li>먼저, 브라우저에서 프로그램을 연다</li>
+ <li>다음 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>을 실행하고, 자바스크립트 콘솔창을 활성화한다.</li>
+ <li> <code>guessField</code>의 입력과 콘솔에서 {{htmlelement("input")}} 요소를 포함한 변수를 보여줄 것이다. 변수를 포함한 실행환경 상에 존재하는 객체이름을 콘솔이 자동으로 완성하는 것도 알아야한다.</li>
+ <li>다음 코드를 입력하자
+  <pre class="brush: js">guessField.value = 'Hello';</pre>
+  <code>value</code> 속성은 텍스트 필드를 통해 입력되는 현재값을 나타낸다. 커맨드 창에 입력하고 어떤 일이 일어나는지 살펴보자.</li>
+ <li><code>guesses</code>에 입력하고 반환값을 살펴보자. 콘솔 창에서 변수가 {{htmlelement("p")}} 요소가 있음을 보여줄 것이다.</li>
+ <li>다음 코드를 입력하자.
+  <pre class="brush: js">guesses.value</pre>
+  브라우저에서 아무런 문장이 없기 때문에, undefined라고 리턴될 것이다.</li>
+ <li>대신, 다음 코드에서 문자를 변경/추가하기 위해서는 {{domxref("Node.textContent", "textContent")}} 속성을 사용한다.
+  <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre>
+ </li>
+ <li>그러면 이제 다양한 작업을 할 수 있으니, 하나하나 시도해보자.
+  <pre class="brush: js">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+  페이지의 모든 요소들을 <code>style</code> 속성을 가지고 있기때문에, 모든 요소에 적용가능한 인라인 CSS 스타일을 포함한 속성을 가진 객체를 포함하고 있음을 알 수 있다. 이는 자바스크립트 상에서 CSS 스타일을 동적으로 지정할 수 있음을 알 수 있다.</li>
+</ol>
+
+<h2 id="결론">결론</h2>
+
+<p>여기까지 예제를 빌드해보는 과정이었다.  마지막으로 작성된 코드를 실행해보거나,<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. 만약 코드가 실행되지 않는다면, <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">source code</a>를 참고하자.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/ko/learn/javascript/first_steps/arrays/index.html b/files/ko/learn/javascript/first_steps/arrays/index.html
new file mode 100644
index 0000000000..0cc11ca43f
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/arrays/index.html
@@ -0,0 +1,664 @@
+---
+title: Arrays
+slug: Learn/JavaScript/First_steps/Arrays
+translation_of: Learn/JavaScript/First_steps/Arrays
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">배열은 하나의 변수에 다수의 데이터를 저장하는 좋은 방법이며, 이 글에서 배열의 생성, 검색, 추가, 삭제 등과 같은 내용을 통해 배열에 대해 알아볼 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행요소:</th>
+   <td>기초 컴퓨터 활용지식, HTML, CSS 그리고 JavaScript에 대한 기초 지식.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>배열이 무엇인지 이해를 하고 JavaScript에서 어떻게 활용하는지 배운다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="배열이란">배열이란?</h2>
+
+<p>배열은 다수의 변수들을 가지고 있는 하나의 객체이다("list-like objects"). 배열 객체는 변수에 저장 해서 사용 할 수 있고, 변수에 저장된 다른 값들과 거의 동일한 방식으로 쓸 수 있다. 일반적인 값들과 배열의 다른점은 내부의 값에 각각 접근할 수 있으며, 루프를 통해 매우 효율적으로 작업이 가능하다는 것이다. 예를 들어 우리가 흔히 보는 영수증의 제품목록, 가격 등이 배열이라고 볼 수 있으며 그 가격들의 총합을 루프를 통하여 구할 수 있다.</p>
+
+<p>만약 배열이 없다면 다수의 값이 있을 때 각 값의 하나의 변수에 일일이 저장해야 하는 문제가 생길 것이며, 해당 값들을 출력하거나 연산할 때 한땀한땀 개고생 해야한다. 이때문에 코드를 작성하는데 오래걸리며, 비효율적이고 실수를 할 가능성이 높아진다. 오늘 산 물건이 10개 정도라면 값을 더하는데 얼마 걸리지 않겠지만, 100개나 1000개 쯤 구입을 했다면? 잠은 다잔거다.</p>
+
+<p>이전에 배웠던 것처럼, JavaScript 콘솔에서 몇가지 예제를 통해 배열의 쌩기초 부터 알아보자. 아래에 우리가 제공하는 콘솔이 하나 있다.(<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">이 콘솔</a>을 새 탭이나 창을 열어서 사용 하거나, 당신이 선호하는 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">개발자 콘솔</a>을 사용하면된다.)</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="배열_만들기">배열 만들기</h3>
+
+<p>배열은 대괄호로 구성되며 쉼표로 구분 된 항목들을 포함합니다.</p>
+
+<ol>
+ <li>쇼핑 목록을 배열에 저장하고 싶다면 다음과 같이하면됩니다. 콘솔에 다음 행을 입력하십시오.
+  <pre class="brush: js">var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+shopping;</pre>
+ </li>
+ <li>아래 배열의 각 항목은 문자열이지만 배열의 모든 항목 (문자열, 숫자, 개체, 다른 변수, 심지어 다른 배열)을 저장할 수 있습니다. 동일한 형태의 항목만 넣거나(아래 sequence처럼)  다양한 형태의 항목을 함께 넣을수(아래 random 처럼) 있습니다. 모두 숫자, 문자열 등일 필요는 없습니다. 다음을 입력해보세요.
+  <pre class="brush: js">var sequence = [1, 1, 2, 3, 5, 8, 13];
+var random = ['tree', 795, [0, 1, 2]];</pre>
+ </li>
+ <li>다음으로 넘어가기 전 여러분 마음대로 배열을 만들어 보세요</li>
+</ol>
+
+<h3 id="배열_항목의_접근과_수정">배열 항목의 접근과 수정 </h3>
+
+<p>그런 다음 <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">문자열의 문자에 접근했던 것</a>과 같은 방법으로 괄호 표기법을 사용하여 배열의 개별 항목을 접근 할 수 있습니다.</p>
+
+<ol>
+ <li>콘솔에 다음을 입력하세요:
+  <pre class="brush: js">shopping[0];
+// returns "bread"</pre>
+ </li>
+ <li>단일 배열 항목에 새 값을 제공하여, 배열의 항목을 수정할 수도 있습니다.<br>
+  한번 해보세요 :
+  <pre class="brush: js">shopping[0] = 'tahini';
+shopping;
+// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]</pre>
+
+  <div class="note"><strong>참고</strong>: 전에도 말했지만, 컴퓨터는 숫자를 셀때 0 부터 시작한다!</div>
+ </li>
+ <li>배열 내부의 배열을 다중배열이라고 합니다.대괄호 두개를 함께 연결하여 다른 배열 안에있는 배열 내부의 항목에 접근 할 수 있습니다.예를 들어 <code>무작위</code> 배열(<code>random</code> array) 안의 세 번째 항목 인 배열 내부 항목 중 하나에 접근하려면(앞 섹션 참조) 다음과 같이 할 수 있습니다.:
+  <pre class="brush: js">random[2][2];</pre>
+ </li>
+ <li>다음 단계로 넘어가기 전에 충분히 배열 예제를 연습해보세요.</li>
+</ol>
+
+<h3 id="배열의_갯수_알아내기">배열의 갯수 알아내기</h3>
+
+<p>{{jsxref("Array.prototype.length","length")}} 속성을 사용해서 배열에 들어 있는 문자열의 갯수를 알아낼 수 있다.(갯수가 얼마나 많이 있던지) 다음을 보자.:</p>
+
+<pre class="brush: js">sequence.length;
+// should return 7</pre>
+
+<p>다른 용도로 사용되기도 하는데, loop문으로 배열의 모든 항목을 반복적으로 값을 대입하는데 일반적으로 사용한다. 예를 들면:</p>
+
+<pre class="brush: js">var sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i &lt; sequence.length; i++) {
+  console.log(sequence[i]);
+}</pre>
+
+<p>다음 article에서 반복문에 대해서 자세히 다루겠지만 다음과 같이 요약할 수 있다.</p>
+
+<ol>
+ <li>배열을 반복문으로 돌릴때 item의 시작번호는 0 입니다.</li>
+ <li>배열의 갯수와 같은 번호일때 반복문을 중단하세요. 어떤 길이의 배열에서도 반복문이 돌지만, 이 경우에선 반복문이 7번 돌고 멈춥니다.(반복문을 끝내기를 원하는 마지막 item의 숫자는 6입니다.)</li>
+ <li>각각의 item에 대해 <code>console.log()</code>을 사용해 브라우저 콘솔창으로 확인해보세요.</li>
+</ol>
+
+<h2 id="유용한_배열_method">유용한 배열 method</h2>
+
+<p>이번 섹션에서는 문자열을 배열 항목으로 분할하고, 다시 배열 항목을 문자열로 변환하며 새로운 항목을 배열에 추가할 수 있는 배열 관련 method를 알아봅니다.</p>
+
+<h3 id="문자열을_배열로_배열을_문자열로_변환하기">문자열을 배열로, 배열을 문자열로 변환하기</h3>
+
+<p>프로그램을 만들다보면 종종 긴 문자열로 이루어진 원시 데이터를 제공받게 될 것이고, 원시 데이터를 정제하여 더 유용한 데이터를 추출해 테이블 형태로 표시하는 등 작업을 수행해야 합니다. 이러한 작업을 위해 {{jsxref("String.prototype.split()","split()")}} method를 사용할 수 있습니다.  {{jsxref("String.prototype.split()","split()")}} method는 사용자가 원하는 매개변수로 문자열을 분리하여 배열로 표현해줍니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 사실 String method이지만, 배열과 함께 사용하기 때문에 여기에 넣었습니다.</p>
+</div>
+
+<ol>
+ <li>{{jsxref("String.prototype.split()","split()")}} method가 어떻게 작동하는지 살펴봅시다. 우선 콘솔에서 아래와 같은 문자열을 만듭니다:
+  <pre class="brush: js">var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre>
+ </li>
+ <li>콤마로 분리하기 위해 단일 매개변수를 집어넣습니다.:
+  <pre class="brush: js">var myArray = myData.split(',');
+myArray;</pre>
+ </li>
+ <li>마지막으로 새로운 배열의 길이를 찾고 이 배열에서 몇 가지 항목을 검색해 봅니다.:
+  <pre class="brush: js">myArray.length;
+myArray[0]; // the first item in the array
+myArray[1]; // the second item in the array
+myArray[myArray.length-1]; // the last item in the array</pre>
+ </li>
+ <li>또한 아래 방법처럼 {{jsxref("Array.prototype.join()","join()")}} method를 사용하여 배열을 다시 문자열로 만들 수 있습니다. :
+  <pre class="brush: js">var myNewString = myArray.join(',');
+myNewString;</pre>
+ </li>
+ <li>배열을 문자열로 변환하는 또 다른 방법은 {{jsxref("Array.prototype.toString()","toString()")}} method를 사용하는 것 입니다. <code>toString()</code> 은 <code>join()</code> 과 달리 매개변수가 필요 없어서 더 간단하지만, 제한이 더 많습니다. <code>join()</code> 을 사용하면 다른 구분자를 지정할 수 있습니다. (콤마 말고 다른 매개변수를 사용하여 4단계를 실행 해보세요.)
+  <pre class="brush: js">var dogNames = ['Rocket','Flash','Bella','Slugger'];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre>
+ </li>
+</ol>
+
+<h3 id="배열에_item을_추가하고_제거하기">배열에 item을 추가하고 제거하기</h3>
+
+<p>이번엔 배열에 item을 추가하고 제거하는 방법을 알아볼 차례 입니다. 위에서 만든 <code>myArray</code> 를 다시 사용하겠습니다. 섹션을 순서대로 진행하지 않았다면 아래와 같은 배열을 만들어주세요.:</p>
+
+<pre class="brush: js">var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre>
+
+<p>먼저, 배열의 맨 끝에 item을 추가하거나 제거하기 위해 각각{{jsxref("Array.prototype.push()","push()")}} and {{jsxref("Array.prototype.pop()","pop()")}} 를 사용할 수 있습니다.</p>
+
+<ol>
+ <li>먼저 <code>push()</code> 를 사용합니다. — 배열의 끝에 추가할 item을 반드시 하나 이상 포함해야 한다는 점을 기억하고 아래와 같이 따라해보세요:
+
+  <pre class="brush: js">myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+</pre>
+ </li>
+ <li>method 호출이 완료되면 배열의 item이 변한것을 확인할 수 있습니다. 새로운 변수에 배열을 저장하려면 아래와 같이 사용합니다.:
+  <pre class="brush: js">var newLength = myArray.push('Bristol');
+myArray;
+newLength;</pre>
+ </li>
+ <li>배열의 마지막 item을 제거하는 방법은 <code>pop()</code>으로 매우 간단합니다. 아래와 같이 따라해보세요:
+  <pre class="brush: js">myArray.pop();</pre>
+ </li>
+ <li>method호출이 완료되면 배열에서 item이 제거된 것을 확인할 수 있습니다. 아래 방법을 사용하여 제거될 item을 변수에 저장할 수 있습니다.:
+  <pre class="brush: js">var removedItem = myArray.pop();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<p>{{jsxref("Array.prototype.unshift()","unshift()")}} 와{{jsxref("Array.prototype.shift()","shift()")}}는 <code>push()</code> 와 <code>pop()</code>과 유사하게 동작합니다. 다만, 배열의 맨 끝이 아닌 제일 처음 부분의 item을 추가하거나 제거합니다..</p>
+
+<ol>
+ <li>먼저 <code>unshift()</code> 를 사용해봅니다.:
+
+  <pre class="brush: js">myArray.unshift('Edinburgh');
+myArray;</pre>
+ </li>
+ <li>이제 <code>shift()</code>를 사용해봅니다.!
+  <pre class="brush: js">var removedItem = myArray.shift();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<h2 id="Active_learning_Printing_those_products!">Active learning: Printing those products!</h2>
+
+<p>Let's return to the example we described earlier — printing out product names and prices on an invoice, then totaling the prices and printing them at the bottom. In the editable example below there are comments containing numbers — each of these marks a place where you have to add something to the code. They are as follows:</p>
+
+<ol>
+ <li>Below the <code>// number 1</code> comment are a number of strings, each one containing a product name and price separated by a colon. We'd like you to turn this into an array and store it in an array called <code>products</code>.</li>
+ <li>On the same line as the <code>// number 2</code> comment is the beginning of a for loop. In this line we currently have <code>i &lt;= 0</code>, which is a conditional test that causes the <a href="/en-US/Learn/JavaScript/First_steps/A_first_splash#Loops">for loop</a> to stop immediately, because it is saying "stop when <code>i</code> is no longer less than or equal to 0", and <code>i</code> starts at 0. We'd like you to replace this with a conditional test that stops the loop when <code>i</code> is no longer less than the <code>products</code> array's length.</li>
+ <li>Just below the <code>// number 3</code> comment we want you to write a line of code that splits the current array item (<code>name:price</code>) into two separate items, one containing just the name and one containing just the price. If you are not sure how to do this, consult the <a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a> article for some help, or even better, look at the {{anch("Converting between strings and arrays")}} section of this article.</li>
+ <li>As part of the above line of code, you'll also want to convert the price from a string to a number. If you can't remember how to do this, check out the <a href="/en-US/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">first strings article</a>.</li>
+ <li>There is a variable called <code>total</code> that is created and given a value of 0 at the top of the code. Inside the loop (below <code>// number 4</code>) we want you to add a line that adds the current item price to that total in each iteration of the loop, so that at the end of the code the correct total is printed onto the invoice. You might need an <a href="/en-US/Learn/JavaScript/First_steps/Math#Assignment_operators">assignment operator</a> to do this.</li>
+ <li>We want you to change the line just below <code>// number 5</code> so that the <code>itemText</code> variable is made equal to "current item name — $current item price", for example "Shoes — $23.99" in each case, so the correct information for each item is printed on the invoice. This is just simple string concatenation, which should be familiar to you.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;p&gt;&lt;/p&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 410px;width: 95%"&gt;
+var list = document.querySelector('.output ul');
+var totalBox = document.querySelector('.output p');
+var total = 0;
+list.innerHTML = '';
+totalBox.textContent = '';
+// number 1
+                'Underpants:6.99'
+                'Socks:5.99'
+                'T-shirt:14.99'
+                'Trousers:31.99'
+                'Shoes:23.99';
+
+for (var i = 0; i &lt;= 0; i++) { // number 2
+  // number 3
+
+  // number 4
+
+  // number 5
+  itemText = 0;
+
+  var listItem = document.createElement('li');
+  listItem.textContent = itemText;
+  list.appendChild(listItem);
+}
+
+totalBox.textContent = 'Total: $' + total.toFixed(2);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i &lt; products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background-color: #f5f9fa;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="실습_Top_5_searches">실습: Top 5 searches</h2>
+
+<p>A good use for array methods like {{jsxref("Array.prototype.push()","push()")}} and {{jsxref("Array.prototype.pop()","pop()")}} is when you are maintaining a record of currently active items in a web app. In an animated scene for example, you might have an array of objects representing the background graphics currently displayed, and you might only want 50 displayed at once, for performance or clutter reasons. As new objects are created and added to the array, older ones can be deleted from the array to maintain the desired number.</p>
+
+<p>In this example we're going to show a much simpler use — here we're giving you a fake search site, with a search box. The idea is that when terms are entered in the search box, the top 5 previous search terms are displayed in the list. When the number of terms goes over 5, the last term starts being deleted each time a new term is added to the top, so the 5 previous terms are always displayed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: In a real search app, you'd probably be able to click the previous search terms to return to previous searches, and it would display actual search results! We are just keeping it simple for now.</p>
+</div>
+
+<p>To complete the app, we need you to:</p>
+
+<ol>
+ <li>Add a line below the <code>// number 1</code> comment that adds the current value entered into the search input to the start of the array. This can be retrieved using <code>searchInput.value</code>.</li>
+ <li>Add a line below the <code>// number 2</code> comment that removes the value currently at the end of the array.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;input type="text"&gt;&lt;button&gt;Search&lt;/button&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+
+&lt;textarea id="code" class="playable-code" style="height: 370px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+var searchInput = document.querySelector('.output input');
+var searchBtn = document.querySelector('.output button');
+
+list.innerHTML = '';
+
+var myHistory = [];
+
+searchBtn.onclick = function() {
+  // we will only allow a term to be entered if the search input isn't empty
+  if (searchInput.value !== '') {
+    // number 1
+
+    // empty the list so that we don't display duplicate entries
+    // the display is regenerated every time a search term is entered.
+    list.innerHTML = '';
+
+    // loop through the array, and display all the search terms in the list
+    for (var i = 0; i &lt; myHistory.length; i++) {
+      itemText = myHistory[i];
+      var listItem = document.createElement('li');
+      listItem.textContent = itemText;
+      list.appendChild(listItem);
+    }
+
+    // If the array length is 5 or more, remove the oldest search term
+    if (myHistory.length &gt;= 5) {
+      // number 2
+
+    }
+
+    // empty the search input and focus it, ready for the next term to be entered
+    searchInput.value = '';
+    searchInput.focus();
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i &lt; myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length &gt;= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="결론">결론</h2>
+
+<p>위에 글 읽어보니, 배열이 꽤 유용해 보인다는거 알꺼임; JavaScript에서 배열은 겁나 많이 쓰인다. 배열의 모든 항목 마다 똑같은 작업을 수행하려고 루프(loop)를 돌리니까 같이 알아놓으면 개꿀. 다음 모듈(챕터)에서 루프(loop)에 관한 기초부터 알려줄꺼니까 쫄지 말고 달려. 갈 길이 멀다. 이 모듈은 이제 다 봤어!</p>
+
+<p>이제 여기서 남은건 이 모듈의 평가뿐이야. 앞에 보여준 글(articles)을 얼마나 이해 했는지 테스트 할꺼임.</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> — an advanced level guide to arrays and their cousins, typed arrays.</li>
+ <li>{{jsxref("Array")}} — the <code>Array</code> object reference page — for a detailed reference guide to the features discussed in this page, and many more.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="이번_모듈에서_배울것들">이번 모듈에서 배울것들</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript란 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript를 시작해보자</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">뭐가 잘못 되었지? Troubleshooting JavaScript(잘못된 걸 고쳐보자)</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">원하는 정보를 저장하기 — 변</a>수</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">JavaScript의 수학 기초 — 숫자와 연산자</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">문자 다루기 — JavaScript에서의 문자</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">유용한 문자 메소드</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">배열</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">평가: 짧은 글 랜덤 생성기</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/first_steps/index.html b/files/ko/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..42f6e67418
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/index.html
@@ -0,0 +1,60 @@
+---
+title: JavaScript 첫걸음
+slug: Learn/JavaScript/First_steps
+tags:
+  - Article
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Landing
+  - 'l10n:priority'
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">첫 과정에서는 "JavaScript가 뭔가요?", "어떻게 생겼나요?", "뭘 할 수 있나요?"와 같은 근본적인 질문을 먼저 해결한 뒤에 JavaScript를 직접 사용해봅니다. 그 다음으로는 변수, 문자열, 숫자, 배열 등 중요한 구성 성분을 하나씩 자세히 알아봅니다.</p>
+
+<h2 id="준비_과정">준비 과정</h2>
+
+<p>이번 과정을 시작하기 전에 JavaScript에 대해 몰라도 되지만, HTML, CSS와는 어느 정도 친숙해야 합니다. 우선 다음 과정부터 진행하시는게 좋습니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web">Web으로 시작하기</a> (아주 기본적인 <a href="/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 소개</a>도 포함)</li>
+ <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a></li>
+</ul>
+
+<div class="note">
+<p><strong>참고</strong>: 파일을 만들 수 없는 컴퓨터나 태블릿, 기타 장치에서 작업을 하신다면 예제 코드의 대부분을 <a href="https://jsbin.com">JSBin</a>이나 <a href="https://thimble.mozilla.org/">Thimble</a> 같은 온라인 코딩 프로그램에서도 시험할 수 있습니다.</p>
+</div>
+
+<h2 id="구성">구성</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript가 뭔가요?</a></dt>
+ <dd>MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 첫 글은 JavaScript를 넓게 보면서 "뭔가요?", "뭘 하나요?"와 같은 질문을 답변하고, 여러분이 JavaScript에 친숙해지도록 도와드립니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript에 발 담그기</a></dt>
+ <dd>JavaScript에 관한 이론과 용도를 약간 배우셨으니, 실용적인 따라해보기와 함께 하는 기초과정 단기 특강을 제공해드리겠습니다. 여기서는 간단한 "숫자 알아맞히기" 게임을 단계별로 차근차근 만들어봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/What_went_wrong">어떤게 잘못됐나요? JavaScript 문제해결</a></dt>
+ <dd>이전 글에서 "숫자 알아맞히기" 게임을 만든 뒤에, 프로그램이 돌아가지 않는다는 것을 발견하실 겁니다. 두려워하지 마세요. 세 번째 글에서 JavaScript 프로그램의 오류를 찾고 고치는 팁을 배울 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Variables">필요한 정보 저장하기 — 변수</a></dt>
+ <dd>앞선 글을 모두 읽으셨으면 이제 JavaScript가 뭔지, 뭘 할 수 있는지, 다른 웹 기술과 함께 어떻게 사용하는지, 주요 기능이 어떻게 생겼는지 등 넓은 윤곽을 그리실 수 있을겁니다. 이제 진짜 기초로 돌아가, JavaScript의 제일 기본적인 구성 요소를 어떻게 사용하는지 알아보겠습니다. 바로 변수입니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Math">JavaScript의 기본 수학 — 숫자와 연산자</a></dt>
+ <dd>여기서는 JavaScript에서의 수학을 이야기하면서, 연산자와 다른 기능을 이리 저리 조합하여 숫자를 여러분의 뜻에 맞게 바꾸는 법을 배웁니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Strings">텍스트 다루기 — 문자열</a></dt>
+ <dd>우리의 시선을 이제 문자열로 돌릴 차례입니다. 프로그래밍에서 텍스트를 일컫는 단어죠. 이번 글에서는 JavaScript를 배울 때 문자열에 대해 알아둬야 하는 것, 예를 들어 문자열 생성, 문자열 안의 따옴표 처리, 문자열 합치기 등을 알아봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Useful_string_methods">유용한 문자열 메서드</a></dt>
+ <dd>문자열의 기초를 탐구했으니, 한 단계 더 나아가 문자열의 길이 찾기, 문자열 합치고 나누기, 문자를 다른 문자로 치환하기 등 내장 메서드로 할 수 있는 유용한 작업에 대해 생각해봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Arrays">배열</a></dt>
+ <dd>본 과정의 마지막 글에서는 배열에 대해 알아봅니다. 배열은 하나의 변수 이름 아래에 여러 데이터 목록을 저장하는 깔끔한 방법입니다. 배열이 왜 유용한지, 배열을 어떻게 생성하는지, 저장한 데이터를 회수하고, 추가하고, 제거하는 법 등을 배웁니다.</dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<p>다음 평가를 통해 JavaScript의 기초를 얼마나 이해했는지 시험할 수 있습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Silly_story_generator">바보같은 이야기 생성기</a></dt>
+ <dd>각자 배운 내용을 돌이켜보면서, 바보같은 이야기를 무작위로 만들어내는 앱을 제작해야 합니다. 행운을 빌어요!</dd>
+</dl>
diff --git a/files/ko/learn/javascript/first_steps/math/index.html b/files/ko/learn/javascript/first_steps/math/index.html
new file mode 100644
index 0000000000..b240481e50
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/math/index.html
@@ -0,0 +1,422 @@
+---
+title: 자바스크립트의 기본적인 연산 - 숫자와 연산자
+slug: Learn/JavaScript/First_steps/Math
+tags:
+  - 연산자
+  - 자바스크립트
+  - 진수
+translation_of: Learn/JavaScript/First_steps/Math
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">이 장은 자바스크립트의 연산에 대해 다룹니다. 능숙하게 숫자를 다루기 위해 어떻게 {{Glossary("Operator","operators")}} 와 그 외 기능을 사용하는지 알아봅니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">필요조건:</th>
+   <td>기본적인 커퓨터 지식, HTML과 CSS에 대한 기본적인 이해, JavaScript의 이해</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>자바스크립트 연산에 익숙해지기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="모두가_수학을_좋아합니다">모두가 수학을 좋아합니다</h2>
+
+<p>좋아요, 아닐수도 있습니다. 일부는 좋아하겠죠. 몇몇 사람들은 구구단을 배울 때부터 싫어했을 겁니다. 그리고 몇몇은 이 사이 어딘가 있겠죠. 그러나 누구도 수학이 삶을 살아가는데 필수적 요소라는건 부정할 수 없을겁니다. 우리가 자바스크립트(혹은 다른 프로그래밍 언어)를 배울때 특히 그렇습니다.  우리가 하는 일의 상당 부분은 수치형 데이터를 처리하고, 값을 계산하거나 하는 일에 의지합니다. </p>
+
+<p>이 장은 당장 알아야 하는 부분만 다룹니다.</p>
+
+<h3 id="숫자의_종류">숫자의 종류</h3>
+
+<p>프로그래밍에서, 우리가 잘 알고있는 십진법 체계라도 당신이 생각한 것보다 복잡합니다.</p>
+
+<ul>
+ <li><strong>정수(Integers)</strong>는 10, 400, 혹은 -5 같은 모든 숫자입니다.</li>
+ <li><strong>실수(Floats)</strong>는 12.5, 6.7786543과 같이 소수점과 소수 자릿수가 있습니다.</li>
+ <li><strong>실수(Doubles)</strong>는 IEEE 754 표준 부동소수점보다 더 정확한 정밀도를 가지고 있는 특별한 데이터 타입입니다. (<strong>Doubles</strong>은<strong> Floats</strong> 보다 더 많은 소수 자릿수를 표현할 수 있어서 소수점 표현에는 <strong>Doubles</strong>가 더 정확합니다.).</li>
+</ul>
+
+<p>자바스크립트는 심지어 다른 숫자 타입을 지원합니다. 10진수는 10을 기준으로 합니다. (숫자 0~9을 쓴다는 뜻입니다.), 하지만 자바스크립트는 아래와 같은 데이터 타입을 지원합니다.</p>
+
+<ul>
+ <li><strong>2진수(Binary)</strong> — 10진수를 0과 1를 이용해 나타내는 데이터 타입입니다.</li>
+ <li><strong>8진수(Octal)</strong> —  10진수를 0부터 7까지의 수를 이용해 나타내는 데이터 타입입니다.</li>
+ <li><strong>16진수(Hexadecimal)</strong> — 10진수를 0부터 15까지의 수를 이용해 나타내는 데이터 타입입니다.(1~10, A~F) . <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">CSS의 색상</a>을 지정할 때 쉽게 볼 수 있습니다.</li>
+</ul>
+
+<p><strong>어려워서 힘들다고 느끼기 전에, 잠시 멈추세요!</strong> 시작하기 위해서 우리는 이제부터 10진수만 사용하도록 하겠습니다. 다른 유형에 대해 생각할 필요가 없습니다.</p>
+
+<p>두 번째 좋은 소식은 다른 프로그래밍 언어와 달리, 자바스크립트는 실수와 정수 모두 {{jsxref("Number")}}라는 하나의 데이터 타입만 사용합니다. 실수와 정수 모두 같은 데이터 타입이기 때문에 하나의 방법으로 동작하게 할 수 있다는 뜻입니다.</p>
+
+<h3 id="나를_위한_숫자들">나를 위한 숫자들</h3>
+
+
+
+<p>우리가 필요한 기본 구문을 다시 익히기 위해 몇 가지 숫자를 빠르게 생각해 봅시다. <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> 에 들어가서 아래의 나열된 명령어를 입력해주세요.</p>
+
+<ol>
+ <li>먼저, 두 개의 변수를 선언합니다. 그리고 두 개의 변수를 정수와 실수로 초기화해줍니다. 각각 변수명을 콘솔 창에 입력해주세요. 그리고 어떤 값이 나오는지 확인해주세요.
+  <pre class="brush: js notranslate">var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;</pre>
+ </li>
+ <li>숫자는 따옴표(" 또는 ')가 없습니다. — 계속 하기 전에 여러 개의 변수를 선언하고 숫자를 초기화 해주세요.</li>
+ <li>우리들의 변수들의 데이터 타입을 확인합니다. 자바스크립트에서는 데이터 타입을 확인하기 위해 {{jsxref("Operators/typeof", "typeof")}} 라는 키워드를 사용합니다. 아래와 같이 입력해 주세요:
+  <pre class="brush: js notranslate">typeof myInt;
+typeof myFloat;</pre>
+  <code>"number"</code> 는 정수와 실수인 경우에 나옵니다. — 이것들은 정수와 실수가 다른 데이터 타입일 때 보다 다루기 쉽게 해줍니다.  그리고 다른 데이터 타입일 때 다른 방법으로 다뤄야만 합니다. 호우~!</li>
+</ol>
+
+<h2 id="산술_연산자">산술 연산자</h2>
+
+<p>산술연산자들의 기본적인 용도는 덧셈을 할 때 입니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Purpose</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Addition</td>
+   <td>두 개의 숫자를 더합니다.</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Subtraction</td>
+   <td>왼쪽에 있는 수를 오른쪽 수로 뺍니다.</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Multiplication</td>
+   <td>두 개의 숫자를 곱합니다.</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Division</td>
+   <td>왼쪽의 숫자를 오른쪽 숫자로 나눠서 몫을 구합니다.</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>Remainder (sometimes called modulo)</td>
+   <td>
+    <p>왼쪽의 숫자를 오른쪽 숫자로 나눠서 나머지를 구합니다.</p>
+   </td>
+   <td><code>8 % 3</code><br>
+    ( 2를 반환합니다, 8을 3으로 나눴을 때 몫이 2이기 때문입니다.)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>팁</strong>:  연산에 관계된 수를 피연산자라고 부릅니다.<br>
+ 참고 - {{Glossary("Operand", "operands")}}.</p>
+</div>
+
+<p>아직 수학을 공부할 필요는 없습니다. 하지만 우리는 문법 확인을 해야합니다. 아래의 명령어들을 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> 에 입력해주세요. </p>
+
+<ol>
+ <li>아래의 명령어를 콘솔창에 입력해주세요.
+  <pre class="brush: js notranslate">10 + 7
+9 * 8
+60 % 3</pre>
+ </li>
+ <li>You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example:
+  <pre class="brush: js notranslate">var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;</pre>
+ </li>
+ <li>Last for this section, try entering some more complex expressions, such as:
+  <pre class="brush: js notranslate">5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;</pre>
+ </li>
+</ol>
+
+<p>Some of this last set of sums might not give you quite the result you were expecting; the below section might well give the answer as to why.</p>
+
+<h3 id="Operator_precedence">Operator precedence</h3>
+
+<p>Let's look at the last example from above, assuming that <code>num2</code> holds the value 50 and <code>num1</code> holds the value 10 (as originally stated above):</p>
+
+<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre>
+
+<p>As a human being, you may read this as <em>"50 plus 10 equals 60"</em>, then <em>"8 plus 2 equals 10"</em>, and finally <em>"60 divided by 10 equals 6"</em>.</p>
+
+<p>But the browser does <em>"10 divided by 8 equals 1.25"</em>, then <em>"50 plus 1.25 plus 2 equals 53.25"</em>.</p>
+
+<p>This is because of <strong>operator precedence</strong> — some operators will be applied before others when calculating the result of a sum (referred to as an expression, in programming).  Operator precedence in JavaScript is the same as is taught in math classes in school — Multiply and divide are always done first, then add and subtract (the sum is always evaluated from left to right).</p>
+
+<p>If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:</p>
+
+<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre>
+
+<p>Try it and see.</p>
+
+<div class="note">
+<p><strong>Note</strong>: A full list of all JavaScript operators and their precedence can be found in <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p>
+</div>
+
+<h2 id="Increment_and_decrement_operators">Increment and decrement operators</h2>
+
+<p>Sometimes you'll want to repeatedly add or subtract one to/from a numeric variable value. This can be conveniently done using the increment (<code>++</code>) and decrement(<code>--</code>) operators. We used <code>++</code> in our  "Guess the number" game back in our <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">first splash into JavaScript</a> article, when we added 1 to our <code>guessCount</code> variable to keep track of how many guesses the user has left after each turn.</p>
+
+<pre class="brush: js notranslate">guessCount++;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: They are most commonly used in <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">loops</a>, which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — check it out live, and look at the source code to see if you can spot the incrementors! We'll look at loops in detail later on in the course.</p>
+</div>
+
+<p>Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:</p>
+
+<pre class="brush: js notranslate">3++;</pre>
+
+<p>So, you can only increment an existing variable. Try this:</p>
+
+<pre class="brush: js notranslate">var num1 = 4;
+num1++;</pre>
+
+<p>Okay, strangeness number 2! When you do this, you'll see a value of 4 returned — this is because the browser returns the current value, <em>then</em> increments the variable. You can see that it's been incremented if you return the variable value again:</p>
+
+<pre class="brush: js notranslate">num1;</pre>
+
+<p>The same is true of <code>--</code> : try the following</p>
+
+<pre class="brush: js notranslate">var num2 = 6;
+num2--;
+num2;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can make the browser do it the other way round — increment/decrement the variable <em>then</em> return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use <code>++num1</code> and <code>--num2</code>.</p>
+</div>
+
+<h2 id="Assignment_operators">Assignment operators</h2>
+
+<p>Assignment operators are operators that assign a value to a variable. We have already used the most basic one, <code>=</code>, loads of times — it simply assigns the variable on the left the value stated on the right:</p>
+
+<pre class="brush: js notranslate">var x = 3; // x contains the value 3
+var y = 4; // y contains the value 4
+x = y; // x now contains the same value y contains, 4</pre>
+
+<p>But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Purpose</th>
+   <th scope="col">Example</th>
+   <th scope="col">Shortcut for</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+=</code></td>
+   <td>Addition assignment</td>
+   <td>Adds the value on the right to the variable value on the left, then returns the new variable value</td>
+   <td><code>x = 3;<br>
+    x += 4;</code></td>
+   <td><code>x = 3;<br>
+    x = x + 4;</code></td>
+  </tr>
+  <tr>
+   <td><code>-=</code></td>
+   <td>Subtraction assignment</td>
+   <td>Subtracts the value on the right from the variable value on the left, and returns the new variable value</td>
+   <td><code>x = 6;<br>
+    x -= 3;</code></td>
+   <td><code>x = 6;<br>
+    x = x - 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>*=</code></td>
+   <td>Multiplication assignment</td>
+   <td>Multiples the variable value on the left by the value on the right, and returns the new variable value</td>
+   <td><code>x = 2;<br>
+    x *= 3;</code></td>
+   <td><code>x = 2;<br>
+    x = x * 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>/=</code></td>
+   <td>Division assignment</td>
+   <td>Divides the variable value on the left by the value on the right, and returns the new variable value</td>
+   <td><code>x = 10;<br>
+    x /= 5;</code></td>
+   <td><code>x = 10;<br>
+    x = x / 5;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Try typing some of the above examples into your console, to get an idea of how they work. In each case, see if you can guess what the value is before you type in the second line.</p>
+
+<p>Note that you can quite happily use other variables on the right hand side of each expression, for example:</p>
+
+<pre class="brush: js notranslate">var x = 3; // x contains the value 3
+var y = 4; // y contains the value 4
+x *= y; // x now contains the value 12</pre>
+
+<div class="note">
+<p><strong>Note</strong>: There are lots of <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">other assignment operators available</a>, but these are the basic ones you should learn now.</p>
+</div>
+
+<h2 id="Active_learning_sizing_a_canvas_box">Active learning: sizing a canvas box</h2>
+
+<p>In this exercise, you will manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the {{domxref("Canvas API", "", "", "true")}}. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables <code>x</code> and <code>y</code>, which are initially both given a value of 50.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Open in new window</a></strong></p>
+
+<p>In the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. Let's try the following:</p>
+
+<ul>
+ <li>Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.</li>
+ <li>Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.</li>
+ <li>Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.</li>
+ <li>Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.</li>
+ <li>Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.</li>
+ <li>Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.</li>
+</ul>
+
+<p>Don't worry if you totally mess the code up. You can always press the Reset button to get things working again. After you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges.</p>
+
+<h2 id="Comparison_operators">Comparison operators</h2>
+
+<p>Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use <strong>comparison operators</strong>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Purpose</th>
+   <th scope="col">Example</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Strict equality</td>
+   <td>Tests whether the left and right values are identical to one another</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Strict-non-equality</td>
+   <td>Tests whether the left and right values <strong>not</strong> identical to one another</td>
+   <td><code>5 !== 2 + 3</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Less than</td>
+   <td>Tests whether the left value is smaller than the right one.</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Greater than</td>
+   <td>Tests whether the left value is greater than the right one.</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+  <tr>
+   <td>&lt;=</td>
+   <td>Less than or equal to</td>
+   <td>Tests whether the left value is smaller than or equal to the right one.</td>
+   <td><code>3 &lt;= 2</code></td>
+  </tr>
+  <tr>
+   <td>&gt;=</td>
+   <td>Greater than or equal to</td>
+   <td>Tests whether the left value is greater than or equal to the right one.</td>
+   <td><code>5 &gt;= 4</code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: You may see some people using <code>==</code> and <code>!=</code> in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from <code>===</code>/<code>!==</code>. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.</p>
+</div>
+
+<p>If you try entering some of these values in a console, you'll see that they all return <code>true</code>/<code>false</code> values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:</p>
+
+<ul>
+ <li>Display the correct text label on a button depending on whether a feature is turned on or off</li>
+ <li>Display a game over message if a game is over or a victory message if the game has been won</li>
+ <li>Display the correct seasonal greeting depending what holiday season it is</li>
+ <li>Zoom a map in or out depending on what zoom level is selected</li>
+</ul>
+
+<p>We'll look at how to code such logic when we look at conditional statements in a future article. For now, let's look at a quick example:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Start machine&lt;/button&gt;
+&lt;p&gt;The machine is stopped.&lt;/p&gt;
+</pre>
+
+<pre class="brush: js notranslate">var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Start machine') {
+    btn.textContent = 'Stop machine';
+    txt.textContent = 'The machine has started!';
+  } else {
+    btn.textContent = 'Start machine';
+    txt.textContent = 'The machine is stopped.';
+  }
+}</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Open in new window</a></strong></p>
+
+<p>You can see the equality operator being used just inside the <code>updateBtn()</code> function. In this case, we are not testing if two mathemetical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to  "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Such a control that swaps between two states is generally referred to as a <strong>toggle</strong>. It toggles between one state and another — light on, light off, etc.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.</p>
+
+<p>In the next article, we'll explore text and how JavaScript allows us to manipulate it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a> and <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a> articles.</p>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/first_steps/silly_story_generator/index.html b/files/ko/learn/javascript/first_steps/silly_story_generator/index.html
new file mode 100644
index 0000000000..a6f2318602
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/silly_story_generator/index.html
@@ -0,0 +1,192 @@
+---
+title: Silly story generator
+slug: Learn/JavaScript/First_steps/Silly_story_generator
+translation_of: Learn/JavaScript/First_steps/Silly_story_generator
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">이 모듈에서 배운 지식들을 바탕으로 랜덤하게 꾸며진 이야기(silly stories)가 만들어지는 재미있는 앱을 만들어 볼거에요. 즐겨봅시다!!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행요소:</th>
+   <td>이 평가에 시도하기 전에 이 모듈에서 배운 항목을 모두 수행해봐야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>변수, 숫자, 연산자, 문자열 및 배열 같은 자바스크립트의 기본항목들에 대한 전반적인 이해를 테스트합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="시작하기">시작하기</h2>
+
+<p>이 평가하기(assements)를 시작하기 전에, 아래와 같은 것을 해야 합니다:</p>
+
+<ul>
+ <li>HTML 예제 파일이 있는 사이트(<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">grab the HTML file</a>)로 이동하여 파일을 복사하여 자기 컴퓨터에 새 디렉토리를 만들고 파일이름 <code>index.html</code> 로 저장합니다. 이 안에는 예제를 위한 CSS가 포함되어 있습니다.</li>
+ <li>또 다른 가공 전의 텍스트가 있는 사이트 (<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">page containing the raw text</a>) 로 가서 별도의 브라우저 탭으로 열어 놓으세요. 이것은 나중에 필요합니다.</li>
+</ul>
+
+<p>위 방법 대신에, 여러분은 테스트에 <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://glitch.com/">Glitch</a> 같은 사이트를 이용할 수 있습니다. 이 온라인 에디터들 내부에 HTML, CSS 그리고 JavaScript를 붙여넣을 수 있습니다. 만약 당신이 사용하는 온라인 에디터가 Javascript 패널(또는 탭)을 갖고 있지 않다면, 자유롭게 HTML 페이지 내부에 <code>&lt;script&gt;</code> 엘리멘트를 넣을 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 만약 평가가 막힌다면, 우리에게 도움을 요청하세요— 이 페이지 밑에 {{anch("Assessment or further help")}} 섹션을 보세요.</p>
+</div>
+
+<h2 id="프로젝트에_대한_간략한_설명">프로젝트에 대한 간략한 설명</h2>
+
+<p>이제 프로젝트 시작을 위해 가공하지 않은 HTML/CSS 그리고 몇몇 텍스트를  만들고 확인했습니다. 이제 아래와 같은 기능을 하는 프로그램을 만들기 위해 JavaScript를 코딩해야 합니다.</p>
+
+<ul>
+ <li>"랜덤한 이야기 만들기('Generate random story') 버튼를 누를 때 마다 꾸며진 이야기(silly stories)를 만들어야 합니다.</li>
+ <li>"Enter custome name" 필드에 값이 입력되어있지 않을 경우 기본 이름을 Bob으로 지정합니다. "랜덤한 이야기 만들기('Generate random story')" 버튼을 클릭 하면 아래 사진에서 "Chris saw the ~.." 로 시작하는 문장이 "Bob saw the ~.."로 표시되게 합니다.</li>
+ <li>"랜덤한 이야기 만들기('Generate random story')" 을 클릭하면 프로그램이 "US", "UK" 라디오 체크버튼을 확인하여 각 국가에 맞는 온도, 수량, 무게 등 단위를 설정하세요. 아래 사진의 예를 들면 "~ weights 300 pounds, and ~" 부분이 해당됩니다.</li>
+ <li>"랜덤한 이야기 만들기('Generate random story')" 을 누르면 꾸며진 이야기('silly stories')가 랜덤하게 계속 만들어지게 하세요.</li>
+</ul>
+
+<p>이 스크린샷은 프로그램 출력의 예시 입니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>더 많은 아이디어를 얻으려면, 완성된 예(<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">have a look at the finished example</a> )를 참고하세요(소스코드는 엿보기 없기!)</p>
+
+<h2 id="완료하기">완료하기</h2>
+
+<p>이번 섹션에선 프로젝트를 어떻게 진행해야 하는지 자세하게 설명합니다.</p>
+
+<p>기본 설정:</p>
+
+<ol>
+ <li><code>index.html</code> <font face="Open Sans">파</font>일과 같은 디렉토리에 <code>main.js</code> 라는 이름의 파일을 새로 만듭니다.</li>
+ <li>HTML 파일(<code>index.html</code>)에 <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/script">&lt;script&gt;</a> 엘리먼트를 삽입하여 <code>main.js</code> 를 참조하도록 외부 자바스크립트 파일(<code>main.js</code>)을 적용합니다. <code>&lt;/body&gt;</code> 태그 바로 앞에 배치하세요.</li>
+</ol>
+
+<p>초기 변수와 함수:</p>
+
+<ol>
+ <li>
+  <p>가공 전의 텍스트 파일에서, "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" 바로 밑의 코드를 모두 복사해서 <code>main.js</code> 파일의 맨 위에 붙여넣습니다. 이 내용은 세 개의 변수 제공하는데, <code>customName</code> 변수는 "Enter custom name" 텍스트 필드 값을 저장하고, <code>randomize</code> 변수에는 "Generate random story" 버튼 오브젝트를 저장하고, HTML 바디에 끝에 있는 클래스가 <code>story</code>인 <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/p">&lt;p&gt;</a> 엘리먼트는 story 변수에 저장하며 해당 엘리먼트에는 랜덤한 이야기가 복사됩니다. 또한, randomValueFromArray() 함수는 배열을 가져와서 배열이 가진 항목 중 하나를 랜덤하게 반환합니다.</p>
+ </li>
+ <li>
+  <p>가공전 텍스트 파일의 두번째 섹션 "2. RAW TEXT STRINGS"에는 프로그램에 자동으로 입력되어 랜덤 이야기 엘리먼트에 출력하는 문자열이 포함되어 있습니다.  <code>main.js</code> 에 아래 설명대로 변수를 만듭니다:</p>
+
+  <ol>
+   <li>먼저 <code>storyText</code>변수에 가장 긴 문자열("It was 94 fahrenheit outside, so ~~" 로 시작하는 문장)을 저장합니다.</li>
+   <li><code>insertX</code> 배열에 세 개의 문자열 집단의 첫번째(Willy the Goblin, Big Daddy, Father Christmas)를 저장합니다.</li>
+   <li><code>insertY</code> 배열에 세 개의 문자열 집단의 두번째(the soup kitchen, Disneyland, the White House)을 저장합니다.</li>
+   <li><code>insertZ</code> 배열에 세 개의 문자열 집단의 세번째(spontaneously combusted, melted into a puddle on the sidewalk, turned into a slug and crawled away)를 저장합니다.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>이벤트 핸들러와 완성되지 않은 함수 정리:</p>
+
+<ol>
+ <li>가공전 텍스트 파일("raw text file")로 돌아가자.</li>
+ <li>"3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" 밑의 코드를 복사하고, <code>main.js</code> 파일의 맨 밑에다 붙여 넣으세요:
+  <ul>
+   <li><code>randomize</code> 변수에 클릭 이벤트 리스너를 추가하세요. 그러면 버튼이 클릭되었을 때, <code>result()</code> 함수가 실행됩니다.</li>
+   <li>코드에 부분적으로 완료된 <code>result()</code> 함수를 추가하세요. 이 평가의 뒤 부분에서 함수가 완성되고 정상적으로 동작하도록 내용을 추가할 것입니다.</li>
+  </ul>
+ </li>
+</ol>
+
+<p><code>result()</code> 함수 완성하기:  </p>
+
+<ol>
+ <li><code>newStory</code>라 불리는 새 변수를 만들고, 이것의 값(value)를 <code>storyText</code> 와 똑같이 설정하세요. 이것은 버튼을 누르고 함수가 수행(run)될 때 마다 새 이야기('story')가 랜덤하게 만들어 질 수 있게 합니다. <code>storyText</code>를 직접 변경했다면, 새로운 이야기('story')를 한번만 만들 수 있습니다(함수를 통해서 하지 않으면 정적인 값만 유지한다는 의미).</li>
+ <li>세 개의 새로운  변수  <code>xItem</code>, <code>yItem</code>, 와 <code>zItem</code>를 만들고 이 세 개의 변수는 <code>randomValueFromArray()</code> 를 반환 결과인 세개의 배열과 같도록 만듭니다(각 경우의 호출 결과는 각 배열에 임의의 아이템). 예를 들어 <code>randomValueFromArray(insertX) </code>함수를 호출하면 <code>insertX</code> 에서 문자열의 하나를 랜덤하게 가질 수 있다.</li>
+ <li>그 다음으로  <code>newStory</code> 문자열에 있는 세 개의 placeholders— <code>:insertx:</code>, <code>:inserty:<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>:insertz:</code> —저장된 <code>xItem</code>, <code>yItem </code>와 <code>zItem</code> 문자열을 이용하여 로 변환하세요. 여기서 특정 문자열 함수가 도움될 것입니다. 이 함수는 각 경우에 <code>newStory</code>와 같게되며(대입), 호출 시 마다 <code>newStory</code> 의 원래 값과 동일하지만 대체 될 수 있습니다(랜덤으로 값이 변경되는 것을 표현하는 것으로 추정됨) 그러므로 버튼이 눌러질때마다, 이  placeholder는 꾸며진('silly') 문자열로 랜덤하게 교체되게 됩니다. 추가적인 힌트로, 이 문제의 함수는 하위 문자열에서 찾아진 첫번째 인스턴스만 변경되므로, 아마도 두번 이상 이 함수를 호출해야 할 수도 있습니다.</li>
+ <li>첫번째 <code>if</code> 블록에서, <code>newStory</code> 의 'Bob'이라는 이름을 <code>name</code> 변수를 사용하여 변환하는 함수를 추가하세요. 이 블록에서 말하는 내용은 "만약 <code>customName</code> 텍스트 입력에 값이 들어가 있다면, 이야기속의 Bob을 사용자가 정의한 이름으로 바꾸세요" 라는 의미입니다.</li>
+ <li>두번째  <code>if</code> 블록에서는 <code>uk</code> 라디오 버튼이 선택되었는지 확인합시다. <code>uk</code> 라디오 버튼이 눌려졌다면, 이야기('story') 상의 무게('weight')와 온도('temperature') 값 들인  파운드('pounds')와 화씨온도(Fahrenheit) 를 'stones'과 섭씨온도('centigrade')를 바꾸어야 합니다. 필요한 것은 아래와 같습니다:
+  <ol>
+   <li>파운드(pound)를  stone, 화씨온도(Fahrenheit) 를 섭씨온도(centigrade)로 변환하는 공식을 참조하라.</li>
+   <li> <code>weight</code> 변수를 정의하는 라인에서는, 300를 300 파운드를 stones 변환하라. 변환 결과값을 <code>Math.round()</code> 를 실행한 결과값 끝에 <code>' stone'</code> 을 결합한다(문자열 더하기 연산 또는 concat())</li>
+   <li> <code>temperature</code> 변수를 정의하는 라인에서는, 94를  화씨(Fahrenheit) 94도를 섭씨온도(centigrade)로 변환하라. 변환 결과값을 <code>Math.round()</code> 를 실행한 결과값 끝에 <code>' centigrade'</code>을 결합한다(문자열 더하기 연산 또는 concat())</li>
+   <li>두 변수 정의 바로 밑에, '94 화씨온도('farenheit')로  <code>temperature</code> 변수의 내용을 변환하는 것과,  '300 pounds'을 <code>weight</code> 변수의 내용을 바꾸는 두줄의 문자열 변환라인을 추가한다 .</li>
+  </ol>
+ </li>
+ <li>마지막으로, 함수의 끝 두 줄에 <code>story</code> 변수의 <code>textContent</code> 속성(property)을 <code>newStory</code>와 같게 만드세요.</li>
+</ol>
+
+<h2 id="힌트와_팁">힌트와 팁</h2>
+
+<ul>
+ <li>JavaScript 내용 외에는 HTML을 수정할 필요가 없습니다.</li>
+ <li>만약 JavaScript가 정상적으로 HTML에 적용되었는지 의심스럽다면, 일시적으로 JavaScript의 내용을 지우고, 단순하고 짧은 효과가 명확한 내용을 추가해서, 저장하고 새로고침을 해보세요. 아래 예제는 {{htmlelement("html")}} 의 배경을 빨강색으로 바꿉니다 — 정상적으로 JavaScript가 적용되었다면 브라우저 전체 윈도우가 빨강색으로 바뀌게 될겁니다:
+  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> 는 가장 가까운 정수로 단순하게 반올림한 결과를 반환하는 JavaScript 내장함수 입니다. </li>
+ <li>변환이 필요한 세 개의 문장이 문제 있습니다. 아마도 <code>replace()</code> 함수를 반복적으로 실행 하거나 정규 표현식을 사용할 수 있습니다. 예를 들어 <code>var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> 를 실행하면 인스턴스의 'love' 는 'like' 로 모두 바뀌게 될겁니다. 기억하세요, 문자열은 변하지 않습니다!(문자열은 새 변경할 수 없으며, 새 문자열이 생성되고 그 생성된 결과를 인스턴스가 갖게됨을 표현한 것으로 추정)</li>
+</ul>
+
+<h2 id="평가_또는_추가_도움">평가 또는 추가 도움</h2>
+
+<p>만약 작업을 평가하길 원하거나 풀이가 막혀서 도움을 원하면:</p>
+
+<ol>
+ <li>온라인 공유가 가능한 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 에디터에 작업한 것을 올려 두세요.</li>
+ <li>평가 또는 도움을 요청을 <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 포스트를 쓰세요. 당신의 글은 아래를 포함해야 합니다:
+  <ul>
+   <li>"Assessment wanted for Silly story generator"와 같은 서술적인 제목.</li>
+   <li>이미 시도해본 것에 대한 상세내용과 우리가 어떻게 하길 원하는 지.<br>
+    예. 만약 당신이 풀이가 막히고 도움이 필요하다거나, 평가를 원한다는 것을.</li>
+   <li>평가를 받고 싶거나 도움이 필요한 예제를 갖고 있는 공유가능한 온라인 에디터 링크. (위에 1단계에서 언급한 것). 이것은 좋은 습관입니다. 그들의 코드를 보지못한다면 도움을 주기는 굉장히 어렵습니다.</li>
+   <li>실제 작업 또는 평가 페이지 링크, 그래야 우리가 당신이 도움받길 원하는 것을 찾을 수 있어요.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="이_모듈에서">이 모듈에서</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
+
+<div id="dicLayer" style="">
+<div id="dicLayerContents">&lt;dicword style="user-select: text;"&gt;What is JavaScript?&lt;/dicword&gt;&lt;dicword style="user-select: text;"&gt;&lt;dicimg id="play" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/play.gif);"&gt;&lt;/dicimg&gt; <input>Eng&lt;dicimg id="copy" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/copy.png);" title="copy"&gt;&lt;/dicimg&gt;&lt;/dicword&gt;<br>
+<br>
+<br>
+<br>
+자바 스크립트 란?</div>
+
+<div id="dicLayerSub"></div>
+</div>
+
+<div id="dicRawData" style="display: none;">{"mean":["what&lt;br/&gt;&lt;br/&gt;[대명사, 한정사]\n\t\t \t\t(의문문에서) 무엇; 몇; 어떤, 무슨\n\n\t\t 참조 which","be&lt;br/&gt;&lt;br/&gt;[동사]\n\t\t there is/are\n\t\t \t\t있다, 존재하다","script&lt;br/&gt;&lt;br/&gt;[명사]\n\t\t \t\t(연극영화방송강연 등의) 대본[원고]","is&lt;br/&gt;&lt;br/&gt;참조 be","Java Script&lt;br/&gt;&lt;br/&gt;(컴퓨터)\n\t\t \t\t자바 스크립트 ((미국 넷스케이프 커뮤니케이션스가 개발한 스크립트 언어))","TypeScript&lt;br/&gt;&lt;br/&gt;[Proper noun] labelenscripting language A scripting programming language that is a strict superset of JavaScript and used to implement interactive features of Web pages."],"word":"What is JavaScript","soundUrl":"https://dict-dn.pstatic.net/v?_lsu_sa_=39682b535d673a26a89ab1563094c4fead4462b51a0a6f796ee2097e5bbb6bb1195cb75069a5ad7d792362a5c22ac0e7677a456c5837d53ff458f869cb3070278c86c07296cca27ab57925fedb326fd11c977e7d7a242a0e57b9d7f96c3e974376013120f37159780b34a104ca6074c614d78e8a098ad60cfcbe8ec73ef6b8cb","phoneticSymbol":""}</div>
+
+<div id="dicLayerLoader" style="top: 5596px; left: 281px;"></div>
+
+<div id="dicLayer">
+<div id="dicLayerContents"></div>
+
+<div id="dicLayerSub"></div>
+</div>
+
+<div id="dicRawData" style="display: none;"></div>
+
+<div id="dicLayerLoader"></div>
+
+<div id="dicLayer">
+<div id="dicLayerContents"></div>
+
+<div id="dicLayerSub"></div>
+</div>
+
+<div id="dicRawData" style="display: none;"></div>
+
+<div id="dicLayerLoader"></div>
diff --git a/files/ko/learn/javascript/first_steps/strings/index.html b/files/ko/learn/javascript/first_steps/strings/index.html
new file mode 100644
index 0000000000..0e24be92a8
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/strings/index.html
@@ -0,0 +1,294 @@
+---
+title: 문자열 다루기 —  문자열
+slug: Learn/JavaScript/First_steps/Strings
+tags:
+  - 가이드
+  - 강좌
+  - 따옴표
+  - 문자열
+  - 자바스크립트
+  - 초보자
+  - 코딩
+translation_of: Learn/JavaScript/First_steps/Strings
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">다음으로, 프로그래밍에서 어떤 텍스트가 호출되는지 문자열에 대해 알아볼까요? 이 게시물에서는 문자열 작성, 문자열의 따옴표 이스케이프 및 문자열 결합과 같이 JavaScript를 배울 때 문자열에 대해 알아야 할 모든 일반적인 사항을 살펴보겠습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결요건:</th>
+   <td>기본 컴퓨터 활용능력, HTML 및 CSS에 대한 기본적인 이해, JavaScript에 대한 기초적인 이해.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>JavaScript에서 문자열의 기초에 대해 익숙해지기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="단어의_힘">단어의 힘</h2>
+
+<p>단어는 인간이 커뮤니케이션 함에 있어 커다란 하나의 부분이라고 할 수 있기에 매우 중요합니다. 웹은 사람들이 정보를 교환하고 공유할 수 있도록 설계된 텍스트 기반의 매체이므로, 웹에 표시되는 단어를 제어하는 것이 유용합니다. {{glossary ( "HTML")}}은 텍스트에 구조와 의미를 제공하며, {{glossary ( "CSS")}}는 텍스트에 스타일(일종의 디자인)을 적용할 수 있게 해주며, JavaScript는 문자열을 조작하기 위한 여러 가지 기능 (텍스트 레이블을 표시하고 용어를 원하는 순서로 정렬하는) 등 다양한 작업을 수행할 수 있습니다.</p>
+
+
+
+<p>지금까지 우리가 여러분에게 보여 줬던 거의 모든 프로그램은 문자열 조작과 관련이 있습니다.</p>
+
+<h2 id="문자열_—_기초">문자열 — 기초</h2>
+
+<p>문자열은 숫자와 유사하게 다루어지지만, 더 깊게 파고들면 눈에 띄는 차이점을 발견하기 시작할 것입니다. 먼저 몇 가지 기본 라인을 콘솔에 입력하여 우리와 친숙하게 만드는 것으로 시작하겠습니다. <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">이 링크</a>를 통해 다른 탭이나 창에서 열 수 있고, <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">브라우저 개발자 도구</a>를 사용할 수도 있습니다).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="문자열_만들기">문자열 만들기</h3>
+
+<ol>
+ <li>먼저 아래의 명령어를 입력하세요.
+  <pre class="brush: js">var string = 'The revolution will not be televised.';
+string;</pre>
+  숫자에서 했던 것과 같게, 우리는 변수를 선언하고, 문자열을 초기화 하고, 값을 반환합니다. 차이점은 오직 숫자 대신 문자열을 넣었고, 문자열 값을 따옴표로 감싸주었습니다.</li>
+ <li>따옴표를 빼거나 잘못쓰면 에러가 뜰 것입니다. 아래의 코드를 입력해 보세요.
+  <pre class="brush: js example-bad">var badString = This is a test;
+var badString = 'This is a test;
+var badString = This is a test';</pre>
+  따옴표로 감싸져 있지 않은 텍스트는 변수 이름, 속성 이름, 예약어와 유사하다고 가정하기 때문에 이러한 코드는 작동하지 않습니다. 만약 브라우저가 찾을 수 없다면 에러가 발생할 것입니다. (e.g. "missing ; before statement"). 만약 브라우저가 문자열이 시작하는 곳은 볼 수 있지만, 끝나는 곳을 찾지 못하면 에러를 던집니다.("unterminated string literal"). 만약 당신의 프로그램이 에러를 계속 만들어낸다면, 다시 돌아가 당신의 문자열에 빠진 따옴표가 없는지 찾아보십시오.</li>
+ <li>다음의 코드는 당신이 변수 <code>string</code> 을 선언했다면 작동할 것입니다. 아래의 코드를 입력해보세요 :
+  <pre class="brush: js">var badString = string;
+badString;</pre>
+  <code>badString</code> 은 이제 <code>string</code> 과 같은 값으로 설정되었습니다.</li>
+</ol>
+
+<h3 id="따옴표_vs_쌍따옴표">따옴표 vs 쌍따옴표</h3>
+
+<ol>
+ <li>자바스크립트에서는 따옴표와 쌍따옴표가 모두 허용됩니다. 다음의 코드는 문제 없이 작동할 것입니다.
+  <pre class="brush: js">var sgl = 'Single quotes.';
+var dbl = "Double quotes";
+sgl;
+dbl;</pre>
+ </li>
+ <li>따옴표와 쌍따옴표는 차이점이 거의 없어, 편한대로 사용할 수 있습니다. 하지만 당신은 문자열을 감싸는데 한 종류의 따옴표만 사용해야 되며 그렇지 않으면 에러가 발생합니다. 아래의 코드를 실행해 보세요.
+  <pre class="brush: js example-bad">var badQuotes = 'What on earth?";</pre>
+ </li>
+ <li>브라우저는 다른종류의 따옴표가 감싸고 있어 문자열이 아직 끝나지 않았다고 생각합니다.  예를 들어, 아래 두 가지 모두 괜찮습니다.
+  <pre class="brush: js">var sglDbl = 'Would you eat a "fish supper"?';
+var dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;</pre>
+ </li>
+ <li>하지만, 당신은 같은 종류의 따옴표를 문자열에 포함시킬 수 없습니다. 브라우저는 어느 따옴표가 문자열이 끝났다는 것을 알리는지 혼돈하게 됩니다. 따라서 다음의 코드는 에러가 발생합니다.
+  <pre class="brush: js example-bad">var bigmouth = 'I've got no right to take my place...';</pre>
+  이는 우리를 다음 문단으로 이끌어 줍니다.</li>
+</ol>
+
+<h3 id="문자열_이스케이프_문자">문자열 이스케이프 문자</h3>
+
+<p>직전의 문제의 코드를 해결하기 위해, 우리는 따옴표를 이스케이프 문자로 만들어야 합니다. 이스케이프 문자란 어떤 한 문자를 코드가 아닌 문자열로 만들어주는 문자입니다. 자바스크립트에서는 역슬래시 ( \ )를 문자 바로 앞에 작성함으로써 코드가 아닌 문자열로 인식하게 합니다.</p>
+
+<pre class="brush: js">var bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;</pre>
+
+<p>이것은 에러가 일어나지 않습니다. 당신은 <code>\"</code> 와 같게도 사용할 수 있습니다. 자세한 사항은 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">이스케이프 표기법</a>을 참고하십시오</p>
+
+<h2 id="문자열_연결하기">문자열 연결하기</h2>
+
+<ol>
+ <li>'Concatenate'는 '결합' 을 의미하는 프로프래밍 단어입니다. 자바스크립트에서 문자열을 함꼐 결합하려면 숫자를 더할 때 사용하는 것과 동일한 더하기 (+) 연산자를 사용하지만 이 상황에서는 다른 작업을 수행합니다. 콘솔에 예를 들어 보겠습니다.
+  <pre class="brush: js">var one = 'Hello, ';
+var two = 'how are you?';
+var joined = one + two;
+joined;</pre>
+  변수 <code>joined</code> 의 값은 "Hello, how are you?" 입니다.</li>
+ <li>마지막 예에서는, 그저 두 개의 문자열을 결합했을 뿐이지만 각 문자열 사이에 +를 포함하기만 하면 원하는 만큼의 문자열을 결합할 수 있습니다. 다음을 시도해 보십시오.
+  <pre class="brush: js">var multiple = one + one + one + one + two;
+multiple;</pre>
+ </li>
+ <li>또한 변수와 실제 문자열을 혼합하여 사용할 수도 있습니다. 다음을 시도해 보십시오.
+  <pre class="brush: js">var response = one + 'I am fine — ' + two;
+response;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 만약 코드에 따옴표나 쌍따옴표로 묶인 문자열을 입력하면 <strong>문자열 리터럴</strong> (string literal) 이라 불립니다.</p>
+</div>
+
+<h3 id="문자열의_연결">문자열의 연결</h3>
+
+<p>실제 작업에 사용되는 연결 방법에 대해 살펴보겠습니다. 이 과정에 앞부분의 예는 다음과 같습니다.</p>
+
+<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js">var button = document.querySelector('button');
+
+button.onclick = function() {
+  var name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>여기서 우리는 {{domxref("Window.prompt()", "Window.prompt()")}} 를 4번째 줄에 쓰는데, 그것은 팝업 대화 상자를 통해 질문에 응답하도록 요청한 다음 지정된 변수 내에 입력하는 텍스트를 저장합니다 — 이 경우에는 <code>name</code> 에 저장합니다. 우리는{{domxref("Window.alert()", "Window.alert()")}} 을 5번째 줄에 사용하여 두 개의 문자열 리터럴 및 변수의 값이 포함된 다른 팝업을 표시합니다.</p>
+
+<h3 id="숫자_vs_문자열">숫자 vs 문자열</h3>
+
+<ol>
+ <li>그러면 문자열과 숫자를 추가 (또는 연결) 하면 어떻게 될까요? 콘솔에서 사용해 보겠습니다.
+  <pre class="brush: js">'Front ' + 242;
+</pre>
+  이 경우 오류가 발생할 것으로 예상할 수 있지만 잘 작동합니다. 숫자로 문자열을 나타내려는 것은 말이 안되지만 숫자를 문자열로 표현하는 것은 의미가 있습니다. 그래서 브라우저는 숫자를 문자열로 변환하고 두 문자열을 서로 연결시킵니다.</li>
+ <li> 숫자 두 개로도 연결할 수 있습니다 — 따옴표로 감싸면 숫자를 강제로 문자열로 만들 수 있습니다. 아래 코드를 실행해보세요(아래 코드에서 변수가 숫자인지 문자열인지를 확인하기 위해 <code>typeof</code> 연산자를 사용합니다.):
+  <pre class="brush: js">var myDate = '19' + '67';
+typeof myDate;</pre>
+ </li>
+ <li>만약 코드에 문자열로 바꾸고 싶은 숫자형 변수가 있지만 변수 자체의 값을 바꾸고 싶지 않거나 숫자로 바꾸고 싶은 문자열 변수가 있지만 변수 자체의 값을 바꾸고 싶지 않으면 아래와 같은 생성자를 사용할 수 있습니다:
+  <ul>
+   <li>{{jsxref("Number")}} 객체는 가능하면 어떠한 입력값이건 숫자로 바꿉니다. 다음 코드를 실행해보세요:
+    <pre class="brush: js">var myString = '123';
+var myNum = Number(myString);
+typeof myNum;</pre>
+   </li>
+   <li>반면, 모든 숫자는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> 이라는 함수를 가지고 있습니다. 이 함수는 숫자를 동등한 문자열로 변환합니다. 다음 코드를 실행해보세요:
+    <pre class="brush: js">var myNum = 123;
+var myString = myNum.toString();
+typeof myString;</pre>
+   </li>
+  </ul>
+  이 생성자들은 어떤 상황에서는 정말 유용할 수 있습니다. 예를 들어, 만약 어떤 사용자가 숫자를 텍스트 필드 폼에 입력하면, 그 입력 값은 문자열일 것입니다. 하지만 만약 여러분이 이 숫자를 어떤 값에다 더하고 싶다면, 이 입력 값을 숫자로 변환해야 합니다. 이 경우 <code>Number()</code> 에 이 값을 넘겨줘서 이 문제를 해결할 수 있습니다.우리는 이미 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L61">Number Guessing Game, in line 61</a> 에서 이를 사용한 적이 있습니다.</li>
+</ol>
+
+<h2 id="마치며">마치며</h2>
+
+<p>여기까지 자바스크립트에서 다루는 문자열의 기본이었습니다. 다음 글에서는 자바스크립트에서 문자열에 사용할 수 있는 기본 제공 메소드를 조작하는 방법에 대해 알아보겠습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/first_steps/useful_string_methods/index.html b/files/ko/learn/javascript/first_steps/useful_string_methods/index.html
new file mode 100644
index 0000000000..81c18061a0
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/useful_string_methods/index.html
@@ -0,0 +1,461 @@
+---
+title: 문자열 제대로 다루기
+slug: Learn/JavaScript/First_steps/Useful_string_methods
+translation_of: Learn/JavaScript/First_steps/Useful_string_methods
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary"><span style="background-color: #fefefe; color: #000000; display: inline !important; float: none; font-family: Arial,Tahoma,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">이제까지 문자열의 기초를 살펴보았습니다. 이제부터 - 텍스트 문자열의 길이 찾기, 문자열 합치기 및 쪼개기 등과 같은- 내장된 메서드를 사용하여 문자열에서 수행할 수 있는 유용한 작업에 대해 생각해 봅시다. 문자열의 한 문자를 다른 문자로 대체하는 등의 작업을 수행합니다.</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><span style="color: #252525; display: inline !important; float: none; font-family: Roboto,arial,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">선수 과목 :</span></th>
+   <td>
+    <p><span style="color: #252525; display: inline !important; float: none; font-family: Roboto,arial,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">기본 컴퓨터 활용 능력, HTML 및 CSS에 대한 기본적인 이해, JavaScript가 무엇인지 이해합니다.</span></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row"><span style="color: #252525; display: inline !important; float: none; font-family: Roboto,arial,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">목표:</span></th>
+   <td><span style="background-color: #fefefe; color: #000000; display: inline !important; float: none; font-family: Arial,Tahoma,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">문자열이 객체임을 이해하고, 해당 객체에서 사용할 수있는 몇 가지 기본 메서드를 사용하여 문자열을 조작하는 방법을 배웁니다.</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Strings_as_objects">Strings as objects</h2>
+
+<p id="Useful_string_methods">이전에 말했지만, 다시 말하면 - JavaScript의 모든 것이 객체입니다. 문자열을 만들 때, 예를 들면</p>
+
+<pre class="brush: js notranslate">var string = 'This is my string';</pre>
+
+<p><span style="color: #252525; display: inline !important; float: none; font-family: Roboto,arial,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">변수가 문자열 객체 인스턴스되면, 결과적으로 수많은 속성과 메서드가 사용 가능하게 됩니다. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a> 객체 페이지로 이동하여 페이지 측면의 목록을 내려다 보면 이것을 볼 수 있습니다!</span></p>
+
+<p><span style="color: #252525; display: inline !important; float: none; font-family: Roboto,arial,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">이제 뇌가 녹기 시작하기 전에, 걱정하지 마십시오! 학습 여행 중에 초기에 대부분을 알 필요가 없습니다. 그러나 여기에서 살펴볼 몇 가지 사항을 자주 사용하게 될 것입니다.</span></p>
+
+<p>콘솔에 예제를 작성해 보세요. 아래의 한 가지를 제공합니다(새 탭이나 새 창에서 콘솔을 열 수 있고, 브라우저의 개발자 콘솔을 사용할 수도 있습니다).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class', 'input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<h3 id="문자열의_길이_찾기">문자열의 길이 찾기</h3>
+
+<p>간단합니다 — 간단하게  {{jsxref("String.prototype.length", "length")}} 프로퍼티를 사용할 수 있습니다. 다음 코드를 입력해 보세요.</p>
+
+<pre class="brush: js notranslate">var browserType = 'mozilla';
+browserType.length;</pre>
+
+<p>결과는 7을 리턴해야 합니다. 'mozilla'는 7글자이기 때문입니다. 이것은 여러 가지 이유로 유용합니다. 예를 들어 이름의 길이에 따라 이름의 순서를 정렬해야 하던가, 유저가 작성한 이름이 특정 길이 이상일 때 너무 길다는 것을 알려줘야 하는 경우에 사용할 수 있습니다.</p>
+
+<h3 id="특정_문자열_찾기">특정 문자열 찾기</h3>
+
+<p>관련하여, 대괄호 표기법을 이용해서 문자열 안의 문자를 구할 수 있습니다. 대괄호 표기법은 변수명 끝에 대괄호를 포함합니다. 대괄호 안에는 구하고 싶은 문자의 숫자를 포함시키면 되며, 예를 들어 아래의 경우 첫 번째 문자를 구할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">browserType[0];</pre>
+
+<p>컴퓨터는 1이 아니라 0부터 숫자를 셉니다! 문자열의 마지막 문자를 구하기 위해서, 우리는 다음 코드를 사용할 수 있으며, 기술적인 <code>length</code> 프로퍼티과 같이 사용하면 아래와 같습니다:</p>
+
+<pre class="brush: js notranslate">browserType[browserType.length-1];</pre>
+
+<p>"mozilla"는 7글자이지만, 숫자는 0부터 시작하기 때문에 글자의 위치는 6입니다. 그렇기 때문에 <code>length-1</code>을 사용합니다. 예를 들어, 여러 문자열 중 첫 번째 문자를 찾아 알파벳순으로 정렬해야 할 경우에 사용할 수 있습니다.</p>
+
+<h3 id="문자열_내부의_하위_문자열_찾기_및_추출">문자열 내부의 하위 문자열 찾기 및 추출</h3>
+
+<ol>
+ <li>때때로 큰 문자열 안의 작은 문자열(우리는 이것을 하위 문자열이라고 이야기 한다.)을 찾고 싶을 것입니다. 이 작업은 {{jsxref("String.prototype.indexOf()", "indexOf()")}}를 사용하여 완료할 수 있습니다, which takes a single {{glossary("parameter")}} — 찾기 원하는 하위 문자열을 찾을 수 있습니다. 시도해 봅시다:
+  <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre>
+  결과는 2입니다. 하위 문자열인 "zilla"는 "mozilla'의 2번 위치(0, 1, 2— 그러므로 3번째 문자열)에서 시작합니다. 이러한 코드는 문자열을 필터링하는 데 사용될 수 있습니다. 예를 들어 웹 주소 목록에서 "mozilla"가 포함된 주소만 인쇄하고 싶은 경우입니다.</li>
+ <li>다른 방법으로도 할 수 있으며, 더욱 효율적일 수 있습니다. 다음 예제를 따라해 봅시다:
+  <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre>
+  이렇게 하면 -1( 하위 문자열 (이 경우 'vanilla')이 기본 문자열에서 발견되지 않으면 반환한다.)의 결과를 얻을 수 있습니다.<br>
+  <br>
+  하위 문자열 'mozilla'가 포함되지 않은 문자열의 모든 인스턴스를 찾으려면 이 연산자를 사용하고 아래에 표시된 것처럼 부정 연산자를 사용해서 작업을 수행할 수 있습니다. 다음과 같이 할 수 있습니다:
+  <pre class="brush: js notranslate">if(browserType.indexOf('mozilla') !== -1) {
+  // do stuff with the string
+}</pre>
+ </li>
+ <li>문자열 내에서 부분 문자열이 어디에서 시작되고 어떤 문자로 끝나는지 알고 싶으면 {{jsxref("String.prototype.slice()", "slice()")}}를 사용하여 문자열을 추출할 수 있습니다. 다음을 시도해 봅시다:
+  <pre class="brush: js notranslate">browserType.slice(0,3);</pre>
+  "moz"를 반환합니다 - 첫 번째 파라메터는 추출을 시작할 문자 위치이고 두 번째 파라메터는 추출할 문자의 갯수입니다. 따라서 슬라이스는 첫 번째 위치에서부터 세 번째 위치까지 포함됩니다.</li>
+ <li>또한 특정 문자 뒤에 문자열의 나머지 문자를 모두 추출하려는 경우 두 번째 매개 변수를 포함하지 않고 문자열에서 나머지 문자를 추출할 위치의 문자 위치만 포함하면 됩니다. 다음을 시도해보십시오.
+  <pre class="brush: js notranslate">browserType.slice(2);</pre>
+  이렇게 하면 "zilla"가 반환됩니다. 문자의 2번째 위치는 "z"이고 두 번째 매개 변수를 포함하지 않았기 때문에 반환된 하위 문자열은 문자열의 나머지 문자 모두입니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: <code>slice()</code>의 두 번째 매개 변수는 선택사항입니다 : 이를 포함하지 않으면 <code>slice()</code>는 원래 문자열의 끝에 끝납니다. 게다가 다른 매개변수도 존재합니다.{{jsxref("String.prototype.slice()", "slice()")}} 페이지를 방문하여 더 자세하게 알 수 있습니다.</p>
+</div>
+
+<h3 id="대소문자_변경">대/소문자 변경</h3>
+
+<p>문자열 메소드 {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} 와{{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} 는 문자열을 가져와 그것을 모두 각각 대문자나 소문자로 바꿉니다. 이는 데이터베이스에 저장하기 전에 모든 사용자 입력 데이터를 표준화하려는 경우 유용합니다.</p>
+
+<p>다음 행을 입력하여 어떻게 되는지 살펴보겠습니다.</p>
+
+<pre class="brush: js notranslate">var radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();</pre>
+
+<h3 id="문자열의_일부를_변경하기">문자열의 일부를 변경하기</h3>
+
+<p>문자열 내의 한 하위 문자열을 {{jsxref("String.prototype.replace()", "replace()")}} 를 통해 다른 하위 문자열로 바꿀 수 있습니다. 이 작업은 기본적인 수준에서 매우 간단하게 작동합니다. 하지만 아직 시도해보지 않은 고급 작업도 있습니다.</p>
+
+<p>그것은 2개의 매개변수를 가집니다. — 바뀜을 당하는 문자와 바꾸려는 문자입니다. 다음 예제를 따라해보세요.:</p>
+
+<pre class="brush: js notranslate">browserType.replace('moz','van');</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>이 섹션에서는 문자열을 다루는 방법을 설명합니다. 아래의 각 실습에서는 문자열로 이루어진 배열을 루프문을 사용해 bullet list(불릿 리스트)로 표현하였습니다. 지금 배열이나 루프를 이해할 필요가 없습니다. - 이러한 내용은 추후에 설명합니다. 중요한것은 각각의 문자열이 우리가 원하는 형식으로 출력하는 코드를 작성하는 것입니다.</p>
+
+<p>각 예제에는 리셋 버튼이 있고, 리셋 버튼은 실수를 했거나 코드가 작동하지 않아서 재설정하는데 사용할 수 있습니다. 해결 방법을 모를 때, 해답 버튼(solution button)을 누르면  해답을 볼 수 있습니다.</p>
+
+<h3 id="인사말_필터링_하기">인사말 필터링 하기</h3>
+
+<p>첫 번째 예제는 간단히 시작해봅시다. 우리는 배열에 들어있는 크리스마스 인사말 메시지를 정렬하려고 합니다. if(...)을 사용해 각 문자열을 비교하고 크리스마스 메시지인 경우의 목록만 인쇄하려고 합니다.</p>
+
+<ol>
+ <li>먼저 각 메시지가 크리스마스 메시지인지 여부를 테스트할 수 있는 방법을 생각해봅시다. 메시지들은 어떤 문자열이 있고, 존재하는지 테스트하기 위해 어떤 방법을 사용할 수 있을까요?</li>
+ <li>연산자와 피연산자를 사용해 조건문을 만들어야 합니다. 연산자 왼쪽에 있는것과 연산자 오른쪽에 있는 것이 동등한가요? 또는 이 경우 왼쪽 메서드가 오른쪽으로 결과값을 전달합니까?</li>
+ <li>힌트 : 이 경우 메서드 호출이 결과값과 같지 않은지 테스트하는 것이 더 유용할 수 있습니다.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 290px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var greetings = ['Happy Birthday!',
+                 'Merry Christmas my love',
+                 'A happy Christmas to all the family',
+                 'You\'re all I want for Christmas',
+                 'Get well soon'];
+
+for (var i = 0; i &lt; greetings.length; i++) {
+  var input = greetings[i];
+  // Your conditional test needs to go inside the parentheses
+  // in the line below, replacing what's currently there
+  if (greetings[i]) {
+    var result = input;
+    var listItem = document.createElement('li');
+    listItem.textContent = result;
+    list.appendChild(listItem);
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n                 \'Merry Christmas my love\',\n                 \'A happy Christmas to all the family\',\n                 \'You\\\'re all I want for Christmas\',\n                 \'Get well soon\'];\n\nfor(var i = 0; i &lt; greetings.length; i++) {\n  var input = greetings[i];\n  if(greetings[i].indexOf(\'Christmas\') !== -1) {\n    var result = input;\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = result;\n    list.appendChild(listItem);\n  }\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 490) }}</p>
+
+<h3 id="대소문자_맞게_수정하기">대/소문자 맞게 수정하기</h3>
+
+<p>이 예제에는 영국 도시의 이름들을 모아놨습니다만 대/소문자가 잘못되어 있습니다. 우리는 이 문자들을 첫 번째 문자를 제외하고 모두 소문자로 변경해야 합니다. 이것은 다음과 같은 방식으로 할 수 있습니다:</p>
+
+<ol>
+ <li><code>input</code> 변수에 담긴 문자열 전체를 소문자로 변환한 후 새로운 변수에 저장하세요.</li>
+ <li>새로운 변수에 저장된 문자열의 첫 문자를 다른 변수에 저장하세요</li>
+ <li>Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.</li>
+ <li>Change the value of the <code>result</code> variable to equal to the final result, not the <code>input</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.</p>
+</div>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 250px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
+for(var i = 0; i &lt; cities.length; i++) {
+  var input = cities[i];
+  // write your code just below here
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i &lt; cities.length; i++) {\n  var input = cities[i];\n  var lower = input.toLowerCase();\n  var firstLetter = lower.slice(0,1);\n  var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n  var result = capitalized;\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 450) }}</p>
+
+<h3 id="Making_new_strings_from_old_parts">Making new strings from old parts</h3>
+
+<p>In this last exercise the array contains a bunch of strings containing information about train stations in the North of England. The strings are data items that contain the three letter station code, followed by some machine-readable data, followed by a semi-colon, followed by the human-readable station name. For example:</p>
+
+<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre>
+
+<p>We want to extract the station code and name, and put them together in a  string with the following structure:</p>
+
+<pre class="notranslate">MAN: Manchester Piccadilly</pre>
+
+<p>We'd recommend doing it like this:</p>
+
+<ol>
+ <li>Extract the three-letter station code and store it in a new variable.</li>
+ <li>Find the character index number of the semi-colon.</li>
+ <li>Extract the human-readable station name using the semi-colon character index number as a reference point, and store it in a new variable.</li>
+ <li>Concatenate the two new variables and a string literal to make the final string.</li>
+ <li>Change the value of the <code>result</code> variable to equal to the final string, not the <code>input</code>.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code 3</h6>
+
+<pre class="brush: html notranslate">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 285px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
+                'GNF576746573fhdg4737dh4;Greenfield',
+                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
+                'SYB4f65hf75f736463;Stalybridge',
+                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
+
+for (var i = 0; i &lt; stations.length; i++) {
+  var input = stations[i];
+  // write your code just below here
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n                \'GNF576746573fhdg4737dh4;Greenfield\',\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n                \'SYB4f65hf75f736463;Stalybridge\',\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i &lt; stations.length; i++) {\n  var input = stations[i];\n  var code = input.slice(0,3);\n  var semiC = input.indexOf(\';\');\n  var name = input.slice(semiC + 1);\n  var final = code + \': \' + name;\n  var result = final;\n var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n}';
+
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', '100%', 485) }}</p>
+
+<h2 id="결론">결론</h2>
+
+<p>자바스크립트에서 문장과 단어들을 다룰 수 있는 프로그래밍 능력이 매우 중요하다. 웹사이트는 사람들과 소통하는 공간이기 때문이다. 이 문서는 문자열을 다룰 수 있는 기초적인 내용에 대해 다루었다. 이 내용은 앞으로 배우게 될 심화 과정에 도움이 될 것이다. 다음으로 배열에 대해 알아보겠다.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/ko/learn/javascript/first_steps/variables/index.html b/files/ko/learn/javascript/first_steps/variables/index.html
new file mode 100644
index 0000000000..7d4b2adf4e
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/variables/index.html
@@ -0,0 +1,360 @@
+---
+title: 필요한 정보를 저장하기-변수
+slug: Learn/JavaScript/First_steps/Variables
+translation_of: Learn/JavaScript/First_steps/Variables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">앞선 두 수업을 듣고, 자바스크립트에 대해(웹 기술에서 어떻게 사용되는지, 큰 범위에서의 특징) 알아보았다. 이번 수업에서는 기본중에 기본인 자바스크립트의 주된 구성중 하나인 변수가 어떻게 이루어져 있는지 알아볼 것이다.</p>
+
+<table class="learn-box">
+ <tbody>
+  <tr>
+   <th scope="row">알아야 할 것</th>
+   <td>기본적인 컴퓨터 지식, 기본적인 HTML, CSS, JS의 이해</td>
+  </tr>
+  <tr>
+   <th scope="row">목표</th>
+   <td>자바스크립트 변수에 대해 익혀보기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="필요한_툴">필요한 툴</h2>
+
+<p>이번 수업에서 컨텐츠에 대한 이해도를 테스트하고자, 코드를 입력하라는 요청을 받게 될 것이다. 만약 데스크탑 브라우저를 사용한다면, 코드를 실행하기 가장 좋은 프로그램은 브라우저의 자바스크립트 콘솔창일 것이다.(도구의 사용법에 대해 알고자 한다면 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> 를 참고하자)</p>
+
+<h2 id="변수란">변수란?</h2>
+
+<p>변수란, 숫자(합계나 계산에 사용되는) 또는 문자열(문장의 일부로 사용되는)과 같은 값의 컨테이너입니다. 그러나 변수에 대한 한 가지 특별한 점은 포함된 값이 변경될 수 있다는 것입니다. 간단한 예를 살펴 보겠습니다:</p>
+
+<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>이 예제에서 버튼을 누르면 몇 줄의 코드가 실행됩니다. 첫 번째 줄은 독자가 이름을 입력하도록 요청한 화면에 상자를 띄운 다음, 변수에 값을 저장합니다. 두 번째 줄은 변수 값에서 가져온, 이름이 포함된 환영 메시지가 표시됩니다. </p>
+
+<p>왜 변수가 유용한 지 이해하려면, 변수를 사용하지 않고 이 예제를 작성하는 방법에 대해 생각해 봅시다. 그러면 아마 이런 식으로 끝날 것입니다 :</p>
+
+<pre class="example-bad">let name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... and so on ...</pre>
+
+<p>우리가 사용하고있는 구문을 완전히 이해하지는 못했지만, 아이디어를 얻을 수 있어야 합니다-변수를 사용할 수 없다면, 입력된 이름을 검사하는 거대한 코드 블록을 구현해야합니다. 그런 다음 해당 이름에 대한 각각의 메시지를 출력해야 합니다. 이것은 분명히 비효율적입니다 (코드는 네 가지 선택만으로도 훨씬 더 커집니다). 그리고 가능한 모든 선택 사항(모든 이름들)을 저장할 수 없어 작동하지 않을 수도 있습니다. </p>
+
+<p>변수는 이해하기 쉽습니다. 자바 스크립트에 대해 더 많이 배우면, 변수들은 자연스럽게 느껴질 것입니다. </p>
+
+<p>변수에 대한 또 다른 특별한 점은 문자열과 숫자뿐 아니라 무엇이든 포함 할 수 있다는 것입니다. 변수에는 복잡한 데이터와 놀랄만 한 기능을 수행하는 함수(Function)까지 포함될 수 있습니다. 당신은 이것에 대해 점점 더 많이 배울 것입니다. <br>
+ <br>
+ 변수는 값을 포함하고 있습니다. 이것은 중요한 차이점입니다. 변수는 값 자체가 아닙니다. 변수는 값을 위한 컨테이너입니다. 당신은 변수란 물건들을 저장할 수있는 작은 골판지 상자와 같다고 생각할 수 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+
+<h2 id="변수의_선언">변수의 선언</h2>
+
+<p>변수를 사용하기 위해서, 먼저 변수를 선언해야 합니다 - 보다 정확히는, 변수를 선언한다고 부른다. 이를 위해 키워드 var를 입력하고, 당신이 원하는 변수 이름을 입력합니다.</p>
+
+<pre class="brush: js">var myName;
+var myAge;</pre>
+
+<p>여기서 우리는 myName과 myAge라는 두 개의 변수를 생성합니다. 웹 브라우저의 콘솔 또는 아래 콘솔에서 두행을 입력해 보십시오 (원하는 경우, <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">콘솔</a>을 별도의 탭이나 창에서 열 수 있음). 그 후, 자신이 명명한 변수를 만들어 보십시오.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: JavaScript에서는 모든 코드 명령어가 세미콜론 (;)으로 끝나야합니다. 코드를 한 줄로 작성해도 올바르게 작동할 지라도, 여러 줄의 코드를 함께 작성하는 경우에는 그렇지 않습니다. 그것을 포함시키는 습관을 갖도록 노력하십시오.</p>
+</div>
+
+<p>변수 이름을 입력하여 변수의 값이 실행 환경에 존재하는지 테스트 할 수 있습니다.</p>
+
+<pre class="brush: js">myName;
+myAge;</pre>
+
+<p>이 변수들은 값을 포함하고 있지 않은 빈 컨테이너 입니다. 변수 이름만 입력 할 경우 <code>undefined</code> 값을 반환하며 변수는 이 값(<code>undefined)</code>을 포함하게 됩니다. 만약 존재하지 않는(선언되지 않은) 변수는, 오류 메시지가 표시됩니다. 아래 변수를 입력하여 확인해 보세요.</p>
+
+<pre class="brush: js">scoobyDoo;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 존재하지만 값을 포함하고 있지 않은 변수와, 존재하지 않은 변수를 혼돈하지 마십시오. 둘은 매우 다른 것들입니다.</p>
+</div>
+
+<h2 id="변수의_초기화">변수의 초기화</h2>
+
+<p>변수를 선언한 후에는 값으로 초기화 할 수 있습니다. 변수 이름 다음에 등호(<code>=</code>)와 그 뒤에 부여 할 값을 입력하여 이 작업을 수행 할 수 있습니다.</p>
+
+<pre class="brush: js">myName = 'Chris';
+myAge = 37;</pre>
+
+<p>콘솔로 돌아가 코드들을 입력해 보세요. 각각의 경우 변수에 할당한 값은 콘솔을 통해 반환되어 확인 할 수 있습니다. 또한 단순히 변수 이름을 입력하여 변수 값을 반환 할 수 있습니다. 한번 해보세요.</p>
+
+<pre class="brush: js">myName;
+myAge;</pre>
+
+<p>다음과 같이 변수를 선언하고 동시에 초기화 할 수 있습니다.</p>
+
+<pre class="brush: js">var myName = 'Chris';</pre>
+
+<p>아마도 변수의 선언과 초기화를 두줄로 나누어 하는것 보다 더 빠르기 때문에 대부분 이러한 방식을 자주 사용 하게 될 겁니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 여러 줄 문자열로 JavaScript 프로그램을 작성할 때(write a multiline JavaScript), 변수를 선언하기 전에 해당 변수의 값을 초기화 할 수 있습니다. 이것이 가능한 이유는 JavaScript 에서 일반적으로 변수 선언문이 다른 코드 보다 먼저 실행되기 때문인데, 이 동작을 <strong>호이스팅</strong>이라고 합니다. 자세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/var#var_호이스팅(hoisting)">var 호이스팅</a> 문서를 참고하세요.</p>
+</div>
+
+<h2 id="변수의_재지정">변수의 재지정</h2>
+
+<p>변수에 값이 할당되면 다른 값을 지정하여 해당 값을 업데이트 할 수 있습니다. 콘솔에 다음 행을 입력해 보세요.</p>
+
+<pre class="brush: js">myName = 'Bob';
+myAge = 40;</pre>
+
+<h3 id="변수_이름에_대한_규칙">변수 이름에 대한 규칙</h3>
+
+<p>변수를 원하는 대로 이름을 부여 할 수 있지만 제한이 있습니다. 일반적으로 라틴 문자(0-9, a-z, A-Z)와 밑줄 문자를 사용해야 합니다.</p>
+
+<ul>
+ <li>오류가 발생하거나 전 세계 타인이 이해하기 어려울 수 있으므로 다른 문자를 사용하면 안됩니다.</li>
+ <li>변수 이름의 시작부분에 밑줄(_)을 사용하지 마세요. JavaScript 구문에서 밑줄로 시작하는 것은 특별한 의미를 가지고 있으므로 혼란을 가져올수 있습니다.</li>
+ <li>변수 이름의 시작부분에 숫자를 사용하지 마세요. 허용되지 않으며 오류가 발생합니다.</li>
+ <li>안전한 명명법은 소위 <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>(소문자 낙타 문법) 입니다. 여러 단어를 하나로 묶고 첫 단어의 시작은 소문자를 사용하며 그다음 단어의 시작은 대문자로 사용합니다. 우리는 지금까지 이 문서에서 변수 이름에 이 방법을 사용해 왔습니다.</li>
+ <li>포함된 데이터를 쉽게 이해 할 수 있게 변수 이름을 직관적으로 부여 합니다. 단일 문자 / 숫자 또는 긴 구절을 사용하지 마세요.변수 이름을 직관적으로 만들어, 포함된 데이터를 표현 할 수 있습니다. </li>
+ <li>변수는 대소문자를 구분 합니다. - <code>myage</code> 와 <code>myAge</code>  는 다른 변수 입니다.</li>
+ <li>마지막으로 JavaScript 예약어를 변수 이름으로 사용하면 안됩니다. (예약어란 JavaScript의 실제 구문을 구성하는 단어를 의미 합니다.) 따라서 변수 이름으로  <code>var</code>, <code>function</code>, <code>let</code>, <code>for</code> 와 같은 단어를 사용 할 수 없습니다. 브라우저는 이러한 단어를 다른 코드 아이템(예약어)로 인식하므로 오류가 발생 합니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 다음 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a> 링크에서 예약어의 목록을 확인 할 수 있습니다.</p>
+</div>
+
+<p>바람직한 변수 이름의 예:</p>
+
+<pre class="example-good">age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2</pre>
+
+<p>바람직하지 않은 변수 이름의 예:</p>
+
+<pre class="example-bad">1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman</pre>
+
+<p>위의 지침을 염두에 두고 몇가지 변수를 추가로 작성해 보세요.</p>
+
+<h2 id="변수의_종류">변수의 종류</h2>
+
+<p>변수에 저장할 수 있는 몇가지 유형의 데이터(데이터 유형)가 있습니다. 이 섹션에서는 이를 간단히 설명하고 이후 자세히 살펴보겠습니다.</p>
+
+<p>지금까지 우린 두가지 형태의 데이터 유형을 살펴 봤지만 다른 유형들도 있습니다.</p>
+
+<h3 id="숫자">숫자</h3>
+
+<p>30과 같은 숫자 (정수라고도 함) 나  2.456(부동소수점 또는 부동 소수점 숫자라고도 함) 같은 십진수 숫자를 변수에 저장할 수 있습니다. JavaScript는 일부 프로그래밍 언어처럼 숫자 유형에 따른 다른 데이터 유형을 가지고 있지 않습니다. 변수에 숫자 값 대입할 때, 따옴표 사용하지 않습니다.</p>
+
+<pre class="brush: js">var myAge = 17;</pre>
+
+<h3 id="문자열">문자열</h3>
+
+<p>문자열은 텍스트의 조각입니다. 변수에 문자열 값을 대입할 때, 작은따옴표(')나 큰따옴표(")로 묶어야 합니다. 그렇지 않으면 JavaScript는 다른 변수 이름으로 해석하게 됩니다.</p>
+
+<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre>
+
+<h3 id="불리언Booleans">불리언(Booleans)</h3>
+
+<p>불리언(Booleans)은 <code>true</code> 이나  <code>false</code> 라는 값을 가지는 참/거짓을 표현하는 데이터 유형입니다. 일반적으로 조건을 테스트하는 데 사용되며 그 다음 코드가  조건에 따라 실행됩니다. 예를 들어 다음과 같습니다.</p>
+
+<pre class="brush: js">var iAmAlive = true;</pre>
+
+<p>일반적으로 다음과 같은 방식으로 더 많이 사용됩니다.</p>
+
+<pre class="brush: js">var test = 6 &lt; 3;</pre>
+
+<p>위의 코드는 "작다" 연산자(<code>&lt;</code>) 를 사용하여 6이 3보다 작은지를 확인 합니다. 예상 한대로 6이 3보다 작지 않으므로<code>false</code> 를 반환 합니다! 나중에 이러한 연산자에 대해 더 많이 배우게 됩니다.</p>
+
+<h3 id="배열">배열</h3>
+
+<p>배열은 대괄호로 묶이고 쉼표로 구분 된 여러 값을 포함하는 단일 객체입니다. 다음 코드를 콘솔에 입력해 보세요.</p>
+
+<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim'];
+var myNumberArray = [10,15,40];</pre>
+
+<p>이러한 배열이 정의되면 다음과 같은 구문을 사용하여 개별 값에 접근 할 수 있습니다. 다음 코드를 입력해 보세요.</p>
+
+<pre class="brush: js">myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40</pre>
+
+<p>대괄호에는 반환할 값의 위치를 지정하는 인덱스 값이 들어 있습니다. 컴퓨터는 우리 사람처럼 1대신 0부터 숫자를 센다는 것을 알 수 있습니다.</p>
+
+<p>앞으로 배열에 대해 더 많이 배우게 됩니다.</p>
+
+<h3 id="객체">객체</h3>
+
+<p>프로그래밍에서 객체(Objects)는 실제 사물(real life object)을 모델링 하는 코드 구조입니다. 예를들어 주차장 객체는 주차장의 높이와 넓이 정보를 가지고 표현 할 수 있으며, 사람 객체는 이름, 키, 몸무게, 사용하는 언어등의 정보를 가지고 표현 할 수 있습니다.</p>
+
+<p>콘솔에 다음 코드를 입력해 보세요.</p>
+
+<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+
+<p>객체에 저장된 정보를 검색하기 위해서는 아래 구문을 사용합니다.</p>
+
+<pre class="brush: js">dog.name</pre>
+
+<p>지금은 객체에 대해 더 자세하게 보지 않을 것입니다. - 앞으로 모듈에 있는 객체에 대해 더 많이 배울 수 있습니다.</p>
+
+<h2 id="지정되지_않은_타입">지정되지 않은 타입</h2>
+
+<p>JavaScript는 "느슨한 유형의 언어(loosely typed language)" 입니다. 즉, 다른 언어와 달리 변수에 포함 할 데이터의 유형을 지정할 필요가 없습니다.(예: 숫자? 문자열?)</p>
+
+<p>예를 들어, 변수를 선언하고 그 변수의 값을 따옴표로 묶은 값을 지정하면 브라우저는 변수의 값을 문자열로 인식합니다.</p>
+
+<pre class="brush: js">var myString = 'Hello';</pre>
+
+<p>따옴표 안에 숫자가 포함되어 있어도 여전히 문자열로 인식되므로 주의해야 합니다:</p>
+
+<pre class="brush: js">var myNumber = '500'; // oops, this is still a string
+typeof(myNumber);
+myNumber = 500; // much better — now this is a number
+typeof(myNumber)</pre>
+
+<p>위의 네 줄의 코드를 하나씩 콘솔에 입력하여 결과가 무엇인지 확인해 보세요.(주석은 입력하지 마세요.) 여기에서 <code>typeof()</code> 라는 특수 함수를 사용하고 있음을 알 수 있습니다. - 이 함수는 입력한 변수의 데이터 유형을 반환합니다. 위의 코드에서 처음으로 호출될 때, <code>myNumber</code> 변수에는 <code>'500'</code> 라는 문자열이 포함되어 있으므로  <code>string</code> 을 반환해야 합니다. 두 번째는 어떤 값을 반환하는지 확인해 보세요.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>지금까지 JavaScript의 변수란 무엇이며, 어떻게 생성하는지 알아보았습니다. 다음에는 JavaScript에서 숫자에 관해 자세히 살펴보고 기본 계산하는 방법을 알아보겠습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/ko/learn/javascript/first_steps/what_is_javascript/index.html b/files/ko/learn/javascript/first_steps/what_is_javascript/index.html
new file mode 100644
index 0000000000..e9198dd1d3
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/what_is_javascript/index.html
@@ -0,0 +1,423 @@
+---
+title: JavaScript가 뭔가요?
+slug: Learn/JavaScript/First_steps/What_is_JavaScript
+tags:
+  - Article
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Learn
+  - Script
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 이 글은 JavaScript를 넓게 보면서 "뭔가요?", "뭘 하나요?"와 같은 질문을 답변하고, 여러분이 JavaScript에 친숙해지도록 도와드립니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제 조건:</th>
+   <td>
+    <p>기본적인 컴퓨터 능력, HTML과 CSS 기초.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>JavaScript가 뭔지, 어떤 일을 할 수 있는 지, 웹사이트에 어떻게 적용하는지 알기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="둘러보기">둘러보기</h2>
+
+<p>자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어입입니다. 자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 세번째 층이라고 볼 수 있습니다. 다른 두 층(HTML과 CSS)에 대한 보다 자세한 정보는 학습 영역의 다른 부분에서 찾아 볼 수 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{glossary("HTML")}}은 제공할 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어입니다.</li>
+ <li>{{glossary("CSS")}}는 배경색, 폰트 등의 레이아웃등을 지정하여 HTML 컨텐츠를 꾸며주는 스타일 규칙 언어입니다.</li>
+ <li>{{glossary("JavaScript")}}는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 다른 일(물론, 전부는 아니지만 몇 줄만의 자바스크립트 코드로 얻는 결과는 놀라울겁니다.)들을 할 수 있는 스크립트 언어입니다.</li>
+</ul>
+
+<p>3개의 요소들은 각각 유기적으로 잘 구성되어 있습니다. 예제와 같이 간단한 폼을 만들어 봅시다. HTML을 사용하여 그 구조와 목적에 맞게 마크업 할 수 있습니다: </p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>그리고 CSS를 추가하여 이쁘게 꾸밀 수도 있습니다:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor:pointer;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>그러고 마지막으로 약간의 자바스크립트로 동적인 기능을 추가할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>마지막 버전의 텍스트 라벨을 클릭하여 어떻게 되는 지 확인해봅시다. (이 데모는 Github에서도 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">source code</a> 나 <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">run it live</a>를 참고해보세요!)</p>
+
+<p>자바스크립트는 보다 더 많은 일들을 할 수 있습니다. 이제 더 자세한 내용을 살펴봅시다!</p>
+
+<h2 id="그래서_진짜_어떤_일을_할_수_있나요">그래서, 진짜 어떤 일을 할 수 있나요?</h2>
+
+<p>자바스크립트 언어의 핵심은 다음과 같은 일들을 할 수 있게하는 프로그래밍 기능들로 구성되어 있습니다:</p>
+
+<ul>
+ <li>변수안에 값을 저장할 수 있습니다. 위의 예시를 보면, 작성된 새로운 이름을 <code>name</code>이라는 변수에 저장하였습니다.</li>
+ <li>프로그밍에서 '문자열(strings)'이라고 불리는 문자들도 조작 가능합니다. 위 예시에 보면 "Player 1:"이라는 문자열을 <code>name</code>이라고 만든 변수와 겹합하여 "Player 1: Chris"라는 글을 완성할 수 있었습니다.</li>
+ <li>웹 페이지상의 이벤트에 응답하는 코드를 작성할 수 있습니다. 예제에서 사용한 {{Event("click")}} 이벤트를 통해 요소가 언제 클릭되고, 텍스트 라벨을 업데이트 시킬지 정정의하였습니다.</li>
+ <li>그리고 더 많은 것들!</li>
+</ul>
+
+<p>하지만 더욱 흥미진진한 것은 코어 자바스크립트 언어(<em>core JavaScript</em> language) 기반의 기능성입니다. 소위 <strong>Application Programming Interfaces</strong> (<strong>APIs</strong>) 라는 것은 여러분의 자바스크립트 코드에 사용할 수 있는 추가적인 강력한 마법들을 제공합니다. </p>
+
+<p>API는 이미 만들어진 코드의 집합체라고 볼 수 있으며, 개발자들이 만들기 어렵고 힘든 부분을 쉽게 구현하도록 하는 프로그램이라고 볼 수 있습니다. 마치 집에서 가구를 만들 때 직접 디자인하고, 재료를 구하고, 재단하고, 못을 박고 하는 등 혼자서 모든 것을 하는 대신 가구 만들기 키트를 사는 것과 같다고 보면 됩니다.</p>
+
+<p>일반적으로 두 종류로 구분됩니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p><strong>Browser API</strong>는 웹 브라우저에 설치된 API들로, 컴퓨터 환경구성으로 부터 데이터를 보이게 하고 복잡한 일들을 하게 합니다. 예를 들어:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM (Document Object Model) API</a> 는 동적으로 페이지의 스타일을 정하는 등 HTML과 CSS를 알맞게 조정하는 역할을 합니다. 우리가 매일 보는 팝업창이나, 위의 사진과 같이 컨텐츠들이 보여지는 것들이 모두 DOM의 결과라고 볼 수 있습니다.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation">Geolocation API</a>은 지리적인 정보를 검색하게 해줍니다. 이는 <a href="https://www.google.com/maps">Google Maps</a>이 어떻게 위치를 찾고 지도에 표시하는지 알 수 있게 합니다.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas</a> 와 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a> API는 2D와 3D 그래픽을 만들 수 있도록 합니다. 이러한 웹 기술을 사용하여 다양하고 재미있는 것들을 지원합니다. —<a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> 와 <a href="http://webglsamples.org/">webglsamples</a>을 참조해보세요.</li>
+ <li>HTMLMediaElement 와 <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 같은 <a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video API</a>는 음악과 비디오를 웹 페이지 상에서 재생하고, 웹캠으로 캡처하고 다른 컴퓨터에 표시하는 등의 멀티미디어를 활용할 수 있는 재미있는 기술을 지원합니다. (<a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a>를 한번 참조해보세요.)</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 대부분의 데모 코드들은 오래된 브라우저에서는 실행이 안될 수 있으니, FireFox, Chrome, Edge, Opera와 같은 최신의 브라우저를 사용하는 것을 추천합니다.  실제 배포가 되는 코드처럼 여러 사용자가 사용할 수 있음을 고려하여 <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>(여러 브라우저를 이용하여 테스트)를 해보는 것이 좋습니다.</p>
+</div>
+
+<p><strong>Third party API</strong> 는 브라우저에 기본적으로 설치된 API가 아닌 인터넷에서 개인적으로 정보와 코드를 얻어 프로그래밍한 것을 말합니다. 예를 들어:</p>
+
+<ul>
+ <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a>는 웹사이트에 가장 최근의 트윗을 보여주도록 합니다.</li>
+ <li><a href="https://developers.google.com/maps/">Google Maps API</a>와  <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a>는 웹사이트에 원하는 지도를 넣어주고 추가기능을 지원합니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 이러한 API 들은 고급 과정이며, 이 과정에서는 다루지 않을 것입니다. 이 API들에 대한 보다 자세한 정보는 <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>에서 살펴보세요.</p>
+</div>
+
+<p>물론 이것말고도 엄청나게 다양한 API들이 존재합니다!  하지만, 이 수업을 듣고 Facebook, Google Maps, Instagram등을 만들 수는 없으니 흥분하지는 말길 바랍니다. 이것보다 우리는 먼저 기본적인 것에 대해 배울 것이고 이것이 곧 이 수업을 진행하는 목적입니다. 자 시작해봅시다!</p>
+
+<h2 id="웹_페이지에서_JavaScript는_어떤_일을_하나요">웹 페이지에서 JavaScript는 어떤 일을 하나요?</h2>
+
+<p>여기서 몇가지 코드를 실제로 살펴보고, 페이지에서 자바스크립트가 언제 어떻게 작동하는지 알아 볼 것입니다.</p>
+
+<p>브라우저에서 웹페이지를 불러올 때 어떤 일이 발생하는지 생각해봅시다(먼저 <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a>를 읽어 보세요.). 브라우저에서 웹페이지를 불러올 때, 실행 환경(브라우저 탭)안에서 HTML, CSS, Javascript 코드가 실행됩니다. 이는 마치 공장에서 원재료(코드)가 일련의 과정을 거쳐 제품(웹페이지)으로 탄생되는 것과 같습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>자바스크립트는 HTML과 CSS가 결합되고 웹페이지 상에서 올려진 후, 브라우저의 자바스크립트 엔진에 의해 실행됩니다. 이는 페이지의 구조와 스타일등을 정해놓고, 자바스크립트가 실행된다는 것과 같은 의미입니다.</p>
+
+<p>동적으로 사용자 인터페이스를 업데이트하는 자바스크립트의 사용은 Document Object Model API를 통해 HTML과 CSS를 수정하는 것으로 좋은 현상입니다. 만약 자바 스크립트가 HTML과 CSS 전에 실행되었다면 문제가 분명 발생할 것입니다.</p>
+
+<h3 id="브라우저_보안성">브라우저 보안성</h3>
+
+<p>각각의 브라우저 탭들은 코드가 실행되는 개별적인 구성(이러한 것은 "실행 환경"이라고 지칭한다)입니다. 이는 각 탭의 대부분의 경우는 완전히 독립적이고, 하나의 탭의 코드는 다른 탭이나 웹사이트에 직접적으로 영향을 줄 수 없다는 의미입니다 . 이는 보안성에 좋은 방법입니다. 만약 이러한 부분이 없다면, 해커들이 다른 웹사이트로 부터 정보를 가로채는 등 악랄한 짓들을 할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 물론 코드나 정보를 동떨어진 웹사이트나 탭으로 전송할 수 있는 안전한 방식이 존재합니다. 하지만 지금 과정과는 거리가 멀기 때문에 여기서는 다루지 않도록 하겠습니다.</p>
+</div>
+
+<h3 id="자바스크립트_실행_순서">자바스크립트 실행 순서</h3>
+
+<p>브라우저에서 자바스크립트를 만났을 때 일반적으로는 위에서 아래 순서대로 실행됩니다. 이는 순서에 주의해서 코드를 작성해야한다는 의미입니다. 예를 들어, 아래의 첫번째 예재를 통해 자바스크립트 블록을 반환해봅시다:</p>
+
+<pre class="brush: js notranslate">const para = document.querySelector('p');
+//HTML 요소 중 p태그를 선택
+
+para.addEventListener('click', updateName);
+//para에 저장된 객체가 클릭되었을 때 updateName 함수를 실행
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  //'Enter a new name'과 입력란 출력하여 입력받은 값을 name에 저장
+  para.textContent = 'Player 1: ' + name;
+  //papa(p태그)에 새로운 문자열 저장
+}</pre>
+
+<p>먼저 p태그의 요소를 para변수에 저장합니다(1번줄). 그리고 event listener를 붙여(3번줄) p태그가 클릭되었을 때 <code>updateName()</code>코드 블록(중괄호로 묶여있는 부분)이 (5-8번줄) 실행되도록 합니다. <code>updateName()</code> 코드 블록(이렇게 계속적으로 사용할 수 있는 코드 블럭을 함수라고 합니다.). 사용자로 하여금 새로운 이름을 입력받기를 요청하고, 사용자가 이름을 입력하면 화면에 출력하게 됩니다.</p>
+
+<p>만약 1번줄과 3번줄을 바꿨다면 코드는 실행되지 않을 것입니다. 대신 브라우저의 개발자 콘솔창에 다음과 같은 에러 알림이 뜰 것입니다. — <code>TypeError: para is undefined</code>. 이는 para라는 객체가 아직 존재하지 않는다는 뜻으로, para라는 변수에 event listener는 추가할 수 없습니다</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이는 매우 일반적인 에러이기 때문에, 프로그램을 실행할 때 코드 상에서 사용되는 객체에 대해 주의할 필요가 있습니다.</p>
+</div>
+
+<h3 id="해석형_언어와_컴파일러형_언어">해석형 언어와 컴파일러형 언어</h3>
+
+<p>프로그래밍을 하는 입장에서 인터프리트와 컴파일이라는 개념에 대해서는 들어보았을 것입니다. 자바스크립트는 해석형 언어입니다. 따라서 코드가 위에서 아래로 순차적으로 실행되고 그 즉시 결과가 반환됩니다. 브라우저에서 동작하기 전에 다른 방식으로 코드를 변환할 필요가 없습니다.</p>
+
+<p>반면에 컴파일러형 언어는 컴퓨터에 의해 동작되기전 다른 형식으로 변환하는 언어입니다. 예를 들면 C/C++과 같은 언어는 어셈블리어로 컴파일되어 동작됩니다.</p>
+
+<p>이 둘의 관점은 각각의 장점을 가지고 있으니 다음장 부터 한번 알아봅시다.</p>
+
+<h3 id="서버측_코드와_클라이언트측_코드">서버측 코드와 클라이언트측 코드</h3>
+
+<p>웹 개발 맥락에서 서버측과 클라이언트측 코드에 대해 들어보았을 것입니다. 클라이언트측 코드란 사용자의 컴퓨터에서 작동되는 코드입니다. 만약 웹페이지를 보고자 한다면, 클라이언트측 코드가 사용자의 컴퓨터로 다운로드되고 브라우저가 이를 표시합니다. 이러한 자바스크립트 모듈을 정확히는 클라이언트측 자바스크립트라고 합니다.</p>
+
+<p>반면 서버측 코드는 서버에서 작동되고, 그 결과가 사용자의 브라우저에 넘어가 표시됩니다. PHP, Python, Ruby, ASP.NET등이 서버측 웹 언어의 대표적 예라고 볼 수 있습니다. 물론 자바스크립트도 가능합니다! 유명한 Node.js란 환경을 통해 서버측에서도 자바스크립트가 사용 가능합니다. <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a>에서 서버측 자바스크립트에 대해 더 알 수 있습니다.</p>
+
+<h3 id="동적_VS_정적_코드">동적 VS 정적 코드</h3>
+
+<p>"동적"이라는 말은 클라이언트측 서버측 언어 모두를 가르킵니다. 이는 각기 다른 상황에서 적절한 정보가 보이고, 컨텐츠를 웹페이지나 앱 상에 계속적으로 노출시키는 역할을 합니다. 서버측 코드는 데이터베이스로 부터 데이터를 던지는 등 동적으로 새로운 컨텐츠들을 만듭니다. 반면에, 클라이언트측 자바스크립트는 새로운 HTML 표를 만들어 서버에서 요청한 데이터를 뿌려 사용자에게 보이는 등 동적으로 브라우저 안에서 작동됩니다. 이 둘 사이는 서로 미묘한 차이가 있지만, 서로 연관되어 있고 서버측 클라이언트측의 관계와 접근에 대해 알 필요가 있습니다.</p>
+
+<p>동적으로 바뀌지 않는 페이지를 "정적"페이지라고 합니다. (항상 같은 콘텐츠를 보여줍니다.)</p>
+
+<h2 id="웹_페이지에_JavaScript를_어떻게_넣나요">웹 페이지에 JavaScript를 어떻게 넣나요?</h2>
+
+<p>자바스크립트는 CSS와 같은 방식으로 HTML 페이지에 적용됩니다. CSS는 외부의 스타일시트를 적용하기 위해 link 요소를 사용하거나 내부의 스타일시트를 적용하기 위해 style 요소를 사용하는 반면,자바스크립트는 HTML상에서 오직 script 태크만으로 사용이 가능합니다. 어떻게 작동되는지 한번 살펴봅시다.</p>
+
+<h3 id="HTML_내부의_자바스크립트">HTML 내부의 자바스크립트</h3>
+
+<ol>
+ <li>먼저, 예제로 주어진 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>파일을 저장합니다.</li>
+ <li>파일을 브라우저와 편집기 상에서 둘다 엽니다. HTML으로 만든 클릭 버튼이 있는 간단한 웹페이지를 볼 수 있습니다.</li>
+ <li>그런다음, 편집기로 가서 <code>&lt;/body&gt;</code> 태그 직전에 다음의 코드를 추가하도록 합니다:
+  <pre class="brush: html notranslate">&lt;script&gt;
+
+  // JavaScript goes here
+
+&lt;/script&gt;</pre>
+ </li>
+</ol>
+
+<p>그러고 아래의 자바스크립트 코드를 &lt;script&gt;&lt;/script&gt;사이에 넣음으로서 페이지 상에서 동작이 가능하게끔 할 수 있습니다.( 위 코드에서 "// JavaScript goes here" 부분에 아래의 코드를 추가하면 됩니다.)</p>
+
+<pre class="brush: js notranslate" dir="rtl"><code>document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }</code>
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i &lt; buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});</pre>
+
+<ol>
+ <li>파일을 저장하고 새로고침을 눌러보세요. 이제 버튼을 클릭하면 새로운 문단이 아래쪽에 생기는 것을 볼 수 있습니다.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p>각각의 문법에 대해서는 이후 더 자세히 다루기 때문에, 동작여부만 확인하고 넘어가도 무방합니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 만약 예제가 실행되지 않는다면,  돌아가서 올바른지 한 번 더 체크해보도록 하세요. 혹시 저장할 때 확장자를 .html 로 하지 않았나요? 혹시 {{htmlelement("script")}} 를<code>&lt;/body&gt;</code> 태그 뒤에 붙인 건 아닌가요?  다음과 같이 자바스크립트를 작성했나요? <strong>자바스크립트는 까다로운 언어이기 때문에 정확하게 문법을 지킬 필요가 있습니다. 그렇지 않으면 제대로 동작하지 않을 수 도 있습니다.</strong></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 깃허브에서도 이 코드를 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p>
+</div>
+
+<h3 id="외부의_자바스크립트">외부의 자바스크립트</h3>
+
+<p>만약에 외부 파일로 자바스크립트를 위치시키고 싶다면 어떻게 할까요? 이에 대해서 알아봅니다.</p>
+
+<ol>
+ <li>먼저, HTML 파일이 있는 디렉토리에 <code>script.js</code>라는 새로운 파일을 만듭니다. 파일의 확장자가 .js이면 그 파일이 자바스크립트로 이루어져 있음을 뜻합니다.</li>
+ <li>아래의 태그를 HTML 코드에 복사 후 저장합니다.</li>
+ <li>
+  <pre class="syntaxbox notranslate">&lt;script src="script.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>script.js 의 내용을 다음과 같이 바꿉니다.
+  <pre class="notranslate"><code>function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</code></pre>
+ </li>
+ <li>저장하고 브라우저를 새로고침하면 앞과 똑같은 결과가 나올것입니다. 똑같이 작동하기 때문에 이제 자바스크립트는 외부에서 만들 수 있음을 알 수 있습니다. 이는 코드를 만들고 구성하는 입장에서 좋으며, 여러 HTML파일로 부터 재사용이 가능합니다. 더군다나 HTML은 스크립트의 본문이 외부로 분리되어 간결해집니다.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 깃허브에서 이 버전을 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> 그리고 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p>
+</div>
+
+<h3 id="인라인_JavaScript_처리기">인라인 JavaScript 처리기</h3>
+
+<p>실제 HTML 속에 포함된 자바스크립트코드를 함께 쓸 수 있습니다. 이는 다음과 같으니 참고해보세요:</p>
+
+<pre class="brush: js example-bad notranslate">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+//HTML 내의 &lt;scirpt&gt;태그 내부에 작성
+</pre>
+
+<pre class="brush: html example-bad notranslate">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</pre>
+
+<p>이는 다음과 같은 예제로 볼 수 있습니다.</p>
+
+<p>이 데모 예제는 &lt;button&gt;태그에 onclick속성에 대한 값을 함수이름으로 넣어 버튼이 클릭될 때마다 함수가 실행되도록 작성하였습니다.</p>
+
+<p><strong>하지만, 이 방법은 효율적이지 않습니다. </strong>이는 자바스크립트와 함께 HTML 소스를 복잡하게 할 수 있습니다. 또한 함수를 만들기 위한 모든 버튼 마다 <code>onclick="createParagraph()"</code> 속성을 포함해야합니다.</p>
+
+<p>JavaScript 코드만으로도 모든 버튼에 함수를 연결할 수 있습니다. 위의 내용을 의도한대로 수정한다면 다음과 같습니다:</p>
+
+<pre class="notranslate">const buttons = document.querySelectorAll('button');
+//모든 &lt;button&gt;태그를 List 형태로 buttons 변수에 저장한다.
+
+for (let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+//복수이기 때문에 for를 사용해 루프를 돌린다.
+</pre>
+
+<p>이 코드는 onclick 속성 코드 보다 조금 길어보이지만, 페이지가 많든, 버튼의 수가 많든 적든 상관없이 모든 버튼들이 같은 기능을 할 수 있도록 합니다. 물론 자바스크립트 코드를 변경할 필요가 없습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>:  <code>apply-javascript.html 수정을 해보고 버튼을 한 번 추가해 보세요.</code> 실행해보면 버튼 하나하나 클릭할 때 마다 글이 보일 것입니다. 꽤 깔끔하지 않은가요?</p>
+</div>
+
+<h3 id="스크립트의_로딩_방법">스크립트의 로딩 방법</h3>
+
+<p> 작성된 스크립트를 브라우저가 적절한 때에 로딩하는것에 대해 몇가지 이슈가 있습니다. 중요한 것은 모든 HTML 요소는 순서대로 페이지에 로드된다는 것입니다. 만약 당신이 자바스크립트를 이용해 HTML 요소를 조작할 경우(정확하게는 DOM), 자바스크립트 코드가 조작 대상인 HTML 요소보다 먼저 실행된다면 조작할 요소가 존재하지 않는 상태이기 때문에 제대로 동작하지 않을 것입니다.</p>
+
+<p>위의 코드 예제에서, 내부와 외부의 자바스크립트는 HTML Document의 <code>body</code>가 해석되기 전인 <code>head </code>부분에 로드되고 실행되었습니다. 이는 에러를 일으킬 수 있습니다. 그래서 여기에 사용되는 몇가지 해결방법들이 있습니다.</p>
+
+<p><strong>내부 자바스크립트 예제</strong>에서는 다음과 같이 구성하면 됩니다:</p>
+
+<pre class="notranslate"><code>document.addEventListener("DOMContentLoaded", function() {
+  ...
+});</code></pre>
+
+<p>이 이벤트리스너는 <code>"DOMContentLoad" </code>이벤트가 발생되었을 때<code> function()</code>을 실행한다는 의미입니다. (<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events">이벤트 리스너</a>에 관해서는 이번 코스에서 다루게 됩니다.) <code>"DOMContentLoad"</code> 이벤트는 브라우저가 완전히 로드되고 해석될때 발생됩니다. <code>function(){}</code> 내부의 자바스크립트 구문은 이벤트가 발생되기 전까지는 실행되지 않습니다. 따라서 모든 <code>body</code>태그의 요소가 로드된 이후 자바스크립트 코드가 실행되도록 만들어 에러를 피할 수 있습니다.</p>
+
+<p><strong>외부 자바스크립트</strong> 예제에서는 좀더 최신의 자바스크립트 문법인 <code>async </code>속성을 사용하게 됩니다. 일반적으로 <code>HTML</code>요소를 로딩하는 중 <code>&lt;scirpt&gt;</code>태그를 만나면 JavaScript의 내용이 모두 다운될 때까지 <code>HTML</code>로딩은 멈추게 되는데, <code>async</code>요소는 비동기방식으로 <code>&lt;script&gt;</code>태그에 도달했을 때 브라우저에게 <code>HTML </code>요소를 멈추지 않고 다운받도록 유지시킵니다.</p>
+
+<pre class="notranslate"><code>&lt;script src="script.js" async&gt;&lt;/script&gt;</code></pre>
+
+<p>이 경우 <code>script</code>와 <code>HTML</code>은 모두 동시에 로드되고 작동할 것입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 외부 스크립트 경우 async 속성을 사용하면 되기 때문에 내부 스크립트처럼 DOMContentLoaded이벤트를 사용할 필요가 없습니다. 하지만 async속성은 외부 스크립트의 경우만 동작합니다.</p>
+</div>
+
+<p>예전 방식은 <code>scirpt </code>요소를 <code>body</code>태그의 맨 끝에 넣는 방법이었습니다(<code>&lt;/body&gt;</code> 바로 위에). 이 방식을 사용해도 <code>body</code>태그가 모두 로드된 이후 <code>scirpt</code>가 실행되게 만들 수 있습니다. 문제는 이 방법과 <code>DOMContentLoaded</code>를 이용한 방법 모두<code> HTML DOM</code>이 로드되기 전까지 <code>script</code>의 로딩과 파싱이 완전히 차단된다는 것입다. 이는 많은 자바스크립트 코드를 다루는 규모가 큰 사이트의 경우 사이트를 느리게 만드는 중요한 성능 문제를 야기할 수 있습니다. 이것이 <code>async </code>속성을 사용해야 하는 이유입니다!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 자바스크립트의 비동기 개념은 이해하는데 시간이 오래 걸리기 때문에, 지금 이해되지 않는다면 현재 단계에선 외부 스크립트 방식만 사용하고 넘어가도 무방합니다.</p>
+</div>
+
+<h4 id="async_defer">async &amp; defer</h4>
+
+<p>더 깊게 들어가보면 이러한 코드문제를 해결하기 위한 방법은 실제로 두가지가 있습니다. — <code>async</code> 와<code>defer</code> 입니다. 두 가지의 차이를 봅시다.</p>
+
+<p>async 스크립트는 페이지 렌더링의 중단 없이 스크립트를 다운로드 하고, 또한 스크립트의 다운로드가 끝나자 마자 이를 실행시킵니다. async는 외부 스크립트끼리의 구체적인 실행 순서는 보장하지 않고, 단지 나머지 페이지가 나타나는 동안 스크립트가 비동기방식으로 다운로드 되어 중단되지 않는다는 것만 보장합니다. async는 각각의 스크립트가 독립적으로, 서로에게 의존하지 않는 관계일 때 적절합니다.</p>
+
+<p>아래의 예제를 보시죠:</p>
+
+<pre class="notranslate"><code>&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</code></pre>
+
+<p>3개의 스크립트를 로딩하지만 이들의 순서는 보장할 수 없습니다. 이는 <code>script2.js</code>나 <code>script3.js</code>에 있는 함수가<code> jquery.js</code>의 함수를 사용한다면 에러를 발생될 수 있다는 것을 의미합니다.</p>
+
+<p>Defer는 이와 다르게 순서대로 다운로드 한 후 모든 스크립트와 내용이 다운로드 되었을 때 실행됩니다:</p>
+
+<pre class="notranslate"><code>&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</code></pre>
+
+<p>따라서 위의 예제의 경우에는 <code>jquery.js</code> -&gt; <code>script2.js</code> -&gt; <code>script3.js</code> 의 순서가 보장됩니다.</p>
+
+<p>요약 :</p>
+
+<ul>
+ <li>만약 scirpt들이 각각의 스크립트에 의존하지 않고 독립적으로 파싱되도 상관없다면, <code>async</code> 를 사용합니다.</li>
+ <li>먄약 sciprt들이 의존하고 하나의 스크립트가 파싱될때까지 기다려야 한다면, <code>defer</code> 를 사용하고 각각의 <code>&lt;script&gt;</code> 태그들을 실행되길 원하는 순서대로 작성합니다.</li>
+</ul>
+
+<h2 id="주석">주석</h2>
+
+<p>HTML과 CSS와 같이, 자바스크립트에서도 주석문의 사용이 가능합니다. 주석문은 브라우저 실행때는 무시되어 넘어가고 다른 개발자로 하여금 어떻게 구성되고 작동되는지 설명해주는 역할을 합니다(물론 자신의 훗날 코드를 다시 보았을 때 빨리 기억하고, 이해할 수 있게끔 도와주기도 합니다.). 주석문은 매우 유용하고 코딩시 자주 사용됩니다(특히 큰 프로젝트에서). 주석문에는 두가지 종류가 있습니다:</p>
+
+<ul>
+ <li>두개의 슬래시(//)를 통해 한 줄의 주석이 가능합니다.
+  <pre class="brush: js notranslate">// I am a comment</pre>
+ </li>
+ <li> /* 와 */를 사용하여 그 사이에 여러 줄의 주석문의 구성이 가능합니다.
+  <pre class="brush: js notranslate">/*
+  I am also
+  a comment
+*/</pre>
+ </li>
+</ul>
+
+<p>예를 들자면, 앞의 데모예제에 주석문을 다음과 같이 달 수 있습니다.</p>
+
+<pre class="brush: js notranslate">// Function: creates a new paragraph and append it to the bottom of the HTML body.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page and sort them in an array.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<h2 id="정리">정리</h2>
+
+<p>지금까지 우리는 자바스크립트의 첫걸음을 떼었습니다. 여기서 자바스크립트를 왜 사용하고 어떻게 사용하는지에 대한 방법들에 대한 기초적인 부분을 배웠습니다. 여러 예제 코드를 봄으로써, 웹사이트와 다른 곳에서의 코드상 자바스크립트가 어떻게 구성되어있는지 배웠습니다.</p>
+
+<p>자바스크립트가 지금은 조금 어려울 수 있으나, 걱정하지 마세요. 이 수업은 첫 단계인만큼 앞으로 더 많은 것을 배우기 위해 감각을 키우기 위한 수업입니다. 다음 수업에서 우리는 <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>를 통해 앞으로 더 나아가고 스스로 자바스크립트 예제를 실행해볼 것입니다.</p>
diff --git a/files/ko/learn/javascript/first_steps/what_went_wrong/index.html b/files/ko/learn/javascript/first_steps/what_went_wrong/index.html
new file mode 100644
index 0000000000..44030c4057
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/what_went_wrong/index.html
@@ -0,0 +1,237 @@
+---
+title: 자바스크립트 문제해결
+slug: Learn/JavaScript/First_steps/What_went_wrong
+translation_of: Learn/JavaScript/First_steps/What_went_wrong
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">이전 수업에서 "숫자맞추기" 프로그램을 만들어봤을때, 프로그램이 돌아가지 않는다는 것을 볼 것이다. 하지만 여기서 자바스크립트의 에러를 찾고 고치는 방법에 대해 알려주니 겁먹지 말고 도전해보자!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">알아야 할 것</th>
+   <td>기본적인 컴퓨터 이해. HTML, CSS, 자바스크립트의 이해</td>
+  </tr>
+  <tr>
+   <th scope="row">목표</th>
+   <td>코드상의 문제를 고치는 능력과 자신감 고취</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="에러의_종류">에러의 종류</h2>
+
+<p>일반적으로, 코드가 잘못된 이유에는 2가지 종류가 있으니 살펴보자.</p>
+
+<ul>
+ <li><strong>구문 에러(Syntax errors)</strong>: 코드 상의 구문 에러로 대개 철자가 잘못되어 작동이 안되거나 중간에 프로그램이 중지된다. 물론 여기서 에러 메시지가 출력되므로 확인할 수 있다. 코드 편집기 툴을 사용하고 에러 메시지의 의미만 파악할 수 있다면, 충분히 고칠 수 있다.</li>
+ <li><strong>논리 에러(Logic errors)</strong>: 구문은 올바르지만, 코드의 의미자체가 잘못된 경우이다. 즉 프로그램은 정상적으로 돌아가지만, 원하는 결과를 얻지 못하는 경우이다. 에러 메시지가 직접적으로 표시되지 않기 때문에, 일반적으로 구문에러보다 에러 수정이 힘들다.</li>
+</ul>
+
+<p>물론, 간단하지는 않지만 좀 더 세분화된 분류가 있다. 그렇지만, 위의 분류가 처음에는 이해하기 좋다. 우리는 앞으로 이 두가지 종류에 대해 알아볼 것이다.</p>
+
+<h2 id="잘못된_예">잘못된 예</h2>
+
+<p>시작하기 앞서, 이전에 볼 '숫자맞추기'게임을 살펴보자 (이번 시간을 제외하고는 앞으로 일부러 에러를 만든 코드를 볼 것입니다.) 깃허브에 가서 로컬 지역에 저장합니다. -&gt; <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (see it <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">running live here</a>).</p>
+
+<ol>
+ <li>시작하기에 앞서, 파일을 본인이 사용하는 텍스트 에디터와 브라우저를 통해 연다.</li>
+ <li>프로그램을 실행시켜본다.("Submit Button"을 눌렀을 때, 정상적으로 실행이 되면 안된다)</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.</p>
+</div>
+
+<p>여기서 구문 에러가 발생했을때 볼 수 있는 개발자 콘솔에 대해 살펴보고, 이를 통해 수정해보자. 이제부터 시작이다!</p>
+
+<h2 id="구문Syntax_에러_고치기">구문(Syntax) 에러 고치기</h2>
+
+<p>수업 앞쪽에서 간단한 자바스크립트 명령어를 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> 에서 살펴보았다 (만약 모르겠다면 앞의 링크를 살펴보자). 좋은 것은, 브라우저의 자바스크립트 엔진이 구문에러가 발생할 대마다 에러메시지를 콘솔에게 던져준다.  자, 이제 시작해보자</p>
+
+<ol>
+ <li> 열려져 있는 <code>number-game-errors.html</code>이 있는 탭으로 가서 자바스크립트 콘솔창을 연다. 다음줄을 따라 에러메시지를 볼 수 있을 것이다.<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
+ <li>이는 쉬운 에러에 속하기 때문에, 브라우저가 해결하도록 팁등을 알려준다. (위의 캡처사진은 FireFox이지만, 아마 다른 브라우저에서도 비슷한 내용을 제공해준다). 왼쪽부터 살펴보면,
+  <ul>
+   <li>빨간색 "x"는 에러라는 것을 의미한다.</li>
+   <li>무엇이 잘못됬는지 알려준다. 여기서는 "TypeError: guessSubmit.addeventListener is not a function"</li>
+   <li>"Learn More" 링크는 다양한 내용이 있는 MDN 페이지와 연결해 에러의 의미를 설명해준다.</li>
+   <li>자바스크립트 파일의 이름으로 개발자툴의 디버거 탭을 연결한다. 이 링크를 따라가면, 에러가 발생한 정확한 위치를 찾을 수 있다.</li>
+   <li>에러가 발생한 줄번호와, 그 줄에서 몇번째 문자에 있는지 알려준다.  여기서는 86번줄, 앞에서 3번째 문자이다</li>
+  </ul>
+ </li>
+ <li>편집기에서 86번째 줄을 보자.
+  <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre>
+ </li>
+ <li>"guessSubmit.addeventListener is not a function"라고 에러메시지가 뜨는걸로 보아, 아마 철자가 잘못되었을 것이다. 만약 철자가 애매하거나하면, MDN에서 찾아보는것이 좋을 것이다. 현재로 가장 좋은 방법은 검색엔진에서 "mdn <em>name-of-feature</em>" 를 검색하는 것이다. 예를들자면 다음을 살펴보자 -&gt; <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li>
+ <li>여기서 살펴보며, 함수의 이름 철자가 틀려서 에러가 났음을 알수 있다. 자바스크립트와 같은 프로그래밍은 정확하기 때문에 한글자라도 틀리면 에러가 날 것이다. <code>addeventListener</code>를 <code>addEventListener</code>러 바꿈으로 에러는 해결된다. 고쳐보자.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="반복되는_구문에러">반복되는 구문에러</h3>
+
+<ol>
+ <li>저장하고 새로고침해보자. 하지만 그래도 여전히 에러가 난다.</li>
+ <li>이제 숫자를 입력하고 "Submit guess" 버튼을 눌러보자. 그런데, 또 다른 에러가 나타났다!<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
+ <li>이번에는 에러 메시지가  78번 줄에 "TypeError: lowOrHi is null" 라고 떳다.
+  <div class="note"><strong>Note</strong>: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the <code>checkGuess() { ... }</code> block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope to code outside functions. In this case, the code was not run and the error was not thrown until the <code>checkGuess()</code> function was run by line 86.</div>
+  <strong>Note</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> is a special value that means "nothing", or "no value". So <code>lowOrHi</code> has been declared and initialised, but not with any meaningful value — it has no type or value.</li>
+ <li>78번줄은 다음 코드다.
+  <pre class="brush: js">lowOrHi.textContent = 'Last guess was too high!';</pre>
+ </li>
+ <li>이줄에서는 <code>lowOrHi</code>변수의<code> textContent</code>속성을 문자열로 지정하지만, <code>lowOrHi</code>가 어떤 역할을 하는지 포함하지 않았기 때문에 동작되지 않는다. 왜 그런지 살펴보면, 예제의 <code>lowOrHi</code>의 다른 예제를 보면 알 수 있다. 가장 가까이에 잇는 부분은 48번줄에서 찾을 수 있다.
+  <pre class="brush: js">var lowOrHi = document.querySelector('lowOrHi');</pre>
+ </li>
+ <li>여기서는 변수로 하여금 HTML안의 요소로 정보를 가지도록 하려고 한다. 이 줄이 실행되고 나서 값의 null인지도 확인해보자. 49번줄에 다음 코드를 추가해보자.
+  <pre class="brush: js">console.log(lowOrHi);</pre>
+
+  <div class="note">
+  <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> is a really useful debugging function that prints a value to the console. So it will print the value of <code>lowOrHi</code> to the console as soon as we have tried to set it in line 48.</p>
+  </div>
+ </li>
+ <li>저장하고 새로고침해보면, 콘솔창에서 <code>console.log()</code> 의 결과를 볼 수 있을 것이다.<img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> 물론, <code>lowOrHi</code>'s값은 여전히 null이므로 48번줄은 문제가 있다고 볼 수 있다.</li>
+ <li>문제가 무엇인지 생각해보자. 49번줄 <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 메소드는 CSS 선택자로금 선택되는 요소의 정보를 갖도록 만든다. 파일을 살펴보면, 다음과 같은 코드를 볼 수 있다.
+  <pre class="brush: js">&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>따라서 여기에 점(.) 으로 시작되는 클래스 선택자가 필요한 것이다 . 하지만 48번줄의 querySelector() 메소드에서는 바로 이 '점(.)' 이 없다. <code>lowOrHi</code>를 <code>.lowOrHi</code> 로 바꾸어 문제를 해결할 수 있다.</li>
+ <li>저장하고 새로고침하면, <code>console.log() </code>에서 우리가 원하는 &lt;p&gt; 요소를 반환할 것이다. 자, 이제 다른 에러가 해결되었다. <code>console.log()</code>를 지금 제거해도 되고 난중을 위해 나둬도 되니 알아서 하자.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="세번씩_반복되는_구문에러">세번씩 반복되는 구문에러</h3>
+
+<ol>
+ <li>이제 프로그램을 계속 실행할수록, 성공횟수는 많아진다. 즉 프로그램이 종료될때까지 정확한 수를 추측하든, 횟수에 상관없이 완벽한 프로그램이 동작된다는 것이다.</li>
+ <li>여기서 프로그램에 처음에 보았던 똑같던 에러가 발생한다. "TypeError: resetButton.addeventListener is not a function"이라고! 하지만 이번에는 94번줄이라고 표시된다.</li>
+ <li>94번줄을 보면, 똑같은 실수를 하고 있다는 것을 쉽게 찾아볼 수 있다. 단지 <code>addeventListener</code> 를 <code>addEventListener</code> 로 철자만 주의해서 바꾸면 된다.</li>
+</ol>
+
+<h2 id="논리Logic_에러">논리(Logic) 에러</h2>
+
+<p>이제, 프로그램은 잘 작동되지만, 몇 번 프로그램을 돌리면 추측해야 할 수가 항상 1이라는 것을 명백히 알 수 있다. 즉, 프로그램의 목표에 어긋난다는 것이다.</p>
+
+<p>이는 분명 어딘가에 프로그램 논리적으로 무슨 문제가 있다는 것이다.(물론, 에러가 검출되지도 않고, 잘 작동된다)</p>
+
+<ol>
+ <li><code>randomNumber</code> 변수를 찾고, 임의의 수를 처음으로 지정된 곳도 찾는다. 임의의 수가 저장된 부분은 아마 44번 줄 언저리일 것이다.
+
+  <pre class="brush: js">var randomNumber = Math.floor(Math.random()) + 1;</pre>
+  또한 한 게임이 끝나면 다시 임의의 수를 지정하는 부분은 아마 113번 줄 정도일 것이다.<br>
+
+  <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;</pre>
+ </li>
+ <li><code><font face="Open Sans, Arial, sans-serif">이 줄에서 문제가 발생되었는지 알기위해, </font>console.log()</code> 를 불러오자. 다음 코드를 앞선 두 코드 아래에 넣는 것도 잊지 말자.
+  <pre class="brush: js">console.log(randomNumber);</pre>
+ </li>
+ <li>저장하고, 새로고침하게되면 randomNumer 변수가 항상 1이 콘솔창에 표시되는 것을 알 수 있다.</li>
+</ol>
+
+<h3 id="논리에_대한_고찰">논리에 대한 고찰</h3>
+
+<p>고치기 전에, 이 코드가 무슨 역할을 하는지 살펴보자. 먼저, 0과 1사이의  임의의 10진수를 생성하는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> </code>을 살펴보자.</p>
+
+<pre class="brush: js">Math.random()</pre>
+
+<p>다음으로 가장 가까운 정수로 전달되는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code><font face="Open Sans, arial, sans-serif">안의</font><code> Math.random()</code>의 결과는 넘어간다<code>.</code> 그러고 결과값에 1을 더한다.</p>
+
+<pre>Math.floor(Math.random()) + 1</pre>
+
+<p>0과 1사이의 임의의 10진수와 가장 가까운 수 중에 작은 수는 항상 0이므로, 여기서 1을 더하면 항상 1이 된다.  따라서 가까운 수를 찾기전에 임의수에 100을 곱해야 한다. 다음 코드는 곧 0과 99사이의 수를 나타낸다.</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100);</pre>
+
+<p>그러므로 여기서 1을 더하게 되면, 우리가 원하는 1과 100사이의 수가 될 것이다.</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre>
+
+<p>코드를 위와 같이 고치고, 저장 후 새로고침해보자. 그러면 프로그램은 우리가 생각하는 대로 작동될 것이다.</p>
+
+<h2 id="다른_일반적인_에러">다른 일반적인 에러</h2>
+
+<p>코드상에서 맞딱드릴 수 있는 에러는 여러가지가 있다. 이번 섹션은 이러한 에러들에 대해 말해줄 것이다.</p>
+
+<h3 id="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3>
+
+<p>이번 에러는 일반적으로 코드의 끝부분에 세미콜론이 빠졌을 때 발생하지만, 때로는 헷갈릴 때도 있다. 예를 들어 <code>checkGuess()</code> 함수안의 코드를 고칠때를 살펴보자.</p>
+
+<pre class="brush: js">var userGuess = Number(guessField.value);</pre>
+
+<p>이 코드를 다음코드로 바꾼다.</p>
+
+<pre class="brush: js">var userGuess === Number(guessField.value);</pre>
+
+<p>당연히 이 둘의 코드가 다르기때문에 오류가 발생했을 것이다. 즉, 대입 연산자(=, 값을 변수에 지정하도록 함)와 비교연산자(===, 어떤 값과 다른값을 비교할때 쓰며, true와false중 하나가 반환됨)를 함께 혼동해서 쓰면 안된다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="어떤_값을_입력해도_항상_성공표시가_뜬다.">어떤 값을 입력해도, 항상 성공표시가 뜬다.</h3>
+
+<p>이 또한, 앞처럼 대입연산자와 비교연산자를 혼동해서 사용한 경우이다. 예를들어, <code>checkGuess()</code>함수 안의 다음코드</p>
+
+<pre class="brush: js">if (userGuess === randomNumber) {</pre>
+
+<p>를</p>
+
+<pre class="brush: js">if (userGuess = randomNumber) {</pre>
+
+<p>로 바꾼다면, 조건문은 항상 참이므로, 프로그램은 항상 성공했다고 뜰 것이니 주의하자!</p>
+
+<h3 id="SyntaxError_missing_after_argument_list">SyntaxError: missing ) after argument list</h3>
+
+<p>이는 보통 함수나 메소드 호출의 끝부분에 괄호 닫는것을 빼먹은 것을 의미한다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3>
+
+<p>이 오류는 자바스립트의 객체가 잘못되었을 때 발생하지만,  다음의 경우에는 변경할 수 있다.</p>
+
+<pre class="brush: js">function checkGuess() {</pre>
+
+<p>-&gt;</p>
+
+<pre class="brush: js">function checkGuess( {</pre>
+
+<p>이는 브라우저로 하여금 함수안의 컨텐츠를 인자로 함수에게 넘겨주는 역할을 한다. 괄호에 주의하도록 하자!</p>
+
+<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3>
+
+<p>일반적으로 함수나 조건문에서 중괄호를 닫지 않아서 발생한다.  <code>checkGuess()</code> 함수의 아래부분의 중괄호를 닫지않아서 에러가 발생한다.</p>
+
+<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3>
+
+<p>이는 보통 문자열을 열거나 닫는 따옴표를 생략한 경우 에러가 발생한다.위의 첫번재 에러를 살펴보면, <em>string은</em> 문자열이 시작하는 부분에서 따옴표 대신 브라우저가 검색한 예상치 못한 문자열로 대체된다. 두번째 에러는 따옴표로 문자열이 끝나지 못했기 때문에 발생했다.</p>
+
+<p>모든 경우의 에러를 보았을 때, 지금까지 살펴본 예제에 어떻게 씨름했는지 생각해보자. 에러가 발생하면 , 발생된 줄 번호를 보고, 그 줄로 이동해 무엇이 잘못되었는지 살펴보는것이다.  이 오류가 반드시 해당 라인에 있는 것은 아니며, 위에서 언급되어진 문제로 인해  오류가 발생하지 않을 수도 있다는 점을 명심하자!</p>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> reference pages for more details about these errors.</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>자, 지끔까지 자바스크립트 프로그램에서의 에러의 특징에 대해 살펴보았다.물론, 코드상의 에러가 항상 간단한 것만은 아니다. 하지만 최소한 업무량은 줄어줄 것이며, 작업도 빠르게 마치도록 해줄 것이다.</p>
+
+<h2 id="더보기">더보기</h2>
+
+<div>
+<ul>
+ <li>여기서 소개하지 못한 에러들도 많으니, 다음 링크에서 정보들을 찾아보며 그때그때 자세히 알아보자l — <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li>
+ <li>이것을 보고도 에러를 해결하지 힘들다면 <span class="short_text" id="result_box" lang="ko"><span>MDN 토론 포럼 </span></span>로 에러를 보내면 도와줄 것이다. 또한 다른 코드를 살펴보는 것도 좋다.</li>
+</ul>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p>