[js] output

javascript가 출력하는 방법

1. HTML element에 출력 -> innetHTML

2. HTML에 직접 출력 -> document.write()

3. alert()

4. 브라우저 console에 출력 -> console.log()

 

 

 

document.write()

이 코드는 script 로딩 후에 실행된다

* 페이지 로딩 후에 document,write을 호출하면 기존 HTML 문서가 다 지워지고 실행된다

<script>
    const text = "로딩중에 document.write()";
    document.write(`<h2>${text}</h2>
</script>

<p onclick="document.write('허걱?')">그러나 이것을 클릭하면..</p>

 

console.log()

웹 환경에서 console하는 건 F12(개발자 도구)에서 확인 가능하다

웹에서는 아무것도 나오지 않는다

 

 

*javascript는 브라우저에서 실행하기 때문에 브라우저에서 디버깅도 가능하다

참고하기 : https://ko.javascript.info/debugging-chrome

디버깅하는 습관 들이기!

 

console 창에서 에러 발생 여부 확인하고 source 창에서 디버깅하기

 

step over : 다음 단계 진행 (한단계씩)

resume : 다음 breakpoint (혹은 종료) 까지 진행

step into : 호출할 함수 안으로 진입

step out : 호출 중인 함수가 리턴할 때까지 진행

 

디버깅하면서 관찰할 것들

1. 내가 의도한대로 변수의 값들이 변경되는가

2. 내가 의도한대로 코드 흐름이 진행되는가

3. 내가 의도한대로 함수 호출이 진행되는가

프로그램의 실력은 곧 디버깅의 실력