JavaScript学习笔记——2、输入输出语法

JavaScript输入输出详解

原创于 2025-10-29 10:00:00 发布 · 835 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #笔记 #输入输出

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习JavaScript，这次学习的是输出和输入。
每个程序都是需要和用户交互的，那么就必然会用到输出和输入，输出是计算机程序把结果或者提示内容给用户看的，输入是用户向计算机程序输入参数或者下发指令的。

一、输出

输出有这么几种方式

1、控制台输出

语法：console.log(‘需要输出的内容’)
作用：控制台输出需要的内容，程序员调试用。
说明：
控制台是每个程序员都应该是最熟悉的东西，因为经常需要打log输出去查各种问题。
比如：

<body>
  <script>
    let a = 10;
    let b = 20;
    let c = a + b;
    console.log('答案是');
    console.log(c);
  </script>
</body>

运行这个html，然后怎样看控制台呢？
比如谷歌Chrome浏览器，按F12进入调试模式，然后找到console控制台：
在这里插入图片描述

这里就可以看到我们的输出了。

2、弹窗输出

语法：alert(‘要输出的内容’)
作用：在页面弹出警告对话框
比如：

<body>
  <script>
    var a = 10;
    var b = 20;
    var c = a + b;
    alert(`答案是：${c}`);
  </script>
</body>

显示：
在这里插入图片描述

这个弹出之前举例时用过，也是比较常用的给用户提示的方式。

3、网页内容输出

语法：document.write(‘要输出的内容’)
作用：向body内输出需要显示的内容。
说明：
这是一个非常有用的方法，可以让用户直接在网页里看到内容，比如：

<body>
  <script>
    var a = 10;
    var b = 20;
    var c = a + b;
    document.write(`答案是：${c}`);
  </script>
</body>

在这里插入图片描述

这个方法还有另外一种更重要的作用，如果输出的内容写的是标签，那么也会被解析成网页元素，比如：

<body>
  <script>
    let a = '<h1>Hello World</h1>';
    let b = '<div><span>1</span><span>2</span><span>3</span></div>';
    document.write(a);
    document.write(b);
  </script>
</body>

显示：
在这里插入图片描述

所以，通过这个document的输出方法，就可以用JavaScript根据实际的数据组装网页需要显示的内容了。

二、输入

向网页输入内容，之前在学html标签的时候，知道有表单和input标签可以输入内容。
这里说的输入，是给JavaScript直接输入内容。
语法：prompt(‘输入提示语’)
作用：显示一个对话框，包含一条文字信息，用来提示用户输入文字。
例子：

<body>
  <script>
    let a = prompt("输入一个整数");
    let b = prompt("输入另外一个整数");
    let c = a + b;
    alert(`结果是:${c}`);
  </script>
</body>

运行这个网页：
在这里插入图片描述

在这里插入图片描述

注意到一个问题，我输入了10和20，结果却是1020，这说明了什么问题呢？这说明了，prompt输入的结果，是字符串。
这个问题很重要，如果我们想真的得到两个整数相加，需要这样写：

  <script>
    let input;
    input = prompt('请输入一个数字');
    let a = parseInt(input);
    input = prompt('请输入另外一个数字');
    let b = parseInt(input);
    let c = a + b;
    alert(`结果是:${c}`);
  </script>

同样的输入，这次的结果是：
在这里插入图片描述

如果需要把输入的内容转换成别的类型，需要有转换过程，这些以后再来学习。

三、 JavaScript的执行顺序

先来看看这个例子：

<body>
  <h1>
    计算器
  </h1>
  <p>
    请输入两个数字，然后点击确定
  </p>
  <p>
    计算结果会显示在下方
  </p>
  <p>
    结果是:
  </p>
  <script>
    let input;
    input = prompt('请输入一个数字');
    let a = parseInt(input);
    input = prompt('请输入另外一个数字');
    let b = parseInt(input);
    let c = a + b;
    alert(`结果是:${c}`);
  </script>
</body>