你好javascript day7
1）作用域
var a=1;//全局变量
function addNumber(){
var a=2;//局部变量
a++;
console.log(a,"1");//3
};
console.log(a,"2");//1
addNumber();
console.log(a,"3");//1
//打印顺序 2 1 3
当在函数中定义变量时，这个变量的作用范围仅在函数中
外面调用不到的主要原因是因为a的作用范围仅在函数中，当函数执行完成后a就会自动被销毁
我们认为定义在函数外面的变量，叫做全局变量
定义在函数里面的变量，叫做局部变量
当在函数外打印变量，这个变量肯定就是全局变量
定义的局部变量不会改变全局变量
我们认为一旦在函数中定义了局部变量，那么这个局部变量名字如果和全局变量名相同
全局变量将无法直接在函数中使用了，局部变量的优先级高
var a=3;
function abc(a){
// 参数就是局部变量，虽然没有使用var，但是一旦是确定为参数，就相当于
// 定义了一个局部变量 var a
console.log(a);//10
a++;
}
abc(10);
console.log(a);//3 */
var obj={a:1};
function abc(o){
// 没有更改局部变量
// o.a=10;
// 这里才是真正更改局部变量，更改变量的引用地址
o={a:10};
}
abc(obj);
console.log(obj.a);
var a=1;
// 命名函数在代码中定义以后，script被执行时，会自动将函数放在堆中
// 并且将函数存储在栈中的全局变量，定义函数全局是最为优先，最早的
// 当代码执行到135行 var a=1时，才开始重新定义变量a，而这个变量a
// 与栈中的全局函数a重名，因此变量a就会覆盖全局函数a
function a(a){
console.log(a);//(2)
var a=3;
console.log(a);//(3)
}
console.log(a);//(1) 1
a(10); //1不是一个函数所有报错
console.log(a);//(4)
2）回调函数与递归函数
认识回调函数
function abc(fn){
// fn就是回调函数
fn(3,5);
}
function getSum(a,b){
console.log(a+b);
}
abc(getSum);
// 函数也是对象，当带入参数时
// 桥接
function countNumber(fn){
// return fn(3,5);
var s=fn(3,5);
return s;
}
function getSum(a,b){
return a+b;
}
function getMultiplication(a,b){
return a*b;
}
// 需要计算3+5;
var s=countNumber(getSum);
console.log(s);
// 需要计算3*5;
var s=countNumber(getMultiplication);
console.log(s);
// 回调函数可以应用在某个事件完成或者某个时间达到再去执行函数
var i=0;
// 这是一个方法，定时器，毫秒（单位）
// setInterval(执行函数,间隔多长时间执行一次)
// 时间间隔方法，每间隔1000毫秒执行一次方法，
// 在这里animation函数就是回调函数，每间隔1000毫秒回调执行一次这个函数
var ids=setInterval(animation,1000);
// 返回一个值，这个值就是当前定时器的标识id
function animation(){
i++;
console.log(i);
if(i>10){
// clearInterval清除定时器，ids就是刚才设置定时器时的返回标识id
clearInterval(ids);
}
}
var i=0;
var ids=setInterval(animation,1000);
function animation(){
i++;
console.log(i);
if(i>10){
clearInterval(ids);
}
}
认识递归函数
递归如果没有限制的话就会造成堆栈上限溢出
递归 自己执行自己
var obj={
a:{
a:{
a:{
a:{
a:null,
value:5
},
value:4
},
value:3
},
value:2
},
value:1
};
// 满足条件进入递归
function showObj(o){
console.log(o.value);
if(o.a) showObj(o.a);
}
showObj(obj)
// 当希望遍历具备有深度数据结构时，通常使用递归或者while更为方便
// 当希望遍历具备广度数据结构时，一般使用for循环遍历
// 遍历 全部每个逐个查看
3）数组
数组 数据的组合
数组的新建方式
字面量创建
var arr=[4,5,3,6,2,1];
这种叫构造函数创建
var arr1=new Array(4,5,3,6,2,1);
console.log(arr,arr1);
如果通过数组的构造函数创建数组，参数仅有1个，且这个参数是正整数，则表示新建
一个具备该正整数长度的空数组，里面有这个长度的若干空元素
如果是负数或者小数时，报错
var arr2=new Array(5);//数组长度为5 没填入值 --》 undefined
var arr2=new Array(3.5);//错误 必须是正整数
如果输入的不是数值，是其他类型时，这个数据就会作为该数组的第0个元素，长度为1
var arr2=new Array("a");//填入一个字符a 长度1
console.log(arr2[0]);
长度就是元素的个数
下标是数组内每个值对应的编号 从零开始
数组的最大下标等于数组的长度减一 ---》 arr[最大下标]===arr.length-1
数组的最大下标是数组的长度-1(元素个数-1);
var arr=[1,2,3,5,,2,3,,5,2];//逗号间为空--》 即填入一个undefined 占一个下标
var arr=[1,2,3,5,2,3,5,2];
console.log(arr[4])
console.log(arr.length);//就是数组的长度，也是元素的个数
arr[4]=20;
arr[arr.length-1]=20;
arr[arr.length]=20;//在数组的最尾部添加一个元素
console.log(arr);
arr.length=3;//数组的长度是可以被修改 等于0数组直接清空
4）对象的引用
var o1={a:1};
var o2=o1;
o2.a++;
console.log(o1.a); //a=2
// 我们认为除了数值，字符，布尔值以外的其他对象，是被存储在堆中，并且有一个引用地址
// 我们是将这个引用地址赋值给变量的，如果将一个变量赋值给另一个变量，就是将这个引用
// 地址赋值给另一个变量，因此实际这两个变量指向的引用地址完全相同，更改其中一个，就
// 会引起另一个的改变
var o1={a:1};
var o2={a:1};
console.log(o1===o2);//false
// 针对对象来说，判断是否相等不是根据内容是否相同，而是根据两个对象的引用地址是否相同
// 如果使用新的{}产生的对象那就是新的地址
var prev;
function prevObj(o){
if(prev){
prev.a=0;
}
prev=o;
prev.a=10;
}
var o1={};
var o2={};
prevObj(o1);
// 到现在为止prev和o1的引用地址相同
// o1.a=10;
prevObj(o2);
// 到现在为止 o1.a变成0
// prev重新设置为o2,prev和o2的引用地址相同
// o2.a=10;
5)切换图片
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
margin-left: 20px;
text-align: center;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ff0000;
}
div {
width: 400px;
height: 180px;
background-size: 100% 100%;
background-image: url("./img/a.png");
position: absolute;
transition: all 1s;
top: 50px;
}
</style>
</head>
<body>
<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
<li id="li5">5</li>
</ul>
<div id="div0"></div>
<script>
var prevDot, div0;
init();
function init() {
div0 = document.getElementById("div0");
for (var i = 1; i < 6; i++) {
var li = document.getElementById("li" + i);
li.onclick = clickHandler;
}
changeDot(document.getElementById("li1"));
}
function clickHandler() {
changeDot(this);
var imgSrc = callBackDiv(this);
div0.style.backgroundImage = imgSrc;
}
function changeDot(li) {
if (prevDot) {
prevDot.style.backgroundColor = "rgba(0,0,0,0)";
}
prevDot = li;
prevDot.style.backgroundColor = "red";
}
function callBackDiv(li) {
if (li.id === "li1") return "url(./img/a.png)";
if (li.id === "li2") return "url(./img/b.png)";
if (li.id === "li3") return "url(./img/c.png)";
if (li.id === "li4") return "url(./img/d.png)";
if (li.id === "li5") return "url(./img/e.png)";
}
function circleArea(r){
return 3.1415926*r*r;
}
var a=circleArea(30);
console.log(a);
function rectArea(w,h){
return w*h;
}
var s=rectArea(30,50);
console.log(s);
</script>
</body>
</html>
