숫자와 문자

JAVA SCRIPT 공부 시작


숫자의 기초적인 개념


<!DOCTYPE html>
<html>
<body>
    <script>
      console.log(3);
      console.log( 1 + 2 ); 
      console.log( 1.3 + 1.7 );
      console.log( 4 - 1 );
      console.log( 3 * 1 );
      console.log( 9 / 3 );
    </script>
</body>
</html>

자바 스크립트에서 숫자라는 개념은
다른 언어와는 다르게 int double float long short 이렇게
숫자의 타입을 엄격하게 세분화 하지 않고
크게 number로 사용한다.

위의 코드를 실행하면 각각의 숫자에 타입을 선언하지 않았음에도

문제없이 작동되는 것을 볼 수 있다.


math 객체의 간단한 이해


<!DOCTYPE html>
<html>
<body>
    <script>
        console.log(Math.sqrt(9));        // 9의 제곱근을 반환
        console.log(Math.PI);             // 원주율을 반환
        console.log(Math.ceil(2.9));      // 2.9와 같거나 큰 정수를 반환
        console.log(Math.floor(3.1));     // 3.1과 같거나 작은 정수를 반환
        console.log(Math.max(10,20,30));  // 10 , 20 , 30 중 가장 큰 값을 반환
        console.log(Math.min(10,20,30));  // 10 , 20 , 30 중 가장 작은 값을 반환
        console.log(Math.round(2.56));    // 2.56과 가장 가까운 정수를 반환
        console.log(Math.pow(2,3));       // 2의 3제곱을 반환
        console.log(Math.random());         // 0과 1사이의 난수를 반환


        // 외에도 많은 math 객체가 있지만 기본적인 것들을 정리하였음.

        let lotto = Math.floor(Math.random() * 45) + 1
        // random에 45를 곱하여 0 ~ 45 사이의 난수를 발생
        // 이것을 floor를 통해 ?.??? 에서 0.???부분을 제거하여 정수로 변환
        // 마지막에 1을 더하여 0 ~ 44의 정수에서 1 ~ 45의 정수를 반환하도록 수정
      
        console.log("로또 번호 : " + lotto); 
      
        // random을 이용해서 로또 번호 ( 1 ~ 45 ) 랜덤 숫자를 반환하는 코드
    </script>
</body>
</html>

이후에 포스팅을 하며 자주 등장하게 될 객체라고 생각되어서
간단하게 자주 쓰이는 코드만 골라서 정리해 봤다.

아래에 random을 이용하여 로또 번호를 자동으로 추첨해주는 코드도 작성해 보았다.


문자의 기초적인 개념


<!DOCTYPE html>
<html>
    <body>
        <script>
            console.log('Hello World!'); // 작은 따옴표로 문자라고 구분지음.
            console.log("Hello World!"); // 큰 따옴표로 문자라고 구분지음.
            // console.log('Hello'World!'); // 작은 따옴표 사이에 작은 따옴표로 단어 사이를 나눔 ( 오류 )
            console.log('Hello"World!'); // 작은 따옴표 사이에 큰 따옴표로 단어 사이를 나눔 
            console.log("Hello'World!"); // 큰 따옴표 사이에 작은 따옴표로 단어 사이를 나눔
            // console.log("Hello"World!"); // 큰 따옴표 사이에 큰 따옴표로 단어 사이를 나눔 ( 오류 )

            // console.log("Hello World') 와 같이 작은따옴표로 시작해서 큰 따옴표로 끝난다거나 
            //                            그 반대의 경우에도 문자열로 정상적으로 인식하지 못한다.
        </script>
    </body>
</html>

위와 같이 문자는 'A' 또는 "A"와 같이 따옴표 안에 넣어서 문자열로 사용한다.
하지만 따옴표를 혼용 또는 오남용하면 위에 주석문 처리된 오류코드처럼 제대로 동작하지 않는다.

<!DOCTYPE html>
<html>
    <body>
        <script>
            console.log('Hello " ' +'World!');   // 문자열을 나누고 문자열끼리 합침.
            console.log("Hello \' World!");      // \으로 해당 따옴표를 문자열의 일부로 인식시킴
        </script>
    </body>
</html>

이처럼 문자열을 나눠서 합치는 방법을 사용하거나
또는 escape문을 사용하여 따옴표를 문자열의 일부로 인식시킬 수 있다.
방법은 문자열로 인식시키고자 하는 따옴표 앞에 \을 붙이면 된다.

<!DOCTYPE html>
<html>
    <body>
        <script>
            console.log('Hello World!');        // 기본적인 문자열
            console.log("Hello\nWorld!");     // \n 이후의 문자열은 줄넘김이 되었음
        </script>
    </body>
</html>

이번엔 한 줄의 코드 안에 있는 문자열을 줄넘김 하는 방법이다.
줄넘김을 하고자 하는 위치에 \n을 써주면 위의 결과처럼 줄넘김이 된것을 확인할 수 있다.

<!DOCTYPE html>
<html>
    <body>
        <script>
            console.log('Hello' + ' ' + 'World!');        // 문자열 끼리는 합칠 수 있음.
        </script>
    </body>
</html>

문자열끼리는 더하기 연산이 가능함.
위 예제의 결과는 아래처럼 한 문장처럼 작동하는 것을 알 수 있음.

문자열의 길이 , 문자열 내에 포함된 원소의 자릿값을 알 수 있는 방법이 있음.
lengthIndexof 를 사용함.

<!DOCTYPE html>
<html>
<body>
    <script>
        console.log("Hello World".length);
        console.log("Hello World".indexOf("W"));
    </script>
</body>
</html>

문자열의 길이는 11이고
문자열 내의 "W"가 위치한 자릿값은 6이라는걸 알 수 있음.
(문자열의 자릿수는 0부터 시작함, H0,e1,l2,l3,o4," "5,W6,o7,r8,l9,d10)


숫자와 문자를 착각하지 말자!


<!DOCTYPE html>
<html>
<body>
    <script>
        console.log(typeof("1"));
        console.log(typeof(1));
    </script>
</body>
</html>

위와 같이 같은 1이라고 하더라도 따옴표를 이용해 String타입으로 출력한 1과
따옴표를 사용하지 않고 number 타입으로 출력한 1은 엄연히 다르다. 이점을 명확하게 인지하자.

좋은 웹페이지 즐겨찾기