JavaScript basic

현대 웹 개발의 심장이자 영혼인 **자바스크립트(JavaScript)**의 세계에 오신 것을 환영합니다.

이 언어는 정적인 문서에 생명력을 불어넣어 사용자와 소통하게 만드는 마법 같은 도구입니다.

---

1. JS의 정의 (자바스크립트란?)

자바스크립트는 웹 페이지에 동적인 기능을 더하기 위해 만들어진 프로그래밍 언어입니다.

HTML이 웹의 '뼈대'를 만들고 CSS가 '외형'을 꾸민다면, 자바스크립트는 웹의 '근육과 신경' 역할을 하여 실제로 움직이게 만듭니다.

오늘날에는 웹 브라우저뿐만 아니라 서버(Node.js), 모바일 앱, 데스크톱 앱 개발에도 널리 쓰이는 가장 인기 있는 언어 중 하나입니다.

---

2. 웹에서 JS로 할 수 있는 일

자바스크립트가 없다면 우리는 인터넷에서 단순히 글자와 그림만 읽어야 했을 것입니다.

• 실시간 상호작용: 버튼을 눌렀을 때 팝업창이 뜨거나 메뉴가 슬라이드처럼 열립니다.
• 데이터 업데이트: 페이지 전체를 새로고침하지 않고도 새로운 댓글이나 날씨 정보를 가져옵니다.
• 시각적 효과: 애니메이션, 차트 그리기, 화려한 그래픽 효과를 구현합니다.
• 입력값 검증: 로그인할 때 아이디가 비어있거나 비밀번호가 짧으면 즉시 알려줍니다.

---

3. HTML에 JS 작성하는 방법

자바스크립트를 웹 문서에 넣는 방법은 크게 두 가지가 있습니다.

① 내부 스크립트 (Internal Script)

HTML 파일 안의 <script> 태그 사이에 직접 코드를 적습니다.

HTML

 

<script>
    console.log("반갑습니다! 자바스크립트입니다.");
</script>

② 외부 스크립트 (External Script)

별도의 .js 파일을 만들고 HTML에서 불러옵니다. (가장 권장되는 방식입니다.)

HTML

 

<script src="script.js"></script>

---

4. 웹브라우저가 JS를 해석하는 과정

우리가 작성한 영어 같은 코드를 컴퓨터는 바로 이해하지 못합니다. 브라우저 내부에는 이를 번역해주는 **'자바스크립트 엔진'**이 있습니다.

1. 로딩: 브라우저가 HTML을 읽다가 <script> 태그를 만나면 JS 파일을 불러옵니다.
2. 파싱: 엔진이 코드를 한 줄씩 읽으며 문법에 오류가 없는지 분석합니다.
3. 컴파일 & 실행: 코드를 컴퓨터가 이해할 수 있는 기계어로 빠르게 바꾼 뒤 실제 동작을 수행합니다.

---

5. JS 기본 용어 정리

자바스크립트를 공부할 때 매일 마주하게 될 핵심 단어들입니다.

• 값 (Value): 100, "안녕" 같이 우리가 다루는 데이터 그 자체입니다.
• 변수 (Variable): 값을 저장하는 상자입니다.
• 연산자 (Operator): +, -, * 처럼 값을 계산하거나 비교하는 도구입니다.
• 함수 (Function): 특정 작업을 수행하도록 미리 만들어둔 코드 묶음입니다.
• 문법 (Syntax): 자바스크립트가 알아들을 수 있게 코드를 작성하는 규칙입니다.

---

학습 정리

• 자바스크립트는 웹을 움직이게 만드는 동적 언어이다.
• 브라우저 내부의 **엔진(V8 등)**이 코드를 해석하고 실행한다.
• HTML 파일과 연결하여 사용하며, 주로 별도의 파일로 관리하는 것이 깔끔하다.

---

자바스크립트의 정체와 기본 구조를 완벽하게 파악하셨습니다!

---