코딩하다 현타올 때

질문 : HTML5 Canvas vs. SVG vs. div 즉석에서 요소를 만들고 이동할 수있는 가장 좋은 방법은 무엇입니까? 예를 들어 직사각형, 원 및 다각형을 만든 다음 해당 개체를 선택하고 이동하려고한다고 가정 해 보겠습니다. HTML5가이를 가능하게하는 세 가지 요소 인svg , canvas 및 div를 제공한다는 것을 알고 있습니다. 내가하고 싶은 일 중 어떤 요소가 최고의 성능을 제공할까요? 이러한 접근 방식을 비교하기 위해 각각 머리글, 바닥 글, 위젯 및 텍스트 콘텐츠가 포함 된 시각적으로 동일한 웹 페이지 3 개를 만들려고했습니다. 첫 번째 페이지의 위젯은 전체적으로 canvas 요소로, 두 번째는 전체적으로 svg 요소로, 세 번째는 일반 div 요소 인 HTML 및 CSS로 만들어..

질문 : 변수가 JavaScript의 문자열인지 확인 JavaScript에서 변수가 문자열인지 다른 것인지 어떻게 확인할 수 있습니까? 답변 typeof 연산자를 사용할 수 있습니다. var booleanValue = true; var numericalValue = 354; var stringValue = "This is a String"; var stringObject = new String( "This is a String Object" ); alert(typeof booleanValue) // displays "boolean" alert(typeof numericalValue) // displays "number" alert(typeof stringValue) // displays "string" ..

질문 : JS 객체를 JSON 문자열로 변환 JS에서 다음을 사용하여 객체를 정의한 경우 : var j={"name":"binchen"}; 객체를 JSON으로 어떻게 변환 할 수 있습니까? 출력 문자열은 다음과 같아야합니다. '{"name":"binchen"}' 답변 현재의 모든 브라우저에는 기본 JSON 지원이 내장되어 있습니다. IE6 / 7과 같은 선사 시대 브라우저를 다루지 않는 한 다음과 같이 쉽게 할 수 있습니다. var j = { "name": "binchen" }; console.log(JSON.stringify(j)); 출처 : https://stackoverflow.com/questions/4162749/convert-js-object-to-json-string

질문 : HTML Canvas를 gif / jpg / png / pdf로 캡처 하시겠습니까? HTML 캔버스에 표시된 내용을 이미지 또는 PDF로 캡처하거나 인쇄 할 수 있습니까? 캔버스를 통해 이미지를 생성하고 해당 이미지에서 png를 생성하고 싶습니다. 답변 죄송합니다. 원래 답변은 유사한 질문에 한정되었습니다. 다음과 같이 수정되었습니다. var canvas = document.getElementById("mycanvas"); var img = canvas.toDataURL("image/png"); IMG의 값을 사용하여 다음과 같이 새 이미지로 작성할 수 있습니다. document.write(''); 출처 : https://stackoverflow.com/questions/923885/captur..

질문 : JavaScript에서 현재 날짜를 어떻게 얻습니까? JavaScript에서 현재 날짜를 어떻게 얻습니까? 답변 new Date() 를 사용하여 현재 날짜와 시간을 포함 Date 객체를 생성합니다. var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! var yyyy = today.getFullYear(); today = mm + '/' + dd + '/' + yyyy; document.write(today); 오늘 날짜를 mm / dd / yyyy 형식으로 제공합니다. 간단히 today ..

질문 : Facebook Flux보다 Redux를 사용하는 이유는 무엇입니까? 나는 이 답변을 읽고 상용구를 줄이고 GitHub 예제를 몇 개 살펴보고 redux를 조금 시도했습니다 (todo 앱). 내가 이해하는 바와 같이 공식 redux 문서 동기 는 기존 MVC 아키텍처에 비해 전문가를 제공합니다. 그러나 질문에 대한 답을 제공하지 않습니다. Facebook Flux보다 Redux를 사용해야하는 이유는 무엇입니까? 그것은 프로그래밍 스타일의 문제 일뿐입니다 : 기능적 대 비 기능적? 아니면 문제는 redux 접근 방식을 따르는 능력 / 개발 도구에 있습니까? 어쩌면 스케일링? 아니면 테스트? redux가 기능적 언어에서 온 사람들에게 플럭스라고 말하면 맞습니까? 이 질문에 답하기 위해 플럭스와 re..

질문 : jQuery에서 요소가 숨겨져 있는지 어떻게 확인합니까? .hide() , .show() 또는 .toggle() 함수를 사용하여 요소의 가시성을 전환 할 수 있습니까? visible 되는지 또는 hidden 있는지 어떻게 테스트 하시겠습니까? 답변 질문이 단일 요소를 참조하므로이 코드가 더 적합 할 수 있습니다. // Checks CSS content for display:[none|block], ignores visibility:[true|false] $(element).is(":visible"); // The same works with hidden $(element).is(":hidden"); twernt의 제안 과 동일하지만 단일 요소에 적용됩니다. jQuery FAQ에서 권장하는 알고리..

질문 : JavaScript로 두 날짜 비교 누군가 JavaScript를 사용하여 과거보다 크거나 작은 두 날짜 의 값을 비교하는 방법을 제안 할 수 있습니까? 값은 텍스트 상자에서 가져옵니다. 답변 Date 객체 는 원하는 작업을 수행합니다. 각 날짜에 대해 하나씩 생성 한 다음 > ,

질문 : PHP를 사용한 jQuery Ajax POST 예제 양식에서 데이터베이스로 데이터를 보내려고합니다. 내가 사용하는 양식은 다음과 같습니다. A bar 일반적인 접근 방식은 양식을 제출하는 것이지만 이로 인해 브라우저가 리디렉션됩니다. jQuery 및 Ajax를 사용하면 양식의 모든 데이터를 캡처하여 PHP 스크립트 (예 : form.php )에 제출할 수 있습니까? 답변 .ajax 기본 사용법은 다음과 같습니다. HTML : A bar jQuery : // Variable to hold request var request; // Bind to the submit event of our form $("#foo").submit(function(event){ // Prevent default post..

질문 : jQuery-텍스트 설명을 통해 선택 컨트롤의 선택된 값 설정 선택 컨트롤이 있고 javascript 변수에 텍스트 문자열이 있습니다. jQuery를 사용하여 선택 컨트롤의 선택된 요소를 내가 가지고있는 텍스트 설명이있는 항목으로 설정하고 싶습니다 (내가 가지고 있지 않은 값과 반대). 나는 그것을 가치로 설정하는 것이 매우 사소하다는 것을 알고 있습니다. 예 : $("#my-select").val(myVal); 그러나 나는 텍스트 설명을 통해 그것을하는 것에 약간 난처합니다. 텍스트 설명에서 가치를 알아낼 수있는 방법이있을 것 같지만, 제 두뇌는 금요일 오후에 너무 많아서 해결할 수 없습니다. 답변 jQuery 1.6 이하 1.4 이상 버전 var text1 = 'Two'; $("select ..

질문 : 문자의 절반에 CSS를 적용 할 수 있습니까? 내가 찾고있는 것 : 캐릭터의 절반 을 스타일링하는 방법입니다. (이 경우 반은 투명) 내가 현재 검색하고 시도한 것 (행운 없음) : 문자 / 문자의 절반을 스타일링하는 방법 CSS 또는 JavaScript로 캐릭터의 일부 스타일링 캐릭터의 50 %에 CSS 적용 아래는 제가 얻고 자하는 것의 예입니다. 이를 위해 CSS 또는 JavaScript 솔루션이 존재합니까, 아니면 이미지에 의지해야합니까? 이 텍스트는 동적으로 생성되므로 이미지 경로를 사용하지 않는 것이 좋습니다. 최신 정보: 많은 사람들이 캐릭터의 절반을 스타일링하고 싶은 이유를 물었 기 때문에 이것이 이유입니다. 우리시는 최근 새로운 "브랜드"를 정의하는 데 25 만 달러를 지출했습니..

질문 : jQuery $ (document) .ready 및 UpdatePanels? jQuery를 사용하여 UpdatePanel 내부의 요소에 마우스 오버 효과를 연결하고 있습니다. 이벤트는 $(document).ready 바인딩됩니다. 예를 들면 : $(function() { $('div._Foo').bind("mouseover", function(e) { // Do something exciting }); }); 물론 이것은 페이지가 처음로드 될 때 잘 작동하지만 UpdatePanel이 부분 페이지 업데이트를 수행하면 실행되지 않고 마우스 오버 효과가 UpdatePanel 내에서 더 이상 작동하지 않습니다. 첫 번째 페이지로드뿐만 아니라 UpdatePanel이 부분 페이지 업데이트를 실행할 때마다 ..

질문 : HTML 텍스트 입력은 숫자 입력 만 허용합니다. 숫자 키 입력 (+ '.') 만 허용하도록 )을 설정하는 빠른 방법이 있습니까? 답변 참고 : 이것은 업데이트 된 답변입니다. 아래 주석은 키 코드를 엉망으로 만든 이전 버전을 나타냅니다. JSFiddle에서 직접 시도해보십시오. setInputFilter 함수를 사용하여 의 입력 값을 필터링 할 수 있습니다 (복사 + 붙여 넣기, 드래그 + 드롭, 키보드 단축키, 컨텍스트 메뉴 작업, 입력 할 수없는 키, 캐럿 위치, 다른 키보드 레이아웃 및 모든 브라우저 지원). IE 9 이후 ) : function setInputFilter(textbox, inputFilter) { ["input", "keydown", "keyup", "mousedown"..

질문 : HTML5를 사용하는 사용자 정의 데이터 속성에 대한 jQuery 선택기 HTML5와 함께 제공되는 이러한 데이터 속성에 사용할 수있는 선택기를 알고 싶습니다. 이 HTML 부분을 예로 들어 보겠습니다. 얻을 선택자가 있습니까? "Companies" 아래에 data-company="Microsoft" 모든 요소 "Companies" 아래에 data-company!="Microsoft" 모든 요소 다른 경우에는 "포함, 미만, 초과 등 ..."과 같은 다른 선택기를 사용할 수 있습니다. 답변 $("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below ..

질문 : HTMLCollection을 배열로 변환하는 가장 효율적인 방법 HTMLCollection을 배열로 변환하는 더 효율적인 방법이 있습니까? 상기 컬렉션의 내용을 반복하고 각 항목을 배열로 수동으로 푸시하는 것보다 더 효율적인 방법이 있습니까? 답변 var arr = Array.prototype.slice.call( htmlCollection ) "네이티브"코드를 사용하여 동일한 효과를 갖습니다. 편집하다 이것은 많은 뷰를 얻으므로 (@oriol의 의견에 따라) 다음과 같은 더 간결한 표현이 사실상 동일하다는 점에 유의하십시오. var arr = [].slice.call(htmlCollection); 그러나 @JussiR의 주석에 따르면 "verbose"형식과 달리 프로세스에서 비어 있고 사용되지..

질문 : HTMLCollection 요소에 대한 For 루프 HTMLCollectionOf 의 모든 요소에 대한 ID 가져 오기를 설정하려고합니다. 다음 코드를 작성했습니다. var list = document.getElementsByClassName("events"); console.log(list[0].id); for (key in list) { console.log(key.id); } 하지만 콘솔에 다음과 같은 출력이 나타납니다. event1 undefined 내가 기대했던 것이 아닙니다. 두 번째 콘솔 출력이 undefined 않았지만 첫 번째 콘솔 출력이 event1 이유는 무엇입니까? 답변 원래 질문에 대한 응답으로 for/in 잘못 사용하고 있습니다. 코드에서 key 는 색인입니다. 따라서 ..

질문 : CSS를 사용하여 SVG 이미지의 색상을 변경하는 방법 (jQuery SVG 이미지 대체)? 이것은 내가 생각해 낸 편리한 코드 조각에 대한 자체 Q & A입니다. 현재 SVG 이미지를 삽입 한 다음 CSS를 통해 SVG 요소에 액세스하는 쉬운 방법은 없습니다. JS SVG 프레임 워크를 사용하는 방법에는 여러 가지가 있지만 롤오버 상태의 간단한 아이콘을 만드는 것이라면 지나치게 복잡합니다. 그래서 여기에 제가 생각해 낸 것이 있는데, 웹 사이트에서 SVG 파일을 사용하는 가장 쉬운 방법이라고 생각합니다. 초기 텍스트에서 이미지로의 대체 방법에서 개념을 가져 왔지만 내가 아는 한 SVG에 대해 수행 된 적이 없습니다. 이것이 질문입니다. 답변 먼저, HTML에서 IMG 태그를 사용하여 SVG 그..

질문 : jQuery를 사용하여 Bootstrap 모달 창을 여는 방법은 무엇입니까? Twitter Bootstrap 모달 창 기능을 사용하고 있습니다. 누군가 내 양식에서 제출을 클릭하면 양식에서 "제출 버튼"을 클릭하면 모달 창이 표시됩니다. BootStap Wizard Form × Modal header One fine body… Close Save changes jQuery : $('#myform').on('submit', function(ev) { $('#my-modal').modal({ show: 'false' }); var data = $(this).serializeObject(); json_data = JSON.stringify(data); $("#results").text(json_dat..

질문 : jQuery에서 Ajax 요청으로 FormData 객체를 보내는 방법은 무엇입니까? XMLHttpRequest 레벨 2 표준 (여전히 작업 초안)은 FormData 인터페이스를 정의합니다. 이 인터페이스를 사용하면 XHR 요청 (Ajax 요청)에 File Btw, 이것은 새로운 기능입니다. 과거에는 "hidden-iframe-trick"이 사용되었습니다 ( 다른 질문 에서 이에 대해 읽어보십시오). 작동 방식 (예) : var xhr = new XMLHttpRequest(), fd = new FormData(); fd.append( 'file', input.files[0] ); xhr.open( 'POST', 'http://example.com/script.php', true ); xhr.onr..

질문 : 내장 DOM 메소드 또는 프로토 타입을 사용하여 HTML 문자열에서 새 DOM 요소 생성 요소를 나타내는 HTML 문자열이 있습니다 : 'text' . DOM의 요소 (제 경우 ul 프로토 타입이나 DOM 메소드로 어떻게 할 수 있습니까? (나는 jQuery에서 쉽게 할 수 있다는 것을 알고 있지만 불행히도 jQuery를 사용하지 않습니다.) 답변 참고 : 대부분의 최신 브라우저는 HTML 요소를 지원하므로 문자열에서 요소를 만드는보다 안정적인 방법을 제공합니다. 자세한 내용은 아래 Mark Amery의 답변을 참조하십시오 . 이전 브라우저 및 node / jsdom 요소를 지원하지 않음)의 경우 다음 방법을 사용하십시오. HTML 문자열에서 DOM 요소를 가져 오기 위해 라이브러리가 사용하는 ..

질문 : '$ (this)'와 'this'의 차이점은 무엇입니까? 저는 현재이 튜토리얼을 통해 작업하고 있습니다 : jQuery 시작하기 아래 두 가지 예 : $("#orderedlist").find("li").each(function (i) { $(this).append(" BAM! " + i); }); $("#reset").click(function () { $("form").each(function () { this.reset(); }); }); 첫 번째 예제에서 $(this) li 요소 내부에 텍스트를 추가합니다. 두 번째 예에서는 양식을 재설정 할 때 this $(this) this 보다 훨씬 더 자주 사용되는 것 같습니다. 내 생각에 첫 번째 예제에서 $() 는 각 li append() 함수를..

질문 : Google Maps JS API v3-간단한 다중 마커 예제 Google Maps API를 완전히 처음 사용합니다. 순환하고지도에 플로팅하려는 데이터 배열이 있습니다. 상당히 간단 해 보이지만 내가 찾은 모든 다중 마커 자습서는 매우 복잡합니다. 예를 들어 Google 사이트의 데이터 배열을 사용하겠습니다. var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Mar..

질문 : 청산 jQuery 사용 제어 값을 지울 수 있습니까? 나는 다음을 시도했다 : $('#control').attr({ value: '' }); 하지만 작동하지 않습니다. 답변 쉬움 : 을 감싸고 양식에서 reset을 호출 한 다음 .unwrap() 사용하여 양식을 제거합니다. .clone() 솔루션과 달리 끝에는 동일한 요소 (설정된 사용자 지정 속성 포함)가 있습니다. Opera, Firefox, Safari, Chrome 및 IE6 +에서 테스트 및 작업했습니다. type="hidden" 제외하고 다른 유형의 양식 요소에서도 작동합니다. window.reset = function(e) { e.wrap('').closest('form').get(0).reset(); e.unwrap(); } Re..

질문 : jQuery 비활성화 / 활성화 제출 버튼 이 HTML이 있습니다. 다음과 같이 어떻게 할 수 있습니까? 텍스트 필드가 비어 있으면 제출을 비활성화해야합니다 (disabled = "disabled"). 비활성화 된 속성을 제거하기 위해 텍스트 필드에 무언가를 입력 할 때. 텍스트 필드가 다시 비워지면 (텍스트가 삭제됨) 제출 버튼을 다시 비활성화해야합니다. 나는 다음과 같이 시도했다. $(document).ready(function(){ $('input[type="submit"]').attr('disabled','disabled'); $('input[type="text"]').change(function(){ if($(this).val != ''){ $('input[type="submit"]')..

질문 : JavaScript에서 "유효하지 않은 날짜"날짜 인스턴스 감지 JS에서 유효한 날짜 개체와 잘못된 날짜 개체의 차이점을 말하고 싶지만 방법을 알 수 없습니다. var d = new Date("foo"); console.log(d.toString()); // shows 'Invalid Date' console.log(typeof d); // shows 'object' console.log(d instanceof Date); // shows 'true' isValidDate 함수 작성에 대한 아이디어가 있습니까? Ash는 Date.parse 를 권장했습니다. 이는 날짜 문자열이 유효한지 확인할 수있는 권한있는 방법을 제공합니다. 가능한 경우 내 API가 Date 인스턴스를 수락하고 유효한지 여부를..