[Tamwood_JS_Assignment] Fundamentals of Web Development 8.2
8.2 Where Does JavaScript Go?
8.2.1 Inline JavaScript
- In fact, inline JavaScript is much worse than inline CSS, as maintaining inline JavaScript is a real nightmare, requiring maintainers to scan through almost every line of HTML looking for your inline JavaScript.
8.2.2 Embedded JavaScript
- Embedded JavaScript refers to the practice of placing JavaScript code within a
- Like its equivalent in CSS, embedded JavaScript is okay for quick testing and for learning scenarios but is usualy avoided. as with inline JavaScript, embedded scripts can be difficult to maintain.
8.2.3 External JavaScript
- You do this via the
<script> tagas shown in Figure 8.4
- In Figure 8.4, the links to the external JavaScript file appear both in the
<head> and in the <body> elements. Generally speaking, for maintainability reasons, <script> elements are usually placed within the <head> element (and for performance reasons, after any CSS <link> elements). For performance reasons, some scripts are placed at the end of the document, just before the </body> closing tag.
- Some of the initial examples in the next chapter place the
<script> tag right before the </body> tag for a different reason. Those examples are performing DOM manipulation, which can only occur after the body/document is completely read in. However, once event handling is covered, the <script> tag will move back to the <head>.
- 임베디드 방식: 트래픽이 많은 사이트는 추가 HTTP 요청을 줄이기 위해 HTML 내에 스타일과 JavaScript를 포함하여 성능을 높일 수 있음.
- 외부 파일의 이점: 대부분의 경우, 외부 JavaScript와 CSS 파일을 사용하면, 브라우저가 여러 페이지에서 같은 파일을 캐시하여 성능이 향상될 수 있음.
- 캐싱의 중요성: 한 사이트에서 여러 페이지를 방문할 때, 외부 파일이 캐시되어 성능이 더욱 최적화됨.
8.2.4 Users without Javascript
- JavaScript 비활성 사용자: JavaScript를 사용하지 않는 데에는 다양한 이유가 있으며, 이를 무시하는 것은 잘못된 생각입니다. 특히 검색 엔진은 모든 JavaScript를 완벽하게 처리하지 못할 수 있습니다.
<noscript> 태그: HTML에서 JavaScript가 비활성화된 사용자들을 처리하는 방법으로 <noscript> 태그를 제공합니다. 이 태그 사이에 들어가는 내용은 JavaScript를 사용할 수 없는 사용자에게만 표시되며, 종종 JavaScript를 활성화하라는 메시지를 보여주거나 검색 엔진에 추가적인 텍스트를 표시하는 데 사용됩니다.
