[javascript] HTML 본문에 JavaScript를 포함하는 것은 나쁜 습관입니까?

Program / 글쓴이

제가 작업중인 팀은 <script>HTML 페이지 본문의 임의의 위치에 태그 를 사용하는 습관을 갖게 되었습니다. 예를 들면 :

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

나는 이것을 전에 본 적이 없었다. 내가 테스트 한 몇 가지 브라우저에서 작동하는 것 같습니다. 그러나 내가 아는 한, 이와 같은 곳에 스크립트 태그를 넣는 것은 유효하지 않습니다.

내가 잘못? 이와 같이 div 태그 내에 스크립트 태그를 넣는 것이 얼마나 나쁜가요? 알아야 할 브라우저 호환성 문제가 있습니까?

답변

완벽하게 유효합니다.

마크 업에 큰 코드 블록을 섞고 싶지는 않지만 (외부 스크립트를 사용하는 것이 더 좋습니다) 다음과 같은 경우에 유용 할 수 있습니다.

  • 점진적 향상을위한 추가 바인딩 정보를 추가합니다 (데이터가 클래스 이름에 적합하지 않거나 속성에서 확장 정보를 숨기는 다른 접근 방식). 또는

  • 창로드 / 문서 준비를 기다리는 대신 가능한 한 빨리 스크립팅 된 향상을 시작해야합니다. 이것의 예는 너무 늦게 발사되면 짜증을 낼 수있는 자동 초점입니다.

<style>허용되지 않는 요소를 생각하고있을 수 있습니다 <body>(그러나 대부분의 브라우저에서 허용하지만).

답변

사실 꽤 흔합니다. 예를 들어 Google의 분석 추적 코드 는 다음 구문 만 사용합니다.

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

Google에 충분하다면 …

답변

이는 유효하며 서버 측 프레임 워크와 코드의 특성에 따라 때로는 피하는 것이 매우 어렵습니다.

답변

여러 사람이 언급했듯이 유효하고 작동하며 널리 사용됩니다.

의미론이 권장하는 한 (또는 최소한 권장하는 데 사용되는) 모범 사례는 헤더 내부에 스크립트 태그를 배치하는 것입니다.

성능을 고려한보다 현대적인 모범 사례에서는 스크립트 태그 (외부 및 인라인)를 body 태그 바로 앞에 배치하여 JavaScript 코드가 실행되기 전에 마크 업이 완전히 렌더링 될 수 있도록하는 것이 좋습니다.

코드를 더 쉽게 이해하고 유지 관리 할 수 ​​있도록 코드가 외부 파일에 있고 이벤트를 DOM (Google 눈에 잘 띄지 않는 JavaScript)에 바인딩하는 “눈에 잘 띄지 않는 JavaScript”가 권장됩니다.

JavaScript를 인라인으로 사용하는 것이 유용한 한 가지 경우는 서버 측에만 존재하는 값으로 변수를 초기화 한 다음 나중에 외부 JavaScript 코드에서 사용하는 것입니다.

답변

나는 외부 스크립트에 대한 참조를 머리에 넣고 일을 시작하고 위젯을 초기화하는 스크립트를 본문에 넣는 것을 선호합니다.

실행하기 매우 쉬운 문제는 본문의 스크립트 요소가 그 뒤에 오는 요소에 액세스 할 수 없다는 것입니다. 또한 관련된 불쾌한 브라우저 호환성 문제는 IE가 스크립트 요소가 해당 요소를 수정하는 것을 허용하지 않는다는 사실입니다. 따라서 다음과 같은 경우 :

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

IE는 귀하의 페이지를 좋아하지 않을 것입니다. IE의 구 버전은 이것에 대해 매우 비밀스러운 오류 메시지를 제공하거나 전체 페이지를 비 웠지만 IE8은 설명적인 오류 메시지를 제공하는 것 같습니다.

스크립트가 액세스하기에 안전한 DOM에만 액세스하도록하는 한 스크립트 요소를 본문에 넣는 것이 나쁘다고 생각하지 않습니다. 사실, IMHO는 관련 요소 뒤에 위젯을 초기화하는 스크립트를 배치하는 것이 모든 것을 한곳에 배치하는 것보다 더 읽기 쉬울 수 있습니다.

답변

유효합니다!

당신이 사용할 수있는:

<script type="text/javascript">
    //<![CDATA[

    // Some JavaScript code that perfectly validates in the W3C validator

    //]]>
</script>

나는 그것이 일반적으로 나쁜 관행이라고 말할 수 없다고 생각합니다. 사건에서 말해야합니다. 하지만 모든 자바 스크립트 코드를 같은 위치에 두는 것이 좋습니다. HTML 파일 전체에 약간의 JavaScript 코드가 있으면 약간 지저분합니다.

답변

나는 이것을 전에 본 적이 없었다. 내가 테스트 한 몇 가지 브라우저에서 작동하는 것 같습니다. 그러나 내가 아는 한, 이와 같은 곳에 스크립트 태그를 넣는 것은 유효하지 않습니다.

유효하지만 좋은 (또는 권장되는) 관행은 아닙니다.

내가 잘못? 이와 같이 div 태그 내에 스크립트 태그를 넣는 것이 얼마나 나쁜가요? 알아야 할 브라우저 호환성 문제가 있습니까?

<script>다른 요소 아래에를 배치하는 데 문제가 없습니다 (하지만 <head>또는 안에 있어야 함 <body>). 브라우저 호환성 측면에서도 문제가 없지만 웹 페이지에 JS 스크립트를 포함하면 심각한 단점이 있습니다 (어떻게 / 왜 나쁜 것으로 간주되는지) .

  1. 페이지 가중치 추가
  2. 축소의 어려움 (또는 불가능)
  3. 마이그레이션하거나 다른 페이지에 사용할 수 없습니다.
  4. 캐시 할 수 없음 (페이지가로드 될 때마다 다운로드해야 함)
  5. 우려 사항 분리 없음 (유지 관리가 더 어렵습니다)