JS第三周学习

136 阅读5分钟

Day1 排序、定时器、简单的轮播图

数组的排序

手写冒泡排序:
    var arr=[5,52,1,88,94,465,59898,564];
    for(var j = 0;j<arr.length;j++){
        for(var i = 0;i<arr.length-j;i++){
            if(arr[i]>arr[i+1]){
                var change;
                change = arr[i];
                arr[i] = arr[i+1];
                arr[i+1] = change;
            }
        }
    }
    console.log(arr);
但是,这样书写比较的麻烦,因此引入数组的 sort()方法
    

arr.sort(); 数组排序API 会改变原数组,且拥有固定搭配

   var arr=[5,52,1,88,94,465,59898,564];
   arr.sort(function(a,b){
       //a,b为回调函数的形参,回调函数会自行执行,无需调用,这里a-b代表升序,b-a代表降序。
       //a表示后一个数字,b表示前一个数字
       return a - b;
   })
   console.log(arr);
   这段代码和上面结果相同

定时器的使用

    1.设置定时器
        var timer = setInterval(function(){
              每次时间执行的操作;
        },定时器时间间隔)
    2.清除定时器
        定时器所在.触发事件 = function(){
            clearInterval(定时器名字);
        }
    3.重新开启定时器
        定时器所在.触发事件 = function(){
        //注意这里这个timer需要他出现全局污染的现象,如果加var会创建好多好多个定时器
             timer = setInterval(function(){
                  每次时间执行的操作;
             },定时器时间间隔)
        }

渐入渐出的轮播图

  //轮播图有很多种,这里其中一个简单的渐入渐出的轮播图
      var imgs = document.getElementsByTagName("img"),
            lis = document.getElementsByTagName("li"),
            btns = document.getElementsByTagName("button"),
            Div = document.getElementsByTagName("div")[0],
            j = 0;
  // TODO 设置左右箭头
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                if (this.innerHTML == " 》") {
                    move(1);
                } else {
                    move(-1);
                }
            }
        }
// TODO 设置小下标
    for (let j = 0; j < lis.length; j++) {
        lis[j].onclick = function () {
            set(j);
        }
    }
// TODO 设置定时器
    var timer = setInterval(function () {
        move(1);
    }, 2000)
    Div.onmouseover = function () {
        clearInterval(timer);
    }
    Div.onmouseout = function () {
        timer = setInterval(function () {
            move(1);
        }, 2000)
    }

// TODO 封装函数
    function move(num) {
        if (num == 1) {
            j++;
            j == lis.length && (j = 0);
            set(j);
        } else {
            j--;
            j == -1 && (j = lis.length - 1);
            set(j);
        }
    }
// TODO 封装设置
    function set(m) {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
            imgs[i].className = "";
        }
        imgs[m].className = "show";
        lis[m].className = "show1";
    }

Day2 字符串的只读API、创建页面元素并渲染

字符串的只读API

1. “\” 不能算是一个字符串的API,有一些作用

   转义字符: \n换行, \t大空格
   消除页面中双引号冲突问题 arr = "我的名字是:\"何蓬"\"; 这里不加\会报错,双引号不可以套双引号
   输出Unicode码: \u****;  补充, 第一个汉字的ASCII码为:19968; 最后一个汉字的ASCII码为40869

2.字符串的大小写转换 在书写验证码时需要用到

   转大写: str.toUpperCase();
   转小写: str.tolowerCase();
   
//一个简单的验证码功能
    var arr=[];
    function add(a,b){
        for(var i=a;i<=b;i++){
            arr.push(String.fromCharCode(i));
        }
    }
    // 添加 0--9的数字
    add(48,57);
    // 添加英文字母(小写和大写)
    add(65,90);
    add(97,122);
    // 输出验证一下 arr
    console.log(arr);
    // 根据arr来生成随机数的一个四位验证码
    var code = "";
    while (code.length < 4) {
        // 生成随机数作为下标
        var m = parseInt(Math.random() * (arr.length));
        // 判断如果code中没有重复的就向其中添加
        if (code.indexOf(arr[m]) == -1) {
            code += arr[m];
        }
    }
    // 请用户输入验证码 并 同时转换为大写或小写对比判断是否输入正确
    var user = prompt("请输入验证码" + code);
    if(user.toUpperCase() == code.toUpperCase()){
        console.log("验证通过");
    }else{
        console.log("验证失败");
    }
    

获取字符串中的指定 字符 直接用str[i]就好,不推荐这个方法

语法:str.charAt(i);

获取字符串中指定位置的ASCII码 以及 根据ASCII码转原文

str.charCodeAt(i)  借助循环可以遍历字符串中的每个字符的ASCII码
String.fromCharCode(需要转的ASCII码)   固定写法String为一个构造函数

字符串的检索方法 str.indexOf()

str.indexOf("关键字",开始检索的下标);
不写开始下标就从头开始检索
找不到返回 -1
数组也可以使用此方法,但是老浏览器可能无法使用。但是字符串使用indexOf新老浏览器都能用
如何获取所有重复的关键字

Day3 正则表达式

正则表达式基础概念

regexp:限制字符串的规则的表达式
使用场景:切割字符串、替换字符串、验证、表单等位置

最简单的正则表达式

    var reg = /^原文$/gi;

备选字符集

语法:var reg = /^[0-9A-Za-z_]$/; [^5]除了5之外的

   注意:
   验证正则表达式: reg.test(待验证字符串)
   一个中括号代表输入一个字符,要控制输入字符的数量需要用
       {m,n}最少m个,最多n个
       {m,}最少m个,最多不限制
       {m}只能输入m个
       ?: 可有可无,只能写一个
       *: 可有可无,个数不限
       +: 最少一个,多了不限
      **  特别注意这些有一定意义的符号 ? * + . 在使用时要配合转义字符\使用

预定义字符集

      \d: 表示一位0-9的数字
      \w: 表示 [0-9A-Za-z]
      \s: 表示 [空格、换行、制表符
      . : 表示 [除了换行之外的都可以]

选择和分组

     选择:|   当使用|分开字符集表示自动选择一个满足的进行判断(或) 注意|会打断^$的完全匹配,一般需要配合分组 () 使用
     分组:()  将多个选择临时组成一个 规则 整体

密码强度验证

    语法:(?![限制正则语句]+$)
    举例:
        /^(?![0-9])\w{4}$/  => 必须输入四位数字、字母、或下划线,,但不能是纯数字
        /^(?![0-9A-Za-z]\w{4})$/ => 必须输入至少包含一个下划线
    注意:预判公式方括号内部的就是不能让用户触发的

支持字符串正则的API

split 字符串切割

可以通过和正则结合切割,在切割字符串时切割不同的字符
举例:
    var str="tom@##jinx!Aike";
    // 消除字符串中的 @ # ! 至少消除一个多了不限制
    str=str.split(/[@#!]+/g);
    console.log(str)

replace 字符串替代

1.基本替换 直接替换,缺点是替换的新内容只能固定
    
    var str = "卧槽,我操,我草,我滴妈,我裂开";
    // 合理运用+号处理多个以上的替换情况。
    str = str.replace(/[我卧][滴操槽草裂开妈]+/g, "**");
    console.log(str);
2.高级替换  通过调用回调函数来达到替换不同的内容
   
    var str2 = "卧槽,我操,我草,我滴妈,我裂开,我我我妈";
    str2 = str2.replace(/[我卧滴操槽草裂开妈]+/g, function (a) {
       // a为一个类数组,他的数组长度为正则 比如说第一个卧槽  这时候a的长度就为2
       return a.length == 2 ? "**" : a.length == 3 ? "***" : "****"
    })
    console.log(str2)
3.字符串格式化
    var str = "卧槽,我操,我草,我滴妈,我裂开,我我我妈";
    var reg = /[卧槽]{2}([,我操]{3})([,我草,我滴妈]{7})([,我裂开,我]{6})[我妈]{3}/;
    str = str.replace(reg,function(a,b,c,d){
           return b+c+d;
    })
    console.log(str);

Day3 Math对象和Date对象

Math对象

1.随机数 Math.random()*(max-min+1)+min;
    +1是为了能获得最大值;因为Math.random()的取值范围为 [0,1),+min是为了获得最小值
    网页中只要存在随机功能就需要用到随机数。
2.Math.PI  固定用法 获取圆周率 π
3.取整的Math方法
    向上取整:Math.ceil();
    向下取整:Math.floor();
    四舍五入:Math.round();  都会取到整数;
    常用取整方法 parseInt(num.toFixed(0)); 保留0位小数
  手敲toFixed(n)的底层方法
  
    var num = prompt("请输入需要处理的数字");
    var n = prompt("请输入需要保留的位数");
    num *= Math.pow(10,n);
    num = Math.round(num);
    num /= Math.pow(10,n);
    console.log(num);
4.绝对值 Math.abs();
5.乘方 开方  Math.pow(底数,冥); Math.sqrt(); 开方只能开平方根
6.最大最小值  该方法不支持对数组进行最大最小获取
    Math.max()
    Math.min()
    固定搭配来使用最大最小值获取数组的最大最小值
    var 最大/最小 = Math.max/min.apply(Math,数组名);

Date()对象

1.创建事件对象的五种方法
    var time = new Date(); 创建一个实时事件
    var time = new Date(2016/12/10 时:分:秒); 创建一个自定义时间
    var time = new Date(2016,12,10,时,分,秒); 创建一个自定义时间,但是月份需要 -1,因为计算机底层月份是 0-11 不是现实中的 1-12
    var time = new Date(待复制时间名); 复制一个时间。 因为时间的API都会修改原数组,所以操作时需要对复制的时间进行操作
    var time = new Date(毫秒值); 时间的底层是毫秒值;
2.时间对象的API
    FullYear  Month Date Day 年、月、日、星期
    Hours Minutes Seconds Miliiseconds 小时、分钟、秒、毫秒
    每一个都有setget方法,除了Day星期没有set方法

Day4 Error对象 和函数重载、回调和自调

Error对象 浏览器自带的一种对象,会在代码发生错误时报错,终止后续代码执行

1. SyntaxError - 出现语法、符号错误
2. ReferrnceError - 使用未声明的变量或方法 
3. TypeError - 方法类型使用错误。使用了不属于自己的方法
4. RangeError - 只有toFixed()会出先的错误

错误的处理 : 产品正式上线后,当代码发生错误我们不想终止,而是发出错误提醒,后续代码继续执行

try{}catch(err){}方法

    try{
        可能发生错误的代码;
    }catch(err){
        错误提示信息;
        或者扔出一个错误: throw new Error;
    }

if(){}else{}

函数重载、回调和自调

函数重载

指一个同名函数根据输入的实参不同执行不同的功能。JS不支持同名函数同时存在,但是提供arguments方法。该方法会默认以一个类数组的形式存储用户输入的实参。

匿名函数的自调(立即执行函数)

    立即执行函数不需要调用,只执行一次,执行完毕后立即释放其中的无占用变量。
    立即执行函数不会释放时间,常用于替代全局代码,有利于节约内存空间
    (
        function (){
            函数体;
        }
    )();

匿名函数回调 匿名函数中除了自调函数就是回调函数。

回调函数一般作为一个实参传入其他使用该回调函数的方法。
elem.onclick=function(){}也是一个回调函数