7、JavaScript 知识总结
1、JavaScript的作用
①JavaScript 为 HTML 设计师提供了一种编程工具
②JavaScript 可以将动态的文本放入 HTML 页面
③JavaScript 可以对事件作出响应
④JavaScript 可以读写 HTML 元素
⑤JavaScript 可被用来验证数据
⑥JavaScript 可被用来检测访问者的浏览器
⑦JavaScript 可被用来创建 cookies
2、JavaScript的基本用法
<!DOCTYPE html> <html> <body> <p>JavaScript能直接写入HTML输出流中：</p> <script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>"); </script> <p>您只能在HTML输出流中使用document.write. 如果您在文档加载后使用（比如在函数中），会覆盖整个文档</p> <button type="button" onclick="alert('hello world')">press me </button> <p id="demo">我是改变前的段落内容</p> <script> function zzl() { x = document.getElementById("demo"); if(x.innerHTML.match("after changed")) { x.innerHTML= "before changed"; x.style.color="red"; } else { x.innerHTML= "after changed"; x.style.color="blue"; } } </script> <button type="button" onclick="zzl()"> 点我改变内容 </button> <script> function testLight() { x = document.getElementById("light"); if(x.src.match("/i/eg_bulboff.gif")) { x.src="/i/eg_bulbon.gif"; } else { x.src="/i/eg_bulboff.gif"; } } </script> <image id="light" src="/i/eg_bulboff.gif" onclick="testLight()"/> <input id="demoInput"> </input> <script> function checkWhetherNumberic() { var x = document.getElementById("demoInput").value; if(x == "" || isNaN(x)) { alert("no numberic"); } } </script> <button type="button" onclick="checkWhetherNumberic()">检查是否是数字</button> </body> </html>
3、JS 基本运算
4、JS对象的操作
<script>
zzl = new Object();
zzl.age = 20;
zzl.number= 200700454217;
document.write("<br/> age is "+zzl.age+" number is "+zzl.number);
</script>
5、JS异常抛出和捕获
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script> 6 function myFunction() 7 { 8 try 9 { 10 var x=document.getElementById("demo").value; 11 if(x=="") throw "值为空"; 12 if(isNaN(x)) throw "不是数字"; 13 if(x>10) throw "太大"; 14 if(x<5) throw "太小"; 15 } 16 catch(err) 17 { 18 var y=document.getElementById("mess"); 19 y.innerHTML="错误：" + err + "。"; 20 } 21 } 22 </script> 23 24 <h1>我的第一个 JavaScript 程序</h1> 25 <p>请输入 5 到 10 之间的数字：</p> 26 <input id="demo" type="text"> 27 <button type="button" onclick="myFunction()">测试输入值</button> 28 <p id="mess"></p> 29 30 </body> 31 </html>
