목차
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>
결과보기
주소 복사
랜덤 이동