for循环：
一、 for循环
概念：做重复的事情，通常和数字关联
1.for循环的基本结构（两个分号不能省略）
<script type="text/javascript">
// for(初始化条件;结束条件;更新条件){
// 执行语句
// }
//围着操场跑5圈
//跑圈
for(var i=1;i<=6;i++){
console.log('我在跑第'+i+'圈');
}
// for循环执行过程
//--------------------第一圈
//初始条件 i=1
//结束条件 i<6 为true
//执行语句 console.log('我在跑第'+i+'圈'); 第一圈
//更新条件i++ 1变成2
//--------------------第2圈
//初始条件 i=1
//结束条件 i<6 为true
//执行语句 console.log('我在跑第'+i+'圈'); 第2圈
//更新条件i++ i变成3
//--------------------第3圈
//初始条件 i=1
//结束条件 i<6 为true
//执行语句 console.log('我在跑第'+i+'圈'); 第3圈
//更新条件i++ 1变成4
//--------------------第4圈
//初始条件 i=1
//结束条件 i<6 为true
//执行语句 console.log('我在跑第'+i+'圈'); 第4圈
//更新条件i++ 1变成5
//--------------------第5圈
//初始条件 i=1
//结束条件 i<6 为true
//执行语句 console.log('我在跑第'+i+'圈'); 第5圈
//更新条件i++ 1变成6
//--------------------第6圈
//初始条件 i=1
//结束条件 i<6 为true
//执行语句 console.log('我在跑第'+i+'圈'); 第6圈
//更新条件i++ 1变成7
//--------------------第7圈
//初始条件 i=1
//结束条件 i<6 为false
//执行语句 console.log('我在跑第'+i+'圈'); 结束
//更新条件i++
</script>二、for循环注意点
1. 是否满足条件：（如果不满足：代码一次不执行）
2. 是否有结束条件（如果没有，就是一个死循环（无限循环））
3.浏览器15秒没有反应过来就会自动崩溃
三、break
1.break在for循环中只要break被执行，for循环立即终止
<body>
<h1>for循环</h1>
<p>你需要跑5圈,体育老师非常重视安全,每跑一次都会询问你,还能不能坚持；如果能坚持,能坚持就继续跑；不能就终止跑圈 break可以终止循环</p>
<script>
for(var i=1;i<=5;i++){
var can = confirm("是否还能坚持");
if(!can){break;}
console.log("我正在跑第"+i+"圈");
}
// for循环初始值 i=1
// for循环结束值 i<=5;
// for循环代码: 循环是否坚持,能则跑圈,不能则终止
// for循环更新变量 i++
// for循环遇到break终止
</script>
</body>四、continue
1.continue 当次循环continue关键字以后的代码不执行
执行下一次循环
<body>
<h1>for循环</h1>
<p>8000米长跑,一圈是800米,总共10圈,你的女朋友在跑道旁边，每跑一圈询问你是否喝水,喝了这一圈就不跑,喝完跑下一圈</p>
<script>
// for循环
// 初始条件是:1
// 结束条件是:10
// 执行代码: 问喝水不？喝水就这一圈不跑了,不和就跑完这一圈
// 更新循环变量 i++
for(var i=1;i<=10;i++){
var flag = window.confirm("哥是否喝瓶水?");
// 如果不喝就继续跑
if(flag){ continue; }
console.log("正在跑第"+i+"圈");
}
// continue结束当次循环,后面的代码不执行,执行下一次循环
</script>
</body>JS函数
一、定义函数
1.function fun(){
alert('')
}
二、调用函数
1.在JS中直接调用 fun（）
2.可以html事件属性 <h1 οnclick='fun()'>
3.dom 1级事件注册 btn.οnclick=fun
4.dom 2级事件注册 btn.addEventListener('click',fun)
5.函数中调用函数：
function play(){
check();
..........
}
<body>
<h1 onclick="fun()">函数-方法</h1>
<p>函数:一块可以重复执行的代码,函数可以被多次调用</p>
<button type="button">调用</button>
<script>
/* function 名称 (){
要执行的代码
} */
function fun(){
console.log("养羊");
console.log("喂马！");
console.log("劈柴");
console.log("射雕！");
}
// 函数的执行需要背调用
// 01 js直接调用
fun();
// 02 html事件属性中掉用
// 03 在dom1事件调用
var btn = document.querySelector("button");
btn.onclick = fun; //不需要括号
// 04 在dom2级 addEventListener(type,fun)
</script>
</body>三、函数的参数
1.name是形式上的参数（形参）定义时候
‘’小红‘，‘’苹果‘’实际参数（实参）执行的时候
在执行的时候会把实参代入函数替换形参执行代码
<script>
// 形参可以随便起,保持一致就可以
function say(name){
alert("我非常中意"+name)
}
say("苹果");
say("小红");
</script>
2.参数列表：函数有个特殊变量arguments，类似数组的变量存储函数传入参数列表
// 定义函数add,求参数的和
function add(){
// console.log(arguments,arguments.length,arguments[0])
var sum = 0; //总数
// for循环:初始i=0;结束i<arguments.length;i++
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
alert(sum);
}
add(1,3,5,1);四、默认参数
定义函数参数默认值，没有传入参数时候，默认使用这个值
function end(name=' '){
...
}
<body>
<h1>函数默认参数</h1>
<script>
// 给女朋友rose,写一份信,同时给自己的另外几个好友传达爱意
// 信的开头是"亲爱的xx你好,我想死你了！"
// 写函数 send(name)如果调用send传入 莉莉,小红,小兰,笑话
// 如果没有传入参数 就是亲爱的rose你好,我想死你了
function send(name='rose'){
alert(`亲爱的${name}你好,我想死你了`);
}
send("小红");
send();
send("小兰");
// send();
</script>
</body>五、函数的返回值
函数默认返回undefined
用return关键字可以定义函数返回值
return后面的代码 函数不会执行
<body>
<h1>函数返回值</h1>
<script type="text/javascript">
// var re =confirm('你确定？');
// console.log(re);
//内置函数confirm执行完，赋值给re
//函数执行完可以返回一个值，被变量接受
//自定义函数默认，默认返回undefined
//关键字return可以定义函数执行完的返回值
//函数执行完，返回参数相加的结果
//当函数遇到return，就不再往下执行了
function add(a,b){
return a+b;
alert(a+b)
}
var re = add(3,1);
console.log(re);
</script>
</body>六、匿名函数
1.匿名函数就是没有名字的函数
2.匿名函数3种执行方式：
- 1.在事件注册 el.οnclick=function(){}
- .当做回调函数 list.forEach(function(item){ })
- 4.匿名函数自执行 两种方法 加括号，或加感叹号：;(function(){}) () 、!function(){}()
<body>
<h1>匿名函数</h1>
<p>p1</p>
<p>p2</p>
<script>
// 匿名函数就是没有名字的函数
// 通常匿名函数执行方式
// 01 和事件绑定一起
// 02 当做回调函数
// 03 自执行
// 01
var h1 = document.querySelector("h1");
h1.onclick = function(){
alert("你好");
}
// 02
// forEach遍历当回调函数
var ps = document.querySelectorAll("p");
ps.forEach(function(item){
console.log(item.innerText)
});
// 03 匿名函数自执行
(function(){alert("你们还好吧！")})()
!function(){alert("你们好呀！")}()
</script>
</body>
5.赋值给变量
var abc = function(){...}
先声明后执行
// 把函数赋值给变量,只能在赋值完后访问
var fun = function(){
alert("good");
}
fun();七、变量的提示
1.js在执行代码前，会把当前作用域的函数和变量提升到最前面，把变量值赋为undefined，再执行其他代码
// 变量提升:javascript在执行代码时候,会先把函数声明的变量提升所有代码的最前面
// 函数声明前后都可以方法,变量声明前值是undefined
alert(a);
var a = 25;
add();
function add(){
alert("你好")
} 八、变量的作用域
全局作用
- 在js任意地方可以访问
- 在script用var 声明的变量
- window的全局属性
- 在任意地方没有用关键字声明的变量也是全局变量
函数作用域
- 在当前函数，子函数可以访问
- 在当前函数声明的变量
函数可以访问其父函数作用域/全局作用域，变量在函数外部不能访问函数内部变量
4361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
