web hacking(Knockon Bootcamp)

[2주차 TIL] KnockOn Bootcamp JavaScript

king-neo 2024. 12. 13. 14:28

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 밀리초씩 변하는 것을 보여준다.