728x90
반응형

프로그래밍 언어/HTML,CSS,JS 438

jQuery로 HTML 문자열 이스케이프

질문 : jQuery로 HTML 문자열 이스케이프 누구든지 jQuery의 문자열에서 HTML을 이스케이프하는 쉬운 방법을 알고 있습니까? 임의의 문자열을 전달할 수 있어야하며 HTML 페이지에 표시하기 위해 적절하게 이스케이프 처리해야합니다 (JavaScript / HTML 주입 공격 방지). 이 작업을 수행하기 위해 jQuery를 확장 할 수 있다고 확신하지만 현재로서는 프레임 워크에 대해 충분히 알지 못합니다. 답변 jQuery를 사용하고 있으므로 요소의 text 속성 만 설정할 수 있습니다. // before: // text var someHtmlString = ""; // set a DIV's text: $("div.someClass").text(someHtmlString); // after: /..

컨트롤러를 두 번 실행하는 AngularJS와의 전투

질문 : 컨트롤러를 두 번 실행하는 AngularJS와의 전투 $watch 이벤트, 지속적으로 모델 상태 확인 등과 같은 일부 코드를 두 번, 때로는 더 많이 실행한다는 것을 이해합니다. 그러나 내 코드 : function MyController($scope, User, local) { var $scope.User = local.get(); // Get locally save user data User.get({ id: $scope.User._id.$oid }, function(user) { $scope.User = new User(user); local.save($scope.User); }); //... 두 번 실행되어 2 개의 레코드를 내 DB에 삽입합니다. 나는 오랫동안 이것에 대해 머리를 두드리는..

Node.js 프로젝트 용 package.json 파일을 자동으로 빌드하는 방법

질문 : Node.js 프로젝트 용 package.json 파일을 자동으로 빌드하는 방법 package.json은 수동으로 편집해야합니까? npm과 같은 프로그램은 파일을 살펴보고 "require"문을 본 다음이를 사용하여 package.json 파일에 필요한 항목을 넣을 수는 없습니까? 그런 프로그램이 있나요? 답변 package.json 파일은 npm 에서 node.js 프로젝트에 대해 학습하는 데 사용됩니다. npm init 를 사용하여 package.json 파일을 생성하십시오! npm과 함께 제공됩니다. https://docs.npmjs.com/cli/init에서 문서를 읽으십시오. 또한이 파일을 프로그래밍 방식으로 생성하는 데 사용할 수있는 공식 도구가 있습니다. https://github.c..

중첩 된 객체, 배열 또는 JSON에 액세스하고 처리하는 방법

질문 : 중첩 된 객체, 배열 또는 JSON에 액세스하고 처리하려면 어떻게해야합니까? 개체와 배열을 포함하는 중첩 된 데이터 구조가 있습니다. 특정 또는 여러 값 (또는 키)에 액세스하는 등 정보를 추출하려면 어떻게해야합니까? 예를 들면 : var data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }; 어떻게 액세스 할 수 name 의 두 번째 항목의 items ? 답변 JavaScript에는 여러 값을 포함 할 수있는 하나의 데이터 유형 ( Object) 만 있습니다. 배열 은 특별한 형태의 객체입니다. (일반) 개체는 다음과 같은 형태를 갖습니다. {key: value, key: value, ...} 배열의 형식은 [..

JavaScript 배열을 무작위로 섞는 방법

질문 : JavaScript 배열을 무작위로 섞는 방법은 무엇입니까? 다음과 같은 배열이 있습니다. var arr1 = ["a", "b", "c", "d"]; 무작위로 섞는 방법은 무엇입니까? 답변 사실상 편향되지 않은 셔플 알고리즘은 Fisher-Yates (일명 Knuth) 셔플입니다. https://github.com/coolaj86/knuth-shuffle 참조 여기에서 멋진 시각화를 볼 수 있습니다 (그리고 여기에 링크 된 원본 게시물). function shuffle(array) { var currentIndex = array.length, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) {..

HTML을 사용하여 문서의 모든 페이지에 머리글과 바닥글을 출력하는 방법

질문 : HTML을 사용하여 문서의 모든 페이지에 머리글과 바닥글을 출력하는 방법은 무엇입니까? 출력된 각 페이지에 사용자 정의 머리글 및 바닥 글이있는 HTML 페이지를 출력할 수 있습니까? 내용에 관계없이 모든 출력페이지의 상단과 하단에 Red, Arial, 크기 16pt로 "UNCLASSIFIED"라는 단어를 추가하고 싶습니다. 명확히하기 위해 문서가 5 페이지에 출력된 경우 각 페이지에는 사용자 정의 머리글과 바닥 글이 있어야합니다. HTML / CSS를 사용하여 이것이 가능한지 아는 사람이 있습니까? 답변 바닥 글로 지정할 요소를 position : fixed 및 bottom : 0으로 설정하면 페이지가 출력될 때 각 출력된 페이지의 맨 아래에 해당 요소가 반복됩니다. 헤더 요소에서도 동일하게 ..

angular HTML 바인딩

질문 : angular HTML 바인딩 Angular 응용 프로그램을 작성 중이며 표시하려는 HTML 응답이 있습니다. 어떻게하나요? 단순히 바인딩 구문 {{myVal}} 하면 모든 HTML 문자가 인코딩됩니다 (물론). div innerHTML 을 변수 값에 바인딩해야합니다. 답변 올바른 구문은 다음과 같습니다. 문서 참조 출처 : https://stackoverflow.com/questions/31548311/angular-html-binding

jQuery에서 여러 CSS 속성을 정의하는 방법

질문 : jQuery에서 여러 CSS 속성을 정의하는 방법은 무엇입니까? jQuery에 다음과 같이 모든 것을 오른쪽으로 묶지 않고 여러 CSS 속성을 정의하는 구문 적 방법이 있습니까? $("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt"); 예를 들어이 중 20 개가 있으면 코드를 읽기 어렵게됩니다. 해결책이 있습니까? 예를 들어 jQuery API에서 jQuery는 두 가지 모두에 대해 올바른 값을 이해하고 반환합니다. .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 과 .css({backgroundColor: "#ffe", bor..

CSS 컨텐츠를 사용하여 HTML 엔티티 추가

질문 : CSS 컨텐츠를 사용하여 HTML 엔티티 추가CSS content 속성을 사용하여 HTML 엔터티를 추가하는 방법은 무엇입니까?이와 같은 것을 사용하면 끊기지 않는 공백 대신 화면에 :.breadcrumbs a:before { content: ' '; } 답변이스케이프 된 유니 코드를 사용해야합니다.처럼.breadcrumbs a:before { content: '\0000a0'; } 자세한 정보 : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/출처 : https://stackoverflow.com/questions/190396/adding-html-entities-using-css-content

Node.js (package.json) 용 "devDependencies"NPM 모듈의 설치를 방지하는 방법

질문 : Node.js (package.json) 용 "devDependencies"NPM 모듈의 설치를 어떻게 방지합니까? 내 package.json 파일 (축약 버전)에 다음이 있습니다. { "name": "a-module", "version": "0.0.1", "dependencies": { "coffee-script": ">= 1.1.3" }, "devDependencies": { "stylus": ">= 0.17.0" } } Mac 10.6.8에서 NPM 버전 1.1.1을 사용하고 있습니다. 프로젝트 루트에서 다음 명령을 실행하면 dependencies 과 devDependencies 모두 설치됩니다. npm install devDependencies 설치했다는 인상을 받았습니다. npm ins..

JavaScript는 단일 스레드가 보장되는걸까?

질문 : JavaScript는 단일 스레드가 보장됩니까? JavaScript는 모든 최신 브라우저 구현에서 단일 스레드로 알려져 있지만 표준에 지정되어 있습니까 아니면 전통에 의해서만 지정됩니까? JavaScript가 항상 단일 스레드라고 가정하는 것이 완전히 안전합니까? 답변 그건 좋은 질문이야. “예”라고 말하고 싶습니다. 난 못해. JavaScript는 일반적으로 scripts (*)에 단일 실행 스레드가 표시되는 것으로 간주되므로 인라인 스크립트, 이벤트 리스너 또는 시간 제한이 입력되면 블록 또는 함수의 끝에서 돌아올 때까지 완전히 제어 할 수 있습니다. (* : 브라우저가 실제로 하나의 OS 스레드를 사용하여 JS 엔진을 구현하는지 또는 다른 제한된 실행 스레드가 WebWorkers에 의해 도..

AngularJS 클릭 stopPropagation

질문 : AngularJS 클릭 stopPropagation 테이블 행에 클릭 이벤트가 있고이 행에는 클릭 이벤트가있는 삭제 버튼도 있습니다. 삭제 버튼을 클릭하면 행의 클릭 이벤트도 시작됩니다. 다음은 내 코드입니다. {{user.firstname}} {{user.lastname}} {{user.email}} Delete 테이블 셀에서 삭제 버튼을 클릭 할 때 showUser 이벤트가 발생하지 않도록하려면 어떻게해야합니까? 답변 ngClick 지시문 (및 기타 모든 이벤트 지시문)은 동일한 범위에서 사용할 수있는 $event 이 변수는 JS event stopPropagation() 을 호출하는 데 사용할 수 있습니다. {{user.firstname}} {{user.lastname}} Delete PL..

HTML 표의 자동 줄 바꿈

질문 : HTML 표의 자동 줄 바꿈 word-wrap: break-word 를 사용하여 div 및 span s의 텍스트를 줄 바꿈했습니다. 그러나 표 셀에서는 작동하지 않는 것 같습니다. 한 행과 두 개의 열 width:100% 설정된 테이블이 있습니다. 열의 텍스트는 위의 word-wrap 스타일이 지정되었지만 줄 바꿈되지 않습니다. 이로 인해 텍스트가 셀 경계를 넘어갑니다. 이것은 Firefox, Google Chrome 및 Internet Explorer에서 발생합니다. 소스는 다음과 같습니다. td { border: 1px solid; } Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo..

Node.js는 경로가 파일인지 디렉토리인지 확인합니다.

질문 : Node.js는 경로가 파일인지 디렉토리인지 확인합니다. 이 작업을 수행하는 방법을 설명하는 검색 결과를 얻을 수없는 것 같습니다. 내가 원하는 것은 주어진 경로가 파일인지 디렉토리 (폴더)인지 알 수있는 것뿐입니다. 답변 다음은 당신에게 알려줄 것입니다. 문서에서 : fs.lstatSync(path_string).isDirectory() fs.stat () 및 fs.lstat ()에서 반환 된 객체는이 유형입니다. stats.isFile() stats.isDirectory() stats.isBlockDevice() stats.isCharacterDevice() stats.isSymbolicLink() // (only valid with fs.lstat()) stats.isFIFO() stats..

<div> 가운데 정렬 하는 방법

질문 : 가운데 정렬 하는 방법 블록 요소를 가로로 가운데에 배치하고 최소 너비로 설정하려고합니다. 이를 수행하는 가장 간단한 방법은 무엇입니까? 요소가 내 페이지의 나머지 부분과 인라인되기를 원합니다. 예를 들어 보겠습니다. page text page text page text page text page text page text page text page text ------- | div | ------- page text page text page text page text page text page text page text page text 답변 너비가 고정되지 않은 div의 경우 (즉, div가 차지할 공간의 양을 알지 못함). #wrapper { background-color: green; ..

Chrome의 CSS 사용자 정의 스타일 버튼에서 파란색 테두리 제거

질문 : Chrome의 CSS 사용자 정의 스타일 버튼에서 파란색 테두리 제거 웹 페이지에서 작업 중이며 사용자 지정 스타일의 태그를 원합니다. 그래서 CSS를 사용하면 border: none 이라고 말했습니다. 이제는 사파리에서 완벽하게 작동하지만 크롬에서는 버튼 중 하나를 클릭하면 주위에 성가신 파란색 테두리가 표시됩니다. button:active { outline: none } 또는 button:focus { outline:none } 이 작동한다고 생각했지만 둘 다 작동하지 않습니다. 어떤 아이디어? 다음은 클릭되기 전의 모습입니다 (클릭 한 후에도 계속 표시되는 방식). 그리고 이것이 제가 말하는 경계입니다. 내 CSS는 다음과 같습니다. button.launch { background-colo..

클릭시 HTML 텍스트 입력의 모든 텍스트 선택

질문 : 클릭시 HTML 텍스트 입력의 모든 텍스트 선택HTML 웹 페이지에 텍스트 상자를 표시하는 다음 코드가 있습니다. 페이지가 표시되면 텍스트 에 사용자 ID를 입력하십시오 메시지가 포함됩니다. 그러나 모든 텍스트를 선택하려면 사용자가 3 번 클릭해야한다는 것을 알았습니다 (이 경우 사용자 ID를 입력하십시오 ).클릭 한 번으로 전체 텍스트를 선택할 수 있습니까?편집하다:죄송합니다. 입력 type="text"답변이 자바 스크립트 스 니펫을 사용할 수 있습니다. 그러나 분명히 모바일 Safari에서는 작동하지 않습니다. 이 경우 다음을 사용할 수 있습니다. 출처 : https://stackoverflow.com/questions/4067469/selecting-all-text-in-html-text-..

Node.js를 사용하려면 ES6 import / export가 필요합니다.

질문 : Node.js를 사용하려면 ES6 import / export가 필요합니다. 공동 작업중인 프로젝트에서 사용할 수있는 모듈 시스템에 대해 두 가지 선택이 있습니다. 하나를 다른 것보다 사용하면 성능상의 이점이 있습니까? Node 1보다 ES6 모듈을 사용하려면 알아야 할 다른 것이 있습니까? 답변 하나를 다른 것보다 사용하면 성능상의 이점이 있습니까? ES6 모듈을 기본적으로 지원하는 JavaScript 엔진은 아직 없습니다. 당신은 Babel을 사용하고 있다고 스스로 말했습니다. Babel은 기본적 import 및 export 선언을 CommonJS ( require / module.exports )로 변환합니다. 따라서 ES6 모듈 구문을 사용하더라도 Node.js에서 코드를 실행하면 내부에..

node.js에서 __dirname과 ./의 차이점

질문 : node.js에서 __dirname과 ./의 차이점은 무엇입니까? Node.js로 프로그래밍하고 현재 디렉토리와 관련하여 어딘가에있는 파일을 참조 할 때 일반 ./ __dirname 변수를 사용하는 이유가 있습니까? 지금까지 내 코드에서 ./을 사용해 왔고 방금 __dirname 의 존재를 발견했으며 본질적으로 내 ./를 변환하는 것이 현명한 지 여부를 알고 싶습니다. 그렇다면 왜 이것이 현명한 지 알고 싶습니다. 생각. 답변 Node.js에서 __dirname 은 항상 현재 실행중인 스크립트가있는 디렉토리입니다 ( this 참조 ). __dirname 에 /d1/d2/myscript.js 을 입력하면 값은 /d1/d2 됩니다. 대조적으로 . path 및 fs 와 같은 라이브러리를 사용할 때 터..

JavaScript를 통해 오디오를 재생하는 방법

질문 : JavaScript를 통해 오디오를 재생하는 방법 HTML5와 JavaScript로 게임을 만들고 있습니다. JavaScript를 통해 게임 오디오를 재생하려면 어떻게해야합니까? 답변 HTML 요소를 엉망으로 만들고 싶지 않은 경우 : var audio = new Audio('audio_file.mp3'); audio.play(); function play() { var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'); audio.play(); } Play Audio function play() { var audio = new Audio('https://interactiv..

파일이 예외없이 존재하는지 확인하는 방법

질문 : 파일이 예외없이 존재하는지 어떻게 확인합니까? try 문을 사용하지 않고 파일이 있는지 여부를 어떻게 확인합니까? 답변 당신은 같은 것을 할 수 있도록하는 이유 당신이있는 거 검사 인 경우 if file_exists: open_it() , 그것은 사용하는 것이 안전합니다 try 를 열기 위해 시도 주위를. 확인하고 열면 파일이 삭제되거나 이동 될 위험이 있습니다. 파일을 즉시 열 계획이 아니라면 os.path.isfile 경로가 기존 일반 파일이면 True 반환합니다. 이것은 심볼릭 링크를 따르므로 islink () 및 isfile () 모두 동일한 경로에 대해 참일 수 있습니다. import os.path os.path.isfile(fname) 파일인지 확인해야하는 경우. Python 3.4부..

CSS 상자 그림자 하단만 보이기

질문 : CSS 상자 그림자 하단만 보이기 어떻게 할 수 있습니까? 내 요소가 그림자 밑줄이있는 것처럼 보이기를 원합니다. 다른 3면의 그림자를 원하지 않습니다. 답변 이 작업을 수행: box-shadow: 0 4px 2px -2px gray; 흐림을 (3 번째 값)으로 설정하고 스프레드 (4 번째 값)를 음수로 설정하는 것이 실제로 훨씬 더 간단합니다. 출처 : https://stackoverflow.com/questions/4561097/css-box-shadow-bottom-only

JavaScript에서 선택적 함수 매개 변수를 수행하는 좋은 방법

질문 : JavaScript에서 선택적 함수 매개 변수를 수행하는 더 좋은 방법이 있습니까? 저는 항상 다음과 같이 JavaScript에서 선택적 매개 변수를 처리했습니다. function myFunc(requiredArg, optionalArg){ optionalArg = optionalArg || 'defaultValue'; // Do stuff } 더 나은 방법이 있습니까? 사용하는 경우가 || 실패 할 것 같은가요? 답변 optionalArg가 전달되면 논리가 실패하지만 false로 평가됩니다. 대안으로 시도해보세요. if (typeof optionalArg === 'undefined') { optionalArg = 'default'; } 또는 다른 관용구 : optionalArg = (typeo..

CSS로 Firefox 만 타겟팅

질문 : CSS로 Firefox 만 타겟팅 조건부 주석을 사용하면 브라우저 별 CSS 규칙으로 Internet Explorer를 쉽게 타겟팅 할 수 있습니다. 때때로 오작동하는 것은 Gecko 엔진 (Firefox)입니다. CSS 규칙으로 Firefox 만 타겟팅하고 다른 브라우저 하나만 타겟팅하는 가장 좋은 방법은 무엇입니까? 즉, Internet Explorer는 Firefox 전용 규칙을 무시해야 할뿐만 아니라 WebKit 및 Opera도 무시해야합니다. 참고 : '깨끗한'솔루션을 찾고 있습니다. JavaScript 브라우저 스니퍼를 사용하여 내 HTML에 'firefox'클래스를 추가하는 것은 내 생각에 깨끗한 것으로 간주되지 않습니다. 조건부 주석이 IE에만 '특별한'것처럼 브라우저 기능에 따라..

728x90
반응형