2019.5.5 JS相关

JS(JavaScript)

JS(JavaScript)

简介

JS全称:JavaScript
JS是面向对象的编程语言,脚本语言
JS的组成部分
- EMAScript:ES5 ES6 基础语法和标准性的东西
- DOM:文档元素进行操作
- BOM:对浏览器进行操作

JS的变量

怎样定义变量?

Example : var a = 10;

var :类型修饰符
a :变量名,需要符合命名规范
= :赋值运算符
10 :初始值
; :代表一条语句的结束
给变量重新赋值时,不需要再加var

变量名的命名规范

以数字,字母,下划线,$组成,不能以数字开头,尽量保证见名知意
以驼峰结构命名 personName
不能使用系统关键字

JS的基础变量类型

JS是弱类型编程语言

Q:怎样判断数字类型?

A:使用"typeof(变量名);"
可以写"alert(typeof(变量名));"使用提示框显示,也可以写"console.log(变量名);"使用控制台显示。

数字类型 number

Example : var a = 10;

Example : var b = 3.1415;

JS中没有浮点类型带小数点的也是number

字符串类型 string

Example : var str = "abc"

字符串拼接

var str1 = "五一";
var str2 = "节后综合征";
var str3 = str1 + str2;

隐式类型转换

var str5 = "10" + 10;
console.log(str5);

结果是1010

布尔值类型 boolean

Example : var flag = true;

Example : var flag = false;

布尔值只有两个值真和假

未定义类型 undefined

Example : var c;

空类型 null

一般对象赋初值时候使用

JS的运算符

算术运算符

通常运算符

+ - * / %

取余 % Example : var m = 10 % 3;

第一组特殊运算符

++ --

n++; n--;

var n = 3;
var x = n++;
此时得出的结果是x = 3,n = 4;
先返回再自加;

var y = ++n;
此时得出的结果是y = 4,n = 4;
先自加再返回;

但是当++n和n++单独作为一条语句出现时,因为返回值没有任何变量去接受,所以n++和++n是一样的;

第二组特殊运算符

+= -= *= /=

n += 2; 相当于 n = n + 2;

逻辑运算符

与运算

与运算 &&
只有当运算符左右两边同为真时,与运算才为真,其余都为假;
console.log (x && y); 
console.log (x && y && z);
console.log (x && z);

或运算

或运算 ||
当运算符左右两边有一边为真时,或运算即为真;
console.log (x || y); 
console.log (x || y || z);
console.log (x || z);

非运算

非运算 !
非运算为给!后的变量/式子取反
console.log (!x);

给本身取反:
x = !x;

比较运算符

第一组比较运算符

> < >= <= !=

第二组比较运算符

== === 

== 判断的是数值相等
var x = "10" == 10;
这条语句返回的是true;

=== 判断的是数值和类型都相等
var x = "10" === 10;
这条语句返回的是false;

JS的逻辑结构

请问我不写了可以吗

分支结构

您好 if..else可以不写的

三元表达式

也叫三目运算符,看个例子然后if变问号else变冒号就完事了

当a > b时,c = a,否则c = b;
var c = a > b ? a : b;

循环结构

您好 while do...while 和for循环也可以不写的

文档写入

这个东西是往body里添加东西用的
document.write("123");//加字
document.write("<div></div>");//加标签
document.write("<div class='name'></div>");//加带class的标签

Math对象

就是math函数

π

console.log(Math.PI);

max

var max = Math.max(10,20,30,1000);
console.log(max);

min

var min = Math.min(10,20,30,1000);
console.log(min);

向上取整

console.log(Math.ceil(1.1));//2
console.log(Math.ceil(-1.1));//-1
console.log(Math.ceil(1.9));//2

向下取整

console.log(Math.floor(1.1));//1
console.log(Math.floor(-1.1));//-2
console.log(Math.floor(1.9));//1

四舍五入

console.log(Math.round(3.1));//3
console.log(Math.round(3.5));//4

取绝对值

console.log(Math.abs(-100));

次幂

console.log(Math.pow(5,2));

开方

console.log(Math.sqrt(81));

随机数

取值范围是[0,1)

console.log(Math.random());

公式:Math.floor(Math.random() * (max - min + 1) + min));

随机66到99的数
console.log(Math.floor(Math.random() * (99 - 66 + 1) + 66));

这样吧写个11选5今天中午就买这注
for (var i = 0; i < 5; i++) {
    console.log(Math.floor(Math.random() * (10 - 1 + 1) + 1)); 
}
但是这样就没写重复判断 回头再改

数组

数组的创建

创建空数组

这是个一般不用的方法:
var arr = new Array();

这是个最常用的方法:字面量
var arr = [];

创建有内容的数组

这是个一般不用的方法:
var arr = new Array(1,2,3);

这是个最常用的方法:
var arr = ["zaima?","buzai"]

创建长度为n的空数组

n是个数字
var arr = new Array(n);

数组中的元素赋值和取值

用下标
arr[1],arr[2],arr[3]......

当定义一个长度为10的数组时,
arr[100] = "111";//给下标100的元素赋值
这时typeof(arr[99]) = undefined.

数组的长度

arr.length
只能获取,不能设置,可以改变

怎样使用数组的长度向数组末尾添加元素?
arr[arr.length] = 777;

数组的遍历

使用for循环,循环终止的条件是i < 数组的长度

var arr = [111,222,333,444,555,666];
for (var i = 0; i < arr.length; i++) {
           console.log(arr[i]);
}

数组相关练习

求数组中所有元素的和

var arr = [555,666,777,888,999];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
        sum = sum + arr[i];
}
console.log(sum);

随机十个数放进数组中

这里随机的是取值范围66-99的十个数

var arr = [];
for (var i = 0; i < 10; i++) {
    num = Math.floor(Math.random()*(99 - 66 + 1) + 66);
    arr.push(num);  //向数组末尾添加一个元素
}
console.log(arr);

随机十个偶数放进数组中

这里随机的是取值范围66-99的十个偶数

1.使用while循环的做法
(因为不知道循环多少次才能生成十个偶数)

    var arr = [];
    while (arr3.length != 10) {
        num = Math.floor(Math.random()*(99 - 66 + 1) + 66);
        if (num % 2 == 0) {
            arr.push(num);
        }
    }
    console.log(arr);

2.使用for循环的做法
(当生成的数不是偶数时,i--退回上一个)

    var arr = [];
    for (var i = 0; i < 10; i++) {
        num = Math.floor(Math.random()*(99 - 66 + 1) + 66);
        if (num % 2 == 0) {
            arr.push(num);
        } else {
            i--;
        }
    }

打印数组中最小的数和它的下标

var arr = [90,88,40,11,8];
var min = arr[1];
var index = 1;
for (var i = 0; i < arr.length; i++) {
    if (arr4[i] < min) {
        index = i;
        min = arr4[i];
    }
}
console.log(min,index);

打印十个不重复的随机数

这个这个非常重要
~~是限(xie)时(bu)的(wan)代码~~

var arr = [];
while (arr.length < 10) {
    var num = Math.floor(Math.random() * 10);
    var flag = true;
    for (var i = 0;i < arr.length;i++) {
        // 如果随机数和数组中元素相等,不用继续比较 直接跳出循环
        if (num == arr[i]) {
            flag = false;
            break;
        }
    }
    if (flag) {
        arr.push(num);
    }
}
console.log(arr);

二维数组

就是arr[i][j]嘛

//打印arr里的数

var a = [1,2,3];
var b = [4,5,6,7];
var c = [666,888,999];
var arr = [a,b,c];
for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr[i].length; j++) {
        console.log(arr[i][j]);
    }
}

数组的方法

Example:
var arr = ["mini","甲壳虫","凯迪拉克","雷克萨斯","奥迪","JEEP"];

在末尾添加数据

Example:arr.push("宝马");

在开头添加数据

Example:arr.unshift("霸道");

删除并返回数组中最后一个元素

Example:arr.pop();

当pop对空数组进行操作时,不会对数组造成影响 返回值为undefined

var car = arr.pop();//接受删除的元素
console.log(car);

删除并返回数组中第一个元素

Example:arr.shift();

删除元素

Example:arr.splice(2,3);
splice(n,m) 从下标n开始删除m个

也可以在删除的位置添加元素
这么写:
arr.splice(2,3,"雪铁龙","捷达");

连接数组

Example:arrD = arrA.concat(arrB,arrC);

var arrA = [1,2,3];
var arrB = [4,5,6];
var arrC = [7,8,9];

var arrD = arrA.concat(arrB);
arrD = arrA.concat(1000);
arrD = arrA.concat(arrB,arrC);
console.log(arrD);
console.log(arrA,arrB);

数组转换字符串

Example:var str = arr.join();

join的括号里写什么 字符串就是用什么连接

var arr = ["111","222","333","444"];
var str = arr.join();
console.log(str);

获取元素下标

Example: var num = arr.indexOf("a");

indexOf用来获取元素下标
如果数组中括号内的元素不存在,则返回-1

var arr = ["a","b","c","d"];
var num = arr.indexOf("a");
console.log(num);

冒泡排序

这个这个也非常重要
~~是限(xie)时(bu)的(wan)代码~~

var a = 0;
for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0;j < arr.length - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
            a = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = a;
        }
    }
}
console.log(arr);

删除数组中重复的数

var a = [5,7,6,8,7,9,6,5];
for (var i = 0; i < a.length; i++) {
    for (var j = i + 1; j < a.length; j++) {
        if (a[j] == a[i]) {
            a.splice(j,1);
            j--;
        }
    }
}
console.log(a);

定时器

普通定时器

var oBtn = document.getElementById("btn");
var timer = null;
var flag = true;

oBtn.onclick = function () {
    var count = 0;
    if (flag) {
        timer = setInterval(function () {
        count++;
        console.log(count);
        }, 400)
    } else {
        // 清除定时器
        clearInterval(timer);
    }
    flag = !flag;
}

延时定时器

timer = setTimeout(function () {
    console.log("5");
},5000);   
//清定时器
clearTimeout(timer);

函数

无参无返回值的函数

var oDiv1 = document.getElementById("div1");

oDiv1.onclick = function () { 
    getSum();
}

//这是无参无返回值的函数getSum:
function getSum () { 
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        sum = sum + i;  
    }
    console.log(sum);
}

有参无返回的函数

什么是形式参数和实际参数?

形式参数:
在函数定义时,写在括号内用来代表传入参数的占位的参数,叫做形式参数

Example: a,b即为形式参数
function sum (a,b) {
        ...
}

实际参数:
在函数调用时,真正传给函数内部的值叫做实际参数

Example: 10,20即为实际参数
sum(10,20);

注意:当形参没有被传实参时,它的类型是undefined

例子

function add (num1,num2) { 
    var sum = 0;
    sum = num1 + num2;
    console.log(sum);
}
add(10,20);

有参有返回值的函数

什么是返回值?

一个函数的函数名即是该函数的代表，也是一个变量。
由于函数名变量通常用来把函数的处理结果数据带回给调用函数，即递归调用，所以一般把函数名变量称为返回值。

例子

实现函数:
随机-10 到10之间的数 如果是正数返回随机数的平方
如果是负数,返回随机数的绝对值 如果是0 什么执行return;
    
function getRandomNum1(min, max) {
var num = Math.floor(Math.random() * (max - min + 1) + min);
    if (num > 0) {
        console.log(num);
        return Math.pow(num,2);
    } else if (num < 0){
        console.log(num);
        return - num;
    } else {
        //当函数没有返回值时调用后返回值类型是undefined
        console.log(num);
        return;
    }
}

var a = getRandomNum1(-10,10);
console.log(a);

JS的作用域

回调函数

就是函数里面调用函数?
大概是这个意思
看个例子就明白了

function abc(callBack) {  
    console.log("11");
    callBack();
    console.log("22");
}

var a = function () {  
    console.log("!!!!!!");
}
    // abc(a);
    console.log(a);
    console.log(abc);
    console.log(a());

作用域

作用域有两种
函数级作用域,块级作用域

变量也可以设置全局变量和局部变量
和以前学的一样

this的应用

this 指的是当前的选择
可以是当前的点击,也可以是当前的鼠标移入移出

自定义属性

自定义一个对象的属性,等于什么都可以
常用于获取对象下标(?)

鼠标移入移出

可以用来写hover效果(?)能用css做的为什么我要用js做迷惑.jpg

oDiv1.onmouseover = function () {  
    oDiv1.style.backgroundColor = "green";
    console.log("鼠标移入");
}
oDiv1.onmouseout = function () {  
    oDiv1.style.backgroundColor = "";
    console.log("鼠标移出");
}

时间对象

获取当前时间

var date = new Date();
console.log(date);

格式化时间

console.log(date.toLocaleString());
console.log(date.toLocaleDateString());
console.log(date.toLocaleTimeString());

获取年月日星期小时分钟秒

获取年

var year = date.getFullYear();
console.log(year);

获取月

注意:月份要 + 1,因为月份的取值范围为0-11;

var month = date.getMonth() + 1;
console.log(month);

获取日

var theDate = date.getDate();
console.log(theDate);

获取星期几

注意:周日的值是0;

var day = date.getDay();
console.log(day);

获取小时

var hour = date.getHours();
console.log(hour);

获取分钟

var minute = date.getMinutes();
console.log(minute);

获取秒

var seconds = date.getSeconds();
console.log(seconds);

时间戳

时间戳:1970到现在的毫秒数.

获取当前时间戳

var times = date.getTime();
console.log(times);

时间戳转化时间对象

var date1 = new Date(1557888889390);
console.log(date1);

固定时间转化

var date2 = new Date("2017-06-22");//从八点开始
var date3 = new Date("2017/06/22");//从零点开始
var date4 = new Date("2017-06-22 12:05:09");
var date5 = new Date(2017,06,22,00,05,10);

console.log(date2);
console.log(date3);
console.log(date4);
console.log(date5);

字符串方法

首先定义一个字符串:
var str = "改革春风吹满地";

获取某个下标对应的字符

console.log(str.charAt(2));

console.log(str.indexOf("风"));//取"风"字对应的下标
console.log(str.indexOf("中"));//没有这个字的话返回-1

遍历字符串

for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
}

截取字符串

console.log(str.substring(2));//从下标2开始截取 截到最后
console.log(str.substring(2,3));//下标2开始截取 截到下标3

分离字符串

var str1 = "Play hard Study hard";

var str1Arr = str1.split(" ");
console.log(str1Arr);//使用空格分离

console.log(str1Arr.join("hard"));//使用hard作为分隔

拼接字符串

var str2 = "111";
var str3 = "222";

var newStr = str2.concat(str3);
console.log(newStr);

大小写转换

var str4 = "long time no see";

var str5 = str4.toUpperCase();
var str6 = str5.toLowerCase();
console.log(str5);
console.log(str6);

offsetLeft & offsetTop & offsetWidth

var oAll = document.getElementById("all");
console.log("offsetLeft:" + oAll.offsetLeft);
//offsetleft相对于定位父级左侧的距离
//无定位时相对于浏览器左侧
console.log(oAll.offsetTop);

//padding + border + width
console.log(oAll.offsetWidth);

获取CSS样式

获取行间样式

console.log(oAll.style.width);

获取外部引入/内部引入

function getStyle(obj,attr) {  
//因为除了ie别的这个oAll.currentStyle都没有值 所以用这个来判断
    if (obj.currentStyle) {
        //在ie里只能用这个来获取样式
        //正常的方法获取不着
        //浏览十小时 八小时不兼容
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj)[attr];
    }
}

函数自调用

function abc() {  
    console.log(1);
}
console.log(abc);
abc();
        
//代码执行到函数定义后 马上调用此函数
//常用在闭包和js的外部引入
//只执行一次
(function () {  
    console.log(1);
})();

限时代码:匀速运动

div {
     100px;
    height: 100px;
    background: pink;
    margin-bottom: 10px;
    }

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<script>
    var oDivs = document.getElementsByTagName("div");

    for (var i = 0;i < oDivs.length;i++) {
        oDivs[i].onmouseover = function () {
            linear(this, "width", 500, 10);
            }
        oDivs[i].onmouseout = function () {
            linear(this, "width", 100, 10);
        }
    }

    function linear(obj, attr, des, speed) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var theWidth = getStyle(obj, attr);
            var a = des - parseFloat(theWidth);
            if (Math.abs(a) > speed) {
                if (a > 0) {
                    obj.style[attr] = parseFloat(theWidth) + speed + "px";
                } else {
                    obj.style[attr] = parseFloat(theWidth) - speed + "px";
                }
            } else {
                obj.style[attr] = des + "px";
                clearInterval(obj.timer);
            }
        })
    }

    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj)[attr];
        }
    }
</script>

获取DOM节点

.name {
     100px;
    height: 100px;
    background-color: red;
    margin-bottom: 10px;
}

<div id="all">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

var oAll = document.getElementById("all");
var oDivs = oAll.getElementsByTagName("div");

获取子节点

只能取亲儿子(儿子辈孙子辈不行)

console.log(oAll.children);

创建新元素

var newDiv = document.createElement("div");
newDiv.innerHTML = "...我点子怎么这么正";
newDiv.className = "name";//加类名

在某标签末尾添加元素

oAll.appendChild(newDiv);

在指定位置添加元素

var newP = document.createElement("p");
newP.innerHTML = "消防演习";
//在b之前插入a
//insertbefore(新元素a,元素b)
oAll.insertBefore(newP,oAll.children[5]);

删除元素

//父标签.removeChildren(子标签)                         

oAll.removeChild(newImg);
或newImg.remove();

替换元素

//父标签.replaceChild(新标签 ,子标签)

var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "超链接";
oAll.replaceChild(newA,oAll.children[0]);

获取父节点

var theParent = newP.parentNode;
theParent.style.border = "1px solid red";