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

KDT 포스코X코딩온 웹 풀스택 과정 10기

 

 

---

2023-11.01

JavaScript Function

https://chocobol.tistory.com/entry/Javascript-getElementById-function

Javascript - [.getElementById, function]

 

📌 multifly() 함수 만들기

- 매개변수로 두 개의 숫자를 입력받기

- 두 인자의 곱을 '반환'하는 함수를 정의

❗ 출력이 아닌 반환하는 함수

 

- 콘솔창에 출력하고 싶다면 아래처럼 테스트해보기

 

      function multify(sum1, sum2) {
        return sum1 * sum2;
      }
      console.log(multify(3, 7));
      console.log(multify(2, 2));

      function square(num1) {
        console.log(num1 * num1);
      }

 

📌 square() 함수 만들기

- 매개변수로 하나의 숫자를 입력받기

- 입력받은 수의 제곱을 콘솔창에 출력하는 함수 정의

      function square(num1) {
        console.log(num1 * num1);
      }
      square(4);
      square(11);
      square(5);
      function test() {
        alert: "onclick test!";
      }

 

📌 onclick 
onclick 함수는 HTML 요소에 사용되는 이벤트 핸들러 중 하나이다. 요소가 클릭될 때 실행되는 JavaSCript 코드를

지정한다. 

- 버튼 클릭 시 alert창에 "Button clicked!" 출력

<button onclick="myFunction()">Click me</button>

function myFunction() {
    alert("Button clicked!");
}

 

Javascript 조건문 (if문) [if / if, else / if, else if, else / if중첩]

if / else

if / else if / else

if / if

 

📌 실습

 

      let age = prompt("나이를 입력해주세요");
      Number(age); //형변환

      if (age > 20) {
        alert("성인");
      } else if (age > 17) {
        alert("고등학생");
      } else if (age > 14) {
        alert("중학생");
      } else if (age > 8) {
        alert("초등학생");
      } else if (age > 0) {
        alert("유아");
      } else{
        alert("입력 값이 잘못되었습니다.")
      }

 

코드 실행값

 

 let age = prompt("나이를 입력해주세요");
      Number(age); //형변환
      let gender = prompt("성별을 입력해주세요 (남, 여)");

      if (age > 20) {
        alert(`성인 ${gender}`); // 백틱 사용
      } else if (age > 17) {
        alert(`고등학생 ${gender}`);
      } else if (age > 14) {
        alert(`중학생 ${gender}`);
      } else if (age > 8) {
        alert(`초등학생 ${gender}`);
      } else if (age > 0) {
        alert(`유아 ${gender}`);
      } else {
        alert("입력 값이 잘못되었습니다.");
      }

📌 조건문 (Switch)

 

코드 출력값

      name = "kim";
      switch (name) {
        case "kim":
          console.log("kim 맞습니다");
          break;
        case "lee":
          console.log("kim 아니고 lee입니다.");
          break;
        case "park":
          console.log("kim 아니고 park입니다.");
          break;
      }

break; 사용하여 name이라는 변수에 들어가 있는 kim값을 찾으면 break;에 의해 더 이상 찾지 않고 코드를 빠져나온다.

 

 

 

📌 3항 연산자

IF 문을 간단하게 정의한 것
조건식? 조건이 참인 경우 :  조건이 거짓인 경우;

 

      let now = new Date().getHours();
      console.log(now);

      now > 12 ? console.log("오후") : console.log("오전임");

 

📌 반복문 ( for, whie)

 

 

      for (let i = 1; i <= 10; i++) {
        console.log(i, "번째 인사합니다.😁");
      }

 

      let num = prompt("숫자를 입력하세요 1~10000");
      Number(num);

      // i 는 위의 num에게 입력받은 값만큼 실행된다.
      for (i = 0; i <= num; i++) {
        // 13배수이면서 홀수인 숫자를 찾는 프로그램
        if (i % 13 === 0 && i % 2 === 1) {
          console.log(i);
        }
      }

 

📚 반복문 제어 [break, continue]

 

break

- 반복문을 멈추고 밖으로 빠져나감

 

contiue 

- 반복문을 한 번만 멈추고 다음으로 진행