자바스크립트 기초와 문법

12/22일부터 JS에 대해 학습 시작 - !

 

console.log("Hello, world!")

 

인터넷에서 말하는 자바스크립트의 정의는 Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다. 특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다. 오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.[1] 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력원인 엔진이라고 볼 수 있다.

 

라고 합니다. 앞서 학습했던, 아니면 알고계시는 HTML, CSS와 같이 웹사이트를 동적인 사이트로 만드는 것을 말합니다.

 

흔히 사람들이 JAVA와 자바스크립트를 같은 걸로 오해하시는데 이와 달리 부모 자식의 구분도 없으며, 메인 메소드 같은 것도 없고, 클래스-인스턴스 관계도 없으며, 모든 함수가 클래스도 될 수 있으며 인스턴스도 될 수 있습니다. 그렇기 때문에 모든 함수가 따로 놀기에 따라서 객체 지향이라 보기엔 어렵습니다.(

 

하지만 웹프로그래밍에 중요한 언어이며 나중에 React와 Node.JS등 프레임워크를 이용해서 강력한 언어로 사용됩니다.

 

추후 학습하도록 하고 먼저 자바스크립트의 기초문법에 대해 공부해 보겠습니다.

 

 

자바스크립트의 선언문

 

<script>
  자바스크립트 코드;
</script>

 

 

자바 스크립트의 선언문은 이런 형태로 작성됩니다. 이 코드는 HTML에서 자바스크립트를 import할때, 즉 호출할때 사용됩니다!

 

코드를 선언할 수도 있고,  자바스크립트 파일 자체를 선언할 수도 있습니다.

 

<script>
  document.write("환영합니다");
</script>

 

 

이런식으로 작성되며 이렇게 되면 웹페이지에 

이렇게 표시됩니다.

자바스크립트의 주석처리

주석처리 또한 중요한 표현 방법이죠!

HTML에서는 배웠던 것처럼 

<!-- HTML 주석은 이렇게 처리합니다 -->

 

이렇게 되고 자바 스크립트에선

//한줄일 때

/*여러 줄일 경우 이렇게! 이러캐!*/

 

이렇게 표시됩니다!

 

자바스크립트파일 불러오기

다음은 위에 설명한 외부 JS파일을 분리하여 HTML에 불러오는 작업을 할텐데

먼저 example.js 파일을 생성하여 거기에 코드를 작성해줍니다.

 

//example.js

document.write("환영합니다");

 

그 후 JS를 사용할 HTML에 이 파일을 불러옵니다.

 

<!--index.html-->

<script src="js/example.js"></script>

 

이렇게 하면 아까와 같은 방식으로 자바스크립트를 실행시킬 수 있습니다.

 

 

자바스크립트의 함수선언

자바 스크립트에서도 함수를 선언할 수 있습니다.

바로 var를 통해서 함수를 선언하는데

 

var 변수명; 또는 var 변수명=값;

 

을 통해 변수를 설정 및 할당합니다.

 

일반적인 선언

var box;
box = 100;
box = 30;
document.write(box);
//답은 30

 

이런식으로 선언할 수 있습니다.

 

var은 숫자 뿐 아니라 문자열, Boolean값도 선언할 수 있습니다.

 

Boolean값의 경우

var a = true;
var b = false;
var c = 10 > 5; //true
var d = Boolean(null); //false

 

자바스크립트의 null 그리고 undefined

JavaScript에는 '없음'를 나타내는 값이 두 개 있는데, 바로 null와 undefined입니다. 두 값의 의미는 비슷하지만, 각각이 사용되는 목적과 장소가 다릅니다.

 

JavaScript는 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환합니다.

 
null은 '객체가 없음'을 나타냅니다. 실제로 typeof 연산을 해보면 아래와 같은 값을 반환합니다.

typeof null // 'object'
typeof undefined // 'undefined'

 

이유

그렇다면 개발자의 입장에서 '없음'을 저장하기 위해 둘 중 어떤 것을 써야 할까요? undefined를 쓴다고 가정해보면, 아래와 같은 코드는 그 의미가 불분명해집니다.

비록 undefined가 '없음'을 나타내는 값일지라도, 대입한 적 없는 변수 혹은 속성과, 명시적으로 '없음'을 나타내는 경우를 구분을 할 수 있어야 코드의 의미가 명확해 질 것입니다. 프로그래머의 입장에서 명시적으로 부재를 나타내고 싶다면 항상 null을 사용하는 것이 좋습니다.

다만, 객체를 사용할 때 어떤 속성의 부재를 null을 통해서 나타내는 쪽보다는, 그냥 그 속성을 정의하지 않는 방식이 간편하므로 더 널리 사용됩니다.

 

자바스크립트의 산술연산자

자바스크립트의 산술 연산자는 다음과 같습니다.

+	A+B	더하기
-	A-B	빼기
*	A*B	곱하기
/	A/B	나누기
%	A%B	나머지

 

흔한 다른언어의 산술자와 마찬가지죠? 그럼 기본 사칙연산을 실행시켜 봅시다!

 

기본적인 예시

result = num1 + num2;
document.write(result, "<br>"); // 17
result = num1 - num2;
document.write(result, "<br>"); // 13
result = num1 * num2;
document.write(result, "<br>"); // 30
result = num1 / num2;
document.write(result, "<br>"); // 7.5
result = num1 % num2;
document.write(result, "<br>"); // 1

 

 

자 이제 문자와 숫자를 결합해봅시다!

 

숫자와 문자 결합

<script>
   var t1 = "자바스크립트";
   var t2 = " 문자 결합 ";
   var t3 = 1234;
   var t4 = " 참 쉽죠?";
   var result;

   result = t1 + t2 + t3 + t4; 
   document.write(result);
 </script>

 

 

이렇게 하면 

 

 

이렇게 표현할 수 있습니다 ~

 

 

자바스크립트의 대입연산자와 비교연산자

 

자 다음은 대입연산자 입니다!

 

대입연산자의 종류

종류	풀이
A += B	A = A + B
A -= B	A = A - B
A *= B	A = A * B
A /= B	A = A / B
A%= B	A = A % B

 

이것도 기존 언어의 대입연산자와 비슷하죠?

 

다음은 증감 연산자 입니다!

 

변수의 값을 1만큼 감소시킵니다. "변수--; 또는 --변수;"

 

변수의 값을 1만큼 증가시킵니다. "변수++; 또는 ++변수;"

 

 

 

비교 연산자는 어떨까요?

 

비교연산자의 종류

A > B | A가 B보다 크다.

A < B | A가 B보다 작다.

A >= B | A가 B보다 크거나 같다.

A <= B | A가 B보다 작거나 같다.

A == B | A와 B는 같다.

A != B | A와 B는 다르다.

A === B | A와 B는 같다.

A !== B | A와 B는 다르다.

 

비슷하죠?

 

 

다음은 연산자의 우선순위입니다. 

 

연산자의 우선순위

1. ()
2. 단항 연산자(--, ++, !)
3. 산술 연산자(*, /, %, +, -)
4. 비교 연산자(>, >=, <, <=, ==, ===, !==, !=)
5. 논리 연산자(&&,||)
6. 대입(복합 대입) 연산자(=, +=, -=, *=, /=, %=)

 

같은 종류의 연산자를 여러 번 사용했을 때 결합성이 결과에 영향을 미치기 때문에 각 연산자의 우선순위에 맞게 적절히 사용할 줄 알아야 합니다!

 

 

조건식

 

다음은 조건식 입니다!

 

아래와 같이 작성할 수 있습니다.

 

조건식 ? 자바스크립트 코드 1 : 자바스크립트 코드 2;

 <script>
    var a = 10;
    var b = 3;
    
    var result = a > b ? "javascript" : "hello";
    document.write(result); //javascript
 </script>

 

이와 같이 작성하게 된다면 a가 b보다 크기때문에 javascript가 출력되겠죠??

 

예제

자 그럼 예제로 간단한 BMI프로그램을 작성해 봅시다~!먼저 문제를 해결하기 위해선 BMI가 뭔지 알아야겠죠?

키와 몸무게로 계산한 대략적인 체질량 지수입니다. 공식은(몸무게) / (키)²으로

세계보건기구 기준으로 BMI가 18.5 이하의 경우 저체중, 18.5 ~ 25의 경우 정상, 25 ~ 30의 경우 과체중, 30 ~ 35의 경우 I단계 비만, 35 ~ 40의 경우 II단계 비만, 40 이상의 경우 III단계 비만에 해당한다고 하네요.

 

그럼 공식도 알았고 범위도 알았으니 해결해봅시다.

 

 <script>
    // 사용자로부터 체중과 키를 입력받음
    var weight = parseFloat(prompt("체중을 입력하세요:"));
    var height = parseFloat(prompt("키를 입력하세요:"));

    // BMI 계산
    var bmi = weight / (height * height);

    // BMI 결과를 출력
    document.write("<h2>BMI 계산기 결과</h2>");
    document.write("<p>당신의 체중: " + weight + " kg</p>");
    document.write("<p>당신의 키: " + height + " m</p>");
    document.write("<p>당신의 BMI: " + bmi.toFixed(2) + "</p>");

    // BMI 범주를 판단하여 출력
    if (bmi <= 18.5) {
      document.write("<p>저체중</p>");
    } else if (bmi < 25) {
      document.write("<p>정상 체중</p>");
    } else if (bmi < 30) {
      document.write("<p>과체중</p>");
    } else if (bmi < 35) {
      document.write("<p>비만 1단계</p>");
    } else if (bmi < 40) {
      document.write("<p>비만 2단계</p>");
      else {
      document.write("<p>비만 3단계</p>");
    }
 </script>

 

이런식으로 키와 체중을 입력받고 계산을 하여 var bmi를 선언합니다!

여기서 toFixed(2) 는 JavaScript에서 사용되는 숫자의 메서드 중 하나로, 소수점 이하의 자릿수를 지정하는 데 사용됩니다. 

 

이렇게 하면 간단히 구현할 수 있겠죠?

 

 

+추가설명

 

자 그러면 여기서 입력받는 방법으로 쓰인 prompt() 에 대해 설명해드릴게요!

 

prompt("질문", "기본 응답");

 

으로 아래 알림창에 입력창이 떠서 사용자로부터 데이터를 받을 수 있습니다.

 

 

 

 

마무리

 

자 이렇게 자바스크립트의 기초문법에 대해 학습하였습니다!

 

다음시간에는 제어문에 대해 학습하겠습니다~!

제 글이 마음에 드신다면 좋댓구 해주세요!