JavaScript

 

 

JavaScript
    
    概述
        属于原生JS和Java没有任何半毛钱的关系,是在浏览器环境下运行的一种脚本语言
        可以用来和数据进行交互,分为界面交互和数据交互
            界面交互
                指的是当触发某种事件的时候, 如:点击按钮,鼠标移动
            数据交互
                指的是ajax发起http请求获取数据
                
    常见的使用三种方式(和CSS是方式一样)
        行内式  基本不常用
        外链式  <script type="text/js" src = "想要连接的JS的文件" ></script>
        嵌入式    <script> 内嵌代码块 </script>
            
    常见的输出
        alert("hello word")      弹框的形式显示
        console.log("hello word")    按F12/Fn+F12在浏览器的console下可以检查输出
        console.dir("hello word")
        console.table("hello word")     
        document.wirte("hello word")    直接显示在浏览器页面上
        

    JS操作CSS的属性时注意
        当事件触发时,修改属性时注意
　　　　　　　　全部是小写的直接用
　　　　　　　　　xxx    ->  style.xxx = "";
　　　　　　　　中间存在"-" 将"-"后面的第一个单词大写
            　　xx-xx  ->  style.xxXx = "";
        
        class 属性较为特殊
             class  -> style.className = "";
             
        <script>      
            window.onload = function()
            {
                var oBtn = document.getEleementById("btn");
                var oDiv = document.getEleementById("div");
                
                oBtn.onclick =function()
                {
                    oDiv.style.textSize = 25px;
                    oDiv.style.lineHight = 20px;
                }
            }
        
        </script>    
            
    变量的命名规则和定义变量
        严格区分大小写
        第一个字母必须是  字母/下划线/$
        其他字母可以是字母  下划线 /美元/数字
        支持匈牙利命名规则  第一个字母代表数据类型  nnum  stemp
        
        var nnum = 12;
        var nnum = "12";
        var stemp = "aa";
        
        变量的作用域
            函数的调用 要往回找 函数的定义阶段
            首先在函数内部找 -> 内部找不到就往外找,直到找到全局为止
            
            全局变量和局部变量
            全局变量 num=10;
            局部变量
                所有用var定义出来的变量都是局部的
                    var num = 10;  
                    
            作用域和其他的语言基本相同,看有作用域的变量是全局变量还是局部变量,全局变量是对这个.html都有效,局部变量只在当前函数下有效        
    
    函数
        jS中的函数具备预解析功能
            函数的调用可以放在定义函数的上面,
            
        普通函数    
            eg:
                move()
                定义函数
                function move(参数位置)
                {
                    //执行的代码块
                    document.write("ok");            
                }
        匿名函数
            函数没有名字
            var text = function(x1,x2)
            {    
                return x1 + x2;
            ]
            
        封闭函数
            如果是普通的函数的话,如果有多个同名函数,只有一个可以被调用,但封闭函数可以做到让每个同名函数都可以执行里面的代码块
            
            <script>
                普通函数
                function func()
                {
                    alert(1);
                }
                func()
                
                第一种封闭函数
               ;(function()
               {
                    function func()
                    {
                        alert(2);
                    }
                    func()
               })()
                
                封闭函数的语法结构
                    第一种封闭函数的语法结构
                   !(function()
                   {
                      alert(3);
                   })()
                    第二种封闭函数的语法结构
                   ~(function()
                   {
                     alert(4);
                   })()
               
            </script>
                
    常见的数据类型
        number
            int/float
        boolean
            true/false
        string
        undefined
            未定义/未声明的
        object
            有空对象   var ret = null 
            有数据的对象(触发事件)  
    入口函数
        在hender标签中进行定义
        <header>
            <script>      
                window.onload = function()
                {
                    var oBtn = document.getElementById("btn");
                    var oDiv = document.getElementById("div");
                    
                    oBtn.onclick =function()
                    {
                        oDiv.style.textSize = 25px;
                        oDiv.style.lineHight = 20px;
                    }
                }
            
            </script>
        </header>    
        
    常见的鼠标的事件 
        onclick         当点击时执行什么
        onmouseover     当鼠标滑过时执行什么
        onmouseout      当鼠标离开时执行什么
        
        oBtn.onclick = function()
        {
            // 执行的代码块
            oDiv.style.display = "block";
        }
        
    js中的基本操作
        num = prompt("请输入字符串");  //相当于python中的 input()
        
        判断数据类型
            typeof()
            
        && || !     >>(往右移几位就除以2的n次方)  <<(往左移几位就乘以2的n次方)
        
        "=="     判断数值是否相等(不管数据类型是什么)　　相对相等
        "==="    判断数字是否相等 + 数据类型 　　　　　　绝对相等
        
        条件语句
            if(条件语句){代码块}
            else if(条件语句){代码块}
            else{代码块}
    
        循环
            while循环
                var i=0;
                while(i>10)
                {
                    // 执行相应的代码块
                    i++;
                }
                
            for循环
                for(var i=0;i<10;i++)
                {
                    //执行相应的代码块
　　　　　　　　　　；
                }
            switch  case 循环
                var date  = prompt("请输入内容")
                switch(date):
                {
                    case 1:
                        document.write("今天是星期一");
                        break;
                    case 2:
                        document.write("今天是星期二");
                        break;
                    case 3:
                        document.write("今天是星期三");
                        break;
                    case 4:
                        document.write("今天是星期四");
                        break;
                    case 5:
                        document.write("今天是星期五");
                        break;
                    case 6:
                        document.write("今天是星期六");
                        break;
                    case 7:
                        document.write("今天是星期日");
                        break;
                    default:
                        document.write("没有你要查找的这个星期数");
                }
            
        数组
            定义数组的两种方式
                var arr = []   //定义一个空数组
                var arr = new Array(1,2,3)  //里面包含1,2,3三个元素
            操作数组常用的方法
                length   获取数组的长度
                push()   在末尾增加一个元素
                pop()    删除末尾的元素
                splice()
                    splice(位置下标,删除元素的位置,增加元素的位置)
                    splice(位置下标,删除元素的位置)　　　　只删除不增加
                    splice(位置下表)    　　　　　　　　　从第几个位置后,该位置后面的所有元素都删除
                reserve() 　　数组中的元素翻转
                join()    　　将数组转换为字符串
                ret = arr.join("-")
                indexof()  　 返回元素中第一次出现的索引值
                
                数组去重
                    var arr = [11,22,33,88,22,44,55,44,22,,66];
                    var new_arr = [];
                    for(var i=0;i<arr.length;i++)
                    {                        
                        // document.write(arr[i]);
                        // 去重的条件
                        if(arr.indexOf(arr[i]) == i)
                        {
                            new_arr.push(arr[i]);
                        }
                    }
                    document.write(new_arr);
        字符串
            常用的操作方法
                parseInt() 去掉小数点后的的值
                    var num = 1.2
                    alert(parseInt(num))
                    -> 1
                parseFloat()
                    var num = 1.2
                    alert(parseInt(num))
                    -> 1.2
                    
                split()     将字符串进行切割
                indexof()   返回元素中第一次出现的索引值
                substring(start,end)  左闭右开
                
        定时器
            setTimeout()   只能执行一次的定时器
            setInterval()  可以进行无限次代码执行
            clearTimeout()
            clearIntveral() 
            两个定时器的参数相同
            var result = null;
            result = setIntveral(function()
            {
                ;// 里面需要执行的代码块
            },50);
            
            clearIntveral(result)
            result = null;
            
        内置的对象和方法
            自定义对象
                {name: "xiaoqiang", age: 18}
                -键不用加引号,加上也不出错
                -值如果是字符串必须写双引号
                new关键字形式
        
            内置的Date对象   --> Python中的内置模块
                var oDate = new Date();
        
            JSON对象 
            　　字符串转对象 --> obj = JSON.parse(string)
            　　对象转字符串 --> s   = JSON.stringify(obj)
            
            Math对象
                Math.ceil();  //向上取整。
                Math.floor();  //向下取整。 -->
                <!-- Math.round();  //四舍五入。
                Math.random();  //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】 //比如0.8647578968666494
                Math.ceil(Math.random()*10);      // 获取从1到10的随机整数 ，取0的概率极小。
                Math.round(Math.random());   //可均衡获取0到1的随机整数。
                Math.floor(Math.random()*10);  //可均衡获取0到9的随机整数。
                Math.round(Math.random()*10);  //基本均衡获取0到10的随机整数，其中获取最小值0和最大值10的几率少一半。
                因为结果在0~0.4 为0，0.5到1.4为1...8.5到9.4为9，9.5到9.9为10。所以头尾的分布区间只有其他数字的一半。 
        
            RegExp(正则)
                两种定义方式:
                    new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")
                    /new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")/
                匹配模式
                    g 全局
                    i 忽略大小写
          
                    正则表达式中间不能加空格
                    .test() --> .test(undefined) --> .test("undefined")
                    全局模式下会有一个lastIndex属性