티스토리 뷰

유료강의/국비지원

웹퍼블리셔 기본 4일차 - while 문, for 문, 함수선언식, Math

2021bong 2021. 9. 23. 19:03 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="gugudan">
  </div>
  
  <script>
    const elGugudan = document.querySelector('.gugudan');
    let num = 2;
    let ran = 1;
    let cal = '';
    while(ran < 10){
      cal += `<p>`;
      cal += `${num} x ${ran} = ${num*ran}`;
      cal += `</p>`; //코드를 이렇게 나눠서도 표현가능
      ran++;
    };

  elGugudan.innerHTML = cal; //반복문으로 cal을 돌려서 값을 다 준비해두고 출력 코드 한줄로 출력

  </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="gugudan">
  </div>
  
  <script>
    const elGugudan = document.querySelector('.gugudan');
    let num = 2;
    let ran = 1;
    let cal = '';
   while(ran < 10){
    cal += `${num} x ${ran} = ${num*ran} <br>`;
    ran++;
  };

  elGugudan.innerHTML = `<p>${cal}</p>`; //이렇게도 가능



  </script>
</body>
</html>

 

최대한 적은 줄로 코드를 짜기 위해 노력해야함!

 

 

 

 

2단부터 9단까지 구구단 한번에 출력하기

내가 혼자 풀었을 때는

    let num = 2;
    ran = 1;
    cal_2 = '';

    while (num < 10) {
      while (ran < 10) {
        cal_2 += `${num} x ${ran} = ${num * ran}<br>`;
        ++ran;
      };
      ran = 1;
      elGugudan_final.innerHTML = `</p>${cal_2}</p>`;
      num++;
    } //이렇게 하면 결과물들이 다닥다닥 붙어서 나옴

이렇게 되서 다닥다닥 붙어서 나왔는데

 

선생님의 방법으로 작성하니

    let num = 2;
    ran = 1;
    cal_2 = '';
    
    let step = 1;
    while (num <= 9) {
      step = 1;
      cal_2 += "<p>";
      while (step <= 9) {
        cal_2 += `${num} x ${step} = ${num * step} <br>`;
        step++;
      };
      cal_2 += "<p>";
      num++;
    };
    elGugudan_final.innerHTML = cal_2; //이렇게 하면 단 하나가 p태그이기 때문에 떨어져서 나옴

보기 좋게 떨어져서 나왔다.

 

 

 

for 반복문

for(초기문; 조건문; 증감문) {
	반복할 명령
}

for(i=0; i < list.length; i++;){
	console.log(list[i]);
}

 

 

함수선언식

function();

function(매개변수){

};

fucntion(3); //함수실행(인수);
//인수가 매개변수 자리로 전달 됨
//전달된 인수의 값을 받기 위해서 매개변수 정의

//-------------------------

function(k){
  console.log(k);
};

fucntion(3); //console.log(3);

//매개변수 = 파라미터
  <script>
    const elGugudan_for = document.querySelector('.gugu-for');
    function gugudan() {
    let num = 2;
    data = '';
    for (let ran = 1; ran <= 9; ran++) {
      data += `${num} x ${ran} = ${num * ran}<br>`;
    };
    elGugudan_for.innerHTML = `<p>${data}</p>`;
    }; //함수 선언
    gugudan(); //함수 실행
  </script>

 

  <script>
    const elGugudan_for = document.querySelector('.gugu-for');
    function gugudan(num) {
    // let num = 2; let을 선언하면 에러가 나지만 var를 선언하면 오류가 안남
    data = '';
    for (let ran = 1; ran <= 9; ran++) {
      data += `${num} x ${ran} = ${num * ran}<br>`;
    };
    elGugudan_for.innerHTML += `<p>${data}</p>`;
    };
    gugudan(2); //2단 출력
    gugudan(3); //3단 출력
  </script>

이렇게 하면 원하는 단 출력 가능~~~~

 

  <script>
    const elGugudan_for = document.querySelector('.gugu-for');
    function gugudan(num) {
    data = '';
    for (let ran = 1; ran <= 9; ran++) {
      data += `${num} x ${ran} = ${num * ran}<br>`;
    };
    elGugudan_for.innerHTML += `<p>${data}</p>`;
    };
    for (i=1; i<=9; i++) {
      gugudan(i);
    } //설정한 만큼의 단이 나옴, 1단부터 9단까지 나옴
  </script>

반복문 돌리면 와다다 출력 가능~~~~

 

 

 

Math

수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체

 

Math.random()

Math.floor()

Math.round()

Math.ceil()

  <script>
    console.log (
      Math.random() 
    );
  </script>
<script>
  let num = Math.random() * 10; //랜덤한 숫자가 뜸
  console.log(
    Math.floor(num), //소숫점을 버림
    Math.round(num), //반올림
    Math.ceil(num), //소수점이 존재하면 값 올림
    Math.PI, //html캔버스에서 원 그릴 때 사용
  );
</script>
728x90

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 기본 6일차 - 날짜함수, 제이쿼리  (0) 2021.09.28
웹퍼블리셔 기본 5일차 - switch 문, selector, 날짜함수  (0) 2021.09.27
웹퍼블리셔 기본 3일차 - while 반복문, 조건문 활용  (0) 2021.09.15
웹퍼블리셔 기본 2일차 - 삼항 조건 연산자, 조건문, 배열  (0) 2021.09.14
웹퍼블리셔 기본 1일차 - 자료형, 연산자  (0) 2021.09.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함