JavaScript基础知识二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript基础</title>
</head>
<body>
    <!--JS能够写入HTML输出-->
    <!--只能在HTML输出中使用 document.write-->
    <script>
        document.write("<h1>这是一个标题</h1>");
        document.write("<p>这个一个段落</p>");
    </script>
    <br />

    <!--如果在文档加载后使用 document.write(比如函数),则会覆盖整个文档-->
    <!--<h1>这是一个标题</h1>-->
    <!--<p>这是一个段落</p>-->
    <!--<button onclick="test()">点击这里发现前面的标题和段落都没了</button>-->
    <!--<script>-->
        <!--function test() {-->
            <!--document.write("在函数中使用document.write会覆盖整个文档");-->
        <!--}-->
    <!--</script>-->
    <br />

    <!--JS能够对事件做出反映-->
    <!--alert()函数一般用于代码测试-->
    <button type="button" onclick="alert('Welcome!')">点击这里会跳出一个提示框</button>
    <br />

    <!--JS能够改变HTML内容-->
    <p id="demo">
        我这个段落设置了一个id，这样在JS中就能写一个函数来改变我的值
    </p>
    <script>
        function myFunction() {
            x = document.getElementById("demo");  // 找到元素
            x.innerHTML="我变成这样了";  // 改变内容
        }
    </script>
    <button type="button" onclick="myFunction()">点击这里触发事件</button>
    <br />

    <!--JS能够改变HTML图像-->
    <script>
        function changeImage() {
            element = document.getElementById("myimage")
            if (element.src.match("bulbon")) {
                element.src="海绵宝宝2.jpg";
            } else {
                element.src="海绵宝宝1.gif";
            }
        }
    </script>
    <img id="myimage" onclick="changeImage()" src="海绵宝宝2.jpg" />
    <p>点击图像会改变该图像内容</p>
    <br />

    <!--JS能够改变HTML元素样式-->
    <p id="demo1">
        点击按钮后我的字体颜色会被改变
    </p>
    <script>
        function myFunction1() {
            x = document.getElementById("demo1"); // 找到元素
            x.style.color = "#287eff";  // 改变样式
        }
    </script>
    <button type="button" onclick="myFunction1()">点击按钮触发事件</button>
    <br />

    <!--JS能够验证输入-->
    <p>请输入数字，如果不是数字，浏览器会弹出提示框</p>
    <input id="demo2" type="text" />
    <script>
        function myFunction2() {
            var x = document.getElementById("demo2").value;
            if (x == "" || isNaN(x)) {
                alert("这不是数字");
            }
        }
    </script>
    <button type="button" onclick="myFunction2()">点击提交结果</button>
    <br />

    <!--JS数组-->
    <script>
        var i;
        var cars = new Array();
        cars[0] = "Audi";
        cars[1] = "BMW";
        cars[2] = "Volvo";

        // 如果这样写：
        // var i = 0;
        // for (; i <cars.length; i++ )
        // 注意前面的那个分号不能丢
        // i++ 也可以放在document.write()下面一行
        for (i = 0; i <cars.length; i++) {
            document.write(cars[i] + "<br />");
        }
    </script>

    <!--JS对象-->
    <!--JS对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式定义-->
    <script>
        var person = {
            firstname: "Bill",
            lastname: "Gates",
            id : 5566
        };
        document.write(person.lastname + "<br />");
        document.write(person["lastname"] + "<br />");
    </script>

    <!--Undefined和Null-->
    <!--Undefined表示变量不含值-->
    <!--可以通过将变量的值设为null来清空变量-->
    <script>
        var apple;
        var car = "Volvo";
        document.write(apple + "<br />");
        document.write(car + "<br />");
        var car = null;
        document.write(car + "<br />");
    </script>

    <!--创建JS对象及访问其属性-->
    <script>
        person = new Object();
        person.firstname = "Bill";
        person.lastname = "Gates";
        person.age = 56;
        person.eyecolor = "blue";
        document.write(person.firstname + " is " + person.age + " years old." + "<br />");

        var message = "Hello World!";
        var x = message.length;
        document.write("变量message的值的长度为：" + x + "<br />");
        var y = message.toUpperCase();
        document.write("变量message的值的大写形式为：" + y + "<br />");
    </script>

    <!--JS调用带参数的函数的方法-->
    <!--JS的变量和参数必须以一致的顺序出现-->
    <!--也可以使用不同的参数来调用该函数-->
    <button type="button" onclick="myFunction3('Bill Gates', 'CEO')">点击这个按钮可以调用带参数的函数</button>
    <button type="button" onclick="myFunction3('Shawn_Huang', 'student')">点击这个按钮可以调用带另一种参数的函数</button>
    <script>
        function myFunction3(name, job) {
            alert("Welcome " + name + ", the " + job);
        }
    </script>

    <!--带有返回值的函数-->
    <!--通过return语句实现，函数遇到return停止执行-->
    <!--但是JS不会停止执行-->
    <p>使用return来获取函数返回值</p>
    <p id="demo4"></p>
    <script>
        function myFunction4(a, b) {
            return a * b;
        }
        document.getElementById("demo4").innerHTML=myFunction4(4, 3);
    </script>

    <!--使用switch语句选择要执行的多个代码块之一-->
    <!--另外，可以使用default来设置默认消息-->
    <button onclick="myFunction5()">点击这里显示今天是礼拜几</button>
    <p id="demo5"></p>
    <script>
        function myFunction5() {
            var x;
            var d = new Date().getDay();
            switch (d) {
                case 0:
                    x = "Today it's Sunday";
                    break;
                case 6:
                    x = "Today it's Saturday";
                    break;
                default:
                    x = "Looking forward to the Weekend";
            }
            document.getElementById("demo5").innerHTML=x;
        }
    </script>

    <!--JS的for/in循环用来遍历对象的属性-->
    <button onclick="myFunction6()">点这里开启for/in循环</button>
    <p id="demo6"></p>
    <script>
        function myFunction6() {
            var x;
            var txt = "";
            var person = {firstname: "Bill", lastname: "Gates", age: 56};
            for (x in person) {
                txt = txt + person[x] + " ";
            }
            document.getElementById("demo6").innerHTML=txt;
        }
    </script>
    <br />

    <!--while循环-->
    <button onclick="myFunction7()">点这开启while循环</button>
    <p id="demo7"></p>
    <script>
        function myFunction7() {
            var x = "", i = 0;
            while (i < 5) {
                x = x + "The number is " + i + "<br />";
                i ++;
            }
            document.getElementById("demo7").innerHTML=x;
        }
    </script>

    <!--do/while循环是while循环的变体-->
    <button onclick="myFunction8()">点我执行do/while循环</button>
    <p id="demo8"></p>
    <script>
        function myFunction8() {
            var x = "", i = 0;
            do {
                x = x + "The number is " + i + "<br />";
                i ++;  // 这个不能忘了加进去
            }
            while (i < 5);
            document.getElementById("demo8").innerHTML=x;
        }
    </script>

    <!--Break和Continue语句-->
    <button onclick="myFunction9()">点我执行break语句</button>
    <p id="demo9"></p>
    <script>
        function myFunction9() {
            var x = "", i = 0;
            for (i = 0; i < 10; i++) {
                if (i == 3) break;  // 这里可以省略花括号
                x = x + "The number is " + i + "<br />";
            }
            document.getElementById("demo9").innerHTML=x;
        }
    </script>

    <button onclick="myFunction10()">点我执行Continue语句</button>
    <p id="demo10"></p>
    <script>
        function myFunction10() {
            var x = "", i = 0;
            for (i = 0; i < 10; i++) {
                if (i == 3) continue;
                x = x + "The number is " + i + "<br />";
            }
            document.getElementById("demo10").innerHTML=x;
        }
    </script>

    <!--continue语句只能使用在循环中-->
    <!--break语句可用于循环或switch中-->
    <!--通过标签引用，break语句可用于跳出任何JS代码块-->
    <script>
        cars=["BMW","Volvo","Saab","Ford"];
        list: {
            document.write(cars[0] + "<br>");
            document.write(cars[1] + "<br>");
            document.write(cars[2] + "<br>");
            break list;
            document.write(cars[3] + "<br>");
            document.write(cars[4] + "<br>");
            document.write(cars[5] + "<br>");
        }
    </script>

    <!--测试和捕捉错误-->
    <button onclick="message()">点我查看JS测试和捕捉错误方法</button>
    <p id="demo11"></p>
    <script>
        var txt = "";
        function message() {
            try {
                addlert("Welcome guest!");
            }
            catch(err) {
                txt = "this page has an error.\n\n";
                txt += "错误描述：" + err.message + "\n\n";
                alert(txt);
            }
            document.getElementById("demo11").innerHTML=txt;
        }
    </script>

    <!--throw,创建或抛出异常-->
    <script>
        function myFunction12() {
            try {
                var x = document.getElementById("domo12").value;
                if (x == "")    throw "值为空";
                if (isNaN(x))   throw "不是数字";
                if (x > 10)     throw "太大";
                if (x < 5)      throw "太小";
            }
            catch (err) {
                var y = document.getElementById("mess");
                y.innerHTML="错误：" + err + ".";
            }
        }
    </script>
    <p>请输入5到10之间的数字：</p>
    <input id="demo12" type="text">
    <button type="button" onclick="myFunction12()">测试throw用法</button>
    <p id="mess"></p>
</body>
</html>

<!--JS变量命名规则: -->
    <!--
        1.必须以字母开头
        2.以$和_开头没有错，但一般不用
        3.大小写是不一样的两个变量
    -->

<!--JS中，如果把数字与字符串相加，结果将变为字符串-->

<!--在一个函数中如果一个变量这样声明：age = 10 -->
<!--则在另一个函数中也能引用这个变量-->
<!--而如果一个函数中这样声明一个变量：var age = 10-->
<!--则其他的函数不能再引用这个变量-->
JavaScript基础知识二

猜你喜欢
