WEBBASIC Unit04&05 JavaScript 概述、 JavaScript 基础语法、流程控制、 JavaScript对象概述、常用内置对象一、常用内置对象二、常用内置

最新推荐文章于 2020-02-19 18:08:34 发布

KopWelkin

最新推荐文章于 2020-02-19 18:08:34 发布

阅读量358

点赞数

分类专栏： Java

Java 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

一.String(手册)

和Java差不多

使用js实现阶乘

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function jc() {
        //获取文本框内的值
        var n = 
            document.getElementById("num").value;
        //获取span
        var span = 
            document.getElementById("result");
        //判断该值是不是数字
        if(isNaN(n)) {
            //不是数字,给予提示
            span.innerHTML = "请输入数字";
        } else {
            //是数字,开始计算
            if(n<0) {
                //负数没有阶乘
                span.innerHTML = "负数没有阶乘";
            } else if(n==0) {
                //0的阶乘是1
                span.innerHTML = 1;
            } else {
                var s = 1;
                for(var i=n;i;i--) {
                    s *= i;
                }
                span.innerHTML = s;
            }
        }
    }
</script>
</head>
<body>
    <input type="text" id="num"/>
    <input type="button" value="阶乘"
        onclick="jc();"/>
    = <span id="result"></span>
</body>
</html>

二.Number(*)

toFixed(n)

三.数组(*)

如何创建数组
数组倒转方法
数组排序方法(*)

这里写图片描述

四.Math(手册)

和Java差不多

五.Date

如何创建日期对象
如何格式化日期对象
如何读写时间分量

这里写图片描述

演示js内置对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //2.Number对象
    var n = 3.1415926;
    console.log(n.toFixed(3));
    //3.Array对象
    //3.1如何创建数组
    //理解:js中的数组都是Object数组
    //1)已知数据
    var a1 = ["zhangsan",25,false];
    console.log(a1[0]);
    //2)未知数据
    var a2 = new Array();
    a2.push("lisi");
    a2.push(28);
    a2.push(true);
    console.log(a2[0]);
    //结论:任何方式创建的数组本质是一样的
    //3.2数组倒转
    var arr = [6,12,4,1,3,8];
    arr.reverse();
    console.log(arr);
    //3.3数组排序
    arr.sort();
    console.log(arr);
    //function x(a,b){return a-b}
    arr.sort(function(a,b){
        return a-b;
    });
    console.log(arr);

    //4.Math

    //5.Date
    //5.1如何创建日期
    var d1 = new Date();
    var d2 = new Date("2017/05/01 11:11:11");
    console.log(d1);
    console.log(d2);
    //5.2转为本地时间格式的字符串
    console.log(d1.toLocaleDateString());
    console.log(d1.toLocaleTimeString());
    //5.3读取时间分量
    var y = d1.getFullYear();
    var m = d1.getMonth()+1;
    var d = d1.getDate();
    var today = y + "年" + m + "月" + d + "日";
    console.log(today);

    //6.RegExp对象
    //6.1如何创建正则对象
    var str = "you can you up,no can no bb.";
    var reg = /no/;
    //6.2 test()
    //检测str中是否包含与reg相匹配的子串
    console.log(reg.test(str));
    //6.3 exec()
    //1)普通模式
    //从str中找出和reg相匹配的第一个子串
    console.log(reg.exec(str));
    //2)全局模式
    //第N次调用则从str中找出
    //和reg相匹配的第N个子串
    reg = /no/g;
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    console.log(reg.exec(str));

    // && 和 &
    console.log(true&&false);//false
    console.log(true&&3);//3
    console.log(true&false);//0
    console.log(true&3);//1

    //7.Function对象
    function sum() {
        var s = 0;
        if(arguments.length) {
            for(var i=0;i<arguments.length;i++) {
                s += arguments[i];
            }
        }
        return s;
    }
    //页面加载时直接调用sum函数
    console.log(sum(1,2));
    console.log(sum(1,2,3,4));
</script>
</head>
<body>
    <p>用来演示js内置对象</p>
</body>
</html>

六.RegExp(*)

1.正则对象

如何创建正则对象
test() *
exec()

这里写图片描述

用户登录验证

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    .ok{color:green;}
    .error{color:red;}
</style>
<script>
    //验证账号的格式
    function checkCode() {
        console.log(1);
        //获取账号
        var code = 
            document.getElementById("code").value;
        //获取span
        var span = 
            document.getElementById("code_msg");
        //验证账号格式
        var reg = /^\w{5,10}$/;
        if(reg.test(code)) {
            span.className = "ok";
        } else {
            span.className = "error";
        }
    }
    //验证密码格式
    function checkPwd() {
        var pwd = 
            document.getElementById("pwd").value;
        var span = 
            document.getElementById("pwd_msg");
        var reg = /^\w{10,15}$/;
        if(reg.test(pwd)) {
            span.className = "ok";
        } else {
            span.className = "error";
        }
    }
</script>
</head>
<body>
    <form action="http://www.tmooc.cn">
        <p>
            账号:<input type="text" id="code"
                onblur="checkCode();"/>
            <span id="code_msg">5-10位字母、数字、下划线</span>
        </p>
        <p>
            密码:<input type="password" id="pwd"
                onblur="checkPwd();"/>
            <span id="pwd_msg">10-15位字母、数字、下划线</span>
        </p>
        <p><input type="submit" value="登录"/></p>
    </form>
</body>
</html>

2.字符串支持正则的方法(手册)

replace()
match()
search()

七.Function对象(*)

arguments *
eval *

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function cal() {
        //获取文本框
        var input = document.getElementById("ss");
        //从框中取值
        var ss = input.value;
        try {
            //执行运算
            input.value = eval(ss);
        } catch(ex) {
            input.value = "Error";
        }
    }
</script>
</head>
<body>
    <input type="text" id="ss"/>
    <input type="button" value="="
        onclick="cal();"/>
</body>
</html>