JAVA Script 1편 + 자바스크립트 기본

참고 사이트 : https://www.w3schools.com/js/default.asp

자바스크립트란 HTML과 웹의 프로그래밍 언어다.

따로 컴파일이 필요없으며, 인터프리터 언어이다.

웹 페이지에서 움직이는 무언가가 있다면 이 자바스크립트라는 친구를 사용한 것이다.

자바를 공부했다면 JS에서 키워드로 불려지는 친구들은 어렵지 않을 것이다.

단 처음 자바스크립트를 접한다면 break, else, case등 키워드(예약어)가 어렵게 느껴질 수도 있을 것같다.

자바와 자바스크립트는 다른 것이라 하지만 책을 읽어보니 거의 비슷하다.

개인적으로는 자바를 공부했기 때문에 반복문, 조건문등 언어와 비슷한 친구들은 넘어가도록 하겠다.

자바스크립트는 하나 이상의 표현식이 모여진 문장으로 나타낸다.

그리고 여기에서는 사실 문장 끝에 세미콜론이 없어도 행을 바꾸면 문장으로 취급해서 오류를 발생시키지 않으나

대부분 프로그래밍 언어에서 문장 끝에 세미콜론 을 입력하므로 관례상 입력해주자.

키워드는 아래의의 사이트에 키워드표가 있으니 이런게 있구나하고 넘어가겠다.

http://codedragon.tistory.com/5572

다음으로 자바스크립트에서 이름을 붙일 때 사용하는 단어인 식별자에 대해 알아보겠다.

변수나 함수 이름 등으로 사용되며 아래와 같은 규칙을 지켜주어야합니다.

ㆍ 키워드를 사용하면 안 된다.    

ㆍ 특수문자는 _과 $만 허용한다. 

ㆍ 숫자로 시작하면 안 된다.       

ㆍ 공백은 입력하면 안 된다.       

그리고 자바에서 클래스 이름의 첫글자를 대문자로 사용하듯 자바스크립트에서도

식별자를 만들 때 지키는 관례가 있다.

ㆍ 생성자 함수의 이름은 항상 대문자로 시작한다.

ㆍ 변수, 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작한다.

ㆍ 여러 단어로 이뤄진 식별자는 각 단어의 첫 글자를 대문자로 한다. ( 예 : JavaScript )

굳이 외우지않아도 사용하면서 자연스럽게 익혀질 부분인것 같다.

자바스크립트에서의 가장 기본적인 출력 방법은 alert( ) 함수를 사용하여 웹  브라우저에 경고창을 띄우는 것이다.

위에서도 말했듯 다른 언어와 비슷한 부분은 넘어가고 자바스크립트만의 특이점만 살펴보겠다.

첫번째로 타언어와 다르게 자바스크립트에서는 변수선언시 자료형으로 var을 사용한다.

왜 int형 float형을 사용하지 않고 var만 사용하는지 이유를 알고싶은데 찾아봐도 잘 모르겠다.

그냥 이렇구나 하고 넘어간다 😓..

두번째로는 함수 부분이다.

자바스크립트에서는 함수 생성 방식이 두가지가 있다.

함수 호출은 함수명( ); 로 하면 된다.

여기서 선언적 함수와 익명 함수를 함께 사용할 경우 를 살펴보겠다.

물론 하나의 방법으로 사용할 때는 함수도 변수이므로 마지막에 입력된 값이 저장되나 같이 사용했을 경우는 다르다.

⭐ 자바스크립트는 모든 코드를 읽기 전 선언적 함수를 먼저 읽는다.

따라서 익명 함수 뒤에 선언적 함수를 사용했을 시에는 나중에 읽는 익명 함수를 실행한다.

세번째는 콜백 함수로 매개변수로 전달되는 함수다.

예제를 통해 설명하겠다.

위의 실행 결과로 출력창이 10번 뜬다.

단지 매개변수로 변수가 아닌 함수가 들어간 것뿐 어려운 것은 없다.

<script>
        
        // 함수 선언
        function callTenTimes( callback )
        {
            // 10회 반복
            for(var i = 0; i < 10; i++)
            {
                callback();
            }
        }
 
        var callback = function() { alert('함수 호출'); };
 
        callTenTimes(callback);
</script>
 

마지막으로 객체와 객체안에 있는 속성과 메소드다.

적는 방식의 차이일 뿐 자바와 같은 친구로 보인다.

<script>
        
        var person = 
        {
            name: '도담씨',
            eat: function (food)
            {
                alert(food + '은/는 맛있다.');
            }
        }
 
        //메소드 호출
        person.eat('빵');
</script>

name이 속성 eat가 메소드다.

주석, 제어, 반복문은 다른 언어와 크게 차이점이 없어서 넘어갔다.

만약 자바스크립트로 주석, 제어, 반복문을 처음 접한다면 따로 알아보길 바란다 ! 🙂