近期遇到比較麻煩的問題”非同步”問題，像是form submit之前不能確保一定完成執行，相對需要使用所謂的sleep相關作法，一開始以為可以成功結果一觸發事件就會submit 事件…。 停止事件JavaScript事件，最常用的是onclick、onchange之類，本身事件中可以呼叫出event 事件。event 事件會紀錄著事件觸發的狀態。 event.preventDefault()這做法可以延遲提交內容，如果用return false 會讓他失效，比較有效方式可以使用這個，先讓他把事件暫停加入我們想要的功能即可。目前遇到非同步時候最有效的做法。 123456789$('form').submit((event)=>{ let form = this; event.preventDefault(); setTimeout(()=>{ form.submit(); }, 1000);}) 測試範例12345678$('button').click((event)=&g ...

參數（Param）什麼是參數(parameters)要了解arguments之前，我們必須要先了解什麼是參數(parameter)。參數其實就是我們會帶入函式的變數，以下面程式的例子來說，”phone”、”food”、”job”，就是我們在執行函式的時候可以任意填入的參數。不給任何參數值還是可以執行該函式。 123456789function MyFavorite (phone ,food ,job){ console.log({ phone : phone, food : food, job : job });} Param()序列化一個key/value對象，該序列化值可以進行AJAX請求時在URL查詢字串中使用。 参数 描述 object 要進行序列化的數值或對象。 traditional 規定是否使用傳統的方式淺層進行序列化（参數序列化）。 使用方式1jQuery.param(object,traditional) 以下範例執行結果width= ...

定時器（timer）定時器在javascript 當中會不知道如何處理定時問題。 不少人會因為要理解使用 Javascript 如何計數相當懊惱，這邊先簡單介紹兩個function熟悉這兩個定義。 setTimeout vs setInterval這兩個function 功能上有不相同問題，兩種function定義如下。 setTimeout : 用於在指定的毫秒數後呼叫函式或計算表示式 - (延遲) setInterval : 在播放動畫的時，每隔一定時間就呼叫函式，方法或物件 - (週期) setTimeouttimeout 目前是程式界最常看到的詞，定義上有延遲效果，相對可以使用在時間範圍，後面用AJAX說明。 下方範例是透過 setTimeout 指定一段程式碼或函式在多少毫秒(ms)後執行，並回傳此定時器的編號。可以透過 clearTimeout 取消程式碼的執行。例如： 12345678910// 函式會將第一個參數字串使用eval轉換為可執行之程式碼// 三秒後在 console 印出 "test123"setTimeout('cons ...

正規表示式是最常見的一個功能，不論是字串過濾、轉換、判斷相當實用。這篇使用JS方式使用，後續如果有空就會撰寫其他版本的寫法。 JS 正規表示式使用工具本篇使用方式是大家都可以使用的DevTools，如果不知道這東西可以點開瀏覽器並按下F12。 第一次發現視窗太小，可以參考下方圖片。 開始使用使用方式是需要選擇主控台即可，其餘的先暫時不理會。 初始化初始化方式可使用下面兩種寫法，一種前後加入斜線就可以達成效果。 12let re = /Hello/; 1let reg = new RegExp('Hello world in JavaScript'); text、exec、search 使用方式text 測試字串是否有府和字串，回傳方式會是boolean。以下測試可以使用 /i：不區分大小寫，/g：比對字串所有位置 12let re = /Hello/i;re.test('hello'); //true 12let re = /Hello/g;re.test('hello'); //false exec 與test ...

這裡主要紀錄使用規則，後續補上使用說明。 正規表示式正規表示法（英語：Regular Expression，常簡寫為regex、regexp或RE），又稱正規表達式、正規表示式、規則運算式、常規表示法，是電腦科學的一個概念。正規表示式使用單個字串來描述、符合一系列符合某個句法規則的字串。在很多文字編輯器裡，正則表達式通常被用來檢索、替換那些符合某個模式的文字。 正規表達式是被用來匹配字串中字元組合的模式。在 JavaScript 中，正規表達式也是物件，這些模式在 RegExp 的 exec (en-US) 和 test (en-US) 方法中，以及 String 的 match、replace、search (en-US)、split (en-US) 等方法中被運用。 中介字元（Metacharacters） 中介字元 說明 範例 說明 [] 字元的集合。 [a-m] a~m之間的小寫英文字 \ 發出特殊序列的信號（也可以用於轉義特殊字符）。 \d 只要數字 . 除了新行符號外的任意字元。 he…o he字串後接著兩個字元，然後接著是o ^ 字串以此為開頭。 ^ ...

近期看到 JavaScript 中，有很多人使用 typeof 讓我想要玩玩看 typeof 是什麼特性。typeof 使用範圍常常是在 if 當中使用，讓我們直接實作typeof吧! typeof 簡介一、使用方式typeof 是一個 運算子(operator)。使用時機是查看 value 是什麼型態，也能把它當成除錯的(typeof)關鍵詞。 1typeof operand 二、文件說明以下為 MDN Web typeof operator result 說明。 使用 typeof看範例可以發現使用難易度不大。這邊範例我使用 var 變數，有用過JavaScript都知道，var是非常難控管常常會有過不是自己想要的結果。從下方範例 str 我給它初始賦值為 “”，想必知道 result 為 string 。 12var str ="";console.log(typeof str); // string 範例是明確給予初始賦值。當如果沒有給予初始賦值情況如下: 12var str;console.log(typeof str); // undefined ...

近期整理公司的 JavaScript 發現很多人使用著直接抓取 val()，繼上一篇提到 typeof 後，我又馬上做出 serialize() 章節，希望大家只要是全讀範圍的 input 請使用 serialize() 減少 undefined問題。 serialize()方法簡單來說是一種序列化，目的是為了將input 、select 、textarea等輸入框轉成序列化方式。 序列化序列化是將物件狀態轉換為可保存或可傳輸格式的形式。[ps : 下次章節會詳細介紹 序列化 VS 反序列化] 檢視 $(‘form’).serialize() 內容1234$('#submit').click(function(){ let form = $('form').serialize(); console.log(form);// name=john&old=21&date=2021/12/11}) 使用範例簡單創建幾個input值以及form，如果有強迫症請自行排版。清楚看到這是我們平常讓User去 ...

前陣子，同事需要做一個能在Url判斷是否能連上或是存在的網址，才進行轉頁面。因此我們直接來實作有幾種方式可以知道已存在網址或是不存在。 遠端資料方法JavaScript 中可以使用 XMLHttpRequest 的方法。 XMLHttpRequestJavaScript 沒有jquery 使用，會如同下方處理方式。 針對[url]變數舉得網址，load中會取得status方式，算是很久的寫法。 備註 : (這部分可以寫成 ajax 方式，如果遇到 CORS 之後章節會在細說。) 123456789let url = 'https://randomuser.me/api/';var req = new XMLHttpRequest();req.open('get', url, false);req.onload = function () { let $div = document.querySelector('#response-result'); $div.textContent += 'DONE ...

Blog 目前已經經營快要過完半年，近期發現Google 搜尋引擎找不到我的Blog，原本以為Github Pages 會加入在搜尋引擎當中，測試下來結論是沒有出現。目前想到原因是 SEO 無法辨認出網站，於是，目前得知每個Browser會有搜尋引擎運算，如果沒有出現可能要留意了。 Google Search ConsoleGoogle Search Console 是 Google 提供監控、維持網站在 Google 搜尋結果中的排名，並排解相關問題。網站上未申請 Search Console 還是有機會在Google 排名當中，如果要改善SEO 就需要使用。 hexo-generator-sitemap這個Plugin 是為了產生 Sitemap.xml 使用，需要加入在_config.yml設定檔。 123sitemap path: - sitemap.xml sitemap 網站地圖Google Search 搜尋引擎有兩種模式。第一種搜尋引擎自己抓取、第二種使用Sitemap 讓搜尋引擎提早發現哪些頁面是被收錄。Sitemap 主要用意是收錄、存取Google引擎當 ...

使用 Google Search ConsoleGoogle Search Console 近期有新增[網域]資源類型，因為我們是使用 Github Pages 所以要使用 [網址前置字元] 來設定 。 驗證擁有權部分只需要將它提供的載點放入網在中即可。 Sitemap上一篇有簡單帶過 Sitemap 使用方式。這邊初始使用時候會使用上 XML Sitemap Online，可以快速鍵至到 Github 到上面。接下來，放置root底下路徑並等待Github Pages 上去到頁面當中。 以上準備完成就只要加入剛才的 sitemap.xml 即可。 網址審查網址審查功能主要是單頁驗證，意思是sitemap 是讓所有網站可以被 Google 搜尋得到，如果沒有編入索引內容當中是沒辦法查詢到這個內容，這裡可以使用[網址審查]排除這問題。 網址審查部分比較特別地方，需要由 Google 判定這個網址是否符合網址規範才會加入成功，第一次驗證可能需要等到明天才會達到效果。 結論Google Search Console 有這兩種功能可以快速加入到Google Search 裡面，如果使用[網址 ...