前端学习笔记-JavaScript

js引入方式：

　　1、嵌入js的方式：直接在页内的script标签内书写js功能代码。

　　　　<script type="text/javascript">alert('hello')</script>

　　2、外联式引入js：以相对路径的方式引入本地js文件，实现H5、CSS、JS分离。

　　　　<script type="text/javascript" src="hello.js"></script>

js变量和数据类型：

　　五种基本数据类型：number 、string 、boolean 、undefined 、null

　　一种符合类型：object对象

　　定义变量：使用var关键字，区分大小写。

　　　　变量定义规范：首字符为字母、下划线、美元符号，其他字符可为这些和数字。

var a = 123;

使用js操作属性：

 <script type="text/javascript">
     window.onload = function(){
         //通过获取一个标签的id来联系标签
         var oDiv = document.getElementById('div1');
　　　　　　 var oInput01 = document.getElementById('input01');
　　　　　　 var aLi = documentsgetElementsByTagName('li');//获取一组标签，使用时可通过下标确定具体使用哪一个
         //对目标标签进行style属性重写
         oDiv.style.color = 'red';
　　　　　　 aLi[2].style.backgroundColor = 'blue';
         var val01 = oInput01.value;  //获取输入框内的值
 9　　　　　 oDiv.className = 'box02';   //操作类属性，注意class写法要写成className
 10　　　　　oDiv.href = '1.css';  //为其引入新的样式文件
 11　　　　　}
 12</script>

　　js操作属性时的属性写法和H5里的写法基本一样，“class”的属性写成"className"，style里边的属性有横杠的font-size写成style.fontSize。

　　还可以使用方括号来操作属性：oDiv.style[attr] = 'red';

　　以上function(){  } 就是js的函数书写形式。

　　自定义函数时写为：function change02(){  oDiv.className = 'sty02';  }

　　函数中可以使用return返回函数结果，也可以只使用一个单纯的return结束函数运行。

　　window.onload会使页面加载完后再加载其中的内容，注意写代码时的顺序。

匿名函数：

         oDiv.onclick = myalert;
             function myalert(){
                 alert('hello!');
                 }

         /*匿名函数简化代码，优化步骤
           将上述代码改写成匿名函数的形式。*/

         oDiv.onclick = function (){
             alert('hello!');
         }

函数传参：

             changestyle('fontSize','50px');

             function changestyle(styl,val){//会被预解析哦
                 oDiv.style[styl] = val;
             }

　　这样会将函数中的fontsize传给styl，将50px传给val。

JS中的函数预解析：

 　　　　　alert(a); //不会报错但是会弹出undefined,相当于已声明未赋值。
         //alert(c);开发工具里会报错(c没有声明)
         var a = 123; 

         myalert();//在定义函数前使用函数不会弹出undefine，因为js会将函数预解析。

         function myalert(){
             alert('hello!');
         }

　　js加载时遇到函数，会将函数的声明和定义全部提前，因此可以在函数定义的前面调用函数。

　　函数中的条件语句格式：if{ }，多重条件语句：if{ } else if { }或switch(true){ case:true:*****;break;default:****;}

　　函数中的for循环语句：for(初始值;条件;变化值){  ***  }；

var aRr = [1,2,3,4,3,4,5,7,4,5,7,3,9,5,6];
    var aRr2 = [];
    for (var i=0;i<aRr.length;i++) //以整个数组为范围进行循环，实现利用循环达到去重效果
    {
        if (aRr.indexOf(aRr[i])==i) //通过indexOf返回元素第一次出现的位置来去重
        {
            aRr2.push(aRr[i]);//将不重复元素放到新的空数组
        }
    }

函数中变量的作用域：

　　函数外部定义的变量是全局变量，函数内部定义的变量是局部变量。

　　全局变量即既可以被函数内部点调用，也可以被函数外部调用。

　　局部变量只可以被本函数内部调用，不可以被函数外部及其他函数调用。

　　全局变量一直放在内存里，不会被回收，只有本页面关闭或程序结束才会被回收。

　　函数内部在访问变量时，先从内部开始查找变量信息，如果有，使用内部变量，如果无，使用外部全局变量，外部再无，显示错误信息。

封闭函数：

    (function(){
            var str = '欢迎访问我的主页！';
            alert(str);
        })();//后边又加了括号，就是封闭函数自执行。

　　封闭函数定义：(function(){。。。})()；

　　封闭函数的匿名函数减少了函数名避免了冲突的可能，且变量不会污染到全局。

函数闭包：

    function aa(b){
        var a = 12;

        function bb(){
            alert(a);
            alert(b);
        }
        return bb;
    }
    var cc = aa(24);//这个全部变量aa函数进行关联，导致aa函数包含的函数和变量都不会被回收
    cc();

　　将24传给aa函数的形参b，闭包函数bb拿aa的形参b代入到自己的函数体的实参b。
　　闭包其实就是函数嵌套函数，可用来存储环索引值和私有变量计数器。
　　内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制回收。
　　因为让闭包和外部一个函数进行关联，把它赋值给一个外部变量，外部变量不会被回收，因此闭包的参数和变量也不会被回收。

模拟登录过程：

　　

        //1、存储跳转的源页面
        var backurl = document.referrer;
        //document.referrer是获取上一个跳转页面的地址(需要服务器环境)

        //2、处理中间的登录逻辑，如果成功

        //3、跳转
        window.location.href = backurl;
        //window.location.href获取或重定url地址

　　　　　<a href="http://www.baidu.com">百度</a>

JS中的数组操作：

　　创建数组：var aRr1 = new Array(1,2,3,'abc')或 var aRr2=[1,2,3,'abc']多维数组使用嵌套[ [数组1]，[数组2]，[数组3] ]；

　　求数组长度：aRr.length

　　获取数组下标元素：aRr.[n]   aRr1.[n][n]

　　拼接字符串：sTr = aRr.join("-")   使用-隔开元素,拼接结果为数组类型。

　　从末尾追加元素：aRr.push(val)

　　删除末尾元素：aRr.pop()

　　从头部插入元素：aRr.unshift(0)

　　删除头部元素：aRr.shift()

　　反转元素：aRr.reverse()

　　返回元素第一次出现的位置：aRr.indexOf(val)

　　从第n个元素开始删除m个元素，含n：aRr.splice(n,m)

　　删除完后从删除位置再补充进去几个元素：aRr.splice(n,m,'val1','val2',.........)

JS中的数值和字符串操作：

　　执行+运算时，若两个变量都为数值，按正常数学运算执行，若有一个变量的数字是字符串类型，运算时按拼接字符串运算执行。

　　数值运算可将字符型数字转换成数值行：parseInt(sTr)   parseFloat(sTr)，

　　数值运算中有个Math对象，使用Math.random()可获取随机数，math对象的更多用法查看文档。

　　字符串的第n个字符：sTr.charAt(0)

　　获取字符串中某个字符的下标位置：sTr.indexOf( 'str' )，没有时返回-1；

　　截取字符串中位置为n到m的元素:sTr.substring(n，m)，前包后不包，后不写默认到尾;

　　转大写：sTr.toUpperCase();

　　转小写：sTr.toLowerCase();

数值运算返回的NaN：

　　NaN即Not a Number，

　　数字字符混合的情况下转换为数值时，开头就是字符的转换结果为NaN，开头是数字的只转换出数字部分，字符之后去除。

　　使用isNaN判断字符型数字时，返回false，不严谨。

简易计算器案例：

window.onload = function(){
            var oInput01 = document.getElementById('input01');
            var oInput02 = document.getElementById('input02');
            var oBtn = document.getElementById('btn');
            var oFuhao = document.getElementById('fuhao');

            oBtn.onclick = function(){
                var num01 = oInput01.value;
                var num02 = oInput02.value;
                var fuhao = oFuhao.value;
                if (num01=="" || num02=="") {
                    alert('输入框不能为空1');
                    return;
                }

                if (isNaN(num01) || isNaN(num02)) {
                    alert('请输入一个数字！');
                    return;
                }

                switch(fuhao){
                    case 'add':   //这里没有隐式转换，若有数字用‘数字’的字符串方式。
                        alert((parseFloat(num01)*100+parseFloat(num02)*100)/100);
                        break;
                    case 'subtract':
                        alert((parseFloat(num01)*100-parseFloat(num02)*100)/100);
                        break;
                    case 'multiply':
                        alert(((parseFloat(num01)*100)*(parseFloat(num02)*100))/10000);
                        break;
                    case 'divide':
                        alert(((parseFloat(num01)*100)/(parseFloat(num02)*100))/10000);
                        break;
                }
            }
        }

    <h1>计算器</h1>
    <input type="text" name="" id="input01">
    <select id="fuhao">
        <option value="add">+</option>
        <option value="subtract">-</option>
        <option value="multiply">*</option>
        <option value="divide">/</option>
    </select>
    <input type="text" name="" id="input02">
    <input type="button" name="" value="点击计算" id="btn">

定时器及其基本使用：

　　定时器一般用来制作动画、异步操作、函数缓冲与节流。

    var timer = setTimeout(function(){//3秒后弹出hello！，一次性定时器
        alert('hello！');
    },3000);    

    clearTimeout(timer);  //关掉一次性定时器

    var timer2 = setInterval(function(){//反复执行定时器
        alert('hi!');
    },2000);

    clearInterval(timer2);//关闭反复执行的定时器

倒计时案例：

　　使用定时器做倒计时，实现前端自动下线倒计时。

    window.onload = function(){
        var oDiv = document.getElementById('div1');

        //实际开发中，时间从服务器获取
        function timeleft(){
        var now = new Date();//获取时间戳
        var future = new Date(2019,11,7,15,28,0);//创建一个日期
        var lefts = parseInt((future-now)/1000);//做时差并换算成秒
        var day = parseInt(lefts/86400);//将秒换算成天
        var hour = parseInt((lefts%86400)/3600);//将秒换算成时
        var minute = parseInt(((lefts%86400)%3600)/60);//将秒换算成分
        var second = lefts%60;

        if (lefts<=0) {//(前端下线)倒计时结束后进入百度界面，且再访问不到原倒计时界面。
            window.location.href ="http://www.baidu.com";
        }
        oDiv.innerHTML = '距离2019年11月20日晚24：00还有'+
                          day+'天'+hour+'时'+minute+'分'+second+'秒'; 

    }

    timeleft();
    setInterval(timeleft,1000);

    }

倒计时结束后本页面下线，之后再访问本页面显示的都是指定的百度页面。