feat: Add JavaScript core exercises and solutions
- 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.
This commit is contained in:
charlie
635
03-javascript-core/runner.html
Normal file
635
03-javascript-core/runner.html
Normal file
@@ -0,0 +1,635 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user