网页开发入门｜17 输入

在上节课，我们了解了函数可以封装批量的脚本代码，使得复杂功能可以一处定义，多处使用，使得调用更加简单。

调用函数时，需要向函数传递一些参数，以实现对应的功能。比如，在上节课实现的求平均数的函数：

// 定义平均数函数
function mean(a, b) {
    let sum = a + b
    let avg = sum / 2
    return avg
}

// 调用函数求1和2的平均数
c = mean(1,2)

现在这个函数还仅仅只能在代码中被调用，如果可以将它通过某种形式开放给用户，网页就提供了一个求平均数的功能。

这时函数的参数应该来自于用户的输入，但是如何获取来自用户的输入呢？

输入框

HTML中提供了<input>的标签，用于在页面上提供基本的输入框。

<input>

与图片标签相似，<input>是一个inline行内元素，不会独自占有一行。又因为不能包裹其它的元素，它只有开始标签，没有结束标签。

莫名出现的输入框会让用户感到困惑，为了提醒用户该用户框的作用，<input>标签提供了placeholder属性，以提供占位内容。当该输入框内没有用户输入时，将显示占位内容。

<input placeholder="type somethings here">

另一个常见的做法是在输入框前面加上提示的文字或图标，你可以使用任何的行内元素实现这个效果，W3C推荐使用语义更加明确的<label>标签。

<label>1st Number:</label> 
<input>
<span>2nd Number:</span> 
<input placeholder="type somethings here">

除了语义更加明确，<label>标签可以在被用户点击时，自动跳转到对应的输入位置，方便在较小的屏幕下进行操作。

为了在代码层面指明<label>与其对应的<input>是哪一个，要指明<input>的id的同时，在<label>中使用for属性。

<label for="a">1st Number:</label> 
<input id="a">
<span>2nd Number:</span> 
<input placeholder="type somethings here">

获取输入

有了输入框元素，便可以在脚本中获取用户输入的内容，方法同样是通过document.getElementById()获取输入框元素对应的DOM对象。

我们定义一个获取输入框A内输入的函数，并绑定在按钮上，以便查看运行效果。

function getValueFromInputA() {
    // 获取InputA的Dom对象
    const input_a = document.getElementById('a')
    // input_a.value就是用户在输入框中输入的内容
    const a = input_a.value
    // 弹出a的值
    alert(a)
    // 将值返回到函数调用处
    return a
}

<button onclick="getValueFromInputA()">show content</button>

同样的方法也可以获取第二个输入框中内容，代码非常的相似，可以改造一下getValueFromInputA()函数，可以通过传递参数获取任一输入框的内容。

// 参数为输入框DOM的id
function getValueFromInput(id) {
    // 获取Input的Dom对象
    const input = document.getElementById(id)
    // 输入框中输入的内容
    const value = input.value
    // 弹出值
    alert(value)
    // 将值返回到函数调用处
    return value
}

第二个输入框也需要配置id属性。

<span>2nd Number:</span> 
<input placeholder="type somethings here" id="b">

添加一个新的按钮，同时修改原来的按钮监听属性中的脚本。

<button onclick="getValueFromInput('a')">show content in 1st</button>
<button onclick="getValueFromInput('b')">show content in 2nd</button>

数据类型

现在我们可以获取用户的输入了，就可以计算平均值了么？

别急，先尝试使用代码将获取到的两个数值求和，看一下计算结果。

function sum() {
   const a = getValueFromInput('a')
   const b = getValueFromInput('b')
   alert(a+b)
}

<button onclick="sum()">sum</button>

123+321=123321 ？？这么简单的计算怎么出错了呢？

这是数据类型导致的问题！

用户在输入框内输入的内容未必是数字，可以是任意的内容，比如是’hello’和’world’。这些由若干字符组成的内容，称作字符串。

字符串如何求和呢？JS将会把两部分内容直接前后连接起来，作为计算结果，如’helloworld’。

因为无法确定用户会输入什么，因此会把任何输入内容，即使是数字，也看作字符串进行处理，于是就出现了123+321=123321。

数字和字符串就是不同数据类型，数据类型会影响计算时的运算规则。相比C和Java语言，JS是一个弱类型的语言，语法中不强调常量、变量的类型，但依然有所区分。

下面代码分别定义了数字123和字符串123：

// 定义一个数字常量
const num = 123
// 定义一个字符串常量(单引号、双引号都可以)
const string = '123'

JS也提供了函数可以将两种数据类型相互转化：

// 将字符串转变为整数
const string_to_num = parseInt(string)
// 将字符串转变为浮点数（含小数点的数）
const string_to_num = parseFloat(string)
// 将数字转变为字符串
const num_to_string = num.toString()

实现求平均值

我们继续改造一下getValueFromInput()函数，让其直接返回数字类型的数据。

// 参数为输入框DOM的id
function getValueFromInput(id) {
    // 获取Input的Dom对象
    const input = document.getElementById(id)
    // 输入框中输入的内容
    const value = input.value
    // 弹出值
    alert(value)
    // 将输入转变为数字（浮点数）
	const num = parseFloat(value)
    // 将数字值返回到函数调用处
    return num
}

求平均数：

function avg() {
   const a = getValueFromInput('a')
   const b = getValueFromInput('b')
   const avg = (a+b) / 2
   alert(avg)
   return avg
}

绑定按钮：

<button onclick="avg()">avg</button>

我们终于实现了一个简单的平均数计算问题，过程中使用了数据类型的转化，使得用户输入的字符串转变为数字。但我们无法确保用户输入的一定是数字，依然可能会出现计算问题，我们下节课来解决这个问题。

我将本课程所有的代码托管在gitee上了，你可以点击这个链接，或到gitee.com上搜索弦五 网页开发入门，查看和获取本课程的全部代码。