분류 전체보기
-
javascript DOM style 조작하기JavaScript 2022. 4. 21. 10:49
옵션이름에 - 포함됐을 경우 (margin-top, overflow-x 등) : carmel식으로 작성 사용 예 document.getElementById('조작할 element id').style.overflow='auto'; document.getElementById('조작할 element id').style.overflowX='hidden'; 조작할 element.style.속성 = "값"; 으로 js에서 css를 조작할 수 있다. - Cannot read property 'style' of Null in JavaScript 뜰 경우: >>해당 element가 선언되기 전에 조작을 시도했을 수 있음. 이 경우, script조작을 element선언 부 이후에 작성해주면 된다.
-
팝업 호출 시 스크롤 맨 위로 이동시키기일하면서 익힌 것 2022. 4. 19. 09:28
document.getElementById("조작할 창 id").scrollTo(0,0);
-
dialog 열렸는지 여부 인식하기일하면서 익힌 것 2022. 4. 19. 09:26
현재 맡고 있는 페이지에서, 엔터키를 입력하면 자동으로 검색이 동작하도록 설정되어 있었다. 그런데, 해당 페이지에는 다른 팝업들도 존재하는데, 수정 요청이 들어온 게 다른 팝업에서 엔터를 입력했는데, 부모창에서 검색이 돌아가는 현상이다. 이를 해결하기 위해서는, 다른 팝업이 열렸을 때는 검색이 돌아가면 안된다. 하여 구글링을 하다가 괜찮은 걸 발견했다. let chkOnPopup = 0; //팝업 열림 인식 $(function () { $("#팝업이름").dialog({ open: function (event, ui) { chkOnPopup = 1; } }); }); //팝업닫힘 인식 $(function () { $("#팝업이름").dialog({ close: function (event, ui) { c..
-
Doit Vue.js입문 todolist 수정기능 추가하기VueJs공부 2022. 2. 12. 20:57
교재를 보면서 todoList를 만들어 보았다. 그런데, 교재에서는 수정기능을 따로 기재하지 않고, 각자 알아서 고민해보고 만들어 볼 기회를 주었다.. 하여, 직접 수정기능을 추가해보았다. 개선한 버전을 추가하였습니다. https://mhui123.tistory.com/65 app.vue LocalStorage와 javaScript의 array는 수정기능을 따로 제공하지 않으므로 직접 조작해주었다. 수정이 발생하는 부분이 List 마지막 부분인 경우는 그냥 그 부분만 제거하고 넣어주면 되지만, 그외 부분은 수정한 데이터를 그 자리에 넣어주어야 해서 index를 기준으로 작업을 구분해주었다. TodoList.vue chechkedItem(index)는 목록에서 체크부분을 클릭했을 때, app.vue의 sh..
-
10. chainning, Nullish CoalescingJavaScript 2021. 10. 3. 21:19
//Nullish Coalescing과 chaining을 사용하면 불필요한 if문을 없애 코드를 줄일 수 있다. const getValue = user => { return user.payment?.details?.value ?? "0"; // value가 있으면 value를, 해당하는 키값이 없다면 0을 리턴. } console.log(getValue({name:"John", payment:{details:{value: 15}}})); //15 console.log(getValue({name:"John", payment:{}})); //0
-
9.Object3JavaScript 2021. 10. 3. 20:40
변수를 객체로 묶기 const id = 1; const userName = "kim"; const obj = { id, userName } //{ id: 1, name: 'kim' } //디버깅 시 객체의 key value 확인하기 const getSum = (a, b) => { console.log({a, b}); //{ a: 2, b: 3 } const sum = a + b; console.log({sum}); //{ sum: 5 } >> 중괄호로 변수를 둘러싸면 변수의 이름과 값이 동시에 출력된다. return sum; } getSum(2, 3); //객체 쪼개기, 합치기 const config = { id: 1, isAdmin: false, theme: { dark: false, accessibi..
-
8.Object2JavaScript 2021. 10. 1. 16:01
const user = { id: 1, name: "kim", job: "programmer" } user.id; //1 const key = "id"; //속성 "id"에 대한 이름 key 선언 user[key]; //1 //응용 const getValue = (user, keyToRead) => { return user[keyToRead]; } getValue({id: 2, name: "Lee"}, "name"); //Lee. => 객체의 name속성 불러오기 getValue({id: 2, name: "Lee"}, "id"); //2. => 객체의 name속성 불러오기 //read keys, values const keys = Object.keys(user); //[ 'id', 'name', 'job..
-
7.Array 2JavaScript 2021. 10. 1. 15:09
Array 쪼개기, 합치기 //배열 쪼개기 const arr = [20, 5]; const [a, b] = arr; console.log(a, "and",b ); //20 and 5 //배열 합치기 const arr2 = ["abc", "def"]; const arr3 = [...arr, ...arr2]; // ...은 배열을 펼치는 문법이다. ---------------------------------------------------------------------- ... 는 seperate operator라고 불린다. ...arr >> 20, 5 와 같이 배열을 펼쳐 내용물만 나열하게 된다. 이걸 다시 []로 감싸고 내용을 추가하면 기존 내용물을 포함한 새로운 배열로 만들 수 있다. --------..