# 2. JavaScript 2일차(230920) [국비교육]

brand_mins·2023년 9월 20일

목록 보기

2/11

1. 함수

반복되는 코드를 미리 기술하고 필요할때 호출하는 기능
함수를 정의할때 다음과 같은 구문 사용

function functionName(parameter1, parameter2,...) {
  // 함수 내부에서 실행될 코드
  // return 반환할 값
}

function: 함수를 정의할때 사용하는 키워드
functionName: 함수 이름은 여러 함수를 구분하기 위함
parameter: 매개변수. 함수 내에서 사용할 변수에 해당. 함수 호출시 소괄호 안에 매개변수값을 넣어 호출
{} 는 실제로 실행되는 코드부분
정의한 함수를 호출하려면 함수 이름을 사용하고 필요한 인수를 전달.
함수 호출시 매개변수에 담을 데이터: 인자(인수)

const result = functionName(arg1, arg2,...);

(1) 간단한 함수 예시

function add(a, b) {
	return a+b;
}

const sum = add(2,3); // 함수 호출
console.log(sum); // 5 출력

함수를 변수에 할당하여 사용 가능하다.

var sum = add;
// 변수를 통해 함수 실행
var result = sum(3,5);

(2) 자바스크립트 예제

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      // 매개변수와 리턴값이 없는 함수 구현
      function hi() {
        document.write("안녕<br>");
      }
      hi();
      hi();
      hi();

      // myTop, myTable
      function myTable() {
        document.write(
          "<table bgcolor='yellow' width = '100%' height=400px border=1><tr><td></td></tr></table>"
        );
      }

      function myTop() {
        document.write("<a href='#'>top</a>");
      }
      myTable();
      myTop();
      myTable();
      myTop();
      myTable();
      myTop();
    </script>
  </head>
  <body></body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      /*
      1. 매개변수로 받은 문자열을 출력하는 함수를 만들어보자.
      2. 문자열과 숫자를 입력받아서 해당 문자열을 숫자만큼 반복해서 화면에 출력
      3. 리턴값이 있는 함수 구현
    */

      function myPrint(str) {
        document.write(str, "<br>");
      }
      myPrint("안녕");
      myPrint("방가워");
      myPrint("또봐");

      function msgCount(msg, count) {
        for (var i = 0; i < count; i++) {
          document.write(msg + "<br>");
        }
      }
      msgCount("hi~", 4);

      // 500원짜리랑 100원짜리 개수를 입력받아 금액을 리턴해주는 메소드
      function calChange(change100, change500) {
        var rValue = change100 + change500;
        return rValue;
      }
      document.write(calChange(5, 2));
    </script>
  </head>
  <body></body>
</html>

2. 문자열로 구구단 표현

+ 필기 +
${} 문법은 템플릿 리터럴이라고 하며 특별한 문자열 표기하는 방법.
변수를 가지고 새로운 문자열 자료형을 만들때 사용함.
예) ${1+2}sms 1 + 2 결과인 3으로 대체

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      var str = "";
      var count = 0;
      str += "<table border=1>";
      for (let i = 0; i < 5; i++) {
        str += "<tr>";
        for (let j = 0; j < 5; j++) {
          str += "<td>";
          str += count++;
          str += "</td>";
        }
        str += "</tr>";
      }
      str += "</table>";
      

      str += "<table border = 1>";
      str += "<tr>";
      for (let i = 1; i <= 9; i++) {
        str += "<td>";
        str += i + "단";
        str += "</td>";
      }
      str += "</tr>";
      str += "<tr>";
      for (let i = 1; i <= 9; i++) {
        str += "<td>";
        for (let j = 1; j <= 9; j++) {
          str += i + " * " + j + "=" + i * j + "<br>";
        }
        str += "</td>";
      }
      str += "</tr>";
      str += "</table>";
      document.write(str);

      var i = 10;
      str += `${1+2} + ${i} + ${i+3}`;
      document.write(str);
    </script>
  </head>
  <body>
    
  </body>
</html>

+ 오류 +
count 초기화 선언하지 않아 화면에 출력되지 않음.
마지막 $부분에 앞을 `표기하지 않고 작은 따옴표 기호를 사용하여 출력되지 않음.

+ (231004 기준) 코드과정 풀이
1. str 변수값을 초기화한다.
2. count 변수값을 초기화한다
3. HTML태그인 테두리가 있는 테이블을 생성하여 str 문자열과 더한 후 대입한다.
4. 테이블의 행 개수를 반복하여 5개를 출력하였다.
5. 그리고, 데이터 행에 들어갈 값을 0부터 5미만 사이의 숫자들을 1씩 증가하여 삽입한다.
6. 반복문이 종료되면 tr태그로 닫는다.
7. 최종적으로 테이블 태그를 닫는다
8. 브라우저에 출력하고 싶다면 document.write(str)을 입력한다.
---------------------------------------
<구구단>
1. 테두리가 있는 테이블을 str 문자열에 더한 후 대입
2. tr태그를 생성한 문자열을 str문자열에 대입
3. 1부터 9까지 반복하는 반복문에 데이터값을 넣기 위해 td태그를 대입. 그리고 현재 i값에 "단" 문자열을 더하여 해당 구구단 생성 마지막으로 td태그를 닫는다.
4. 반복문을 빠져나와 tr태그를 닫고 다시 연다.
5. str 문자열에 i와 j값을 이용하여 계산하는 반복문을 실행한다.
6. td태그를 생성하여 i가 1부터 9까지 반복하는 반복문을 실행한다.
7. 반복문이 끝나면 td태그를 닫는다.
8. 반복문을 빠져나와 tr태그와 table태그를 닫고 브라우저에 화면을 출력한다.

3. Timer 사용하기

Timer는 코드의 실행을 일정 시간 지연하거나 주기적으로 반복
Timer 함수에는 setTimeout 함수와 setInterval 함수

(1) setTimeout

특정 함수나 코드 블록을 지정된 시간 후에 한 번 실행할 수 있음.
지연시간은 밀리초 단위 지정

다음 코드는 2초 후에 "안녕하세요" 메시지 콘솔 출력
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      setTimeout(function () {
        console.log("안녕하세요!");
      }, 2000); // 2초 후 실행
    </script>
  </head>
  <body></body>
</html>

(2) setInterval

특정 함수나 코드 블록을 일정시간 간격으로 주기적으로 실행

다음 코드는 1초마다 현재 시간을 콘솔에 출력
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    setInterval(function() {
      var currentTime = new Date();
      console.log("현재 시간: " + currentTime);
    }, 1000);
  </script>
</head>
<body>
</body>
</html>

(3) clearInterval

setTimeout 또는 setInterval 함수로 설정한 타이머를 중지할 수 있는 함수
setInterval함수는 리턴값으로 식별값 생성.
해당 식별값을 변수에 저장해서 clearInterval함수를 이용해 생성한 타이머 삭제

1초마다 실행되는 setInterval로 만든 타이머를 5초 후에 setTimeout안에서 clearInterval함수를 이용해 종료
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      var intervalid = setInterval(function () {
        var currentTime = new Date();
        console.log("현재 시간: " + currentTime);
      }, 1000);
      setTimeout(function () {
        // 5초 후 타이머 중지
        clearInterval(intervalid); // 타이머 중지
        console.log("타이머가 중지되었습니다.");
      }, 5000);
    </script>
  </head>
  <body></body>
</html>

(4) 예제

복습용도로 활용하기. (p.32)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      /* 
      타이머: 특정 시간에 특정 함수를 실행시킬때 사용함.
      setTimeout: 특정시간 이후에 1번 실행
      setInterval: 특정시간마다 주기적 반복실행
      clearInterval: 특정타이머 종료

      // Math.random() 0이상 1미만의 실수를 랜덤하게 생성
      // a,b,c 변수를 랜덤하게 증가시켜서 먼저 100에 도달하는 순으로 등수를 매기자
      타이머를 이용해서 각각 증가되는 값을 실시간으로 출력
      모두 100이 넘을때까지 게임 진행.
    */
      var a = 0;
      var b = 0;
      var c = 0;
      var endStr = ""; // 게임종료 후 출력할 문자열
      var count = 1; // 등수 기록

      var intervalIdA = setInterval(function () {
        a = a + parseInt(Math.random() * 10);
        if (a >= 100) {
          a = 100;
          clearInterval(intervalIdA);
          endStr = endStr + `A는 ${count++}등<br>`;
        }
        document.write("a:" + a + "<br>");
      }, 500);

      var intervalIdB = setInterval(function () {
        b = b + parseInt(Math.random() * 10);
        if (b >= 100) {
          b = 100;
          clearInterval(intervalIdB);
          endStr = endStr + `B는 ${count++}등<br>`;
        }
        document.write("b:" + b + "<br>");
      }, 500);

      var intervalIdC = setInterval(function () {
        c = c + parseInt(Math.random() * 10);
        if (c >= 100) {
          c = 100;
          clearInterval(intervalIdC);
          endStr = endStr + `C는 ${count++}등<br>`;
        }
        document.write("c:" + c + "<br>");
      }, 500);

      var intervalIdIsEnd = setInterval(function () {
        if (count == 4) {
          clearInterval(intervalIdIsEnd);
          document.write("<br>게임종료:<br>" + endStr);
        }
      }, 500);
    </script>
  </head>
  <body></body>
</html>