[포스코x코딩온] JavaScript 기초, 함수, 반복문

JavaScript

웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 (Java랑 완전 다르다)

(※집으로 치면 HTML이 뼈대, CSS가 겉모양, JS가 집 내부 기능)

• 사용법 : <script> </script>
• console.log() : 브라우저의 개발자 도구 -> 콘솔에서 확인 가능

<script>
  console.log("hello JS world");
</script>

• alert() : 브라우저가 열렸을 때, 그 내용을 알림창으로 보여줌

<script>
  alert("alert");
</script>

---

내장 방식과 링크 방식 둘 다 사용 가능

위치는 어디나 사용 가능 : Head 태그 내부 , Body 태그 내부 , Head와 body 사이, Body 아래 등

• 내장 방식: <script> </script>

간단하게 만들 수 있다. 특정 페이지에서만 작동하는 기능일 경우 내장 방식으로만 따로 구현한다.

• 링크 방식: Java Script 파일을 따로 만들어서 링크하는 방식 <script  src="./ .js"></script>

JS코드의 양이 많아지면 파일로 관리하는 것이 편하다. 같은 기능을 다른 페이지에서 사용하고 싶을 때 JS 파일 링크만 걸어서 사용 가능하다. 유지 보수 용이성이 편리하다.

---

작성된 순서대로 작동된다.

---

Head 태그에 포함된 경우

• 헤드를 불러오고 HTML이 실행되는데 만약 너무 큰 JS를 넣으면 로딩이 오래 걸린다.(우리도 사이트 들어갔는데 화면 안뜨면 화 나니...)

Body 태그에 포함된 경우

• HTML을 다 불러오고 JS가 실행되니 화면 업로드는 빠른데 가끔 기능 구현이 늦어질 수 있다.(버튼을 눌렀는데 다른 화면으로 안넘어가져..!!!)

결론: 둘 다 적절히 적당히 잘 써야 한다~~^^

---

표기법

• dash-case(-) : apple-banana
• snake-case(_) : apple_banana
• camelCase(대문자) : appleBanana
• PascalCase(제일 앞도 대문자) : AppleBanana

---

변수

데이터를 저장하고 참조(사용)하는 데이터의 이름

• var : 재선언 가능, 재할당 가능
• let : 재선언 불가능, 재할당 가능
• const : 재선언과 재할당이 모두 불가능. 무조건 선언하고 할당해야 한다.

코드 예시

	<script>
      var a; //선언
      var a = "안녕"; //선언 + 할당
      a = "홍길동"; //할당
      console.log(a);

      let b; //재선언 불가능하지만 재할당은 가능
      b = "잘가";

      //const는 재선언과 재할당이 모두 안된다. 무조건 선언하고 할당해야함.
      const c = "바로 선언 + 할당";
      // c = "asdasd"; 이렇게는 못 쓴다.
    </script>

변수 기본 규칙

• 변수 이름으로는 문자 / 숫자 / $ / _ 만 사용 가능
• 첫 글자는 숫자가 될 수 없다.
• 예약어(특별한 의미를 가지고 있어, 변수나 함수 이름 드응로 사용할 수 없는 단어)도 사용할 수 없다. (ex. let, var, const, this, if, break...)
• 변수 이름은 읽기 쉽도록 센스 있게 할당한다.
• 상수는 대문자로 선언하여 다른 개발자도 알 수 있게 한다.

---

자료형

언어 타입

• 강한 타입 언어(C, Java...)
  • 타입 검사를 통과하지 못한다면 실행 자체가 안된다. String, int, double 등처럼 타입을 한종류로 명확히 지정
• 약한 타입 언어(JS, Python...)
  • 런타입에서 타입 오류를 만나더라도 실행이 된다. 타입이 여러 종류인 값들이 상관없이 지정된다.
• String: 문자형 데이터로 무조건 " " 사용한다. 문자와 변수를 동시에 사용할 수 있다.
• Number: 숫자형 데이터로 " "이 필요없다.
• Boolean: 참, 거짓을 나타내는 데이터
• Undefined: 미할당 데이터로 값이 할당되지 않은 상태를 표기한다. 즉, 값을 넣지 못한 것을 의미한다.
• Null: 의도된 빈 데이터로 어떤 값이 "의도적"으로 비어있음을 의미할 때 사용한다.
• Array: 배열 데이터로 여러 데이터를 순차적으로 저장한다. 하나의 Array에 문자, 숫자 모두 할당이 가능하다.
  • length: 인데스의 길이
  • push(추가할 값): 제일 뒤에 값 넣기
  • pop():제일 뒤에 값 빼기
  • unshift(추가할 값): 제일 앞에 값 빼기
  • shift(): 제일 앞에 값 빼기
  • indexOf(찾을 값): 어떤 값을 넣었을 때 인데스 번호를 찾아준다.
  • includes(찾을 값): 어떤 값이 인데스에 존재하는지 유무를 확인할 수 있다.
  • reverse(): 배열 뒤집기

    <script>
      let colors = [
        "red",
        "blue",
        "yellow",
        "green",
        "orange",
        "white",
        "black",
      ];

      console.log(colors[2]); //인덱스 값이 2인 값 출력

      colors.push("gray"); //마지막에 gray 추가
      console.log(colors);

      console.log(colors.indexOf("black")); //black이 몇번째 인덱스인지 출력

      console.log(colors.reverse()); //리스트 순서 반전
    </script>

• Object: 여러 데이터 꾸러미
• typeof:해당 자료형을 확인해준다.

    <script>
      console.log(typeof 2, "isn't", typeof "hi", " data type.");

      console.log(
        "Typeof를 boolean이나 null에 사용하면,",
        typeof null,
        "결과를 얻을 수 있습니다."
      );
    </script>

typeof 2는 2가 Number형이라 number로 출력되고, typeof "hi"는 hi가 String형이라서 string이 출력된다.

• 문자형 변환( String() , toString())
  • 자동 형 변환에 의존하지 않고 개발자가 직접 형 변환을 시키는 것
  • String(): null과 undefined에도 영향을 받지 않아서 모든 곳에 사용이 가능하다.
  • toString(): null과 undefined에서 문제가 발생하여 쓰지 못한다.(값이 존재하는 곳에서만 사용할 수 있다.)
• 숫자형 변환(Number())
  • 자동 형 변환에 의존하지 않고 개발자가 직접 형 변환을 시키는 것(숫자로)
  • NaN(Not A Number)
• 기본 연산자
  • 대입 연산자: =
  • 비교 연산자: == (type은 빼고 값만 비교) , != , ===(type까지 비교) , !=== , > , >= , < , <= 
  • 산술 연산자: + , - , * , /
  • 논리 연산자: ! , && , ||
  • 나머지 연산자: %
    • 홀수 판단: num % 2 == 1 
    • 짝수 판단: num % 2 == 0
  • 거듭제곱: **
    • 2**3 = 8
  • 증가, 감소 연산자
    • Num++;
    • Num--;

    <script>
      let mathScore = prompt("수학 점수를 입력 하세요");
      mathScore = Number(mathScore);
      let engScore = prompt("영어 점수를 입력 하세요");
      engScore = Number(engScore);
      //prompt는 기본적으로 문자로 받는다.

      console.log("수학 점수는:", mathScore);
      console.log("영어 점수는: ", engScore);
      5;

      let avgScore = (mathScore + engScore) / 2;
      //100+50을 150으로 못하고 10050으로 받는다.

      console.log(avgScore);
    </script>

Number()을 사용하지 않으면 숫자를 문자로 취급하여 mathScore + engScore의 값이 10050이 나온다.

---

함수(function): 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

• 함수 선언문
  • 어디서든 호출 가능
  • 호이스팅(hoisting): 함수를 미리 선언해서 세팅해두는 것을 의미한다.
• 함수 표현식
  • 코드에 도달하면 생성
• 화살표 함수: 함수 표현식으로 사용할 수 있다.
• return: 반환값

<script>
      functionName();
      function functionName() {
        //함수 선언문
        console.log("안녕하세요");
      } //functionName 이라는 함수를 선언한 것;
      functionName();

      //함수 표현식
      let functionName2 = function () {
        console.log("안녕하세요2");
      }; //익명 함수
      functionName2();

      //화살표 함수
      let functionName3 = () => {
        console.log("안녕하세요2");
      };
</script>

함수 선언문은 functionName()처럼 선언 하기 전에 사용해도 된다. 함수표현식은 선언 전에 사용할 수 없다.

---

• Onclick: 각각의 HTML 요소에 속성 값으로 JS 함수를 연결

<!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>
      function add(number, number) {
        let a = prompt("첫번째 숫자를 입력해주세요.");
        let b = prompt("두번째 숫자를 입력해주세요.");
        console.log(Number(a) + Number(b));
      }
      function sub(number, number) {
        let a = prompt("첫번째 숫자를 입력해주세요.");
        let b = prompt("두번째 숫자를 입력해주세요.");
        console.log(Number(a) - Number(b));
      }
      function divide(number, number) {
        let a = prompt("첫번째 숫자를 입력해주세요.");
        let b = prompt("두번째 숫자를 입력해주세요.");
        console.log(Number(a) / Number(b));
      }
      function mul(number, number) {
        let a = prompt("첫번째 숫자를 입력해주세요.");
        let b = prompt("두번째 숫자를 입력해주세요.");
        console.log(Number(a) * Number(b));
      }
    </script>
  </head>
  <body>
    <button onclick="add()">더하기</button>
    <button onclick="sub()">빼기</button>
    <button onclick="divide()">나누기</button>
    <button onclick="mul()">곱하기</button>
  </body>
</html>

---

조건문 if : 특정 조건이 만족 시 실행하는 명령의 집합으로 특정한 조건 속에서 작업을 수행하고 싶을 때 사용한다.

• if
• else if
• else

    <script>
      let age = prompt("나이를 입력해주세요");
      age = Number(age);

      if (20 <= age) {
        alert("성인");
      } else if (17 <= age) {
        alert("고등학생");
      } else if (14 <= age) {
        alert("중학생");
      } else if (8 <= age) {
        alert("초등학생");
      } else {
        alert("유아");
      }
    </script>

---

조건문 Switch : 변수와 값이 일치해야 실행

• 이외의 값들을 처리하려면 default 사용

삼항 연산자: if문을 간단하게 표현하는 방법

• 조건식 ? 조건이 참인 경우 : 조건이 거짓인 경우

    <script>
      let now = new Date().getHours();

      now > 12 ? console.log("오후") : console.log("오전");
    </script>

---

반복문: 똑같은 명령을 일정 횟수만큼 반복해 수행하도록 하는 실행문

• for(초기화식; 조건식; 증감식)문 
• while() :for문과 달리 조건을 변경하는 구분이 기본적으로 포함되어 있지 않기 때문에 무한 루프 가능
• for/in
• do/while

반복문 제어

• break: 반복문을 멈추고 밖으로 빠져 나감
• continue: 반복문을 한번만 멈추고 다음으로 진행

---

for문을 이용한 구구단 만들기

<!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>
      let a = 0;
      let b = 0;
      for (a = 1; a < 10; a++) {
        console.log("--", a, "단--");
        for (b = 1; b < 10; b++) {
          console.log(a + "x" + b + "=", a * b);
        }
      }
    </script>
  </head>
  <body></body>
</html>

a가 1일 때 b가 1~9까지 반복되고 다시 a가 2일때 b가 1~9가 반복된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

정수 n이 있을 때 2 또는 3의 배수의 총합을 구하시오.(단, n은 0 < n < 100)

방법1.

    <script>
      let n = 0;
      let sumTwo = 0;
      let sumThree = 0;
      let sumSix = 0;
      let sum = 0;
      for (n = 1; n < 100; n++) {
        if (n % 2 == 0) {
          sumTwo = sumTwo + n;
        }
        if (n % 3 == 0) {
          sumThree = sumThree + n;
        }
        if (n % 2 == 0 && n % 3 == 0) {
          sumSix = sumSix + n;
        }
      }
      console.log("2의 배수의 총합" + sumTwo);
      console.log("3의 배수의 총합" + sumThree);
      sum = sumTwo + sumThree - sumSix;
      console.log("답은", sum);
    </script>

2의 배수 3의 배수를 다 더하고 6의 배수를 한번 빼준다,

방법2.

    <script>      
      let sum1 = 0;
      for (let i = 0; i < 100; i++) {
        if (i % 2 == 0 || i % 3 == 0) sum1 += i;
      }
      console.log("sum: ", sum1);
    </script>

OR 연산자 사용

---

Github코드(230711폴더):  https://github.com/DongHo-Kang/KDT-8-web.git

GitHub - DongHo-Kang/KDT-8-web