1.函数的基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 函数function
* java :
* public static void main(String[] args){
* 方法体
* }
* 修饰符 返回值类型 方法名(参数列表) {方法体}
*
* js :
* function 函数名(参数列表){ 函数体}
*
* 注意点:
* 1. 参数列表不写var
* 2. 如果有返回值,直接return
* 3. 调用函数时,传入的参数个数不限制
* 4. 函数内部有个默认参数, arguments (本质数组 : 调用此函数传入的所有参数)
*/
function method01() {
console.log("控制台输出")
}
method01()
//111111111111111111111111111111111111111111111111111111111111111111111111111111
function method02(a,b) {
// return a + b;
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i]
}
return sum;
}
var result = method02(1) //return a + b;为NaN （因为b undefined） //如上arguments输出为1
var result = method02(1,2,3) //return a + b;为3 //如上arguments输出为6
console.log(result)
</script>
</head>
<body>
</body>
</html>
2.函数的两种变量和两种定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var a = 1; //全局，外面隐含var c; // 两种变量: 1.全局变量 2.局部变量
function method01() {
var b = 2; //局部
c = 3; // 没有写var为全局变量
document.writeln("内部:" + a)
document.writeln("内部:" + b)
document.writeln("内部:" + c)
}
method01()
document.writeln("外部:" + a)
document.writeln("外部:" + c)
// document.writeln("外部:" + b) //访问不到
</script>
<script>
document.writeln("另一个script:" + a) //可访问到，等价于上面document.writeln("外部:" + a)
</script>
<!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
/*
* 两种定义:
* 1. 命名函数
* function 函数名(参数列表){
* }
* 2. 匿名函数
* 变量名 = function(参数列表) { }
*/
document.writeln("<hr>")
function method02() {
document.writeln("2")
}
method02()
//如下没有函数名
var m = function (a,b) {
return a + b;
}
var result = m(1,2)
document.writeln(result)
</script>
<!--111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
function method03(xx) {
//xx=匿名函数 ，函数回调(callback)：xx()
xx()
}
method03( function(){
document.writeln("哈哈")} ) //最终打印 哈哈
</script>
</head>
<body>
</body>
</html>
3.事件的两种注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 事件 (event): 发生在html元素上的事：1.用户输入的行为
* 2.浏览器自己的行为
*
* 事件是客观存在的, 希望利用事件实现和用户的交互过程
* JS : 事件驱动型语言
*
* 学习: 1. 某个事件是如何发生的 -> 触发动作
* 2. 根据业务给某个事件绑定执行函数
*
* 事件A : onclick (单击事件 : 当用户单击鼠标左键的时候触发)
* 事件绑定函数(事件注册)
* 1. 命名注册
* 1. 首先声明一个命名函数
* 2. 每个标签都有事件属性：onclick = "method01()"，当单击事件被触发的时候,method01执行。
* 2. 匿名注册
* 1. 先找到html标签, 生成对象
* 2. 给对象的事件属性 赋值一个匿名函数
*/
function method01() {
console.log("xx")
}
</script>
</head>
<body>
<input type="button" value="命名注册" onclick="method01()"> <br><br>
<input type="button" value="匿名注册" id="myid">
</body>
</html>
<script>
//1. 如下先找到html标签, 生成对象 (id选择器)
var btn = document.getElementById("myid");
//2. 如下给对象的事件属性 赋值一个匿名函数，不用上面的method01()
btn.onclick = function (ev) {
// 回调函数 (一个函数是我们定义的,但不是我们调用,但最终还是执行的)
console.log("yy")
}
</script>
4.页面加载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 问题: 不能给null设置onclick属性
* 原因: 页面加载顺序: 从上至下的
* 解决: 1. script标签写在body标签之后
* 2. script标签写在head标签中 + 页面加载事件
* 页面加载事件: 当浏览器加载完整个html页面的时候才触发
*/
window.onload = function (ev) {
//页面加载事件
//1. 先找到html标签, 生成对象 (id选择器)
var btn = document.getElementById("myid");
//2. 给对象的事件属性 赋值一个匿名函数
btn.onclick = function (ev) {
// 回调函数 (一个函数是我们定义的,但是不是我们调用,但最终还是执行的)
console.log("yy")
}
}
</script>
<!--1111111111111111111111111111111111111111111111111111111111111111111111-->
</head>
<body>
<input type="button" value="匿名注册" id="myid">
</body>
</html>
5.案例_轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 轮播图: 每隔一秒换一张图片。知识预备：只要动态修改html中的东西, 浏览器会自动刷新
* java思路: 0.jpg到4.jpg
* int i = 0;
* while(true){ //死循环
* Thread.sleep(1000); //每隔1秒
* i++;
* img = document.getElementById("myid"); //找到这图
* img.src = "../img/"+ i +".jpg"
* if(i == 4){
* i = -1; //没有跳出循环
* }
* }
*
* js思路: 有多进程(多进程占资源)。 js里没有多线程（多线程不安全） -> 引入BOM
*/
</script>
</head>
<body>
<img src="../img/0.jpg" width="500px" id="myid">
<script>
var i = 0;
function method01() {
i++;
var img = document.getElementById("myid");
img.src = "../img/"+ i +".jpg"
if(i == 4) {
i = -1 //循环回去++又变成0
}
}
window.setInterval(method01,1000)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* BOM: browser Object model 浏览器对象模型。 window : 窗体
* window.setInterval(函数名,时间) 含义: 每隔时间ms 执行一次 函数名，相当于: 死循环+ 暂停
*/
function method01() {
document.writeln("哈")
}
window.setInterval(method01,1000) //这行可以替代Thread.sleep(1000);，因为没有线程。
</script>
</head>
<body>
</body>
</html>
B站/知乎/微信公众号：码农编程录
