菜鸟一枚 近期开始学习JS 在我看来一边学一边写是最有用的啦~
所以先给自己定个小目标,写出一个小程序来~
程序多有不足,希望各位大牛们不吝啬自己的智慧,多加批评!
使用到了For循环,If语句。
能够实现捕捉输入信息并进行计算的功能。
- 核心功能是计算,所以应该先写出一个能够计算的function
测试一下,手动给Sum传入参数:
成功了呢 = =
2.接下来是输入,从网页上获取到数值:
那么首先要做的就是在网页上写出来input框框。
哦对了还有按钮button,
这里的话我用了很多方法去获取Input的值,但是都会报错
比如:
Var a = document.getElementById(name) //错误
或者
Var a = document.getElementById(name).value //错误
或者
Var a = document.getElementById(name).val() //错误
最终我发现了一种能够成功获得Input内值的方法:
我加入了Form表单,然后用
//成功啦!!!!
具体原因到现在也不是非常明白为什么会这样,我也尝试过不在本程序中,而是独立的去调用,也是可以获取到Input中的值。
获取到我们输入的值之后,就可以把Input收到的值,传给我们一开始写的计算函数Sum中了!!!
然后我们现在得到的 就是一个可以输入数值,并计算这个值一直增加到10的和的程序了
4+5+6+7+8+9=39!!!
程序到这里已经结束了,能够实现最基本的功能了。
但是!!!!
当我们输入10以外的数字的时候呢?
或者我们输入一个英文字母?
程序会不进入循环,直接Alert一开始为0 的finalSum。
我们知道在Js中函数也是可以嵌套函数的,甚至是参数,返回值.
所以我们可以写一个If 语句,将我们的程序嵌套进去
If(输入>10||isNaN(输入))
//这里的isNaN是用来判断是不是一个数字 (is not a number)
{alert 错误}
Else{
执行程序
}
于是乎我们得到了:
成功运行~~~~。
过程中遇到的问题以及最终代码:
- 会经常出现 Num is not defined 也就是经常说我没定义Num 这里的Num是我传入的参数
- 在写这种循环的程序时.若果循环程序内出现逻辑错误,那么他会出现Uncaught RangeError.
这个错误的中文意思就是“最大堆栈超过了最大值”
我们先看一个简单的,也能最清楚明白这个问题出现的函数:
function a() {
a();
}
只要一运行这个函数,就会直接报上面的那个错误。
由这个简单的例子,我们就很清楚看出来原因:这就是因为一个函数一直递归调用自己,无法停止,只有在内存被塞满(内存溢出)的时候,报错才能够停止。
3.finalSum = Number(finalSum) + Number(num)
获取最后和的这里 Number()是为了将finalSum和num转换为数字进行相加而不是字符串,如果不加,返回值则会变成0123456789 这种
4.最大的困难还是在取值哪里,Input中的值一直没法在这个程序体中获取,无论是另一个程序或者是直接获取都能获取的到
最终代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript">
function print(num){
var a=myform.name.value; //获取Input中输入的值
var finalSum = 0; //定义,初始化最终和
num=a; //将传入的值放入函数的参数num中
if(num>10||isNaN(num)) //判断输入数值
{
alert("请输入1-10数字")
}
else{ //执行程序
for (;num<10;num++) {
finalSum = Number(finalSum) + Number(num);
}
alert(finalSum); //显示最终求和
}
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="name" id="nn" placeholder="在此输入1-10数字" />
<input type="button" name="button" value="请输入" οnclick="print()"/>
</form>
</body>
</html>