[JS]JS의 아주, 아주 기초적인 맛보기

오늘은 자바 스크립트에 대한 아주, 아주아주 기초적인 부분을 먼저 맛보기 해봤다.

다른 언어들과 달리 Java Script는 HTML안에서만 작동한다고 한다. 따라서 쓸 때 html의 body 안에 넣어서 적용해줘야 한다. 이 언어는 주로 head에 <script src= "">로 외부 js파일과 연결시켜서 사용하거나, body 내에 <script></script>를 써서 그 안에 넣는 방식으로 사용된다.

 

JS는 웹브라우저 창에서 f12를 누르고 console에 들어가면 볼 수 있는

console.log로 주로 먼저 실행한다. 콘솔 창에서 잘 돌아가는지 검사하는 방식이다. 

 

 

변수, 함수, 문(statement; 조건문, 반복문), 식(계산)

JS에서 중요한 건 크게 다음 네 가지로 나눌 수 있다.

 

1. 변수는 값을 보관하는 주소를 의미한다.

let iq = 130;
console.log(iq);
iq = iq - 10;
console.log(iq);

이런 식으로 넣으면, 첫번째 console창에선 130, 두번째에선 120이 뜬다. 이와 같이 프로그래밍 언어에서 '=' 는 수학적 의미처럼 '같다'로 쓰이지 않는다. '='는 우항을 좌측의 변수에 저장하겠다는 의미라고 볼 수 있다.

또한 변수는 보통 영어로 쓰고, 숫자는 절대 앞에 올 수 없으며(뒤는 가능), 띄어쓰기도 적용이 안 된다. '-' 역시 대개 마이너스의 의미로 해석 되어버리기 때문에 그것도 쓰면 안 됨. 다만 '_'언더바는 가능하다.

 

java script에서 값으로 쓸 수 있는 것은 크게 숫자, 문자(string이라고도 부르며, 문자는 반드시 따옴표로 감싸줘야 한다.), Boolean(true, false 참 거짓)이다. 문자를 따옴표에 가두는 걸 잊지 말도록 하자.

 

위의 코드블럭에 넣은 예시와 같이, 변수 앞에는 'let' 혹은 'const'를 붙이게 된다. let은 예전에 var로도 많이 썼지만 여러 문제가 생겨서 요즘은 let을 거의 쓰는 추세라고 한다. 보통 바뀔 수 있는 변수를 let으로 쓰고, 절대 바뀌어서는 안 되는 값을 const를 붙여서 쓴다. 예를 들어 const pi = 3.14;라고 써뒀을 시 이 뒤에 실수로 pi의 값에 손을 대면 경고창이 뜨게 된다. 

 

2. 함수는 나중에 좀 더 깊이 다시 다루는 걸로. 지금은 패스.

 

3. 문statement; 에는 조건문, 반복문(이 외에도 몇 개 더)이 있는데 조건문만 배워보았다.

조건문에선 if가 쓰인다. if ~, else 식이 일반적이다. 

if (score > 90) {
        console.log("당신의 학점은 A입니다.");
      } else {
        console.log("당신의 학점은 F입니다.");
      }

이렇게 쓰면 만약 90이 넘으면 "당신의 학점은 A입니다"가 뜨고, 그게 아니면 else "당신의 학점은 F입니다"가 뜬다. 

if (score > 90) {
        console.log("당신의 학점은 A입니다.");
      } else if (score > 80) {
        console.log("당신의 학점은 B입니다.");
      } else if (score > 70) {
        console.log("당신의 학점은 C입니다.");
      } else if (score > 60) {
        console.log("당신의 학점은 D입니다.");
      } else {
        console.log("당신의 학점은 F입니다.");
      }

이렇게 쓰면 좀 더 세분화된 조건으로 맞춰갈 수 있다. 

 

4. 식은 그냥 수식, 계산식이라고 이해하면 된다.

JS내에서도 +, -, *(곱하기), /(나누기)가 자주 쓰인다. **2 하면 제곱, **100하면 100제곱을 의미한다. 13 % 5는 3이 뜨는데, 이처럼 %는 나누고 남는 나머지를 계산할 때 쓴다. 나머지는 수가 커질수록 같은 굴레에서 무한히 반복되기 때문에 주로 루프 돌릴 때 쓰는 듯하다.

 

---

if문을 이용하면 아래와 같이 비만도 측정기도 만들 수 있다.

결과물.

	<label for=""><span>키</span><input type="text" id="height" placeholder="키를 입력하세요. ex)185" /></label>
    <label for=""><span>몸무게</span><input type="text" id="weight" placeholder="몸무게를 입력하세요. ex)50" /></label>
    <button id="btn-result">결과보기</button>
    <p id="result"></p>
    
    <script>
      const inputHeight = document.querySelector("#height");
      const inputWeight = document.querySelector("#weight");
      const btnResult = document.querySelector("#btn-result");
      const result = document.querySelector("#result");
      btnResult.addEventListener("click", function () {
        let height = inputHeight.value;
        let weight = inputWeight.value;
        let meterHeight = height / 100;
        let bmi = weight / meterHeight ** 2;
        console.log(bmi);
        result.textContent = bmi;
        if (bmi > 23) {
          console.log("비만");
          result.textContent = "비만";
        } else if (bmi < 18.5) {
          console.log("저체중");
          result.textContent = "저체중";
        } else {
          console.log("정상");
          result.textContent = "정상";
        }
      });
}
    </script>