<!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>
浙公网安备 33010602011771号