JavaScript

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

목차
  1. JS 출력 기본 상식
  2. 방식1 - widndow.alert(출력내용) ★
  3. 방식2 - document.write(출력내용) ★
  4. 방식3 - innerHTML = 출력내용 ★
  5. 방식4 - console.log (출력내용)
  6. 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 ;
</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>

 

 

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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
1/89
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 5
웹유틸
회원센터
홈짱 PC버전 로그인