<!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(非数字)) // stringooleanobject // 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由三部分组成：ECMAScriptDOMBOM--> <!--ECMAScript: 描述了JS的基本语法--> <!--DOM: 文档对象模型，提供了处理网页内容的方法--> <!--BOM: 浏览器对象模型，提供了与浏览器进行交互的方法--> <!--在HTML元素中编写JS代码--> <input type="button" value="click me" onclick="document.write('这是点击按钮后显示的内容');" /> <br /> </body> </html>