前端知识之HTML

js的介绍

js的全称: javascript,布兰登 · 艾奇 LiveScript, javascript

我们要的学习的js主要三部分构成:

ECMAscript语法

BOM Browser Object Model 浏览器对象模型

DOM Document Object Model 文档对象模型

js的基本使用

js也有自己的代码文件,文件格式以“.js”结尾.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        alert(123)
    </script>
</body>
</html>

三种使用方式

行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 onclick="alert(123)">点我呀!!!</h1> //当点击 点我呀!!! 时会出现下边的图片显示
</body>
</html>

内部导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 id="h1">点我呀!!!</h1>
    <script>
        // 内部使用js
        h1.onclick = function(){
            alert(666);
        }
    </script>
</body>
</html>

//当点击 点我呀!!! 时会出现下边的图片显示

外部导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <h1 id="h1">点我呀!!!</h1>
    <script src="js/8.js"></script>
</body>
</html>

js的学习工具

1. 代码编辑器
2. 手册
   https://www.runoob.com/jsref/jsref-tutorial.html
   https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference
3. 浏览器,内置了js的内核 F12
   Console调试控制台
   Source 调试代码[单点调试工具]

js的基本语法

js是一门弱类型的编程语言,属于基于对象和基于原型的脚本语言.
一般用于完成网页的特效实现.

变量[Variable]

格式:
  声明一个没有值的变量:
      var 变量名;
  声明一个有值的变量:
        var 变量名 = 变量值;
        
声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined

声明变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script>
/* js的多行注释
    var num = 200;  // 变量在第一次使用的时候,必须有声明,并以var进行声明
    alert(num); // 让浏览器把内容以弹窗的方式显示出来

    // 变量可以和其他的数据进行运算
    var ret = num + 100;
    alert(ret);
*/

    // 变量的值是可以进行修改的
    var box = "hello";
    alert(box);
    box = 200;
    alert(box);
</script>
</body>
</html>

数据类型

变量的值可以是任意的内容,不同的内容,根据他们各自的特征和用途可以划分成不同的数据类型.

1. 数值型[Number]
 1.0  这是数值
 100  这也是数值

2. 字符串[string]
   可以使用单引号      '一段文本'
   也可以使用双引号     "一段文本"
   设置可以使用反引号   `多行字符串/文本字符`
   
3. 布尔类型[boolean]
   true
   false
   
4. 数组Array, 类似python里面的列表,但是在js中本质是对象.
   [1,2,3,4]

5. 对象[Object], 类似python的字典,但是这个字典中的成员的值可以是一个方法
   {
     "name":"xiaoming",
     "desc": function(){
                alert("我叫小明");
             }
   }
6. null,本质也是对象,空,代表了什么都没有

7. undefined 未定义.没定义

可以通过typeof 关键字来识别变量值的类型.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script>
   // 变量的值可以是不同的数据类型的内容
   // 1. 数值类型的变量
   // var box1 = 100;
   // alert(box1);
   // alert(typeof box1); // number 数值型
   // var box2 = 3.14;
   // alert( box2 );
   // alert( typeof box2 ); // number

    // 2. 字符串类型的变量
    // 注意: 1. 单引号或者双引号声明的字符串不能换行,反引号字符串可以换行,所以反引号字符串也被称 文档字符串,多行字符串
    //       2. 多行字符串里面也可以显示已经声明的变量数据,因为这种特性,反引号字符串也被称之为 模板字符串
    // var box3 = 'hello';
    // var box4 = "hello";
    // var box5 = `hello ${box3}`;
    //
    // console.log(box3, typeof box3);
    // console.log(box4, typeof box4);
    // console.log(box5, typeof box5);

    // 3. 布尔类型,单词小写
    //     console.log(true);
    //     console.log(false);
    //     console.log(typeof true); // boolean

   // 4. 数组Array 类型的变量
   // 数组,在js本质上就是对象,通过typeof查看类型的时候,直接就是一个对象[object].
   // 数组类似于在python中的列表,所以每一个成员都会有唯一的索引,索引从左往右,从0开始,逐一递增

    // var box6 = []; // 没有成员的数组
    // console.log(box6, typeof box6); // "object"
    //
    // var box7 = ["苹果","葡萄","哈密瓜"];
    // console.log(box7);
    //
    // // 另一个声明数组的方式
    // var box8 = new Array();
    // console.log(box8, typeof box8);
    // var box9 = new Array("pingguo","putao","hamigua");
    // console.log(box9);

    // 访问数组的成员
    // var box7 = ["苹果","葡萄","哈密瓜"];
    // console.log(box7[0]);
    // console.log(box7[4]); // 访问数组不存在的下标,获取到的是未定义 undefined
    //
    // // 追加成员
    // box7[3] = "芒果";
    // console.log(box7);
    //
    // // 修改指定成员的值
    // box7[2] = "西瓜";
    // console.log(box7);

    // 5. 对象[object] 类型的变量
    // var box10 = {}; // 空对象
    // console.log(box10, typeof box10);

   // 声明一个有成员的对象,js中对象的成员有2种,属性和方法
   // 属性,类似变量
   // 方法, 类似函数
   // var box11 = {
   //      "name":"xiaoming", // 键值对,属性名必须按照变量名的命名规范,属性名可以加引号,也可以不加引号
   //      age: 12,
   //      desc: function (){
   //              // 函数中的代码
   //           }
   // };
   //  console.log(box11);
   //
   // // 另一个声明对象的方式
   //  var box12 = new Object();
   //  console.log(box12, typeof box12);
   //  // 这种声明方式,对象的成员只能在声明以后外边添加
   //  // 上面第一种声明对象的方式,也支持外边后续追加成员
   //  box12.sex = "男";
   //  console.log(box12);
   //  box12.say = function(){
   //                // 方法代码
   //                alert("hehe");
   //              };
   //   // 对象的成员可以被调用,也就是属性可以被访问,也可以被修改,对象的方法也可以被调用执行
   //  console.log( box12.sex );
   //  console.log( box12.say() );


    // 空,表示什么都没有
    // console.log(null, typeof null); // null  "object"
    //
    // // 未定义
    // // 1. 使用了不存在的变量或者对象不存在的属性
    // // 2. 直接赋值的时候指定是undefined
    // // 3. 定义变量的时候,没有进行赋值
    // console.log(undefined, typeof undefined); // "undefined"
    var box13 = undefined;
    console.log( box13 );
</script>
</body>
</html>

类型的转换

js中,类型转换有2种.一种就是强制转换,一种就是自动转换.

因为js是一门弱类型的脚本语言,所以变量会在运算符的运行要求,有时候根据运算符的要求,进行自动转换的.

强制转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 1. 转换数据为数值类型
    // parseInt     把数据转换成整数
    // parseFloat   把数据转换成小数
    // Number       把数据转换成数值
    // var box1 = "一共100件"; // 转换会失败
    // // var box1 = "100件";     // 转换会成功
    // var ret = parseInt(box1);
    // console.log(box1);
    // console.log(ret);
    //
    // var box2 = "3.14";
    // console.log( parseFloat(box2) ); // 3.14
    //
    // var box3 = "3.14";   // 使用Number转换的数据里面必须是纯数字!!!!否则都会转换失败
    // // var box3 = "3.1.4";  // 转换失败!
    // console.log( Number(box3) );

    // 对于转换数值,如果转换失败的话,则结果为 NaN ,是 Not a Number ,但是NaN的类型也是number类型

    // 2. 转换数据为字符串
    // 变量.toString()
    // String(数据)
    // var box4 = 3.14;
    // var ret = box4.toString();
    // console.log(ret);
    //
    // ret = String(box4);
    // console.log(ret);

    // 3. 转换数据成布尔类型
    // Boolean()

    var box5 = "";
    console.log( Boolean(box5) ); // false
    var box6 = -1;
    console.log( Boolean(box6) ); // true
    var box7 = 0;
    console.log( Boolean(box7) ); // false;
    var box8 = "false";
    console.log( Boolean(box8) ); // true
    var box9 = [];
    console.log( Boolean(box9) ); // true
    var box10 = {};
    console.log( Boolean(box10) ); // true
    var box11 = "0";
    console.log( Boolean(box11) ); // true
    var box12 = null;
    console.log( Boolean(box12) ); // false
    var box13 = undefined;
    console.log( Boolean(box13) ); // false

</script>
</body>
</html>

自动转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 所谓的自动转换,其实弱类型中的变量会根据当前代码的需要,进行类型的自动隐式转化
    var box1 = 1 + true;
    // true 转换成数值,是1, false转换成数值,是0
    console.log(box1); // 2

    var box2 = 1 + "200";
    console.log(box2); // 1200 原因是,程序中+的含义有2种,第一: 两边数值相加, 第二: 两边字符串拼接.但是在js中运算符的优先级中, 字符串拼接的优先级要高于数值的加减乘除,所以解析器优先使用了+号作为了字符串的拼接符号了,因为程序就需要+号两边都是字符串才能完成运算操作,因此1变成字符串了
                       // 最终的结果就是 "1" +"200"

    var box3 = 1 - "200";
    console.log(box3); // -199;因为-号中表示的就是左边的数值减去右边的数值,因此程序就会要求"200"是数值,因此内部偷偷的转换了一下

    
</script>
</body>
</html>

运算符

算术运算符
   +   数值相加
   -   数值相减
   *   数值相乘
   /   数值相除
   %   数值求余
   **  数值求幂
   a++ 数值后自增1   a=a+1
   ++a 数值前自增1   a=a+1
   b-- 数值后自减1   b=b-1
   --b 数值前自减1   b=b-1
   
赋值运算符
   =
   +=
   -=
   *=
   /=
   %=
   **=

比较运算符,比较的结果要么是true, 要么是false
>   大于
<   小于
>=  大于或者等于
<=  小于或者等于
!=  不等于[计算数值]
==  等于[计算]

  !== 不全等[不仅判断数值,还会判断类型是否一致]
=== 全等[不仅判断数值,还会判断类型是否一致]

逻辑运算符
  &&   并且  and    两边的运算结果为true,最终结果才是true
  ||   或者  or     两边的运算结果为false,最终结果才是false
  !    非    not    运算符的结果如果是true,则最终结果是false ,反之亦然.

  逻辑运算符进阶用法:
     1. 实现短路
        var a = false || 2      >>> a = 2
        var a = true && "hehe"  >>>  a = "hehe"
     
     2. 快速布尔化[把数据快速转换成布尔类型]
        var a = 100
        !!a  >>> true

条件运算符[三目运算符]
 条件?true:false
 例如:
      var age = 12;
        var ret = age>=18?"成年":"未成年"; // 相当于 python中的"成年" if age >= 18 else "未成年"
        console.log(ret);

演示:

0 == false
true
3 === 3
true
3 === "3"
false
3 != "3"
false
3 !== "3"
true

运算符的优先级

流程控制语句

js中,有三大流程控制语句,

1. 分支判断语句


   if(条件){
     // 条件为true时,执行的代码
   }
   
   if(条件){
     
   }else{
     // 条件为false时,执行的代码
   }
   
   if(条件1){
     // 条件1为true时,执行的代码
   }else if(条件2){
     // 条件2为true时,执行的代码
   
   }....
   
   }else{
     // 上述条件都不成立的时候,执行的代码
   }
   
   
   switch(条件){
      case 结果1:
           满足条件执行的结果是结果1时,执行这里的代码..
           break;
      case 结果2:
         满足条件执行的结果是结果2时,执行这里的代码..
         break;
      .....
      default:
           条件和上述所有结果都不相等时,则执行这里的代码
   }
      
2. 循环迭代语句
   while(循环的条件){
      // 循环条件为true的时候,会执行这里的代码
   }
   
   for(1.声明循环的开始; 2.条件; 4. 循环的计数){
      // 3. 循环条件为true的时候,会执行这里的代码
   }
   
   for(循环的成员下标 in 被循环的数据){
      // 当被循环的数据一直没有执行到最后下标,都会不断执行这里的代码
   }
   
   for(循环的成员 of 被循环的数据){
      // 循环过程中,每次执行的代码
   }


3. 中断语句
 continue;   // 让程序跳出当前语句的本次操作,进行语句下一次操作[一般用于循环]
   break;      // 让程序条件当前语句的操作,执行后面的语句

函数[function]

函数在程序中代表的就是一段具有功能性的代码可以让我们的程序编程更加具有结构性和提升程序的复用性,也能让代码变得更加灵活强大

函数在js中有三种: 普通函数, 匿名函数和箭头函数.

注意, 箭头函数是新版js语句才出现的,es6版本出现的.

函数的声明

// 普通函数

    function 函数名(形参1,形参2....){
       // 代码段
       return 结果; // 可选,也可以不返回任何数据给调用的地方
    }

    函数名(实参1, 实参2....);

// 匿名函数

  var 函数变量名 = function(形参1,形参2....){
       // 代码段
       return 结果; // 可选,也可以不返回任何数据给调用的地方
    }

    函数变量名(实参1, 实参2....);


// 箭头函数,本质上来说,箭头函数就是匿名函数的另一个优化写法,但是还是有区别的.
    var 函数变量名 = (形参1,形参2....)=>{
       // 代码段
       return 结果; // 可选,也可以不返回任何数据给调用的地方
    }
    
    函数变量名(实参1, 实参2....);

函数名的命名规范

1. 函数名和变量名在程序中不能出现重复的,一旦重复以后,后面覆盖前面的.
2. 函数名遵循变量名的命名规范.
   1. 不能是程序中的关键字或者保留字
   2. 不能以数字开头
   3. 变量名中不能出现除了下划线_或者美元符$以外的其他特殊符号
   4. 变量名只能有数值,字母,下划线或者美元符组成.
   5. 变量名必须要通俗易懂,有意义的.拒绝a1,b2,c3.
      var num = 1;
      var age = 18;
      var name = "xiaoming";

因为有函数内部的变量和函数外部的变量,所以js也会出现变量的作用域[ 全局变量和局部变量 ]

函数中变量的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // js 变量只会分成局部变量和全局变量的概念
    // 1. 变量之间的区别和不同变量的声明周期
    // 2. 变量互相之间的污染问题
    // 3. 声明时,使用var或者let的区别

    // 一般情况下,我们声明一个变量,首次出现在函数外部都是使用var
    // var num = 10; // 在函数外部声明的变量, 全局变量
    // function func(){
    //     num = 20; // 函数内部直接使用变量,则默认调用了全局的变量,
    //     // var num = 20; // 函数内部使用var 或者 let声明的变量则是局部变量
    //               // 函数内部直接使用变量,则默认调用了全局的变量,
    //               // 使用变量的时候,系统会在当前花括号范围值搜索是否有关键字var 或者 let 声明了变量,如果没有,则一层一层往外查找最近的声明
    //               // 如果最终查找不到,则直接报错! 变量名 is not define!
    // }
    // func();
    // console.log(num);

    // 局部变量,是在函数内部声明,它的生命周期在当前函数被调用的时候, 当函数调用完毕以后,则内存中自动销毁当前变量
    // 全局变量,是在函数外部声明,它的生命周期在当前文件中被声明以后就保存在内存中,直到当前文件执行完毕以后,才会被内存销毁掉


    // 声明变量,可以使用var 也可以使用let,但是这两个是有区别的.区别在语句当中
    // let num = 10;
    // if(true){
    //     // num = 20; // 这里调用的变量是外界声明的
    //     var num = 20; // 这个变量只能在当前语句中使用
    // }
    // console.log(num);

    // 使用let声明的变量,在if,while,for等语句中,会因为花括号产生作用域的边界,导致语句外面无法使用这个变量
    // 如果使用var在只会在函数或者对象的方法中,才会因为花括号产生作用域的边界


    // 变量之间使用不当的时候,会产生污染的问题
    // var num1 = 1;
    // for(var num1 = 10;num1<=20;num1++){
    //     // console.log(num1);
    // }
    //
    // console.log(num1); // 21

    // var num1 = 1;
    // for(let num1 = 10;num1<=20;num1++){
    //     // console.log(num1);
    // }
    //
    // console.log(num1); // 21

    // 函数外部声明变量使用var ,函数内部使用var声明局部变量,语句内部声明变量使用let
    // var num2 = 10;
    // function func2(){
    //     let num2 = 20;
    // }
    // func2();
    // console.log(num2);


    // 变量一定要先声明后调用
    // 变量使用的过程中,如果没有声明直接调用,则程序报错!
    //                  如果先调用后声明,则变量值为undefined
    // console.log(num2); // undefined
    // var num2 = 10;

    // 面试题
    // var num3 = 10;
    // function func3(){
    //     console.log(num3); // 输出 undefined
    //     var num3 = 20;         // 局部变量
    // }
    // func3();
    // console.log(num3); // 输出10
</script>
</body>
</html>

对象[object]

字符串对象

// js中内置大量的关于操作浏览器和html文档,以及操作数据的对象.
    // 字符串对象的操作
    var str = "hello"; // 这就是字符串对象
    console.log(str);

    // 字符串对象内置属性
    // length 计算字符串的长度
    // console.log( str.length );

    // 字符串对象内置方法
    // toUpperCase();  字母大写转换
    // toLowerCase();  字母小写转换

    // console.log( str.toUpperCase() );
    // console.log( str.toLowerCase() );

    // indexOf 获取指定字符在字符串中第一次出现的索引位置
    // 字符串也有下标,也可以使用中括号来提取字符串的指定字符
    // console.log(str[1]); // e
    // console.log( str.indexOf("e") ); // 1

    // match  正则匹配
    // js中也存在正则,正则的使用符号和python里面是一样的
    // var str = "我的电话是: 13312345678,你的电话: 13512345678";
    // var ret = str.match(/d{11}/g); // 匹配,提取数据
    // console.log(ret);

    // replace  正则替换
    // var str = "我的电话是: 13512345678";
    // var ret = str.replace(/(d{3})d{4}(d{4})/,"$1****$2"); // 正则 的 捕获模式  $1$2表示的正则中第一个和第二个小括号捕获的内容
    // console.log(ret);
    // search  正则查找,如果查找不到,则返回-1
    // var str = "hello";
    // var ret = str.search(/l/);
    // console.log(ret);

    // 切片,当前方法支持使用负数代表倒数下标
    // slice(开始下标)   从开始位置切到最后
    // slice(开始下标,结束下标)  从开始下标切到指定位置之前
    // var str = "helloworld";
    // var ret = str.slice(3,6); // 开区间,不包含结束下标的内容
    // console.log(ret); // low

    // split   正则分割,经常用于把字符串转换成数组
    //    var str = "广东-深圳-南山";
    //    var ret = str.split("-");
    //    console.log( ret );

    // substr  截取
    // var str = "hello world";
    // var ret = str.substr(0,3);
    // console.log(ret); // hel

    // trim    移除字符串首尾空白
    // var password = "    ge llo   ";
    // var ret = password.trim();
    // console.log(password.length); // 6
    // console.log(ret.length);  // 5

数组对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // var arr = ["A","B","C","D"];
    // // 内置属性
    // console.log( arr.length );
    // // 获取指定下标的成员
    // // console.log( arr[3] ); // D
    // console.log( arr[arr.length-1] ); // 最后一个成员

    // 内置方法
    // concat() 把2个或者多个数组合并
    // var arr1 = [1,2,3];
    // var arr2 = [4,5,7];
    // var ret = arr1.concat(arr2);
    // console.log( ret );

    // filter() 高阶函数, 对数组的每一个成员进行过滤,返回符合条件的结果
    // var arr2 = [4,6,5,7];
    // function func(num){  // 也可以使用匿名函数或者箭头函数
    //     if(num%2===0){
    //         return num;
    //     }
    // }
    // var ret = arr2.filter(func);  // 所有的函数名都可以作为参数传递到另一个函数中被执行
    // console.log( ret );

    // find()  高阶函数, 返回符合条件的第一个成员
    // var arr2 = [4,6,5,7];
    // var func = (num)=>{
    //     if(num%2===0){
    //         return num;
    //     }
    // };
    // var ret = arr2.find(func);
    // console.log( ret ); // 4

    // forEach()  高阶函数,对数组中每一个成员进行遍历
    // var arr2 = [4,6,5,7];
    // // for(item of arr2){
    // //     console.log(item);
    // // }
    //
    // // 上面的代码,也可以使用forEach来完成
    // arr2.forEach((item,key)=>{
    //     console.log(`成员:${item},下标: ${key}`);
    // })

    // includes   查询指定数据是否在数组中存在!

    // indexOf()  查询指定数据在数组中第一次出现的位置

    // isArray()  判断变量的值是否是数组
    // var num =1;
    // console.log( Array.isArray(num) ); // false
    // var arr = [];
    // console.log( Array.isArray(arr) ); // true
    //
    // join()  把数组的每一个成员按照指定的符号进行拼接成字符串
    // var str = "广东-深圳-南山";
    // var arr = str.split("-");
    // console.log( arr ); // ["广东", "深圳", "南山"];
    //
    // var arr1 = ["广东", "深圳", "南山"];
    // var str1 = arr1.join("-");
    // console.log( str1 ); // 广东-深圳-南山


    // map() 对数组的每一个成员进行处理,返回处理后的每一个成员
    // var arr = [1,2,3,4,5];
    // var ret = arr.map((num)=>{
    //     return num**3;
    // });
    // console.log( ret  ); // [1, 8, 27, 64, 125]


    // pop()  出栈,删除最后一个成员作为返回值
    // var arr = [1,2,3,4,5];
    // var ret = arr.pop();
    // console.log(arr); // [1, 2, 3, 4]
    // console.log(ret); // 5


    // push() 入栈,给数组后面追加成员
    // var arr = [1,2,3,4,5];
    // arr.push("a");
    // console.log(arr); // [1, 2, 3, 4, 5, "a"]


    // reverse() 反转排列
    // var arr = [1,2,3,4,5];
    // arr.reverse();
    // console.log(arr); // [5, 4, 3, 2, 1]

    // slice(开始下标,结束下标)  切片,开区间

    // sort() 排序
    // var arr = [3,4,1,2,5,10];
    // console.log( arr ); //  [3, 4, 1, 2, 5, 10]
    // arr.sort();
    //
    // // 这是字符的排序,不是数值的排序
    // console.log(arr);   //  [1, 10, 2, 3, 4, 5]

    // 数值升序
    // var arr = [3,4,1,2,5,10];
    // arr.sort(function(a,b){
    //     return a-b;
    // });
    // console.log(arr);  // [1, 2, 3, 4, 5, 10]

    // 数值降序
    // var arr = [3,4,1,2,5,10];
    // arr.sort(function(a,b){
    //     return b-a;
    // });
    // console.log(arr); // [10, 5, 4, 3, 2, 1]


    // splice(操作位置的下标,删除操作的成员长度,"替换或者添加的成员1","替换或者添加的成员2")  添加/删除指定的成员   "万能函数"
    // var arr1 = [1,2,3];
    // arr1.splice(1,1);
    // console.log(arr1); // 删除指定的1个成员  [1, 3]

    // var arr2 = ["a","b","c","d"];
    // arr2.splice(2,0,"w","x","w"); // 添加
    // console.log(arr2); // ["a", "b", "w", "x", "w", "c", "d"]

    var arr3 = ["a","b","c"];
    arr3.splice(1,1,"w");
    console.log(arr3); // ["a", "w", "c"]

    // unshift() 在数组前面插入指定成员
    var arr4 = ["a","b","c"];
    arr4.unshift(1,3,34,5);
    console.log(arr4); //  [1, 3, 34, 5, "a", "b", "c"]

</script>
</body>
</html>

数值对象[Number]

    // toFixed(x) 保留小数位
    var num = 100.3;
    var ret = num.toFixed(2);
    console.log(num);  // 100.3
    console.log(ret);  // 100.30

数学对象[Math]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // Number对象的内置方法
    // toFixed(x) 保留小数位
    // var num = 100.3;
    // var ret = num.toFixed(2);
    // console.log(num);  // 100.3
    // console.log(ret);  // 100.30


    // Math对象的内置方法
    // abs(x)  返回数值的绝对值
    // var num = -10;
    // console.log( Math.abs(num) ); // 10

    // ceil(x)  向上取整
    // var num = 10.3;
    // console.log( Math.ceil(num) ); // 11
    //
    // // floor(x) 向下取整
    // var num = 10.3;
    // console.log( Math.floor(num) ); // 10

    // max(x,y,z,...,n)
    // console.log( Math.max(3,56,3) ); // 56
    // min(x,y,z,...,n)


    // pow(x,y)
    // console.log(Math.pow(3, 2)); // 相等于 3**2
    // console.log( 3**2 ); // 使用这个,上面废弃

    // // random()  生成0-1随机数
    // console.log( Math.random() );
    //
    // // 生成0-10之间的数值
    // console.log( Math.random() * 10 );
    //
    // // round(x) 四舍五入
    // // 生成0-10之间的整数
    // console.log( Math.round( Math.random() * 10 ) );

</script>
</body>
</html>

日期时间对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // 获取当前系统的日期时间对象
    // var date = new Date();
    // console.log(date); // Thu Dec 05 2019 12:54:41 GMT+0800 (中国标准时间)

    // 常用方法:
    // getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
    // getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
    // getFullYear()	从 Date 对象以四位数字返回年份。
    // getHours()	返回 Date 对象的小时 (0 ~ 23)。
    // getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
    // getMonth()	从 Date 对象返回月份 (0 ~ 11)。  这个需要月份+1才是我们要的月份,要不然1月会变为0
    // getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
    //
    // console.log( date-0 ); // 数值的毫秒时间戳
    // console.log( parseInt((date-0)/1000) ); // 数值的秒时间戳


    // 获取一个指定时间的日期对象
    var date1 = new Date("2019/10/01 12:12:12");
    console.log( date1);

</script>
</body>
</html>

JSON对象

js经常会接收到来自于其他服务端的数据,这些数据往往都是通过http协议或者websocket发送过来的.

而数据发送过来给到js的格式,往往就是json格式. json翻译成中文“javascript 对象表示法”

# json是一种数据格式, 语法
# 必须是{}或者[]包含起来
# 内部成员以英文逗号隔开,最后一个成员不能使用逗号!
# 可以是键值对,也可以是列表成员
# 内容格式,一般是数值[整数,浮点数,布尔值], 数组, 另一个json, 字符串
# json中的成员如果是键值对,则键名必须是字符串.而json中的字符串必须使用双引号圈起来
# json数据也可以保存到文件中,一般以".json"结尾.
# 前端项目中,一般使用json作为配置文件.

{
   "name": "xiaoming",
	 "age":12
}

[1,2,3,4]

{
   "name": "xiaoming",
	 "age":22,
   "sex": true,
   "son": {
      "name":"xiaohuihui",
      "age": 2
   },
   "lve": ["篮球","唱","跳"]
}

javascript中,提供了一个JSON对象,可以让我们把数据转换成json数据, 也可以json数据转成对象格式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // js对象,因为这种声明的对象格式很像json,所以也叫json对象
    var data = {
        name: "xiaoming",
        age: 22,
        say: function(){
            alert(1);
        }
    };

    // 把json对象转换成json字符串
    var ret = JSON.stringify(data);
    console.log(ret ); // {"name":"xiaoming","age":22}

    // 把json字符串转换成json对象
    var str = `{"name":"xiaoming","age":22}`;
    var ret = JSON.parse(str);
    console.log(ret); //{name: "xiaoming", age: 22}*/
</script>
</body>
</html>

BOM操作

浏览器提供我们开发者在javascript用于操作浏览器的对象

window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // BOM  Browser object model 浏览器对象模型

    // js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容.
    //console.log( window );

    // alert()  弹出一个警告框
    // window.alert("hello");

    // confirm  弹出一个确认框,点击确认,返回true, 点击取消,返回false
    // var ret = confirm("您确认要删除当前文件么?");
    // console.log( ret  );

    // 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null
    // var ret = prompt("请输入一个内容","默认值");
    // console.log( ret );

    // close() 关闭当前浏览器窗口
    // window.close();

    // 窗口内部宽高
    // console.log( `当前浏览器窗口内部的高度: ${window.innerHeight}` );
    // console.log( `当前浏览器窗口内部的宽度: ${window.innerWidth}` );
    //
    // // 打开一个新的浏览器窗口
    // // window.open("http://www.baidu.com","_self");
    // window.open("http://www.baidu.com","_blank",500,500);
    //

    // 定时器[间隔函数,这种函数可以让我们指定某一段代码在指定以后内执行一次或者多次]
    // window.setInterval(函数名, 间隔时间[s]);  // 定时执行多次
    // window.setTimeout(函数名, 间隔时间[s]);   // 定死执行一次

    //    取消定时[取消函数的参数就是定时器的返回值]
    //    window.clearInterval();  // 取消指定的interval定时器
    //    window.clearTimeout();   // 取消指定的timeout定时器


    // var num = 1;
    //
    // function func() {
    //    console.log(num);
    //    num+=1;
    // }
    // setInterval(func,1000);

    // 定时执行一次
    // setTimeout(function(){
    //     open("http://www.luffycity.com");
    // },3000);

    // 取消定时
    var num = 1;
    function func(){
        console.log(num);
        if(num<10){
            num+=1;
        }else{
            // 当数值超过10,结束定时
            clearInterval(t);
        }
    }
    var t = setInterval(func,1000);

</script>
</body>
</html>

Navigator对象

浏览器信息对象

    // navigator
    console.log( navigator.platform );  // 平台
    console.log( navigator.userAgent ); // 用户代理信息

History 对象

历史管理对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">查看历史对象</button>
<button onclick="func2()">跳转到上一页</button>
<button onclick="func3()">跳转到下一页</button>
<button onclick="func4()">跳转到当前页[刷新页面]</button>
<script>
    function func1(){
        console.log(history);
        console.log(history.length); // 历史记录中页面的数量
    }

    function func2(){
        history.back(); // 相当于 history.go(-1);  表示返回上一页
    }

    function func3(){
        history.go(1); // 相当于 history.forward()
    }

    function func4(){
        history.go(0);  // 刷新页面
    }
</script>
</body>
</html>

Location 对象

地址栏对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">查看Location对象</button>
<button onclick="func2()">跳转到百度</button>
<button onclick="func3()">F5</button>
<script>
    function func1(){
        console.log( location );
    }
    // 地址栏对象控制和操作地址栏
    // 所谓的地址就是当前页面所在地址
    // 地址结构:
    // 协议://域名:端口/路径/文件名?查询字符串#锚点
    console.log( `协议=>${location.protocol}` );
    console.log( `域名=>${location.port}` );
    console.log( `域名=>${location.hostname}` );
    console.log( `域名:端口=>${location.host}` );
    console.log( `路径=>${location.pathname}` );
    console.log( `查询字符串=>${location.search}` );
    console.log( `锚点=>${location.hash}` );
    console.log(`完整的地址信息=>${location.href}`);

    function func2(){
        // location.href="http://www.baidu.com"; // 页面跳转
        location.assign("http://www.baidu.com"); // 页面跳转
    }

    function func3(){
        location.reload(); // 刷新页面
    }
</script>
</body>
</html>

本地存储对象

使用存储对象的过程中, 对象数据会根据域名端口进行保存的,所以 js不能获取当前页面以外其他域名端口保存到本地的数据

也就是说,我们存储对象获取数据只能是自己当前端口或者域名下曾经设置过的数据,一旦端口或者域名改变,则无法获取原来的数据.

localStorage    本地永久存储
  localStorage.setItem("变量名","变量值");   保存一个数据到存储对象
  localStorage.变量名 = 变量值               保存一个数据到存储对象

  localStorage.getItem("变量名")   获取存储对象中保存的指定变量对应的数据
  localStorage.变量名              获取存储对象中保存的指定变量对应的数据

  localStorage.removeItem("变量名")   从存储对象中删除一个指定变量对应的数据
  localStorage.clear()               从存储对象中删除所有数据

sessionStorage  本地会话存储
  sessionStorage.setItem("变量名","变量值");   保存一个数据到存储对象
  sessionStorage.变量名 = 变量值               保存一个数据到存储对象

  sessionStorage.getItem("变量名")   获取存储对象中保存的指定变量对应的数据
  sessionStorage.变量名              获取存储对象中保存的指定变量对应的数据

  sessionStorage.removeItem("变量名")   从存储对象中删除一个指定变量对应的数据
  sessionStorage.clear()               从存储对象中删除所有数据

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">设置一个数据</button>
<button onclick="func2()">查看一个数据</button>
<script>
    function func1(){
        localStorage.setItem("name","xiaoming");
    }

    function func2(){
        var ret = localStorage.getItem("name");
        console.log(ret);
    }
</script>
</body>
</html>

DOM操作

DOM document Object Model 文档对象模型

主要提供给开发者用于操作网页的标签,css内容的一些方法或者数据

获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">
        <p class="p1">
            <input type="text" name="username" value="xiaoming" />
            <input type="password" name="password" />
        </p>
        <p class="p1">3333</p>
    </div>
<script>
 // 获取元素有2种方式
 //  1. 直接获取元素

/*    var box_obj = document.getElementById("box");  // 通过id值获取一个元素
    console.log( box_obj );

    var p1 = document.getElementsByClassName("p1"); //  获取指定class值的所有元素[注意element有s的],返回值是一个html元素集合, 是类似数组的对象
    console.log(p1);  //  HTMLCollection [p.p1]

    var p2 = document.getElementsByTagName("div");  // 根据标签名来获取所有对应的元素
    console.log(p2);
    console.log(p2[0]);  // 因为是伪数组,所以这个元素集合支持使用数组操作,可以通过下标或者数组的遍历来获取里面的成员

    var p3 = document.getElementsByName("username"); // 根据name数值来获取所有的元素[一般只会使用表单项,所以很少使用 ]
    console.log( p3 );
*/

    // var p4 = document.querySelector(".p1");  // 根据css选择符来获取查找到的第一个元素
    // console.log( p4 );
    // var p5 = document.querySelector("input[name=username]");
    // console.log( p5 );
    //
    // var p6 = document.querySelectorAll("input[type]"); // 根据css选择符来获取查找到的所有元素
    // console.log(p6);


// 2. 间接获取元素
    // 所谓的间接获取元素,是在一个元素和另一个元素之间如果存在父子嵌套或者兄弟并列的情况下才可以使用的.
    // 整个html文档,会保存一个文档对象document
    // console.log( document ); // 获取当前文档的对象
    console.log( document.documentElement ); // 获取html根标签

    // 获取html标签的子元素
    console.log( document.documentElement.children ); // HTMLCollection(2) [head, body]
    // 获取第2个body标签
    var html = document.documentElement;
    var body = html.children[1];
    console.log( body );
    // 获取body标签的子元素
    var div = body.children[0];
    console.log(div);
    var p = div.children[0];
    console.log(p);
    var input0 = p.children[0];
    console.log(input0);
    // 获取一个标签的后面的兄弟节点[节点: node, 表示组成网页的html内容,包括了元素,元素的属性,元素的内容以及元素与元素之间空白部分...]
    var input_next = input0.nextSibling;
    console.log( input_next );  // 因为元素与元素之间有空白,所以这里获取到了空白部分
    var password = input_next.nextSibling;
    console.log( password );  // 空白部分的下一个兄弟就是密码框

    // 获取元素的父元素
    var p0 = password.parentElement;
    console.log(p0);
    // 获取下一个元素兄弟
    var p1 = p0.nextElementSibling;
    console.log(p1);
    // 获取上一个元素兄弟
    var p0 = p1.previousElementSibling;
    console.log( p0 );
</script>
</body>
</html>

获取和操作元素的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="p2_func()">修改.p2的内容</button>
    <button onclick="p2_func2()">清空.p2的内容</button>
    <div id="box">
        <p class="p2">这是一段<a href="">内容</a></p>
        <p class="p1">
            <input type="text" name="username" value="xiaoming" />
            <input type="password" name="password" />
        </p>
        <p class="p1"><img src="https://www.baidu.com/img/bd_logo1.png" alt=""></p>
    </div>
<script>
    // 获取元素的内容[如果是表单项的数据和图片的信息,使用这个是无法获取的]
    // innerHTML 获取html内容
    // innerText 获取文本内容
    var p2 = document.getElementsByClassName("p2"); // 伪数组
    console.log(p2);

    // 必须通过元素才能拿到元素的内容

    console.log(p2[0].innerHTML); // 获取html内容   结果: 这是一段<a href="">内容</a>
    console.log(p2[0].innerText); // 获取文本内容   结果: 这是一段内容

    // 修改元素的内容
    function p2_func(){
        // p2[0].innerHTML = `修改的<a href="">内容</a>`;
        p2[0].innerText = `修改的<a href="">内容</a>`;  // 这里的内容如果存在标签,则标签信息被强制转换文本[标签的符号变成 html实体字符 &lt; &nbsp;]
    }

    // 清空元素的内容
    function p2_func2(){
        console.log( p2[0] );
        p2[0].innerHTML = ""; // 清空内容
    }
</script>
</body>
</html>

获取和操作元素的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com" class="a1">百度</a>
    密码: <input type="password" name="pwd"><button id="btn" onclick="change()">显示密码</button>
    <p class="p1"><img id="img" src="https://www.baidu.com/img/bd_logo1.png" alt=""></p>
<script>
    // 获取元素的属性值
    // 也要先获取元素,才能操作元素的属性值
    var password = document.querySelector("input[name=pwd]");
    console.log( password  );
    console.log( password.type );
    console.log( password.name );
    var a = document.querySelector("a");
    console.log( a.href );
    console.log( a.className );  // class在js 中是保留字,所以对于元素的class属性,在js叫className

    // 修改元素的属性
    function change(){
        var pwd = document.querySelector("input[name=pwd]");
        var btn = document.querySelector("#btn");
        if(pwd.type==="password"){
            pwd.type="text";
            btn.innerHTML = "隐藏密码";
        }else{
            pwd.type="password";
            btn.innerHTML = "显示密码";
        }
    }

    var img = document.querySelector("#img");
    img.onclick = function(){
        img.src="d.jpeg";
    }
</script>
</body>
</html>

获取和修改元素的外观样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{
        border: 3px solid #000;
        font-size: 25px;
    }
    .box1{
        position: absolute;
        left: 100px;
        top: 100px;
    }
    </style>
</head>
<body>
    <button id="btn1">修改背景</button>
    <button id="btn2">隐藏起来</button>
    <button id="btn3">显示出来</button>
    <button id="btn4">变成圆形</button>
    <button id="btn5">添加样式</button>
   <div class="box" style="150px;height: 100px;background-color: #f00; "></div>
<script>
//  获取和操作元素的样式,首先我们要明白,样式有行内和行外[内部和外部样式]之分.
//  获取元素的行内样式
    var box = document.getElementsByClassName("box")[0];
    console.log( box.style.width ); // 150px
    console.log( box.style.height );// 100px;
    console.log( box.style.backgroundColor );  //  rgb(255, 0, 0);   如果要获取的css属性是多个单词,则横杠必须去掉,横杠后面的单词首字母要大写
    // web中,表示颜色有三种方式: 单词, rgb, 十六进制表示法
    // 红色   red
    // rgb(红色发光程度,绿色发光程度, 蓝色发光程度);   rgb(255,0,0); 红色
    // 十六进制  0-9 A B C D E F  #666666

    console.log(box.style.border); // 无法通过style来获取行外的样式

// 获取元素的行外样式    window.getComputed()来进行获取指定元素的所有样式
    console.log( window.getComputedStyle(box).border ); // 获取到外部样式
    console.log( window.getComputedStyle(box).fontSize ); // 获取到外部样式
    console.log( window.getComputedStyle(box)["font-size"] ); // 获取到外部样式,这种的写法主要原因是js中所有的对象都可以数组的格式来表示


    // 修改样式
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function(){
        var box = document.getElementsByClassName("box")[0];
        // box.style["background-color"] = "#000000";
        box.style.backgroundColor = "#000000";
    };

    var btn2 = document.getElementById("btn2");
    btn2.onclick = function(){
        var box = document.getElementsByClassName("box")[0];
        box.style.display = "none";
    };

    var btn3 = document.getElementById("btn3");
    btn3.onclick = function(){
        var box = document.getElementsByClassName("box")[0];
        box.style.display = "block";
    };

    // 修改样式,可以使用style,直接在行内样式里面修改
    var btn4 = document.getElementById("btn4");
    btn4.onclick = function(){
        var box = document.getElementsByClassName("box")[0];
        let point = 0;
        let t = setInterval(function(){
            box.style.borderRadius = `${point}%`;
            if(point<50){
                point+=1;
            }else{
                clearInterval(t);
            }
        },25);

    };

    // 也可以通过class属性,采用字符串拼接的方式来完成样式的修改
    var btn5 = document.getElementById("btn5");
    btn5.onclick = function(){
        var box = document.getElementsByClassName("box")[0];
        box.className+=" box1";
    };

</script>
</body>
</html>

事件

所谓事件, 就是用户对浏览器进行的一次操作 , 例如,用户点击了按钮,这就是一次事件, 用户移动了鼠标, 或者按下了键盘.,都是不同的时间.

在js中,提供了Event对象, 可以让我们开发者在用户对浏览器进行指定的行为时,可以自动执行某些代码

常用事件类型:
1. 鼠标事件
   click      鼠标点击事件
   mouseover  鼠标悬放事件 
　　mousedown  鼠标按下
   mouseup    鼠标松开

2. 表单事件
   onblur     输入框失去焦点事件
   onfocus    输入框获取焦点事件
   onsubmit   表单提交事件
   onchange   输入框值改变事件
   
3. 页面窗口事件
   onload     页面加载事件
   
4. 键盘事件
   onkeydown  键盘按下
   onkeyup    键盘松开

绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{
         100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 10px;
        top: 100px;
    }
    </style>
</head>
<body>
    <button onclick="show()">按钮</button>
    <button onmouseover="show()">按钮</button>
    <div class="box"></div>
<script>
    function show(){
        console.log("点击了");
    }

    var t;
    function move(){
        var box = document.querySelector(".box");
        var left = parseInt( getComputedStyle(box)["left"] );
        t = setInterval(function(){
            left+=2;
            box.style.left = `${left}px`;
        },25);
    }

    move();

    var box = document.querySelector(".box");
    box.onmouseover = function(){  // onmouseover 鼠标选放
        clearInterval(t);
    };

    //  一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码
    box.onmouseout = function(){ // onmouseout 鼠标移开
        move();
    };

    // 对于一个元素绑定事件有两种写法:
    // 1. 静态绑定 ,直接把事件写在标签元素中
    // <button onmouseover="show()">按钮</button>

    // 2. 动态绑定,在js中通过代码获取元素对象,然后给这个对象进行后续绑定
        /**
         *     var box = document.querySelector(".box");
                box.onmouseover = function(){  // onmouseover 鼠标选放
                    clearInterval(t);
                };
         */
</script>
</body>
</html>

前端基础之 js