• 38、重新复习javascript之三


    前言

      虽然吧,每天都没有什么太有技术性的工作者,但是技术不能丢,希望也要有,人如果没有希望那不就和咸鱼一样了吗?小伙加油吧

    1、html与javascript结合

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <script type="text/javascript">
    alert('aaa');
    </script>
    
    </body>
    </html>

    2、js基本语法

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <script type="text/javascript">
     //1 变量声明
         var num = 10;
         var str = 'haha';//"haha" 没有区别
         //变量声明使用var
         //变量区分大小写  str 和 STR 不是同一个变量
         //字符串使用  双引号 或 单引号包裹 都可以.
         num = "hello";//变量的类型可以随时改变.
         //命名规则 
     //2 行尾使用";" 作为一行的结束符号.(可以没有";",以折行符(回车)作为一行的结尾.)(不推荐)
         var num2 = 20
     //3 js中的注释有两种 单行,多行
         // 单行注释"//"
         // 多行注释 "/* */"
         // 没有文档注释
     //4 封装代码块 与 java一样,使用{}.
     //5 变量声明时,前缀var 也不是必须的.
         //加var 和 不加 var 有什么区别?
         // 如果不使用var,那么该变量是全局变量
         function fun1(){
             var a = 10;
             b = 100;
         }
         fun1();
         alert(b);
    </script>
    
    </body>
    </html>

    3、原始类型判断符

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <script type="text/javascript">
    var num1 = 10;
    var num2 = 3.14;
    var str1 = 'a';
    var str2 = "hello";
    var b = true;
    var c;
    var d = null;
    //typeof
    
    alert(typeof num1);
    alert(typeof num2);
    alert(typeof str1);
    alert(typeof str2);
    alert(typeof b);
    alert(typeof c);
    alert(typeof d);// object
    //为什么null返回object?
            //是js中的一个bug,这个bug 被认为很贴切.所以保留了该bug.
    
    </script>
    
    </body>
    </html>

    4、js中的运算符

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <script type="text/javascript">
    //一元加法 ==> java中 类型转换需要自己准备. ==> js 自带类型转换.==> js很随便
        var a = +"123";
        //alert(typeof a);//number
        
        var b = -"123"; // -123
        
        var c = +"abc"; // 还是会进行类型转换,转换失败.
        
        alert(typeof c);
        alert(c);//转换失败之后,会返回NaN. not a number. NaN也属于number.
    </script>
    
    </body>
    </html>

    5、js中的运算符

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <script type="text/javascript">
    //boolean运算符
        /*  if(NaN){
            alert("true");
        }else{
            alert("false");
        }  */
        //转换规律 (重点)
        //string ==>  ""==>转换为false 其他都为true;
        //number ==>  除了NaN,+0和-0.其他都转换为true.
        //null ==>  false
        //undefined ==> false
        
        
        //NaN特性:
                //1 NaN参与的任何boolean运算返回值都是false. 除了!=
                /* alert(6>NaN);//false
                alert(6<NaN);//false
                alert(6==NaN);//false
                alert(NaN == NaN);//false */
        //因为undefined是null衍生出的,所以 
            alert(undefined == null);// true
    </script>
    
    </body>
    </html>

    6、js中的运算符03

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <script type="text/javascript">
        alert(11>3);//true
        //当运算符两端 , 一端是数字,一端是其他类型时, 其他类型会自动向数字类型转换
        alert("11">3);// true
        alert(11>"3");//true
        //字符串在进行比较时 ,规律是: 比较首字符asc码. 如果一样,比较第2位...
        alert("11">"3");// false
        alert("11">"1");// true
        alert("abc">11);//false
    </script>
    
    </body>
    </html>

    7、function对象的创建

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <script type="text/javascript">
        //1 js中的函数对象
        //java中方法,函数 //public void xxx(){}
        //function fun1(){} ==> 这是定义对象.特殊之处,就是想java中的方法一样,可以执行.
            //方式3
            function fun1(){
                    alert('aaa');
                }
            alert(fun1.toString());//函数对象的toString方法,打印函数的完整定义
        //js中函数对象的创建方式
            //方式1 ==> 函数对象的构造方法中,最后一个参数是定义函数的体.之前所有参数都是定义函数的参数
            var fun2 = new Function("a","b","alert(a+b);");
            function fun2(a,b){
                alert(a+b);
            }
            //方式2 
            var fun3 = function (){
                alert('bbb');
            }
        //问题如下:观察如下代码,查看是否有问题!
            function a(a,b){
            alert(a+b);
        }
            var c = 1;
            var b = 2;
            
            a(c,b);
            
    </script>
    
    </body>
    </html>

    8、function对象的调用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <script type="text/javascript">
        //1 js中的函数对象
        //函数的调用
            function fun1(a,b){
            alert(a+b);
            }
            
            /*f un1(1,2);//3
            fun1(1,2,3);//3
            fun1();//NaN */
            
            //js中函数的调用只看函数名称.不看参数列表
        function fun2(){
                //alert(arguments.length); //取得实际参数个数
                alert(arguments[0]); // 获得第一个实际参数
            }
            //函数中的内置对象 arguments
            //arguments ==> 代表函数运行时的实际参数列表.
            /* fun2(); //0  undefined
            fun2(1,2); //2 1
            fun2(1,2,3); //3 1 */
            
        // js中存在函数的重载吗? 如何重载?
                function fun3(){
                    alert('aaa');
                }
                function fun3(a){
                    alert('bbb');
                }
            //如上不能重载,是覆盖
                function fun4(){
                if(arguments.length == 2){
                    alert(arguments[0]+arguments[1]);
                }else if(arguments.length == 3){
                    alert(arguments[0]+arguments[1]-arguments[2]);
                }
                
            }
            
            
            fun4(1,2);//3
            fun4(1,2,3);//0
            
            //以上是重载.
            
            
            
    </script>
    
    </body>
    </html>

    9、function对象的返回

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <script type="text/javascript">
    //---如果函数没有显示指定返回值 那么函数返回值为undefined.
    /*     function fun1(){}
        alert(fun1()); */
    //-----------------------------------
    //使用return 关键字,返回内容
         function fun2(a,b){
            alert('fun2');
            return a+b;
        }
        //alert(fun2(1,2));//3 
    //return 关键字,在js中也可以作为结束方法运行的功能.
        function fun3(){
            alert('aaa');
            return ;
            alert('bbb');
        }
        //fun3();
    //--运算符 void()的使用-----------
    //用来拦截函数的返回值的.
        //alert(void(fun2(1,2)));//undefined
    
    </script>
        <a href="javaScript:void(fun2(2,3))" >点我</a>
        <br/>
        <a href="javaScript:void(0)"  >点我</a>
    </body>
    </html>

    10、String,Boolean&Number

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    //JS  ==> 原始类型string可以直接使用对象类型的方法和属性.string boolean number 被定义为伪对象.
        //string boolean number ==> 原始数据类型
        //String Boolean Number ==> 对象类型
    //java    ==> 自动装箱拆箱.
        //int      short  ....
        //Integer  Short  ....
    //--------------------------------------------------------------------------
    //Boolean 和 Number 类型 中的方法在开发中几乎不可能用到.
    //String对象 ==> 学习重点.
        //属性
            //length ==> 长度
            var str1 = "abc"; 
            var str2 = new String("abc");
            /* 
            alert(str1.length);
            alert(str2.length); 
            alert(typeof str1); //string
            alert(typeof str2); // object
            */
        //方法
            //1 没用的方法
                /* alert(str1.big());
                alert(str1.sub()); 
                alert(str1.bold());*/
            //2 重要的方法
                //indexOf
                //lastIndexOf
                //charAt 
                //alert(str1.charAt(0));//a
                //charCodeAt 返回所在字符的asc码
                //alert(str1.charCodeAt(0));//97
                //subString 
                alert(str1.substring(0, 1));//a 
                //slice 支持负数. 从右往左.
                alert(str1.slice(0, -1));//a
            //3 与正则结合的方法(正则对象讲完回来看.)
                //split
                //replace
                //match
                //search
        
    </script>
    </head>
    <body>
    </body>
    </html>

    11、String,Boolean&Number类型转换

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    //利用3大包装类的构造函数进行类型转换.
        // string ==> boolean
        var b1 = new Boolean("abc");
        //boolean ==> string
        var str1 = new String(true);
        // number ==> string
        var str2 = new String(123);
        //string ==> number
        var num1 = new Number("123");
        //....
    //运算符==> 
            //typeof 运算符 判断原始数据类型的.
            //instanceof 运算符 用来判断属于哪种对象.
        alert(num1 instanceof Number);//true
        alert(num1 instanceof Object);//true
        alert(num1 instanceof String);//false
            
    </script>
    </head>
    <body>
    </body>
    </html>

    12、Global对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    //利用3大包装类的构造函数进行类型转换.
        //6个方法==> 关于解码,编码的方法
            //encodeURI 编码 只编码汉字
            //decodeURI 解码
            
            var url = "http://www.baidu.com?name=?张/三:"
            var url2 = encodeURI(url);
                //alert(decodeURI(url2));//张三
            //encodeURIComponent 编码 当提交的值中包含一些url中的敏感符号时,使用该方法对敏感符号编码.
            //decodeURIComponent 
                //alert(encodeURIComponent(url));
            //escape  已经过时
            //unescape 已经过时
        // isNaN  判断某个值是否是NaN ==> NaN==NaN=>false 
            //alert(isNaN(NaN));//true
            //alert(NaN == NaN);//false
        // parseInt   转换成整数
        // parseFloat 转换成浮点数
            
            var str = "123abc";
            
            //1.使用 +
            //2.使用 new Number()
            //3.parseInt 
            
            //alert(typeof parseInt(str));//number
            /* alert(+str); //NaN
            alert(new Number(str));//NaN
            alert(parseInt(str));// 123 */
            
        //区别: 1,2两种转换属于将字符串整体进行转换.如果字符串中包含1个或以上转换不了的字符,返回NaN
               //3 从左到右 依次转换,能转一个是一个,直到遇到不能转换的值停止.
               
        // parseFloat 转换成浮点数
            //与上面的parseInt一样.区别是支持转换小数
            var str = "3.1415.9265357";
            
            alert(parseInt(str));// 3
            alert(parseFloat(str));//3.1415
        //
        
    </script>
    </head>
    <body>
    </body>
    </html>

    13、Math对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    //Math对象 
    //属性内建对象==> 不需要创建实例,直接使用即可.
    
    //属性
        //PI ==> 3.14159 圆周率
    //方法
        //random方法 ==> 返回随机数 0~1之间的随机数 包括0不包括1
        
        //alert(Math.random());
        
        //round方法==> 四舍五入方法.
            //返回0~100之间的随机数.0 和100 都可能出现
                //alert(Math.round(Math.random()*100));
        
        //max/min 方法 ==> 接收两个参数,比较之后返回最大/最小的那个.
        
            alert(Math.max(1,2));//2
        
        //pow ==> 计算参数1的参数2次方.
        
            alert(Math.pow(2,3));//8
        
        
    
    </script>
    </head>
    <body>
    </body>
    </html>

    14、ECMA中定义的对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <script type="text/javascript">
        //1 js中的函数对象
        //java中方法,函数 //public void xxx(){}
        //function fun1(){} ==> 这是定义对象.特殊之处,就是想java中的方法一样,可以执行.
            //方式3
            function fun1(){
                    alert('aaa');
                }
            alert(fun1.toString());//函数对象的toString方法,打印函数的完整定义
        //js中函数对象的创建方式
            //方式1 ==> 函数对象的构造方法中,最后一个参数是定义函数的体.之前所有参数都是定义函数的参数
            var fun2 = new Function("a","b","alert(a+b);");
            function fun2(a,b){
                alert(a+b);
            }
            //方式2 
            var fun3 = function (){
                alert('bbb');
            }
        //问题如下:观察如下代码,查看是否有问题!
            function a(a,b){
            alert(a+b);
        }
            var c = 1;
            var b = 2;
            
            a(c,b);
            
    </script>
    
    </body>
    </html>

    15、Array对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    //Array对象  ==> 数组
        //1.创建方式
            //1>创建方式1 创建一个数组并初始化值
                var arr1 = ["abc",2,true,null,undefined,new Object()]; 
            //2>创建方式2 同方式1
                var arr2 = new Array(1,2,3);
            //3>创建方式3 ==> 创建一个长度为3的数组. 数组Array的构造函数,如果只传一个参数,并且这个参数是整数.那么这个整数就是数组的初始化长度.
                var arr3 = new Array(3);
        //2.属性
            //length ==> 数组的长度
            /* alert(arr1.length);//6
            alert(arr2.length);//3
            alert(arr3.length);//3 */
        //js中数组的特点:
                //1.js中的数组,类型任意.
                //2.数组的长度不是固定的.用到哪里,就有多长.
            /* arr3[8] = 10;
            alert(arr3.length);//9
            alert(arr3[6]);//undefined */
        //3.方法
        var arr4 = [1,2,3];
            //join方法==> 将数组中的每个元素连接起来返回一个字符串.参数就是连接符.(默认连接符是",")
            //alert(arr4.join(""));//使用该方法可以模拟一个StringBuilder
            
                    //join方法的高级应用.
                        /*
                            var str1 = "a";
                            var str2 = "b";
                            var str3 = "c";
                              alert(str1+str2+str3);
                              
                              ["a","b","c"] ==> "abc"
                        */
            //push/pop ==> 模拟栈的结构.
            //shift/unshift==> 模拟队列的结构
            
            //reverse方法 ==> 将数组中的元素顺序倒置
                //alert(arr4.reverse());//3.2.1
            //sort方法 ==> 排序的方法. 
            //注意: 该方法默认排序规则,按照字符串规则排序.
            //如果需要按照数字排序,需要准备一个比较器.
            var arr5 = [2,9,3,100,5,7,1];
            
            alert(arr5.sort(abc))//
            
            //函数对象==> 比较器
            function abc(a,b){
                /* if(a>b){
                    return 1;
                }else if(a==b){
                    return 0;
                }else{
                    return -1;
                } */
                
                return a-b;
            }
                              
    </script>
    </head>
    <body>
    </body>
    </html>

    16、Date对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    //Date对象
    /* 1.new Date() 获取当前时间
    2.getFullYear() 获取年份
    3.getMonth() 获取月份注意 1月份结果为0
    4.getHours() 小时
    5.getDate() 日期
    6.getMinutes() 分钟
    7.getSeconds() 获取秒
    8.getTime()  获取毫秒值.
    9.toLocaleString() 获取本地的时间格式字符串. 
    10.getDay();获得星期
    */
    //空参构造获得当前时间
    var date = new Date();//当前时间
    //填入毫秒数,获得毫秒数对应的时间
    var date2 = new Date(10000000000000);
    
    /* alert(date.getFullYear());//
    alert(date.getMonth());//
    alert(date.getHours());//
    alert(date.getDate());//
    alert(date.getMinutes());//
    alert(date.getSeconds());//
    alert(date.getTime());//
    alert(date.toLocaleString());//
    alert(date.getDay());// */
    
    //注意:
        //1.月份计数时是0~11月,所以要加1获得正常月份
        //2.星期计数是 0~6 .
        
    
    </script>
    </head>
    <body>
    </body>
    </html>

    17、RegExp对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    //正则对象
        //1 构造方法
            //参数1 正则字符串 ,参数2 匹配模式
            //用户名必须 以字母开头,长度在6到10位之间.
            //匹配模式有两种 
                //"i": 忽略大小写. ignoredCase
                //"g": 全局匹配 global
            var reg1 = new RegExp("^[a-zA-Z][a-zA-Z_0-9]{5,9}$","g");
            var reg2 = /^[a-zA-Z][a-zA-Z_0-9]{5,9}$/g;
        //2 方法
            //test方法 ==> 测试字符串与正则是否匹配.
        var username = "a3456";
                //alert(reg1.test(username));//true
                
        //与String对象结合的4个方法
        var str = "hello world";
            //split 切割字符串
                //alert(str.split(/o/g));
            //replace 查找替换
                //alert(str.replace(/o/g, "haha"));
            //search 只能找第一个出现的位置. 如果需要查找第n个出现的位置使用exec方法.
                //alert(str.search(/o/g));
            //match ==> 找到字符串中符合正则表达式的部分并返回.
                alert(str.match(/o/g));
    </script>
    </head>
    <body>
    </body>
    </html>

    18、作业相关知识

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    //1 对数组进行排序
        var arr = [2,3,5,9,1];
        //选择或冒泡
    //2 打印99乘法表 ==> 必须整齐工整 ==> 把99乘法表嵌套到Table中
        document.writeln("hello<br/>");
        document.writeln("hello");
    //3 在页面中写一个 猜数字的游戏!
            //要求: 生成0~100之间的随机数.让用户猜.
            //输入错误需要提示,并让用户重新输入
            //输入正确,提示正确,并询问是否要继续游戏.
        
        
        //显示提示 alert();
        //用户输入值 .参数1提示信息     参数2默认值
            //var num = prompt("请输入一个值!","123");
        //确认框  返回值 确定=>true 取消=>false
            //var result = confirm("您确定要删除吗?");
        //窗口关闭
            //window.close();
        
        
    </script>
    </head>
    <body>
    </body>
    </html>
  • 相关阅读:
    appium python api(转)
    make clean 与 make distclean 的区别
    实参相依查找[条款25]----《C++必知必会》
    成员函数查找[条款24]---《C++必知必会》
    C++匿名名字空间
    程序界面多语言切换功能如何实现
    C 语言中 define 的全部使用方法总结
    #if defined(__cplusplus)
    伯乐在线
    jsp手动分页
  • 原文地址:https://www.cnblogs.com/weizhen/p/5991299.html
Copyright © 2020-2023  润新知