這裡主要紀錄使用規則，後續補上使用說明。 正規表示式正規表示法（英語：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 裡面，如果使用[網址 ...

JS 中 .min.js 和.js 檔案的區別一、.js和.min.js檔案分別是什麼.js是JavaScript 原始碼檔案， .min.js是壓縮版的js檔案。.min.js檔案經過壓縮，相對編譯前的js檔案體積較小，傳輸效率快。 防止窺視和竊取原始碼 經過編碼將變數和函式原命名改為毫無意義的命名，以防止他人窺視和竊取 js 原始碼 二、 .js 和.min.js檔案的優缺點 TYPE 優點 缺點 .js 可讀性較好，易於debug和更改 體積較大，傳輸時間長 .min.js 體積較小傳輸快, 原始碼防竊 可讀性差 三、 壓縮原理壓縮：刪除 js 程式碼中所有註釋、跳格符號、換行符號及無用的空格，從而壓縮 JS 檔案大小。混淆：經過編碼將變數和函式原命名改為毫無意義的命名，刪除無用程式碼，行內函數，等價語句替換等(以防止他人窺視和竊取原始碼)

前言近期整理一些文章，看到還有指引套件部分忘記處理，這邊大概簡述兩個比較常見的套件。以兩種套件來說各有好壞，使用指引套件必須要留意Css可能遇到z-index順序問題，如果是DriverJs部分可能需要注意css方面比較多一些…。 github 範例 [前端軍火庫]Intro.js - 把建好的UI直接變成說明文件 IntroJsIntroJs 是用在 html mark當中，設定上相當簡單、快速 。IntroJs 如果是商業用途可能要索取費用。 安裝 Github : git clone https://github.com/usablica/intro.js.git npm : npm install intro.js --save yarn : yarn add intro.js 使用方式依據IntroJs 使用方式，需要設定幾點。 順序 : data-step 內容 : data-intro 提示 : data-hint (必須要配合 introJs().addHints();處理。) 此套件會依據 step 順序呈現下一步提示，如果要使用”提示點”表示，可以使用 ...

前言許多前端工程師都有相關rebots使用經驗，為了增加 SEO 通常會使用robots，讓使用者可以快速查自己的網站，robots.txt 可以從各樣的網站可以看到。本篇會簡述rebots ，若需要細項說明可以請至下方點選查詢。 robots 簡介robots 是主要功用哪個頁面可以檢索、索引。使用方面會直接影響 SEO 。 何謂 SEO 搜尋引擎最佳化SEO(Search Engine Optimization)，透過搜尋引擎運作規則調整網站，提高網站相關搜尋引擎排名。搜尋引擎針對檢索(Crawl)、索引(Index)的網站資訊，進行演算法排序提供使用者查詢。 robots 使用方式robots 只需要使用 txt 撰寫，必須要留意要使用UTF-8編碼的文字檔。設定方式預設允許所有搜尋引擎檢索所有內容，有兩種做法。 不填入disallow內容12User-agent: *Disallow: allow 使用 /符號/ : root 根目錄，在這可以解釋從root開始都允許檢索所有檔案。 12User-agent: *Allow: / 檢測方式如果你要查詢網站是 ...

前言近期遇到很多UI介面 scrollbar 都不同樣式或是將 scrollbar 用消失減少版面佔住的機會。可以參考下方滾動條樣式，我再慢慢展示出效果來。 如何讓scrollbar出現第一次用網頁常常遇到 scrollbar 不知道怎樣叫出來，反而不斷跑版。網頁有分父(容器)層跟子(容器)層，當子層超過父層時候，可以使用 overflow。 以下範例 : 123456<body> <div class="container"> <div class="block-1"></div> <div class="block-2"></div> </div></body> 1234567891011121314151617.container{ width: 400px; height: 200px; margin-left: auto; margin-right: ...