Callback function - 回呼函式是指能藉由參數（argument）通往另一個函式的函式。它會在外部函式內調用、以完成某些事情。 使用種類一般使用function開發常見使用個別function去做執行動作。 12345678910A = () => { console.log('這是 A functions');}B = () => { console.log('這是 B functions');}A();B(); B function 成為 A function 的參數這邊是將參數設為call，讓 B function 填的位置。這樣就可以達成簡易版本的callback。 123456789A=(call)=>{ console.log('這是function A'); call();}B=()=>{ console.log('這是function B'); ...

什麼是 AJAX ？AJAX 是「Asynchronous JavaScript and XML」（非同步的 JavaScript 與 XML 技術）的縮寫，簡單說就是網頁不用重新整理，就能即時地透過瀏覽器去跟伺服器溝通，撈出資料。 Asynchronous：非同步 JavaScript：使用的程式語言 XML：Client 與 Server 交換資料用的資料與方法，近年由於 JSON 等格式的流行，使用 Ajax 處理的資料並不限於 XML。 同步請求 v.s. 非同步請求接著讓我們引入客戶端與伺服器端的概念，來看看「同步請求」和「非同步請求」的對比： 同步請求 (Synchronous request)： 客戶端 (client) 對伺服器端 (server) 送出 request ，並且在收到伺服器端的 response 之後才會繼續下一步的動作，等待的期間無法處理其他事情。這個作法並不理想，因為通常伺服器端的運算速度比本地電腦慢上好幾倍。 非同步請求 (Asynchronous request)：客戶端 (client) 對伺服器端 (server) 送出 reques ...

近期遇到比較麻煩的問題”非同步”問題，像是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 ...