자바스크립트 html 파일 불러오기 - jabaseukeulibteu html pail bulleoogi

Question

html 안에 html을 넣고 싶었다.

목차 Show

(1) inline에 Js 코드 넣기
(2) inline에 Script연결하기 (getElementById, addEventListener)
(3) Script for Body (파일 연결하기!)
(4) Script for Head (window.onload)
(5) Script for Head ( defer)

html로 문서를 작성 중이었는데 하나의 파일이 너무 지저분해지는 것 같아서 각 세부내용들은 다른 파일에 작성하고 불러오는 것이 목적이었다.

위처럼 contents라는 id를 가진 div 안에 contents.html에 작성된 내용을 넣고 싶었다.

Javascript의 fetch를 이용해서 html text를 가져와 innerHtml을 이용하면 손쉽게 해결할 수 있었다.

물론 이 방법은 index.html을 그냥 브라우저에서 여는 형식으로는 동작하지 않는다. fetch를 이용하는 방법이기에 이 글을 읽는 사람이라면 알고 있을 것이다.

async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

async function importPage(target) {
    document.querySelector('#' + target).innerHTML = await fetchHtmlAsText(target + '.html');
}

위의 두 가지 함수만 이용하면 id로 요소를 검색한 뒤 해당 요소 안에 id와 동일한 파일명의 html을 넣을 수 있다.

이렇게 사용하면

contents라는 id를 가진 div 안에 contents.html의 내용이 들어가는 것을 확인할 수 있다.

Reference

stack overflow, How do I load an HTML page in a div using JavaScript?

Basemenks

생활코딩 '웹브라우저와 Javascript' 내용을 한번 더 설명하는 글입니다.

이번 시간에는 HTML 파일과 자바스크립트를 연결하는 방법에 대해서 살펴보려고 한다.

<순서>

1. inline에 Js 코드 넣기

2. inline에 Script연결하기 (getElementById, addEventListener)

3. Script for Body

4. Script for Head (window.onload)

5. Script for Head ( defer)

이게 버튼!

위 사진의 버튼을 누르면, Hello world라고 말해주는 브라우저를 만들어볼것이다.

(1) inline에 Js 코드 넣기

inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다.

장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다.

<!DOCTYPE html>
<html>
    <body>
        <input type="button" onclick="alert('Hello world')" value="Hello world" />
    </body>
</html>

버튼을 누르면 Hello world를 외친다.

위 코드에서는, button을 클릭한다면, 'Hello world' 을 외쳐달라는 JS 코드가 짜여져있다.

💡 태그 안에 JS 코드를 넣는 것은, 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다.

(2) inline에 Script연결하기 (getElementById, addEventListener)

onclick을 사용하지 않고 script를 넣는다면 다음과 같이 쓸 수 있다.

<srcipt> 라는 태그를 따로 만들어서 그 안에다가 JS 코드를 집어넣는다.

< !DOCTYPE html >
  <html>
    <body>
      <input type="button" id="hw" value="Hello world" />
      <script type="text/javascript">
        var hw = document.getElementById('hw');
        hw.addEventListener('click', function(){
          alert('Hello world');
        })
      </script>
    </body>
  </html>

getElementById('hw')는 HTML에서 hw라는 ID를 가진 요소를 찾아, 이를 나타내는 'Element 객체'를 반환한다.

아직 우리는 element가 무엇인지 모르기 때문에, 그냥 'HTML 요소를 JS에서 쓰일 객체로 만든 것'이라고 이해하고 넘어간다.

hw.addEventListener('click', func)는 hw를 click할 때마다 func을 실행시켜주는 메서드이다. 위 코드에서는 button을 눌러주면 func가 실행될 것이다.

하지만 위 코드는 JS코드의 길이가 더 길어진다면 상당히 보기 불편한 코드이다.

💡 엥간하면 JS와 CSS는 외부 파일을 만든 후 불러오는 것이 가독성과 수정에 훨씬 좋다.

(3) Script for Body (파일 연결하기!)

html파일과 script.js을 준비해준다!

js파일을 따로 만들고 이를 body에서 불러주는 방법이다.

이 때, script 내의 type 은 크게 적어주지 않아도 되지만, 혹시 모를 호환성에 대비해서 적어준다.

sript -> javascript , style -> css 인 것이 default 값이라고 한다!

<!DOCTYPE html>
<html>
<body>
	<input type="button" id="hw" value="Hello world" />
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

script.js파일은 다음과 같이 만든다.

var hw = document.getElementById('hw');
hw.addEventListener('click', function () {
  alert('Hello world');
})

💡 이 코드는 body의 내용을 모두 읽어온 후에 JS 를 불러오기 때문에, JS 가 실행되기까지 오래 걸릴 수 있는 단점이 존재!

(4) Script for Head (window.onload)

html파일과 script2.js을 준비해준다!

js파일을 따로 만들고 이를 Head에서 불러준다.

중요한 건 js파일을 고치지 않고 head에서 그냥 불러버리면,

body를 파싱하기 전에 scipt를 먼저 읽으므로 오류가 발생한다.

따라서 window.onload 라는 것을 JS 파일에 추가해준다!

<!DOCTYPE html>
<html>
    <head>
        <script src="script2.js"></script>
    </head>
    <body>
        <input type="button" id="hw" value="Hello world" />
    </body>
</html>

아래와 같이 script2.js를 만들어준다.

window.onload = function () {
  var hw = document.getElementById('hw');
  hw.addEventListener('click', function () {
    alert('Hello world');
  })
}

♣ window.onload = function(){} 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수다.

(5) Script for Head ( defer)

html파일과 script3.js을 준비해준다!

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" defer src="script3.js"></script>
    </head>
    <body>
        <input type="button" id="hw" value="Hello world" />
    </body>
</html>

요로코롬 defer을 사용해줄 수도 있다. 이는 외부 스크립트를 참조하는 경우에만 사용 가능하다.

var hw = document.getElementById('hw');
hw.addEventListener('click', function () {
  alert('Hello world');
})

그렇다면 scirpt도 그대로 쓸 수 있다.

♣ defer : 브라우저가 스크립트를 문서 분석 이후에 실행해야 함을 나타내는 불리언 속성이다.

이렇게 JS코드를 HTML에 어떻게 연결하는지 알아봤다.

다음 글에는 어떻게 더 동적으로 JS코드가 HTML에서 작동하는 지에 대해서 살펴볼 것이다!

< 글에서 사용한 기술들!>

https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

https://developer.mozilla.org/ko/docs/Web/HTML/Element/script#attr-defer

< 이전-다음 발행글 >

2021.08.23 - [💻 개발공부/📱Web에서 JS 사용하기] - 1. HTML코드에 CSS와 JS코드 넣기 (Web Javascript/document.body/className)

2021.08.24 - [💻 개발공부/📱Web에서 JS 사용하기] - 3. getElementsByTagName 메서드로 브라우저 변화시키기

.Js HTML 실행

자바스크립트 html 파일 불러오기 - jabaseukeulibteu html pail bulleoogi

Reference

Basemenks

(1) inline에 Js 코드 넣기

(2) inline에 Script연결하기 (getElementById, addEventListener)

(3) Script for Body (파일 연결하기!)

(4) Script for Head (window.onload)

(5) Script for Head ( defer)

관련 게시물

HTML 이미지 경로 오류 - HTML imiji gyeonglo olyu

모바일 시트라 오류 - mobail siteula olyu

Vue css 적용 안됨 - Vue css jeog-yong andoem

Html 입력값 받기 - html iblyeoggabs badgi

우분투 설치 바이오스 - ubuntu seolchi baioseu

Javascript 한글 길이 제한 - Javascript hangeul gil-i jehan

R 명령 되돌리기 - R myeonglyeong doedolligi

라즈베리 파이 픽스호크 제어 - lajeubeli pai pigseuhokeu jeeo

테 트릭스 치트 오 매틱 - te teuligseu chiteu o maetig

Vscode 가상환경 연결 - vscode gasanghwangyeong yeongyeol

광고하는

최근 소식

Lg 클립보드 복구 - lg keullibbodeu boggu

세 레비 잡는 법 - se lebi jabneun beob

마세라티 콰트로포르테 풀체인지 - maselati kwateulopoleute pulcheinji

브라질리언 레이저 제모 병원 추천 - beulajillieon leijeo jemo byeong-won chucheon

딸기 씨 키우기 - ttalgi ssi kiugi

스타듀밸리 마우스 오류 - seutadyubaelli mauseu olyu

마우스 자동클릭 설정 - mauseu jadongkeullig seoljeong

갤럭시 A31 단점 - gaelleogsi A31 danjeom

실비 키우기 pc 다운로드 - silbi kiugi pc daunlodeu

식단 조절 없이 근력 운동 - sigdan jojeol eobs-i geunlyeog undong

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의