JS學習記錄（補充三）
阿新 • • 發佈：2017-08-04
bre protoc 漢堡 replace 修飾 同名 關鍵字 進入 length
函數
<html lang="en"> <head> <meta charset="UTF-8"> <title>函數</title> </head> <body> <button onclick="showName(‘ccy‘)">顯示陳傳印名字</button> <button onclick="showName(‘lzw‘)">顯示我的名字</button> <button onclick="showName(‘zxl‘)">顯示小亮的名字</button> <script> /*無參函數*/ /*function showName(){ /!*()包裹參數*!/ alert("lzw"); }*/ /*1：直接調用*/ // showName(); /*（）執行*/ /*2:和元素事件綁定*/ /*形式參數：定義函數時指定的參數，具體數據是由實際參數決定 * 實際參數：調用函數的時候指定的參數，實參的值會影響形式參數*/ /*有參函數 在函數中的參數為“形式參數”*/ function showName(name) { alert(name); }</script> </body> </html>
結果圖：
調用有（無）參函數
<html lang="en"> <head> <meta charset="UTF-8"> <title>調用有（無）參函數</title> </head> <body> <input name="bth" type="button" value="顯示HelloWord" onclick="showHello(prompt(‘顯示HelloWord的次數：‘))"> </body> <script> function showHello(count) {for(i = 1;i <= count; i ++){ document.write("<h2>hello word</h2>"); } } </script> </html>
結果圖：
匿名函數
<html lang="en"> <head> <meta charset="UTF-8"> <title>匿名函數</title> </head> <body> </body> <script> /*匿名函數用變量：下列中的“show”接收。變量名稱+（）可以讓函數執行*/ var show= function () { alert("1111"); }; show(); /*匿名函數的自調用*/ (function () { alert("我是匿名函數!") })(); </script> </html>
結果圖：
return關鍵字
<html lang="en"> <head> <meta charset="UTF-8"> <title>return關鍵字</title> </head> <body> </body> <script> function calc(num1, num2, c) { switch (c) { case "+": result = num1 + num2; break; case "-": result = num1 - num2; break; case "*": result = num1 * num2; break; case "/": result = num1 / num2; break; } return result; } var r = calc(2, 3, "*"); alert(r); </script> </html>
結果圖：
Arguments：數組對象，用於保存函數的參數
<html lang="en"> <head> <meta charset="UTF-8"> <title>Arguments：數組對象，用於保存函數的參數</title> </head> <body> </body> <script> /*在實參個數不確定的時候，可以省略形參，在函數體內部使用arguments * arguments是一個數組，裏面包含了調用函數調用的所有實參！*/ function calc() { var result = 0; var length = arguments.length; if (length == 2) { /*傳遞的參數為兩個*/ result = arguments[0] + arguments[1]; } else if (length == 3) { /*傳遞的參數為三個*/ switch (arguments[2]) { case "+": result = arguments[0] + arguments[1]; break; case "-": result = arguments[0] - arguments[1]; break; case "*": result = arguments[0] * arguments[1]; break; case "/": result = arguments[0] / arguments[1]; break; } } return result; } // var result2 = calc(10, 6); /*參數有兩個時默認為加法*/ var result2 = calc(1, 6, "*"); /*乘法*/ alert(result2); </script> </html>
結果圖：
callee屬性
<html lang="en"> <head> <meta charset="UTF-8"> <title>callee屬性</title> </head> <body> </body> <script> function show() { /*arguments.callee屬性只想函數本身。 * 可以用於遞歸*/ console.log(arguments.callee); } show("lzw"); /*1+2+3+4+5+6+7+8+9+10*/ var sum = 0; function calc(num) { sum += num; num ++; if (num <= 10){ arguments.callee(num); } } calc(1); alert(sum); </script> </html>
結果圖：
this
<html lang="en"> <head> <meta charset="UTF-8"> <title>this</title> </head> <body> </body> <script> var zhangsan = { name:"zhangsan", age:"26", height:"182", say:function () { alert(zhangsan.name); console.log(this); }, eat:function(){ alert("漢堡!") } }; zhangsan.say(); /*function show() { alert(this); } show();*/ </script> </html>
結果圖：
程序調試
<html lang="en"> <head> <meta charset="UTF-8"> <title>程序調試</title> </head> <body> </body> <script> /*F10:代碼一行一行執行，遇到代碼塊，一步執行完畢 * F11：代碼一行一行執行，遇到代碼塊，進入代碼塊內部 * F12：如果代碼運行在代碼內部，跳出代碼塊*/ function showHello() { alert("Hello1"); alert("Hello2"); alert("Hello3"); alert("Hello4"); alert("Hello5"); } alert("開始輸出Hello"); showHello(); alert("輸出Hello結束"); </script> </html>
結果圖：
先輸出“開始輸出Hello，之後Hello1~Hello5，最後Hello結束”
全局，局部變量
<html lang="en"> <head> <meta charset="UTF-8"> <title>全局，局部變量</title> </head> <body> </body> <script> /*全局變量*/ // var num = 10; var num = 5; function calc1() { /*局部變量*/ // var num = 10; /*全局變量：沒有用var修飾的變量，會一層一層的往上找。 * 如果找到同名變量，就進行賦值或者是覆蓋。 * 如果到最後都沒有找到同名變量，就聲明一個同名全局變量*/ num = 10; alert(num + 15); } function calc2() { alert(num + 20); } calc1(); calc2(); </script> </html>
結果圖：
Screen
<html lang="en"> <head> <meta charset="UTF-8"> <title>Screen</title> </head> <body> </body> <script> console.log(screen.width); console.log(screen.height); console.log(screen.availWidth); console.log(screen.availHeight); </script> </html>
結果圖：
Location
<html lang="en"> <head> <meta charset="UTF-8"> <title>Location</title> </head> <body> <button onclick="assign()">加載新頁面</button> <button onclick="replace()">替換頁面</button> <button onclick="reload1()">刷新當前頁面</button> <button onclick="reload2()">徹底刷新當前頁面</button> </body> <script> function assign() { /*可以返回老頁面*/ location.assign("http://www.baidu.com"); } function replace() { /*不能返回老頁面*/ location.replace("http://www.baidu.com"); } function reload1() { location.reload(); } function reload2() { location.reload(true); } </script> <!--<script> console.log(location.href);/*完整的url*/ console.log(location.protocol);/*協議*/ console.log(location.port);/*端口號*/ console.log(location.hostname);/*主機名稱*/ console.log(location.pathname);/*路徑名稱*/ console.log(location.search);/*？後的數據部分*/ </script>--> </html>
結果圖：
JS學習記錄（補充三）