1. 자바 스크립트의 기본 문법
자바 스크립트는 한 행에 한 문장 사용하면 세미콜론(;)을 사용하지 않는다.
그러나 한 행에 여러 문자을 사용 시 세미콜론(;)으로 구분한다.
HTML 내부에 작성할 때 <script> 태그 안에서 작성한다.
2. 변수 선언과 데이터 타입
JavaScript의 변수 선언
- let - {} 블록 범위 함수(지역 변수)
- const - 값을 한번 할당하면 값을 바꿀 수 없는 상수 정의함
- var - 옛날에 썻던 변수 선언(전역 변수), 지금은 잘 안씀
JavaScript의 데이터 타입
- 기본 타입(Primitive Type)
숫자형, 문자열, Boolen(참/거짓), Null(비어있는 값), BigInt, Undefined(값 할당x), Symbol
- 참조 타입(Reference Type)
객체(Object) - 기본 타입을 제외한 모든 값을 취급, 배열이나 함수 등도 객체로 표현
3. 함수 정의와 호출
자바 스크립트에서 함수는 다른 객체처럼 속성 및 method(내장 함수)를 가질 수 있는 일급 객체이다.
함수는 객체이며, 코드를 재사용이 가능하여 중요하다.
함수 선언
function add(a, b) {
return a + b; // 명시적 함수 선언
}
const sub = function(a, b) {
return a - b; // 함수 표현식(함수 리터럴) 선언
};
const hello = () => {
return "hello"; // 함수 표현식 화살표 함수 선언
};
함수 호출
console.log(add(2,4));
console.log(sub(8.1));
console.log(hello());
4. 객체와 배열의 사용 방법
객체
객체는 변수인데 많은 값을 넣을 수 있다. C언어에서 약간 구조체 같은 느낌이다.
객체 안에 정보들을 key : value 형식 한 쌍이며 그 뒤에 오는 key : value는 쉼표(,)로 구분해야한다.
let user = {
name: "Minsu",
Age : 24,
Major : Computer Science
};
console.log(user.name); // Minsu
다음과 같이 객체를 사용한다. 객체 안에 들어있는 값들은 Property라고 한다.
Property을 추가할때 user.gender = "Male";과 같이 객체 이름.key = value; 형식으로 쓰면 된다.
삭제할때는 delete 키워드를 사용하여 삭제할 수 있다. ex) delete user.gender;
배열
- 배열 생성 - let Arr = [ 12, "Hello", true ]
- 배열 접근 - Arr[0] // 12
- 배열 요소 개수 확인 - Arr.length // 3
- 배열 뒷부분 요소 추가 - Arr.push(37) // Arr = [ 12, "Hello", true, 37]
5. 자주 사용하는 내장 함수(Method)들
내장 함수(Method)는 객체의 특성을 나타내는 함수이다. 객체 안에 속한 함수들을 Method라고 부른다.
Method의 형식은 다음과 같다.
const test = {
Hello: function(){
console.log("hello");
}
};
test.Hello(); //hello
내장함수
- alert() - 메시지 창 생성
- parseint() - 문자열을 정수로 변환
- parseFloat() - 문자열을 실수로 변환
- confirm() - 확인, 취소 버튼 메시지창 생성
- setTimeout() - 일정 시간 지난후 지정된 명령 호출
- setInterval() - 일정 시간마다 지정된 명령 반복 호출
- clearInterval() - setInverval 함수의 반복을 중단한다.
- console.log() - 콘솔에 메시지 출력
배열 Method
const numbers = [ 1, 2, 3, 4, 5]; 선언했다고 하자.
- const evenNumber = numbers.find(function(number) { return number & 2 == 0;}); 주어진 조건의 만족하는 첫번째 요소 찾아 반환해준다.
- const FilterNumbers = numbers.filter(element => element > 3); // FilterNumbers = [4, 5] 특정 조건을 만족하는 모든 요소 추출하여 새로운 배열 생성
- numbers.join(구분자) - 배열의 모든 요소를 하나의 문자열로 만든다. 구분자는 문자열로 배열의 각 요소 사이 넣어준다. ex) numbers.join(" /") // "1 /2 /3 /4 /5"
- const divnumbers = numbers.map( sum => sum / 2); // divnumbers = [ 0.2, 0.4, 0.6, 0.8, 1] 배열 안에 요소를 하나하나 새로운 배열로 반환한다.
- numbers.forEach(num => console.log(num*2)); // 2,4,6,8,10 각 요소에 대해 함수 실행
날짜 Method
- getDate() - 날짜 일을
- getDay() - 날짜 요일
- getFullYear() - 날짜 연도
- getMonth() - 날짜 월
예제
// 다음을 이해해 봅시다.
let message = "Hello, World!";
const pi = 3.14;
let isActive = true;
let user = {
name: "Hong Gil-dong",
age: 25
};
let colors = ["red", "green", "blue"];
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Anna");
let의 변수 선언, const의 상수 선언, user로 객체 선언, colors 배열 선언, greet 함수 선언 및 호출을 보여준다.
// 다음을 이해해 봅시다.
let student = {
name: "Kim Yoon-sung",
major: "Computer Science",
getIntroduction: function() {
console.log("My name is " + this.name + " and I study " + this.major + ".");
}
};
student.getIntroduction();
let numbers = [1, 2, 3, 4, 5];
numbers.push(6);
console.log(numbers);
객체 안에 내장 함수가 있는 것을 확인되며 this 키워드는 참조 변수로 name, major 값을 불러들이고 있다.
numbers은 push을 이용하여 6 요소를 추가하였다.
// 다양한 내장함수를 이해해봅시다.
setTimeout(function() {
console.log("3초가 지났어요!");
}, 3000);
let count = 0;
let intervalId = setInterval(function() {
count++;
console.log(count + "초마다 메시지가 출력됩니다.");
if (count >= 5) {
clearInterval(intervalId);
}
}, 1000);
let fruits = ["apple", "banana", "cherry"];
fruits.forEach(function(fruit) {
console.log(fruit);
});
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
setTimeout로 3초 뒤 "3초 지났어요" 문자열 출력한다.
setInterval은 1초마다 함수를 반복하는데 if 조건으로 clearInterval로 count = 5이상일때 멈춘다.
forEach는 fruits의 배열의 각 요소를 다 console.log로 호출된다.
map은 doubledNumbers에 number 배열 각 요소 2을 곱한 새로운 요소를 넣는다.
filter은 짝수가 되는 수를 evenNumbers에 요소를 넣는다.
도전
1. var, let과 const의 차이점 이해하기
var | let | const | |
스코프 | 전역 | 블록(지역) | 블록(지역) |
중복선언 | 가능 | 불가능 | 불가능 |
재할당 | 가능 | 가능 | 불가능 |
2. Arrow Function 이해하기
화살표 함수는 함수를 간결하게 작성하게 하는 기능이다.
기본 함수구조
3. 룰렛 게임 완성하기
<!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;
rouletteDisplay.textContent = values[currentIndex];
}, 200);
}
document.getElementById("stopButton").addEventListener("click", () => {
clearInterval(intervalId);
alert("선택된 숫자: " + values[currentIndex]);
});
startRoulette();
</script>
</body>
</html>
currentIndex가 1씩 증가하면서 value의 요소 길이만큼 안넘어가게 설정하였다.
그리고 textContent로 values의 값이 200 밀리초씩 변하는 것을 보여준다.
'web hacking(Knockon Bootcamp)' 카테고리의 다른 글
[2주차 TIL] KnockOn Bootcamp MYSQL (1) | 2024.12.16 |
---|---|
[2주차 TIL] KnockOn Bootcamp Apache (0) | 2024.12.15 |
[2주차 TIL] KnockOn Bootcamp HTML 기본 태그 (3) | 2024.12.11 |
[1주차 TIL] KnockOn Bootcamp HTML, CSS, JS (2) | 2024.12.08 |
[1주차 TIL] KnockOn Bootcamp, 프록시(Proxy) (1) | 2024.12.08 |