[JavaScript] Console 창 사용법, window 객체

콘솔 창이란? 
크롬 웹브라우저를 기준으로 웹 브라우저 실행 후
F12를 누르면 나오는 개발자 툴에 있는
바로 웹 페이지에 적용할 수 있게 만들어져 있는 도구입니다.

저희는 오늘 Javascript를 에디터를 사용하지 않고 
콘솔을 이용해 바로 웹 페이지에 적용을 해보겠습니다.

아래 사진에서는 콘솔창에 코드를 입력하여
웹페이지의 변화를 보는 사진입니다.

저희는 콘솔창을 이용해 보다 수월하게 웹 페이지의
변화를 줄 수 있습니다.

두번째로 window 객체입니다.
window 객체는 JavaScript를 실행 했을시
가장 상위의 객체입니다.
예를들어 변수를 선언하거나, 함수를 선언할 시
모두 window 객체 안에 선언이 됩니다.

또한 상위 객체이기 때문에, html, css에도 보다
쉽게 접근이 용이합니다.
아래 사진에서 접근성을 확인해보겠습니다.

window.document 객체를 이용하여 html을
관리하는 사진입니다.

html 뿐만아니라 페이지에 적용되어 있는 css 역시 관리가 가능하고, 
window.location객체를 이용하여,
웹 페이지의 주소 또한 확인하며, 이동가능합니다.

document.styleSheets 를 사용하여, 현재
웹페이지에 적용되어있는 css를 볼 수 있습니다.

그리고 window.location.href 객체를 사용하여
현재 주소를 알 수 있고,
window.location.href="이동하고싶은 주소"를 사용하여
웹 페이지 이동역시 가능합니다.

 

이제 변수 선언, 함수 선언을 하여 
window 객체안에 선언이 되는지 확인해 보겠습니다.

var a=1;
function b();
함수를 선언하였고,
window.b()를 입력하니 함수 b()에
있는 내용이 출력이 됩니다.
또한, window객체가 가장 상위 객체이기 때문에
b() 함수를 단독적으로 사용하여도 안에 있는
내용이 출력이 되게 됩니다.

console 창 사용은 처음 JavaScript를 접하는 분들에게 가장 쉬운 접근방법이 된다고 생각합니다.