[JavaScript]指定要素の指定イベント発火
triggerEvent(element, eventName){ const evt = new CustomEvent(eventName, {bubbles:true,cancelable:true}); return element.dispatchEvent(evt); }
triggerEvent(element, eventName){ const evt = new CustomEvent(eventName, {bubbles:true,cancelable:true}); return element.dispatchEvent(evt); }
isBrowserBack(){ const perfEntries = performance.getEntriesByType("navigation"); let result = false; perfEntries.forEach((perfEntry) => { if(perfEntry.type == 'back_forward'){ result = true; } }); return result; }
getCart(){ return new Promise((resolve,reject) => { const url = 'url'; fetch(url) .then((response)=>{ if (!response.ok) { throw new Error(); } return response.json(); }) .then((json)=>{ resolve(json); }) .catch((error)=>{ reject(error); }); }); } this.getCart() .then((json)=>{ }) .catch((error)=>{ });
loop: for(i=0;i<10;i++){ for(key in item.properties){ if(key === 'break'){ break loop; } } }
文字列から漢字抽出
const str = 'ひらがな小林カタカナ漢字'; const pattern = /(\p{scx=Han}+)/ug; const matches = str.match(pattern); console.log(matches);
出力
(2) ['小林', '漢字']
let sendData = { updates : {} }; this.deleteItems.forEach((item,index)=>{ sendData.updates[item.key] = 0; }); let options = { method : 'POST', credentials: 'same-origin', headers : { 'Content-Type': 'application/json' }, body : JSON.stringify(sendData) }; fetch(window.Shopify.routes.root+'cart/update.js',options) .then((response)=>{ if (!response.ok) { throw new Error(); } return response.json; }) .then((json)=>{ this.finishFetch(2); }) .catch((error)=>{ console.log(error); });
let sendData = { id : item.key, quantity : item.quantity, properties : {} }; item.properties.forEach((property,index)=>{ sendData.properties['プロパティ'+(index+1)] = property.value; }); let options = { method : 'POST', credentials : 'same-origin', headers : { 'Content-Type' : 'application/json' }, body : JSON.stringify(sendData) }; fetch(window.Shopify.routes.root+'cart/change.js',options) .then((response)=>{ if (!response.ok) { throw new Error(); } return response.json; }) .then((json)=>{ this.finishFetch(); }) .catch((error)=>{ console.log(error); });
Liquid(HTML)
国<select name="address[country]" {% if form.country != blank %}data-default-label="{{ form.country }}{% else %}data-default="Japan{% endif %}">{{ country_option_tags }}</select><br> 都道府県<select name="address[province]" data-default-label="{{ form.province }}"></select>
JavaScript
document.querySelectorAll('[name="address[country]"]').forEach((elm,index)=>{ elm.addEventListener('change',(e)=>{ onChangeCountry(e); }); }); onChangeCountry(e){ const option = e.target.querySelector('[value="'+e.target.value+'"]'); const provinceSelect = e.target.form.querySelector('[name="address[province]"]'); if(option && provinceSelect){ let options = []; const provinces = JSON.parse(option.dataset['provinces']); provinces.forEach((province,index)=>{ options.push('<option value="'+province[0]+'">'+province[1]+'</option>'); }); provinceSelect.innerHTML = options.join(''); } }
const options = { method : "HEAD" }; fetch(elm.href,options) .then((response)=>{ if (!response.ok) { throw new Error(); } return response; }) .then((response)=>{ const fileSize = response.headers.get("Content-Length"); if(fileSize) { console.log(fileSize); }else{ throw new Error(); } }) .catch((error)=>{ });
getRGBAByHex(hex,alpha){ if (hex.slice(0,1) == "#")hex = hex.slice(1) ; if (hex.length == 3)hex = hex.slice(0,1) + hex.slice(0,1) + hex.slice(1,2) + hex.slice(1,2) + hex.slice(2,3) + hex.slice(2,3); let rgb = [hex.slice(0,2),hex.slice(2,4),hex.slice(4,6)].map(function(str){ return parseInt(str,16); }); return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alpha})`; }