JavaScript基础知识一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在HTML页面中编写JS代码-->
    <!--script标签可以放在head标签中，也可以放在body标签中-->
    <!--在一个HTML页面中，可以存在多个script标签-->
    <script>
        //往网页输出内容
        document.write("这是一段JS代码")
    </script>
    <!--引入外部JS文件的方法-->
    <!--<script type="text/javascript" src="first.js"></script>-->
    <br />

    <!--JS是一门弱类型语言，因此声明变量不需要指定类型-->
    <script>
        // var关键字可以不写，变量的类型是根据它的值来确定的
        // 变量名必须以字母或下划线开头
        // JS的变量是区分大小写的
        // JS变量必须先声明后使用
        // JS变量的类型会随着它的值的改变而发生变化
        var a = 10; //不能以数字开头
        document.write("a = " + a);
        // typeof函数：查看变量类型
        // document.write(typeof(a));

        // JS的数据类型：
        //     number(包含NaN(非数字))
        //     string\boolean\object
        //     undefined: 变量没有定义或初始化时就是 undefined
    </script>
    <br />

    <script>
        // 全等 === ：要求比较的两个变量的值和类型必须都要一样
        var a = 10;
        var b = "10";
        document.write("a == b ?" + (a == b));
        document.write("<br />");  // 换行
        document.write("a === b ?" + (a === b));
    </script>
    <br />

    <script>
        // 三目运算符
        // 如果条件成立，就返回前者内容，否则返回后者内容
        var gender = 0;
        document.write(gender == 1 ? "男" : "女");
    </script>
    <br />

    <script>
        // 条件判断
        var score = 50;
        if (score >= 90) {
            document.write("优秀");
        } else if (score >= 75) {
            document.write("良好");
        } else if (score >= 60) {
            document.write("及格");
        } else {
            document.write("不及格");
        }
    </script>
    <br />

    <script>
        // 条件选择
        var fruit = "orange";
            switch (fruit) {
                case "apple":
                    document.write("苹果");
                    break;
                case "banana":
                    document.write("香蕉");
                    break;
                case "orange":
                    document.write("橘子");
                    break;
                default:
                    document.write("水果");
            }
    </script>
    <br />

    <script>
        // 循环语句
        // 输出1-10的总和
        var num = 1;
        var total = 0;
        while (num <= 10) {
            total += num;
            num++;
        }
        document.write("结果: " + total);
    </script>
    <br />

    <script>
        // do...while循环
        // 统计1-10奇数的总和
        var num = 1;
        var total = 0;
        do {
            if (num % 2 == 1) {
                total += num;
            }
            num++;
        } while (num <= 10);
        document.write("结果: " + total);
    </script>
    <br />

    <script>
        // for循环
        // 实现1-10偶数相加
        var total = 0;
            for (var i = 1; i <= 10; i++) {
                if (i % 2 == 0) {
                    total += i;
                }
            }
            document.write("结果: " + total);
    </script>
    <br />

    <!--定义函数-->
    <script>
        // 使用function关键字定义函数
        // 定义函数时不需要定义返回值类型，如果需要返回结果，可以使用return命令直接返回
        // 函数的形参定义不需要使用var
        // JS函数没有重载，后面定义的函数会覆盖前面定义的函数，因此不要出现重复的函数定义
        // 定义一个函数，根据月份输出该月份的天数
        function getDays(month) {
            // 输出月份的天数
            if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
                document.write("该月份的天数有31天")
            } else if (month == 4 || month == 6 || month == 9 || month == 11) {
                document.write("该月份的天数有30天")
            } else if (month == 2) {
                document.write("该月份的天数有28天")
            }
        }

        // 调用函数
        getDays(10);
    </script>
    <br />

    <script>
        // 定义函数变量
        var getDays_1 = function(month) {
            // 输出月份的天数
            if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
                return 31;
            } else if (month == 4 || month == 6 || month == 9 || month == 11) {
                return 30;
            } else if (month == 2) {
                return 28;
            }
            return -1;
        }
    </script>
    <br />

    <script>
        // String对象
        // 创建字符串的方式：
        // 1. var 变量名 = "内容"
        // 2. var 变量名 = new String("内容")
        // 两种方式的区别：
        // 类型上：第1个创建的是String类，第2个创建的是Object类
        // 处理上：第1个创建的字符串没有属性和方法，而第2个有
        var s1 = "java";  // String类型
        var s2 = new String("java");  // Object类型
        var s3 = new String("java");
        document.write("是同一个对象吗？" + (s1 == s2) + "<br />");
        document.write("s1的类型：" + typeof(s1) + "<br />");
        document.write("s2的类型：" + typeof(s2) + "<br />");
        document.write("是同一个对象吗？" + (s2 == s3) + "<br />");
    </script>
    <br />

    <!--自定义对象-->
    <script>
        // 方法一：通过函数创建对象
        function person(name, age) {
            this.name = name;  //指定成员属性
            this.age = age;
            
            this.say = function () {
                alert("我的名字是" + this.name);  //弹出一个对话框
            }
        }
        // 创建person对象
        var p = new person("小宝", 20);

        document.write("姓名：" + p.name + ", 年龄：" + p.age + "<br />" );
        p.say();  //调用成员方法
    </script>
    <br />

    <script>
        // 通过object创建对象
        var p = new Object();
        p.name = "大宝";
        p.age = 50;
        p.say = function () {
            alert("我的名字是：" + this.name);
        }

        document.write("姓名：" + p.name + ", 年龄：" + p.age + "<br />");
        p.say();  // 调用成员方法
    </script>
    <br />

    <script>
        // 通过JSON语法创建对象
        var p = {
            name: "张三",
            age: 20,
            say: function() {
                alert("我的名字是：" + this.name);
            }
        };
        document.write("姓名：" + p.name + ", 年龄：" + p.age + "<br />");
        p.say(); // 调用成员方法
    </script>
</head>
<body>
    <!--JS基于对象，只需解释就可执行，弱类型-->
    <!--JS安全性较高，跨平台，兼容性好-->
    <!--JS由三部分组成：ECMAScript\DOM\BOM-->
    <!--ECMAScript: 描述了JS的基本语法-->
    <!--DOM: 文档对象模型，提供了处理网页内容的方法-->
    <!--BOM: 浏览器对象模型，提供了与浏览器进行交互的方法-->

    <!--在HTML元素中编写JS代码-->
    <input type="button" value="click me" onclick="document.write('这是点击按钮后显示的内容');" />
    <br />
</body>
</html>
JavaScript基础知识一

猜你喜欢
