본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript/[기초] Javascript30

Javascript 화면 캡쳐, Javascript screen shot, Javascript screen capture [html2canvas] 브라우저에서 화면의 모습을 캡쳐하려면 html2canvas라는 오픈소스 라이브러리를 사용하면 구현하기 매우 간단합니다. https://html2canvas.hertzen.com/ 먼저 조금 철(?)지난 소스코드 사용방법 입니다. function click(){ html2canvas( document.querySelector('#대상') , { onrendered: function(canvas) { saveAs(canvas.toDataURL(), '이름.png'); } }); } function saveAs(uri, filename) { var link = document.createElement('a'); if (typeof link.download === 'string') { link.href = ur.. 2020. 1. 22.
Javascript json array loop, for (자바스크립트 json 배열 반복문) Object for Object loop * 일반 배열에서의 반복문 1. for in var array = [ {text:'abcd',number:1234}, {text:'efg',number:5678} ]; for(idx in array){ console.log(array[idx]); }; 2. 단순한 for var array = [ {text:'abcd',number:1234}, {text:'efg',number:5678} ]; for(i=0;i < array.length;i++){ console.log(array[i]); }; 3. forEach var array = [ {text:'abcd',number:1234}, {text:'efg',number:5678} ]; array.forEach(function(data, idx){ conso.. 2020. 1. 21.
Javascript 전개 연산자(... 문법, dot dot dot, Spread operator tricks) 자바스크립트에서 간혹 점 3개로 만들어진 문법을 볼 때가 있다 ->... 가령 요런코드가 있다고 하여보자. function printer(...arg){ console.log(arg); } printer(1,2,3,4,5); 해당 코드를 실행하면 아래 사진처럼 배열이 출력이 된다. 그러면 숫자 1을 넣어보고 아무런 값도 넣지않아보자. 마치 자바에서의 가변인자처럼 사용이 가능하다! 또한 불변데이터 패턴(Immutable data pattern)에서도 사용된다. 아래코드를 보면 쉽게 이해할 수 있다. var a = [3,4,5]; var b = a; a.push( 6 ); //a 배열에 6을 넣는다. console.log(a); //3,4,5,6이 출력된다. console.log(b); //3,4,5,6이 .. 2020. 1. 10.
(기본/기초) Javascript 배열 정렬, Javascript sort array 자바스크립트에서 배열의 정렬은 sort 라는 함수를 통해서 할 수 있다. sort라는 함수는 일반 함수처럼 사용 할 수 있으며, 단순한 기능 뿐만 아니라 익명함수를 넣어주면 사용자가 지정한 옵션에 따라 데이터를 정렬 할 수 있다. 1. 단순 1차원 배열 정렬 var month = ['March', 'Jan', 'Feb', 'Dec']; month.sort(); console.log(month); //순서 : Dec, Feb, Jan, March --> 알파벳 순서로 정렬 var array = [1, 30, 4, 21, 1000]; array.sort(); console.log(array); //순서 : 1, 1000, 21, 30, 4 --> 앞자리가 1부터 정렬됨. 크기순으로 되지 않음. var arr.. 2019. 12. 12.
(기본/기초) Jquery checkbox, jquery 체크박스, 제이쿼리 체크박스 1. 선택하기, 선택 해제하기 //attribute로 선택, 선택해제 $("대상").attr("checked", true); /* 선택 */ $("대상").attr("checked", false); /* 해제 */ //property로 선택, 선택해제 --> attr로 안되는 경우 $("대상").prop("checked", true); /* 선택 */ $("대상").prop("checked", false); /* 해제 */ 2. 체크가 되었는지 여부 //대상이 1개인 경우 $("대상").is(":checked"); //true 또는 false /* 대상이 여러개인 경우(멀티 체크같은 상황) 통상적으로 대상이 여러개인 경우는 클래스를 동일하게 주어 반복문으로 처리한다. */ $('.클래스').each(fu.. 2019. 12. 6.
(기본/기초) Jquery select option tag, html select option 가져오기 1. ID로 접근하여 선택된 값 읽기 $("#셀렉트박스의ID option:selected").val(); 2. Name로 접근하여 선택된 값 읽기 $("select[name=셀렉트박스의name값]").val(); 3. 선택된 값의 index를 불러오기 //물론 name값으로 해도 된다. var index = $("#셀렉트박스의ID option").index($("#셀렉트박스의ID option:selected")); 4. option값 추가 //맨 뒤에 추가 $("#셀렉트박스ID").append("last"); //맨 앞에 추가 $("#셀렉트박스ID").prepend("first"); //해당 인덱스 이후에 option 추가 하기 $("#셀렉트ID option:eq(3)").after("4번"); // 해.. 2019. 11. 8.