JavaScript基础（一）

曾经终败给现在 2022-04-13 09:22 238阅读 0赞

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>JavaScript脚本基础</title>

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>JavaScript的基础语法</title>  
</head>  
<body>  
          
        <button οnclick="test1()">测试一</button>  
        <script>  
//            function函数声明，test1函数名  
            function test1()\{  
//                var声明变量 num变量名  
                var num;  
//                输出num的值  
                console.log(num);  
//                输出num的类型  
                console.log(typeof num);  
//                用if语句会将变量自动转化为boolean类型  
//                undefined、null、空字符串、数值为0 都默认为false  
                if(num)\{  
                    console.log(true)  
                \}else\{  
                    console.log(false)  
                \}  
//                == 恒等仅仅做值的匹配  
                if(123=='123')\{      //true  
                    console.log(true)  
                \}else\{  
                    console.log(false)  
                \}  
//                === 恒等做值和类型的匹配  
                if(123==='123')\{      //false  
                    console.log(true)  
                \}else\{  
                    console.log(false)  
                \}  
            \}  
        </script>

<button οnclick="test2()">字符串转化为整数和浮点数</button>  
        <script>  
            function test2()\{  
//                parseInt转化为整数  
                console.log(parseInt('1234'))   //1234  
                console.log(parseInt('123.4'))   //123  
//                parseInt转化为整数，到非数字为止  如果第一个字符不是数字则返回 NAN  
                console.log(parseInt('a1234'))   //NAN(代表不是数字)  
                console.log(parseInt('1234a'))   //1234  
                console.log(parseInt('0.1234'))   //0  
                console.log(parseInt('01234'))   //1234  
//                parseFloat转化为浮点数  
                console.log(parseFloat('1234'))     //1234 不是1234.0  
                console.log(parseFloat('1234.5'))     //1234.5  
                console.log(parseFloat('1234.0'))     //1234  
                console.log(parseFloat('1234.3.3'))     //1234.3  
                console.log(parseFloat('1234.'))     //1234a  
                console.log(parseFloat('0a1234'))     //0  
            \}  
        </script>

<button οnclick="test3()">字符串操作</button>  
        <script>  
            function test3()\{  
//                字符串后接 + 做拼接操作  
                console.log('123'+3)      //1233  
//                字符串后接 - 、 \* 、 / 、 % 做数学运算操作  
                console.log('123'-3)      //120  
                console.log('123'\*3)      //369  
                console.log('124'/3)      //41.3333...  
                console.log('123'%3)      //0  
//                小数求余  
                console.log(5.5 %3);      // 2.5  
            \}  
        </script>

<button οnclick="test4()">数组一</button>  
        <script>  
            function test4()\{  
//                js中的数组与java中的集合类似，不设置长度默认长度为0，随着添加数据长度增加  
                arr = new Array();  
                console.log(arr.length);  //0  
                arr\[0\] = 1;  
                console.log(arr.length);  //1  
                arr\[10\] = 10;  
//                直接添加下标为n(n在已添加的元素的下标中最大)的元素，数组长度直接增加到n+1  
                console.log(arr.length);        //11  
//                此时arr\[1\]还没有赋值，所以为undefined  
                console.log(arr\[1\]);    //undefined  
//                清除数组中的元素  
                arr = null;  
            \}  
        </script>

<button οnclick="test5()">数组二</button>  
        <script>  
                function test5()\{  
                    var a = new Array();        //var a = \[\];效果与var a = new Array();相同  
//                    创建数组的时候设置数组长度  
                    var b = new Array(10);  
                    console.log(b.length)       //10  
//                    创建数组的时候给数组项赋值  
                    var c = new Array(1,3,5);   //var  c= \[1,3,5\];效果与var c = new Array(1,3,5);相同  
                    console.log(c.length)       //3  
//                    循环遍历数组  
                    for(var i=0; i<c.length; i++)\{  
                        console.log(c\[i\]);  
                    \}  
                    /\*1  
                      3  
                      5\*/  
                \}  
        </script>

<button οnclick="test6()">日期类型一</button>  
        <script>  
                function test6()\{  
                    var date = new Date();  
                    console.log(typeof date);   //object  
                    console.log(date);  //Thu Oct 11 2018 23:08:14 GMT+0800 (中国标准时间)  
//                    date.getYear(  )指定Date对象date的年份字段减去1900(不推荐使用)  
//                    date.getFullYear(  )用本地时间表示时返回的年份，返回值是一个四位数

/\* date.getMonth( )指定的Date对象的月份字段，以本地时间表示，返回值在0(一月)到11(十二月)之间。  
                    所以月份应该加一\*/

/\*Date.getDay( ) 返回一周中的某一天  
                    Date.getDate( ) 返回一个月中的某一天\*/  
                    var strdate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();  
                    var strtime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();  
                    console.log(strdate+" "+strtime);   //2018-10-11 23:8:14  
                \}  
        </script>

<button οnclick="test7()">日期类型二</button>  
        <script>  
            function test7()\{  
                var date = new Date('2018-09-10');  
//                Date.parse(date)指定的日期和时间距1970年1月1日午夜(GMT时间)之间的毫秒数  
                console.log(Date.parse('2018-09-10'));  
                var date = new Date('2018-09-33');  
                console.log(Date.parse('2018-09-33'));// 日期时间的格式不正确，转换出来的结果为 NaN  
//                可以利用Date.parse(date)转换日期为毫秒数，判断日期格式是否正确  
                var a = Date.parse(date);  
                console.log(Boolean(a));  
            \}  
        </script>

<button οnclick="test8()">字符串二</button>  
        <script>  
            function test8()\{  
                var str = 'abc';  
//                在js中没有字符类型只有字符串类型  
                console.log(typeof  str.charAt(0));     //string  
                console.log(str.charAt(5)); // 下标超出字符串长度，那么返回一个长度为0的空字符串  
                var str = 'abc def';  
                console.log(str.charAt(2));  
                console.log(str.charAt(3));     //返回一个长度为0的空字符串  
//                js中汉字也算一个长度  
                var str = "李四";  
                console.log(str.length);        //2  
                console.log(str.charAt(0));     // 李  
//                string.charCodeAt(n) 返回string中的第n个字符的Unicode编码  
                console.log(str.charCodeAt(0));  //26446  
            \}  
        </script>

<button οnclick="test9()">正则表达式</button>  
        <script>  
            function test9()\{  
//               开始 /正则表达式/ 结束  
//                全部是数字，长度6---30  
                var reg = /^\\d\{6,30\}$/;  
//                RegExp.test( ) 检测一个字符串是否匹配某个模式，返回布尔类型  
                if(reg.test('123456'))\{  
                    console.log('数字匹配成功！');  
                \}else\{  
                    console.log('数字匹配失败...........');  
                \}  
                //        中国手机号段  
                reg = /^1(\[38\]\\d|4\[57\]|5\[0-35-9\]|66|7\[013578\]|99)\\d\{8\}$/;  
                //        匹配姓名汉字，\\u开头代表是unicode编码 ，unicode表中汉字的编码在 4e00-9fa5 之间  
                reg = /^\[\\u4e00-\\u9fa5\]\{2,20\}$/;  
            \}  
        </script>

<br>  
        <button οnclick="test10()">数学计算</button>  
        <br>  
        <button οnclick="test11()">JavaScript函数1</button>  
        <script>  
            function add(num1, num2) \{  
//                没有返回值，只在浏览器控制台输出数据  
                console.log(num1+num2);  
            \}  
            function add2(num1, num2) \{  
                return num1+num2;  
            \}  
            function add3(num1, num2) \{  
                return ;  
            \}  
            function test10() \{  
                var num1 = 10, num2 = 20;  
                var mianji = num1\*num1\*Math.PI;  
                console.log(mianji);    //314.1592653589793  
//                Math.ceil( ) 对一个数上舍入  
                console.log(Math.ceil(mianji)); //315  
//                Math.round( ) 四舍五入  
                console.log(Math.round(mianji));  
//                number.toFixed(digits)保留digits位小数，如果必要该数字会被舍入，也可以用0补足，以便它达到指定的长度，若不写参数用0代替  
                console.log(mianji.toFixed(2));         //314.16  
            \}  
            function test11() \{  
                var temp = add(10, 20);  
                console.log(temp);      //add（）没有返回值，所以为undefined

temp = add2(20, 30);  
                console.log(temp);       //add2() 返回两个参数之和，所以输出50

temp = add3(20, 30);  
                console.log(temp);      //add3() 有return但是没有定义返回值，所以为undefined  
            \}  
        </script>  
</body>  
</html>