體驗js輸出 · 跟濤哥學前端

[TOC] * * * * * # 體驗js 認識常用的5個輸出語句。都屬于 js 內置對象 ?alert(“”); 警告框 ?confirm(“”) ; 確認和取消 ?prompt(“”); 接收用戶信息 ?console.log(“”); 在網頁控制臺中輸出消息 ?document.write(“”); 直接在頁面中輸出消息，可以寫上html標簽。 ### alert()語句我們在訪問網站的時候，有時會突然彈出一個小窗口，上面寫著一段提示信息文字。如果你不點擊“確定”，就不能對網頁做任何操作，這個小窗口就是使用alert實現的。 ~~~ <script type="text/javascript"> alert("從前有座山"); alert("山上有座廟"); alert("廟里有個老和尚"); alert("在給小和尚講故事"); alert("講的什么呢？"); </script> ~~~ 注意: 1. 在點擊對話框"確定"按鈕前，不能進行任何其它操作。 2. 消息對話框通常可以用于調試程序。 3. alert輸出內容，可以是字符串或變量，與document.write 相似。 ### Console 控制臺輸出 console表示“控制臺”，log就是“輸出” 表示在控制臺中輸出，控制臺在Chrome瀏覽器的F12中。控制臺是工程師、程序員調試程序的地方。我們經常使用這條語句輸出一些東西，來測試程序是否正確。 Console 控制臺輸出，一般用于測試用。 |使用代碼 | 作用 | | --- | --- | | Console.log() | 控制臺輸出普通輸出語句 | | Console.warn() | 控制臺警示 | | Console.error(); | 錯誤提示 | ~~~ <script type="text/javascript"> console.log("今天天氣真好");//控制臺輸出普通輸出語 console.log("我很開心"); console.log("今天是"); console.warn("星期一"); //控制臺警示 console.error("天氣很好");//錯誤提示 document.write("今天下大雨了");//在頁面中輸出消息 </script> ~~~ ![](https://box.kancloud.cn/7f285df5384c5c89400fcf1653824a98_102x76.png) ![](https://box.kancloud.cn/5d04437ec04f9eee53ed9cc249dbdce5_484x207.png) ![](https://box.kancloud.cn/ba8e5a1ddb17a4b6aa8a5442da51b4e7_368x198.png) ### Confirm() confirm 消息對話框通常用于允許用戶做選擇的動作，如：“你對嗎？”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。頁面輸出消息顯示確定和取消按鈕，一般和條件判斷配合使用． **語法:** confirm(str); **參數說明:** str：在消息對話框中要顯示的文本返回值: Boolean值 **返回值:** 當用戶點擊"確定"按鈕時，返回true 當用戶點擊"取消"按鈕時，返回false **注: 通過返回值可以判斷用戶點擊了什么按鈕** ~~~ <script type="text/javascript"> var mymessage=confirm("你喜歡JavaScript嗎?"); if(mymessage==true) { document.write("很好,加油!"); } else { document.write("JS功能強大，要學習噢!"); } </script> ~~~ ![](https://box.kancloud.cn/02c6cf944f680d493b6c144bbb593b9d_423x353.png) ### Prompt() prompt彈出消息對話框,通常用于詢問一些需要與用戶交互的信息。彈出消息對話框（包含一個確定按鈕、取消按鈕與一個文本輸入框）。 **語法:** prompt(str1, str2); **參數說明：** str1: 要顯示在消息對話框中的文本，不可修改 str2：文本框中的內容，可以修改 **返回值:** 1. 點擊確定按鈕，文本框中的內容將作為函數返回值 2. 點擊取消按鈕，將返回null ~~~ <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>prompt</title> <script type="text/javascript"> function rec(){ var score; //score變量，用來存儲用戶輸入的成績值。 score = prompt(); if(score>=90) { document.write("你很棒!"); } else if(score>=75) { document.write("不錯吆!"); } else if(score>=60) { document.write("要加油!"); } else { document.write("要努力了!"); } } </script> </head> <body> <input name="button" type="button" onClick="rec()" value="點擊我，對成績做評價!" /> </body> </html> ~~~ **使用Prompt()計算正方形的面積** ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ font:20px/30px "microsoft yahei"; } span{ height: 30px; padding: 0 10px; display: inline-block; border:1px solid #000000; text-align:center; } </style> </head> <body> <h1>請計算正方形的面積</h1> <p>邊長為<span id="m">0</span>厘米的正方形面積是<span id="area"></span>平方厘米</p> <script type="text/javascript"> var value=prompt("請輸入正方形的邊長："); var m=document.getElementById("m"); var m2=document.getElementById("area"); m.innerHTML=value; m2.innerHTML=value*value; </script> </body> </html> ~~~ 演示效果： ![](https://box.kancloud.cn/e9b0c125a77b30a06c9e439a96f5c711_448x176.png)![](https://box.kancloud.cn/55af25505ae7054c2e25e67c93fb30df_445x137.png) 你可以根據上面的代碼，去實現圓的面積，如何計算。 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ font:20px/30px "microsoft yahei"; } span{ height: 30px; padding: 0 10px; display: inline-block; border:1px solid #000000; text-align:center; } </style> </head> <body> <h1>請計算圓形的面積</h1> <p>邊長為<span id="m">0</span>厘米的圓形面積是<span id="area"></span>平方厘米</p> <script type="text/javascript"> var value=prompt("請輸入圓形的邊長："); var m=document.getElementById("m"); var m2=document.getElementById("area"); m.innerHTML=value; //m2.innerHTML=Math.PI*value*value; //面積保留兩位小數 m2.innerHTML=(Math.PI*value*value).toFixed(2); </script> </body> </html> ~~~ 演示效果： ![](https://box.kancloud.cn/56ba91c4c391f96054a3074f4c55b025_448x176.png) ![](https://box.kancloud.cn/3e03332482d50fe45629e5cef008c849_465x148.png) ### Document.write() document.write() 可用于直接向 HTML 輸出流寫內容。簡單的說就是直接在網頁中輸出內容。 **第一種:輸出內容用""括起，直接輸出""號內的內容。** ~~~ <script type="text/javascript"> document.write("I love JavaScript！"); //內容用""括起來，""里的內容直接輸出。 </script> ~~~ **第二種:通過變量，輸出內容** ~~~ <script type="text/javascript"> var mystr="hello world!"; document.write(mystr); //直接寫變量名，輸出變量存儲的內容。 </script> ~~~ **第三種:輸出多項內容，內容之間用+號連接。** ~~~ <script type="text/javascript"> var mystr="hello"; document.write(mystr+"I love JavaScript"); //多項內容之間用+號連接 </script> ~~~ **第四種:輸出HTML標簽，并起作用，標簽使用""括起來。** ~~~ <script type="text/javascript"> var mystr="hello"; document.write(mystr+"<br>");//輸出hello后，輸出一個換行符 document.write("JavaScript"); </script> ~~~ * * * * * **JS中如何輸出空格** 在寫JS代碼的時候，大家可以會發現這樣現象: ~~~ document.write(" 1 2 3 "); ~~~ 結果: 1 2 3 無論在輸出的內容中什么位置有多少個空格，顯示的結果好像只有一個空格。這是因為瀏覽器顯示機制，對手動敲入的空格，將連續多個空格顯示成1個空格。解決方法: 1. 使用輸出html標簽 來解決 ~~~ document.write("  "+"1"+"    "+"23"); ~~~ 結果: 1 23 2. 使用CSS樣式來解決 ~~~ document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>"); ~~~ 結果: 1 2 3 在輸出時添加“white-space:pre;”樣式屬性。這個樣式表示"空白會被瀏覽器保留"