[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (8) | Javascript

2023.11.03 ~ 2023.11.04

 

Javascript 표준객체

 

javascript에 기본적으로 가지고 있는 내장 객체들을 말하며, 프로그래밍 하는데 기본적으로 필요한

도구들이 있다. String, Number, Array, Date, Math... 등

 

Data 객체

Javascrtip에서 매 순간 바뀌는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체이다.

 

Data 객체 -함수

Date.now()

Date.prototype getter 메소드 ( var date = new Date(); )

 

1. 'date.getFullYear()' : 현재 연도 출력

2. 'date.getDate()' : 현재 날짜 출력

3. 'date.getDay()' : 현재 요일 출력

4. 'date.getHours()' : 현재 시간 출력

5. 'date.getMinutes'() : 현재 분 출력

6. 'date.getSeconds()': 현재 초 출력

7. 'date.getTime()': 1970년 1월 1일 자정 기준으로부터 현재까지의 밀리초 출력

 

Math 객체

- 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 Javascript 표준 내장 객체

 

- 웹 브라우저마다 다른 결과를  얻을 가능성이 있기에 정확한 결과를 얻어야

  할 경우에는 Math 메소드를 사용하지 않는 것이 좋음

Math 객체 - 함수

 

1. Math.PI : 원주율 파이를 나타내는 상수이다.

2. Math.E : 자연 로그의 밑인 오일러 상수를 나타내는 상수이다.

3. Math.min() : 주어진 숫자 중에서 가장 작은 값을 반환한다.

4. Math.max() : 주어진 숫자 중에서 가장 큰 값을 반환한다.

5. Math.random() : 0 이상 1 미만의 난수(랜덤 숫자)를 반환한다.

6. Math.round() : 주어진 숫자를 가장 가까운 정수로 반올림한다.

7. Math.floor() : 주어진 숫자보다 작거나 같은 가장 큰 정수를 반환한다.

8. Math.ceil() : 주어진 숫자보다 크거나 같은 가장 작은 정수를 반환한다.

 

 

DOM ( Document Objexct Model )

 

https://chocobol.tistory.com/entry/Javascript-DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80 

[Javascript] DOM이란 무엇인가?

 

실습 1. 간단 계산기 만들기

    <span>값1: <input id="val1" type="text" /></span> <br />
    <span>값2: <input id="val2" type="text" /></span> <br />
    <span>연산자: <input id="op" type="text" /></span> <br />
    <span>결과: <input id="result" type="text" /></span> <br />

    <!-- 버튼누르면 res 함수 작동할거임 -->
    <button id="res" onclick="res()">계산</button>

 

<script>
      // HTML에 각 ID가 val,val2, op, result로 되있는 요소들 가져오기
      let val1 = document.getElementById("val1");
      let val2 = document.getElementById("val2");
      let op = document.getElementById("op");
      let result = document.getElementById("result");

      // 어떤 함수 작성할까?
      // 값1, 값2를 더하기, 결과는 값1과 값2 더하면 00값 출력하기
      // 값1, 값2를 빼기, 결과는 값1과 값2를 뺴면 00값 출력하기
      // 값1, 값2를 곱하기, 결과는 값1과 값2를 곱하면 00 값 출력하기
      // 값1, 값2를 나누기, 결과는 값1과 값2를 나누면 00 값 출력하기

      // 사용할 수 있는 언어 : 만약에 ~~라면 결과를 ~~ 출력하기 => (if,switch)

      function res() {
        // 위에 가져온 val1 요소확인하고 그값을 value1에 저장한다
        // 위에 가져온 val2 요소확인하고 그값을 value2에 저장한다
        let value1 = parseFloat(val1.value);
        let value2 = parseFloat(val2.value);
        // op(연산자)의 값이 +, -, *, / 뭐가 들어가는지 확인해야한다.
        switch (op.value) {
          case "+":
            result.value = value1 + value2;
            break;
          case "-":
            result.value = value1 - value2;
            break;
          case "*":
            result.value = value1 * value2;
            break;
          case "/":
            result.value = value1 / value2;
            break;
        }
      }
      function reset() {
        // 값을 입력한 후 각각의 값1(val), 값2(val2), 연산자(op), 결과(result)입력되있는 값을 초기화한다.
        val1.value = "";
        val2.value = "";
        op.value = "";
        result.value = "";
      }
    </script>

 

addEventListener

 

'addEventListener'는 DOM 요소에 이벤트 리스너를 추가하는 javascript 메소드이다.

이 메소드를 사용하면 특정 이벤트(클릭, 마우스 오버, 키보드 입력 등) 발생했을 때 실행할 함수를

등록할 수 있다.

 

element.addEventListener(event, function, options);

 

addEventLisener 이벤트의 종류

 

1. Click : 클릭
2. Mouse 계열

• Mouseover : 요소에 커서를 올렸을 때
• Mouseout :  마우스가 요소를 벗어날 때
• Mousedown : 마우스 버튼을 누르고 있는 상태
• Mouseup : 마우스 버튼을 떼는 순간

3. Focus : 포커스가 갔을 때

4. Bluer : 포커스가 벗어나는 순간.

 

Key 계열

• keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생
• Keydown : 키를 누르는 순간에만 발생
• Keyup : 키를 눌렀다가 떼는 순간

Load :  웹페이지에 필요한 모든 파일(html, css, js 등)의 다운로드가 완료되었을 때

Resize : 브라우저 창의 크기가 변경될 때

Scroll : 스크롤이 발생할 때

Unload : 링크를 타고 이동하거나, 브라우저를 닫을 때

Change : 폼 필드의 상태가 변경되었을 때