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" ο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>