크롬에서 자바스크립트(Javascript) 코딩하기

크롬에서 자바스크립트(Javascript) 코딩하기

 

개발환경 : window 7 64bit, 크롬  36.0.1985.125 m

 

자바스크립트 개발을 위해서 여러가지 툴을 사용할수도 있지만

결국에 브라우저로 확인을 해야한다. 그런 의미에서 브라우저에서

확인하고 코딩할수 있다면 일석이조이다.

크롬에서 그런 기능을 제공하고 있는데 크롬 브라우저를 열고

새탭을 클릭해서 하나 연다. 그리고 개발자 도구 F12 눌러 연다.

아래에 개발자 도구 툴이 뜨게 된다. 거기에서 Console 탭을

클릭해보자. 그러면 아래와 같이 > 표시와 함께 커서가 깜박일 것이다.

 

 

위의 커서가 있는 부분이 소스 입력이 가능한 곳이다.

여기에 소스를 입력하고 Enter 를 누르면 결과 값이 바로

아래에 출력되게 된다.

그리고 변수에 값을 입력하게 되면 그 값이 저장되게 된다.

함수소스를 저장하게 되면 그 값이 나오게 되고 값을 저장하게 되면

그 값이 출력하게 된다.

 

그럼 createFunction() 로 함수를 실행해 보자.

리턴값이 100 일것이다. 그냥 createFunction 을 실행할때와

다르게 나온다. createFunction 은 실행할 소스가 저장된

것이고 createFunction() 소스를 실행했기 때문에 값이

틀린 것이다.

그리고 var a = 100 은 a 라는 전역변수에 값이 100 들어가

있는 것이다. 그러므로 이것은 언제든지 꺼내 쓸수 있는 것이다.

 

결론은 코딩하듯이 하나씩 함수를 만들고 변수에 값을 넣은후에

실행해 보면 된다는 말이다.

아래 소스는 브라우저의 크기를 알아오는 함수 이다.

 

function getSize() {   var myWidth = 0, myHeight = 0;   if( typeof( window.innerWidth ) == 'number' ) {     //Non-IE     myWidth = window.innerWidth;     myHeight = window.innerHeight;   } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {     //IE 6+ in 'standards compliant mode'     myWidth = document.documentElement.clientWidth;     myHeight = document.documentElement.clientHeight;   } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {     //IE 4 compatible     myWidth = document.body.clientWidth;     myHeight = document.body.clientHeight;   }   return [myWidth, myHeight]; }

 

위의 함수를 등록하고 실행해보자.

그러면 현재 브라우저의 크기를 알려준다.

그런데 아직 이 소스를 간단히 결과값만을 알수 있는 수준이다.

Console 에서 소스를 넣고 디버깅할수 있는 방법은 알지 못하고

있다. 좀더 테스트 하면서 사용하면서 제대로 기능을 알아봐야

할 것 같다