반응형
.
💡 이번에 공부할 내용은 다음과 같습니다.
1. 자바스크립트의 기본 문법
2. 변수 선언과 데이터 타입
3. 함수 정의와 호출
4. 객체와 배열의 사용 방법
5. 자주 사용하는 내장 함수들
자바스크립트(Javascript) 기본 문법
자바스크립트는 웹 페이지를 동적으로 만들어주는 스크립팅 언어입니다. 웹 브라우저 내에서 다양한 기능을 실행할 수 있으며, 이벤트 처리, 데이터 저장, DOM 조작 등을 가능하게 해줍니다.
변수는 let, const 키워드를 사용하여 선언할 수 있으며, 데이터 타입은 동적으로 결정됩니다. 함수는 function 키워드로 정의할 수 있습니다.
객체와 배열은 데이터를 구조화하는 데 사용되며, 다양한 내장 메소드를 통해 관리할 수 있습니다.
이미 JS를 공부해 보신 분들은 Arrow Function, spread 구문, Optional Chaining 과 같이 모던 JS 문법이나 비동기 관련 문법에 대해서도 공부해보셔도 좋습니다. 특히, Arrow Function은 정말 많이 사용하기 때문에 도전 문제에서도 사용되었습니다.
1. 자바스크립트의 기본 문법
- 문장 종료: 일반적으로 세미콜론(;)으로 문장을 종료하지만, 필수는 아님.
- 주석:
- 한 줄 주석: //
- 여러 줄 주석: /* */
2. 변수 선언과 데이터 타입
변수 선언
- let: 값을 변경할 수 있는 변수.
- const: 값을 변경할 수 없는 상수.
- var: 오래된 방식으로, 가급적 사용하지 않음.
let age = 25; const name = "John";데이터 타입
- 기본형 (Primitive): string, number, boolean, null, undefined, symbol, bigint.
- 참조형 (Reference): object, array, function.
3. 함수 정의와 호출
함수 정의
- 일반 함수:
function greet(name) { return `Hello, ${name}`; }- 함수 표현식:
const greet = function(name) { return `Hello, ${name}`; };- 화살표 함수 (Arrow Function):
const greet = (name) => `Hello, ${name}`;함수 호출
console.log(greet("John")); // Hello, John4. 객체와 배열
객체 (Object)
- 키-값 쌍으로 데이터를 저장.
const person = { name: "Alice", age: 30, greet: function() { console.log(`Hi, I'm ${this.name}`); }, }; person.greet(); // Hi, I'm Alice배열 (Array)
- 순서가 있는 데이터 목록.
const fruits = ["apple", "banana", "cherry"]; console.log(fruits[0]); // apple5. 자주 사용하는 내장 함수
문자열 관련 함수
- toUpperCase(), toLowerCase(), includes(), slice().
let str = "Hello, World!"; console.log(str.toUpperCase()); // HELLO, WORLD!배열 관련 함수
- push(), pop(), map(), filter(), reduce().
const numbers = [1, 2, 3, 4]; const doubled = numbers.map((num) => num * 2); console.log(doubled); // [2, 4, 6, 8]객체 관련 함수
- Object.keys(), Object.values(), Object.entries().
수학 및 날짜
- Math: Math.random(), Math.max(), Math.min().
- Date: new Date().
6. 모던 자바스크립트
Spread Syntax:
const arr1 = [1, 2]; const arr2 = [...arr1, 3, 4]; console.log(arr2); // [1, 2, 3, 4]Optional Chaining:
const user = { profile: { name: "Alice" } }; console.log(user?.profile?.name); // Alice
<!DOCTYPE html>
<html>
<head>
<title>Roulette Game</title>
<script></script>
</head>
<body>
<div id="roulette">1</div>
<button id="stopButton">정지</button>
<script>
const values = [1, 2, 3, 4, 5, 6];
const rouletteDisplay = document.getElementById("roulette");
let intervalId = null;
let currentIndex = 0;
function startRoulette() {
intervalId = //interval 설정하기
}
document.getElementById("stopButton").addEventListener("click", () => {
clearInterval(intervalId);
alert("선택된 숫자: " + values[currentIndex]);
});
startRoulette();
</script>
</body>
</html>
✅ 다음과 같은 내용에 도전해봅시다.
1. var, let과 const의 차이점 이해하기
2. Arrow Function 이해하기
3. 룰렛 게임 완성하기
1. var, let, const의 차이점 이해
- var: 함수 스코프이며, 재할당 가능하고 재선언 가능. (ES6 이전 문법)
- let: 블록 스코프이며, 재할당 가능하지만 재선언 불가능.
- const: 블록 스코프이며, 재할당 불가능. 초기화 후 값 변경 불가능.
이러한 특징을 바탕으로 let과 const를 사용하면 코드 유지보수가 더 쉬워집니다.
ES6에서는 var 대신 let과 const를 사용하는 것이 권장됩니다.
2. Arrow Function (화살표 함수) 이해
- Arrow Function은 function 키워드 대신 => 기호를 사용하여 정의합니다.
- this 바인딩이 간결하며, 코드가 더 깔끔해집니다.
const sum = (a, b) => a + b; console.log(sum(2, 3)); // 53. 룰렛 게임 완성
이제 HTML, CSS, JavaScript를 활용하여 "룰렛 게임"을 완성하겠습니다.
완성된 코드:
<!DOCTYPE html>
<html>
<head>
<title>Roulette Game</title>
</head>
<body>
<div id="roulette" style="font-size: 48px; text-align: center; margin: 20px;">1</div>
<button id="stopButton" style="font-size: 20px;">정지</button>
<script>
const values = [1, 2, 3, 4, 5, 6]; // 룰렛에서 사용할 숫자 배열
const rouletteDisplay = document.getElementById("roulette"); // 숫자를 표시할 DOM 요소
let intervalId = null; // intervalId를 저장할 변수
let currentIndex = 0; // 현재 인덱스
// 룰렛을 시작하는 함수
const startRoulette = () => {
intervalId = setInterval(() => {
currentIndex = Math.floor(Math.random() * values.length); // 랜덤 인덱스 선택
rouletteDisplay.textContent = values[currentIndex]; // 숫자를 화면에 표시
}, 100); // 100밀리초마다 숫자 변경
};
// 정지 버튼 이벤트 리스너
document.getElementById("stopButton").addEventListener("click", () => {
clearInterval(intervalId); // 인터벌 정지
alert("선택된 숫자: " + values[currentIndex]); // 선택된 숫자 알림창
});
// Roulette 시작
startRoulette();
</script>
</body>
</html>1
코드 설명:
- 숫자 배열 정의:
- 룰렛에서 사용할 숫자 목록입니다.
-
javascript
const values = [1, 2, 3, 4, 5, 6];- startRoulette 함수:
- setInterval()을 통해 100ms마다 랜덤한 숫자를 선택합니다.
- Math.floor(Math.random() * values.length)를 통해 숫자를 랜덤하게 선택합니다.
- rouletteDisplay.textContent = values[currentIndex];를 통해 현재 숫자를 화면에 표시합니다.
-
javascript
const startRoulette = () => { intervalId = setInterval(() => { currentIndex = Math.floor(Math.random() * values.length); rouletteDisplay.textContent = values[currentIndex]; }, 100); };
- 정지 버튼 이벤트:
- 버튼 클릭 시 clearInterval(intervalId)로 인터벌을 정지합니다.
- 선택된 숫자를 alert로 표시합니다.
-
javascript
document.getElementById("stopButton").addEventListener("click", () => { clearInterval(intervalId); alert("선택된 숫자: " + values[currentIndex]); });- startRoulette 호출:
- 페이지 로딩 후 바로 룰렛이 시작됩니다.
-
javascript
startRoulette();코드 실행 흐름:
- 페이지가 로드되면 startRoulette 함수가 실행됩니다.
- setInterval이 100ms마다 랜덤 숫자를 화면에 표시합니다.
- 사용자가 "정지" 버튼을 클릭하면 clearInterval(intervalId)로 숫자 변경이 멈추고, 선택된 숫자가 화면에 표시됩니다.
반응형
'KnockOn > 2주차 TIL' 카테고리의 다른 글
| [2주차 TIL] KnockOn Bootcamp - PHP (1) | 2024.12.14 |
|---|---|
| [2주차 TIL] KnockOn Bootcamp - Mysql (0) | 2024.12.13 |
| [2주차 TIL] KnockOn Bootcamp - Apache (1) | 2024.12.13 |
| [2주차 TIL] KnockOn Bootcamp - HTML (0) | 2024.12.12 |
