[1일차]JavaScript란 무엇인가? 웹 페이지의 마법 같은 기능을 만드는 첫걸음
목차:
- JavaScript란 무엇인가?
- JavaScript의 역할과 활용 분야
- JavaScript의 장점과 한계
- 브라우저에서 JavaScript 실행해 보기 (간단한 예제)
- 다음 수업을 위한 준비
1. JavaScript란 무엇인가?
JavaScript는 웹 브라우저에서 실행되는 대표적인 프로그래밍 언어로, HTML과 CSS와 함께 웹 개발의 3대 축을 이룹니다. HTML은 웹 페이지의 구조를, CSS는 디자인을 담당한다면, JavaScript는 웹 페이지에 상호작용을 추가합니다. 사용자와의 상호작용을 통해 웹 페이지를 동적으로 만들 수 있어, 버튼 클릭, 데이터 입력, 애니메이션 효과 등 다양한 기능을 구현할 수 있습니다.
2. JavaScript의 역할과 활용 분야
JavaScript는 웹 페이지의 동적인 요소를 다룰 뿐만 아니라, 서버 개발, 게임 개발, 모바일 앱 개발 등 여러 분야에서 널리 사용됩니다. 최근에는 Node.js와 같은 프레임워크 덕분에 서버 측에서도 활용되고, React, Vue, Angular와 같은 프론트엔드 라이브러리나 프레임워크와 결합되어 현대적인 웹 애플리케이션을 만드는 데 사용됩니다.
3. JavaScript의 장점과 한계
- 장점:
- 브라우저에 내장: 모든 최신 브라우저에서 별도 설치 없이 바로 사용할 수 있습니다.
- 즉각적인 실행: 작성한 코드를 즉시 실행하고 결과를 확인할 수 있습니다.
- 다양한 라이브러리와 프레임워크: 개발 시간을 단축시켜주는 다양한 도구와 프레임워크가 있습니다.
- 한계:
- 보안성: JavaScript는 사용자의 브라우저에서 실행되기 때문에 민감한 정보 처리는 제한적입니다.
- 브라우저별 차이: 일부 기능은 브라우저마다 동작이 다를 수 있습니다.
4. 브라우저에서 JavaScript 실행해 보기 (간단한 예제)
웹 페이지에서 JavaScript를 바로 실행해 볼 수 있는 브라우저 콘솔을 활용하여 간단한 코드를 실행해 보겠습니다.
1) 콘솔 열기:
- Chrome 기준: Ctrl + Shift + J (또는 Cmd + Option + J for Mac)
- Firefox 기준: Ctrl + Shift + K (또는 Cmd + Option + K for Mac)
2) 코드 실행하기: 콘솔 창에 아래 코드를 입력해 보세요.
console.log("Hello, JavaScript World!");
이 코드는 console.log라는 명령어로 콘솔에 텍스트를 출력합니다. 이 예제를 통해 브라우저에서 JavaScript 코드를 실행하는 방법을 쉽게 경험할 수 있습니다.
(경고)
Copy & Paste (복사, 붙여넣기) 하면 경고가 나타납니다. 간단하게 해석하면, 이해하지 못하는 스크립트 코드를 복사 & 붙여넣기 하지 마라, 당신의 컴퓨터 해킹 당할 수 있다.
아래의 경고처럼 자바스크립트 테스트할 때 항상 조심해서 이용하시길 추천드립니다.
위의 내용을 이해했고, 복사&붙여넣기 기능을 사용하려고 한다면, allow pasting 입력한 후 엔터를 눌러 허용합니다.
그리고 테스트하려는 코드를 복사&붙여넣기 해서 실행할 수 있습니다.
3) 간단한 계산기 만들기: 이번엔 간단한 산술 연산을 시도해 보겠습니다.
let a = 10;
let b = 5;
console.log("a + b =", a + b); // 더하기
console.log("a - b =", a - b); // 빼기
console.log("a * b =", a * b); // 곱하기
console.log("a / b =", a / b); // 나누기
이 코드를 입력해 보면, a + b와 같은 산술 연산 결과가 콘솔에 표시됩니다. 이 간단한 예제를 통해 변수 선언과 기본 연산이 어떻게 이루어지는지 알 수 있습니다.
5. 다음 수업을 위한 준비
오늘은 JavaScript가 무엇인지, 어떤 역할을 하는지, 그리고 간단히 코드를 작성하고 실행해 보는 시간을 가졌습니다.
다음 내용은 개발 환경 설정과 함께 JavaScript의 기본 문법을 조금 더 깊이 배워보겠습니다.