본문으로 바로가기

자바스크립트 삽입방식과 위치

category 웹코딩/Javascript 2016.03.18 11:30

자바스크립트 삽입방식

자바스크립트를 실행하는 방법은 문서안에 <script> 태그를 이용해 작성하거나 외부의 스크립트 파일을 링크하는 것이다.

<script type="text/javascript">
//코드내용
</script>

<script type="text/javascript" src="링크주소"></script>
  • type="text/javascript" 부분은 HTML5에서는 생략할 수 있다.
  • 문서의 어느 곳이든 스크립트 배치에 제한을 두지 않는다.
  • 전자의 경우는 간단한 스크립트의 경우이거나 해당 문서에만 적용되는 코드들, 초기화등에 자주 사용된다.
  • 후자의 경우는 반복사용되는 코드들을 파일별로 저장해두고 필요에 따라 링크해 사용되곤 한다. 이와 같은 방식이 코드의 가독성과 실행순서, 의존성들을 확인하기에 수월하기 때문에 추천되는 방식이다.

자바스크립트 삽입 위치

브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료이 완료될때까지 브라우저 렌더링을 멈추게 된다.

즉, 자바스크립트의 삽입 위치에 따라 스크립트 실행순서와 브라우저 렌더링에 영향을 미친다는 것이다.

head에 삽입되는 경우

<head>
    <script>
    //코드내용
    </script>
</head>
  • 브라우저 렌더링에 방해가 되어 무거운 스크립트가 실행되는 경우 오랫동안 완성되지 못한 화면을 노출하게 된다.
  • 문서를 초기화하거나 설정하는 가벼운 스크립트들이 자주 사용된다.
  • 문서의 DOM(Document Object Model) 구조가 필요한 스크립트의 경우 document.onload와 같은 로드 이벤트가 추가되어야 에러없이 작동된다.

</body> 앞에 삽입되는 경우

.....
    <script>
    //코드내용
    </script>
</body>
  • 브라우저가 렌더링이 완료된 상태에서 스크립트가 실행되기에 콘텐츠를 변경하는 스크립트의 경우 화면에 노출된체로 변화된다.
  • 대부분의 스크립트의 위치로 추천되는 위치이다.
  • 문서의 DOM 구조가 완료된 시점에 실행되기에 별다른 추가설정이 필요없다.


신고

댓글을 달아 주세요

  1. 초보 2016.09.18 23:11 신고

    스킨 잘 사용하고 있습니다!
    궁금한 점이있어서 질문드립니다.
    제가 카테고리별로 사이드바에 다른 카테고리를 나타내고 싶습니다.
    (여기 페이지에서 예로 들자면 개발도구 카테고리를 누르면 다른 카테고리들은 사라지고 제가 원하는 카테고리를 사이드바에 나타내는 형태)

    요런것도 스크립트를 이용해서 구현할 수 있을까요?

    하루종일 찾아본 바로는
    <script>
    var CN = $(".category").text().trim();
    if (CN == "카테고리1") {
    내용;
    }
    else if{CN == "카테고리2"){
    내용;
    }

    이렇게 하면 될거같은데 저 내용부분을 어떻게 처리를 해야할지 모르겠습니다 ㅜㅜ.
    하루종일 찾아보다가 결국 해결못하고 제작자님한테 찾아왔습니다.
    답변 꼭 부탁드립니다 ㅜㅜ

    • BlogIcon 흉내쟁이 2016.09.18 23:49 신고

      우선 해당 스킨은 현재 카테고리를 처리하는 스크립트가 포함되어 있습니다. 현재 카테고리에 해당하는 a 요소에 .active 가 추가됩니다. 또 2차카테고리에 .active 가 추가될 경우 상위 카테고리에는 .tt-has-active 가 추가됩니다. 이를 활용해서 .active 및 .tt-has-active를 가진 카테고리를 제외한 다른 카테고리를 숨기면 되겠습니다.

      다만, 다른 카테고리를 숨기면 방문객들이 타 카테고리로 이동하는 것에 애로사항이 꽃피우지 않을까 싶습니다.

    • 초보 2016.09.19 00:04 신고

      헉 빠른답변 감사합니다!!
      제작자님 말씀이 일리가 있네요.

      그럼 기존 카테고리는 지우지 않고, 카테고리 아래 부분에 새로운 링크를 넣고 싶은데,

      <script> if (location.href == "") { window.alert("ㅇㅇ"); }
      </script>

      이렇게 특정 카테고리에 진입하는 스크립트는 성공을 했습니다!

      window.alert 대신에 뭔가를 넣어야 제가 원하는 <a hre에프="">임의의 페이지</a> 이런 형태로 넣을텐데 제가 html이랑 스크립트 사용법을 잘 몰라서요...

      어떤식으로 코딩을해야 조건문에 진입하면 <a hre에프="">임의의 페이지</a> 이걸 띄워줘라 이렇게 구현할수 있을까요?

      기초적인 질문해서 죄송합니다 ㅜㅜ

    • BlogIcon 흉내쟁이 2016.09.19 00:38 신고

      일단 기본적인 자바스크립트는 DOM에 접근하거나 내용을 추가하는 것이 초보자는 더 어려울수 있습니다. 이 스킨이 jQuery를 포함하고 있으니 jQuery를 사용하시길 권합니다.

      추가하시려는 링크가 사이드바의 카테고리 영역의 마지막 요소로 추가되길 원한다면

      <script>
      $(document).ready(function() {
      $('#sidebar .category_list').append('<li><a href="http://naver.com">네이버</a></li>');
      });
      </script>

      skin.html </body> 바로 앞에 위의 코드를 추가하는 방법으로 가능합니다 .

      세부적인 내용은 직접 수정하셔야겠죠.

    • 초보 2016.09.19 01:00 신고

      감사합니다!!

      큰 도움 되었습니다!

      역시 최고의 스킨입니다 ㅎㅎ 좋은 밤 되세요 ㅎㅎ

  2. BlogIcon 라오꽁 2017.04.23 17:46 신고

    CCZ_CROSS 스킨 감사히 잘 사용하고 있습니다.
    다름아니라 구글 페이지스피드 측정을 해보면
    레버리지 브라우저 캐시 항목에서 점수가 많이 깎이는 것 같은데,
    이 스킨에서 해당 항목을 설정하는 것을 알려주실 수 있을까요?
    혼자 조금 알아보았으나 프로그래밍 언어가 등장하는 부분이라 비전문가가 하기엔 너무 막막하네요...

티스토리 툴바