JavaScript 基础

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>javascript 基础</title>
    <link rel="stylesheet" type="text/css" href="css/css_test1.css">
</head>
<body>
    <hr>
    <h3>JavaScript 事件</h3>
    <button onclick="getElementById('demo1').innerHTML=Date()">时间</button>
    <p id="demo1"></p>

    <hr>
    <h3>JavaScript 类型转换</h3>
    <script type="text/javascript">
        console.log(typeof "mane"); //查看变量数据类型
        console.log((66).constructor);  //返回所有 JavaScript 变量的构造函数
        console.log((12+24).toString());
        console.log(String(13+35));
        console.log(String(true));
        console.log(false.toString());
        console.log(Number("3.33"));
        console.log(Number(" "));
        console.log(Number(""));
        console.log(Number("99 88"));
        var a="3";
        var b=+a;
        console.log(b);
        console.log(Number(false));
        d=new Date();
        console.log(Number(d));

    </script>
    <p id="demo2"></p>
    <script type="text/javascript">
        var members=["Mane","salah","Arnold"];
        document.getElementById("demo2").innerHTML=isArray(members);
        function isArray(myArray){
            return myArray.constructor.toString().indexOf("Array")>-1;
        }
    </script>
    <hr>
    <h3>JavaScript 正则表达式</h3>
    <script type="text/javascript">
        var str1="how to make up.";
        var n1=str1.search(/make/i);
        console.log(n1);
        var n2=str1.search("to");
        console.log(n2);
        var str2=str1.replace(/make/i,"give");
        console.log(str2);
        var str3=str1.replace("make","get");
        console.log(str3);

        str4="CEG_00012";
        var pattern1=/^[A-Z][A-Z]+_[0-9]+[0-9]$/;
        if (pattern1.test(str4)) {
            console.log("输入合法!");
            //window.alert("输入合法!");
        }else{
            window.alert("输入不符合要求!");
        }
    </script>

    <hr>
    <h3>JavaScript 错误</h3>
    <input type="button" value="查看" onclick="showMessage()">
    <script>
        var str5="";
        function showMessage(){
            try{
                adddlert("Welcome guest!");
            }catch(err){
                str5="出现一个错误\n";
                str5+="错误描述:"+err.message+"\n";
                str5+="确认继续.";
                //alert(str5);
                console.log(str5);
            }
        }
    </script>
    分数:<input type="text" id="demo3">
    <button type="button" onclick="checkInput()">提交</button>
    <p id="pDemo3"></p>
    <script>
        function checkInput(){
            var demo3,str6;
            demo3=document.getElementById("pDemo3");
            demo3.innerHTML="";
            str6=document.getElementById("demo3").value;
            try{
                if (str6=="") {
                    throw "分数值为空!";
                }
                if (isNaN(str6)) {
                    throw "分数不能不是一个数字";
                }
                str6=Number(str6);
                if (str6>100) {
                    throw "分数不能大于100";
                }
                if (str6<0){
                    throw "分数不能小于0";
                }
            }catch(err){
                demo3.innerHTML="错误:"+err+".";
            }finally{
                document.getElementById('demo3').value="";
            }
        }
    </script>

    <hr>
    <h3>JavaScript 表单</h3>
    <form name="form1" action="#" onsubmit="return validateForm1()" method="post">
        Name:<input type="text" name="name1">
        Age:<input type="text" name="age1">
        Sex:<input type="text" name="sex1" required="required"><br>
        Email:<input type="text" name="email1">
        Email2:<input type="email" name="email2">
        <input type="submit" value="提交">
    </form>
    <script>
        function validateForm1(){
            var name1=document.forms["form1"]["name1"].value;
            if (name1==null || name1=="") {
                alert("名字不能为空!");
                return false;
            }
            var age1=document.forms["form1"]["age1"].value;
            if (isNaN(age1) || age1<18 || age1>60) {
                alert("年龄要求在18~60岁之间。");
                return false;
            }
            var email1=document.form["form1"]["email1"].value;
            var at_position=email1.indexOf("@");
            var dot_position=email1.lastIndexOf(".");
            console.log(dot_position);
            if (at_position<1 || dot_position<at_position+2 || dot_position+2>=email1.length) {
                alert("email地址不合法!");
                return false;
            }
        }
    </script>

    <hr>
    <h3>JavaScript 验证 API</h3>
    <input type="number" id="number1" min="60" max="90" required>
    <button onclick="validateNumber()">验证</button>
    <p id="demo4"></p>
    <script>
        function validateNumber(){
            var number1=document.getElementById("number1");
            if (number1.checkValidity()==false) {
                document.getElementById("demo4").innerHTML=number1.validationMessage;
            }
        }
    </script>

    <hr>
    <h3>this关键字</h3>
    <button onclick="this.style.display='none'">点击会消失</button>
    <script>
        var memberKop={
            name:"Mane",
            age:28,
            sex:"男",
            number:10,
            allInformation:function(){
                var str7="name:"+this.name+" number:"+this.number;
                return str7;
            }
        }
        var memberKop2={
            name:"salah",
            age:27,
            number:11,
        }
        console.log(memberKop.allInformation());
        console.log(memberKop.allInformation.call(memberKop2));
    </script>

    <hr>
    <h3>let 和 const</h3>
    <script type="text/javascript">
        var x=10;
        {
            let y=20;
            let x=66;
            console.log(x);
            console.log(y);
        }
        console.log(x);
        //console.log(y); let 声明的变量只在let 命令所在的代码块 {} 内有效

        let i=10;
        let sumi=0
        for (let i=0;i<10;i++){
            sumi+=i;
        }
        console.log(sumi);
        console.log(i);

        const NUMBER0=100; //const 声明的常量必须初始化

    </script>

    <hr>
    <h3>Javascript JSON</h3>
    <p id="dem5">demo5</p>
    <script>
        var text1='{"members":['+
        '{"name":"Mane","number":10},'+
        '{"name":"salah","number":11},'+
        '{"name":"Arnold","number":66}]}';
        var str8=JSON.parse(text1);
        for (let i=0;i<3;i++) {
            console.log(str8.members[i].name+" "+str8.members[i].number);
        }
    </script>

    <hr>
    <h3> JavaScript void</h3>
    <a href="javascript:void(0)">javascript:void(0)</a><br>
    <a href="javascript:void(alert('Warning!'))">javascript:void(alert(Warning!))</a><br>
    <a href="#dem5">#dem5</a>





<br><br><br>
</body>
</html>
全部评论

相关推荐

07-20 21:57
已编辑
门头沟学院 Java
点赞 评论 收藏
分享
好样的
投递网易等公司10个岗位
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务