WeniVooks

1. 자바스크립트로 무언가를 출력해보고 싶어요.

자바스크립트로 무언가를 출력하고 싶다면, console.log()를 사용하면 됩니다. console.log()는 콘솔에 출력하는 함수입니다.

아래 재생 버튼을 눌러보세요.

자, 이번에는 아래 코드를 복사해서 콘솔에 붙여넣기 해보세요. 복사 버튼은 오른쪽 상단에 있습니다.

console.log('안녕하세요!');

console.log('안녕하세요!');

위 코드를 콘솔에서 실행하면 콘솔에 '안녕하세요!'가 출력됩니다.

위니북스 교안에서는 자바스크립트를 직접 실행하며 실습할 수도 있으니 편한 방법으로 학습하세요. 첫번째 실행시켰던 곳에서 텍스트를 수정하거나 추가할 수도 있습니다.

다만 위니북스의 교안이 콘솔과 동일하게 작동하지 않을 수 있습니다. 예를 들어 위니북스에서는 console.log(undefined)는 작동하지 않습니다. 또한 console.log('a', 'b', 'c')와 같이 여러개의 항목을 한꺼번에 출력해주지 않습니다. 정확한 동작을 확인하기 위해서는 때에 따라서 콘솔을 확인해야 할 수 있습니다.

2. 콘솔에서 사용할 수 있는 다양한 기능

JavaScript의 콘솔은 다양한 기능을 제공합니다. 그 중 일부는 다음과 같습니다. 다만 지금은 console.log만 기억하셔도 좋습니다. 가장 많이 사용하는 함수이기 때문입니다. 다른 기능들은 필요할 때 수업에서 다루도록 하겠습니다.

console.log(); // 콘솔창에 로그 메시지를 보여줍니다.
console.error(); // 콘솔창에 에러 메시지를 보여줍니다.
console.warn(); // 콘솔창에 경고 메시지를 보여줍니다.
console.info(); // 콘솔창에 정보 메시지를 보여줍니다.
console.table(); // 콘솔창에 데이터를 테이블 형태로 제공합니다.

console.log(); // 콘솔창에 로그 메시지를 보여줍니다.
console.error(); // 콘솔창에 에러 메시지를 보여줍니다.
console.warn(); // 콘솔창에 경고 메시지를 보여줍니다.
console.info(); // 콘솔창에 정보 메시지를 보여줍니다.
console.table(); // 콘솔창에 데이터를 테이블 형태로 제공합니다.

3. 브라우저 객체 모델 (BOM)

이러한 console은 BOM (Browser Object Model)의 일부입니다. 이 BOM은 쉽게 얘기해서 JavaScript가 브라우저와 소통하기 위한 도구들을 제공하는 것입니다.

우리가 'console.log라는 문장'을 통해 '브라우저에 메시지를 출력'할 수 있도록 도와주는 것이 바로 BOM입니다. 우리가 브라우저와 소통을 한 것이죠.

이렇듯 BOM은 브라우저와 소통하기 위한 도구들을 제공합니다. BOM에는 window 객체가 있습니다. window 객체는 브라우저의 최상위 객체이며, 이 객체 안에 여러 가지 도구들이 포함되어 있습니다. 아래 코드를 콘솔에서 하나씩 실행해 확인해보세요.

window.alert('경고 메시지'); // 브라우저에 메시지 다이얼로그를 띄웁니다.
window.prompt('이름을 입력하세요'); // 브라우저에 사용자 입력 창을 띄웁니다.
window.confirm('확인하시겠습니까?'); // true 혹은 false 값을 반환하는 다이얼로그를 띄웁니다.
window.console.log('hello world!'); // 콘솔창에 로그 메시지를 보여줍니다.

window.alert('경고 메시지'); // 브라우저에 메시지 다이얼로그를 띄웁니다.
window.prompt('이름을 입력하세요'); // 브라우저에 사용자 입력 창을 띄웁니다.
window.confirm('확인하시겠습니까?'); // true 혹은 false 값을 반환하는 다이얼로그를 띄웁니다.
window.console.log('hello world!'); // 콘솔창에 로그 메시지를 보여줍니다.

console.log는 사실 window.console.log()로 사용해야 하지만, window는 생략이 가능합니다. 그래서 console.log()로 사용할 수 있는 것입니다. 위에서 사용한 window.alert()도 window를 생략하고 사용할 수 있습니다. 생략하고 사용하는 것이 일반적입니다.

이번에는 콘솔에 window만 출력해보세요. 브라우저에서 지원하는 다양한 기능을 확인할 수 있습니다.