출력과 주석
1. 콘솔
자바스크립트로 무언가를 출력하고 싶다면, console.log()를 사용하면 됩니다. console.log()는 콘솔에 출력하는 함수입니다. 아래 재생 버튼을 눌러 코드를 실행해보세요.
자, 이번에는 아래 코드를 복사해서 개발자 도구의 콘솔탭에 붙여넣기 해보세요. 복사 버튼은 오른쪽 상단에 있습니다.
- 개발자도구:
F12또는 윈도우Ctrl + Shift + I/ 맥Command + Option + I
console.log('안녕하세요!');console.log('안녕하세요!');
콘솔은 개발자 도구에서 제공하는 기능 중 하나로, 개발자 도구의 콘솔 탭에서 콘솔에 출력된 결과를 확인할 수 있습니다. 콘솔은 개발자가 코드를 실행하면서 발생하는 오류를 확인하거나, 코드에서 사용하는 변수의 값을 확인할 때 사용합니다.
위니북스에서는 자바스크립트를 직접 실행할 수 있습니다. 실행 버튼이 있는 코드 블럭에서는 코드를 수정하고 실행할 수 있습니다.
위니북스에서 출력된 결과가 개발자도구 콘솔창과 동일하게 작동하지 않을 수 있습니다. 예를 들어 위니북스에서는 console.log(undefined)는 작동하지 않습니다. 또한 console.log('a', 'b', 'c')와 같이 여러개의 항목을 한꺼번에 출력해주지 않습니다. 정확한 동작을 확인하기 위해서는 때에 따라서 콘솔창을 확인해야 할 수 있습니다.
콘솔은 다양한 기능을 제공합니다. 그 중 일부는 다음과 같습니다. 다만 지금은 console.log만 기억하셔도 좋습니다. 가장 많이 사용하는 함수이기 때문입니다. 다른 기능들은 필요할 때 수업에서 다루도록 하겠습니다.
console.log(); // 로그 메시지
console.error(); // 오류 메시지
console.warn(); // 경고 메시지
console.info(); // 정보 메시지
console.table({ name: 'licat', age: 20 }); // 표 형태
console.clear(); // 출력 기록 초기화console.log(); // 로그 메시지
console.error(); // 오류 메시지
console.warn(); // 경고 메시지
console.info(); // 정보 메시지
console.table({ name: 'licat', age: 20 }); // 표 형태
console.clear(); // 출력 기록 초기화2. BOM (Browser Object Model) API
BOM은 Browser Object Model의 약자로, 브라우저와 소통하기 위한 API입니다. BOM은 브라우저의 창이나 프레임을 제어하는데 사용됩니다. 브라우저의 창을 제어하는 것은 브라우저의 크기 정보를 가져오거나, 알림창을 띄우는 등의 기능을 뜻합니다.
BOM에는 window 객체가 있습니다. window 객체는 브라우저의 최상위 객체이며, 이 객체 안에 여러 가지 도구들이 포함되어 있습니다. 아래 코드를 콘솔창에서 하나씩 실행해 확인해보세요.
window.alert(); // 메시지 다이얼로그
window.confirm(); // 사용자의 응답(확인/취소) 다이얼로그
window.prompt(); // 입력 다이얼로그window.alert(); // 메시지 다이얼로그
window.confirm(); // 사용자의 응답(확인/취소) 다이얼로그
window.prompt(); // 입력 다이얼로그console.log도 마찬가지로 window의 기능이기 때문에 window.console.log()로 사용할 수도 있지만, 일반적으로 window는 생략해서 사용합니다. 위에서 사용한 window.alert()도 window를 생략하고 사용할 수 있습니다. 생략하고 사용하는 것이 일반적입니다.
이번에는 콘솔에 window만 출력해보세요. 브라우저에서 지원하는 다양한 기능을 확인할 수 있습니다.
BOM이나 뒤에서 배울 DOM(Document Object Model)은 ECMAScript 언어에 포함되는 영역이 아닙니다. BOM과 DOM은 각각 브라우저와 문서의 구조를 다루는 표준입니다. 각 브라우저는 BOM을 대부분 공통적으로 지원하지만, 브라우저마다 일부 차이가 있을 수 있습니다.
3. 주석
주석은 코드에 대한 설명을 추가하거나, 코드의 특정 부분을 일시적으로 비활성화할 때 사용됩니다. JavaScript에서는 두 가지 유형의 주석을 사용할 수 있습니다.
3.1. 단일 행 주석
단일 행 주석은 코드의 한 줄에 주석을 추가할 때 사용됩니다. // 기호를 사용하여 주석을 시작합니다. // 뒤의 모든 내용은 주석으로 처리되며, JavaScript 엔진에 의해 무시됩니다.
이번에는 코드를 설명하는 것이 아니라 코드를 주석처리 해보도록 하겠습니다. 아래 코드에서 console.log(age);에 되어 있는 주석을 풀어보세요. 앞에 //를 지우면 됩니다.
3.2. 다중 행 주석
다중 행 주석은 여러 줄에 걸쳐 주석을 추가할 때 사용됩니다. /*로 주석을 시작하고 */로 주석을 종료합니다. /*와 */ 사이의 모든 내용은 주석으로 처리됩니다.
주석은 코드의 가독성을 높이고, 협업 시 코드의 의도를 설명하는 데 매우 유용합니다. 적절한 주석을 사용하여 코드의 기능과 목적을 명확하게 하는 것이 좋습니다.