分享JS如何向網頁中輸入內容，如何與瀏覽器視窗進行交互，通過簡單的對象方法就可以輕鬆實現。 2-1JavaScript-輸出內容（document.write） 2-2JavaScript-警告（alert消息對話框） 2-3JavaScript-確認（confirm消息對話... ...
第2章 請和我互動（常用互動方法）
本章節主要講解如何向網頁中輸入內容，如何與瀏覽器視窗進行交互，通過簡單的對象方法就可以輕鬆實現。
- 2-1 JavaScript-輸出內容（document.write）
- 2-2 JavaScript-警告（alert 消息對話框）
- 2-3 JavaScript-確認（confirm 消息對話框）
- 2-4 JavaScript-提問（prompt 消息對話框）
- 2-5 JavaScript-打開新視窗（window.open）
- 2-6 JavaScript-關閉視窗（window.close）
- 2-7 編程練習
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript-輸出內容（document.write）</title> 6 <script type="text/javascript"> 7 //1.內容用""括起來，直接輸出內容 8 document.write('今天2020-4-8'); 9 10 //2.通過變數輸出內容 11 var ceshi="12：32"; 12 document.write(ceshi); 13 14 //3.輸出多項內容，之間用+號連接起來 15 var myceshi="document.write輸出"; 16 document.write("javascript"+myceshi); 17 18 //4.輸出HTML標簽，標簽使用""括起來 19 var mystr="今天心情怎麼樣?"; 20 document.write("<br />"+mystr+" "+"答：一般般"); 21 </script> 22 </head> 23 <body> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>alert()消息對話框</title> 6 <script type="text/javascript"> 7 //alert(字元串或者是變數); 8 var mynum=30; 9 alert("hello"); 10 alert(mynum); 11 </script> 12 </head> 13 <body> 14 <!--alert彈出消息對話框(包含一個確定按鈕)。--> 15 <img src="images/demo2-2-1.jpg" > 16 <img src="images/demo2-2-2.jpg" > 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript-確認（confirm 消息對話框</title> 6 <script type="text/javascript"> 7 //confirm(str);str：在消息對話框中要顯示的文本 8 var mystr=confirm("話說今天你很好看呀"); 9 if(mystr==true){ 10 alert("笑，老實人就愛說實話"); 11 } 12 else{ 13 alert("別騙我，剛我還聽到你說不好看") 14 } 15 </script> 16 </head> 17 <body> 18 <p>彈出框類似下圖:</p> 19 <img src="images/demo2-3.jpg" > 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript-提問（prompt 消息對話框）</title> 6 <script type="text/javascript"> 7 var myname=prompt("請輸入你的姓名"); 8 if(myname!=null){ 9 alert("你好"+myname); 10 } 11 else{ 12 alert("你好，陌生人") 13 } 14 </script> 15 </head> 16 <body> 17 <!-- 語法: 18 prompt(str1, str2); 19 參數說明： 20 str1: 要顯示在消息對話框中的文本，不可修改 21 str2：文本框中的內容，可以修改 22 返回值: 23 1. 點擊確定按鈕，文本框中的內容將作為函數返回值 24 2. 點擊取消按鈕，將返回null --> 25 <img src="images/demo2-4.jpg" > 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript-打開新視窗（window.open）</title> 6 <script type="text/javascript"> 7 // window.open([URL], [視窗名稱], [參數字元串]) 8 function rec(){ 9 window.open('http://www.dhnblog.com/','_blank','width=300,height=200,left=0,menubar=yes,toolbar=yes,scrollbars=yes,status=no') 10 } 11 </script> 12 </head> 13 <body> 14 <!-- URL：可選參數，在視窗中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字元串，那麼視窗就不顯示任何文檔。 15 視窗名稱：可選參數，被打開視窗的名稱。 16 1.該名稱由字母、數字和下劃線字元組成。 17 2."_top"、"_blank"、"_self"具有特殊意義的名稱。 18 _blank：在新視窗顯示目標網頁 19 _self：在當前視窗顯示目標網頁 20 _top：框架網頁中在上部視窗中顯示目標網頁 21 3.相同 name 的視窗只能創建一個，要想創建多個視窗則 name 不能相同。 22 4.name 不能包含有空格。 23 參數字元串：可選參數，設置視窗參數，各參數用逗號隔開。 --> 24 <input type="button" name="" id="" value="點我打開新視窗" onclick="rec()"/> 25 <br /> 26 <img src="images/demo2-5.jpg" > 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript-關閉視窗（window.close）</title> 6 <script type="text/javascript"> 7 // window.close(); //關閉本視窗 8 // <視窗對象>.close(); //關閉指定的視窗 9 10 // window.open('http://www.dhnblog.com/','_blank','top=100,left=100,width=200,height=300,menubar=yes,toolbar=yes,status=no,scrollbars=yes'); 11 //window.close(); 12 13 var mywin=window.open('http://www.dhnblog.com/','_blank','top=100,left=100,width=200,height=300,menubar=yes,toolbar=yes,status=no,scrollbars=yes'); 14 // //將新打的視窗對象，存儲在變數mywin中 15 mywin.close(); 16 </script> 17 </head> 18 <body> 19 <p>上面代碼在打開新視窗的同時，關閉該視窗，看不到被打開的視窗。</p> 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>編程練習</title> 6 <script type="text/javascript"> 7 /* 1、新視窗打開時彈出確認框，是否打開 8 提示: 使用 if 判斷確認框是否點擊了確定，如點擊彈出輸入對話框，否則沒有任何操作。 9 2、通過輸入對話框，確定打開的網址，預設為 http://www.dhnblog.com/ 10 3、打開的視窗要求，寬400像素，高500像素，無菜單欄、無工具欄。*/ 11 12 // var str=confirm('是否打開新視窗'); 13 // if(str==true){ 14 // window.open('http://www.dhnblog.com/','_blank','width=400,height=500,menubar=no,toolbar=no') 15 // } 16 17 // function myceshi(){ 18 // var ceshi=prompt('是否打開新視窗','http://www.dhnblog.com/'); 19 // if(ceshi!=null){ 20 // window.open('http://www.dhnblog.com/','_blank','width=400,height=500,menubar=no,toolbar=no') 21 // } 22 // } 23 24 25 //正確代碼，上面為演示 26 function myceshi(){ 27 if(confirm('確定打開新視窗嗎')){ 28 var url = prompt('請輸入一個網址','http://www.dhnblog.com/') 29 window.open(url,"_blank","toolbar=no, menubar=no, scrollbars=yes, width=400, height=400") 30 } 31 } 32 33 </script> 34 </head> 35 <body> 36 <input type="button" name="" id="" value="點擊打開新視窗" onclick="myceshi()" /> 37 </body> 38 </html>
