---
title: JavaScript 구성요소
slug: Learn/JavaScript/Building_blocks
tags:
  - 가이드
  - 국제화
  - 소개
  - 자바스크립트
  - 초보자
  - 함수
translation_of: Learn/JavaScript/Building_blocks
---
<div>{{LearnSidebar}}</div>

<p class="summary">이번 장에서는 조건문, 반복문, 함수, 이벤트 등 일반적으로 발생하는 코드 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정을 지나면서 여기서 다룰 내용을 살짝 보셨겠지만 좀 더 심도있게 다루겠습니다.</p>

<h2 id="선행사항">선행사항</h2>

<p>시작하기전에, 기본 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML</a>, <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS</a> 기본지식을 가지고 계신 것이 좋습니다. 그리고 <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫 걸음</a>을 꼭 진행하신후 오시기 바랍니다.</p>

<div class="note">
<p><strong>Note</strong>: 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타장치) , <a href="http://jsbin.com/">JSBin</a>이나 <a href="https://glitch.com">Glitch</a>에서 대부분의 예제를 시험해 볼 수 있습니다.</p>
</div>

<h2 id="가이드">가이드</h2>

<dl>
 <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></dt>
 <dd>어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다. </dd>
 <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></dt>
 <dd>때로는 여러 반복 작업을 수행해야 할 때가 있습니다. 예를 들면 이름 목록을 살펴보는 것입니다. 프로그래밍에서 이런 반복 작업은 매우 적합합니다. JavaScript의 반복문 구조를 살펴봅니다.</dd>
 <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></dt>
 <dd>코딩의 또 다른 핵심 개념은 <strong>함수</strong>입니다. <strong>함수</strong>를 사용하면 정의된 구간 안에 하나의 작업을 하는 코드를 저장한 후, 같은 코드를 여러 번 입력하지 않고도 짧은 명령어를 사용해 이 코드를 이용할 수 있습니다. 기본 문법, 함수, 범위 및 매개 변수를 호출하고 정의하는 방법과 같은 함수의 기본 개념을 살펴봅니다.</dd>
 <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></dt>
 <dd>그동안 배운 이론을 활용해 실제 코드를 작성해봅니다. 사용자 정의 함수를 작성해 보고, 함수의 유용한 기능을 좀 더 알아봅니다.</dd>
 <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수는 값을 반환한다</a></dt>
 <dd>함수에 대해 알아야 할 마지막 필수 개념은 반환값입니다. 어떤 함수는 완료하면서 값을 반환하지 않지만, 반환하는 함수도 있습니다. 값이 무엇인지, 코드에서 어떻게 사용하는지, 여러분이 작성한 함수가 어떻게 값을 반환하는지 이해하는 것이 중요합니다.</dd>
 <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></dt>
 <dd>이벤트란 프로그래밍중인 시스템에서 발생하는 동작이나 발생을 말하며, 시스템에서 그에 대해 알려주므로 원하는 경우 사용자가 어떤 방식으로든 이에 응답 할 수 있습니다. 예를 들어 사용자가 웹 페이지에서 버튼을 클릭하면 정보 상자를 표시하여 해당 작업에 응답 할 수 있습니다. 이 마지막 문서에서는 이벤트를 둘러싼 몇 가지 중요한 개념에 대해 이야기하고 브라우저에서 어떻게 작동하는지 살펴 보겠습니다.</dd>
</dl>

<h2 id="평가">평가</h2>

<p>여기에선 위에서 다룬 JavaScript 기본 사항에 대해 여러분이 얼마나 이해했는지 테스트해볼 수 있습니다..</p>

<dl>
 <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></dt>
 <dd>이제 JavaScript의 기본 구성 요소를 살펴 보았으므로 많은 웹 사이트에서 볼 수있는 공통 항목인 JavaScript 기반 이미지 갤러리를 만들어 반복문, 함수, 조건문, 이벤트에 대한 지식을 테스트합니다.</dd>
</dl>