filter函數特性： 遍歷每個元素，回傳 true 時，目前的值會保留在陣列內，這會回傳一個新陣列，而不是修改原本的陣列。 原理 當input輸入文字時觸發onChenge事件，event.target.value值存入this.state.search，再利用this.state.search使用filter()回圈過濾data內的資料。 程式碼 class FilteredList extends React.Component{ constructor(props){ super(props) this.state = {...
解決非同步使用Javascript callback() 回調函數
callback() 回調函數是一個作為參數傳遞給另一個函數的函數，然後在外部函數中調用該函數來完成某種例程或動作。 callback()簡單的例子： function greeting(name) { alert('Hello ' + name); } function processUserInput(callback) { var name = prompt('Please enter your name.'); callback(name); } processUserInput(greeting);...
Chart.js update() Ajax 更新表單資料方法範例
使用update()函數經過AJAX方法更新表單。 var ajaxCallLiveSubs = function(){ // endopoint var url = 'https://jsonplaceholder.typicode.com/posts/1'; var interval = 5000; var time = 0; // Live Subs Charts var ctx_live = document.getElementById("myChart"); var liveChart = new...
如何在react-router v4中將history.push傳遞參數params
this.props.history.push 在導航時，您可以將傳遞道具傳遞給歷史對象 this.props.history.push({ pathname: '/template', search: '?query=abc', state: { detail: response.data } }) Link 或類似的鏈接組件 My Link 訪問通過的道具 然後在用/template路由呈現的組件中，可以訪問通過的道具 this.props.location.state.detail...
CSS3 新單位寬度高度設定成vh vw – 80vh vs 80%
vh and vw vh:表示的是view height，也就是螢幕可視範圍高度的百分比 vw:表示的是view width，也就是螢幕可是範圍寬度的百分比 範例 比較80vh vs 80% css vh 設定視窗可見寬度高度%百分比，以下範例比較80vh與80%的不同之處。 See the Pen CSS 80vh vs 80% by saintjon (@saintjon) on...
JavaScript陣列與物件元素順序重新排序sort()、array 排序、object排序
陣列元素順序重新排序 sort() 排序函數 sort() 方法，預設為 ASCII 字符順序進行「升序排列」。 陣列.sort() var Brand = ["Oldsmobile", "Pontiac", "Buick", "Cadillac", "Holden", "Saturn", "GMC"]; Brand.sort() //輸出 Buick, Cadillac, GMC, Holden, Oldsmobile, Pontiac, Saturn 陣列.reverse()順序反轉 Brand.sort() //陣列重新排序...
簡單使用Chart.js網頁上畫圖表範例集-Javascript 圖表、jQuery圖表繪製
關於Chart.js Chart.js是一款彈性很高的圖表JavaScript library，支援八種常見的統計圖表類型，夠將圖表混合在一起使用，也支援動畫的效果，讓我們製作出來的圖表更加精美！ 範例一 格線顏色與多線條 var config = { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset',...
Javascript 取得每月分別有幾天本月(某月)的天數
使用方法 var curMonthDays = new Date(year,month,0).getDate(); 範例展示 Click the button to display 此月份有幾天. <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var d = new...
Javascript邏輯運算子
邏輯運算子 邏輯運算子 通常被用於布林(邏輯)值; 使用於 布林(邏輯)值時， 它們會回傳布林型態的值。 然而，&& 和 || 運算子實際上是回傳兩指定運算元之一，因此用於非布林型態值時，它可能會回傳一個非布林型態的值。 邏輯運算子將在下表中被詳細解釋。 Logical operators Operator Usage Description 邏輯 AND (&&) 運算式1 && 運算式2 假如 運算式1 可以被轉換成 false的話，回傳 運算式1; 否則，回傳 運算式2。...