JavaScript4

<h1>변수 선언 위치에 따른 구분</h1>

    <h4>Java</h4>
    <pre>
        public class Student {
            // 필드 (멤버 변수)
            private String name; // 인스턴스 변수
            public static String schoolName; // static 변수, 클래스변수

            // 메서드
            public void method( String name ) {
                                // 매개변수 (파라미터)

                int num = 10; // 지역변수

                if (num > 10) {
                    int a = 20; // 지역변수
                }
            }
        }
    </pre>

    <hr>

    <h4>Javascript</h4>
    <pre>
       script 태그 내부 / js 파일 

       var num1; // 전역변수
       num2; // 전역변수(변수명 앞에 키워드 아무것도 없으면 전역변수)

       function test() {
        var num3; // 지역변수
        num4; // 전역변수 ( function이 끝나도 사용 가능함 )

        if(조건식) {
            var num5; // 지역변수
                // (if 내부 선언 후 ~ function 끝까지 사용 가능)
            num6; // 전역변수
        }
       }
    </pre>

    <hr>

    <h1>변수 선언 방식</h1>
    <pre>
        Javascript는 변수 선언 시 자료형이 아닌
        var, let, const, (미작성) 중 하나를 골라서 작성함

        var : 변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope
        let : 변수, 변수명 중복 X, 블록 {} 레벨 scope
        const : 상수, 변수명 중복 X, 블록 {} 레벨 scope

        1순위 : const (JS는 HTML상에서 특정 요소를 선택해 지속적으로 추적하는 경우가 많다.
                        상수형 변수에 저장해 고정적으로 사용)
        2순위 : let
        3순위 : var
        비추천 : 미작성
    </pre>


    <hr>

    <h1>Javascript의 자료형</h1>
    <pre>
        JS는 변수 선언 시 별도의 자료형을 지정하지 않음.
        -> 변수에 대입되는 값(== 리터럴)에 의해서 자료형이 결정됨.

        - string (문자열 / "abc", 'abc')
        - number (숫자 / 100(정수), -3.14(실수))
        - boolean (논리값 / true, false)
        - object (객체 / 배열(Array), JS객체 {K:V, K:V})
        - function (함수)
        - undefined (자료형이 정의되지 않은 변수) -> 값이 대입되지 않은 변수
        
        *null은 참조하는게 없음을 나타내는 리터럴 (자료형 X)
    </pre>

    <button onclick="typeTest()">자료형 확인</button>

    <div id="typeBox"></div>

    <hr>

    <h1>간이 계산기 만들기</h1>
    <div>
        <label for="first">첫번째 값 : </label>
        <input type="number" name="" id="first">
    </div>
 
    <div>
        <label for="second">두번째 값 : </label>
        <input type="number" name="" id="second">
    </div>
    <div>
        <button onclick="plus()">+</button>
        <button onclick="minus()">-</button>
        <button onclick="double()">*</button>
        <button onclick="divi()">/</button>
        <button onclick="percent()">%</button>
    </div>
    <div class="result">
        <p>계산 결과 : </p>
    </div>