자바 스크립트

자바스크립트의 역사와 발전

자바스크립트는 1995년 넷스케이프 커뮤니케이션즈의 브렌던 아이크에 의해 개발된 스크립팅 언어입니다. 처음에는 LiveScript라는 이름으로 불렸지만, 당시 인기 있던 자바와의 유사성을 강조하기 위해 자바스크트라는 이름으로 바뀌었습니다.

초기: 웹 페이지에 동적인 요소를 추가하기 위한 간단한 언어로 시작되었습니다.
성장: ECMAScript 표준화를 통해 체계적인 발전을 이루었고, Node.js의 등장으로 서버 사이드 개발까지 영역을 확장했습니다.
현재: 웹 개발의 필수 언어로 자리 잡았으며, 프론트엔드뿐만 아니라 백엔드, 모바일 앱 개발 등 다양한 분야에서 사용되고 있습니다.

웹 브라우저에서의 역할

자바스크립트는 웹 브라우저에서 실행되는 유일한 프로그래밍 언어입니다. HTML과 CSS로 구성된 정적인 웹 페이지에 동적인 기능을 부여하여 사용자와 상호 작용하는 풍부한 웹 애플리케이션을 개발할 수 있도록 합니다.

DOM 조작: HTML 문서의 구조를 변경하고 스타일을 조작하여 웹 페이지의 모습을 실시간으로 바꿀 수 있습니다.
이벤트 처리: 사용자의 클릭, 마우스 이동 등 다양한 이벤트를 감지하고, 이에 대한 반응을 처리할 수 있습니다.
비동기 처리: 서버와의 통신, 타임아웃 등 비동기적인 작업을 처리하여 웹 페이지의 응답성을 높일 수 있습니다.

HTML 문서에 스크립트 포함하는 방법

HTML 문서에 자바스크립트 코드를 포함시키려면 <script> 태그를 사용합니다. 이 태그를 통해 웹 페이지에 동적인 기능을 부여하고 사용자와 상호 작용할 수 있는 풍부한 웹 애플리케이션을 개발할 수 있습니다.

<script> 태그는 크게 세 가지 방식으로 사용할 수 있습니다.

인라인 스크립트 (Inline Script)

HTML 문서 내에 직접 자바스크립트 코드를 작성하는 방법입니다. 간단한 코드를 추가할 때 유용하지만, 코드가 길어지거나 복잡해질 경우 가독성이 떨어지고 유지보수가 어려워질 수 있습니다.

<body>
  <p>클릭하면 색깔이 바뀝니다.</p>
  <button onclick="changeColor()">색깔 변경</button>

  <script>
    function changeColor() {
      document.body.style.backgroundColor = 'skyblue';
    }
  </script>
</body>

내부 스크립트 (Internal Script)

<head> 또는 <body> 태그 내에 <script> 태그를 이용하여 자바스크립트 코드를 삽입하는 방법입니다. 인라인 스크립트보다는 코드를 관리하기 쉽지만, 여전히 HTML 문서와 자바스크립트 코드가 섞여 있어 가독성이 떨어질 수 있습니다.

<head>
  <script>
    // 전역 변수나 함수를 선언하는 경우에 유용합니다.
  </script>
</head>

<body>
</body>

외부 스크립트 (External Script)

자바스크립트 코드를 별도의 .js 파일로 만들어 src 속성을 이용하여 HTML 문서에 연결하는 방법입니다. 코드의 재사용성이 높고, HTML과 자바스크립트 코드를 분리하여 관리할 수 있어 가독성과 유지보수성이 뛰어납니다.

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

function changeColor() {
  document.body.style.backgroundColor = 'skyblue';
}

일반적으로 외부 스크립트 방식을 사용하는 것이 권장됩니다. 코드를 분리하여 관리하면 HTML과 자바스크립트 코드를 각각 집중해서 개발할 수 있으며, 코드의 재사용성을 높일 수 있습니다.

script 태그

<script> 태그는 <head> 또는 <body> 태그 내 어디든 위치할 수 있지만, 일반적으로 <body> 태그 바로 앞에 위치시키는 것이 좋습니다.
defer 속성을 사용하면 스크립트가 HTML 파싱이 완료된 후에 실행됩니다.
async 속성을 사용하면 스크립트가 다른 작업과 병렬로 실행됩니다.

자바스크립트 기본 문법

2.3 제어문 조건문 (if, else if, else) 반복문 (for, while, do while) 2.4 함수 함수 선언과 호출 매개변수와 반환값 화살표 함수 3. 객체지향 프로그래밍 3.1 객체와 프로토타입 객체 생성 프로퍼티와 메소드 프로토타입 체인 3.2 생성자 함수와 클래스 생성자 함수 작성 클래스 문법 상속 3.3 this 키워드 this의 의미와 활용 함수 호출 방식에 따른 this의 값 4. DOM 조작 4.1 DOM 소개 DOM 트리 노드 종류 4.2 DOM 선택 getElementById querySelector querySelectorAll 4.3 DOM 조작 요소 추가, 삭제, 수정 스타일 변경 이벤트 처리 5. 비동기 프로그래밍 5.1 비동기의 필요성 동기와 비동기의 차이 5.2 콜백 함수 콜백 함수의 개념 콜백 지옥 5.3 Promise Promise 생성과 처리 then, catch, finally 5.4 async/await 비동기 코드 동기화 await 키워드 6. 고급 자바스크립트 6.1 모듈 모듈 시스템 (CommonJS, ES Modules) import, export 6.2 클로저 클로저의 개념과 활용 6.3 고차 함수 map, filter, reduce 등 6.4 디자인 패턴 자주 사용되는 디자인 패턴 소개 7. 실전 예제 7.1 웹 페이지 동적 구성 AJAX를 이용한 데이터 가져오기 웹 페이지 요소 동적으로 변경 7.2 간단한 웹 애플리케이션 만들기 To-Do List 만들기 간단한 게임 만들기

5.5 KiB Raw Blame History

자바 스크립트