자바스크립트는 웹 페이지를 동적으로 만들어주는 스크립팅 언어이다. 웹 브라우저 내에서 다양한 기능을 실행할 수 있으며, 이벤트 처리, 데이터 저장, DOM 조작 등을 가능하게 한다.
자바스크립트의 기본 문법
자바스크립트는 웹 개발에서 많이 사용되는 프로그래밍 언어로, HTML과 CSS와 함께 웹 페이지를 동적으로 만들어준다. 기본 문법은 다음과 같다:
alert('Hello'); alert('World');1. 여러 개의 구문은 세미콜론을 기준으로 구분한다.
// 주석
/*
여
러
줄
주
석
*/2. //로 한 줄 주석을, /* */로 여러 줄 주석을 작성한다.
3. 대소문자 구분 : 변수명과 함수명에서 대소문자를 구분합니다.
변수 선언과 데이터 타입
자바스크립트에서는 변수 선언에 var, let, const를 사용한다. 각각의 차이는 다음과 같다:
- var: 함수 스코프(함수 내부의 어디서든 참조가 가능하지만, 외부로는 참조가 불가능. 함수 외부에서 var 가 선언 되었다면 전역변수로 간주), 재선언 가능.
- let: 블록 스코프(블록 내부에서 선언된 let , const 변수는 외부에서 참조되지 않음), 재선언 불가.
- const: 블록 스코프, 상수로 선언.
var, let, const의 차이
var 에서는 중복 선언과 재할당이 모두 가능하다. 마지막에 할당된 값이 최종으로 변수의 값으로 저장된다.
let 에서는 중복 선언을 허용하지 않는다. 중복 선언을 할 경우 SyntaxError 가 발생하게 된다. 재할당은 var 와 동일하게 가능하다.
const 는 상수를 선언하는 키워드이기 때문에 선언과 초기화를 하고 나면 다른 값을 재할당 할 수 없다
기본 데이터 타입은 다음과 같다:
- 숫자(Number): 정수와 실수.
- 문자열(String): 문자열 데이터.
- 불리언(Boolean): true 또는 false.
- null: 명시적으로 "비어 있음"을 나타냄.
- undefined: 값이 할당되지 않은 상태.
- 객체(Object): 키-값 쌍으로 이루어진 데이터 구조.
- 배열(Array): 순서가 있는 데이터의 리스트.
함수 정의와 호출
함수 선언식
function func_name(매개변수) {
// 실행할 코드
}
함수 표현식
const func_name = function(매개변수) {
// 실행할 코드
};
화살표 함수
function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언
const func_name = (매개변수) => {
// 실행할 코드
};
함수 호출
func_name(1) // 화면에 아무 것도 출력되지 않음
console.log(func_name(1)) // 화면에 2가 출력됨
그냥 함수 이름만 호출하는 것과 달리 console.log(func_name(1))은 console.log 안에서 받고 있기 때문에 함수의 결과가 화면에 출력된다.
객체와 배열의 사용 방법
객체: 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 키-값 쌍으로 데이터를 저장하는 구조이다.
const person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello");
}
};
배열: 여러 값을 순서대로 저장하는 데이터 구조.
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // "Apple"
자주 사용하는 내장 함수들
- 문자열 관련 함수:
- charAt() : 해당 인덱스 문자 반환
- toUpperCase() : 문자열을 대문자로 바꾸어 반환
- toLowerCase() : 문자열을 소문자로 바꾸어 반환
- split(separator, limit) : separator로 문자열을 자른 후 배열로 반환
- substr(start, count) : start부터 count까지 문자열을 잘라서 반환
- 배열 관련 함수:
- push() : 배열의 마지막에 새로운 요소 추가
- pop() : 배열의 마지막 요소를 제거 후 리턴
- map() : 기존의 배열에 특정 규칙을 적용해서 새로운 배열 생성
- filter() : 특정 조건을 만족하는 요소를 추출해 새로운 배열 생성
- reduce() : 배열의 요소가 하나가 될 때까지 요소를 왼쪽부터 두 개씩 묶는 함수 실행
- forEach() : 배열을 for in 반복문처럼 사용 가능
- 수학 관련 함수 (Math 객체):
- Math.random() : 0부터 1까지의 임의의 수 반환
- Math.floor() : 작거나 같은 가장 큰 정수 반환
- Math.ceil() : 크거나 같은 가장 작은 정수 반환
- Math.max() : 매개변수 중 가장 큰 값 반환
도전! 룰렛 게임 완성하기
<!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 = setInterval(() => {
currentIndex = (currentIndex + 1) % values.length; // 인덱스가 1~6 사이에서 순환
rouletteDisplay.textContent = values[currentIndex]; // 화면에 숫자 표시
}, 100);
}
document.getElementById("stopButton").addEventListener("click", () => {
clearInterval(intervalId);
alert("선택된 숫자: " + values[currentIndex]);
});
startRoulette();
</script>
</body>
</html>
참고
https://ko.javascript.info/javascript-specials
https://wickies.tistory.com/25
https://velog.io/@dongjun187/javascript-var-let-const-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
'KnockOn Bootcamp' 카테고리의 다른 글
| [2주차 TIL]KnockOn Bootcamp(MySQL 데이터베이스) (0) | 2024.08.13 |
|---|---|
| [2주차 TIL] KnockOn Bootcamp(아파치-Apache) (0) | 2024.08.11 |
| [2주차 TIL] KnockOn Bootcamp(HTML) (0) | 2024.08.08 |
| [1주차 TIL] KnockOn Bootcamp(HTML,CSS,JS) (0) | 2024.08.06 |
| [1주차 TIL] KnockOn Bootcamp(프록시,Proxy,VPN) (0) | 2024.08.06 |