JavaScript语法基础（三）
补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。
一、循环语句
1.while循环
先判断条件，只要条件为真，while循环体中的代码就会执行，然后再回条件判断，如果条件为假，则跳出循环；如果条件为真，将继续执行。
语法定义如下所示：
while(条件){
//需要执行的js代码
}
举一个栗子：小明是一个男孩子，这里有一项运动叫引体向上，只有男生需要去完成这个运动项目，那么我们来写一个while循环
var name = "小明"
var gender = "男";
while(gender=="男"){
alert("你需要完成引体向上");
}
注意到了吗？这是一个死循环，因为小明是男孩子，且一直都是，所以while循环的判断条件一直为true；小明会一直做引体向上，直到我们关闭这个程序【现在的小明不仅是数学课代表，还是体育之星了呢】
温馨提示：循环永远不会结束，这可能导致浏览器崩溃喔！
突然良心发现的我为了不累死小明，允许他成年了之后就可以不做引体向上了，于是就有了下面的故事…
var name = "小明"
var gender = "男";
var age = 9
while(age<18){
alert(age+"岁的"+name+"，你需要完成引体向上，直到你成年");
//一年又一年的度过...
age = age + 1
}
alert(age+"岁的"+name+"恭喜你，你终于成年了，接下来迎接你的是每天5公里的长跑")
//虽然快乐是属于大家的，但是健康是属于你的！！！
个人看法：while循环一般用于“不知道什么时候循环会结束，然后定义一个布尔型来进行控制”，如上面的这个小栗子可以采用接下来分享的for循环来完成
2.do…while循环
先执行循环体中的代码，再判断条件，只要条件为真，while循环体中的代码就会再次执行，然后再进行条件判断，如果条件为假，则跳出循环；如果条件为真，将继续执行。
细心的你发现了吗？do…while循环与while循环的区别了吗？
while：先判断条件，后执行循环体
do…while：先执行循环体，再判断条件
语法定义如下所示
do {
//需要执行的js代码
} while (条件)
为了验证一下do…while循环是否先执行循环体，后判断条件，这里写一个简单的测试代码：
do{
alert("循环体中的代码")
}while(false)
alert("循环之外的代码")
有兴趣的朋友可以试试while循环是否先判断条件，后进行循环体喔
3.for循环
先初始化参数，再判断循环条件，只要条件为真，执行for循环体中的代码后就执行控制条件语句，然后再判断条件，如果条件为真，则继续执行for循环体中的代码，反之条件为假，则跳出循环。
嘶~ 是不是似曾相识啊，感觉和while循环差不多啊，其实for循环有一个特别方便的地方，就是可以指定代码块执行的次数。
语法定义如下所示
for(初始化参数;循环条件;控制条件){
//需要执行的js代码
}
补充：for(表达式1;表达式2;表达式3)，其中的表达式1只执行一次，表达式3也是可以省略的(写在循环体中)，但是千万注意，不要弄成死循环喔！
小题目：输出一个九九乘法表（千万不要自己一个一个去打出来喔，提示：需要for循环嵌套，举一反三的时候到了！）
【思考片刻之后…two hours later…】
算了 咱不难为自己(其实是因为我没有分享过循环嵌套…)，上代码吧！记得从中体会它是如何得到这个结果的鸭！
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+i*j+" ")
}
document.write("<br>")
}
嵌套循环是先执行外层循环，然后再执行内层循环，如果有朋友学习过C语言、python、java等，就应该知道这其中的执行过程。精致的小伙伴发现了吗？其实这个九九乘法表并没有对整齐，如果你有html的基础，就可以尝试一下用table对齐喔。
4.for…in循环
循环的作用都大同小异，最后一个循环我就不在赘述了，直接进入重点环节，for…in 语句循环的作用：遍历对象的属性。
语法定义如下所示
for(变量名 in 对象名){
//需要执行的js代码
}
因为目前为止我还没有分享啥是对象的属性，所以这个栗子不太好举呀，但是打了兴奋剂的我怎么可能轻言放弃，转念一想，有了，数组不就是对象吗，我直接整一个数组来示范一下 for…in 循环是咋使用的：
var detective = ["狄仁杰", "福尔摩斯", "柯南", "唐仁"]
for (var i in detective ) {
document.write(detective [i] + "<br/>");
}
//输出结果：
狄仁杰
福尔摩斯
柯南
唐仁
您看这个栗子还满意吗？
二、函数
1.自定义函数
自定义函数就是我们自己写的函数；对于函数，我的理解就是一段代码块，用一个外壳包装一下就改名叫函数了，然后给这个函数取个名字，我们之后就可以通过这个函数名，直接使用整个代码块了
如图所示，即使是采用最原始的肉眼观察法也能看出这个代码块占的位置，比函数名()大很多吧！不过这还不是函数的最大特点，支撑函数这么使用频繁的原因是：函数被调用时执行的可重复使用的代码块（划重点：可重复），这才是它最大的特色。
语法定义如下所示
function name(参数1, 参数2, 参数3) {
//要执行的js代码
return 返回值 //可以没有返回值
}
小知识点：局部变量，在函数中声明的变量，会成为函数的局部变量，局部变量只能在函数内访问。
小试牛刀：写一个函数，要求传入两个参数a、b，返回a+b的值（如果你之前没有接触过函数，那么这个例题，你值得一试），提示：返回的值必须赋给一个变量result，然后在控制台中输出result。
function add(a, b) {
return a + b
}
var result = add(1, 2);
console.log(result);
2.匿名函数
匿名函数就是没有名字的函数，上面的自定义函数我们必须定义一个函数名，但是匿名函数就不需要，那么问题来了，匿名函数没有名字那我咋找的它，这边建议您可以把它打包赋值给一个变量。
语法定义如下所示
function (参数1, 参数2, 参数3) {
//要执行的js代码
return 返回值 //可以没有返回值
}
偷一个小懒，我直接把上面的小试牛刀改为匿名函数啦，然后把刚才的 add()函数名 改为 add变量 打包好函数之后 赋值给 add变量 就OK。
var add = function (a, b) {
return a + b
}
var result = add(1, 2);
console.log(result);
3.事件调用
事件调用就像是你在百度搜索知识的时候，点击“百度一下”按钮，百度搜索页就会转到其他页面，这整个过程就是一个事件的调用，触发点就在这个按钮上，来一段代码感受一下：
//第一种
<button onclick="showHello()">Hello</button>
<script type="text/javascript">
function showHello(){
alert("hello");
}
</script>
//第二种
<button onclick="showHello()">Hello</button>
<script type="text/javascript">
var showHello = function() {
alert("hello");
}
</script>
当我们点击Hello按钮的时候，界面就会弹警示框显示“hello”，按钮的事件调用是通过属性onclick来设置的；οnclick="函数名()"即可完成事件调用。
补充：
获取页面输入值：
① document.getElementById(‘Id名’).value //得到值
改变页面的值：
① document.getElementById(“ID名”).value=新值
三、网页小案例
1.题目要求
本次题目需要用到函数的调用及数据类型的转换，搭建这个表格还需要一点html中table的基础，最后还需要亿点点小学数学基础喔！提示：字符串之间的相加是连接，如 “1”+“1”=“11”，要仔细品位。喔，对了还有一点点css样式。
2.原码奉上
建议先尝试着写一下，自己完成更有成就感喔！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易购物车</title>
<style>
table{
border: 2px solid rgb(148, 146, 147);
width: 800px;
margin: 0px auto;
}
tr{
border: 0px;
}
td{
text-align: center;
}
.input_box{
border: 0px;
}
.input_box:focus{
outline: none;
}
</style>
</head>
<body>
<table border="1px">
<tr><th colspan="9">简易购物车</th></tr>
<tr>
<td>商品名称</td>
<td colspan="2">数量（件）</td>
<td colspan="2">单价（元）</td>
<td colspan="2">运费（元）</td>
<td colspan="2"><input type="button" name="btn" id="btn" value="合计" onclick="addSum()"></td>
</tr>
<tr>
<td>道具</td>
<td colspan="2"><input type="number" name="num" id="num" class="input_box"></td>
<td colspan="2"><input type="number" name="price" id="price" class="input_box"></td>
<td colspan="2"><input type="number" name="freight" id="freight" class="input_box"></td>
<td colspan="2"><input type="text" name="result" id="result" class="input_box"></td>
</tr>
</table>
<script>
function addSum(){
var num = Number(document.getElementById('num').value)
var price = Number(document.getElementById('price').value)
var freight = Number(document.getElementById('freight').value)
if(num!=0){
document.getElementById('result').value = num*price+freight
}else{
document.getElementById('result').value = "数量为0，不收钱"
}
}
</script>
</body>
</html>
您如果对文章有其他的见解，欢迎指正~
2705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
