필요한 사전 지식: 기본적인 컴퓨터 이해 능력, HTML과 CSS 기초.
목표:
• JavaScript가 무엇인지 이해하기
• JavaScript로 어떤 일을 할 수 있는지 알아보기
• JavaScript를 웹 사이트에 어떻게 적용하는지 알기
1. HTML: 웹 페이지의 구조를 만드는 언어.
2. CSS: 페이지의 스타일과 레이아웃을 담당하는 언어.JavaScript - 동적인 클라이언트 사이드 스크립트 언어
JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어다. 웹 페이지가 단순히 정적인 정보를 표시하는 걸 넘어서, 시의적절한 콘텐츠 업데이트, 대화형 지도, 애니메이션 2D/3D 그래픽, 스크롤링 비디오 주크박스 등을 표시할 때마다 JavaScript가 관련되어 있을 가능성이 높다.
그래서 어떤 일을 할 수 있나요?
JavaScript는 웹 페이지에서 실시간 콘텐츠 업데이트, 사용자 입력 처리, 애니메이션과 동적 그래픽, 데이터 시각화, 웹 API 통신, 그리고 간단한 게임 개발 등 다양한 기능을 구현하여 웹을 더 인터랙티브하고 매력적으로 만들어주는 언어다.
JavaScript의 가장 일반적인 용도는 DOM(Document Object Model) API를 통해 HTML과 CSS를 동적으로 수정하여 사용자 인터페이스를 업데이트하는 것이다. 웹 문서는 일반적으로 페이지에 표시되는 순서대로 로드되고 실행되며, JavaScript가 수정하려는 HTML과 CSS 코드보다 먼저 로드되어 실행되면 오류가 발생할 수 있다.
JavaScript 실행 순서
브라우저는 JavaScript 블록을 만나면 일반적으로 위에서 아래로 순서대로 실행한다. 따라서 코드 배치 순서에 주의를 기울여야 하며, HTML과 CSS가 먼저 로드된 후 JavaScript가 실행되도록 해야 한다.
웹 페이지에 JavaScript를 어떻게 넣나요?
JavaScript는 HTML 페이지에 CSS와 비슷한 방식으로 적용된다. CSS가 외부 스타일시트를 적용할 때 <link> 요소를, 내부 스타일을 적용할 때 <style> 요소를 사용하는 것처럼, JavaScript는 <script> 요소 하나만 있으면 HTML에 쉽게 추가할 수 있다.
<!-- 내부 JavaScript예제: -->
<script>
// JavaScript goes here
</script>외부 JavaScript
내부 JavaScript는 잘 동작했지만, JavaScript 코드를 외부 파일로 분리하고 싶다면, 간단하게 .js 파일을 만들고 HTML 파일에서 <script> 요소의 src 속성을 사용하면 된다. 예를 들어, script.js 파일을 만든 후 <script src="script.js"></script>로 연결하면 된다.
<!-- 외부 JavaScript예제: -->
<script src="script.js"></script>주석
JavaScript에서도 HTML 및 CSS와 마찬가지로 주석을 작성할 수 있다. 주석은 브라우저가 무시하기 때문에, 코드가 어떻게 작동하는지 설명하거나, 나중에 코드 유지보수를 쉽게 할 수 있도록 도와준다. 특히 규모가 큰 애플리케이션에서는 주석이 매우 유용하며, 코드 작성을 할 때 자주 활용하면 좋다. JavaScript 주석에는 두 가지 종류가 있다.
- 한 줄 주석: 이중 슬래시(//)를 앞에 붙여 작성한다.
// 이건 한 줄 주석- 여러 줄 주석: /와 / 사이에 작성한다.
/*
이건 여러 줄 주석
여러 줄로 작성할 수 있다.
*/요약
이제 JavaScript의 세계로 첫걸음을 뗐다. JavaScript를 왜 써야 하는지, 그리고 무엇을 할 수 있는지 이론을 통해 알아봤다.
아직은 JavaScript가 조금 낯설고 어렵게 느껴지지만, 차근차근 단계를 따라가면 전체적인 그림이 보일 거라고 생각한다. 다음 스터디에서는 실전으로 들어가서, 직접 JavaScript 예제를 만들어 보면서 좀 더 깊이 있게 공부해볼 계획이다.
참고 자료
[mozilla] MDN Web Docs - JavaScript 시작하기
Github 정리내용
