JavaScript 기본기 익히기 (1) : 변수 선언, 배열, 제어문, 문자열

사실 JavaScript 는 이전에 웹 프로젝트를 할때부터 접해왔었다. 근데 당시에는 솔직히 너~~무 어려워서,  정말 뭔말인지 하나도 모르겠어서 정리하는 것조차 포기하고 있었다.

근데 진짜 신기하게도 java 를 공부하면서 이것저것 만들다보니 이번에 JS 강의를 들으면서는 확실히 이해가 되었다. 의외로 Java 와 비슷한 부분이 많아서 적어도 기초 부분에서는 나름 재미있게 공부하고 있다.

그런 의미에서 JS 도 공부하고 정리한 내용을 작성해보려고 한다.

1. JavaScript

• 자바 스크립트는 사용자와의 인터렉티브를 담당 → html 에서의 사용자와 상호작용을 담당하는데 쉽게 생각하면 전반적인 이벤트를 담당한다고 생각하면 된다
• ECMAscript 라고도 한다
• console.dir(객체명) 를 통해서 콘솔창에서 현재 사용할 수 있는 자바 스크립트 객체를 확인 할 수 있다

2. 변수 선언 : Var

• 모든 변수는 var 하나로 선언 가능함!! ⇒ 기존 자바에서 변수가 들어가야하는 모든 부분은 var 하나로 대체 가능하다고 생각하면 될 듯
• 자바와는 다르게 변수를 초기화 할 때가 아닌 값을 할당할 때 자료형이 결정됨
  • 자바 : String a = “XX”
  • 자바 스크립트 : var a = “aa” ⇒ aa 값을 할당한 후 변수 a 는 String 타입이 됨
• 심지어 배열도 마찬가지로 var 하나로 선언이 가능함

<script type="text/javascript">
        // 값을 선언할때는 자료형 선언 X
        var a = 10;

        // 값을 할당할 때 자료형을 결정 => 동적 타이핑 언어
        var b = "안녕";

        document.write("Hello javascript!! : "+b);

        // 변수 b 에 String 타입의 값을 대입한 후 다시 int 를 대입해도 문제 X
        b = 3.141592;
        document.write("Hello javaScript!! : "+b);

				// 자바 스크립트 배열 선언
        var arr = new Array(3);

        arr[0] = 1;
        arr[1] = 2;
        arr[2] = 3;

        // 배열 출력
        for(var i=0; i<arr.length; i++){
            console.log(arr[i]);
            document.writeln(arr[i]);
        }

    </script>

 

3. 배열 : var arr = []

• js 에서의 배열은 자바와 비슷하면서 다름
• 자바에서는 List, Hash, Set 등이 아닌 이상 타입을 선언해야하지만 js 는 필요없음!!
  • 배열에 값을 넣을 때는 push()
  • 배열의 한 요소만 삭제하는 함수 splice, 매개변수로 내가 삭제할 요소, 삭제할 갯수를 받음 => splice(1, 1)
  • 배열의 shift 함수, 배열에서 첫번째 요소를 제거하고 요소를 리턴함

var num = []; // 혹은
var num = new Array(6) // 이거

// 요런식으로 향상된 for 문을 사용해서 가져올 수 있다
for(var j in num){
                    if(num[j] == no){
                        no = (Math.floor(Math.random()*45)+1);
                    }
                }
                num.push(no);
            }

 

4. 제어문 : 반복 & if

• 자바 스크립트에서 반복문과 if 문은 역시나 자바의 그것과 많이 동일함
• if 문은 거의 차이가 없을 정도이고, for문만 약간 달라지는 정도?
  • for 문 안에서 반복변수 선언시 int 를 사용하는 것 대신 var 를 사용한다는 점이 가장 큰 차이점
• 향상된 for 문도 사용가능. 당연히 자바와는 다르게 var 하나로 처리한다
  • for(var i in 배열명){ 처리 코드 };

				// int i 대신 var i
        for(var i=0; i<arr.length; i++){
            console.log(arr[i]);
            document.writeln(arr[i]);
        }

// 향상된 for 문
for(var i in arr){
~~~~
}

 

5. 문자열 다루기

• 자바 스크립트에서 문자열은 java 와 거의 동일
• 물론 다른 함수가 있겠지만 그래도 indexof, split, 등을 동일하게 사용 가능

<script>
        // 문자열 객체
        var str = "ABCDEF";
        console.log(str);
        console.dir(str);

        // 2번째부터 3번째 글자까지
        console.log(str.substr(1,2));

        // 특정 문자의 위치
        console.log(str.indexOf('A'));

        // 문자열 함수 중첩 => 아이디만 찾아오기
        var email = 'jj@naver.com'
        var index = email.indexOf('@');

        console.log(email.substr(0,index));

        // split 는 문자열을 특정한 문자로 나눈 후 배열로 return
        var friendList = "aaa,bbb,ccc,ddd,eee,fff";
        var fList = friendList.split(",");

        for(var i=0; i<fList.length; i++){
            document.write(fList[i]+" ");
        }
    </script>