javascript 출력 방법에 대해 알아보겠습니다.
출력 방법은 크게 아래와 같이 나눌 수 있습니다.
- window.alert()
- console.log()
- document.write()
- innerTEXT 또는 innerHTML
window.alert()
대화 상자를 띄워서 데이터를 표시해 줍니다.
<body>
<input type="text" id="msg" name="msg" autofocus="autofocus">
<button>js 출력</button>
<p id="demo"></p>
<script>
document.querySelector("button").onclick = function (){
var message = document.getElementById("msg").value;
window.alert( message );
}
</script>
</body>
console.log()
웹 브라우저의 콘솔을 통해 데이터를 출력해 줍니다.
콘솔은 크롬 브라우저를 기준으로 F12 -> 콘솔 메뉴에서 확인할 수 있습니다.
<body>
<input type="text" id="msg" name="msg" autofocus="autofocus">
<button>js 출력</button>
<p id="demo"></p>
<script>
document.querySelector("button").onclick = function (){
var message = document.getElementById("msg").value;
console.log( message );
}
</script>
</body>
document.write()
주로 테스트나 디버깅을 위해 사용됩니다.
<body>
<input type="text" id="msg" name="msg" autofocus="autofocus">
<button>js 출력</button>
<p id="demo"></p>
<script>
document.querySelector("button").onclick = function (){
var message = document.getElementById("msg").value;
window.document.write( message );
}
</script>
</body>
innerHTML, innerText
innerHTML과 innerText의 차이점은 innerHTML은 HTML 태그를 반영하여 출력하며 innerText는 태그를 미 반영 후 전부 출력합니다.
<body>
<input type="text" id="msg" name="msg" autofocus="autofocus">
<button>js 출력</button>
<p id="demo"></p>
<script>
document.querySelector("button").onclick = function (){
var message = document.getElementById("msg").value;
document.getElementById("demo").innerHTML = message;
}
</script>
</body>반응형
'Front > javascript' 카테고리의 다른 글
| [javascript] 일반 전화번호 포함 유효성 검사 (0) | 2022.11.29 |
|---|---|
| [JavaScript] input 입력 글자수 제한 하기 (0) | 2022.07.06 |
| [JavaScript] Ajax란? (0) | 2022.01.05 |
| [JavaScript] 호이스팅(Hoisting) 이란 (0) | 2021.12.13 |
| [이클립스] javascript 자동 완성 기능 설정하기 (0) | 2021.12.02 |
