<!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. "; txt += "错误描述：" + err.message + " "; 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--> <!--则其他的函数不能再引用这个变量-->