자바스크립트,부트
-
selenium python - 에러 날 때 한 번 쯤 해보면 좋을 시도자바스크립트,부트 2019. 8. 26. 09:49
selenium python - 에러 날 때 한 번 쯤 해보면 좋을 시도 에러의 종류에 따라서 달라지겠지만 xpath 혹은 name, class 등으로 elements를 찾아 클릭하는 것을 시도했을 때 에러가 난다면 2가지를 볼 것 같아요. 1 . modal이 띄워져 있어서 해당 elements를 찾았지만 클릭이 안된다. >> 요건 이전 포스팅에 작성해뒀는데 한 번 확인해보세요. modal을 display:none 시키면 됩니다. >> 2019/08/25 - selenium python - Other element would receive the click 2. element를 못찾는다. >> 코드가 실행될 때 selenium이 해당 페이지를 모두 로드하지 못하는 경우도 있는 것 같으니까 time.sle..
-
selenium python - Other element would receive the click자바스크립트,부트 2019. 8. 25. 15:15
selenium python - Other element would receive the click selenium으로 어떤 버튼을 클릭하도록 했는데 Other element would receive the click 에러가 난다면 혹시 modal이 앞으로 나와있는지 확인해보시면 좋을 것 같아요. modal이 나와있으면 뒤에 있는 것들이 클릭 안되는 상황일지도요 ! 간단하게 modal을 없애 버리면 되는데 display:none을 활용하시며 됩니다. 예를 들어서 modal의 id가 modal_aabbcc 인 경우에 아래와 같은 코드로 modal을 사라지게 할 수 있습니다. driver.execute_script("document.getElementById('modal_aabbcc').style.displ..
-
selenium python - find_element_by_xpath자바스크립트,부트 2019. 8. 24. 17:22
selenium python - find_element_by_xpath selenium을 활용하여 어떤 버튼을 클릭하거나 선택하거나 등등의 작업을 할 때 find_element_by_xpath 정말 좋은 것 같아요. 함수명 처럼 xpath를 이용해서 element를 찾아줍니다. xpath는 chrome browser에서 쉽게 얻을 수 있어요. get xpath : chrome >> inspect >> elements select >> copy >> copy XPath 복사하면 이런 것들이 나오거든요. '//*[@id="root"]/div[3]/div[3]/ul/li[8]' 이걸 활용해서 선택, 클릭을 할 수 있습니다. 클릭하기 click() 함수를 사용하시면 됩니다. xpath = '//*[@id="ro..
-
json pretty, beautiful print in web page자바스크립트,부트 2019. 8. 17. 21:58
JSON Pretty, Beautiful Print JSON을 웹 페이지에서 이쁘게 보여줘야 할 때가 있죠. highlight 라이브러리를 통해서 보여주는 것도 좋겠지만 보통은 아래와 같은 방법으로 많이 하는 것 같네요. document.getElementById('printTargetElem').innder.HTML = '' + JSON.stringify(sourceObj, undefined, 4) + ''; 아래 코드를 통해서 JSON을 indent가 들어간 텍스트로 변경할 수 있고요. pre 안에 넣어줌으로써 있는 그대로 출력하게 하는 것이죠 !! JSON.stringify(sourceObj, undefined, 4) JSON.stringify가 JSON이나 Obj를 문자열로 변경시켜주는 함수이고 ..
-
table td access: first td, second td, third td자바스크립트,부트 2019. 8. 17. 20:53
Table td Access - first td, second td, third td, ....., n td - table의 여러 td 중에서 특정 td에만 접근해서 무언가를 하고 싶을 때가 있죠. 첫번째는 td:first-child로 접근 가능합니다. 두번째 부터는 td:nth-child(2) 이렇게 접근 가능한데 first-child도 nth-child(1)로 접근 가능하니까 td:first-child 보다는 nth-child로 통일해서 사용하는 것이 좋을 것 같네요. 아래 몇 가지 예시를 작성해봅니다. 1. table의 첫번째 td에만 click 이벤트를 주는 방법 $('#target_table').on('click', 'td:first-child', function(){ console.log('f..
-
텍스트 하이라이트 (text highlight) Mark.js 예제자바스크립트,부트 2019. 7. 28. 20:02
필요해서 만들려고 생각하다가 분명히 있을거야 라고 찾아보면 항상 있죠 ㅋㅋㅋㅋ 최근에 검색한 결과 중에서 검색어를 하이라이트해서 보여주고 싶다는 생각이 들었고 찾아보니 mark.js 라는 라이브러리가 있더라고요. 사용도 간단하고 가볍고 해서 선택했습니다. 간단한 사용 예제 하나 가지고 왔어요. .... 위와 같은 코드로 mark.js 를 간단하게 적용할 수 있습니다. 코드를 간단히 살펴보면 aa_table에 존재하는 test라는 글자를 test로 변경해줍니다. 따라서 test는 table_highlight css 적용을 받게 되고 배경이 노란색으로 표시되죠. mark.js 홈페이지에 가보시면 더 많은 예제, 사용방법이 나와있습니다. mark.js 홈페이지 바로가기 : https://markjs.io/
-
Data-attribute to Modal in Bootstrap4 (모달에 데이터 전달하기)자바스크립트,부트 2019. 7. 14. 21:55
Data-attribute to Modal in Bootstrap4 부트스트랩4에서 모달을 보여지게 하는 방법은 몇 가지가 있죠. 그중에서 Button을 누르면 모달이 띄워지는 방법이 있죠. 아래와 같은 코드로 가능합니다. 검색 ... 코드를 잠깐 살펴보면 button을 누르면 data-toggle="modal" data-target="#test_modal"을 통해서 modal이 보여지게 되죠. data-target은 modal div의 id와 일치해야 하고요. 이번 포스팅에서 정리하려는 것은 button에 있는 data-test='aaa' 를 modal로 전달하자 라는 것입니다. 아래와 같은 코드로 가능한데요. show.bs.modal은 https://getbootstrap.com/docs/4.3/co..
-
JSON 자동 정렬되는 문제자바스크립트,부트 2019. 7. 7. 11:37
분명히 서버에서는 아래와 같이 입력되서 보내지는데 클라이언트에서는 740 부터 읽지 않고 610 부터 읽더라고요. { '740' : { 'a': 1 }, '610' : { 'a': 2 } } $.each 를 통해서 처리하는데 이게 문제인가 싶었는데 브라우저에 따라서 자동으로 정렬해버리는 경우가 있는 것 같습니다. 이럴 때에는 브라우저에서 다시 처리할 생각보다는 아예 아래와 같이 depth를 하나 늘리지만 정렬해서 보내버리는 것도 좋을 것 같아요. { '0' : { '740' : { 'a': 1 } }, '1' : { '610' : { 'a': 2 } } } 간단하지만 가끔 까먹고 console.log를 찍고 있길래 정리해둡니다. ㅎㅎ
-
Bootstrap4 Table Border Color Change CSS자바스크립트,부트 2019. 6. 13. 23:57
부트스트랩 4 테이블 선 색 변경하기 아래와 같은 부트스트랩 테이블이 존재한다고 가정하면 테이블의 내부 선 색을 변경하기 위해서 아래와 같은 css가 필요해요. ... class 이름에 td 붙여주시고 border를 지정해주시면 됩니다. .table_test_class td{ border: 1px solid #000000; } th, tr 등을 이용해서 원하시는 부분에 border color 혹은 border style을 변경하실 수 있습니다.
-
javascript replace (with regex)자바스크립트,부트 2019. 6. 9. 23:09
자바스크립트에서 replace는 제일 처음것만 해준다고 합니다. 그래서 regex로 replace를 많이 사용한다고 합니다. 결론은 귀찮은 regex를 해야 한다. 라는 것인데. 생각해보면 내가 싫어서 제대로 공부하지 않은 regex라고 마냥 뒤로 미뤄두는 것도 아닌 것 같아 사용할 수 있을 때 사용해보려고 노력중입니다. 일단 아래 사이트에서 regex 로 매칭되는 것들을 확인할 수 있습니다. 테스트 하는 거죠. https://www.regexpal.com/ Regex Tester - Javascript, PCRE, PHP RegexPal requires a modern browser. Please update your browser to the latest version and try again. ww..
-
datatables create example/sample자바스크립트,부트 2019. 6. 8. 18:52
Datatables Create Example datatables 라이브러리를 사용해서 테이블을 생성하는 예시입니다. 라이브러리 추가, trunc 함수 추가 등이 필요하지만 대충 코드 보시면 아실 것 같아서 자세한 내용은 추가하지 않았습니다. var table = $('#targetTable').DataTable({ data: source_data, dom: 'Bfrtip', buttons: [{ extend: 'excelHtml5', text: 'Excel Download', className: 'btn btn-black export-button' } ], columns: [{ title: "description" }, { title: "status" } ], "columnDefs": [{ "width..
-
twbsPagination Redraw자바스크립트,부트 2019. 5. 31. 16:50
pagination으로 twbsPagination을 사용하고 있는데요. Redraw 하는 방법을 정리해보려고요. twbsPagination github : https://github.com/josecebe/twbs-pagination Redraw는 아래와 같은 프로세스로 이루어집니다. pagination create pagination destroy pagination html create pagination recreate 먼저 pagination이 생성되어 있겠죠. html + javascript 로 말이에요. 잘 사용하다가 pagination을 다시 그리고 싶을 때 먼저 destroy하고 html을 다시 추가해줘야 합니다. 요거를 안에 다시 생성해줘야 해요. destrory 할 때 이것도 삭제되버리..
-
html select selection for test / jQuery, trigger자바스크립트,부트 2019. 5. 31. 13:23
select를 선택하기 위해서는 아래와 같은 코드로 가능합니다. jQuery를 통해서 trigger('change') 하고 싶은 select의 element를 알아냅니다. trigger('change') 하는데 value가 option_3 인 것을 선택하도록 하는 것입니다. 하나 두울 세엣 네엣 다섯 말로 설명하는 것보다 코드를 보는게 훨씬 이해가 빠른 경우가 많죠. 위에 적어둔 설명글보다 코드를 보시는 것을 추천합니다. 개발 과정에서 어떤 선택들을 잔뜩하고 그 결과를 봐야할 때 테스트를 해야 하는 것이 많은데 전부 다 눌러보기 힘들 때 이벤트에 따라서 다른 것을 선택하는 코드를 작성해야 할 때 등등 에서 사용할 수 있겠습니다.
-
자바스크립트 jQuery input enter event자바스크립트,부트 2019. 5. 31. 12:08
javascript로 input에서 엔터키를 눌렀을 때 반응하는 이벤트는 아래와 같이 구현할 수 있습니다. $("#input_id").keyup(function(event) { if (event.keyCode === 13) { console.log('enter! enter!'); } }); input class 던지 id로 jQuery에서 찾고 keyup이라는 함수를 통해서 keyCode의 값이 13이면 처리하라는 코드가 되겠습니다. keyCode 값은 ASCII 코드 값인데요. https://keycode.info/ 사이트에서 직접 키를 눌러서 어떤 keyCode값이 나오는지 확인할 수 있습니다.
-
datatables redraw자바스크립트,부트 2019. 5. 31. 11:45
자바스크립트로 테이블 그리실 때 datatables (https://datatables.net/) 많이 사용하실 것 같아요. 저도 사용하고 있는데 redraw 하는 방법 간단하게 정리해봅니다. 저는 destroy하고 다시 그리는 방법을 사용하고 있는데요. data만 변경하는 것도 있겠죠? var table; //테이블을 생성해서 저장해둘 변수 table = $('#targetTableDiv').DataTable({ ..... }); //이런식으로 DataTable..로 생성할 때 return되는 것을 table에 저장해둡니다. table.destroy(); //table을 destroy 하시고 다시 그립니다. table = $('#targetTableDiv').DataTable({ ..... }); da..
-
jQuery로 select 된 값 가지고 오기자바스크립트,부트 2019. 5. 27. 23:42
jQuery를 사용해서 select에서 선택된 값을 가지고 오는 방법은 아래와 같습니다. $('.target-selection').click(function(){ var option_value = $(".target-selection option:selected").val(); var option_text = $(".target-selection option:selected").text(); console.log(option_value ); console.log(option_text ); }); target-selection 이라는 클래스를 가진 select 에서 선택이 이루어지면 option:selected를 활용해서 value값은 val() 로 가지고 오고요. text 값은 text()로 가지고 옵니..
-
javascript - select - focus and change자바스크립트,부트 2019. 5. 26. 23:02
아래와 같이 생긴 select가 있다고 가정하고요. ... 이 select가 focus, change 될 때 일어나는 이벤트는 아래와 같은 코드로 처리할 수 있습니다. $('.aaa-select').on('focus', function () { console.log('focus event'); }).change(function() { console.log('change event'); }); 이런식의 시나리오를 처리할 수 있을 것 같아요. focus 되면 현재 선택되어 있는 값을 저장합니다. change가 일어나면 어떤 프로세스를 처리하는데 변경에 정상적으로 이루어지면 상관없지만 어떤 이유에서 변경이 이뤄지지 않아야 하면 focus에서 저장된 값을 사용해서 원래대로 돌려버리는 것이죠. 그리고 에러 메세지..
-
IE11, Edge 에서 CSS 배경이미지 SVG 사용자바스크립트,부트 2018. 1. 19. 17:32
제목이 조금 혼란스러울 수 있으니 다시 한 번 설명하며 아래와 같습니다. 인터넷익스플로러 11 버전과 엣지(Edge) 브라우저에서 SVG 이미지를 CSS로 배경에 넣고 싶을 때는 다른 브라우저와 다르게 Base64로 인코딩해서 입력해야 한다는 것을 정리해봅니다. 일단 왜 2개의 브라우저만 문제를 가지는지 잘 모르겠지만 브라우저가 그렇게 하라는데 웹 개발자가 힘이 있나요.그렇게 해야죠 :-) 아래와 같은 SVG 파일이 있다고 가정하겠습니다. 일러스트레이터에서 이미지를 쉽게 SVG로 저장할 수 있는데요.저장된 SVG에서 불필요한 부분을 삭제한 것입니다. 일반적인 브라우저에서는 아래와 같은 CSS로 해당 SVG를 배경이미지로 사용할 수 있습니다. background-image: url('data:image/s..
-
자바스크립트 URL 정보 가져오기(찾기, 확인)자바스크립트,부트 2017. 6. 15. 23:55
자바스크립트(javascript)에서 현재 URL에 대한 정보는 window 객체의 location에 저장되어 있습니다. 저는 ngee.tistory.com/admin/plugin/refererKeyword/ 라는 페이지에서 location을 출력해봤습니다. 크롬에서 개발자 툴에 들어간 뒤에 Console 창에 console.log(window.location); 입력 후 엔터를 누르면 출력할 수 있습니다. 출력한 결과를 확인해보면 여러 가지 정보가 들어가 있는 것을 확인할 수 있습니다. 먼저 host/hostname은 ngee.tistory.com이고요. href는 전체 URL을 값으로 가지고 있네요. pathname은 전체 URL에서 host 값을 제외한 주소를 값으로 가지고요. protocol도 확..