Files
2nd/10_Wiki/Topic_Programming/Topic_JavaScript/JavaScript_Where_To.md
T
Antigravity Agent e9cbf23ab5 docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합
이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영.

- Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들
  (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거.
- Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/
  Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/
  Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이
  존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존).
- Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/
  JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동.
- 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리.
- Topic_Programming 최종 문서 수: 2784 → 3985.
2026-07-05 00:39:13 +09:00

6.0 KiB

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit
id title category status verification_status canonical_id aliases duplicate_of source_trust_level confidence_score created_at updated_at review_reason merge_history tags raw_sources applied_in github_commit
javascript-where-to JavaScript Where To Frontend draft conceptual
script tag
external JavaScript
JS placement
script src
where to put JavaScript
B 0.89 2026-06-23 2026-06-23
javascript
js
web
frontend
w3schools
script-tag
external-js
https://www.w3schools.com/js/js_whereto.asp

JavaScript Where To

🎯 한 줄 통찰 (One-line insight)

JavaScript can live inside the HTML <head>, the <body>, or in a separate external .js file referenced with <script src="..."> — and placing scripts at the bottom of the body improves display speed. [S1]

🧠 핵심 개념 (Core concepts)

  • The <script> tag — JavaScript code in HTML is inserted between <script> and </script> tags. [S1]
  • type is optional — The type attribute is not required; JavaScript is the default scripting language. [S1]
  • Functions and events — Functions are blocks of code executed when called, often triggered by events such as a button click. [S1]
  • Placement is flexible — Scripts can be placed in <head>, <body>, or both. [S1]
  • External files — JavaScript can be stored in external files and referenced with the src attribute on a <script> tag. [S1]

🧩 추출된 패턴 (Extracted patterns)

  • Script-at-bottom pattern — placing scripts at the bottom of the <body> element improves the display speed (the script doesn't block page rendering). [S1]
  • Externalize-and-reference pattern — move function definitions into a .js file and link it with <script src="..."> to separate HTML from code and enable caching. [S1]
  • Multiple references — an external script can be referenced with a full URL, an absolute path, or just a filename. [S1]

📖 세부 내용 (Details)

The <script> Tag — JavaScript code in HTML is inserted between <script> and </script> tags. [S1]

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

The type attribute is not required; JavaScript is the default scripting language. [S1]

JavaScript Functions and Events — Functions are blocks of code that are executed when "called for", often triggered by events like a button click. [S1]

JavaScript in <head> or <body> — Scripts can be placed in either section, or both. [S1]

JavaScript in <head> — A function placed in the head section, invoked by a button click: [S1]

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

JavaScript in <body> — The same function placed in the body section. Placing scripts at the bottom of the <body> element improves the display speed. [S1]

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

External JavaScript — Scripts can be placed in external files (e.g. myScript.js). External scripts are practical when the same code is used in many different web pages. The external file contains the function only, with no <script> tags: [S1]

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

To use an external script, put the name of the script file in the src (source) attribute of a <script> tag: [S1]

<script src="myScript.js"></script>

External JavaScript Advantages — Placing scripts in external files: separates HTML and code, makes HTML and JavaScript easier to read and maintain, and cached JavaScript files can speed up page loads. [S1]

External References — An external script can be referenced in three different ways: with a full URL, with a file path, or without any path. [S1]

<script src="https://www.w3schools.com/js/myScript.js"></script>
<script src="/js/myScript.js"></script>
<script src="myScript.js"></script>

🛠️ 적용 사례 (Applied in summary)

The page's own snippets are the canonical applied examples — embedding a <script> in head vs body, factoring myFunction() into myScript.js, and the three <script src> reference styles. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Inline script in HTML:

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Reference an external file:

<script src="myScript.js"></script>

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

검증 상태 및 신뢰도

  • 상태: draft
  • 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
  • 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
  • 신뢰 점수: 0.89
  • 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

📚 출처 (Sources)

📝 변경 이력 (Change history)

  • 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Where To" page (Astra wiki-curation, P-Reinforce v3.1 format).