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.7 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 Output

🎯 한 줄 통찰 (One-line insight)

JavaScript can display data four ways — writing into an HTML element (innerHTML/innerText), HTML output via document.write(), an alert box via window.alert(), and the browser console via console.log(). [S1]

🧠 핵심 개념 (Core concepts)

Four display possibilities — innerHTML/innerText (into an HTML element), document.write() (HTML output), window.alert() (alert box), console.log() (browser console). [S1]
innerHTML is the most common — accessing an element with document.getElementById(id) and setting innerHTML is the most common way to display data in HTML. [S1]
innerHTML vs innerText — use innerHTML when you want to change an HTML element; use innerText when you only want to change the plain text. [S1]
document.write() is for testing only — using it after the document has loaded will delete all existing HTML. [S1]
console.log() is for debugging. [S1]
No print object — JavaScript has no print object/method; the only exception is window.print() to print the current window. [S1]

🧩 추출된 패턴 (Extracted patterns)

Select-then-write pattern — document.getElementById("demo").innerHTML = ... is the standard way to inject results into the page. [S1]
Testing vs production output — document.write() and alert() are quick test outputs; console.log() is the debugging channel; innerHTML/innerText are the production display. [S1]
Optional window prefix — window.alert() and alert() are equivalent because window is the global scope object. [S1]

📖 세부 내용 (Details)

JavaScript Display Possibilities — JavaScript can "display" data in four ways: writing into an HTML element using innerHTML or innerText, writing into the HTML output using document.write(), writing into an alert box using window.alert(), and writing into the browser console using console.log(). [S1]

Using innerHTML — To access an HTML element, use the document.getElementById(id) method, then use the innerHTML property to change the HTML content. Changing the innerHTML property is the most common way to display data in HTML. [S1]

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "<h2>Hello World</h2>";
</script>
</body>
</html>

Using innerText — Use the innerText property to change the plain text content of an HTML element. Use innerHTML when you want to change an HTML element; use innerText when you only want to change the plain text. [S1]

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerText = "Hello World";
</script>
</body>
</html>

Using document.write() — For testing purposes, it is convenient to use document.write(). Using document.write() after an HTML document is loaded will delete all existing HTML; the method should only be used for testing. [S1]

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>

Using window.alert() — You can use an alert box to display data. The window keyword is optional because window is the global scope object. [S1]

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>

Using console.log() — For debugging purposes, you can use the console.log() method to display data in the browser console. [S1]

<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>

JavaScript Print — JavaScript does not have any print object or print methods. You cannot access output devices from JavaScript. The only exception is that you can call the window.print() method in the browser to print the content of the current window. [S1]

<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>

🛠️ 적용 사례 (Applied in summary)

The page's own snippets are the canonical applied examples — injecting markup with innerHTML, plain text with innerText, test output with document.write()/alert(), debug output with console.log(), and window.print() on a button. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Display into an element:

document.getElementById("demo").innerHTML = "<h2>Hello World</h2>";

Debug to console:

console.log(5 + 6);

Alert box:

window.alert(5 + 6);

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

No contradictions found in the source. (The source itself cautions that document.write() after load deletes existing HTML — a caveat, not a contradiction.)

✅ 검증 상태 및 신뢰도

상태: 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 Where To, JavaScript Statements
참조 맥락: Referenced whenever results need to be shown to a user or developer.

📚 출처 (Sources)

[S1] W3Schools — JavaScript Output — https://www.w3schools.com/js/js_output.asp

📝 변경 이력 (Change history)

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

6.7 KiB Raw Blame History