1.javaScript:
世界上最流行的脚本语言;属于web语言;
被设计为html页面增加交互性;
2.写入html输出:
<script type="text/javascript">
document.write("<h1>this is a javascript!</h1>");
document.write("<font size=4>this is a javascript!</font>");
</script>
不属于任何函数的语句,即加载即可执行;
只能在html输出中使用document.write();在文档加载后使用会覆盖整个页面;
3.onclick的四个框:
<head>
<title>javascript.html</title> <script type="text/javascript"> //警告框 function text(){ alert("OFF"); } //确认框 function textconfirm(){ alert(confirm("Del")); } //询问框 function textprompt(){ prompt("password","123654"); } //双击框 function textdbl(){ alert("你双击了我!"); } </script> </head> <body> <input type="button" value="alert" οnclick="text()"/> <input type="button" value="Del" οnclick="textconfirm()"/> <input type="button" value="确认" οnclick="textprompt()"/> <input type="button" value="双击" οndblclick="textdbl()"/> </body>
4.document属性获取:
<head>
<script>
function textimg(){ var textimg = document.getElementById("imgid"); alert(textimg.value); alert(textimg.type); alert(textimg.src); // document.getElementById("imgid").value = "1234"; } </script> </head> <body> <input type="button" value="alert" οnclick="text()"/><br/> <input type="button" value="Del" οnclick="textconfirm()"/><br/> <input type="button" value="确认" οnclick="textprompt()"/><br/> <input type="button" value="双击" οndblclick="textdbl()"/><br/> <input type="button" value="获取" οnclick="email()"/> <input type="text" id="mail"/> <img src="u==0.jpg" width="200px" height="200px" border="2px" οnclick="textimg()"/> <input type="text" id="imgid"> </body>
5.单次点击更改页面图片
<head>
<script type="text/javascript"> function email(){ var email = document.getElementById("mail"); alert(email.id); alert(email.src); email.src = "img/hhh.png"; } </script> </head> <body> <input type="button" value="获取" οnclick="email()"/> <img src="img/hhh.png" style="width: 200px;height: 200px;" /> <img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/> </body>
6.反复点击按钮转换图片
<head> <script type="text/javascript"> function email(){ var email = document.getElementById("mail"); if(email.src.match("1f.jpg")){ email.src = "img/hhh.png"; }else{ email.src = "img/1f.jpg"; } } </script> </head> <body> <input type="button" value="获取" οnclick="email()"/><br/> <img src="img/hhh.png" style="width: 200px;height: 200px;" /><br/> <img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/> </body> 7.点击图片转换图片 <head> <script type="text/javascript"> function email(obj){ // var email = document.getElementById("mail"); if(obj.src == "http://pc-7thboy:8080/new009/img/1f.jpg"){ obj.src = "http://pc-7thboy:8080/new009/img/hhh.png"; }else{ obj.src = "http://pc-7thboy:8080/new009/img/1f.jpg"; } } </script> </head> <body> <!-- <input type="button" value="获取" οnclick="email()"/><br/> --> <img src="img/hhh.png" style="width: 200px;height: 200px;" οnclick="email(this)"/><br/> <img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/> </body>