JavaScript第二周学习总结

前端-：

一.内置对象

1. 内置对象是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最简单而必要的功能（属性和方法）；

2. 这些内置对象包括：Math ， String ， Date， Array ；

3. 下面列举一些：

   Math的内置对象：

   • Math.abs() => 绝对值 ；
   • Math.PI() => 圆周率 ；
   • Math.floor() => 向下取整 （往小取 / 地板）；
   • Math.ceil() => 向上取整 （往大取 /天花板）；
   • Math.max/min => 最大值/最小值 ；
   • Math.round => 四舍五入 ，就近取整 （ .5 往大取 ）例：1.5 => 2;
   • 其余的可以去MDN查找；

4. 随机数 random（）

//获得min~max中的任意一个数，包括min和max 
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - (min + 1)) + min);
}
console.log(getRandom(1, 10));

5. 日期对象 Date（）是一个构造函数 必须用new 来调用创建我们的日期对象 。

   例如：1.

   //获得当前日期
   var date = new Date ();
   console.log(date);
   

   ​ 2.

   //倒计时
   function countDate(time) {
       var date1 = +new Date();//使用毫秒来判断
       var date2 = +new Date(time);
       var times = (date2 - date1) / 1000;
       var d = parseInt(times / 60 / 60 / 24);
       d = d < 10 ? '0' + d : d;
       var t = parseInt(times / 60 / 60 % 24);
       t = t < 10 ? '0' + t : t;
       var m = parseInt(times / 60 % 60);
       m = m < 10 ? '0' + m : m;
       var s = parseInt(times % 60);
       s = s < 10 ? '0' + s : s;
       return d + '天' + t + '时' + m + '分' + s + '秒';
   }
   console.log(countDate('2021-1-10 21:00:00'));//输入你期望的时间
   

   获得毫秒的方法：

   //1.
   var date = new Date;
   console.log(date.valueOf());
   //2.
   var date = new Date;
   console.log(date.getTime());
   //3.
   var date = +new Date();
   console.log(date);
   //4.
   console.log(Date.now());(html5新增)
   

6. 数组的内置对象

   1. 检测是否为数组 instanceof 运算符：

      //1.
      var arr = [21,23];
      console.log(arr instanceof Array);//=>true;
      var arr = 32;
      console.log(arr instanceof Array);//=>false;
      //2.
      var arr = [21, 23];
      console.log(Array.isArray(arr));//=>true;
      var arr = 32;
      console.log(Array.isArray(arr));//=>false;
      

   2. 删除与添加数组 ：

      //1.在末尾添加一个或多个元素；
      var arr = [12, 34];
      arr.push(4);//返回新长度
      console.log(arr);
      //2.删除末尾最后一个元素；
      var arr = [12, 34];
      arr.pop();//返回删除的值；
      console.log(arr);
      //3.向开头添加一个或多个元素；
      var arr = [12, 34];
      arr.unshift(1, 2, 4);//返回新长度；
      console.log(arr);
      //4.删除开头的第一个元素；
      var arr = [12, 34];
      arr.shift();//返回删除的元素；
      console.log(arr);
      

   3. 翻转数组

      var arr = ['s', 'i', 'p', 'c'];
      arr.reverse();
      console.log(arr);
      

   4. 数组排序

      var arr = [13, 4, 5, 1, 273];
      arr.sort(function (a, b) {
          return a - b;//a-b：升序 ；b-a：降序 ；
      });
      console.log(arr);
      

7. 根据字符返回位置

   var str = 'string';
   console.log(str.indexOf('s')+1);//=>1;
   var str = 'string';
   console.log(str.indexOf('s',4)+1);//=>0;  4=>为起始位置；
   //未找到字符，返回-1;
   

8. 字符出现的次数

   var str = 'assdadasfsfa';
   var s = {};
   for (var i = 0; i < str.length; i++) {
       var chars = str.charAt(i);//chars 是字符串的每一个字符
       if (s[chars]) {//s[chars]得到的是属性值
           s[chars]++;
       }
       else {
           s[chars] = 1;
       }
   }
   console.log(s);
   

9. 拼接字符串

   var str = 'ss';
   console.log(str.concat('red'));//=>ssred;
   

二.数据类型

1. 简单类型与复杂类型

   简单类型又叫基本数据类型或者值类型，复杂类型又叫引用类型；

   • 值类型：在存储变量时存储的是值本身；
   • 引用类型：复杂数据类型，在存储变量中存储的仅仅是地址，通过new关键字创建的对象。

2. 堆和栈

   1.堆 : 存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

   2.栈：由操作系统自动分配释放存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；

三.Web API

1. API : 应用程序编程接口，是一些预先定义的函数，目的是提供应用程序与开发人员基于软件或硬件得到访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

2. wed API ：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM,DOM）交互效果。

3. DOM

   1. DOM树

      • 文档：一个页面就是一个文档：document；
      • 元素：页面中所有标签为元素：element；
      • 节点：所有内容都是节点：node；
      • DOM将以上内容均看作对象;

   2. 获取元素

      1. 根据ID获取

         document.getElementById('id');
         

      2. 根据标签名获取

         document.getElementsByTagName('标签名');
         

      3. 通过H5新增元素获取

         //1.根据类名获取
         document.getElementsByClassName('类目');
         //2，根据选择器获取
         document.querySelector('选择器');//返回第一个元素对象
         document.querySelectorAll('选择器');//返回所有元素对象
         

四.事件

1. 事件三要素：事件源 ， 事件类型 ， 事件处理程序 ；

2. 执行事件的步骤：

3. 获取事件源

4. 注册事件

5. 添加事件处理程序

6. 事件样例：

   1. 密码输入框，密码与明文转换，密码长度提示 。

   //初始拙作，还望指正。
   <!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>
           * {
               margin: 0%;
               padding: 0%;
           }
   
           .box {
               position: relative;
               width: 600px;
               border-bottom: 1px solid #cccccc;
               margin: 100px auto;
           }
   
           #pwd {
               width: 370px;
               height: 30px;
               border: none;
               outline: none;
           }
   
           .box label {
               position: absolute;
               top: 2px;
               right: 220px;
           }
   
           .message {
               position: absolute;
               top: 5px;
               right: 2px;
               display: inline-block;
               font-size: 12px;
               color: #999;
           }
       </style>
   </head>
   
   <body>
       <div class="box">
           <label id="eye">密码</label>
           <input type='password' id='pwd'>
           <p class="message">请输入6~16位密码</p>
       </div>
       <script>
           var eye = document.getElementById('eye');
           var pwd = document.getElementById('pwd');
           var message = document.querySelector('.message');
           var flag = 1;
           eye.onclick = function () {
               if (flag == 1) {
                   eye.innerText = '明文';
                   pwd.type = 'text';
                   flag = 0;
               } else {
                   eye.innerText = '密码';
                   pwd.type = 'password';
                   flag = 1;
               }
           }
           pwd.onblur = function () {
               if (this.value.length < 6 || this.value.length > 16) {
                   message.style.color = 'red';
                   message.innerHTML = '您输入的密码有误，请输入6~16位数字';
               }
               else {
                   message.style.color = 'rgb(26, 175, 91)';
                   message.innerHTML = '输入正确';
               }
           }
       </script>
   </body>
   
   </html>