三个简单的例子

没问题!你说得对,一直在黑乎乎的控制台里打印字确实太枯燥了。
JavaScript 最大的魅力在于它能操控浏览器。咱们来玩点“有形”的,做两个让你立刻感觉“我能控制电脑”的小实验。
依然保持在 F12 控制台 里操作。
实验一:弹窗轰炸(Input / Output)
我们来做一个真正能和用户“对话”的程序。我们将用到两个新的函数:

  • alert():输出,在浏览器正中间弹出一个警告框。
  • prompt():输入,弹出一个框让用户打字,并收集用户写的内容。
    请一次性复制下面这三行代码,粘贴到控制台,然后按回车:
    // 1. 弹窗询问,把用户输入的数据存进 ‘user’ 变量
    let user = prompt(“请问大侠尊姓大名?”);

// 2. 拼接数据(把 “欢迎 ” 和 名字 和 ” 加入帮派” 拼在一起)
let message = “欢迎 ” + user + ” 加入帮派!”;

// 3. 弹窗显示结果
alert(message);

发生了什么?
浏览器是不是弹出来问你了?当你输入名字点击确定后,它又会弹窗欢迎你。
这就是最基本的交互逻辑:获取输入 -> 处理数据 -> 展示结果。
实验二:做一次“黑客”(修改网页内容)
这个实验非常酷。我们要用 JavaScript 直接修改你当前所看到的网页。哪怕你现在打开的是百度、Google 或者 B站的主页,你都可以篡改它。
我们将用到一个强大的对象:document(文档)。它代表了整个网页。
请复制下面的代码(你可以把引号里的字改成任何你想说的话),粘贴并回车:
document.body.innerHTML = “

整个网页被我承包了!

“;

💥 哇!发生了什么?
你原本看到的网页内容是不是瞬间全消失了,只剩下几个巨大的红字?
原理解析(数据+函数):

  • 对象/数据: document.body.innerHTML。这代表了“网页身体里所有的HTML内容”。
  • 操作: = (赋值)。我们粗暴地用我们的一行字,覆盖了原本网页里几千行的复杂代码。

放心: 这只是在你本地的浏览器里改的,你并没有真的黑掉那个网站。你只需要按一下 F5 刷新页面,一切就会恢复原状。

实验三:简单的小工具(计算器)
最后,我们结合刚学的,做一个能帮你在现实生活中解决问题的小工具:“AA制计算器”。
假设你和朋友出去吃饭,这顿饭花了钱,你想算算每个人该出多少。
复制粘贴这段代码:
// 1. 问总金额 (输入的数据是字符串,我们需要变成数字,但JS很聪明,会自动处理)
let total = prompt(“这顿饭一共花了多少钱?”);

// 2. 问人数
let people = prompt(“一共有几个人?”);

// 3. 算法:总钱数 除以 人数
let result = total / people;

// 4. 汇报结果
alert(“每人应该付:” + result + ” 元”);

感觉如何?
这三个实验涵盖了编程的三大支柱:

  • 交互(弹窗对话)
  • 操控(修改网页视觉)
  • 计算(处理数值逻辑)
    你觉得哪个更有趣?我们可以顺着那个方向继续挖!
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
相关推荐
  • 暂无相关文章
  • 评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    取消
    昵称表情代码图片

      暂无评论内容