자바스크립트 소개: JS의 역할과 기본 문법
지금까지 배웠던 html과 css 까지만 해도 어느정도 웹개발에 절반은 발을 들였다 볼 수 있는데요. 이제부터는 웹개발의 꽃 자바스크립트에 대해서 강의를 진행해 볼 생각입니다!
자바스크립트(JavaScript, JS)는 웹 페이지에 동적인 요소를 추가하고 사용자와의 상호작용을 가능하게 하는 프로그래밍 언어입니다. 이 강의에서는 자바스크립트의 기본적인 역할과 문법에 대해 배워보겠습니다.
자바스크립트의 역할
자바스크립트는 웹 페이지를 더 동적이고 상호작용적으로 만듭니다. 예를 들어, 페이지의 요소를 실시간으로 변경하거나, 사용자의 행동에 반응하며, 데이터를 서버와 주고받는 것이 가능합니다.
기본적인 사용 예
- 웹 페이지의 HTML 요소를 조작합니다.
- 사용자 이벤트(클릭, 입력, 마우스 오버 등)에 반응합니다.
- 웹 폼의 유효성을 검사합니다.
- 웹 서버로부터 데이터를 받아와 화면에 표시합니다.
기본 문법과 구조
자바스크립트의 기본 문법은 다른 프로그래밍 언어와 유사한 요소를 많이 가지고 있습니다.
변수 선언
let message = "안녕하세요!";
const PI = 3.14;변수는 데이터를 저장하는데 사용되며, var, let, const 키워드로 선언됩니다.
함수 정의
function greet(name) {
return "안녕하세요, " + name;
}함수는 일련의 작업을 수행하는 코드 블록으로, function 키워드로 정의됩니다.
조건문과 반복문
if (score > 80) {
console.log("합격!");
} else {
console.log("불합격!");
}
for (let i = 0; i < 5; i++) {
console.log(i);
}조건문과 반복문은 코드의 흐름을 제어하는데 사용됩니다.
이벤트 핸들링
document.getElementById("myButton").onclick = function() {
alert("클릭되었습니다!");
};이벤트 핸들러를 사용하여 사용자의 행동에 반응할 수 있습니다.
실습 예제
간단한 자바스크립트 예제를 통해 기본적인 기능을 살펴보겠습니다.
HTML:
<button id="myButton">클릭하세요</button>자바스크립트:
document.getElementById("myButton").onclick = function() {
alert("버튼이 클릭되었습니다!");
};배열과 객체
자바스크립트에서 배열과 객체는 데이터를 저장하고 관리하는 데 핵심적인 역할을 합니다.
배열
let fruits = ["사과", "바나나", "체리"];
console.log(fruits[0]); // "사과"객체
let person = {
name: "홍길동",
age: 25
};
console.log(person.name); // "홍길동"ES6+의 새로운 기능들
ES6 이후의 자바스크립트는 많은 새로운 기능을 도입했습니다. 예를 들어, 화살표 함수, 클래스, 모듈 등이 있습니다.
화살표 함수
const add = (a, b) => a + b;
console.log(add(3, 4)); // 7클래스
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
let dog = new Animal('Dog');
dog.speak(); // "Dog makes a noise."비동기 처리
자바스크립트에서는 비동기 처리가 중요한 부분을 차지합니다. Promise와 async/await는 비동기 작업을 쉽게 처리할 수 있는 방법을 제공합니다.
Promise
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve("완료!"), 1000);
});
promise.then(
result => console.log(result), // "완료!"
error => console.log(error)
);async/await
async function asyncFunc() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000)
});
let result = await promise;
console.log(result); // "완료!"
}
asyncFunc();실습 예제 확장
기존의 버튼 클릭 예제에 배열과 객체를 활용해 봅시다.
html:
<button id="myButton">클릭하세요</button>
<p id="displayText">여기에 텍스트가 표시됩니다.</p>
javascript:
let messages = ["안녕하세요!", "환영합니다!", "자바스크립트를 배워봅시다!"];
document.getElementById("myButton").onclick = function() {
let randomIndex = Math.floor(Math.random() * messages.length);
document.getElementById("displayText").innerHTML = messages[randomIndex];
};이 예제는 버튼을 클릭할 때마다 랜덤한 메시지를 화면에 표시합니다.
결론
자바스크립트는 웹 페이지를 동적이고 상호작용적으로 만드는 강력한 언어입니다. 이번 강의에서는 간략하게 맛보기로만 진행을 했습니다. 이런 것이 있다 정도로만 생각하시는 것이 좋을 것 같습니다. 다음 시간부터는 기본 문법부터 시작하여 점차 고급 기능을 학습함으로써 효과적인 웹 페이지를 구현할 수 있게 될 것입니다! 자바스크립트의 세계는 끝이 없으며, 응용과 활용에 따라서 정말 획기적인 효과를 연출하거나 만들어낼 수 있으므로 꼭 열심히 공부해두셔야 합니다!
댓글