發表文章

目前顯示的是有「JavaScript教學」標籤的文章

基礎JavaScript教學課程~搞懂遞增與遞減運算子!

圖片
JavaScript 的基礎重點之一就屬遞增和遞減運算子了,今天讓我們一起輕鬆獲取它的相關知識!   目錄 遞增運算子(++) 遞減運算子(–) JavaScript  的兩組運算子「遞增(++)」與「遞減(–)」可以針對指定的數值進行「加1(遞增)」與「減 1(遞減)」的運算。   遞增運算子(++) 遞增運算子能對數值進行「加1(遞增)」的運算。當置於運算元前方,就會先執行運算,因此得到的值是遞增過的值;若配置於後方則是先取值後運算,會先得到運算元本身的值後才加 1。如以下例子:     var x = 10,y = 10;     var a = ++x,b = y++;     console.log(a,x);     console.log(b,y); 前置運算會先完成遞增運算後再設值。因此 x 完成遞增運算結果為 11 後,再設值給變數 a。因此 a 的值為 11、x 的值也為 11;而後置運算會先設值後再完成遞增運算。因此 y 會先設值給 b 原本的值 10,再完成遞增運算。因此 b 的值為 10、x 的值為 11。 遞減運算子(–) 遞減運算子能對數值進行「減1(遞減)」的運算。當置於運算元前方,就會先執行運算,因此得到的值是遞減過的值;若配置於後方則是先取值後運算,會先得到運算元本身的值後才進行遞減運算。如以下例子:     var x = 10,y = 10;     var a = --x,b = y--;     console.log(a,x);     console.log(b,y); 前置運算會先完成遞減運算後再設值。因此 x 完成遞減運算結果為 9 後,再設值給變數 a。因此 a 的值為 9、x 的值也為 9;而後置運算會先設值後再完成遞增運算。因此 y 會先設值給 b 原本的值 10,再完成遞增運算。因...

JavaScript初學者的入門天地!(21)陣列的方法與屬性

圖片
深入JavaScript的陣列處理技巧也是必要的,這次來學它的方法和屬性! 陣列(Arrays)-length 屬性 JavaScript 陣列(Arrays)擁有一些實用的內置屬性和方法,如 length 屬性,用以回傳一個陣列中元素的數量。 寫法如下所示: See the Pen JavaScript-Array-length-property by Tedutw ( @Tedutw ) on CodePen . 上述範例左側的原始碼,第一行的「courses」陣列有三個元素:HTML、CSS、JS,因此回傳數值為「3」;第四行的「courses1」陣列有四個元素:HTML、CSS、JS、JQuery,因此回傳數值為「4」   合併陣列(Combining Arrays)-concat () 方法 JavaScript 的 concat () 方法,是用來合併兩個或多個陣列。此方法不會改變原本的陣列,而是新增加另一個經過合併過的陣列後回傳。 See the Pen JavaScript-combining-Arrays by Tedutw ( @Tedutw ) on CodePen . 上述範例左側的原始碼,第一行為「c1」陣列回傳為「HTML,CSS」;第二行的「c2」陣列回傳為「JS,JQuery」;第三行就採用 concat () 方法來合併第一、第二行的 c1、c2 陣列,是為新陣列「c3」,其回傳值有四個元素「HTML,CSS,JS,JQuery」。 JavaScript 的陣列 (Arrays)教學在此告一個段落,請各位 前端工程師 和其他讀者不要忘記,務必將 前一章「陣列的介紹」 與本章再複習一次! 而 前端工程師 們可以開始期待啦!因為下回的 JavaScript 教學系列,我們將陸續介紹 Math Object 數學物件與 Date Object 日期物件等 JavaScript 原生物件! 延伸閱讀文章: JavaScript初學者的入門天地!(20)陣列 總整理:免費的java開發工具推薦! 關於JavaScript的變數命名規範,這篇讓你一目瞭然! JavaScript入門教學#18|創造JavaScript...

JavaScript初學者的入門天地!(20)陣列

圖片
JavaScript中的陣列到底有多重要?學完它,很多事就事半功倍啦! 陣列(Arrays) JavaScript 中的「陣列(Arrays)」,可被比喻成「可以一次承裝多個值的變數」。 大家應該都聽說過,一般的變數一次只能裝一個值,但陣列一次可裝多個變數! 例如,現在我們有三個課程名稱「HTML」、「CSS」、「JS」,就需要設立三個變數來承裝。原始碼如下所示: var course1 ="HTML"; var course2 ="CSS"; var course3 ="JS"; 但若是使用「陣列(Arrays)」,就可以把原始碼精簡成一行文,就像下面所示範的: var courses = new Array ("HTML", "CSS", "JS"); 語法解析:上述示範的代碼,是宣告名為「courses」的陣列。這個陣列包含三個值(或稱元素)。建立新陣列的寫法為「new Array(元素一,元素二,元素三)」 取出陣列的某一元素 陣列裡含這麼多元素,當我們要找出某個元素時,就需要把索引號碼寫在方括號內。要取出陣列中的第 X 個元素,語法為「陣列名稱[X-1]」(因為陣列元素的編號是從零開始,不是從一開始,所以第一個元素的索引號為「0」、第二個元素的索引編號為「1」,由此類推⋯⋯) 我們承接前一段「名稱為 courses 的陣列」的例子,假如今天我們要從 courses 陣列中取出「JS」,並且把「JS」改成「JQuery」,寫法如下: var courses = new Array("HTML", "CSS", "JS"); var course = courses[2]; // 取出第三個元素「JS」 courses[2] = "JQuery"; //將第三個元素名稱改成「JQuery」 See the Pen JavaScript-Array1 by Tedutw ( @Tedutw ) on CodePen . 若當我們輸入的索引數字,已經超過了陣列元素數目...

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變數命名規範還是霧煞煞?這篇是你的救星!

圖片
JavaScript變數命名規範,讓你一目瞭然的整理都在這了,快看下去! 正在從事 前端工程師 工作的朋友們,快來和小編看一看吧,希望本篇文章能夠對大家有所幫助! JavaScript變數命名規範: 只能由英語字母,數字,下劃線,美元符號$構成,並且不能以數字開頭 ,並且不能是JavaScript保留字。 以下提供給你,前端工程師一定要知道的 JavaScript 變數命名規範: 下列都是 非常正確 的變數命名: var haha = 250; var xixi = 300; var a1 = 400; var a2 = 400; var abc_123 = 400; var $ abc = 999; var $ o0_0o $ = 888; var $ = 1000; var _ = 2000; var ________ = 3000; 下列都是 錯誤 的命名: var a-1 = 1000; //不能有怪異符號 var a @ = 2000; //不能有怪異符號 var 2year = 3000; //不能以數字開頭 var a ¥ = 4000; //不能有怪異符號 var a *#$#$ @ = 5000; //不能有怪異符號 var a b = 300; //不能有空格 下列的單詞,叫做保留字,也就是說,補充當做變數名 abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 要注意的是,大寫字母都要是可以使用的,並且大小寫敏感。而且,最初A和a算是兩個變數喔! 1 var A = 250; 2 var a = 888; 延伸閱讀文章: SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢! 44歲媽咪順利轉職網頁設計師, 家庭事業都得...

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...