哈喽大家好，我是心连欣。今天我想分享一个我刚开始学JavaScript时写的小案例——“订单确认单”。这个案例虽然代码量不大，但它让我第一次感受到了“代码是活的”，因为它能把用户输入的内容实时展示在页面上，特别适合新手宝宝。如果你也是第一次接触还不知道怎么练习的话，可以跟我一起看一看哦(●'◡'●)~
一、案例效果：从输入到生成表格
这个案例的核心功能是：当用户打开页面时，浏览器会依次弹出三个输入框，让你输入“商品价格”、“商品数量”和“收货地址”。输入完成后，页面会自动生成一个表格，把“小米手环”的订单信息（包括计算好的总价）清晰地展示出来。
比如，我输入价格“200”、数量“2”、地址“北京市朝阳区”，页面就会生成下面这样的表格：
二、代码拆解：三个关键知识点###
这个案例用到了三个JavaScript的基础知识点，每个都很实用，非常适合新手理解“交互”的本质。
1. 用prompt获取用户输入
代码里用了三次prompt()，这是JavaScript里最简单的“弹窗输入”方法。它的作用就像在问用户：“请告诉我这个信息”，然后把用户输入的内容存到变量里。
这里要注意，prompt返回的内容默认是“字符串”类型，比如输入“200”，它其实是“200”（带引号的文字）。不过在这个案例里，因为后面要做乘法，JavaScript会自动把它转换成数字，所以不用额外处理。
2. 用变量计算总价
拿到价格和数量后，直接用乘法计算总价，存到total变量里。这一步让我意识到，JavaScript不仅能“存数据”，还能“处理数据”。
比如输入价格“200”、数量“2”，total就会变成“400”，这个结果后面会直接显示在表格里。
3. 用document.write动态生成HTML
这是整个案例最酷的部分！以前我以为HTML表格是写死在页面里的，但这个案例用document.write()，把变量直接嵌入到HTML代码里，实现了“动态生成表格”。
这里用到了“模板字符串”（用反引号``包裹的字符串），里面的 变量名可以直接把变量的值插进去。比如变量名可以直接把变量的值插进去。比如 {price}会变成用户输入的价格， $ {total}会变成计算好的总价，这样就不用手动写死表格内容了。
三、我的收获：代码是“活”的
这个案例让我第一次体会到“交互”的乐趣：用户输入内容，代码处理数据，最后生成新的页面内容。虽然它很简单，但却是很多复杂功能的基础，比如电商网站的订单确认、表单提交后的结果展示，本质上都是这个逻辑。
刚开始写的时候，我总担心变量插不进HTML里，但试了之后发现模板字符串真的很方便。后来我还试着改了商品名称（比如改成“苹果耳机”），发现只要改一个地方，整个表格就变了，特别有成就感。
四、可以优化的地方
当然，这个案例还有可以改进的地方，比如：
- 现在输入框是弹窗，体验不太好，以后可以改成页面里的输入框；
- 表格样式比较简单，后面可以学CSS美化一下；
- 如果用户不输入内容直接点“确定”，表格会显示“NaN”（不是数字），可以加个判断，比如“如果没输入，就显示0”。
不过作为第一个交互案例，我觉得它已经足够让我理解JavaScript的核心逻辑了。如果你也在学前端，不妨试试这个案例，改改代码，说不定会有新的发现！
