- Published on
[3] 기초 웹 입문 가이드: JS 기초
- Authors
- Name
- Gecko Baem
자바스크립트(JavaScript) 란?
동적인 웹사이트를 구현하기 위해 만들어진 JavaScript는 현재 웹을 개발하는 과정에서 단순 동적임을 부여할 뿐만 아닌, 프레임워크나 라이브러리를 사용하거나, 백엔드 분야에서도 사용이 가능한 만큼 필연적인 존재가 되었다. 이러한 JavaScript는 웹 개발이 아니더라도 사용할 수 있는 범위가 매우 넓기에, 학습만 한다면 더욱 더 효율적으로 작업을 진행할 수 있을 것 이다.
본 문서에서는 JavaScript의 기초를 위주로 다룬다.
자바스크립트 시작하기:
HTML 기본 지식: 자바스크립트는 HTML 문서 내에서 작동하므로 기본적인 HTML 구조를 이해해야 한다. HTML은 웹 페이지의 뼈대를 구성하며, 자바스크립트는 이 뼈대에 살을 붙이는 역할을 한다.
자바스크립트 작성: 자바스크립트 코드는
<script>
태그 안에 작성한다. 이 태그는 HTML 문서의<head>
또는<body>
안에 위치할 수 있다.
<script>
// 자바스크립트 코드 작성
</script>
- 기본 문법: 자바스크립트는 변수, 데이터 유형, 연산자, 조건문, 반복문, 함수 등 다양한 문법 요소를 가지고 있다. 몇 가지 기본적인 예시를 살펴보자.
// 변수 선언 및 값 할당
let message = "Hello, JavaScript!";
// 콘솔에 메시지 출력
console.log(message);
// 함수 정의 및 호출
function greet(name) {
console.log("안녕하세요, " + name + "님!");
}
greet("홍길동");
- 웹 페이지 조작: 자바스크립트는
document
객체를 통해 웹 페이지의 요소를 선택하고 조작할 수 있다. 예를 들어, 특정 ID를 가진 요소의 내용을 변경하거나 스타일을 수정할 수 있다.
// ID가 "myHeading"인 요소 선택
let heading = document.getElementById("myHeading");
// 요소의 내용 변경
heading.textContent = "새로운 제목";
// 요소의 스타일 변경
heading.style.color = "blue";
- 이벤트 처리: 자바스크립트는 버튼 클릭, 마우스 이동, 키보드 입력 등 다양한 이벤트에 반응하여 동작할 수 있다. 이벤트 리스너를 사용하여 특정 이벤트 발생 시 실행될 함수를 등록할 수 있다.
// ID가 "myButton"인 버튼에 클릭 이벤트 리스너 등록
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
더 많은 학습 자료:
- 모던 JavaScript 튜토리얼: https://ko.javascript.info/
- JavaScript - MDN Web Docs: https://developer.mozilla.org/ko/docs/Web/JavaScript
- TCP School: https://tcpschool.com/javascript/intro