877acb5a8f
- Implemented exercises for array high-order methods, memory and execution, switch statements, and final review. - Added starter and answer files for each exercise to facilitate learning. - Created a runner HTML file to execute JavaScript code and display console outputs. - Updated README files to include exercise objectives, tasks, and usage instructions.
636 lines
18 KiB
HTML
636 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>JavaScript Core Runner</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f4efe6;
|
|
--panel: rgba(255, 252, 246, 0.9);
|
|
--panel-strong: #fffaf0;
|
|
--line: rgba(95, 72, 37, 0.18);
|
|
--text: #2d2417;
|
|
--muted: #6f624f;
|
|
--accent: #0e7a6c;
|
|
--accent-deep: #095d53;
|
|
--danger: #a6382b;
|
|
--warning: #a05f12;
|
|
--shadow: 0 24px 60px rgba(63, 46, 22, 0.12);
|
|
--code-bg: #1e1b16;
|
|
--code-text: #f5ecd9;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at top right, rgba(14, 122, 108, 0.16), transparent 26%),
|
|
radial-gradient(circle at bottom left, rgba(197, 137, 47, 0.12), transparent 30%),
|
|
linear-gradient(180deg, #f8f3eb 0%, var(--bg) 100%);
|
|
}
|
|
|
|
.shell {
|
|
width: min(1180px, calc(100% - 32px));
|
|
margin: 28px auto;
|
|
padding: 28px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 28px;
|
|
background: var(--panel);
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.eyebrow {
|
|
color: var(--accent);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: clamp(28px, 4vw, 44px);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.hero p {
|
|
margin: 0;
|
|
max-width: 720px;
|
|
color: var(--muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 360px minmax(0, 1fr);
|
|
gap: 18px;
|
|
}
|
|
|
|
.card {
|
|
padding: 18px;
|
|
border-radius: 22px;
|
|
border: 1px solid var(--line);
|
|
background: var(--panel-strong);
|
|
}
|
|
|
|
.card h2 {
|
|
margin: 0 0 14px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.controls {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
label {
|
|
display: grid;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
select,
|
|
button,
|
|
a.button-link {
|
|
border-radius: 14px;
|
|
border: 1px solid var(--line);
|
|
font: inherit;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
color: var(--text);
|
|
background: #fffdf7;
|
|
}
|
|
|
|
.button-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
button,
|
|
a.button-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 44px;
|
|
padding: 0 16px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
|
|
}
|
|
|
|
button:hover,
|
|
a.button-link:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.primary {
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
|
|
}
|
|
|
|
.secondary {
|
|
color: var(--text);
|
|
background: #fffdf7;
|
|
}
|
|
|
|
.meta {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px dashed var(--line);
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.meta strong {
|
|
color: var(--text);
|
|
}
|
|
|
|
.workspace {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.workspace-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.workspace-header p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
background: rgba(14, 122, 108, 0.1);
|
|
color: var(--accent-deep);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.console {
|
|
min-height: 420px;
|
|
padding: 18px;
|
|
border-radius: 18px;
|
|
background: var(--code-bg);
|
|
color: var(--code-text);
|
|
font: 14px/1.7 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.console-line {
|
|
margin: 0;
|
|
}
|
|
|
|
.console-line + .console-line {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.console-line.error {
|
|
color: #ffb3a7;
|
|
}
|
|
|
|
.console-line.warn {
|
|
color: #ffd483;
|
|
}
|
|
|
|
.console-line.info {
|
|
color: #99f0da;
|
|
}
|
|
|
|
.tips {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 16px;
|
|
border-radius: 18px;
|
|
background: rgba(14, 122, 108, 0.06);
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.tips strong {
|
|
color: var(--text);
|
|
}
|
|
|
|
iframe {
|
|
width: 0;
|
|
height: 0;
|
|
border: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
@media (max-width: 920px) {
|
|
.layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.shell {
|
|
width: min(100% - 18px, 100%);
|
|
margin: 12px auto;
|
|
padding: 18px;
|
|
border-radius: 22px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<section class="hero">
|
|
<div class="eyebrow">03-javascript-core</div>
|
|
<h1>JavaScript 练习运行器</h1>
|
|
<p>
|
|
这个页面可以直接双击打开。选择练习和版本后，点击“运行代码”就会在下方看到
|
|
<code>console.log()</code> 输出、警告和报错。
|
|
</p>
|
|
</section>
|
|
|
|
<section class="layout">
|
|
<aside class="card">
|
|
<h2>运行设置</h2>
|
|
<div class="controls">
|
|
<label>
|
|
选择练习
|
|
<select id="exerciseSelect"></select>
|
|
</label>
|
|
|
|
<label>
|
|
选择版本
|
|
<select id="variantSelect">
|
|
<option value="starter">starter.js</option>
|
|
<option value="answer">answer.js</option>
|
|
</select>
|
|
</label>
|
|
|
|
<div class="button-row">
|
|
<button id="runButton" class="primary" type="button">运行代码</button>
|
|
<button id="clearButton" class="secondary" type="button">清空输出</button>
|
|
</div>
|
|
|
|
<div class="button-row">
|
|
<a id="openScriptLink" class="button-link secondary" href="./01-variables-and-console/starter.js">打开脚本</a>
|
|
<a id="openReadmeLink" class="button-link secondary" href="./01-variables-and-console/README.md">打开说明</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meta">
|
|
<div><strong>当前文件：</strong><span id="filePathText">./01-variables-and-console/starter.js</span></div>
|
|
<div><strong>说明文档：</strong><span id="readmePathText">./01-variables-and-console/README.md</span></div>
|
|
<div><strong>提示：</strong>修改完脚本后，回到这里再次点击“运行代码”即可重新执行。</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="workspace">
|
|
<div class="workspace-header">
|
|
<div>
|
|
<h2>控制台输出</h2>
|
|
<p>这里会显示 <code>console.log()</code>、<code>console.warn()</code>、<code>console.error()</code> 和运行时错误。</p>
|
|
</div>
|
|
<div class="status" id="statusBadge">等待运行</div>
|
|
</div>
|
|
|
|
<div id="consoleOutput" class="console" aria-live="polite"></div>
|
|
|
|
<div class="tips">
|
|
<div><strong>调试建议：</strong>卡住时多打印变量，先看每一步结果，再改逻辑。</div>
|
|
<div><strong>断点方式：</strong>你可以在对应的 <code>.js</code> 文件里加上 <code>debugger;</code>，然后重新运行。</div>
|
|
<div><strong>适用范围：</strong>当前运行器适合这套纯 JavaScript 控制台练习，不依赖 Node。</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<iframe id="runnerFrame" title="JavaScript runner"></iframe>
|
|
|
|
<script>
|
|
const exercises = [
|
|
{ dir: "01-variables-and-console", label: "01 变量和控制台输出" },
|
|
{ dir: "02-data-types-and-conversion", label: "02 数据类型和类型转换" },
|
|
{ dir: "03-operators-and-conditions", label: "03 运算符和条件判断" },
|
|
{ dir: "04-loops", label: "04 循环" },
|
|
{ dir: "05-functions", label: "05 函数" },
|
|
{ dir: "06-arrays", label: "06 数组" },
|
|
{ dir: "07-objects", label: "07 对象" },
|
|
{ dir: "08-built-in-methods", label: "08 常见内置方法" },
|
|
{ dir: "09-scope-and-closure", label: "09 闭包入门" },
|
|
{ dir: "10-final-mini-app", label: "10 基础阶段综合小程序" },
|
|
{ dir: "11-var-and-scope", label: "11 var、let、const 与提升" },
|
|
{ dir: "12-this-keyword", label: "12 this" },
|
|
{ dir: "13-array-high-order-methods", label: "13 数组高阶函数" },
|
|
{ dir: "14-memory-and-execution", label: "14 内存和执行" },
|
|
{ dir: "15-switch-break-and-empty-values", label: "15 switch、break 和空值判断" },
|
|
{ dir: "16-final-review", label: "16 总复习" },
|
|
];
|
|
|
|
const exerciseSelect = document.getElementById("exerciseSelect");
|
|
const variantSelect = document.getElementById("variantSelect");
|
|
const runButton = document.getElementById("runButton");
|
|
const clearButton = document.getElementById("clearButton");
|
|
const consoleOutput = document.getElementById("consoleOutput");
|
|
const statusBadge = document.getElementById("statusBadge");
|
|
const runnerFrame = document.getElementById("runnerFrame");
|
|
const filePathText = document.getElementById("filePathText");
|
|
const readmePathText = document.getElementById("readmePathText");
|
|
const openScriptLink = document.getElementById("openScriptLink");
|
|
const openReadmeLink = document.getElementById("openReadmeLink");
|
|
|
|
const storageKey = "javascript-core-runner";
|
|
let activeRunId = 0;
|
|
|
|
function createOptions() {
|
|
exercises.forEach(function (exercise) {
|
|
const option = document.createElement("option");
|
|
option.value = exercise.dir;
|
|
option.textContent = exercise.label;
|
|
exerciseSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function getSelection() {
|
|
return {
|
|
dir: exerciseSelect.value,
|
|
variant: variantSelect.value,
|
|
};
|
|
}
|
|
|
|
function getPaths() {
|
|
const selection = getSelection();
|
|
return {
|
|
scriptPath: `./${selection.dir}/${selection.variant}.js`,
|
|
readmePath: `./${selection.dir}/README.md`,
|
|
};
|
|
}
|
|
|
|
function saveSelection() {
|
|
localStorage.setItem(storageKey, JSON.stringify(getSelection()));
|
|
}
|
|
|
|
function restoreSelection() {
|
|
const savedValue = localStorage.getItem(storageKey);
|
|
|
|
if (!savedValue) {
|
|
exerciseSelect.value = exercises[0].dir;
|
|
variantSelect.value = "starter";
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const parsed = JSON.parse(savedValue);
|
|
const exists = exercises.some(function (exercise) {
|
|
return exercise.dir === parsed.dir;
|
|
});
|
|
|
|
exerciseSelect.value = exists ? parsed.dir : exercises[0].dir;
|
|
variantSelect.value = parsed.variant === "answer" ? "answer" : "starter";
|
|
} catch (error) {
|
|
exerciseSelect.value = exercises[0].dir;
|
|
variantSelect.value = "starter";
|
|
}
|
|
}
|
|
|
|
function updateMeta() {
|
|
const paths = getPaths();
|
|
filePathText.textContent = paths.scriptPath;
|
|
readmePathText.textContent = paths.readmePath;
|
|
openScriptLink.href = paths.scriptPath;
|
|
openReadmeLink.href = paths.readmePath;
|
|
}
|
|
|
|
function appendLine(kind, message) {
|
|
const line = document.createElement("div");
|
|
line.className = `console-line ${kind}`;
|
|
line.textContent = message;
|
|
consoleOutput.appendChild(line);
|
|
consoleOutput.scrollTop = consoleOutput.scrollHeight;
|
|
}
|
|
|
|
function clearConsole() {
|
|
consoleOutput.textContent = "";
|
|
}
|
|
|
|
function setStatus(text, tone) {
|
|
statusBadge.textContent = text;
|
|
if (tone === "error") {
|
|
statusBadge.style.background = "rgba(166, 56, 43, 0.12)";
|
|
statusBadge.style.color = "#8c2f25";
|
|
return;
|
|
}
|
|
|
|
if (tone === "running") {
|
|
statusBadge.style.background = "rgba(160, 95, 18, 0.12)";
|
|
statusBadge.style.color = "#8a5110";
|
|
return;
|
|
}
|
|
|
|
statusBadge.style.background = "rgba(14, 122, 108, 0.1)";
|
|
statusBadge.style.color = "#095d53";
|
|
}
|
|
|
|
function runScript() {
|
|
const paths = getPaths();
|
|
const runId = String(Date.now());
|
|
activeRunId = runId;
|
|
|
|
clearConsole();
|
|
appendLine("info", `运行文件：${paths.scriptPath}`);
|
|
setStatus("运行中", "running");
|
|
|
|
const srcdoc = `
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<body>
|
|
<script>
|
|
(function () {
|
|
var runId = ${JSON.stringify(runId)};
|
|
|
|
function serialize(value, visited) {
|
|
if (!visited) {
|
|
visited = new WeakSet();
|
|
}
|
|
|
|
if (value === undefined) {
|
|
return "undefined";
|
|
}
|
|
|
|
if (value === null) {
|
|
return "null";
|
|
}
|
|
|
|
if (typeof value === "string") {
|
|
return value;
|
|
}
|
|
|
|
if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
|
|
return String(value);
|
|
}
|
|
|
|
if (typeof value === "function") {
|
|
return "[Function]";
|
|
}
|
|
|
|
if (typeof value === "object") {
|
|
if (visited.has(value)) {
|
|
return "[Circular]";
|
|
}
|
|
|
|
visited.add(value);
|
|
|
|
try {
|
|
return JSON.stringify(value, function (key, currentValue) {
|
|
if (typeof currentValue === "undefined") {
|
|
return "[undefined]";
|
|
}
|
|
return currentValue;
|
|
}, 2);
|
|
} catch (error) {
|
|
return Object.prototype.toString.call(value);
|
|
}
|
|
}
|
|
|
|
return String(value);
|
|
}
|
|
|
|
function send(kind, args) {
|
|
parent.postMessage(
|
|
{
|
|
source: "javascript-core-runner",
|
|
runId: runId,
|
|
kind: kind,
|
|
text: args.map(function (item) {
|
|
return serialize(item);
|
|
}).join(" ")
|
|
},
|
|
"*"
|
|
);
|
|
}
|
|
|
|
var originalLog = console.log;
|
|
var originalWarn = console.warn;
|
|
var originalError = console.error;
|
|
|
|
console.log = function () {
|
|
send("log", Array.prototype.slice.call(arguments));
|
|
originalLog.apply(console, arguments);
|
|
};
|
|
|
|
console.warn = function () {
|
|
send("warn", Array.prototype.slice.call(arguments));
|
|
originalWarn.apply(console, arguments);
|
|
};
|
|
|
|
console.error = function () {
|
|
send("error", Array.prototype.slice.call(arguments));
|
|
originalError.apply(console, arguments);
|
|
};
|
|
|
|
window.onerror = function (message, source, lineno, colno) {
|
|
send("error", ["运行时错误：", message, "位置：", source + ":" + lineno + ":" + colno]);
|
|
};
|
|
|
|
window.addEventListener("unhandledrejection", function (event) {
|
|
send("error", ["Promise 未处理异常：", event.reason]);
|
|
});
|
|
|
|
var script = document.createElement("script");
|
|
script.src = ${JSON.stringify(paths.scriptPath)} + "?t=" + Date.now();
|
|
script.onload = function () {
|
|
send("done", ["执行完成"]);
|
|
};
|
|
script.onerror = function () {
|
|
send("error", ["脚本加载失败：", ${JSON.stringify(paths.scriptPath)}]);
|
|
};
|
|
document.body.appendChild(script);
|
|
})();
|
|
<\/script>
|
|
</body>
|
|
</html>`;
|
|
|
|
runnerFrame.srcdoc = srcdoc;
|
|
}
|
|
|
|
window.addEventListener("message", function (event) {
|
|
const payload = event.data;
|
|
|
|
if (!payload || payload.source !== "javascript-core-runner") {
|
|
return;
|
|
}
|
|
|
|
if (payload.runId !== activeRunId) {
|
|
return;
|
|
}
|
|
|
|
if (payload.kind === "error") {
|
|
appendLine("error", payload.text);
|
|
setStatus("执行报错", "error");
|
|
return;
|
|
}
|
|
|
|
if (payload.kind === "warn") {
|
|
appendLine("warn", payload.text);
|
|
return;
|
|
}
|
|
|
|
if (payload.kind === "done") {
|
|
appendLine("info", payload.text);
|
|
setStatus("执行完成", "done");
|
|
return;
|
|
}
|
|
|
|
appendLine("log", payload.text);
|
|
});
|
|
|
|
exerciseSelect.addEventListener("change", function () {
|
|
saveSelection();
|
|
updateMeta();
|
|
});
|
|
|
|
variantSelect.addEventListener("change", function () {
|
|
saveSelection();
|
|
updateMeta();
|
|
});
|
|
|
|
runButton.addEventListener("click", runScript);
|
|
clearButton.addEventListener("click", function () {
|
|
clearConsole();
|
|
setStatus("输出已清空", "done");
|
|
});
|
|
|
|
createOptions();
|
|
restoreSelection();
|
|
updateMeta();
|
|
appendLine("info", "选择练习后点击“运行代码”，这里会显示输出结果。");
|
|
</script>
|
|
</body>
|
|
</html>
|