Event Bind HTML TAG
let eventBinding = () => {
this.clickBindHtmlIdTag("subjectType", this.changeSort);
};
let changeSort = () => {
console.log('changesort');
};
let actionBindId = (tagId, actionFunction) => {
let tagIdEvent = document.getElementById(tagId);
tagIdEvent != null ? tagIdEvent.addEventListener("input", actionFunction) : '';
};
let actionBindClass= (tagClass, actionFunction) => {
let tagHtmls = document.getElementsByClassName(tagClass);
Array.from(tagHtmls).forEach(tagHtml => {
tagHtml != null ? tagHtml.addEventListener("click", actionFunction) : '';
});
},
let valueBindId= (tagId, value) => {
let tagHtml = document.getElementById(tagId);
tagHtml != null ? tagHtml.innerHTML = value : '';
};
let valueBindClass= (tagId, value) => {
let tagHtmls = document.getElementsByClassName(tagId);
Array.from(tagHtmls).forEach(tagHtml => {
tagHtml != null ? tagHtml.innerHTML = value : '';
});
},
let setTagStyle = (e) => {
if (e) styleBind(e.currentTarget);
}
let styleBind = (tagElement) => {
let onTags = tagElement.parentNode.parentNode.children;
onTags.forEach(tag => {
tag.classList.remove('on')
});
tagElement.parentNode.classList.add('on');
};
SELECTBOX
object.forEach( (tag)=>{
if(tag){
let opt = document.createElement('option');
opt.value = tag;
opt.innerHTML = tag;
selectBox.appendChild(opt);
}
})
let selectBox = document.getElementById("selectBox");
let optionValue = selectBox.options[selectBox.selectedIndex].text;
if(selectBox.value){
consokle.log(optionValue);
}
GROUP BY WITH JSON
var groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
};
var groubedByTeam = groupBy(startData, 'SECTION')
groupByMONTHWEEKBySection : (jsonArr, sectionName)=>{
let tempArr = [];
let tempObj = {};
jsonArr.forEach(elem => {
if(elem.SECTION == sectionName){
let monthweek = elem.MONTHWEEK;
if (!tempObj[monthweek] ) {
tempObj[monthweek] =
{
"MONTHWEEK": monthweek, KEYWORD_CNT: 0
};
tempArr.push(tempObj[monthweek]);
};
tempObj[monthweek].KEYWORD_CNT += elem.KEYWORD_CNT;
}
}, {});
console.log(tempArr)
console.log('--------------')
return tempArr;
},
EventListener
sendEventBinding : function(){
let multiBtn = document.querySelectorAll('.multiBtn');
multiBtn.forEach(btn => {
btn.addEventListener('click',
function handleClick(event) {
for (const item of multiBtn) {
item.classList.remove('active');
}
btn.classList.add('active');
});
});
},
SWTICH CASE STRING
convertDayNameEngToKor : (day) =>
({
'Monday' : '월',
'Tuesday' : '화',
'Wednesday' : '수',
'Thursday' : '목',
'Friday' : '금',
'Saturday' : '토',
'Sunday' : '일'
})[day] ,
SWITCH CASE FUNCTION with Sort
let subjTypeTag = 'DESC'
let itemList = [{year:1 , smstrCd:1},{year:2 , smstrCd:2},{year:3 , smstrCd:3}] ;
let sortedList = {
'ASC': function (itemList) {
itemList.sort((a, b) => a.year < b.year ? -1 : a.year > b.year ? 1 : 0)
itemList.sort((a, b) => a.smstrCd < b.smstrCd ? -1 : a.smstrCd > b.smstrCd ? 1 : 0)
return itemList;
},
'DESC': function (itemList) {
itemList.sort((a, b) => a.year > b.year ? -1 : a.year < b.year ? 1 : 0)
itemList.sort((a, b) => a.smstrCd > b.smstrCd ? -1 : a.smstrCd < b.smstrCd ? 1 : 0)
return itemList;
},
};
itemList = sortedList[subjTypeTag](itemList);
console.log(itemList)
Check If Empty
let isEmpty = (value) => {
if( value == "" || value == null || value == undefined
|| (value != null && typeof value == "object" && !Object.keys(value).length) ){
return true
}else{
return false
}
};
SHOW TAG
showTagId : function(tagId){
let tagIdEvent = document.getElementById(tagId);
tagIdEvent ? tagIdEvent.style.display = "block" : '';
},
IS !ACTIVE
if(!selectedTag.classList.contains('active')){
console.log('isNotActive');
}
DEEP COPY OBJECT
let resultEach = structuredClone(DEFAULT_DATA);
Mouse Click Event
var mouseClick = function (elem) {
if(!elem) return;
var evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
var canceled = !elem.dispatchEvent(evt);
};
Show Hide If Class Exist
var showHideInputIfClassExist = (inputTag, elementClasses, className) =>{
if(!elementClasses) return;
elementClasses.forEach( (item) =>{
if(item.includes(className)){
if( inputTag != ''){
document.querySelector('.'+item).style.display = "inline-block";
}else{
document.querySelector('.'+item).style.display = "none";
}
};
});
}
Get Sunday of Current Week
getSundayOfCurrentWeek:()=>{
const today = new Date();
const first = today.getDate() - today.getDay() + 1;
const last = first + 6;
const sunday = new Date(today.setDate(last));
const year = sunday.getFullYear();
const month = sunday.getMonth() + 1;
const date = sunday.getDate();
let formatDate = `${year}-${month >= 10 ? month : '0' + month}-${date >= 10 ? date : '0' + date}`;
return formatDate;
}
Get Sunday of previous Week
getPreviousSunday:()=>{
const date = new Date();
const previousMonday = new Date();
previousMonday.setDate(date.getDate() - date.getDay());
const year = previousMonday.getFullYear().toString().substring(2);
const month = previousMonday.getMonth() + 1;
const dateF = previousMonday.getDate();
let formatDate = `${year}.${month >= 10 ? month : '0' + month}.${dateF >= 10 ? dateF : '0' + dateF}`;
return formatDate;
}
Use console.table()
출처
https://velog.io/@joilnam/%EB%8B%B9%EC%8B%A0%EC%9D%84-%EB%8D%94-%EB%82%98%EC%9D%80-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EB%A1%9C-%EB%A7%8C%EB%93%A4%EC%96%B4-%EC%A4%84-%EC%88%98-%EC%9E%88%EB%8A%94-8%EA%B0%80%EC%A7%80-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%8A%B8%EB%A6%AD