목차
- JS 출력 기본 상식
- 방식1 - widndow.alert(출력내용) ★
- 방식2 - document.write(출력내용) ★
- 방식3 - innerHTML = 출력내용 ★
- 방식4 - console.log (출력내용)
- JS 방식 vs. jQuery 방식 차이
JS 출력 기본 상식
1. JS는 코드실행 결과를 자체적으로는 출력시키는 함수 없음.
2. JS는 아래 4가지 방식 중 하나 이용해 출력.
- window.alert(출력내용) - 얼럿박스에 출력 ★
- document.write(출력내용) - HTML문서에 출력 ★★
- innerHTML = 출력내용 - HTML요소에 출력 ★★★
- console.log(출력내용) - 브라우저 콘솔로 출력
3. 따옴표 사용
- 문자인 경우 : 큰따옴표나 작은따옴표로 반드시 묶어줘야 함.
- 숫자인 경우 : 따옴표 안 붙임.
방식1 - widndow.alert(출력내용) ★
얼럿 (=경고, 알림, 안내) 박스에 출력 방식
(예1) 문자 : 작은따옴표나 큰따옴표로 꼭 묶어야 함.
<h1>문자 경우</h1>
<script>
window.alert("홈짱닷컴 (homzzang.com) - HTML CSS JavaScript JQuery PHP SQL 무료 학습");
</script>
(예2) 숫자와 연산식 : 작은따옴표나 큰따옴표로 안 묶음.
<h1>숫자 경우</h1>
<script>
window.alert(3 + 4);
</script>
방식2 - document.write(출력내용) ★
HTML 문서로 출력 (※ HTML 문서가 로딩 중이나, 로딩 완료냐에 따라 다름)
<h1>홈짱닷컴 (homzzang.com)</h1>
<script>
document.write(5 + 6);
</script>
PS.
이벤트에 사용 시, 기존 내용을 다 지우고 출력하니 주의 !!
아래 예 경우, 홈짱닷컴 글씨 사라지고, 결과값 7만 출력 됨.
<h1>홈짱닷컴 (homzzang.com)</h1>
<button onclick="document.write(3 + 4)">클릭</button>
결과보기
방식3 - innerHTML = 출력내용 ★
※ HTML 요소에 출력 (가장 자주 사용)
1.
구문 : document.getElementById("아이디").innerHTML = 출력내용;
ⓐ document : JS코드가 현재 위치하는 HTML 웹문서 객체.
ⓑ getElementById("아이디") : HTML문서에서 JS 결과를 출력시킬 HTML 태그.
ⓒ innerHTML = 출력내용 (출력시킬 내용이 문자면 따옴표 붙고, 숫자면 안 붙임.)
- innerHTML = "문자" (큰따옴표나 작은따옴표 붙임)
- innerHTML = 숫자 (따옴표 안 붙임)
2.
HTML 구문보다 뒤에 <script> 구문이 위치해야 정상 출력 됨.
단, onload() 메서드나 제이쿼리 ready() 메서드 이용 시 앞도 가능.
[출력 O]
<div>a값: <span id="hom"></span></div>
<div>b값: <span id="zzang"></span></div>
<script>
var a=1 ;
var b=2 ;
document.getElementById("hom").innerHTML = a ;
document.getElementById("zzang").innerHTML = b ;
[출력 X]
<script>
var a=1 ;
var b=2 ;
document.getElementById("hom").innerHTML = a ;
document.getElementById("zzang").innerHTML = b ;
</script>
<div>a값: <span id="hom"></span></div>
<div>b값: <span id="zzang"></span></div>
결과보기
[출력 O] - jQuery 이용 경우 자세히 보기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var a = "홈짱닷컴" ;
var b = "Homzzang.com" ;
document.getElementById("a").innerHTML = a ;
document.getElementById("b").innerHTML = b ;
})
</script>
<div>a값 : <span id="a"></span></div>
<div>b값 : <span id="b"></span></div>
결과보기
3-1. 문자 : 따옴표 붙임
<p id="homzzang"></p>
<script>
document.getElementById("homzzang").innerHTML = "홈짱닷컴 (homzzang.com)";
</script>
3-2. 숫자 : 따옴표 안 붙임.
<p id="homzzang"></p>
<script>
document.getElementById("homzzang").innerHTML = 5 + 6;
</script>
방식4 - console.log (출력내용)
브라우저 콘솔로 출력 (※ JS 결과를 브라우저에 출력 안 시키고, 브라우저 콘솔창에 출력)
브라우저 콘솔창 띄우는 방법 3가지
1. F12키 > console 탭 클릭
2. Ctrl + Shift + I > console 탭 클릭
3. 마우스 오른쪽 누르고 요소 검사 클릭 > console 탭 클릭
(예)
JS 결과값 7이 브라우저엔 출력 안 되지만, 콘솔창을 열어보면 7이 찍혀 있음.
<h1>홈짱닷컴 (homzzang.com)</h1>
<script>
console.log(3 + 4);
</script>
JS 방식 vs. jQuery 방식 차이
<script src="https://code.jquery.com/jquery-latest.js"></script>
<input type="text" id="hz" name="hz" value="Homzzang.com">
<div id='a'></div>
<div id='b'></div>
<div id='c'></div
<script>
// JavaScript
x = hz.value
document.getElementById("a").innerHTML = 'a: ' + x;
document.write(x);
// jQuery
y= $("#hz").val();
$("#b").text('b: ' + y);
$("#c").html('c: ' + y);
</script>
결과보기