<!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-->
<!--则其他的函数不能再引用这个变量-->
