陣列相關方法2

Ref: JavaScript30 some()  確認有沒有人符合條件 給予條件→找出是否有一個人(或以上)符合條件。 //共用陣列資料 const people = [ { name: ‘Wes’, year: 1988 }, { name: ‘Kait’, year: 1986 }, { name: ‘Irv’, year: 1970 }, { name: ‘Lux’, year: 2015 } ]; 確認是否有人已滿19歳 /*****【方法一】function*************/ const isAdult1=people.some( function(person){ //getFullYear? const currentYear=new Date().getFullYear(); if(currentYear-person.year>=19){ return true; } } ); /*****【方法二】arrow function*******/ const isAdult2=people.some(person => […]

搜尋器

Reference: JavaScript 30 先備知識 fetch (功能類似ajax) nodeList 轉 array(Spread Operator) 陣列相關方法1 Regex:大小寫不敏感【i】、找出所有【g】、正規表達式 join()(陣列轉字串) 模板字符串 箭頭函數 範例 form.search-form input.search(type=’text’, placeholder=’City or State’) ul.suggestions li Filter for a city li or a state html box-sizing: border-box background: #ffc600 font-family: ‘helvetica neue’ font-size: 20px font-weight: 200 * box-sizing: inherit &:before, &:after box-sizing: inherit input width: 100% padding: 20px […]

regex【i】不區別大小寫

功能 讓字串不區分大小寫,也能通過正規表達式檢査。 應用實例:搜尋不用區分大小寫,也能找到同樣的内容。 類似的東西:regex【g】找出所有 範例 方法一【/i】 i代表 insensitive ,對大小寫不敏感。 const regex=/apple/i; const str1=”APPLE”; const str2=”Apple”; const str3=”apple”; str1.match(regex);//[“APPLE”] str2.match(regex);//[“Apple”] str3.match(regex);//[“apple”] //不論大小寫(或混用)都能通過驗證 方法二【new RegExp】 使用時機:需要檢査的字串不是固定値,而是變數時(像是使用者鍵入的搜尋字詞) 寫法跟【/i】不同,但是效果相同。 const regex=new RegExp(“apple”, “i”); const str1=”APPLE”; const str2=”Apple”; const str3=”apple”; str1.match(regex);//[“APPLE”] str2.match(regex);//[“Apple”] str3.match(regex);//[“apple”]

fetch

介紹 fetch,是ajax之外取得外部資料的一種方式 使用promise物件架構 補充:ajax 範例 取得圖片 img#img const moko=”https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/15355572_1410266889006372_4764767806658769471_n.jpg?oh=39e4da3e9a9956f349b6c701556544ff&oe=593B04D9″ fetch(moko) .then(blob => blob.blob()) .then(myb => img.src=URL.createObjectURL(myb)) //fetch發送請求 //使用blob獲得圖片的內容 //再從blob獲得URL,放到img的src之中 Display 取得JSON資料(有function的情況下) button#btn click me ul#ul const endpoints=”https://awiclass.monoame.com/api/command.php?type=get&name=tododata”; const tododata=[]; fetch(endpoints) .then(blob => blob.json()) .then(data => tododata.push(…data))//要用spread把nodeList轉成array function show (){ ul.innerHTML=tododata.map(place => `<li>${place.name}</li>`).join(“”);//join(“”)把陣列轉換成字串,並且將分隔取代為無 } btn.addEventListener(“click”, show) Display CODEPEN 取得JSON資料(無function的情況下) 沒有function的情況下,JS無法用內接陣列的方式,讀取外部URL的JSON。 因此,方法改寫如下, ul#ul const endpoints=”https://awiclass.monoame.com/api/command.php?type=get&name=tododata”; // const […]

jQuery AJAX

功能 不刷新頁面也能完成前後端的溝通。 HTML + PHP + MySQL :必須刷新頁面 HTMP + Ajax + PHP + MySQL:不必刷新頁面 以 Facebook 的按讚功能為例 使用者按讚→資料庫更新讚數→網頁顯示讚數+1 透過 Ajax 的輔助,這一連串的動作都可以不刷新網頁而達成。 使用者不必中斷滑到一半的閱讀體驗。 結構 form tag,使用 HTTP Method 引入 jQuery 準備處理資料庫溝通的 php 檔案,跟 HTML 放在同一個資料夾底下 準備好 MySQL 資料表 範例 前端 //HTTP Method form(method=”POST”) input(type=”text” placeholder=”email”) input(type=”password” placeholder=”password”) input(type=”submit”) p const email=document.querySelectorAll(“input”)[0]; const password=document.querySelectorAll(“input”)[1]; const submit=document.querySelectorAll(“input”)[2]; const […]