發表文章

目前顯示的是有「網頁前端開發教學」標籤的文章

JavaScript初學者的入門天地!(19)方法

圖片
JavaScript中的"方法(Method)"也是函式?它的語法又該如何使用? 方法 (Method) JavaScript 中的「方法 (Method)」也是函式(Function)的一種,但與之前介紹的「函式(Function)」的差別是,「方法 (Method)」是被當成物件屬性來存取的。 JavaScript 「方法 (Method)」的語法如下: method名稱 = function() { 此處為要執行的代碼 } 快來使用以下語法,試試看能否順利將「方法 (Method)」叫出來: 物件名稱.method名稱() 方法 (Method) 是一種函數,屬於一個物件。可以使用 this 關鍵字引用之。 this 關鍵字在此用來組為引用當前物件,這意味著 前端工程師 可以使用它來存取物件的屬性和方法。 定義方法 (Method) ,需在函式建構式內完成,範例如下: See the Pen Javascript19-method by Tedutw ( @Tedutw ) on CodePen . 在上述 JavaScript 範例,我們為新的 animal 物件定義了一個名為「babyName」的方法 (Method)。該方法 (Method)是一個函數,也取用參數名稱「name」,並將它分配給物件的「name」屬性。this.name 是指該物件的名稱屬性。而「babyName」方法將物件的「name」屬性更改為其參數。 除了上述方法, 前端工程師 還可以在 函式建構式 之外定義函式,並將該函式與其物件相連。範例如下: See the Pen Javascript19-method-2 by Tedutw ( @Tedutw ) on CodePen . 延伸閱讀文章: SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢! 44歲媽咪順利轉職網頁設計師, 家庭事業都得意 AI 甩尾技術勝 Ken Block!方程式冠軍車手嘆:要失業了 日推AI手機具「防拍裸照」功能!再拍人工智慧就跟你媽告狀 JavaScript初學者的入門天地!(18)創造物件 學了JavaScript,同時將許多功能攬...

JavaScript初學者的入門天地!(18)創造物件

圖片
看完JavaScript的物件介紹之後,接著就要知道如何創建它們啦! 物件建構式(object constructor) 在上一課中,我們使用物件(object)初始值(initializer)語法來創建了一些 JavaScript 物件。 See the Pen JavaScript 17-Objects-1 by Tedutw ( @Tedutw ) on CodePen . 以上的 JavaScript 例子只建立了單一的「person」。 有時 前端工程師 也需要設定「物件種類(object type)」來創建單一種類的多個物件。 此時的 前端工程師 ,就可以使用「 物件建構式(object constructor) 」創建「物件種類(object type)」。你參考以下範例就知道啦: See the Pen JavaScript 18-Objects-Constructor-1 by Tedutw ( @Tedutw ) on CodePen . 上述的函式「function person」就是一個物件建構式(object constructor):接受 name、nationality、team、BikeNo 這 4 個參數,並且再指派這 4 個參數為物件的屬性。 上述例子的關鍵字「 this 」,就是指當前的物件。 這裡要注意:this 僅僅是一個關鍵字,並不具有變數的屬性(因為其值不能改變)。   創造物件 一旦有了物件建構式(object constructor)之後,就可以使用關鍵字「 new 」來創建同一種類型(type)的新物件(new objects) See the Pen JavaScript 18-Objects-Constructor-2 by Tedutw ( @Tedutw ) on CodePen . 在上述的例子,變數 b1 與 b2 皆為「biker」類型的新物件。這些物件含有多個屬性,這些屬性被分配給對應的物件值。例如 b1 的 "Valention Rossi" 屬性被分配給物件值 "name"。 上述例子中,b1 的物件名稱與屬性名稱分別列表如下: 1. 物件:n...

JavaScript初學者的入門天地!(17)物件介紹

圖片
今天要介紹JavaScript的物件(Objects),還不會的可別錯過! JavaScript 的變數(variable)可被比喻成:用來盛裝「值(value)」的容器。 而本篇介紹的「物件(objects)」,其實就是變數(variable)的一種,而且它還可以承裝多個值(value)。 一個物件(objects)可以被比喻成一張列有多個值(value)的清單,清單上每個物件的格式為「 屬性:屬性值 」。所有的屬性、屬性值均以冒號為區隔,範例與說明(「//」開頭的橫行為說明文字) 如以下所示: See the Pen JavaScript 17-Objects-1 by Tedutw ( @Tedutw ) on CodePen . 結論: JavaScript 的物件 Objects 就像是容器,能裝多個「有名字」的值。   物件屬性(object property) 在 JavaScript 中,要存取物件的屬性(object property),有兩種寫法: 1. 物件名.屬性名 2. 物件名['屬性名'] 以上兩種的範例與說明(「//」開頭的橫行為說明文字)如以下所示: See the Pen JavaScript 17-Objects-2 by Tedutw ( @Tedutw ) on CodePen . 順便一提, JavaScript  還有內建「length」屬性唷!如此一來,就可以計算出屬性名稱的字數了! 承上例,「length」屬性如下所示: See the Pen JavaScript 17-Objects-3 by Tedutw ( @Tedutw ) on CodePen .   物件方法(object method) JavaScript 中的物件方法(object method)是一個含有「函式定義( function definition)」的屬性,存取物件方法(object method)的寫法如以下所示: 物件名.方法名 大家都知道, document.write() 會顯示資料的內容,這個 write() 函式就是物件「 document 」的方法。 「docume...

JavaScript初學者的入門天地!(16)訊息框

圖片
說到JavaScript的訊息框,你知道其實總共有三種嗎?還不熟悉的,還不趕快看下去! JavaScript 提供三種訊息框:alert、confirm、prompt,介紹如下: Alert警告提示框 當要確保信息傳遞給用戶時,就可以使用 Alert 警告提示框。 JavaScript 的訊息框提供了一個「確定」按鈕,讓使用者關閉該訊息框後才可以繼續進行操作。 Alert 警告提示框採用單個參數,即彈出框中顯示的文字,請看以下例子: alert("Do you really want to leave this page?"); prompt提示訊息框 JavaScript 的 prompt 提示訊息框用於讓用戶在進入頁面之前,必須先輸入訊息。 當 prompt 提示訊息框跳出時,用戶在輸入訊息後必須點擊「確定」或「取消」才能繼續。 如果用戶點擊「確定」,該框將顯示使用者輸入的訊息如果用戶單擊「取消」,則顯示「null」 如下面的例子,當使用者進入網頁時,網頁就會跳出一個 prompt 提示訊息框,訊息框上顯示「你今年幾歲?」,然後讓使用者輸入數字。若使用者輸入歲數並且按下「確定」後,訊息框將會顯示「你今年_歲」;若使用者沒有輸入訊息或是按「取消」,則顯示「你今年null歲」。 // result = prompt(確認訊息框顯示問題); let age = prompt('你今年幾算?'); alert(`你今年 ${age} 歲!`); // 你今年_歲! confirm確認訊息框 JavaScript 的 confirm 確認訊息框通常用於讓用戶驗證或接受某些內容。 彈出confirm確認訊息框時,用戶必須點擊「確定」或「取消」才能繼續。 如果用戶單擊「確定」,則該框將回傳 true。如果 用戶單擊「取消」,則該框將回傳 false。 如下例子: 當使用者進入網頁時,網頁就會跳出一個 confirm 確認訊息框,訊息框上顯示「請問你確定要離開此頁嗎?」,接著讓使用者選擇輸入「確定」或「取消」。 若使用者輸入「確定」後,訊息框將會顯示「感謝您的造訪,再見!」 若使用者沒有輸入訊息或是按「取消」,頁面則會顯示「感謝您選...

JavaScript初學者的入門天地!(15)函式回傳

圖片
將JavaScript的函式回傳是常遇到的事~但如何順利進行?用這招就對啦! 一個 JavaScript 函式(function)可以選擇使用 return 語句,讓 函式 回傳結果。當你進行到需要結果的計算時,此語句可說是非常有用! 而當 JavaScript 執行到 return 語句時, 函式 則會停止執行。 return 語句可用來回傳結果。如下例,對兩個數值 x,y 進行運算後回傳結果: See the Pen JavaScript15-theReturnStatement by Tedutw ( @Tedutw ) on CodePen . 如果你不從函式回傳任何內容,它將回傳為 undefined。 例如,我們將上述的例子中,「return a * b;」改為「return;」,則結果如下面所示: See the Pen JavaScript15-theReturnStatement-1 by Tedutw ( @Tedutw ) on CodePen . return 語句要寫在函式定義的最後方,另一個 return 語句的範例如下: See the Pen JavaScript15-theReturnStatement-2 by Tedutw ( @Tedutw ) on CodePen . 延伸閱讀文章: JavaScript初學者的入門天地!(12)使用者定義函式 JavaScript初學者的入門天地!(13)函式中的參數 JavaScript初學者的入門天地!(14)函式中使用多參數 履歷還不夠漂亮嗎? 快去報名Java,UI課程等等,為自己寫一份完美履歷吧!! 權威指南說:Java課程是一生必學的事!你學會了嗎?  再不學Java課程就落伍了!不要懷疑!它是能改變你生活的仙丹! 美國NASDAQ上市公司、外商IT教育培訓企業 2天考取Google Ads證照!新手廣告投放攻略 擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師 44歲媽咪順利轉職網頁設計師, 家庭事業都得意 零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAd...

JavaScript初學者的入門天地!(14)函式中使用多參數

圖片
相信你對JavaScript的函式和其參數不陌生,今天要教你如何在當中使用多重函式! 函式中使用多重參數 在上一篇關於 JavaScript 的文章「 函式中的參數(Parameters) 」中,介紹了函式中的參數用法。而本篇 JavaScript 教學則介紹在 函式 (function)中置入多個參數的方法。 一個函式中可以使用兩個以上的參數,參數間以半形的逗點「,」隔開。例如名為「myFunc」的函式中置入了三個參數,其寫法如下: function myFunc(x,y,z) { //這裡寫上要執行的程式代碼,定義這個參數。 } 這些參數被使用於函式的定義中,關於寫法,請看以下範例: function sayAge(name,age){ document.write(name+" is "+age+" years old.") } 當你在宣告上述的「sayAge」函式時,就在小括號中寫入兩個參數的值(即為「引數 arguments」)。 兩個引數必須依照參數的順序來寫,請參考以下範例: See the Pen JavaScript14--function multiple Parameters by Tedutw ( @Tedutw ) on CodePen . 另一個三個參數的範例如下: See the Pen JavaScript14--function multiple Parameters-2 by Tedutw ( @Tedutw ) on CodePen . 假如你宣告函式之後,當你所輸入的引數數目小於參數時,則缺少的引數就被設置為「undefined」。 如下例中,我們定義了三個參數,但是只輸入了兩個引數,則第三個引數就會自動被設置為「undefined」。 See the Pen JavaScript14--function multiple Parameters-3 by Tedutw ( @Tedutw ) on CodePen . 延伸閱讀文章: JavaScript初學者的入門天地!(12)使用者定義函式 JavaScript初學者的入門天地!(13)函式中的參數...