Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

GUMI Dev

[JS Tutorial] 자바스크립트 출력 본문

Web/JavaScript

[JS Tutorial] 자바스크립트 출력

GUMI Dev 2021. 11. 22. 18:02

innerHTML

document.getElementByID(id)

HTML의 요소에 접근하기 위해서는, 자바스크립트에서 document.getElementByID(id) 메서드를 사용해야 한다. 

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

 

id 속성(attribute)은 HTML 요소를 정의한다. 

* 여기서 속성(attribute)은 html 문서 내에서 정적인 즉, 바뀌지 않는 속성을 말한다. 

attribute는 html 요소의 추가적인 정보를 전달하고 이름="값" 이렇게 쌍으로 온다. 

예를 들어, <div class="my-class"></div>를 보면 div 태그가 class 하는 값이 'my-class'인 attribute를 가지고 있다. 

 

innerHTML 속성(property)은 HTML 내용을 정의한다.

* 여기서 속성(property)은 html DOM 안에서 동적인 즉, 바뀌는 속성 또는 그 값을 의미한다. 

property는 attribute에 대한 html DOM 트리 안에서의 표현이다. 

예를 들어, <div class="my-class"></div>를 보면 attribute 값이 'my-class'이며 이름이 'className'인 property를 가진다. 

 

HTML 요소의 innerHTML 속성을 바꾸는 것은 HTML에 데이터를 디스플레이하는 흔한 방식이다. 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <p id="demo"></p>
 <script>
     document.getElementById("demo").innerHTML = 11 + 22;
 </script>
</body>
</html>

 

★ 속성(attribute)와 요소(property)의 차이

attributes는 HTML 텍스트 문서에 있는 것이고 properties는 HTML DOM 트리에 있는 것이다.

이것은 attribute는 변하지 않고 초기(default)값을 전달한다는 것을 의미한다.

반면 HTML properties는 변할 수 있다.

예를 들어 사용자가 체크박스를 체크했거나 input 박스에 텍스트를 넣었거나 JavaScript로 값을 변경하면 property의 값은 변한다.

이렇듯 property는 DOM안에 존재하고 동적이지만 attribute는 HTML 문서안에 존재하고 결코 변하지 않는다. 

 

element는 페이지에 있는 각 탭들을 가리킨다. <body>, <div>, <a> 등이 해당된다. 

 

속성(attribute)는 element가 가지고 있는 것들이다. element의 형식을 지정한다. 

<div id="A2" style="...">text<div>
<a href = "젤리.htm" target="사탕">과자</a>

위 스크립트에서 속성에 해당되는 것은 "id", "style", "href", "target"이다. 

 

object는 자바스크립트와 HTML에서 사용하는 최상위의 존재다. 창을 가리키는 window 그리고 body를 가리키는 document, link, form, layer, all 등 페이지에 있는 모든 것들은 하나의 object다. 

이 object는 계층이 있고 각자에 지정된 역할을 수행한다. object에 지정되어 있는 것은 property, method, event가 있다. 

 

property는 object가 가지고 있는 구성요소다. window object가 가지고 있는 property로는 parent, history, innerHeight, self, status 등등 object가 이들의 property를 가지고 object 자신의 역할을 한다. 또한 CSS style에 지정한 것들도 W3C에서 property라고 부른다. 

<div style="color:red; font-size:15pt;">

위 스트립트에서 "color"와 "font-size"가 style property다. 

 

document.write()

document.write()는 목적을 테스트하기에 편리하다. 

document.write() 메서드는 오직 테스트를 위해 사용된다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <script>document.write(11+22);</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <h1>자바스크립트 document.write() 기능</h1>
  <p>HTML document 가 로드된 후 document.write()를 사용하면, 
  HTML의 모든 것들이 지워지고 자바스크립트로 작성한 것에 해당되는 내용만 남게된다. </p>

  <button type="button" onclick="document.write(11+22)">이 버튼을 누르면 
  HTML 상의 것들이 사라진다. </button>
</body>
</html>

 

window.alert()

웹페이지 상에서 데이터를 경고 대화 상자의 형태로 띄울 수 있다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <p id="demo"></p>
 <script>
    window.alert("demo");
 </script>
</body>
</html>

 

* window.alert() = alert()

window.alert()에서 window를 제외하고 alert()라고 표기해도 상관없다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <p id="demo"></p>
 <script>
    alert("demo");
 </script>
</body>
</html>

 

console.log()

console.log 메서드는 디버깅의 목적으로 브라우저에 데이터를 디스플레이할 때 사용한다. 

console.log의 내용은 콘솔창에서만 확인할 수 있다. 

console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);

 

 

JavaScript Print

자바스크립트 인쇄하기

window.print() 메서드로 현재 윈도우에 있는 컨턴츠를 프린트하도록 할 수 있다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>

 

'Web > JavaScript' 카테고리의 다른 글

[JS Tutorial] var, let, const  (0) 2021.11.23
[JS Tutorial] 세미콜론  (0) 2021.11.23
[JS Tutorial] 자바스크립트 위치  (0) 2021.11.22
[threejs] Creating a scene  (0) 2021.08.01
[threejs] VSCode에서 three.js npm module 설치하기  (0) 2021.07.18
'Web/JavaScript' Related Articles more