Post

JAVASCRIPT) 정의와 기본 사용법

Posted Updated
Preview Image
By parksohyunnn 9 min read

자바스크립트: 정의와 기본 사용법

자바스크립트(JavaScript)는 오늘날 웹 개발에서 필수적인 프로그래밍 언어입니다. 이 글에서는 자바스크립트의 정의와 기본 사용법, 그리고 자바스크립트를 HTML 파일에 불러오는 방법과 함께 몇 가지 예제를 통해 자바스크립트의 기본 개념을 살펴보겠습니다.

자바스크립트란 무엇인가?

자바스크립트는 웹 페이지의 동적 동작을 가능하게 하는 스크립트 언어입니다. HTML이 웹 페이지의 구조를 정의하고, CSS가 스타일을 정의하는 반면, 자바스크립트는 웹 페이지에 인터랙티브 요소를 추가합니다. 예를 들어, 버튼 클릭 시 이벤트를 처리하거나, 폼 데이터를 검증하거나, 웹 페이지의 콘텐츠를 동적으로 변경하는 등의 작업을 수행할 수 있습니다.

자바스크립트는 클라이언트 측(브라우저)에서 실행되지만, Node.js와 같은 런타임 환경을 통해 서버 측에서도 실행할 수 있습니다. 이는 자바스크립트가 프론트엔드와 백엔드 모두에서 사용될 수 있음을 의미합니다.

자바스크립트 기본 사용법

1. 변수와 상수

자바스크립트에서는 var, let, const 키워드를 사용하여 변수를 선언할 수 있습니다. var는 함수 범위(function scope)를 가지며, let과 const는 블록 범위(block scope)를 가집니다. const는 상수(constant)를 선언할 때 사용합니다.

1
2
3
4
5
6
7

var name = 'John';
let age = 30;
const isStudent = true;

console.log(name); // John
console.log(age); // 30
console.log(isStudent); // true

2. 데이터 타입

자바스크립트에는 여러 가지 데이터 타입이 있습니다. 주요 데이터 타입으로는 문자열(string), 숫자(number), 불리언(boolean), 배열(array), 객체(object) 등이 있습니다.

1
2
3
4
5
6
7
8
9
10
11

let message = "Hello, world!"; // 문자열
let number = 42; // 숫자
let isAvailable = false; // 불리언
let colors = ["red", "green", "blue"]; // 배열
let person = { name: "Alice", age: 25 }; // 객체

console.log(message); // Hello, world!
console.log(number); // 42
console.log(isAvailable); // false
console.log(colors); // ["red", "green", "blue"]
console.log(person); // { name: "Alice", age: 25 }

3. 함수

함수는 특정 작업을 수행하는 코드 블록입니다. 자바스크립트에서는 함수 선언문과 함수 표현식을 사용하여 함수를 정의할 수 있습니다.

  • 함수 선언문
1
2
3
4
5

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // Hello, Alice!
  • 함수 표현식
1
2
3
4
5

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet("Bob")); // Hello, Bob!

4. 조건문과 반복문

자바스크립트에서는 if, else if, else 키워드를 사용하여 조건문을 작성할 수 있습니다. 반복문으로는 for, while, do…while 등이 있습니다.

  • 조건문
1
2
3
4
5
6
7
8
9
10

let score = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else {
  console.log("C");
}
// B
  • 반복문
1
2
3
4
5
6
7
8

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 0
// 1
// 2
// 3
// 4

5. 이벤트 처리

자바스크립트는 HTML 요소와의 상호작용을 위해 이벤트 처리를 지원합니다. 예를 들어, 버튼 클릭 시 특정 작업을 수행하도록 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Handling</title>
</head>
<body>
  <button id="myButton">Click me</button>
  <script>
    document.getElementById("myButton").addEventListener("click", function() {
      alert("Button clicked!");
    });
  </script>
</body>
</html>

자바스크립트 불러오는 방법

자바스크립트를 HTML 파일에 불러오기 위해 <script> 태그를 사용합니다. <script> 태그는 두 가지 주요 방식으로 사용할 수 있습니다: 인라인 스크립트와 외부 스크립트입니다.

인라인 스크립트

인라인 스크립트는 HTML 파일 내에 직접 자바스크립트 코드를 작성하는 방식입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline Script</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <script>
    console.log("This is an inline script.");
  </script>
</body>
</html>

외부 스크립트

외부 스크립트는 자바스크립트 코드를 별도의 파일에 작성하고, HTML 파일에서 이를 불러오는 방식입니다. 이렇게 하면 코드의 재사용성과 관리가 용이해집니다.

  • script.js 파일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

console.log("This is an external script.");
HTML 파일
html
코드 복사
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External Script</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <script src="script.js"></script>
</body>
</html>

자바스크립트의 기본 예제

자바스크립트를 사용하여 간단한 계산기를 만들어보겠습니다. 사용자가 두 숫자를 입력하고 버튼을 클릭하면, 두 숫자의 합을 계산하여 표시하는 기능을 구현합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Calculator</title>
</head>
<body>
  <h1>Simple Calculator</h1>
  <input type="number" id="num1" placeholder="Enter first number">
  <input type="number" id="num2" placeholder="Enter second number">
  <button id="calculateButton">Calculate</button>
  <p id="result"></p>

  <script>
    document.getElementById("calculateButton").addEventListener("click", function() {
      const num1 = parseFloat(document.getElementById("num1").value);
      const num2 = parseFloat(document.getElementById("num2").value);
      const sum = num1 + num2;

      document.getElementById("result").textContent = `Result: ${sum}`;
    });
  </script>
</body>
</html>

이 예제에서는 두 개의 숫자 입력 필드와 계산 버튼, 결과를 표시할 요소가 있습니다. 사용자가 버튼을 클릭하면, 자바스크립트가 입력된 값을 읽어와서 합계를 계산하고 결과를 화면에 표시합니다.

결론

자바스크립트는 웹 페이지에 동적인 기능을 추가하는 강력한 도구입니다. 변수와 상수, 데이터 타입, 함수, 조건문과 반복문, 이벤트 처리와 같은 기본 개념을 이해하고, 자바스크립트를 HTML 파일에 불러오는 방법을 알게 되면, 더 복잡한 웹 애플리케이션을 개발할 수 있는 기초를 다질 수 있습니다. 자바스크립트를 통해 더욱 인터랙티브하고 사용자 친화적인 웹 경험을 제공해보세요.

JAVASCRIPT
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github