코딩하다 현타올 때

질문 : 어디에 넣어야하나요 async 속성이있는 스크립트는 비동기 적으로 실행됩니다. 즉, 그 동안 브라우저를 차단하지 않고 스크립트가 다운로드되는 즉시 실행됩니다. 이는 스크립트 2가 스크립트 1보다 먼저 다운로드 및 실행될 수 있음을 의미합니다. http://caniuse.com/#feat=script-async 에 따르면 모든 브라우저의 97.78 %가이를 지원합니다. defer 속성이있는 스크립트는 순서대로 실행됩니다 (예 : 첫 번째 스크립트 1, 다음 스크립트 2). 이것은 또한 브라우저를 차단하지 않습니다. 비동기 스크립트와 달리 지연 스크립트는 전체 문서가로드 된 후에 만 실행됩니다. http://caniuse.com/#feat=script-defer 에 따르면 모든 브라우저의 97.79..

질문 : JavaScript에서 큰 따옴표 또는 작은 따옴표는 언제 사용해야합니까? console.log("double"); vs. console.log('single'); 문자열을 처리 할 때 작은 따옴표를 사용하는 JavaScript 라이브러리가 점점 더 많이 보입니다. 하나를 사용하는 이유는 무엇입니까? 나는 그것들이 거의 상호 교환 가능하다고 생각했습니다. 답변 다른 라이브러리에서 단일 대 이중을 사용하는 가장 가능성있는 이유는 프로그래머 선호도 및 / 또는 API 일관성입니다. 일관성을 유지하는 것 외에 문자열에 가장 적합한 것을 사용하십시오. 다른 유형의 따옴표를 리터럴로 사용 : alert('Say "Hello"'); alert("Say 'Hello'"); 이것은 복잡해질 수 있습니다. al..

질문 : HTML에서 ID와 이름 속성의 차이점 id 와 name 속성의 차이점은 무엇입니까? 둘 다 식별자를 제공하는 동일한 목적을 수행하는 것 같습니다. (특히 HTML 양식과 관련하여) 두 가지를 모두 사용하는 것이 필요한지 또는 어떤 이유로 권장되는지 알고 싶습니다. 답변 name 속성은 양식 제출에서 데이터를 보낼 때 사용됩니다. 다른 컨트롤은 다르게 반응합니다. id 속성은 다르지만 name 은 같은 라디오 버튼이 여러 개있을 수 있습니다. 제출시 응답에는 선택한 라디오 버튼이라는 하나의 값만 있습니다. 물론 그것보다 더 많은 것이 있지만 확실히 올바른 방향으로 생각하게 할 것입니다. 출처 : https://stackoverflow.com/questions/1397592/difference-b..

질문 : HTML5 모범 사례; 섹션 / 헤더 / 제외 / 기사 요소 웹 (및 stackoverflow)에 HTML5에 대한 충분한 정보가 있지만 지금은 "모범 사례"에 대해 궁금합니다. 섹션 / 헤더 / 기사와 같은 태그는 새롭고 모든 사람이 이러한 태그를 사용해야하는시기 / 장소에 대해 서로 다른 의견을 가지고 있습니다. 그렇다면 다음 레이아웃과 코드에 대해 어떻게 생각하십니까? 1 2 5 6 7 8 9 10 11 12 13 14 15 menu 1 16 menu 2 17 menu 3 18 menu 4 19 menu 5 20 21 22 23 24 25 26 This is a title 27 28 Lorem ipsum dolor sit amet, consectetur 29 adipiscing elit. ..

질문 : JavaScript에서 문자열을 Base64로 인코딩하려면 어떻게해야합니까? PNG 이미지를 Base64 문자열로 인코딩 할 수있는 PHP 스크립트가 있습니다. JavaScript를 사용하여 동일한 작업을하고 싶습니다. 파일을 여는 방법을 알고 있지만 인코딩 방법을 잘 모르겠습니다. 이진 데이터 작업에 익숙하지 않습니다. 답변 btoa() 및 atob() 을 사용하여 base64 인코딩간에 변환 할 수 있습니다. 이 함수가 수락 / 반환하는 것에 관한 의견에 약간의 혼란이있는 것 같습니다. btoa() 는 각 문자가 8 비트 바이트를 나타내는 "문자열"을 허용합니다. 8 비트로 표현할 수없는 문자를 포함하는 문자열을 전달 하면 아마 break . 실제로 문자열을 바이트 배열로 취급하는 경우 에는..

질문 : HTML 레이아웃에 테이블을 사용하지 않는 이유는 무엇입니까? HTML의 레이아웃에 테이블을 사용해서는 안된다는 일반적인 의견 인 것 같습니다. 왜? 나는 이것에 대한 좋은 주장을 본 적이 없다. 일반적인 대답은 다음과 같습니다. 콘텐츠를 레이아웃에서 분리하는 것이 좋습니다. 그러나 이것은 잘못된 주장입니다. 진부한 생각 . 레이아웃에 테이블 요소를 사용하는 것이 테이블 형식 데이터와 거의 관련이 없다는 것이 사실이라고 생각합니다. 그래서 뭐? 내 상사가 신경 쓰나요? 내 사용자가 신경 쓰나요? 웹 페이지 관리를 유지해야하는 저나 동료 개발자 일 것입니다. 테이블을 유지 관리하기가 어렵습니까? 테이블을 사용하는 것이 div와 CSS를 사용하는 것보다 쉽다고 생각합니다. 그건 그렇고 ... 왜 d..

질문 : JavaScript .prototype은 어떻게 작동합니까? 나는 동적 프로그래밍 언어는 아니지만 JavaScript 코드의 공정한 부분을 작성했습니다. 저는이 프로토 타입 기반 프로그래밍에 대해 전혀 몰랐습니다. 이것이 어떻게 작동하는지 아는 사람이 있습니까? var obj = new Object(); obj.prototype.test = function() { alert('Hello?'); }; var obj2 = new obj(); obj2.test(); 예전에 사람들과 많은 토론을했던 기억이납니다 (내가 뭘하고 있는지 정확히 모르겠습니다).하지만 이해하기 때문에 수업의 개념은 없습니다. 그것은 단지 하나의 개체이고 그 개체의 인스턴스는 원본의 복제물입니다. 그러나 JavaScript에서이..

질문 : JavaScript 문자열 개행 문자? \n 모든 플랫폼에서 자바 스크립트의 범용 개행 문자 시퀀스입니까? 그렇지 않은 경우 현재 환경의 캐릭터를 어떻게 결정합니까? HTML 개행 요소 ( )에 대해 묻지 않습니다. JavaScript 문자열 내에서 사용되는 개행 문자 시퀀스에 대해 묻습니다. 답변 이 바보 같은 JavaScript를 사용하여 몇 가지 브라우저를 테스트했습니다. function log_newline(msg, test_value) { if (!test_value) { test_value = document.getElementById('test').value; } console.log(msg + ': ' + (test_value.match(/\r/) ? 'CR' : '') + ' '..

질문 : React.js의 상태 배열 수정 state 배열의 끝에 요소를 추가하고 싶습니다. 이것이 올바른 방법입니까? this.state.arrayvar.push(newelement); this.setState({ arrayvar:this.state.arrayvar }); push 하여 배열을 제자리에서 수정하면 문제가 발생할 수 있습니다. 안전합니까? 배열의 복사본을 만드는 대안과 낭비적인 setState 답변 React 문서 는 다음과 같이 말합니다. this.state를 변경 불가능한 것처럼 취급하십시오. push 는 상태를 직접 변경하므로 나중에 상태를 다시 "재설정"하는 경우에도 오류가 발생하기 쉬운 코드로 이어질 수 있습니다. componentDidUpdate 와 같은 일부 수명주기 메서드가..

질문 : JavaScript에서 스택과 큐를 어떻게 구현합니까? JavaScript에서 스택 및 큐를 구현하는 가장 좋은 방법은 무엇입니까? 나는 shunting-yard 알고리즘을 수행하려고하며 이러한 데이터 구조가 필요합니다. 답변 var stack = []; stack.push(2); // stack is now [2] stack.push(5); // stack is now [2, 5] var i = stack.pop(); // stack is now [2] alert(i); // displays 5 var queue = []; queue.push(2); // queue is now [2] queue.push(5); // queue is now [2, 5] var i = queue.shift(); ..

질문 : CSS를 통해 PNG 이미지의 색상을 변경 하시겠습니까? 흰색으로 단순한 모양을 표시하는 투명한 PNG가 주어지면 어떻게 든 CSS를 통해 색상을 변경할 수 있습니까? 어떤 종류의 오버레이입니까? 답변 -webkit-filter 및 filter 와 함께 필터를 사용할 수 있습니다. 필터는 브라우저에 비교적 새롭지 만 다음 CanIUse 표에 따라 90 % 이상의 브라우저에서 지원됩니다. https://caniuse.com/#feat=css-filters 이미지를 그레이 스케일, 세피아 등으로 변경할 수 있습니다 (예제 참조). 이제 필터를 사용하여 PNG 파일의 색상을 변경할 수 있습니다. body { background-color:#03030a; min-width: 800px; min-heig..

질문 : AngularJS에서 범위 프로토 타입 / 프로토 타입 상속의 뉘앙스는 무엇입니까? API 참조 범위 페이지에 다음 내용이 표시됩니다. 범위는 상위 범위에서 상속 할 수 있습니다. 개발자 가이드 범위 페이지 에는 다음과 같은 내용이 있습니다. 범위 (원형)는 부모 범위에서 속성을 상속합니다. 그렇다면 자식 범위는 항상 부모 범위에서 프로토 타입 적으로 상속됩니까? 예외가 있습니까? 상속 할 때 항상 일반적인 JavaScript 프로토 타입 상속입니까? 답변 빠른 답변 : 일반적으로 자식 범위는 프로토 타입 적으로 부모 범위에서 상속되지만 항상 그런 것은 아닙니다. 이 규칙에 대한 한 가지 예외는 scope: { ... } 지시문입니다.이 경우 프로토 타입 적으로 상속되지 않는 "격리"범위가 생성..

질문 : HTML에 대한 권장 사항은 무엇입니까? 꼬리표? 이전에 실제로 사용 된 HTML 태그를 본 적이 없습니다. 내가 그것을 피해야한다는 것을 의미하는 사용에 함정이 있습니까? 내 사이트의 링크를 단순화하는 데 유용한 응용 프로그램이있는 것처럼 보이지만 최신 프로덕션 사이트 (또는 다른 사이트)에서 사용중인 것을 본 적이 없다는 사실이 저를 걱정스럽게 만듭니다. 몇 주 동안 기본 태그를 사용한 후 기본 태그를 사용하여 처음 나타나는 것보다 훨씬 덜 바람직하게 만드는 몇 가지 주요 문제를 발견했습니다. 기본적으로 기본 태그 아래의 href='#topic' 및 href='' 에 대한 변경 사항은 기본 동작과 매우 호환되지 않으며 기본 동작의 이러한 변경으로 인해 컨트롤 외부의 타사 라이브러리가 예상치 ..

질문 : 클래스 용 CSS의 와일드 카드 * .tocolor 스타일링하는 div가 있지만 고유 식별자 1,2,3,4 등도 필요하므로 tocolor-1 다른 클래스로 추가합니다. tocolor 1 tocolor 2 tocolor 3 tocolor 4 .tocolor{ background: red; } tocolor-* 만 갖는 방법이 있습니까? 이 CSS에서와 같이 와일드 카드 * .tocolor-*{ background: red; } 답변 필요한 것은 속성 선택기입니다. html 구조를 사용하는 예는 다음과 같습니다. div[class^="tocolor-"], div[class*=" tocolor-"] { color:red } div 대신 요소를 추가하거나 모두 제거 class 대신 지정된 요소의 속성을..

질문 : Javascript에서 문자열의 첫 번째 문자 삭제 첫 번째 문자가 0이면 문자열의 첫 번째 문자를 삭제하고 싶습니다. 0은 두 번 이상있을 수 있습니다. 첫 번째 문자를 확인하고 0이면 삭제하는 간단한 기능이 있나요? 지금은 JS slice() 함수로 시도하고 있지만 매우 어색합니다. 답변 substring 문자열을 사용하여 문자열의 첫 번째 문자를 제거 할 수 있습니다. var s1 = "foobar"; var s2 = s1.substring(1); alert(s2); // shows "oobar" 문자열의 시작 부분에있는 모든 0을 제거하려면 : var s = "0000test"; while(s.charAt(0) === '0') { s = s.substring(1); } 출처 : https..

질문 : 각각 offsetWidth, clientWidth, scrollWidth 및 -Height 이해 offsetWidth / clientWidth / scrollWidth (및 -Height )와 관련하여 StackOverflow에 대한 몇 가지 질문이 있지만 해당 값이 무엇인지에 대한 포괄적 인 설명은 제공하지 않습니다. 또한 웹에는 혼란 스럽거나 잘못된 정보를 제공하는 여러 소스가 있습니다. 시각적 힌트를 포함하여 완전한 설명을 할 수 있습니까? 또한 이러한 값을 사용하여 스크롤 막대 너비를 계산하려면 어떻게해야합니까? 답변 CSS 상자 모델은 특히 스크롤 콘텐츠와 관련하여 다소 복잡합니다. 브라우저는 CSS의 값을 사용하여 상자를 그리는 반면, CSS 만있는 경우 JS를 사용하여 모든 치수를 ..

질문 : CodeMash 2012의 'Wat'강연에서 언급 된 이러한 기괴한 JavaScript 동작에 대한 설명은 무엇입니까? CodeMash 2012에 대한 'Wat'강연은 기본적으로 Ruby 및 JavaScript의 몇 가지 기이 한 단점을 지적합니다. http://jsfiddle.net/fe479/9/ 에서 결과의 JSFiddle을 만들었습니다. (루비를 모르기 때문에) 자바 스크립트와 관련된 동작은 다음과 같습니다. JSFiddle에서 내 결과 중 일부가 비디오의 결과와 일치하지 않는다는 것을 발견했으며 그 이유를 모르겠습니다. 그러나 JavaScript가 각 경우에서 어떻게 작동하는지 알고 싶습니다. Empty Array + Empty Array [] + [] result: JavaScript..

질문 : AngularJS를 사용하여 확인란 값 목록에 어떻게 바인딩합니까? 몇 가지 확인란이 있습니다. ['apple', 'pear'] 같이 선택된 모든 값의 목록을 유지하도록 컨트롤러의 목록에 바인딩하고 싶습니다. ng-model은 하나의 확인란 값을 컨트롤러의 변수에 바인딩 할 수있는 것 같습니다. 컨트롤러의 목록에 네 개의 확인란을 바인딩 할 수있는 다른 방법이 있습니까? 답변 이 문제에 접근하는 방법에는 두 가지가 있습니다. 간단한 배열 또는 개체 배열을 사용하십시오. 각 솔루션에는 장단점이 있습니다. 아래에서 각 사례에 대해 하나씩 찾을 수 있습니다. HTML은 다음과 같습니다. {{fruitName}} 적절한 컨트롤러 코드는 다음과 같습니다. app.controller('SimpleArray..

질문 : VanillaJS는 무엇입니까? 며칠 동안 내 마음 속에 갇혀있는 간단한 질문이 하나 있습니다. VanillaJS는 무엇입니까? 어떤 사람들은이를 프레임 워크라고 부르며 공식 페이지에서 라이브러리를 다운로드 할 수 있습니다. 그러나 일부 예제 또는 TodoMVC를 확인할 때 공식 페이지 또는 기타의 라이브러리를 포함하지 않고도 고전적인 원시 JavaScript 함수를 사용합니다. 또한 공식 웹 페이지의 "Docs"링크는 JavaScript의 Mozilla 사양으로 연결됩니다. 내 질문은 VanillaJS 원시 JavaScript입니까? 그렇다면 특별히 포함 된 스크립트가없는 브라우저 만 있으면되는데 왜 사람들은 이것을 "프레임 워크"라고 부를까요? 어리석은 질문으로 미안하지만 사람들이 "Vani..

질문 : IMG와 CSS 배경 이미지는 언제 사용합니까? background-image IMG 태그를 사용하여 이미지를 표시하는 것이 더 적합한 상황은 무엇입니까? 요인에는 접근성, 브라우저 지원, 동적 콘텐츠 또는 모든 종류의 기술적 제한 또는 사용성 원칙이 포함될 수 있습니다. 답변 IMG의 적절한 사용 다른 사용자가 페이지를 인쇄하도록 하려면 IMG를 사용하십시오. 이미지가 기본적으로 포함되도록 하려면 IMG를 사용하십시오.—JayTee 이미지에 경고 아이콘과 같은 중요한 의미 의미가 있는 경우 IMG(Alt 텍스트 포함)를 사용합니다. 이렇게 하면 화면 판독기를 포함한 모든 사용자 에이전트에서 이미지의 의미가 전달될 수 있습니다. CSS background-image 사용 시기 이미지가 로고, 다..

질문 : HTML에서 엔티티로 렌더링되도록 XML에서 앰퍼샌드를 어떻게 이스케이프합니까? HTML 페이지에서 렌더링하려는 XML 텍스트가 있습니다. 이 텍스트에는 엔티티 표현에서 렌더링하려는 앰퍼샌드가 포함되어 있습니다. & . 소스 XML에서이 앰퍼샌드를 어떻게 이스케이프합니까? 나는 & 그러나 이것은 실제 앰퍼샌드 문자 ( & ) 로 디코딩되며 HTML에서는 유효하지 않습니다 . 그래서 나는 & XML 출력을 사용하는 웹 페이지에서. 답변 XML에 & 가 포함된 경우 & 가 생성됩니다. HTML에서 해당 항목을 사용하면 & 로 렌더링됩니다. 출처 : https://stackoverflow.com/questions/1328538/how-do-i-escape-ampersands-in-xml-so-..

질문 : null vs. undefined 및 == 및 ===의 차이점에 대한 JavaScript 검사 null 이거나 undefined 경우 어떻게 확인 null 과 undefined 의 차이점은 무엇입니까? == 와 === 의 차이점은 무엇입니까? (Google에서 "==="를 검색하기 어렵습니다) 답변 null 이거나 undefined 경우 어떻게 확인합니까? 변수가 null if (a === null) // or if (a == null) // but see note below a 가 undefined 경우 후자도 참이됩니다. undefined : if (typeof a === "undefined") // or if (a === undefined) // or if (a == undefined) /..

질문 : ">"(보다 큼 기호) CSS 선택기는 무엇을 의미합니까? 예를 들면 : div > p.some_class { /* Some declarations */ } > 기호는 정확히 무엇을 의미합니까? 답변 > 는 자식 결합 자 이며, 때때로 직계 후손 결합 자라고 잘못 불립니다. 1 즉, 선택기 div > p.some_class 는 div 내부에 직접 중첩 된 .some_class 단락 만 일치 하고 더 내부에 중첩 된 단락은 일치하지 않습니다. div > p.some_class 와 일치하는 모든 요소가 div p.some_class 와 하위 결합 자 (공백)와 일치하므로 두 가지가 종종 혼동되는 것을 의미합니다. 하위 결합 자와 하위 결합자를 비교하는 그림 : div > p.some_class { ..

질문 : HTML에 PDF를 포함하는 권장 방법? HTML에 PDF를 포함하는 권장 방법은 무엇입니까? iFrame? Object? Embed? Adobe는 그것에 대해 무엇이라고 말합니까? 필자의 경우 PDF는 즉시 생성되므로 플러시하기 전에 타사 솔루션에 업로드 할 수 없습니다. 답변 아마도 가장 좋은 방법은 PDF.JS 라이브러리를 사용하는 것입니다. 타사 플러그인이없는 PDF 문서 용 순수 HTML5 / JavaScript 렌더러입니다. 온라인 데모 : https://mozilla.github.io/pdf.js/web/viewer.html GitHub : https://github.com/mozilla/pdf.js 출처 : https://stackoverflow.com/questions/29181..

질문 : CSS를 사용하여 텍스트 길이를 n 줄로 제한 CSS를 사용하여 텍스트 길이를 "n"줄로 제한 할 수 있습니까 (또는 세로로 오버플로되면 잘라 내기). text-overflow: ellipsis; 한 줄 텍스트에만 작동합니다. 원본 텍스트 : 농구 마우스는 부동산을 느끼고 내일 일부 아이들은 게임과 칠리는 트럭으로 졸업했습니다. CNN은 이제 냄비를 투자합니다! 하지만 그것은! 얼마나 못생긴 집 마우스 개발자! Dapibus sed fermentum, magna sagittis, lorem velit 원하는 출력 (2 줄) : 농구 마우스는 부동산을 느끼고 내일 일부 아이들은 게임과 칠리는 트럭으로 졸업했습니다. 답변 비공식 라인 클램프 구문을 사용하는 방법이 있으며 Firefox 68부터 모든..