4.10 JS02

一.变量一些知识

全局变量:函数外的声明变量
局部变量:函数内的局部变量
函数内部的变量提升

function(){
console.log(a);
var a = 1;
}

此时输出为undifined,因为会默认将函数内部代码变为:

function(){
var a;
console.log(a);
a = 1;
}

二.Math对象

用于执行数学任务

1. 返回绝对值:Math.abs(x)
2. 向上取整:Math.ceil(x)
3. 向下取整:Math.floor(x)
4. 返回最大值:Math.max(x,y,z)
5. 返回最小值:Math.min(x,y,z)
6. 返回x的y次幂:Math.pow(x,y)
7. 返回0-1之间的随机数,取不到边界:Math.random( )
8. 四舍五入为整数:Math.round(x)

parseInt():可将一个string类型转为number类型,截取字符串前面的数字,向下取整
parseFloat():保留小数点后的数字
toFixed():保留小数的位数
数据类型转换
String():输出为string类型,在Webstorm里为黑色
Number():输出为number类型,在Webstorm里为蓝色
Boolean():输出为bool类型,在Webstorm里为红色

三.DOM

dom是Document Object Model(文档对象模型)的简写

DOM树
var 变量名 = document.getElementById();:通过dom获取到元素的id名复制给变量方便后面使用,如不声明会是全局变量
id名.inneHTML=" ";:通过dom获取的id名改变页面的内容
id名.style.属性=" ";:通过dom获取的id名改变页面的样式

注意:

改变样式和属性记得用等号
后面的值记得加双引号

四.JavaScript 事件

事件源:通过DOM获取的属性
事件属性:触发了什么
事件指令(一般用函数封装):结果,事件指令一定是函数名,不带括号,可以简写为下例

格式:

事件源 . 事件属性 = 事件指令
在事件源上触发事件属性执行事件指令

例:  var pic = document.getElementById("pic");
        pic.onmouseover = function () {
            pic.src="img/NJ.jpg"
        }
        pic.onmouseout = function () {
            pic.src="img/4.jpg"
        }

事件源为通过DOM获取的ID名,事件属性为鼠标经过和离开,事件指令为改变图片

步骤:

1. 首先要获取标签
2. 添加事件,改变事件

事件:

onclick事件:鼠标点击事件
onmouseover事件:鼠标经过事件
onmouseout事件:鼠标离开事件
pormpt:提示用户输入信息,返回值为string类型
string类型转number类型: string*1
isNan:不是一个数字,但是number类型,返回值为bool类型,如果值为false说明是一个数字,NAN不等于NAN
onchange:发生改变
onfocus:获得焦点
onblur:失去焦点
placeholder：占位符

注意:重复代码用函数封装,变化的值当作参数,把参数声明一个变量,在添加事件,改变事件以减少冗余代码,如下:

     var pic1 = document.getElementById("pic1");
     var pic2 = document.getElementById("pic2");
     var pic3 = document.getElementById("pic3");
     var pic4 = document.getElementById("pic4");
     var pic5 = document.getElementById("pic5");
     var box = document.getElementById("box");

     pic1.onmouseover = function () {
     box.style.backgroundImage = "url(images/1big.jpg)";
     }
     pic2.onmouseover = function () {
     box.style.backgroundImage = "url(images/2big.jpg)";
     }
     pic3.onmouseover = function () {
     box.style.backgroundImage = "url(images/3big.jpg)";
     }
     pic4.onmouseover = function () {
     box.style.backgroundImage = "url(images/4big.jpg)";
     }
     pic5.onmouseover = function () {
     box.style.backgroundImage = "url(images/5big.jpg)";
     }

上述代码冗余代码过多,简写为下:

    var bg = document.getElementById("box");
    function changebgImage(liId, bgiUrl) {
        var dom = document.getElementById(liId);
        dom.onmouseover = function () {
            bg.style.backgroundImage = bgiUrl;
        }
    }
    changebgImage("pic1", "url(images/1big.jpg)");
    changebgImage("pic2", "url(images/2big.jpg)");
    changebgImage("pic3", "url(images/3big.jpg)");
    changebgImage("pic4", "url(images/4big.jpg)");
    changebgImage("pic5", "url(images/5big.jpg)");

五.数组

定义数组:var arr = [x,y,z];
访问数组中的数据:arr[0];
其中[ ]代表数组,数组中可以存储不同类型的元素,通过下标的形式访问数组元素,下标从0开始,可以通过字符串下标的形式来访问数组元素
获取数组长度:arr.length
数组的遍历

for(var i =0; i<arr.length; i++){
              arr[i];}