자바스크립트 값 html 출력 - jabaseukeulibteu gabs html chullyeog

Question

자바스크립트 출력

자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있습니다.

목차 Show

자바스크립트 출력
전체 코드
세부 설명
자바스크립트가 올 수 있는 다양한 위치

자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다.

1. window.alert() 메소드

2. HTML DOM 요소를 이용한 innerHTML 프로퍼티

3. document.write() 메소드

4. console.log() 메소드

메소드(method)와 프로퍼티(property)에 대한 더 자세한 사항은 자바스크립트 객체의 개념 수업에서 확인할 수 있습니다.

자바스크립트 객체의 개념 수업 확인 =>

window.alert() 메소드

자바스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법은 window.alert() 메소드를 이용하는 것입니다.

window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해 줍니다.

예제

function alertDialogBox() {

alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");

}

</script>

코딩연습 ▶

대화 상자에 대한 더 자세한 사항은 자바스크립트 대화 상자 수업에서 확인할 수 있습니다.

자바스크립트 대화 상자 수업 확인 =>

window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있습니다.

HTML DOM 요소를 이용한 innerHTML 프로퍼티

실제 자바스크립트 코드에서 출력을 위해 가장 많이 사용되는 방법은 HTML DOM 요소를 이용한 innerHTML 프로퍼티를 이용하는 방법입니다.

우선 document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택합니다.

그리고서 innerHTML 프로퍼티를 이용하면 선택된 HTML 요소의 내용(content)이나 속성(attribute)값 등을 손쉽게 변경할 수 있습니다.

예제

var str = document.getElementById("text");

str.innerHTML = "이 문장으로 바뀌었습니다!";

</script>

코딩연습 ▶

innerHTML 프로퍼티에 대한 더 자세한 사항은 자바스크립트 DOM 요소 수업에서 확인할 수 있습니다.

자바스크립트 DOM 요소 수업 확인 =>

document.write() 메소드

document.write() 메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력합니다.

따라서 document.write() 메소드는 대부분 테스트나 디버깅을 위해 사용됩니다.

예제

document.write(4 * 5);

</script>

코딩연습 ▶

하지만 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 됩니다.

따라서 document.write() 메소드를 테스트 이외의 용도로 사용할 때에는 충분히 주의해서 사용해야 합니다.

예제

<button onclick="document.write(4 * 5)">버튼을 눌러보세요!</button>

코딩연습 ▶

console.log() 메소드

console.log() 메소드는 웹 브라우저의 콘솔을 통해 데이터를 출력해 줍니다.

대부분의 주요 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용할 수 있습니다.

이러한 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되므로, 디버깅하는데 많은 도움을 줍니다.

예제

console.log(4 * 5);

</script>

코딩연습 ▶

연습문제

연습문제1
연습문제2
연습문제3
연습문제4
연습문제5

자바스크립트의 화면 출력 방법들을 총 정리해보았습니다.

1. 경고창 window.alert()

window.alert("출력");

2. HTML출력 document.write()

document.write("HTML출력");
// HTML document 이후에 document.write()의 사용은
// 존재하는 모든 HTML을 지우고 완전히 로드되기 때문에
// 테스트 용도로만 추천

<!DOCTYPE html>
<html>
    <body> 
      <h2>JavaScript 출력 테스트</h2> 
      <button onclick="document.write('HTML출력')">click</button> 
    </body>
</html>

3. HTML요소에 출력 innerHTML

document.getElementById("test").innerHTML = '출력';

4. 브라우저 콘솔에 출력 console.log()

// 브라우저 F12 개발자 모드에서 확인 가능
console.log("출력");

자바스크립트를 쓰는 이유 :

웹문서를 좀더 동적으로 표현하기 위해서 그리고 웹브라우저에서 실행되니 서버의 과부하를 막을수 있다. 또 HTML 문서내에 포함돼 사용하기 편하고 배우기 쉽다. 속도가 빠르다는 장점이있다.

전체 코드

in-out.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 입출력</title>
</head>
<body>
<h2>출력 방법</h2>
<p>1. html 문서에 출력 - document.write() <!-- 현제 해당 페이지의 내용을 내가 원하는 걸로(괄호 안에 내용으로) 덮어쓰기해주는 기능 -->
<button onclick="document.write('출력')">출력</button><!-- "" 안에 ""또쓰면 문자열이 갈라지기때문에 ""안에는 ''를 사용한다 -->
</p>

<p>2. html 요소에 출력 - element.innerHTML() <!-- 검색된 요소에 내용을 추가해줌 -->
<button onclick="document.getElementById('print').innerHTML='출력'">출력</button><!-- print라는 id로 검색되는 요소를 구한다. 그 요소에 내가 원하는 innerHTML에 내용을 넣는다 -->
</p>
<div id="print" style="border: 1px solid #a5f6c8;">버튼 누르면 여기에 출력됨</div>
<!-- onclick 속성의 값은 javascript 코드 -->

<p>3. 대화상자(경고창)에 출력 - alert()
<button onclick="alert('출력')">출력</button>
</p>

<p>4. 개발자 도구의 콘솔에 출력 - console.log()
<button onclick="console.log('출력')">출력</button><!-- 개발자 도구에서만 확인할 수 있는 부분, log역할 -->
</p>
<hr>

<h2>입력 방법</h2>
<p>1. 확인/취소 대화상자로 입력 - confirm('메시지')
<button onclick="func1()">입력</button>
</p>
<script type="text/javascript">
//자바스크립트 코딩 영역
function func1() {
	//var : 변수임을 선언해줌
	var r = confirm('메시지 출력');// r은 변수
	console.log(r);//변수 r에 저장된 값을 콘솔에 출력
	if (r == true) {
		alert("확인을 누르셨습니다.")
	}
	else {
		alert("취소를 누르셨습니다.")
	}
}
</script>

<p>2. 입력(문자열) 대화상자로 입력 - prompt('메시지')
<button onclick="func2()">입력</button>
</p>
<div id="pp" style="border: 1px solid #a5f6c8;">입력이 여기에 출력됨</div>
<script type="text/javascript">
var r2;
function func2() {
	r2 = prompt("이름을 입력하세요.")
	alert(r2 + "님 환영합니다")
	document.getElementById('pp').innerHTML= r2 + ' 님 환영합니다'
}

</script>

</body>
</html>

in-out.html

세부 설명

html에서 javascript 출력 방법

1. document.write()

onclick 속성의 값은 javascript 코드
현제 해당 페이지의 내용을 내가 원하는 걸로(괄호 안에 내용으로) 덮어쓰기해주는 기능
"" 안에 ""또쓰면 문자열이 갈라지기때문에 ""안에는 ''를 사용한다

<p>1. html 문서에 출력 - document.write() 
<button onclick="document.write('출력')">출력</button>
</p>

출력 버튼을 누르면...

브라우저에서 출력 버튼을 누르면 페이지 전체(body부분)가 document.write() 안에 있는 내용으로 변경되어서 새로고침 된다.

출력 버튼 누른 후

2. element.innerHTML()

검색된 요소에 내용을 추가해줌
onclick 속성의 값은 javascript 코드
print라는 id로 검색되는 요소를 구한다. 그 요소에 내가 원하는 innerHTML에 내용을 넣는다

<p>2. html 요소에 출력 - element.innerHTML()
<button onclick="document.getElementById('print').innerHTML='출력'">출력</button>
</p>
<div id="print" style="border: 1px solid #a5f6c8;">버튼 누르면 여기에 출력됨</div>

바디 부분이 전체가 변경되는게 아니라 지정해준 id에 해당하는 요소만 찾아서 그 영역에 해당하는 값을 수정해준다.

출력 버튼을 누르게 되면...

버튼을 누른 후

3. alert()

경고창에 내용 출력됨

<p>3. 대화상자(경고창)에 출력 - alert()
<button onclick="alert('출력')">출력</button>
</p>

버튼을 누르면...

경고창에 입력된 데이터 내용 출력되고 확인 버튼으로 구성되어 있음

4. console.log()

개발자 도구에서만 확인할 수 있는 부분
log역할

<p>4. 개발자 도구의 콘솔에 출력 - console.log()
<button onclick="console.log('출력')">출력</button><!-- 개발자 도구에서만 확인할 수 있는 부분, log역할 -->
</p>
<hr>

버튼을 누르면...

개발자 도구(F12)에 있는 콘솔창에서 로그를 확인 할 수 있다.

콘솔창에서 확인

html에서 javascript 입력 방법

1. confirm('메시지')

기본값으로 확인/취소가 있는 대화상자로 (확인/취소) 입력 -> 변수에 저장

<p>1. 확인/취소 대화상자로 입력 - confirm('메시지')
<button onclick="func1()">입력</button>
</p>
<script type="text/javascript">
//자바스크립트 코딩 영역
function func1() {
	//var : 변수임을 선언해줌
	var r = confirm('메시지 출력');// r은 변수
	console.log(r);//변수 r에 저장된 값을 콘솔에 출력
	if (r == true) {
		alert("확인을 누르셨습니다.")
	}
	else {
		alert("취소를 누르셨습니다.")
	}
}
</script>

입력 버튼을 누르면 func1()이 실행되고..

입력 버튼을 누르면...

함수에 있는 명령문들이 실행된다. confirm()으로 메시지 출력과 함께 확인/취소 값을 받아서 변수에 저장하고

콘솔창에 변수에 들어있는 값을 출력해주고

확인/취소인지 if문으로 조건으로 판별하여 alert()를 실행해준다.

2. prompt('메시지')

대화상자에 입력창이 함께 있어서 입력 받은 데이터를 저장함 -> 변수에 저장

<p>2. 입력(문자열) 대화상자로 입력 - prompt('메시지')
<button onclick="func2()">입력</button>
</p>
<div id="pp" style="border: 1px solid #a5f6c8;">입력이 여기에 출력됨</div>
<script type="text/javascript">
var r2;
function func2() {
	r2 = prompt("이름을 입력하세요.")
	alert(r2 + "님 환영합니다")
	document.getElementById('pp').innerHTML= r2 + ' 님 환영합니다'
}
</script>

입력 버튼을 누르면...

대화상자가 열리고 입력창에 데이터를 입력한다.

alert()창이 먼저 뜨고

document.getElementById('pp').innerHTML을 실행해서 id가 pp인 영역이 수정되어서 출력됨.

자바스크립트가 올 수 있는 다양한 위치

스크립트 위치는 여러곳에 위치할 수 있음
스크립트가 나뉘어져있어도 코드상 내용을 유지되기때문에 이어짐, 하나의 변수를 모든 영역에서 공유해서 사용함
변수 var 선언을 안해도 변수에 데이터형이 변해도 자동으로 데이터형이 바뀜
자바스크립트 실행 순서는 작성 순(위에서 아래)
분할된 스크립트 영역은 한 문서이기 때문에 하나의 문서 영역으로 통합되어 사용됨.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트 위치</title>
<script type="text/javascript">
	//head 영역 1
	var num = 0;
	document.write("head 태그 내 실행 : " + num + "<br>");
</script>
<script type="text/javascript">
	//head 영역 2
	//var num = 1;
	document.write("head 태그 내 실행 : " + num + "<br>");
</script>
</head>
<body>
	<script type="text/javascript">
		//body 영역 1
		var num = 2;
		document.write("body 태그 내 실행 : " + num + "<br>");
	</script>
	<div></div>
	<script type="text/javascript">
		//body 영역 2
		var num = 3;
		document.write("body 태그 내 실행 : " + num + "<br>");
	</script>
</body>
<script type="text/javascript">
	//제 3의 영역
	var num = 4;
	document.write("제 3의 영역 내 실행 : " + num + "<br>");
</script>
</html>

외부 스크립트 불러오기

ex_js.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 스크립트 불러오기</title>
<script src="myscript.js"></script>
<style type="text/css">/* 외부 js파일에 있는 html에 스타일 적용도 가능*/
div {
	border: 1px solid red;
}
</style>
</head>
<body>
<p>그냥 단락입니다.</p>
<script src="myscript.js"></script>
<script type="text/javascript" src="./ejs/myscript02.js"></script><!-- "." 점이 프로젝트를 의미하고 물리적인 공간으로 치면 WebContents를 의미함 -->

<button onclick="ck01(100)">버튼</button>
</body>
</html>

myscript.js

/**
 * 외부에 만든 스크립트 파일
 */

document.write("<script src='ejs/myscript02.js'></script>");
document.write("<div style='color:red; font-size:24px;'>외부 자바스크립트 출력</div>");

myscript02.js

document.write("<div style='color:green; font-size:36px;'>외부 자바스크립트 출력</div>")

function ck01(ival) {
	alert(ival);
}

자바스크립트 html 불러오기 자바스크립트 innerhtml 자바스크립트 html 연결 자바스크립트 html 추가 자바스크립트 html 넣기

자바스크립트 값 html 출력 - jabaseukeulibteu gabs html chullyeog

자바스크립트 출력

자바스크립트 출력

window.alert() 메소드

예제

HTML DOM 요소를 이용한 innerHTML 프로퍼티

예제

document.write() 메소드

예제

예제

console.log() 메소드

예제

연습문제

자바스크립트를 쓰는 이유 :

전체 코드

세부 설명

html에서 javascript 출력 방법

html에서 javascript 입력 방법

자바스크립트가 올 수 있는 다양한 위치

관련 게시물

광고하는

최근 소식

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의