Front-end/Javascript
-
클로저(Closure)Front-end/Javascript 2021. 3. 23. 23:26
클로저,렉시컬스코프, ... 등 뜻을 이해하고 이제 안다고 생각했는데 직접 말하라고하면 항상 어떻게 말해야되는건지 고민하게된다 그말은 즉.. 아직 이해를 못하고 있다는 뜻.. ^^ .. 백번 보다보면 터득할 날이 오겠지 .. * 클로저는 자바스크립트 고유의 개념은 아니다. Closures A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. I..
-
this 바인딩Front-end/Javascript 2021. 3. 23. 22:17
[ this ] - 기본적으로 this는 winodw(전역객체)를 가리킨다. 전역공간에서 전역 컨텍스트를 생성하는 주체가 전역 객체이기 때문이다. - 어떤 함수를 메서드로서 호출한 경우 this는 메서드 호출 주체를 참조한다. - 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조한다. -콜백함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조한다. -생성자 함수에서의 this는 생성될 인스턴스를 참조한다. [ this에 별도의 대상을 바인딩하는 방법 ] * call Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) : 첫번째 인자를 this로 바인딩하고 이후 인자들을 ..
-
JqxGrid ) 해당 id를 가진 row의 색상을 변경해주는것이 아닌 cell하나에 색상을 적용하기.Front-end/Javascript 2020. 5. 8. 09:17
처음에 해당 id를 가진 row의 색상을 변경해주는방법으로 구현을 했는데 document.getElementsByClassName(id).style.backgroundColor = '#'+color; 한줄의 row색상을 바꿔서인지 한 컬럼 head 더블클릭하여 헤드 정렬 시 중복되는 cell의 서로 다른색상이 겹쳐 보이는..에러가 있어서 찾다 찾다가 cell 하나하나 색상을 변경해주는 방법을 선택했다. 방법은 cellclassname 속성에 classname을 주고싶은 대로 나눠서 준 다음 해당 class에 색상을 적용하면 된다. ex) 그리드 내용 이 아래와 같다면 김미미가 여자니까 첫번째 row는 노랑 , 김철수는 남자니까 두번째 해당 row에는 보라색을 줘보자. 번호 이름 성별 블라 블라 블라 1 ..
-
JqGrid ) 특정 셀 select 옵션 나타내기 / 옵션 선택 후 보여지는 값 바꾸기Front-end/Javascript 2020. 5. 7. 15:13
var table_id = "#table_id"; if( $(table_id)[0].grid ){ $.jgrid.gridUnload(table_id); } var value_array = [{code : "A", description: "알파벳 에이요"}, {code : "B", description: "알파벳 비요"}, ...... {code : "Z", description: "알파벳 제트요"}] // value 값 들어있는 array ; var value_desc = ""; //select 선택하는 옵션에서 보일 desc // 보이게하고싶은 selectoption이 A - 알파벳 에이요 이런식이면 아래처럼 조합한다. for(var i=0; i
-
JqGrid ) 그리드 cell에 input text, combobox 구현 & 수정시 그리드에 값 적용시키기Front-end/Javascript 2020. 4. 29. 10:25
1) 적용할 컬럼에 editable: true, edittype: 'text', 'select' 정의하기. combobox 형태로 구현을 하려면 옵션들을 객체 const obj = {} 형식으로 가져와야 value 형태로 사용할수있다. const city_obj = {}; // 서비스에서 받아온 option value가 array 형태라면 value_array.forEach(function(item) { // option 으로 나와야하는 item.desc를 객체에 저장한다. 여기는 각자 서비스에 맞게.. city_obj[item.code] = city_obj[item.desc] }); var column = [ { label: '국가' , name: 'country' ,width:73, editable ..
-
제어 대상 찾기 - getElementById, querySelector ...Front-end/Javascript 2020. 3. 5. 13:06
getElementById() : id명에 해당하는 객체들을 찾아서 해당하는 요소 한개에 대한 NodeList(노드의 리스트 , 유사배열(배열 리터럴 []로 감싸져 있지만 배열이 아님))에 담아서 반환한다. 유사배열이기 때문에 배열관련 메소드를 사용하려면 Array.from(유사배열) 형태로 배열로 변환한다. getElementsByTagName() & getElementsByClassName()으로 생성된 HTMLCollection은 live 이므로 리스트가 반환된 이후에도 문서가 수정된다면 문서의 상태를 항상 반영한다. querySelector() : 해당 선택자를 조회하여 첫번째로 해당하는 요소를 반환한다. (NodeList , live 아님 (static)) querySelectorAll() : ..