09JavaScript函數

来源:https://www.cnblogs.com/lmyupupblogs/archive/2019/01/14/10266772.html
-Advertisement-
Play Games

函數是由事件驅動的或者當它被調用時執行的可重覆使用的代碼塊。 實例1: 效果:通過點擊按鈕“點我”,會彈出"Hello World!"的提示框! 1.JavaScript 基本函數語法 函數就是包裹在花括弧中的代碼塊,前面使用了關鍵詞 function: 當調用該函數時,會執行函數內的代碼。 可以在 ...


函數是由事件驅動的或者當它被調用時執行的可重覆使用的代碼塊。

實例1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例1</title>
<script>
function myFunction()
{
    alert("Hello World!");
}
</script>
</head>
 
<body>
<button onclick="myFunction()">點我</button>
</body>
</html>

效果:通過點擊按鈕“點我”,會彈出"Hello World!"的提示框!

1.JavaScript 基本函數語法

函數就是包裹在花括弧中的代碼塊,前面使用了關鍵詞 function:

function functionname()
{
    // 執行代碼
}

當調用該函數時,會執行函數內的代碼。

可以在某事件發生時直接調用函數(比如當用戶點擊按鈕時),並且可由 JavaScript 在任何位置進行調用。

註:JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的,並且必須以與函數名稱相同的大小寫來調用函數。

2.調用帶參數的函數

在調用函數時,我們可以向其傳遞值,這些值被稱為參數。

這些參數可以在函數中使用。

您可以發送任意多的參數,由逗號 (,) 分隔:

myFunction(argument1,argument2)

當您聲明函數時,請把參數作為變數來聲明:

function myFunction(var1,var2)
{
//代碼
}

變數和參數必須以一致的順序出現。第一個變數就是第一個被傳遞的參數的給定的值,以此類推。

實例:

 1 <!DOCTYPE html>
 2 <html>    
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>Yubaba</title> 
 6 </head>
 7 <body>
 8 
 9 <p>點擊這個按鈕,來調用帶參數的函數。</p>
10 <button onclick="myFunction('Harry Potter','Wizard')">點擊這裡</button>
11 <script>
12 function myFunction(name,job){
13     alert("Welcome " + name + ", the " + job);
14 }
15 </script>
16 
17 </body>
18 </html>

函數很靈活,您可以使用不同的參數來調用該函數,這樣就會給出不同的消息:

實例:

 1 <!DOCTYPE html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>菜鳥教程(runoob.com)</title> 
 6 </head>
 7 <body>
 8 
 9 <p>請點擊其中的一個按鈕,來調用帶參數的函數。</p>
10 <button onclick="myFunction('Harry Potter','Wizard')">點擊按鈕1</button>
11 <button onclick="myFunction('Bob','Builder')">點擊按鈕2</button>
12 <script>
13 function myFunction(name,job)
14 {
15     alert("Welcome " + name + ", the " + job);
16 }
17 </script>
18 
19 </body>
20 </html>

上面的函數點擊按鈕1會彈出Welcome Harry Potter,Wizard。

上面的函數點擊鈕2會彈出Welcome Bob,Builder。

3.帶有返回值的函數

有時,我們會希望函數將值返回調用它的地方。

通過使用 return 語句就可以實現。

在使用 return 語句時,函數會停止執行,並返回指定的值。

function myFunction()
{
    var x=5;
    return x;
}

上面的函數會返回值 5。

實例:

 1 <!DOCTYPE html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>Yubaba</title> 
 6 </head>
 7 <body>
 8 
 9 <p>本例調用的函數會執行一個計算,然後返回結果:</p>
10 <p id="demo"></p>
11 <script>
12 function myFunction(a,b){
13     return a*b;
14 }
15 document.getElementById("demo").innerHTML=myFunction(5,3);
16 </script>
17 
18 </body>
19 </html>

輸出的結果是15.

如果僅僅希望退出函數時 ,也可使用 return 語句。返回值是可選的:

1 //如果 a 大於 b,則上面的代碼將退出函數,並不會計算 a 和 b 的總和
2 function myFunction(a,b)
3 {
4     if (a>b)
5     {
6         return;
7     }
8     x=a+b
9 }

4.局部 JavaScript 變數

在 JavaScript 函數內部聲明的變數(使用 var)是局部變數,所以只能在函數內部訪問它。(該變數的作用域是局部的)。

我們可以在不同的函數中使用名稱相同的局部變數,因為只有聲明過該變數的函數才能識別出該變數。

只要函數運行完畢,本地變數就會被刪除。

5.全局 JavaScript 變數

在函數外聲明的變數是全局變數,網頁上的所有腳本和函數都能訪問它。

6.JavaScript 變數的生存期

JavaScript 變數的生命期從它們被聲明的時間開始。

局部變數會在函數運行以後被刪除。

全局變數會在頁面關閉後被刪除。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 網址收藏 : "React官網" , "React的Github" , "React的中文文檔" 1.react是什麼? React 起源於Facebook的內部項目,因為該公司對市場上所有的Javascript MVC框架都不滿意,決定自己寫一套,用來架設Instargm的網站。做完以後,發現很好 ...
  • Vue中使用樣式 綁定css 使用內聯樣式 </script> ...
  • vue-resource+iview上傳文件取消上傳 子組件: 父組件調用: ...
  • JavaScript 事件 HTML 事件是發生在 HTML 元素上的事情。 當在 HTML 頁面中使用 JavaScript 時, JavaScript 可以觸發這些事件。 1.HTML 事件 HTML 事件可以是瀏覽器行為,也可以是用戶行為。 以下是 HTML 事件的實例: HTML 頁面完成加 ...
  • LayaBox案例分享 小程式開篇(3) 不知不覺已經是上線小程式基礎篇的最後一篇了,今天我會把源碼發到本文的底部,有需要的可以拿去練手。 大家可以體驗一下,請掃碼: 這個頁面我們主要用到的知識有;佈局依然是WEUI;數據解析插件WxParse,下麵會額外分享一下WxParse的兩種用法;微信小程式 ...
  • 問題 父級元素不能被子元素內容撐開的解決辦法,父級元素沒有高度的解決辦法。 今天在寫網頁時遇到如下圖問題,解決問題後自己做個隨筆,希望幫到更多的學前端的童鞋! 問題圖片 問題描述 最外層的父級元素不能自適應高度-不能隨對象撐開沒有高度 當在對象內的盒子使用了float後,導致對象本身不能被撐開自適應 ...
  • 此插件是一位外國人寫的,官網API地址:https://photo-sphere-viewer.js.org/#methods 我只是記錄下我在使用此插件時用到的方法和相關屬性,以防以後忘記 1.按要求在頁面中引入文件後,使用以下方式調用,其它配置 jq選中的元素最後返回的是一個document,不 ...
  • 一.組件模板和樣式 類似於頁面,自定義組件擁有自己的 wxml 和模板 wxss 樣式。 1.組件模板 組件的寫法和頁面的寫法相同,組件模板與組件數據結合後生成的數節點, 將被插入到組件的引用位置。在組件模板中提供一個<slot> 節點,用於承載組件 引用時候提供的子節點。 例如: <view cl ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...