JavaScript (자바스크립트)
• JavaScript는 웹페이지에 동적인 기능을 추가하는 프로그래밍 언어이다.
• 사용자의 입력이나 행동에 따라 화면이 변경되거나 기능이 실행되도록 만들 수 있다.
• 예를 들면:
> 버튼 클릭
> 메뉴 열기
> 로그인 검사
> 슬라이드 배너 이동
• 초기에는 웹 브라우저에서 동작하는 언어로 만들어졌지만, 현재는 서버(Node.js), 모바일 앱, 데스크탑 프로그램 개발에도 사용될 만큼 범용적인 언어로 발전하였다.
• Java와 문법적으로 비슷한 부분이 일부 존재하지만, 완전히 다른 프로그래밍 언어이다.
JavaScript의 역할
• JavaScript는 사용자의 행동에 따라 웹페이지가 동적으로 반응하도록 만든다.
> 버튼 클릭 시 팝업 열기
> 로그인 실패 메시지 출력
> 댓글 작성 후 화면 자동 갱신
> 이미지 슬라이드 자동 이동
• 비유하면:
> HTML → 웹페이지의 구조
> CSS → 웹페이지의 디자인
> JavaScript → 웹페이지의 움직임과 기능
JavaScript 기본 구조
• JavaScript를 사용하기 위해서는 보통 HTML 문서와 연결하여 사용한다.
• CSS처럼 외부 파일로 연결할 수도 있고, HTML 내부에서 직접 작성할 수도 있다.
외부 JavaScript 연결 (권장 방식)
• 별도의 .js 파일을 만든 뒤, <script> 태그를 사용하여 HTML 문서와 연결한다.
• 주로 <body> 태그 마지막 부분이나 <head> 내부에서 연결한다.
<script src="script.js"></script>
• 장점:
> 코드 관리가 편하다.
> 여러 페이지에서 재사용 가능하다.
> 유지보수가 쉽다.
내부 JavaScript 사용
• HTML 문서 내부의 <script> 태그 안에 직접 JavaScript 코드를 작성하는 방식이다.
<script>
alert("안녕하세요");
</script>
• 주로 간단한 테스트, 짧은 기능 구현 등에 사용된다.
변수(Variables)
• 변수는 데이터를 저장하기 위한 이름표가 붙은 저장 공간이다.
• JavaScript에서는 숫자, 문자열, HTML 요소, 함수 결과, 등 다양한 데이터를 변수에 저장할 수 있다.
• 데이터를 담아두는 상자라고 생각하면 이해하기 쉽다.
const와 let
• JavaScript에서는 주로 const와 let을 사용하여 변수를 선언한다.
const (상수)
• 한 번 값을 저장하면 이후 변경할 수 없는 변수이다.
const name = "형탁";
• 특징:
> 재할당 불가능
> 변경되지 않는 값 저장 시 사용
let (변수)
• 나중에 값을 변경할 수 있는 변수이다.
let count = 1;
count = 2;
• 특징:
> 값 변경 가능
> 반복되는 데이터 처리에 자주 사용
함수(Functions)
• 함수는 여러 개의 명령어를 하나로 묶어 이름을 붙인 재사용 가능한 기능이다.
• 같은 코드를 반복 작성하지 않고 필요할 때마다 호출하여 사용할 수 있다.
• 버튼 하나로 여러 작업을 실행하는 기능 묶음과 비슷하다.
// 함수의 기본 구조
function 함수이름(매개변수) {
......
}
// 예시
function hello() {
alert("안녕하세요!");
}
// 결과값
hello();
이벤트 리스너(Event Listener)
• 이벤트 리스너는 사용자의 행동(Event)을 감지하여 특정 함수를 실행시키는 기능이다.
• JavaScript가 HTML과 상호작용할 수 있게 만드는 핵심 기능 중 하나이다.
• 버튼 클릭, 키보드 입력, 마우스 이동 같은 행동을 감지할 수 있다.
이벤트 리스너 기본 구조
// 이벤스 리너스 기본 구조
요소.addEventListener('이벤트종류', 함수);
// 예시
button.addEventListener('click', hello);
// 의미
버튼을 클릭하면 hello 함수를 실행한다.
이벤트 리스너 핵심 개념
• 이벤트 리스너는 "사용자가 무엇을 하면, 어떤 기능을 실행할 것인가"를 연결하는 역활을 한다.
• 즉 사용자 행동(Event), 실행할 기능(Function)을 연결하는 구조라고 볼 수 있다.
JavaScript 주요 기능
• JavaScript는 웹페이지를 동적으로 동작하게 만드는 핵심 프로그래밍 언어이다.
• 대표적으로 이벤트 처리, 문서 제어(DOM), 서버 통신 기능을 수행할 수 있다.
• 사용자의 행동에 반응하고, 화면을 변경하며, 서버와 데이터를 주고받는 역할
이벤트 처리(Event Handling)
• 사용자의 행동(Event)에 반응하여 기능을 실행한다.
• 예를 들면:
> 버튼 클릭
> 키보드 입력
> 마우스 이동
> 스크롤
// 이벤트 처리 예시
button.addEventListener("click", hello);
// 의미
버튼을 클릭하면 hello 함수를 실행한다.문서 제어(DOM Control)
• JavaScript를 사용하여 HTML 요소를 읽고 수정하거나 생성 및 삭제할 수 있다.
• 화면 내용을 변경하거나 새로운 요소를 추가하고 기존 요소를 제거하는 작업이 가능하다.
// 문서 제어 예시
document.getElementById("title").innerText = "안녕하세요";
// 의미
id가 title인 요소를 찾아서 그 안의 글자를 "안녕하세요"로 변경해라
(HTML 요소의 내용을 변경한다.)
서버와 통신 (HTTP Communication)
• JavaScript는 백엔드 서버와 데이터를 주고받을 수 있다.
• 사용자가 요청한 데이터를 서버에 전달하거나, 서버에서 받은 응답 데이터를 화면에 출력할 수 있다.
• 대표적으로:
> 로그인 요청
> 게시글 조회
> 댓글 작성
> 실시간 데이터 갱신
등에 사용된다.
// 서버와 통신 예시
fetch("/users")
// 의미
서버에 사용자 데이터를 요청한다.