고정 헤더 영역
상세 컨텐츠
본문
자바스크립트 출력
자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있습니다.
자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다.
1. window.alert() 메소드
2. HTML DOM 요소를 이용한 innerHTML 프로퍼티
3. document.write() 메소드
4. console.log() 메소드
메소드(method)와 프로퍼티(property)에 대한 더 자세한 사항은 자바스크립트 객체의 개념 수업에서 확인할 수 있습니다.
window.alert() 메소드
자바스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법은 window.alert() 메소드를 이용하는 것입니다.
window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해 줍니다.
예제
<script>
function alertDialogBox() {
alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
}
</script>
대화 상자에 대한 더 자세한 사항은 자바스크립트 대화 상자 수업에서 확인할 수 있습니다.
window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있습니다.
HTML DOM 요소를 이용한 innerHTML 프로퍼티
실제 자바스크립트 코드에서 출력을 위해 가장 많이 사용되는 방법은 HTML DOM 요소를 이용한 innerHTML 프로퍼티를 이용하는 방법입니다.
우선 document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택합니다.
그리고서 innerHTML 프로퍼티를 이용하면 선택된 HTML 요소의 내용(content)이나 속성(attribute)값 등을 손쉽게 변경할 수 있습니다.
예제
<script>
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다!";
</script>
document.write() 메소드
document.write() 메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력합니다.
따라서 document.write() 메소드는 대부분 테스트나 디버깅을 위해 사용됩니다.
예제
<script>
document.write(4 * 5);
</script>
하지만 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 됩니다.
따라서 document.write() 메소드를 테스트 이외의 용도로 사용할 때에는 충분히 주의해서 사용해야 합니다.
예제
<button onclick="document.write(4 * 5)">버튼을 눌러보세요!</button>
console.log() 메소드
console.log() 메소드는 웹 브라우저의 콘솔을 통해 데이터를 출력해 줍니다.
대부분의 주요 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용할 수 있습니다.
이러한 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되므로, 디버깅하는데 많은 도움을 줍니다.
예제
<p>F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.</p>
<script>
console.log(4 * 5);
</script>
test4.html
0.00MB
test5.html
0.00MB
test7.html
0.00MB
test8.html
0.00MB
test9.html
0.00MB
color.js
0.00MB
images.zip
0.18MB
Test4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function myfunction() {
document.getElementById("name").innerHTML =
"홍길동";
document.getElementById("age").innerHTML =
"30살";
document.getElementById("person").innerHTML =
"대학생";
}
</script>
</head>
<body>
<p>이름 : <span id = "name"></span></p>
<p>나이 : <span id = "age"></span></p>
<p>소속 : <span id = "person"></span></p>
<p id="demo1"></p>
<p id="demo">안녕하세요 자바스크립트를 소개합니다.</p>
<button
type="button"
onclick='document.getElementById("demo").innerHTML = "Hello Javascript"'
>
Click me!!
<button
type="button"
onclick='document.getElementById("name").innerHTML = "이순신"'
>
바꿔줘
<button type="button" onclick="myfunction()">학생소속</button>
</button>
</body>
</html>
Test5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="demo"></h1>
<button type="button" onclick="document.write(1+2)">합계를 보여줘</button>
<script>
document.getElementById("demo").innerHTML=9+6;
document.write("안녕하세요");
document.write(3+2);
window.alert("경고알림");
alert("경고알림")
</script>
</body>
</html>
Test7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>정보입력</h1>
<form id="infoForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">나이:</label>
<input type="number" id="age" name="age"><br><br>
<label for="affiliation">소속:</label>
<input type="text" id="affiliation" name="affiliation"><br><br>
<button type="button" onclick="submitInfo()">확인</button>
</form>
<script>
function submitInfo(){
var name=document.getElementById('name').value;
var age=document.getElementById('age').value;
var affiliation=document.getElementById('affiliation').value;
var output='이름:' + name + "<br>나이:" + age + "<br>소속:" + affiliation;
document.write(output);
}
</script>
</body>
</html>
Test8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>글자색 바꾸기</title>
<style>
body {
text-align: center;
}
#heading {
color: blue;
}
#text {
color: gray;
font-size: 15px;
}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p class="text">위 텍스트를 클릭해 보세요</p>
<script src="color.js"></script>
<button type="button" onclick="myfunction()">change</button>
</body>
</html>
Test9.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id = "text" style="display: none;">사진으로 요소 대체하기</h1>
<img id="myImage" src="images/pic_bulboff.gif" style="width: 100px;">
<button onclick='document.getElementById("myImage").src = "images/pic_bulboff.gif"'>off(끄기)</button>
<button onclick='document.getElementById("myImage").src = "images/pic_bulbon.gif"'>on(켜기)</button>
<button onclick='document.getElementById("myImage").style.display = "none"'>감추기</button>
<button onclick='document.getElementById("myImage").style.display = "block"'>보이기</button><br>
<button type= "button" onclick='document.getElementById("text").style.display = "block"'>글씨보이기</button><br>
</body>
</html>
'풀스텍과정' 카테고리의 다른 글
| 50일자 학습일지_javascript (0) | 2024.07.19 |
|---|---|
| 48일차 학습일지_javascript (0) | 2024.07.18 |
| 45일차학습일지_CSS (0) | 2024.07.12 |
| 44일차학습일지_CSS (0) | 2024.07.11 |
| 43일차학습_CSS (0) | 2024.07.10 |
