Javascript 코드를 HTML 페이지에서 출력하기

Javascript 코드를 HTML 파일에서 Text로 출력하는 방법에 대해 다뤄보자

 

🎨HTML & CSS 작업

Javascript 코드를 출력할 HTML 파일이 먼저 필요하기 때문에,

HTML 기본 구조 파일의 body태그 안에 다음과 같이 작성해주었다. 

    <div id="printJS">
        <div id="explainText">
            Printing Javascript Output Value:
        </div>
        <div id="printingBox">
        </div>
    </div>

다음은 css 작업인데 내용 보기 좋으라고 하는 거라 스킵해도 별 상관은 없다

#explainText{
    color: navy;
    font-size: 20px;
    margin-bottom: 15px;
}

#printingBox{
    width: 850px;
    height: 400px;
    border: 2px solid silver;
    color: green;
    padding: 10px 0px 0px 15px;
}

대략 이런 화면이 나오는데, box라는 글자가 써져있는 곳에 Javascript 코드를 출력해볼 것이다.

❓Javascript에서 HTML 을 조작하는 방법

Javascript 코드의 실행값을 HTML에서 출력하는 과정은 Javascript를 통해 HTML을 조작하는 것으로 볼 수 있다.

좀 더 구체적으로 말하자면 DOM으로 HTML Element(요소)를 조작하는 것이다.

 

여기서 HTML 요소라는 것은 <p>이것은 문단입니다. </p>와 같이 내용을 포함해서 시작 태그와 종료 태그까지를 하나의 요소로 볼 수 있다.

 

그렇다면 DOM은 뭘까?

DOM이란

• Document Object Model = 문서 객체 모델
• HTML 요소를 자바스크립트 객체(Object)처럼 조작할 수 있게 만든 모델/구조
• DOM을 이용해서 HTML로 구성된 웹페이지에 Javascript 코드를 적용할 수 있다

이 DOM과 이벤트를 통해 정적인 HTML 페이지를 동적으로 만드는 것도 가능하다.

 

이번 포스팅에서는 Javascript의 코드를 HTML페이지에 띄우는 정도로만 접근해보자 

 

HTML 요소를 Javascript 변수에 저장하기

미리 작성해둔 HTML 파일에서 우리가 Javascript 코드를 띄울 곳은 회색 박스 내부이므로, printingBox가 id인 요소만을 지정해야 한다.

이때 사용하는 함수가 getElementById() 함수이다. 형태는 다음과 같다

 

getElementById() 기본 형태

var [HTML요소를 저장할 변수 이름] = document.getElementById("[지정할 요소의 id값]");

이걸 위의 예제에 적용하면 다음과 같다

 

예제

var printingBox = document.getElementById("printingBox");

여기서 document는 Javascript 코드를 실행하는 html문서라고 생각하면 된다. 

id가 printingBox인 HTML요소를 가져와서 printingBox 라는 변수에 담아두는 코드이다.

 

이렇게 원하는 HTML 요소를 지정해서 Javascript 코드에서 값을 저장하는 단계까지 성공했는데,

여기서 getElementById 외에도 querySelector()와 getElementsByClass() 함수를 사용할 수도 있다.

 

 

Javascript에서 HTML 요소에 원하는 값 집어넣기

이렇게 원하는 HTML 요소를 지정했으면 해당 요소의 안에 원하는 값을 할당해주면 되는데 

여기에 필요한 속성으로 innerHTML, innerText, insertAdjacentHTML , insertAdjacentText등이 있다. 

뒤에 두 속성은 DOM에 대해 좀 더 깊게 설명해야 하므로 다음에 알아보는 걸로 하고,

 

가장 자주 사용되고 지금 실습에 필요한 앞의 두 속성만 알아보자

• innerHTML : HTML요소의 태그까지 가져온다. HTML 특정 위치에 새로운 HTML을 삽입할 때 사용할 수 있다.
• innerText : innerHTML과 유사하지만 HTML 요소의 내용만 가져온다.

innerHTML vs innerText 차이점 비교

먼저 각 속성이 가지는 값을 위의 예시에 적용하여 비교해보면 다음과 같다

printingBox.innerHTML; // <div id="printingBox"> box <div> 를 모두 가져온다
printingBox.innerText; // box 만 가져온다

다음은 직접 이 속성에 새로운 값을 넣을 때 차이점을 보자

printingBox.innerHTML = "<span style=color:red'> A </span>"

innerHTML은 위와 같이 스타일이 적용된 태그를 포함해서 요소 내부에 새로운 요소를 넣어줄 때

새로운 요소의 내용 부분인 A만 페이지에서 보이고 style도 제대로 적용되어 span태그로 작성된 요소가 내가 지정한 박스 요소 안에 생겼음을 알 수 있다.

 

printingBox.innerText = "<span style=color:red'> A </span>"

반면 innerText는 같은 값을 넣어도

전체 내용이 따라 나오며 당연히 스타일도 적용되지 않아서 기존 값인 초록색 글씨가 나온다.

상황에 맞게 잘 적용하여 사용하면 되겠다.

 

여기까지 왔으면 이제 원하는 Javascript 코드를 작성해서 위의 방식대로 HTML요소에 넣어주면 끝이다.

나는 예시로 다음과 같은 코드를 작성하여

function practiceCode() {
    var a = 10;
    var b = 5;
    var result = a + b;
    return result;
}

innerHTML로 넣어주었다.

printingBox.innerHTML = "<span id='textPrinted'>" + practiceCode() +"</span>"

(Template Literal 이 사용 가능하다면 `<span id="textPrinted"> ${ practiceCode() }</span>` 로 작성해도 똑같다.)

 

페이지에서는 다음과 같이 나온다.

물론 함수를 따로 만들지 않고 함수가 있는 위치에 바로 원하는 연산을 하는 코드를 작성해도 된다.

 

 

전체 코드

var printingBox = document.getElementById("printingBox");
printingBox.innerHTML = "<span id='textPrinted'>" + practiceCode() +"</span>"


function practiceCode() {
    var a = 10;
    var b = 5;
    var result = a + b;
    return result;
}

 

이렇게 Javascript 코드를 HTML에서 출력하여 바로 볼 수 있는 연습장 사이트가 완성되었다.

 

html,css를 포함한 전체 코드

GitHub - joraeng/javascript_notepad