완전 초보를 위한 JavaScript 첫걸음: 기초 개념부터 실습까지

GoGoComputer·2025년 2월 4일

javaScript study

목록 보기

5/10

아래 내용은 “JavaScript의 핵심 구문 및 기능”을 배우기 위한 기초 지침을 길고 자세하게, 이해하기 쉽게 풀어 쓴 설명입니다. 처음 JavaScript를 접하시는 분들을 위해 용어나 과정을 차근차근 풀어드리니, 편하게 읽어보세요!

1. 앞으로 배우게 될 것들: JavaScript의 핵심 구문 및 기능

우리가 이제부터 배우려는 JavaScript는 브라우저에서 동적인 기능을 구현하기 위한 언어입니다. 웹사이트에 버튼을 누르면 어떤 행동이 일어난다거나, 입력한 값을 계산해서 결과를 보여주고, 시각적인 요소가 실시간으로 업데이트되도록 만드는 일을 JavaScript가 담당합니다.

이 강의(모듈)에서 특히 다룰 내용은 크게 다음과 같습니다.

JavaScript의 핵심 구문(Syntax)
- 코드 작성 시 기본적으로 따라야 하는 문법을 익히고, 올바른 형태로 코드를 작성하는 방법을 배웁니다.
변수(Variable)
- 변수가 무엇인지, 왜 사용하는지, 어떻게 생성하고 쓰는지를 알아봅니다.
- 변수로 다룰 수 있는 데이터 종류(자료형)도 함께 배울 거예요. 예: 숫자, 문자열, 불리언(true/false) 등.
연산자(Operator)
- 값을 결합하거나 조작하는 여러 방법을 배웁니다.
- 덧셈, 뺄셈, 논리 연산 등 여러 연산자들을 이용해 계산을 하고, 프로그램을 유용하게 동작시키는 기본 원리를 익힙니다.
함수(Function)
- 함수가 무엇이며, 왜 필요한지, 또 어떻게 사용하는지를 알아봅니다.
- 대부분의 프로그래밍 언어에서 함수는 핵심 구조이므로, JavaScript에서도 매우 중요한 부분입니다.

이 내용들을 배운 뒤, 우리는 간단한 예제들을 통해 “화면에서 실제로 동작하는 JavaScript”를 직접 확인할 겁니다. 단순히 이론만 배우는 것이 아니라, 웹 브라우저에서 눈으로 보고 “아, 이런 식으로 모든 것들이 결합해서 작동하는구나!” 라고 이해할 수 있도록 진행합니다.

2. JavaScript 코드를 작성할 기본 웹사이트 필요성

우리가 JavaScript를 배울 때는, 단순히 콘솔(Console)에 출력만 해보는 방법도 있지만, “눈에 보이는” 결과가 있으면 학습 동기가 훨씬 높아집니다. 따라서 웹사이트 형태로 JavaScript를 적용해볼 예정이에요.

HTML과 CSS만으로는 웹페이지의 구조와 스타일을 정할 수 있지만, 동적으로 버튼을 누르면 어떤 일이 일어나게 하거나 하는 기능을 만들기는 어렵습니다.
이때 필요한 것이 JavaScript입니다. JavaScript를 통해 브라우저가 사용자와 상호작용할 수 있는 동적 로직을 추가하게 됩니다.

첨부된 시작 프로젝트 살펴보기

강의에서는 이미 시작 프로젝트(Starter Project)가 제공됩니다. 압축 파일을 다운로드하여, 원하는 위치에 압축을 풀어준 뒤, IDE나 코드 에디터에서 폴더를 열어주시면 됩니다.

여기서는 Visual Studio Code를 예시로 사용하고 있지만, 다른 에디터를 사용해도 무방합니다.
압축을 해제한 뒤 Visual Studio Code에서 File > Open을 클릭해 해당 폴더를 열어주세요.

폴더를 열면, 대략 아래와 같은 구조를 볼 수 있을 겁니다:

.vscode 폴더(없을 수도 있음)
- 이것은 Visual Studio Code 전용 설정을 담는 폴더이므로, 여러분이 직접 만질 필요는 없습니다.
.gitignore 파일(있을 수도 있고, 없을 수도 있음)
- Git이라는 소스 관리 툴을 사용하는 경우에 생기는 파일입니다.
- Git을 사용하지 않는다면 전혀 신경 쓰지 않아도 됩니다.
index.html
- 우리가 실제로 보게 될 웹페이지의 뼈대(HTML 구조)가 들어 있는 핵심 파일입니다.
- 기본으로 폰트, 스타일 시트(CSS) 등을 불러오도록 설정되어 있습니다.
- 하단에는 미리 작성된 JavaScript 파일도 연결되어 있는데, 아직 배울 내용이 많이 들어 있어서 지금은 완벽히 이해하지 못해도 괜찮아요.

“시작 스크립트” 내용은 신경 쓰지 않아도 될까?

index.html 파일 안에는 이미 작성되어 있는 스크립트(자바스크립트 파일 연결)가 하나 있을 텐데요, 아직 배우지 않은 기능들이 포함되어 있습니다.
이 모듈(강의) 초반에는 그 코드를 바로 이해하기는 어렵습니다. “이런 기능도 있구나!” 정도로만 넘어가도 괜찮아요.
강의 후반부에 가면 자연스럽게 이해할 수 있게 되며, 그 사이에는 코드를 수정할 일이 없으니 편하게 둬도 됩니다.

3. 실제 웹사이트 실행해 보기

폴더 구조를 확인했다면, 이제 실제로 웹 브라우저에서 페이지를 열어볼 차례입니다.
1. IDE(에디터) 내부에서 index.html을 실행하는 것이 아니라, Windows 탐색기나 Mac의 Finder에서 직접 파일을 더블 클릭해 열어주세요.
2. 그러면 기본 웹 브라우저가 열리면서, 어떤 모양의 페이지가 뜰 겁니다.

Chrome 브라우저 사용을 권장드립니다(강의와 가장 호환이 잘 됩니다).

계산기 형태의 간단한 예시 페이지

이 페이지는 계산기 모양을 하고 있지만, 현재로서는 아무리 버튼을 눌러도 반응이 없습니다. 왜냐하면 아직 계산 로직이나 이벤트 처리 로직을 JavaScript로 추가해 주지 않았기 때문이죠.

여러분이 버튼을 눌렀을 때 화면에 어떤 값이 표시된다거나, 결과(Result) 부분이 업데이트되는 기능을 만들려면, JavaScript 코드를 작성해야 합니다.
이 강의 모듈에서 배운 개념(변수, 연산자, 함수 등)을 이용해 조금씩 로직을 작성하면, 계산기 기능이 동작하도록 만들어볼 수 있을 거예요.

4. 왜 JavaScript가 필요한가?

HTML만으로는 문서의 구조(제목, 단락, 버튼 배치 등)만 표현할 수 있습니다.
CSS만으로는 문서의 시각적 디자인(폰트 색, 크기, 버튼 모양, 배경색 등)만 바꿀 수 있습니다.
JavaScript는 이 두 가지를 포함하여, 사용자와의 상호작용을 만들어냅니다.
- 예: 사용자가 버튼을 클릭했을 때 이벤트가 발생하고, 그에 따라 결과 값이 화면에 보여지거나 계산되는 동작을 수행함.

결국 “동적으로 무언가를 바꾸는” 역할을 담당하는 언어가 JavaScript인 셈이죠. 이번 모듈에서는 JavaScript에서 가장 기초가 되는 “변수, 연산자, 함수, 구문”을 차근차근 배워가며, 계산기 예시를 통해 실제로 동작하는 코드를 확인할 예정입니다.

5. 앞으로의 학습 방향

변수(Variable) 기초
- 변수를 선언하고 사용해보며, 프로그램에서 데이터를 다루는 기본 방법을 익힙니다.
- 숫자, 문자열, 불리언 등 자주 쓰이는 자료형을 살펴봅니다.
연산자(Operator) 이해
- 사칙연산(+, -, *, /) 같은 숫자 연산자부터, 값들을 비교하는 비교 연산자(>, <, == 등), 논리 연산자(&&, ||) 등을 배웁니다.
- 버튼 클릭 시 계산기가 실제로 더하기/곱하기를 할 수 있도록 만드는 핵심 요소죠.
함수(Function)의 역할
- 반복적으로 사용하는 코드를 재사용하고, 로직을 깔끔하게 정리하는 방법을 배웁니다.
- 예: “숫자를 두 개 받아 계산해서 결과를 출력하는” 함수를 만들기.
브라우저와 상호작용
- HTML 요소를 선택하고, 그 내용이나 스타일을 JavaScript로 변경하는 방법을 차차 익히게 됩니다.
- “버튼이 클릭되면” 이라는 이벤트를 감지하고, 그에 따라 JavaScript 코드를 실행하는 작업도 배우게 됩니다.
실습과 예제
- 강의 중간중간, 계산기를 실제로 동작시키면서 “내 코드가 어떻게 화면에 반영되는지” 직접 확인해 볼 예정입니다.
- 작은 예제를 반복적으로 만들어보며, 개념을 자연스럽게 익히게 됩니다.

6. 마무리 요약

이번에 배울 JavaScript 기초 내용은 모든 웹 개발 및 다양한 프로그래밍에 기본이 되는 부분입니다.
변수, 연산자, 함수 등은 어디서든 쓰이니, 꼭 차근차근 익혀두면 좋습니다.
이미 준비된 시작 프로젝트를 통해, 계산기 페이지를 조금씩 완성해가면서 실습할 예정입니다.
지금 당장은 index.html에 연결된 스크립트가 낯설어 보이겠지만, 학습을 진행할수록 점차 이해가 깊어지니 걱정하지 않으셔도 됩니다.

이 과정을 따라가며 작은 코드부터 직접 작성해보면, 나중에는 스스로 간단한 웹 기능을 만들어낼 수 있을 거예요. “이 버튼을 누르면 이런 로직이 동작하고, 결과가 이렇게 표시된다.” 하는 식의 프로그래밍적 사고가 가능해집니다.

앞으로 어떻게 하면 좋을까?

준비물 체크: Visual Studio Code(또는 다른 IDE), Chrome 브라우저, 다운로드한 시작 프로젝트 폴더.
프로젝트 열기: 폴더를 열고, index.html을 더블 클릭해 브라우저에서 실행해본다.
코드 살펴보기: index.html과 연결된 스크립트(자바스크립트) 파일 위치 확인(단, 지금은 코드를 몰라도 괜찮음).
강의 진도대로 천천히: 변수, 연산자, 함수 같은 이론을 배우고, 계산기에 직접 적용해보기.

이제 학습을 시작하면, “어떻게 JavaScript 코드가 화면과 상호작용하고, 버튼을 눌렀을 때 어떤 계산이 일어나는지” 자연스럽게 터득할 수 있을 겁니다. 막연하게만 보였던 JavaScript가 실제로 웹을 움직이는 동력이라는 사실을 예제와 함께 확인해보세요!

여기까지가 위 내용을 쉽게 풀어 쓴 긴 설명이었습니다.
이제 본격적으로 변수를 배우는 다음 단계로 넘어가실 준비가 되셨습니다.
배운 내용은 너무 부담 갖지 말고, “아, 대략적으로 이렇게 돌아가는구나!” 정도로 기억하시면 됩니다.

계속해서 차근차근 익혀나가며 즐겁게 학습해보세요!

아래는 해당 프로젝트 폴더 구조와 각 파일의 코드 예시를 한눈에 보기 좋도록 정리한 내용입니다. 블로그 글에 참고하시면 좋겠습니다.

폴더 및 파일 구조

basics-01-starting-project/
  ┣─ assets/
  │   ┣─ scripts/
  │   │   └─ vendor.js
  │   └─ styles/
  │       └─ app.css
  └─ index.html

assets 폴더
- scripts 폴더: vendor.js 파일이 위치
- styles 폴더: app.css 파일이 위치
index.html: 프로젝트의 메인 HTML 파일

각 파일별 코드

1) vendor.js

const userInput = document.getElementById('input-number');
const addBtn = document.getElementById('btn-add');
const subtractBtn = document.getElementById('btn-subtract');
const multiplyBtn = document.getElementById('btn-multiply');
const divideBtn = document.getElementById('btn-divide');

const currentResultOutput = document.getElementById('current-result');
const currentCalculationOutput = document.getElementById('current-calculation');

function outputResult(result, text) {
  currentResultOutput.textContent = result;
  currentCalculationOutput.textContent = text;
}

2) app.css

* {
  box-sizing: border-box;
}

html {
  font-family: 'Roboto', open-sans;
}

body {
  margin: 0;
}

header {
  background: #023d6d;
  color: white;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  width: 100%;
}

#results,
#calculator {
  margin: 2rem auto;
  width: 40rem;
  max-width: 90%;
  border: 1px solid #023d6d;
  border-radius: 10px;
  padding: 1rem;
  color: #023d6d;
}

#results {
  text-align: center;
}

#calculator input {
  font: inherit;
  font-size: 3rem;
  border: 2px solid #023d6d;
  width: 10rem;
  padding: 0.15rem;
  margin: auto;
  display: block;
  color: #023d6d;
  text-align: center;
}

#calculator input:focus {
  outline: none;
}

#calculator button {
  font: inherit;
  background: #023d6d;
  color: white;
  border: 1px solid #023d6d;
  padding: 1rem;
  cursor: pointer;
}

#calculator button:focus {
  outline: none;
}

#calculator button:hover,
#calculator button:active {
  background: #084f88;
  border-color: #084f88;
}

#calc-actions button {
  width: 4rem;
}

#calc-actions {
  margin-top: 1rem;
  text-align: center;
}

3) index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Basics</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="assets/styles/app.css" />
  </head>
  <body>
    <header>
      <h1>The Unconventional Calculator</h1>
    </header>

    <section id="calculator">
      <input type="number" id="input-number" />
      <div id="calc-actions">
        <button type="button" id="btn-add">+</button>
        <button type="button" id="btn-subtract">-</button>
        <button type="button" id="btn-multiply">*</button>
        <button type="button" id="btn-divide">/</button>
      </div>
    </section>
    <section id="results">
      <h2 id="current-calculation">0</h2>
      <h2>
        Result: <span id="current-result">0</span>
      </h2>
    </section>
  </body>
</html>

위 구조를 그대로 이용하면,

index.html에서 HTML 기본 구조 및 로드되는 자원(CSS, 폰트, JavaScript 파일)을 확인할 수 있고,
vendor.js에서 계산 버튼 클릭 시 동작할 스크립트,
app.css에서 전체적인 스타일을 적용할 수 있습니다.

이렇게 설정해두면 브라우저에서 index.html을 실행했을 때, 간단한 계산기 UI가 보이며, 차후 JavaScript 로직 추가에 따라 동작하는 예제를 쉽게 만들 수 있습니다.

아래 내용은 “별도의 스크립트 파일(app.js)을 만들어서 HTML에 연결하고, 간단한 코드를 테스트하는 과정”을 파일 구조를 포함해 쉽고 자세하게 풀어낸 설명입니다. 웹 초보자분들을 위해 개념과 과정을 길게 설명했으니 편하게 참고해 보세요.

1. 폴더 및 파일 구조

일반적으로 다음과 같은 폴더 구조를 가정해 볼 수 있습니다. (예시는 자유롭게 변형 가능)

my-project/
  ┣─ index.html
  ┗─ assets/
      ┣─ scripts/
      │   ┣─ vendor.js
      │   └─ app.js
      ┗─ styles/
          └─ app.css

index.html
- 웹 페이지의 뼈대(HTML 구조)가 들어가는 메인 파일입니다.
assets 폴더
- 웹 자원(이미지, 스크립트, 스타일 등)을 보관하기 위한 폴더입니다.
- scripts 폴더: JavaScript 파일들을 모아둡니다.
  - vendor.js: 강의에서 제공된 파일(또는 외부 라이브러리, 공통 코드 등)이 들어 있을 수 있음.
  - app.js: 우리가 직접 작성할 스크립트 파일.
- styles 폴더: CSS 파일들이 위치합니다.
  - app.css (또는 다른 이름) 등 스타일 관련 코드.

위 구조는 하나의 예시일 뿐이므로, 필요에 따라 파일/폴더명을 마음대로 변경할 수 있습니다. 다만, 확장자(.js, .css 등)는 유지해야 합니다.

2. vendor.js와 app.js의 역할

(1) vendor.js

보통 다른 사람이 만든 라이브러리나, 여러 곳에서 재사용되는 공통 코드 등을 두는 파일입니다.
강의에서는 “제공된 파일”이라고 했지만, 사실 이름을 원하는 대로 변경할 수 있어요.

(2) app.js

우리가 이번 프로젝트에서 직접 작성할 코드를 넣는 파일입니다.
“계산기 로직” 같은 주요 동작을 구현하게 됩니다.
파일명(app.js) 역시 자유롭게 바꿔도 되지만, .js 확장자를 유지해야 합니다.

3. 새 스크립트 파일 만들기 & 간단한 코드 작성

1) app.js에 alert 추가하기

가장 기본적인 테스트로, app.js 파일에 아래와 같은 한 줄의 코드를 추가해 봅시다.

alert('This works!');

alert 함수는 뭘까?

alert()는 브라우저가 제공하는 기본 팝업 기능입니다.
작은 창이 뜨면서 'This works!'라는 문구를 사용자에게 보여주고, 확인을 누를 때까지 페이지 로딩이 잠시 멈춥니다.
괄호나 따옴표 등은 아직 익숙하지 않을 수 있지만, JavaScript 기본 문법이니 너무 걱정하지 마세요.
- 차근차근 배우면서 자연스럽게 익히게 됩니다.

2) 그런데, 왜 지금 당장은 아무 일도 안 일어날까?

app.js에 코드를 써두었어도, HTML이 이 스크립트 파일을 로드하지 않으면 아무 일도 일어나지 않습니다. 브라우저는 스스로 “assets/scripts 폴더 안의 app.js를 불러올까?” 하고 자동으로 찾아보지 않기 때문이죠.

4. HTML에 JavaScript 연결하기

방법 A) HTML 내부에 직접 스크립트를 적는 방법

HTML 파일의 <head>나 <body> 안에 <script> 태그를 만들고, 그 사이에 코드를 직접 써 넣을 수도 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
  </head>
  <body>
    <h1>테스트 페이지</h1>

    <script>
      alert('This works - between script tags!');
    </script>
  </body>
</html>

이렇게 하면, 코드가 별도 파일로 분리되지 않으므로, 스크립트를 넣은 즉시 동작합니다.
하지만 코드가 길어질수록 HTML 파일이 지저분해지고 관리가 어려워집니다.
따라서, 조금 규모가 커지는 경우에는 별도 .js 파일로 분리하는 것이 일반적이죠.

방법 B) 외부 스크립트 파일로 분리하고, HTML에서 불러오기

대부분의 경우 이 방식을 선호합니다.

스크립트를 불러오는 태그

<script src="파일경로"></script>

파일경로(src)는 상대 경로 또는 절대 경로로 작성할 수 있습니다.
예: assets/scripts/app.js, ./assets/scripts/app.js, http://example.com/app.js 등

실제 예시

우리가 만들었던 app.js를 index.html에 연결한다고 해봅시다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
  </head>
  <body>
    <h1>테스트 페이지</h1>

    <!-- 바디 끝에서 스크립트 로드하기 (권장) -->
    <script src="assets/scripts/vendor.js"></script>
    <script src="assets/scripts/app.js"></script>
  </body>
</html>

vendor.js를 먼저 불러옵니다.
- 이유: app.js에서 vendor.js의 코드를 미리 사용할 수도 있기 때문입니다.
app.js를 나중에 불러옵니다.
- 순서대로 로드되어야 에러 없이 코드를 사용할 수 있어요.

스크립트 로드 위치: `<body>` 끝 부분

<head>가 아닌 <body> 맨 아래에 <script> 태그를 넣어주면, HTML을 일단 먼저 화면에 그린 뒤 스크립트를 불러올 수 있어서 사용자 경험이 더 좋습니다.
<head>에 두면 브라우저가 스크립트를 다 불러오기 전까지 페이지가 뜨지 않을 수도 있어, 로딩이 느려 보일 수 있습니다.

5. alert 실행되는 순서와 페이지 렌더링

브라우저가 HTML을 읽기 시작합니다.
<body>를 해석하다가 <script src="assets/scripts/vendor.js"></script> 만나면, vendor.js 파일을 다운받아 실행합니다.
그 다음 <script src="assets/scripts/app.js"></script> 만나면, app.js를 다운받아 실행합니다.
app.js 안에 alert('This works!')가 있으면, 즉시 팝업 창이 뜹니다.
사용자가 확인(OK)을 누르면, 그제야 다음 단계로 넘어가고 나머지 화면이 완전히 준비됩니다.

만약 <head> 안에 스크립트를 넣었다면, 문서 구조를 다 그리기도 전에 alert가 뜰 수도 있어요. 그래서 보통 <body> 하단에 스크립트를 배치하는 겁니다.

6. vendor.js와 app.js의 의존성 (순서가 중요한 이유)

만약 app.js에서 vendor.js 안에 있는 특정 변수나 함수를 참조하고 있다면, 브라우저가 vendor.js를 먼저 로드해야 합니다.
자바스크립트 로드는 순서대로 일어납니다. 코드가 이미 로드된 파일의 변수나 함수를 나중에 로드된 파일에서 사용할 수 있으니까요.
그래서 <script src="vendor.js"></script> 뒤에 <script src="app.js"></script>를 작성하는 식으로, 의존 파일을 먼저 로드해주는 것이 중요합니다.

7. body 밑에 스크립트를 두면 좋은 점

사용자 입장에서 화면이 먼저 뜨기 때문에, 사이트가 빨리 로딩된 것처럼 느껴집니다.
alert 창이 뜨더라도, 최소한 페이지 본문이 어느 정도 표시된 뒤라서 깜깜한 화면을 오래 보지 않아도 되죠.
이 외에도 다양한 이유로, 요즘에는 <script> 태그를 <head>에 넣는 대신, 바디 끝이나 defer/async 속성을 이용하는 방식을 권장합니다.

8. 이렇게 기본 설정이 끝나면

자, 이제 HTML에 스크립트가 정상적으로 연결되었고, alert('This works!') 같은 간단 테스트도 마쳤습니다. 그럼 본격적으로 “계산기 로직” 같은 내용을 넣을 수 있는 준비가 된 것입니다.

vendor.js 안에는 이미 제공된 코드(또는 라이브러리)가 있을 수 있어요.
app.js 안에서 버튼 클릭 이벤트, 계산 로직 등을 작성하게 됩니다.
index.html은 그저 화면에 버튼, 입력 창 등을 배치하며, 스크립트를 로드하는 역할만 하면 됩니다.

향후에는 변수(값을 저장), 함수(코드 묶음), 이벤트 처리(버튼 누르면 작동) 등을 배워서, app.js에 더욱 복잡한 코드도 넣어볼 수 있습니다.

9. 요약

파일 구조 예시

my-project/
  ┣─ index.html
  ┗─ assets/
      ┣─ scripts/
      │   ┣─ vendor.js   (제공된/공통/라이브러리 코드)
      │   └─ app.js      (우리가 작성하는 핵심 로직)
      ┗─ styles/
          └─ app.css

기본적인 스크립트 로드 방법
- HTML <head>나 <body> 안에서 <script src="..."></script> 태그 이용
- 보통 바디 끝 부분에 스크립트를 배치해 성능과 사용자 경험 개선
순서 중요
- vendor.js → app.js 순으로 로드해야, app.js에서 vendor.js 코드를 제대로 활용 가능
alert()로 간단 테스트
- alert('This works!'); 추가 후 페이지 새로고침 → 팝업 창 뜨면 성공
앞으로 할 일
- 이 환경 설정이 끝났으니, 실제로 계산기 기능이나 이벤트 처리를 추가해 나가면 됨.

이렇게 해서 “새로운 자바스크립트 파일(app.js)을 만들어 HTML에 연결하고, 간단한 코드(alert)로 동작을 확인하는 방법”을 알아봤습니다. 프로젝트가 커지더라도 파일을 분리해서 관리하면 훨씬 편리하니, 처음부터 이런 구조를 익혀두면 좋습니다.

이제 마음껏 app.js 안에 원하는 로직을 추가해 보세요!
계산기 예제를 만들면서, 버튼 이벤트와 값 계산, 화면 표시 업데이트 등 재미있는 기능들을 하나씩 배워나가실 수 있을 겁니다.

즐거운 코딩 되세요!

GoGoComputer

IT를 좋아합니다.

이전 포스트

JavaScript의 모든 것: 역사, Java와의 차이, 그리고 실행 환경

다음 포스트

완전 초보를 위한 JavaScript 첫걸음: 기초 개념부터 실습까지

javaScript study

1. 앞으로 배우게 될 것들: JavaScript의 핵심 구문 및 기능

2. JavaScript 코드를 작성할 기본 웹사이트 필요성

첨부된 시작 프로젝트 살펴보기

“시작 스크립트” 내용은 신경 쓰지 않아도 될까?

3. 실제 웹사이트 실행해 보기

계산기 형태의 간단한 예시 페이지

4. 왜 JavaScript가 필요한가?

5. 앞으로의 학습 방향

6. 마무리 요약

앞으로 어떻게 하면 좋을까?

폴더 및 파일 구조

각 파일별 코드

1) vendor.js

2) app.css

3) index.html

1. 폴더 및 파일 구조

2. vendor.js와 app.js의 역할

(1) vendor.js

(2) app.js

3. 새 스크립트 파일 만들기 & 간단한 코드 작성

1) app.js에 alert 추가하기

alert 함수는 뭘까?

2) 그런데, 왜 지금 당장은 아무 일도 안 일어날까?

4. HTML에 JavaScript 연결하기

방법 A) HTML 내부에 직접 스크립트를 적는 방법

방법 B) 외부 스크립트 파일로 분리하고, HTML에서 불러오기

스크립트를 불러오는 태그

실제 예시

스크립트 로드 위치: `<body>` 끝 부분

5. alert 실행되는 순서와 페이지 렌더링

6. vendor.js와 app.js의 의존성 (순서가 중요한 이유)

7. body 밑에 스크립트를 두면 좋은 점

8. 이렇게 기본 설정이 끝나면

9. 요약

JavaScript의 모든 것: 역사, Java와의 차이, 그리고 실행 환경

자바스크립트 변수와 상수 개념부터 간단한 계산기 구현까지

0개의 댓글

완전 초보를 위한 JavaScript 첫걸음: 기초 개념부터 실습까지

javaScript study

1. 앞으로 배우게 될 것들: JavaScript의 핵심 구문 및 기능

2. JavaScript 코드를 작성할 기본 웹사이트 필요성

첨부된 시작 프로젝트 살펴보기

“시작 스크립트” 내용은 신경 쓰지 않아도 될까?

3. 실제 웹사이트 실행해 보기

계산기 형태의 간단한 예시 페이지

4. 왜 JavaScript가 필요한가?

5. 앞으로의 학습 방향

6. 마무리 요약

앞으로 어떻게 하면 좋을까?

폴더 및 파일 구조

각 파일별 코드

1) vendor.js

2) app.css

3) index.html

1. 폴더 및 파일 구조

2. vendor.js와 app.js의 역할

(1) vendor.js

(2) app.js

3. 새 스크립트 파일 만들기 & 간단한 코드 작성

1) app.js에 alert 추가하기

alert 함수는 뭘까?

2) 그런데, 왜 지금 당장은 아무 일도 안 일어날까?

4. HTML에 JavaScript 연결하기

방법 A) HTML 내부에 직접 스크립트를 적는 방법

방법 B) 외부 스크립트 파일로 분리하고, HTML에서 불러오기

스크립트를 불러오는 태그

실제 예시

스크립트 로드 위치: <body> 끝 부분

5. alert 실행되는 순서와 페이지 렌더링

6. vendor.js와 app.js의 의존성 (순서가 중요한 이유)

7. body 밑에 스크립트를 두면 좋은 점

8. 이렇게 기본 설정이 끝나면

9. 요약

JavaScript의 모든 것: 역사, Java와의 차이, 그리고 실행 환경

자바스크립트 변수와 상수 개념부터 간단한 계산기 구현까지

0개의 댓글

스크립트 로드 위치: `<body>` 끝 부분