4.1 KiB
자바 스크립트
자바스크립트의 역사와 발전
자바스크립트는 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 속성을 사용하면 스크립트가 다른 작업과 병렬로 실행됩니다.