JavaScript란?
JavaScript는 웹 페이지를 동적으로 만들기 위해 사용되는 프로그래밍 언어입니다. HTML과 CSS와 함께 웹의 핵심 기술 중 하나로, 클라이언트 측 스크립팅을 통해 사용자와의 상호작용을 가능하게 합니다.
JavaScript의 역사
JavaScript는 1995년 Brendan Eich가 넷스케이프(Netscape) 브라우저를 위해 개발한 언어입니다. 이후 ECMA 국제 표준화 기구에서 표준화되어 ECMAScript(ECMA-262)라는 이름으로 발표되었습니다. 현재 최신 버전은 ECMAScript 2022(ES13)입니다.
JavaScript 환경 설정
JavaScript를 작성하고 실행하기 위해 필요한 환경을 설정합니다.
1. 브라우저 콘솔 사용
모던 브라우저는 모두 JavaScript 콘솔을 내장하고 있어, 바로 JavaScript 코드를 실행할 수 있습니다.
- 크롬: F12 또는 Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (Mac)
- 파이어폭스: F12 또는 Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (Mac)
- 엣지: F12 또는 Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (Mac)
콘솔 탭에서 JavaScript 코드를 입력하고 Enter를 눌러 실행할 수 있습니다.
2. 텍스트 에디터 사용
더 복잡한 JavaScript 코드를 작성하려면 텍스트 에디터를 사용합니다. 다음은 인기 있는 텍스트 에디터입니다:
- VS Code
- Sublime Text
- Atom
3. HTML 파일에서 JavaScript 사용
HTML 파일 내에서 JavaScript 코드를 작성할 수 있습니다. <script> 태그를 사용하여 JavaScript 코드를 포함할 수 있습니다.
예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 소개</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script>
console.log('Hello, JavaScript!');
</script>
</body>
</html>이 HTML 파일을 브라우저에서 열면, 콘솔에 "Hello, JavaScript!"가 출력됩니다.
4. 외부 JavaScript 파일 사용
JavaScript 코드를 별도의 파일로 분리할 수도 있습니다. 파일 확장자는 .js를 사용합니다.
HTML 파일:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 JavaScript 파일 사용</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script src="script.js"></script>
</body>
</html>외부 JavaScript 파일 (script.js):
console.log('Hello, JavaScript!');이 HTML 파일을 브라우저에서 열면, 콘솔에 "Hello, JavaScript!"가 출력됩니다.
첫 번째 스크립트 작성
기본적인 JavaScript 코드를 작성하고 실행하는 방법을 알아봅니다.
예제 1: 콘솔 출력
console.log('Hello, JavaScript!');
예제 2: 경고창 출력
alert('Hello, JavaScript!');
예제 3: 변수 선언과 출력
var message = 'Hello, JavaScript!';
console.log(message);
결론
JavaScript는 웹 페이지를 동적으로 만들기 위해 필수적인 프로그래밍 언어입니다. 이번 글에서는 JavaScript의 기본 개념과 환경 설정, 첫 번째 스크립트 작성 방법을 배웠습니다. 앞으로 JavaScript의 다양한 기능과 문법을 하나씩 학습해 나갈 것입니다.
다음 글에서는 변수와 데이터 타입에 대해 알아보겠습니다.
다음 글에서 만나요!
'JavaScript 문법 시리즈' 카테고리의 다른 글
| [JavaScript 문법] 5일차: 반복문 (0) | 2024.08.05 |
|---|---|
| [JavaScript 문법] 4일차: 조건문 (0) | 2024.08.04 |
| [JavaScript 문법] 3일차: 연산자와 표현식 (0) | 2024.08.03 |
| [JavaScript 문법] 2일차: 변수와 데이터 타입 (0) | 2024.08.02 |
| [JavaScript 문법] 목차 (0) | 2024.06.21 |