• Q&A
  • 회원가입
  • 로그인

[Basic] JS - Output (JS출력= JS쓰기) ★★★★★

5,982  
목차
 
 

JS 출력 기본 상식

① 
JS는 코드실행 결과를 자체적으로는 출력시키는 함수 없음. 

② 
JS는 아래 4가지 방식 중 하나 이용해 출력.
  • window.alert(출력내용)  - 얼럿박스에 출력 ★
  • document.write(출력내용)  -  HTML문서에 출력 ★★
  • innerHTML = 출력내용  -  HTML요소에 출력 ★★★
  • console.log(출력내용)  -  브라우저콘솔로 출력 
 
③ 
출력할 게 문자인 경우 : 큰따옴표나 작은따옴표로 반드시 묶어줘야 함.
출력할 게 숫자인 경우 : 따옴표 안 붙임.
 

방식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>


(주의)
기존 HTML 내용을 다 지우고 출력하나, 테스트 용으로만 사용할 것.
즉, 아래 예제 경우, 홈짱닷컴 글씨가 사라지고, 결과값 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 ;
</script>

결과보기

 

 

[출력 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>

 



찾아주셔서 감사합니다. Since 2012