JavaScript 기초: 두 판 사이의 차이

기술노트
편집 요약 없음
편집 요약 없음
 
1번째 줄: 1번째 줄:
= JavaScript 기초 =
= JavaScript 기초 =


'''JavaScript'''는 웹 페이지를 더욱 역동적이고 사용자 친화적으로 만들어주는 프로그래밍 언어입니다. 웹 브라우저에서 동작하며 최근에는 Node.js를 통해 서버에서도 사용됩니다.
'''JavaScript'''는 웹 페이지를 더욱 역동적이고 사용자 친화적으로 만들어주는 프로그래밍 언어이다.
주로 웹 브라우저에서 실행되며, 최근에는 '''Node.js'''를 통해 서버에서도 널리 사용되고 있다.


== JavaScript 개요 ==
== JavaScript 개요 ==


=== JavaScript의 역할 ===
=== JavaScript의 역할 ===
 
JavaScript는 다음과 같은 주요 역할을 수행한다:
JavaScript는 다음과 같은 중요한 역할을 합니다:
* '''동적인 기능 추가''': 버튼 클릭, 폼 전송 등 사용자 상호작용 처리
 
* '''비동기 통신''': 페이지 새로고침 없이 서버와 데이터 교환 (AJAX 등)
* '''동적인 기능 추가''': 버튼 클릭, 폼 전송 등 사용자와의 상호작용
* '''웹 애플리케이션 개발''': Gmail, Facebook 등 복잡한 웹 앱 구현
* '''비동기 통신''': 페이지 새로고침 없이 서버와 데이터를 주고받음
* '''웹 애플리케이션 개발''': Gmail, Facebook처럼 복잡한 기능 구현 가능


=== JavaScript 작성 및 실행 방법 ===
=== JavaScript 작성 및 실행 방법 ===
 
HTML 문서와 연결하는 방법은 다음과 같다:
JavaScript를 HTML과 연결하는 방법입니다:
# '''인라인 스크립트''': HTML 요소 내부에 직접 작성
 
# '''내부 스크립트''': `<script>` 태그 안에 작성
# '''인라인 스크립트''': HTML 요소 안에 직접 작성
# '''외부 스크립트''': 별도의 `.js` 파일로 작성 후 `<script src="...">`로 연결 (권장)
# '''내부 스크립트''': HTML 문서 안에서 <script> 태그로 작성
# '''외부 스크립트''': 별도의 파일로 작성하여 연결 (권장 방식)


== 변수와 데이터 타입 ==
== 변수와 데이터 타입 ==


=== 변수 선언 ===
=== 변수 선언 ===
 
변수는 데이터를 저장하는 공간이다:
변수는 데이터를 저장하는 공간입니다:
* '''var''': 구버전 방식, 스코프와 호이스팅 문제로 권장하지 않음
 
* '''var''': 예전 방식, 권장하지 않음
* '''let''': 변경 가능한 데이터를 저장할 때 사용
* '''let''': 변경 가능한 데이터를 저장할 때 사용
* '''const''': 변경되지 않는 데이터를 저장할 때 사용
* '''const''': 변경 불가능한 데이터를 저장할 때 사용


=== 기본 데이터 타입 ===
=== 기본 데이터 타입 ===
 
* '''String''' (문자열): 텍스트 데이터
* '''String'''(문자열): 텍스트 데이터 저장
* '''Number''' (숫자): 정수와 소수
* '''Number'''(숫자): 정수와 소수 저장
* '''Boolean''' (불리언): 참(`true`) 또는 거짓(`false`)
* '''Boolean'''(불리언): 참(true) 또는 거짓(false)
* '''Undefined''': 초기화되지 않은 변수의 타입
* '''Undefined''': 값이 정의되지 않음
* '''Null''': 의도적으로 '없음'을 명시
* '''Null''': 의도적으로 비워둠


=== 참조 데이터 타입 ===
=== 참조 데이터 타입 ===
 
* '''Object''' (객체): 키-값 쌍으로 다양한 데이터 저장
* '''Object'''(객체): 다양한 데이터를 키와 값으로 저장
* '''Array''' (배열): 순서가 있는 데이터 집합
* '''Array'''(배열): 여러 데이터를 순서대로 저장
* '''Function''' (함수): 특정 작업을 수행하는 코드 블록
* '''Function'''(함수): 특정 작업을 수행하는 코드 묶음


== 연산자 ==
== 연산자 ==


연산자는 데이터를 계산하거나 비교할 때 사용합니다:
* '''산술 연산자''': `+`, `-`, `*`, `/`, `%`
 
* '''비교 연산자''': `==`, `===`, `!=`, `!==`, `<`, `>`, `<=`, `>=`
* '''산술 연산자''': 더하기(+), 빼기(-), 곱하기(*), 나누기(/)
* '''논리 연산자''': `&&`(AND), `||`(OR), `!`(NOT)
* '''비교 연산자''': 값이 같은지(==, ===), 큰지 작은지(>, <)
* '''논리 연산자''': 둘 다 참(&&), 하나만 참(||), 참과 거짓을 바꿈(!)


== 조건문과 반복문 ==
== 조건문과 반복문 ==


프로그램의 흐름을 결정할 때 사용합니다:
* '''if 문''': 특정 조건이 참일 때 코드 실행
 
* '''switch 문''': 여러 경우 중 하나를 선택
* '''if 문''': 조건에 따라 코드 실행 여부 결정
* '''for 문''': 정해진 횟수만큼 반복
* '''switch 문''': 여러 조건 중 하나 선택할 때 사용
* '''while 문''': 조건이 참일 때 반복
* '''for 문''': 반복 작업을 할 때 사용
* '''while 문''': 조건이 참일 때 계속 반복


== 함수 ==
== 함수 ==


함수는 특정 작업을 반복해서 사용할 때 유용합니다:
함수는 특정 작업을 재사용할 수 있게 해준다:


* '''선언식''': 미리 정의된 함수
* '''선언식 함수''' (Function Declaration)
* '''표현식''': 변수에 할당된 함수
* '''표현식 함수''' (Function Expression)
* '''화살표 함수''': 간결하게 함수 표현 (ES6 방식)
* '''화살표 함수''' (Arrow Function, ES6)
 
== 객체와 배열 ==
 
=== 객체 ===
 
객체는 관련 데이터를 묶어서 관리하는 데 사용합니다:


예시:
```javascript
```javascript
let person = { name: "홍길동", age: 30 };
// 선언식
```
function greet() { console.log("Hello"); }
 
=== 배열 ===
 
배열은 여러 개의 데이터를 순서대로 저장합니다:
 
```javascript
let fruits = ["사과", "바나나", "오렌지"];
```
 
== DOM 조작 ==
 
DOM은 HTML 문서 구조를 의미하며, JavaScript로 요소를 선택하고 수정할 수 있습니다:
 
* '''요소 선택''': getElementById(), querySelector()
* '''요소 수정''': textContent, innerHTML
* '''이벤트 처리''': click, mouseover, submit 등 사용자 상호작용 처리
 
== 비동기 JavaScript ==
 
페이지를 새로고침하지 않고 서버와 데이터를 주고받는 방법입니다:
 
* '''콜백 함수''': 비동기 작업이 끝난 후 호출되는 함수
* '''Promise''': 콜백을 개선하여 비동기 작업을 관리
* '''async/await''': 비동기 작업을 더 쉽게 표현
 
== 모듈화 ==
 
코드를 작은 단위로 나누어 관리하기 편하게 만듭니다:
 
```javascript
// math.js
export function add(a, b) { return a + b; }
 
// app.js
import { add } from './math.js';
console.log(add(2, 3));
```
 
== 모범 사례와 디버깅 ==
 
코드를 더 깔끔하게 작성하고, 문제를 찾기 쉽게 합니다:
 
* '''모범 사례''': 의미 있는 변수 이름, 주석 사용, 중복 코드 피하기
* '''디버깅''': console.log(), 브라우저 개발자 도구 활용
 
== 추가 학습 자료 ==
 
더 깊이 있는 학습을 위한 자료입니다:
 
* [https://developer.mozilla.org/ko/docs/Web/JavaScript MDN JavaScript]
* [https://javascript.info JavaScript.info]
 
== 다음 학습 단계 ==


* [[HTML 기초]]
// 표현식
* [[CSS 기초]]
const greet = function() { console.log("Hello"); };
* [[JavaScript 프레임워크]]
* [[Node.js]]


[[분류:웹 개발]]
// 화살표 함수
[[분류:프론트엔드]]
const greet = () => console.log("Hello");
[[분류:JavaScript]]

2025년 4월 28일 (월) 13:50 기준 최신판

JavaScript 기초

JavaScript는 웹 페이지를 더욱 역동적이고 사용자 친화적으로 만들어주는 프로그래밍 언어이다. 주로 웹 브라우저에서 실행되며, 최근에는 Node.js를 통해 서버에서도 널리 사용되고 있다.

JavaScript 개요

JavaScript의 역할

JavaScript는 다음과 같은 주요 역할을 수행한다:

  • 동적인 기능 추가: 버튼 클릭, 폼 전송 등 사용자 상호작용 처리
  • 비동기 통신: 페이지 새로고침 없이 서버와 데이터 교환 (AJAX 등)
  • 웹 애플리케이션 개발: Gmail, Facebook 등 복잡한 웹 앱 구현

JavaScript 작성 및 실행 방법

HTML 문서와 연결하는 방법은 다음과 같다:

  1. 인라인 스크립트: HTML 요소 내부에 직접 작성
  2. 내부 스크립트: `<script>` 태그 안에 작성
  3. 외부 스크립트: 별도의 `.js` 파일로 작성 후 `<script src="...">`로 연결 (권장)

변수와 데이터 타입

변수 선언

변수는 데이터를 저장하는 공간이다:

  • var: 구버전 방식, 스코프와 호이스팅 문제로 권장하지 않음
  • let: 변경 가능한 데이터를 저장할 때 사용
  • const: 변경 불가능한 데이터를 저장할 때 사용

기본 데이터 타입

  • String (문자열): 텍스트 데이터
  • Number (숫자): 정수와 소수
  • Boolean (불리언): 참(`true`) 또는 거짓(`false`)
  • Undefined: 초기화되지 않은 변수의 타입
  • Null: 의도적으로 '없음'을 명시

참조 데이터 타입

  • Object (객체): 키-값 쌍으로 다양한 데이터 저장
  • Array (배열): 순서가 있는 데이터 집합
  • Function (함수): 특정 작업을 수행하는 코드 블록

연산자

  • 산술 연산자: `+`, `-`, `*`, `/`, `%`
  • 비교 연산자: `==`, `===`, `!=`, `!==`, `<`, `>`, `<=`, `>=`
  • 논리 연산자: `&&`(AND), `||`(OR), `!`(NOT)

조건문과 반복문

  • if 문: 특정 조건이 참일 때 코드 실행
  • switch 문: 여러 경우 중 하나를 선택
  • for 문: 정해진 횟수만큼 반복
  • while 문: 조건이 참일 때 반복

함수

함수는 특정 작업을 재사용할 수 있게 해준다:

  • 선언식 함수 (Function Declaration)
  • 표현식 함수 (Function Expression)
  • 화살표 함수 (Arrow Function, ES6)

예시: ```javascript // 선언식 function greet() { console.log("Hello"); }

// 표현식 const greet = function() { console.log("Hello"); };

// 화살표 함수 const greet = () => console.log("Hello");

원본 주소 "https://technote.wiki/index.php?title=JavaScript_기초&oldid=633"