Chap2. 기본 문법

김승현·2021년 11월 6일

문자열 (String)

함수	내용
toUpperCase()	모든 문자 대문자 변환
toLowerCase()	모든 문자 소문자 변환
length	글자 개수 조회(멤버 변수)
indexOf( "찾는 문자" )	시작부터 가장 먼자 찾는 문자열의 위치 리턴
lastIndexOf( "찾는 문자" )	끝에서 부터 가장 먼저 찾는 문자열의 위치 리턴
charAt( "index" )	찾는 위치의 문자 리턴
subString( )	값의 일부분 리턴 ex) subString(2,4) -> index: 2~5
split("구분자")	토큰 문자로 분리한 문자열 배열 리턴

EX)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

</head>

<body>

    <div id="print" style="width:600px;height:300px;border:1px solid red;"></div>

    <p id="p1">HongGillDong, hongGill, bungshinnee</p>
    <button onclick="test()">결과확인</button>

    <script>
        function test() {
            var p1 = document.getElementById("p1");
            var print = document.getElementById("print");

            var result = p1.innerHTML.toUpperCase();
            print.innerHTML = "toUpperCase : " + result + "<br/>";

            var result = p1.innerHTML.toLowerCase();
            print.innerHTML += "toLowerCase : " + result + "<br/>";

            var result = p1.innerHTML.length;
            print.innerHTML += "length : " + result + "<br/>";

            var result = p1.innerHTML.indexOf("g");
            print.innerHTML += "indexOf : " + result + "<br/>";

            var result = p1.innerHTML.lastIndexOf("g");
            print.innerHTML += "lastIndexOf : " + result + "<br/>";

            var result = p1.innerHTML.charAt(2);
            print.innerHTML += "charAt : " + result + "<br/>";

            var result = p1.innerHTML.substring(8, 13);
            print.innerHTML += "substring : " + result + "<br/>";

            var result = p1.innerHTML.split(",")
            print.innerHTML += "split : " + result[0] + "<br/>";
            print.innerHTML += "split : " + result[1] + "<br/>";
            print.innerHTML += "split : " + result[2] + "<br/>";
        };
    </script>

</body></html>

숫자 (number)

함수	내용
Math.abs()	절대값 리턴
Math.random()	임의의 난수 리턴(소수점 형태) ex) *Math.floor(Math.radom()100)+1**
Math.floor()	소수점 자리 버림
Math.round()	소수점 자리 반올림
Math.ceil()	소수점 자리 올림

EX)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

</head>

<body>

    <div id="print" style="width:600px;height:300px;border:1px solid red;"></div>

    <button onclick="test();">결과확인</button>

    <script>
        function test() {
            var print = document.getElementById("print");
            print.innerHTML = "";

            /* 절대값 */
            var result = Math.abs(-4.6);
            print.innerHTML += result + "<br/>";

            /* 램덤값 (1~10) */
            var result = Math.floor(Math.random() * 10) + 1;
            print.innerHTML += result + "<br/>";

            /* 소수점 이하 반올림 */
            var result = Math.round(4.6);
            print.innerHTML += result + "<br/>";

            /* 소수점 이하 버림 */
            var result = Math.floor(4.6);
            print.innerHTML += result + "<br/>";

            /* 소수점 이하 올림 */
            var result = Math.ceil(4.6);
            print.innerHTML += result + "<br/>";
        };
    </script>

</body>

</html>

기타 자료형

함수	내용
Boolean()	true 또는 false 리턴 ex) Boolean(10<5);

typeof

함수	내용
typeof("문자열")	string
typeof(숫자)	number
typeof(true/false)	Boolean
typeof(객체)	object
typeof(초기값이 없는 변수)	undefined
typeof(function)	function

EX)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<style>
</style>

<body>

    <button onclick="test()">결과확인</button>
    <script>
        function test() {
            var member = {
                name: "김메롱",
                age: 30,
                addr: "경기도"
            };
            var test1; //초기값이 없는 상태
      
            console.log("문자열 (string) : " + typeof("10"));
            console.log("숫자 (number) : " + typeof(10));
            console.log("참/거짓 (boolean) : " + typeof(10 > 7));
            console.log("객체 (object) : " + typeof(member));
            console.log("값없음 (undefined) : " + typeof(test1));
            console.log("함수 (function) : " + typeof(test2));

            test2();
        }
        var test2 = function() {
            alert("Hello");
        }
    </script>

</body></html>

형변환

구분	내용
숫자 + 문자열	문자열 우선으로 문자열로 변경
문자열 -> 숫자	강제 형변환 함수 이용 - parseInt() : 소수점 문자열 소수점 버림 -> 정수 리턴 - Number() : 소수점 형태 문자열 숫자로 변경 가능 - parseFloat() : 소수점 형태 문자열 숫자로 변경 가능

연산자 종류

구분	내용
최우선 연산자	(), [], .
단항 연산자	++, --, +(양수), -(음수)
산술 연산자	+, -, *, /, %
관계 연산자	>, <, >=, <=, ==, !=, ===, !==
논리 연산자	&&, \|\|
대입 연산자	=
복합대입 연산자	+=, -=, *=, /=, %=
삼항 연산자	?:

연산자 우선순위는 최우선 > 단항 > 산술 > 관계 > 논리 > 삼항 > 대입 순

=== 연산자와 !== 연산자

구분	내용
===	데이터와 타입 같아야 true / 아님 false
!==	데이터 또는 타입 다르면 true / 아님 false

EX)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<style>
</style>

<body>

    <button onclick="test()">결과확인</button>
    <script>
        function test() {
            var num1 = 7;
            var num2 = "7";
            var num3 = "4";

            console.log(num1 == num2);  // 데이터만 비교: true
            console.log(num1 == num3);  // 데이터만 비교: false
            console.log(num1 === num2);  // 데이터 && 타입 비교: false
            console.log(num1 === num3);  // 데이터 && 타입 비교: false
            console.log(num1 !== num2);  // 데이터 || 타입: trun
            console.log(num2 !== num2);  // 데이터 || 타입: false

        }
    </script>

</body></html>

기본 제어문

구분	내용
조건문	if, if ~ else, else if, switch, 짧은 조건문 (\|\|, &&)
반복문	for, while, do~while
분기문	continue, break

EX)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<style>
</style>

<body>
    <p>1~4 사이의 수 입력</p>
    <input type="text" id="inputData">
    <button onclick="test()">결과확인</button>
    <script>
        function test() {
            var data = document.getElementById("inputData").value;
            
            // 가져온 데이터 숫자타입으로 변형
            data = Number(data);

            switch (data) {
                case 1:
                    alert("1을 입력하셨군요!");
                    break;
                case 2:
                    alert("2을 입력하셨군요!");
                    break;
                case 3:
                    alert("3을 입력하셨군요!");
                    break;
                case 4:
                    alert("4을 입력하셨군요!");
                    break;

                default:
                    alert("1~4 사이의 수가 아닙니다.")
            }
        }
    </script>

</body></html>

짧은 조건문

구분	내용
\|\|	false조건 \|\| 실행문
&&	true조건 && 실행문

EX)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<style>
</style>

<body>
    <p>홀짝 판별</p>
    <input type="text" id="inputData">
    <button onclick="test()">결과확인</button>
    <script>
        function test() {

            var data = document.getElementById("inputData").value;
            data = Number(data);

            // true 이면 실행
            data % 2 == 0 && alert("짝수입니다.");
            
            // false 이면 실행
            data % 2 == 0 || alert("홀수입니다.");


        }
    </script>

</body></html>