焦作电子商务网站建设实例网站管理手册

焦作电子商务网站建设实例,网站管理手册,家装设计师个人简介,不能打开建设银行网站怎么办修改日期内容120260101初版掌握了HTML和CSS后#xff0c;我们终于来到了最关键的环节#xff1a;JavaScript。如果说HTML是骨架#xff0c;CSS是外衣#xff0c;那么JavaScript就是让工具“活起来”的灵魂。一#xff1a;C思维 vs JavaScript思维在开始之前#xff0c;我…修改日期内容120260101初版掌握了HTML和CSS后我们终于来到了最关键的环节JavaScript。如果说HTML是骨架CSS是外衣那么JavaScript就是让工具“活起来”的灵魂。一C思维 vs JavaScript思维在开始之前我们先理解几个关键差异// C工程师看到这个会困惑 let x 42; // 等等这是什么类型 x Hello; // 什么还能改类型 x [1, 2, 3]; // 数组没有std::vector// 而JavaScript工程师会说 // “这就是动态类型的魅力”二最小化学习只需要掌握这些1. 变量声明忘掉int和double// 只需记住这三种 let counter 0; // 可变变量最常用 const MAX_SIZE 100; // 不可变常量推荐优先使用 var oldWay 42; // 老方式了解即可C工程师的理解let ≈ auto但更灵活 const ≈ const完全一样 忘掉类型声明让运行时处理2. 函数简化版的C函数// 定义函数最常用方式 function startBuild(config) { console.log(开始构建 config.projectName); return true; // 可以返回任何类型 } // 箭头函数ES6新特性类似lambda const compile (sourceCode) { return sourceCode // 已编译; }; // 调用函数 const success startBuild({ projectName: MyApp });对比C// C中 bool startBuild(BuildConfig config) { std::cout 开始构建 config.projectName; return true; } // JavaScript省略了 // 1. 返回类型声明 // 2. 参数类型声明 // 3. 分号经常省略使用演示!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript函数基础/title style body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; } .output { background: #f5f5f5; padding: 15px; border-radius: 4px; margin-top: 20px; font-family: monospace; } button { background: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; } button:hover { background: #2980b9; } /style /head body h1JavaScript函数基础/h1 button onclickrunFunctions()运行函数示例/button div idoutput classoutput 点击按钮查看运行结果... /div script // 定义函数最常用方式 function startBuild(config) { console.log(开始构建 config.projectName); return true; // 可以返回任何类型 } // 箭头函数ES6新特性类似lambda const compile (sourceCode) { return sourceCode // 已编译; }; // 调用函数 function runFunctions() { const success startBuild({ projectName: MyApp }); const compiled compile(int main() { return 0; }); const output document.getElementById(output); output.innerHTML pstrongstartBuild() 返回值/strong ${success}/p pstrongcompile() 返回值/strong ${compiled}/p ; } /script /body /html效果点击按钮3. DOM操作让网页动起来!-- 目标点击按钮修改输出内容 -- button idbuildBtn编译/button div idoutput等待命令.../div script // 获取元素类似Qt的findChild const buildBtn document.getElementById(buildBtn); const outputDiv document.getElementById(output); // 事件监听类似Qt的信号槽 buildBtn.addEventListener(click, function() { // 修改内容 outputDiv.textContent 编译中...; // 模拟编译过程 setTimeout(() { outputDiv.textContent 编译完成; outputDiv.style.color green; // 修改样式 }, 1000); }); /script核心概念document.getElementById() ≈ findChildQWidget*(id) addEventListener() ≈ connect(btn, QPushButton::clicked, ...) textContent/innerHTML ≈ setText()使用示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDOM操作与事件/title style body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; } #output { background: #f5f5f5; padding: 15px; border-radius: 4px; margin-top: 20px; font-family: monospace; border: 1px solid #ddd; } #buildBtn { background: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; } #buildBtn:hover { background: #2980b9; } /style /head body h1DOM操作与事件处理/h1 p点击下面的按钮模拟编译过程/p !-- 目标点击按钮修改输出内容 -- button idbuildBtn编译/button div idoutput等待命令.../div script // 获取元素类似Qt的findChild const buildBtn document.getElementById(buildBtn); const outputDiv document.getElementById(output); // 事件监听类似Qt的信号槽 buildBtn.addEventListener(click, function() { // 修改内容 outputDiv.textContent 编译中...; // 模拟编译过程 setTimeout(() { outputDiv.textContent 编译完成; outputDiv.style.color green; // 修改样式 }, 1000); }); /script /body /html效果点击按钮会先变为“编译中”然后1秒后变为“编译成功”4. 异步编程最重要的差异// C是同步的线性执行 // std::cout 1; // std::cout 2; // 总是先1后2 // JavaScript可能是异步的 console.log(1); setTimeout(() { console.log(2); // 这会在后面执行 }, 0); console.log(3); // 先打印3然后才打印2 // 输出顺序1 → 3 → 2使用示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title异步编程基础/title style body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; } .code-block { background: #f5f5f5; padding: 15px; border-radius: 4px; margin: 20px 0; font-family: monospace; border-left: 4px solid #3498db; } .output { background: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 4px; font-family: monospace; margin-top: 20px; } button { background: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #2980b9; } .comment { color: #6a9955; } .cpp-code { color: #0000ff; } .js-code { color: #795e26; } /style /head body h1异步编程基础/h1 h2C是同步的线性执行/h2 div classcode-block span classcpp-code// C 代码示例/spanbr span classcomment// std::cout 1;/spanbr span classcomment// std::cout 2; // 总是先1后2/span /div h2JavaScript可能是异步的/h2 div classcode-block span classjs-code// JavaScript 代码示例/spanbr span classjs-codeconsole.log(1);/spanbrbr span classjs-codesetTimeout(() {/spanbr span classcomment // 这会在后面执行/spanbr span classjs-code console.log(2);/spanbr span classjs-code}, 0);/spanbrbr span classjs-codeconsole.log(3);/spanbrbr span classcomment// 输出顺序1 → 3 → 2/span /div button idrunBtn运行示例/button div idoutput classoutput 打开控制台查看输出或点击运行示例按钮 /div script // 获取元素 const runBtn document.getElementById(runBtn); const output document.getElementById(output); // 事件监听 runBtn.addEventListener(click, function() { output.innerHTML 运行中...请查看控制台输出F12; // C是同步的线性执行 console.log(C 模拟:); console.log(1); console.log(2); // 总是先1后2 // JavaScript可能是异步的 console.log(JavaScript 模拟:); console.log(1); setTimeout(() { console.log(2); // 这会在后面执行 }, 0); console.log(3); // 先打印3然后才打印2 // 输出顺序1 → 3 → 2 }); /script /body /html处理异步async/await必须掌握// 模拟调用C后端API async function fetchBuildStatus() { try { // 1. 发送请求异步操作 const response await fetch(/api/build-status); // 2. 解析数据也是异步 const data await response.json(); // 3. 更新UI document.getElementById(status).textContent data.status; } catch (error) { // 错误处理 console.error(请求失败:, error); } } // 调用 fetchBuildStatus();使用!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title异步API调用/title style body { font-family: Arial, sans-serif; padding: 20px; } #status { background: #f5f5f5; padding: 15px; border-radius: 4px; margin: 15px 0; } button { background: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; } /style /head body h1异步API调用/h1 button idcheckBtn检查状态/button div idstatus等待检查.../div script // async/await 解释 // 1. async - 声明函数为异步函数内部可以使用await // 2. await - 暂停函数执行等待异步操作完成 // 3. 异步效果 - 不会阻塞主线程UI依然响应 console.log(A. 页面加载 - 主线程未被阻塞); // 异步函数演示 async function fetchBuildStatus() { console.log(1. 进入异步函数); try { // await效果此处暂停执行但主线程继续工作 console.log(2. 发送网络请求 - await会让此函数暂停); const response await fetch(/api/build-status); console.log(5. 网络请求完成 - 函数恢复执行); // 另一个await console.log(6. 解析JSON数据 - 再次暂停); const data await response.json(); console.log(7. 数据解析完成 - 函数再次恢复); // 3. 更新UI document.getElementById(status).textContent data.status; console.log(8. UI更新完成); } catch (error) { // 错误处理 console.error(请求失败:, error); } } // 主线程继续执行 console.log(B. 事件绑定 - 不等待fetchBuildStatus完成); // 调用异步函数 document.getElementById(checkBtn).addEventListener(click, fetchBuildStatus); console.log(C. 页面初始化完成 - 所有代码已执行); /* 异步执行效果 1. 函数遇到await会暂停但主线程不阻塞 2. UI仍然响应用户可以操作其他元素 3. 异步操作完成后函数从中断处继续 4. 适合网络请求、文件读取等耗时操作 */ /script /body /htmlC工程师可以这样理解async ≈ 标记这个函数里有异步操作 await ≈ co_awaitC20协程 fetch() ≈ 发送HTTP请求知识点说明核心概念async- 声明函数为异步允许内部使用awaitawait- 暂停当前函数等待异步操作完成不阻塞主线程- UI保持响应用户可继续操作异步完成恢复- 函数从中断处继续执行问题JavaScript可以进行阻塞函数不阻塞主线程的实现原理JavaScript单线程 事件循环┌──────────────┐ ┌────────────────┐│ 主线程 │ ←→ │ 事件循环 ││ (执行JS代码) │ │ (管理异步任务) │└──────────────┘ └────────────────┘↑ ↓│ ┌─────────────┐└──────────── │ Web API ││ (定时器/请求) │└─────────────┘工作原理单线程执行JavaScript代码在主线程中按顺序执行遇到异步setTimeout/fetch等操作移交给Web API主线程继续不等待继续执行后续代码异步完成Web API将任务加入事件队列事件循环主线程空闲时从队列取出任务执行类比餐厅主线程(服务员) 1. 接受订单 → 交给厨房(Web API) 2. 继续服务其他客人(不阻塞) 3. 厨房完成 → 取餐给原客人(事件循环)所以JavaScript是单线程协作式多任务通过事件循环实现非阻塞的异步效果这就是为什么UI不会卡住的原因 - 不是真多线程而是巧妙的事件调度机制。三实战为C工具添加交互逻辑场景代码格式化工具!DOCTYPE html html head titleC代码格式化工具/title style textarea { width: 100%; height: 200px; font-family: Consolas; } button { margin: 10px; padding: 10px 20px; } .error { color: red; } /style /head body h1 C代码格式化器/h1 textarea idinputCode placeholder粘贴你的C代码... #include iostream using namespace std; int main() { coutHello World; return 0; }/textarea div button idformatBtn格式化代码/button button idlintBtn检查代码风格/button /div textarea idoutputCode readonly/textarea div idmessage/div script // 1. 获取所有需要的元素 const inputCode document.getElementById(inputCode); const outputCode document.getElementById(outputCode); const formatBtn document.getElementById(formatBtn); const lintBtn document.getElementById(lintBtn); const message document.getElementById(message); // 2. 格式化函数模拟clang-format function formatCPPCode(code) { // 简单模拟格式化逻辑 return code .replace(/cout/g, cout ) .replace(/;/g, ;\n ) .replace(/{/g, {\n ) .replace(/}/g, \n}); } // 3. 检查代码风格 function lintCPPCode(code) { const issues []; if (code.includes(using namespace std;)) { issues.push(⚠️ 不建议使用 using namespace std;); } if (code.includes(endl)) { issues.push(⚠️ 考虑使用 \\n 替代 endl 以提高性能); } return issues; } // 4. 按钮事件处理 formatBtn.addEventListener(click, () { const code inputCode.value; if (!code.trim()) { showMessage(请输入代码, error); return; } const formatted formatCPPCode(code); outputCode.value formatted; showMessage(✅ 格式化完成); }); lintBtn.addEventListener(click, () { const code inputCode.value; const issues lintCPPCode(code); if (issues.length 0) { showMessage(✅ 代码风格良好); } else { showMessage(issues.join(br), error); } }); // 5. 工具函数 function showMessage(text, type info) { message.innerHTML text; message.className type error ? error : ; // 3秒后自动清除 setTimeout(() { message.textContent ; }, 3000); } // 6. 初始化页面加载后自动执行 document.addEventListener(DOMContentLoaded, () { showMessage(就绪请输入C代码); }); /script /body /html效果点击按钮效果为四关键概念速查表1.数据类型简化版// 只需记住这几种 const number 42; // 数字 const string Hello; // 字符串 const boolean true; // 布尔值 const array [1, 2, 3]; // 数组 const object { // 对象类似结构体 name: Project, files: 10 }; const nullValue null; // 空值 const undefinedValue; // 未定义2.相等性容易踩坑// 使用 而不是 0 false; // true 自动类型转换 0 false; // false 严格相等 null undefined; // true null undefined; // false3.循环比C简单// for循环最常用 for (let i 0; i 10; i) { console.log(i); } // for...of遍历数组 const files [main.cpp, utils.cpp]; for (const file of files) { console.log(file); } // for...in遍历对象属性 const config { debug: true, optimize: false }; for (const key in config) { console.log(key : config[key]); }使用!DOCTYPE html html head titleJavaScript循环结构/title style body { font-family: Arial, sans-serif; padding: 20px; } section { margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; } .code { background-color: #f5f5f5; padding: 10px; border-radius: 4px; font-family: monospace; margin: 10px 0; } .output { background-color: #f8f9fa; padding: 10px; border-radius: 4px; margin-top: 10px; font-family: monospace; white-space: pre; min-height: 100px; } button { padding: 8px 15px; margin: 5px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; } /style /head body h1JavaScript循环结构/h1 section h21. for循环最常用/h2 div classcode // for循环最常用 for (let i 0; i 10; i) { console.log(i); } /div button idforBtn运行for循环/button div idforOutput classoutput/div /section section h22. for...of循环遍历数组/h2 div classcode // for...of遍历数组 const files [main.cpp, utils.cpp]; for (const file of files) { console.log(file); } /div button idforOfBtn运行for...of循环/button div idforOfOutput classoutput/div /section section h23. for...in循环遍历对象属性/h2 div classcode // for...in遍历对象属性 const config { debug: true, optimize: false }; for (const key in config) { console.log(key : config[key]); } /div button idforInBtn运行for...in循环/button div idforInOutput classoutput/div /section script // for循环最常用 document.getElementById(forBtn).addEventListener(click, () { let result ; for (let i 0; i 10; i) { console.log(i); result i \n; } document.getElementById(forOutput).textContent result; }); // for...of遍历数组 document.getElementById(forOfBtn).addEventListener(click, () { const files [main.cpp, utils.cpp]; let result ; for (const file of files) { console.log(file); result file \n; } document.getElementById(forOfOutput).textContent result; }); // for...in遍历对象属性 document.getElementById(forInBtn).addEventListener(click, () { const config { debug: true, optimize: false }; let result ; for (const key in config) { console.log(key : config[key]); result key : config[key] \n; } document.getElementById(forInOutput).textContent result; }); /script /body /html效果五给C工程师的特别建议1. 不要追求完美// 错误试图像C一样写“完美”的JS function overlyStrictFunction(param1: string, param2: number): boolean { // 这不是TypeScript不需要类型声明 return true; } // 正确简单直接 function doSomething(param1, param2) { // 相信调用者运行时检查 return true; }2. 利用现代浏览器的能力// 忘记兼容IE直接使用现代特性 // 可选链操作符 const path config?.project?.path; // 安全访问嵌套属性 // 空值合并 const timeout settings.timeout ?? 5000; // 默认值 // 解构赋值 const { name, version } packageInfo; // 同时提取多个属性三种JavaScript现代特性1.可选链操作符 (?.) - 安全访问嵌套对象属性避免因中间属性不存在而报错2.空值合并操作符 (??) - 当左侧为null或undefined时使用右侧的默认值3.解构赋值 - 从对象或数组中提取多个属性到变量中使用示例!DOCTYPE html html head titleJavaScript现代特性/title style body { font-family: Arial, sans-serif; padding: 20px; } section { margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; } .code { background-color: #f5f5f5; padding: 10px; border-radius: 4px; font-family: monospace; margin: 10px 0; } .output { background-color: #f8f9fa; padding: 10px; border-radius: 4px; margin-top: 10px; font-family: monospace; white-space: pre; min-height: 100px; } button { padding: 8px 15px; margin: 5px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; } /style /head body h1JavaScript现代特性/h1 section h21. 可选链操作符/h2 div classcode // 忘记兼容IE直接使用现代特性 // 可选链操作符 const path config?.project?.path; // 安全访问嵌套属性 /div button idoptionalChainingBtn运行可选链操作符/button div idoptionalChainingOutput classoutput/div /section section h22. 空值合并/h2 div classcode // 空值合并 const timeout settings.timeout ?? 5000; // 默认值 /div button idnullishCoalescingBtn运行空值合并/button div idnullishCoalescingOutput classoutput/div /section section h23. 解构赋值/h2 div classcode // 解构赋值 const { name, version } packageInfo; // 同时提取多个属性 /div button iddestructuringBtn运行解构赋值/button div iddestructuringOutput classoutput/div /section script // 可选链操作符 document.getElementById(optionalChainingBtn).addEventListener(click, () { // 测试不同情况的可选链操作 const testCases [ { name: 完整配置, config: { project: { path: /home/user/project } } }, { name: 缺少project属性, config: {} }, { name: config为null, config: null }, { name: config为undefined, config: undefined } ]; let result 可选链操作符测试结果:\n\n; testCases.forEach(testCase { const path testCase.config?.project?.path; result ${testCase.name}: ${path ?? undefined}\n; }); document.getElementById(optionalChainingOutput).textContent result; }); // 空值合并 document.getElementById(nullishCoalescingBtn).addEventListener(click, () { // 测试不同情况的空值合并操作 const settingsList [ { name: 有timeout值, timeout: 3000 }, { name: timeout为0, timeout: 0 }, { name: timeout为空字符串, timeout: }, { name: timeout为null, timeout: null }, { name: timeout为undefined, timeout: undefined }, { name: 没有timeout属性, } // 缺少timeout属性 ]; let result 空值合并测试结果 (默认值: 5000ms):\n\n; settingsList.forEach(settings { const timeout settings.timeout ?? 5000; result ${settings.name}: ${timeout}ms\n; }); document.getElementById(nullishCoalescingOutput).textContent result; }); // 解构赋值 document.getElementById(destructuringBtn).addEventListener(click, () { // 测试解构赋值 const packageInfo { name: my-cpp-project, version: 1.2.3, description: A C project template, author: Developer, dependencies: [boost, opencv], scripts: { build: make, clean: make clean } }; let result 解构赋值测试结果:\n\n; // 解构name和version const { name, version } packageInfo; result 基本解构: name ${name}, version ${version}\n\n; // 解构并重命名 const { description: desc, author: writer } packageInfo; result 解构并重命名: description ${desc}, author ${writer}\n\n; // 解构嵌套对象 const { scripts: { build, clean } } packageInfo; result 解构嵌套对象: build ${build}, clean ${clean}\n\n; // 解构并设置默认值 const { license MIT } packageInfo; result 解构并设置默认值: license ${license}\n\n; // 数组解构 const [firstDep, secondDep] packageInfo.dependencies; result 数组解构: first ${firstDep}, second ${secondDep}\n; document.getElementById(destructuringOutput).textContent result; }); /script /body /html效果3. 调试技巧console的妙用// 不只是console.log console.log(普通日志); // 黑白 console.warn(警告信息); // 黄色 console.error(错误信息); // 红色 console.table(data); // 表格形式显示对象/数组 // 分组日志 console.group(构建过程); console.log(步骤1: 配置检查); console.log(步骤2: 编译源文件); console.groupEnd();使用示例!DOCTYPE html html head titleConsole高级用法/title style body { font-family: Arial, sans-serif; padding: 20px; } section { margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; } .code { background-color: #f5f5f5; padding: 10px; border-radius: 4px; font-family: monospace; margin: 10px 0; } button { padding: 8px 15px; margin: 5px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; } .note { background-color: #e7f3fe; padding: 10px; border-radius: 4px; margin-top: 10px; } /style /head body h1Console高级用法/h1 section h21. 不只是console.log/h2 div classcode // 不只是console.log console.log(普通日志); // 黑白 console.warn(警告信息); // 黄色 console.error(错误信息); // 红色 console.table(data); // 表格形式显示对象/数组 /div button idbasicConsoleBtn运行不同级别的console/button div classnote打开浏览器开发者工具查看输出结果/div /section section h22. 分组日志/h2 div classcode // 分组日志 console.group(构建过程); console.log(步骤1: 配置检查); console.log(步骤2: 编译源文件); console.groupEnd(); /div button idgroupConsoleBtn运行分组日志/button div classnote打开浏览器开发者工具查看输出结果/div /section script // 基本console用法演示 document.getElementById(basicConsoleBtn).addEventListener(click, () { // 不只是console.log console.log(普通日志); // 黑白 console.warn(警告信息); // 黄色 console.error(错误信息); // 红色 // 创建测试数据用于console.table const data [ { name: main.cpp, size: 12KB, modified: 2023-05-15 }, { name: utils.cpp, size: 8KB, modified: 2023-05-14 }, { name: config.h, size: 3KB, modified: 2023-05-10 } ]; console.table(data); // 表格形式显示对象/数组 }); // 分组日志演示 document.getElementById(groupConsoleBtn).addEventListener(click, () { // 分组日志 console.group(构建过程); console.log(步骤1: 配置检查); console.log(步骤2: 编译源文件); // 嵌套分组 console.group(链接阶段); console.log(查找依赖库); console.log(生成可执行文件); console.groupEnd(); console.log(步骤3: 构建完成); console.groupEnd(); }); /script /body /html效果下一步Vue.js之旅掌握了这些JavaScript基础后你可能会发现直接操作DOM有点繁琐状态管理变得混乱代码组织不够清晰这正是我们需要学习Vue.js的原因。Vue.js将帮助我们声明式渲染告别手动DOM操作组件化开发像C类一样组织UI响应式系统数据变化自动更新UI在下一篇文章中我们将学习Vue.js的核心概念看看如何用更优雅的方式为C工具构建Web界面。记住JavaScript是基础Vue.js是工具。先打好JavaScript基础再学框架会事半功倍。保持简单解决问题优先。你不是要成为JavaScript专家而是要学会用它扩展C工具的能力边界。下一篇待定