Files

T

koriweb 9609c04755 docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-23 19:21:18 +09:00

6.0 KiB

Raw Blame History

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

title

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)

상위/루트: JavaScript Tutorial
관련 개념: JavaScript Introduction, JavaScript Output, JavaScript Syntax
참조 맥락: Referenced whenever deciding how and where to attach JavaScript to an HTML document.

📚 출처 (Sources)

[S1] W3Schools — JavaScript Where To — https://www.w3schools.com/js/js_whereto.asp

📝 변경 이력 (Change history)

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

6.0 KiB Raw Blame History