JavaScript总结_javascript || []-CSDN博客

本文链接：https://blog.csdn.net/BullGod/article/details/79919185

js是运行在浏览器端的脚本语言，主要解决的是前端与用户交互的问题，包括使用交互与数据交互。

1.嵌入页面的方式

-行间事件(主要用于事件)
    <input type='button' name'' onclick="alert('ok!');">

-页面script标签嵌入
   <script type='text/javascript'>
        var a='hello';
        alert(a);
    </script>

-外部引入
    <script type="text/javascript" src="js/index.js"> </script>

注意：
    一条js语句应该以分号;结尾
    注释
       //单行注释
       /*
         多行注释
       */

2.变量

--js是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字'var'
 var a=123;
 var a='hello',b='world';

--变量类型
    5种基本数据类型：number,string,boolean,undefined,null
    1种复合类型

    注意：(变量，函数，属性，函数参数命名规范)
        -区分大小写
        -第一个字符必须是字母，下划线_或美元符号$
        -其他字符可以是字母，下划线，美元符号或数字

3.获取html元素方法

-document.getElementById('div1')
    --方法一
        <div id='div1'>这是一个div元素</div>            
        <script type="text/javascript">
            var oDive=document.getElementById('div1');
        </script>
    #注意：页面是从上往下加载执行

    --方法二
    #将js语句放在window.onload触发函数里面，等页面加载完成后才执行
    <script type="text/javascript">
        window.onload=function(){
            var oDive=document.getElementById('div1');
        }
    </script>

    <div id='div1'>这是一个div元素</div>

4.操作html元素属性

-获取的页面元素，就可以对页面元素属性进行操作，属性的操作包括属性的读和写
-两种方法
    "."操作
    "[]"操作

 -innerHTML   可以读取或者写入标签包裹的内容

-需要注意三点
    --html属性和js里面的属性写法一样
    --class属性改写为 className (因为class在js中也是关键字)
    --style 属性里面的属性，有横杠的改成驼峰式，比如："font-size",改成sytle.font

实例子：
#方法一(. 操作)
      <script type="text/javascript">
       window.onload=function(){
           var oInput=document.getElementById('input1');
           var oA=document.getElementById("link1");
           //读取属性值
           var val=oInput.value;
           var typ=oInput.type;
           var nam=oInput.name;
           var links=oA.href;
           //写(设置)属性
           oA.style.color='red';
           oA.style.fontsize=val;
       }
   </script>
   <input type="text" name="setsize" id="input1" value="20px">
   <a href="https://www.baidu.com" id="link1">百度一下</a>

  #方法二([] 操作)
    <script type="text/javascript">
        window.onload=function(){
            var oInput=document.getElementById('input1');
            var oA=document.getElementById("link1");
            //读取属性值
            var val=oInput.value;
            //写(设置)属性，此时[变量],若用"."则没有反应
            oA.style[val]="20px"; 
        }
    </script>

     <input type="text" name="setsize" id="input1" value="fon">
     <a href="https://www.baidu.com" id="link1">百度一下</a>

#innerHTML
<script type="text/javascript">
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            //读取属性值
            var txt=oDiv.innerHTML;
            alter(txt);
            //写(设置)属性，此时[变量],若用"."则没有反应
            oDiv.innerHTML='<a href='https://www.baidu.com>百度一下</a>';
        }
    </script> 

    <div id='div1'>这是一个div元素</div>

5.函数

--就是重复执行的代码片
--函数定义与执行

 <script type="text/javascript">
    //函数定义
    function aa() {
        alert('hello world');
    }
    //执行函数
    aa(); //弹出hello world
</script>

--变量与函数与解析   
alert(bb); //弹出 underfined
var bb=123;

注意：js解析过程分为两个阶段，先是编译阶段，然后执行阶段；
编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为underfined;

--提取行间事件
    -在html行间调用的事件可以提取到js中调用，从而做到结构与行间分离

#行间事件调用函数
<script type="text/javascript">
    function myalert(){
        alert('ok');
    }
</script>
<input type="button" name="" value="弹出" onclick="myalert()">



#提取行间事件
<script type="text/javascript">
    window.onload=function () {
        var oBtn=document.getElementById('btn1');
        oBtn.onclick=myalert; //测试函数调用，可没有括号哦！
        function myalert(){
            alert('ok!!!');
        }
    }
</script>
<input type="button" name="" value="点我试试" id="btn1">

   -匿名函数
        定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用

 <script type="text/javascript">
        window.onload=function () {
            var oBtn=document.getElementById('btn1');
                //直接将匿名函数赋值给绑定的事件
                oBtn.onclick=function () {
                    alert('ok');
                }
            }
        }
</script>

--函数传参
    <script type="text/javascript">
        function myalert(a){
            alert(a);
        }
        myalert(12345);
</script>

--函数return 关键字
  -返回函数执行的结果
  -结束函数的运行
  -阻止默认行为

实例：
      <script type="text/javascript">
        function add(a,b){
            var c=a+b;
            return c;
            alert('计算完成'); //这一步将不会被执行

        }
        var d=add(1,2);
        alert(d);
    </script>

6.条件语句

--通过条件来控制程序的走向，就需要用条件语句
--条件运算符
    == 判断值是否相等
    === 判断值及类型是否相等
    >
    >=
    <
    <=
    !=
    &&而且
    ||或者
    !否

--常见的语句
    -if else
    -switch

#if else语句
 <script type="text/javascript">
    var a=4;
    if (a==1){
        alert('语文');
    }else if(a==2){
        alert('数学');
    }else if(a==3){
        alert('英语');
    }else if (a==4){
        alert('美术');
    }else if (a==5){
        alert('舞蹈');
    }else{
        alert('不补习');
    }
</script>


#switch语句
<script type="text/javascript">
    var a=2;
    switch (a){
        case 1:
            alert('语文');
            break;
        case 2:
            alert('数学');
            break;
        case 3:
            alert('英语');
            break;
        case 4:
            alert('美术');
            break;
        case 5:
            alert('舞蹈');
            break;
        default:
            alert('不补习');
    }
</script>

7.数组及操作方法

-数组就是一组数据的集合，在js中，数组里面的数据可以是不同类型
-定义数组的方法
    --对象的实例创建
        var alist=new Array(1,2,3);
    --直接创建
        var alist=[1,2,3,'abc'];

-操作数组中数据的方法
    -获取数组的长度  alist.length
    var alist=[1,2,3];
    alert(alist.length)

    -用下标操作数组的某个数据 alist[0]
     var alist=['a','b']
     alert(alist[0]) //弹出a

    -join()将数组成员通过一个分割符号合并成字符串
    var alist=[1,2,3,4]
    alert(alist.join('-')); //弹出1-2-3-4

    -unshift()和shift()从数组前面增加成员或者删除成员
    #unshift增加
    var alist=[1,2,3,4];
    alist.unshift(5);
    alert(alist);//弹出5，1，2，3，4

    #shift自动删除第一个元素
    var alist=[1,2,3,4];
    alist.shift(); 
    alert(alist); // 2,3,4

    ##pop删除最后一个元素
    var alist=[1,2,3,4];
    alist.pop(); 
    alert(alist); // 1,2,3

    -reverse()将数组反转
    var alist=[1,2,3,4];
    alist.reverse();
    alert(alist); //弹出 4，3，2，1

    -indexOf()返回数组中元素第一次出现的索引值
    var alist=[1,2,3,1,2];
    alert(alist.indexOf(1)); #弹出0

    -push() 可向数组的末尾添加一个或多个元素，并返回新的长度
    var alist=[1,2,3];
    alert(alist.push(4); #弹出4
    alert(alist); //弹出1，2，3，4 

    -splice()在数组中增加或删除成员
     var alist=[1,2,3,4];
     alist.splice(2,1,7,8,9); //从第2个元素开始(从0开始计数)，删除1个元素，然后在此位置增加'7,8,9'三个元素
     alert(alist); //弹出1，2，7，8，9，4


    -多维度数组
        -多维数组指的是数组成员也就是数组的数组
        var alist=[[1,2,3],['a','b']];
        alert(alist[0][1]); //弹出2;

    -获取元素的第二种方法
      document.getElementByTagName(''),获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的dom元素

  <script type="text/javascript">
        window.onload=function () {
            var aLi=document.getElementsByTagName('li');
            alert(aLi.length);
            aLi[0].style.backgroundColor='yellow';
        }

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

8.循环语句

  -程序中进行有规律的重复性操作，需要用循环语句

  -for循环
     for(var i=0; i<len;i++){
         ...
     }

   -while循环
     var i=0;
       while(i<8){
           ...
           i++
       }

   #数组去重
    var aList=[1,2,3,4,4,5,5,6,1,3,5];
    var aList2=[];
    for (var i=0;i<aList.length;i++){
        if (aList.indexOf(aList[i])==i){
            aList2.push(aList[i]);
        }
    }
    alert(aList2);

9.js组成

-ECMAscript 基础语法(变量，函数，循环语句等)
-DOM文档对象模型，操作html和css的方法
    document.getElementById()
-BOM浏览器对象模型，操作浏览器的一些方法
    window.onload=function(){
        ....
    }
    alert()

10.字符串处理办法

-字符串合并操作 "+"
-parseInt() 将数字字符串转化为整数
-parseFloat()将数字字符串转化为小数
-split()把一个字符串分隔成字符串组成的数组
-charAt()获取字符串中的某一个字符
-indexOf()查找字符串是否含有某字符
-substring(start,end)截取字符串,不包括end
-toUpperCase()字符串转大写
-toLowerCase()字符串转小写

字符串反转
  var str='abcd'；
  var str2=str.split('').reverse().join('');
  alert(str2);

NaN：表示非数字值得特殊值；isNaN()来判断一个值是否是NaN值；
<script type="text/javascript">
var Month=30;
if (Month<1 || Month>12){
    Month=Number.NaN;
}
 document.write(Month);

</script>

11.调试程序的方法

-alert(); //浏览器会弹出弹窗

-console.log() //在浏览器的调试台的console中显示

-document.title='xxx';//网页的title
  <title>'xxx'</title>

12.定时器

-作用
    --制作动画
    --异步操作
    --函数缓冲与节流

-定时器类型及语法
    --定时器
      setTimeout 只执行一次的定时器，单位是毫秒，即意味着等xx毫秒后再执行
      clearTimeout 关闭只执行一次的定时器
      setInterval 反复执行的定时器
      clearInterval  关闭反复执行的定时器

    var time1=setTimeout(myalert,2000);
    var time2=setTimeout(myalert,2000);
    clearTimeout(time1);
    clearTimeout(time2);
    function myalert(){
        alert('I Love U');
    }

-定时器制作时钟

 <script type="text/javascript">

       window.onload=function () {
           var oDiv=document.getElementById('div1');
           function timego() {
               var now=new Date(); //内置对象
               var year=now.getFullYear();
               var month=now.getMonth()+1;
               var date=now.getDate();
               var week=now.getDay();
               var hour=now.getHours();
               var minute=now.getMinutes();
               var second=now.getSeconds();
               var str='当前时间是:'+year+'年'+month+'月'+date+'日'+toweek(week)+
                       ' '+todou(hour)+":"+todou(minute)+":"+todou(second);
               oDiv.innerHTML=str;

           }
           timego();
           setInterval(timego,1000);
       }
        function toweek(n){
           switch (n){
               case 0:
                   return '星期日';
               case 1:
                   return '星期一';
               case 2:
                   return '星期二';
               case 3:
                   return '星期三';
               case 4:
                   return '星期四';
               case 5:
                   return '星期五';
               default:
                   return '星期六';

           }
        }
        function todou(n){
           if (n<10){
               return '0'+n;
           }else{
               return n;
           }
       }

    </script>


<div id="div1"></div>

-定时器制作倒计时

<script type="text/javascript">

       window.onload=function () {
           var oDiv=document.getElementById('div1');
            function timeleft(){
                var now=new Date();
                var future=new Date(2018,4,1,0,0,0);//系统月份从0开始计数
                var lefts =parseInt((future-now)/1000);
                var day=parseInt(lefts/86400);
                var hour=parseInt(lefts%86400/3600);
                var min=parseInt(lefts%86400%3600/60);
                var sec=lefts%60;
                str='距离2018年5月1日零点只剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
                oDiv.innerHTML=str;
            }
           timeleft();
            setInterval(timeleft,1000);
       }

    </script>

13.类型转换

-直接转换parseInt()与parseFloat()
 alert('12'+7);  //弹出127
 alert(parseInt('12')+7);  //19

-隐式转换"=="和"-"
if ('3'==3){
    alert('相等');
}
//弹出相等

alert('10'-3); //弹出7

-NaN和isNaN
alert(parseInt('123abc'));  //弹出123
alert(parseInt('abc123'));  //弹出NaN

14.变量作用域

-变量作用域是指变量得作用范围，js分为全局变量和局部变量
-全局变量
    在函数之外定义得变量，为整个页面公用，函数内外部都可以访问
-局部变量
    在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问

    <script type='text/javascript'>
        //全局变量
        var a=12;
        function myalert(){
            //局部变量
            var b=123;
            alert(a);
            alert(b);
        }
    </script>

15.封闭函数

-是js中匿名函数的另一种写法，创建一个一开始就执行而不用命名的函数

-一般定义的函数
function changcolor(){
    var oDiv=document.getElementById('div1');
    oDiv.style.colot='red';
}
changecolor();

-封闭函数
(function(){
     var oDiv=document.getElementById('div1');
    oDiv.style.colot='red'; 
}
)();

-还可以在函数定义前加上"~"和"~"等符号来定义匿名函数
 ！function (){
    var oDiv=document.getElementById('div1');
    oDiv.style.colot='red';
}();

16.闭包

-函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾收回机制收回
function aaa(a){
    var b=5;
    function bbb(){
        a++;
        b++;
        alert(a);
        alert(b);
    }
    return bbb;
}
var ccc=aaa(2);
ccc(); // a=3,b=6
ccc(); // a=4,b=7

-改写成闭包函数
    var ccc=(function(a){
        var b=5;
        function bbb(){
            a++;
            b++;
            alert(a);
            alert(b);
        }
        return bbb;
    })(2);
    ccc();
    ccc();

-使用场景
    --将一个变量长期驻扎在内存中，可用于循环中存索引值
   --私有变量计数器，外部无法访问，避免全局变量的污染

17.内置对象

-document
document.referrer //获取上一个跳转页面的地址

-location
window.location.href //获取或者重定url地址
window.location.search  //获取地址参数部分
window.location.hash  //获取页面锚点或者叫哈希值

-Math
Math.random 获取0-1的随机数
Math.floot 向下取整
Math.ceil 向上取整

18.面向对象(难点)

-面向过程：所有的工作都是现写现用
-面向对象：一种编程思想，许多功能时限已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程。

-js对象
将相关的变量和函数合成一个整体，这个整体叫对象，对象中的变量叫做属性，变量中的函数叫方法。js中的对象类似字典。

-创建对象

  --单体
       <script type="text/javascript">
       var Tom={
           name:'sun',
           age:'25',
           showname : function () {
               alert('我的名字叫'+this.name);
           };
           showage : function(){
               alert('我今年'+this.age+'岁')
           };
       }

    </script>


    --构造函数
    <script type="text/javascript">

       function Person(name,age,job){
           this.name=name;
           this.age=age;
           this.job=job;
            this.showname = function () {
               alert('我的名字叫'+this.name);
           };
           this.showage = function(){
               alert('我今年'+this.age+'岁')
           };
           this.showjob = function(){
               alert('我今年'+this.job)
           };
       }
        var tom=new Person('tom',18,'程序员');


    </script>

    --工厂模式
    <script type="text/javascript">

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.showname = function(){
        alert('我的名字叫'+this.name);    
    };
    o.showage = function(){
        alert('我今年'+this.age+'岁');    
    };
    o.showjob = function(){
        alert('我的工作是'+this.job);    
    };
    return o;
}
var tom = Person('tom',18,'程序员');
tom.showname();

</script>

--原型模式
<script type="text/javascript">
    function Person(name,age,job){        
        this.name = name;
        this.age = age;
        this.job = job;
    }
    Person.prototype.showname = function(){
        alert('我的名字叫'+this.name);    
    };
    Person.prototype.showage = function(){
        alert('我今年'+this.age+'岁');    
    };
    Person.prototype.showjob = function(){
        alert('我的工作是'+this.job);    
    };
    var tom = new Person('tom',18,'程序员');
    var jack = new Person('jack',19,'销售');
    alert(tom.showjob==jack.showjob);
</script>

--继承
<script type="text/javascript">

        function fclass(name,age){
            this.name = name;
            this.age = age;
        }
        fclass.prototype.showname = function(){
            alert(this.name);
        }
        fclass.prototype.showage = function(){
            alert(this.age);
        }
        function sclass(name,age,job)
        {
            fclass.call(this,name,age);
            this.job = job;
        }
        sclass.prototype = new fclass();
        sclass.prototype.showjob = function(){
            alert(this.job);
        }
        var tom = new sclass('tom',19,'全栈工程师');
        tom.showname();
        tom.showage();
        tom.showjob();
    </script>