1.上次留下的match的问题，其实就是一个搜索判断，element.src.match("bulbon"),看src中有没有"bulbon"，如果有就把值变为"/i/eg_bulboff.gif"；如果没有就把值变为"/i/eg_bulbon.gif"。这样一来一回，就实现了图片的更替。
2. 改变 HTML 元素的样式。（蓝色是我自己加上去测试的）
| <!DOCTYPE html> <html> <body>
<h1>我的第一段 JavaScript</h1>
<p id="demo"> JavaScript 能改变 HTML 元素的样式。 </p>
<script> function myFunction() { x=document.getElementById("demo") // 找到元素 x.style.color="#ff0000"; // 改变样式 }
function myFunction2() { x=document.getElementById("demo") // 找到元素 x.style.color="#000000"; // 改变样式 }
</script>
<button type="button" οnclick="myFunction()">点击这里</button> <button type="button" οnclick="myFunction2()">点击这里</button>
</body> </html> |
3.JS还可以验证用户输入。橙色部分首先取变量x的值，来自元素"demo"。然后用if判断是不是为空或者不是数字（isNaN 意思是is not a number），如果假设成立，则执行alert，浏览器弹框提示。
| <!DOCTYPE html> <html> <body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script> function myFunction() { var x=document.getElementById("demo").value; if(x==""||isNaN(x)) { alert("不是数字或为空"); } } </script>
<button type="button" οnclick="myFunction()">点击这里</button>
</body> </html> |
4.JS可以写在<body>中，也可以写在<head>中，浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript。
5. innerHTML用来获取当前HTML开始和结束标签之间的内容。下面这个例子就是当按下按钮时，Try it就会被My First JavaScript Function替代。
| <!DOCTYPE html> <html>
<head> <script> function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; } </script> </head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" οnclick="myFunction()">Try it</button>
</body> </html> |
6. document.getElementById(id)是通过ID来获取HTML元素。前提是HTML要使用ID来标记。
7.分号";"用于分隔 JavaScript 语句。
8.JavaScript 对大小写是敏感的。
9.JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。
10.您可以在文本字符串中使用反斜杠对代码行进行换行。注意能使文本字符串。比如下面：
| document.write("Hello \ World!"); |
11.JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
12.JS的单行注释"//",多行注释"/*"开头，"*/"结尾。可以把注释放在尾行
| // 输出标题： document.getElementById("myH1").innerHTML="Welcome to my Homepage";
/* 下面的这些代码会输出 一个标题和一个段落 并将代表主页的开始 */ document.getElementById("myH1").innerHTML="Welcome to my Homepage";
var x=5; // 声明 x 并把 5 赋值给它 var y=x+2; // 声明 y 并把 x+2 赋值给它 |