728x90
반응형

JavaScript 302

JavaScript 객체를 출력(디버깅) 하는 방법

질문 : JavaScript 객체를 어떻게 표시 할 수 있습니까? 변수를 alert 할 때와 같은 문자열 형식으로 JavaScript 객체의 내용을 어떻게 표시합니까? 개체를 표시하려는 동일한 형식의 방법입니다. 답변 디버깅 목적으로 개체를 인쇄하려면 다음 코드를 사용하십시오. var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}} console.log(obj) 표시됩니다 : 참고 : 개체 만 기록해야합니다. 예를 들어 다음은 작동하지 않습니다. console.log('My object : ' + obj) 참고 ' log 메서드에 쉼표를 사용할 수도 있습니다. 그러면 출력의 첫 번째 줄이 문자열..

JavaScript 객체로 이루어진 배열의 요소 변수에 담기

질문 : 문자열 경로로 중첩 된 JavaScript 객체 및 배열에 액세스 다음과 같은 데이터 구조가 있습니다. var someObject = { 'part1' : { 'name': 'Part 1', 'size': '20', 'qty' : '50' }, 'part2' : { 'name': 'Part 2', 'size': '15', 'qty' : '60' }, 'part3' : [ { 'name': 'Part 3A', 'size': '10', 'qty' : '20' }, { 'name': 'Part 3B', 'size': '5', 'qty' : '20' }, { 'name': 'Part 3C', 'size': '7.5', 'qty' : '20' } ] }; 그리고 다음 변수를 사용하여 데이터에 액세스하고 ..

JavaScript 날짜 형식을 지정하는 방법

질문 : JavaScript 날짜 형식을 지정하는 방법은 무엇입니까? 10-Aug-2010 일로 인쇄하도록 날짜 개체의 형식을 지정하려면 어떻게해야합니까? 답변 DateTimeFormat 객체 ( ECMAScript Internationalization API의 일부)에서 날짜 (또는 시간) 구성 요소를 가져온 다음 원하는 구분 기호로 문자열을 수동으로 만들어야합니다. DateTimeFormat#formatToParts 사용할 수 있습니다. 배열을 분해 할 수는 있지만 배열 출력이 로케일에 따라 다르기 때문에 이상적이지 않습니다. { // example 1 let f = new Intl.DateTimeFormat('en'); let a = f.formatToParts(); console.log(a); }..

JavaScript 변수 이름에 유효한 문자 목록

질문 : JavaScript 변수 이름에 유효한 문자는 무엇입니까? JavaScript 변수의 이름을 지정하는 데 사용할 수있는 문자는 무엇입니까? 여기 직장에서 자바 스크립트를 사용하지 않는 사용자를위한 작은 "확장 라이브러리"를 만들고 싶습니다 (언어에 관해서는 모두 짜증나는 것 같습니다). $ 달러 기호를 사용하는 방식을 좋아하고, jQuery를 사용하기 때문에 사용할 또 다른 멋진 단일 문자 기호를 찾고 있습니다. 몇 개의 캐릭터 만 테스트 할 수 있다는 것을 알고 있지만, (아마도 다른 인기있는 라이브러리와의 향후 통합을 고려하여) 시작할 캐릭터 목록의 범위를 좁히고 싶습니다. 답변 유효한 자바 스크립트 변수 이름 을 인용하려면 관련 사양 섹션을 요약 한 글을 작성했습니다. 식별자는 $ , _ ..

Javascript에서 배열 시작 부분에 새 배열 요소를 추가하는 방법

질문 : Javascript에서 배열 시작 부분에 새 배열 요소를 추가하려면 어떻게해야합니까? 배열 시작 부분에 요소를 추가하거나 앞에 추가해야합니다. 예를 들어, 내 배열이 아래와 같은 경우 : [23, 45, 12, 67] 그리고 내 AJAX 호출의 응답은 34 이며 업데이트 된 배열은 다음과 같습니다. [34, 23, 45, 12, 67] 현재 다음과 같이 할 계획입니다. var newArray = []; newArray.push(response); for (var i = 0; i < theArray.length; i++) { newArray.push(theArray[i]); } theArray = newArray; delete newArray; 이 작업을 수행하는 더 좋은 방법이 있습니까? Jav..

스크롤 후 요소가 보이는지 확인하는 방법

질문 : 스크롤 후 요소가 보이는지 확인하는 방법은 무엇입니까? AJAX를 통해 요소를로드하고 있습니다. 일부는 페이지를 아래로 스크롤해야만 볼 수 있습니다. 페이지의 보이는 부분에 요소가 있는지 알 수있는 방법이 있습니까? 답변 이것은 트릭을 수행해야합니다. function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom = docViewTop)); } 간단한 ..

[Javascript] html 클래스가 포함되어 있는지 확인하는 방법

질문 : 요소에 JavaScript의 클래스가 포함되어 있는지 확인하십시오. jQuery가 아닌 일반 JavaScript를 사용하여 요소에 클래스 가 포함되어 있는지 확인할 수있는 방법이 있습니까? 현재 나는 이것을하고있다 : var test = document.getElementById("test"); var testClass = test.className; switch (testClass) { case "class1": test.innerHTML = "I have class1"; break; case "class2": test.innerHTML = "I have class2"; break; case "class3": test.innerHTML = "I have class3"; break; case "..

JavaScript 링크 "#" vs "javascript : void (0)"

질문 : JavaScript 링크 "#"또는 "javascript : void (0)"에는 어떤 "href"값을 사용해야합니까? 다음은 JavaScript 코드 실행만을 목적으로하는 링크를 작성하는 두 가지 방법입니다. 기능, 페이지로드 속도, 유효성 검사 목적 등에서 어느 것이 더 낫습니까? function myJsFunc() { alert("myJsFunc"); } Run JavaScript Code 또는 function myJsFunc() { alert("myJsFunc"); } Run JavaScript Code 답변 javascript:void(0) 합니다. 세 가지 이유. # 사용을 장려하면 필연적으로 다음과 같은 함수의 반환 값을 사용하게됩니다. function doSomething() { ..

JavaScript에서 HTTP GET 요청 하는 방법

질문 : JavaScript의 HTTP GET 요청? JavaScript에서HTTP GET 요청을 수행해야합니다. 그렇게하는 가장 좋은 방법은 무엇입니까? Mac OS X 대시 코드 위젯에서이 작업을 수행해야합니다. 답변 브라우저 (및 Dashcode)는 JavaScript에서 HTTP 요청을 만드는 데 사용할 수있는 XMLHttpRequest 객체를 제공합니다. function httpGet(theUrl) { var xmlHttp = new XMLHttpRequest(); xmlHttp.open( "GET", theUrl, false ); // false for synchronous request xmlHttp.send( null ); return xmlHttp.responseText; } 그러나 동기..

Chrome에서 동일한 출처 정책 사용 중지 하는 방법

질문 : Chrome에서 동일한 출처 정책 사용 중지 Google의 Chrome 브라우저에서 동일 출처 정책 을 비활성화하는 방법이 있습니까? 답변 크롬 (또는 크롬)을 닫고 --disable-web-security 인수로 다시 시작합니다. 방금 이것을 테스트하고 "localhost"(chromium 5 / ubuntu에서 테스트 됨)에서 제공되는 페이지에 포함 된 src = "http://google.com"을 사용하여 iframe의 콘텐츠에 액세스 할 수 있는지 확인했습니다. 나에게 정확한 명령은 다음과 같습니다. 참고 : 명령을 실행하기 전에 모든 크롬 인스턴스를 종료하십시오. chromium-browser --disable-web-security --user-data-dir="[some direc..

개발관련/other 2021.12.16

자바스크립트 문자열의 첫 번째 문자를 얻는 방법

질문 : 문자열의 첫 번째 문자를 얻는 방법? 문자열이 있고 첫 번째 문자를 가져와야합니다. var x = 'somestring'; alert(x[0]); //in ie7 returns undefined 코드를 어떻게 수정할 수 있습니까? 답변 당신이 원하는 것은 charAt 입니다. var x = 'some string'; alert(x.charAt(0)); // alerts 's' 출처 : https://stackoverflow.com/questions/3427132/how-to-get-first-character-of-string

JavaScript를 사용하여 문자열에서 공백을 제거하는 방법

질문 : JavaScript를 사용하여 문자열에서 공백을 제거하는 방법은 무엇입니까? 문자열에서 공백을 제거하는 방법은 무엇입니까? 예를 들면 : 입력: '/var/www/site/Brand new document.docx' 산출: '/var/www/site/Brandnewdocument.docx' 답변 str = str.replace(/\s/g, ''); 예 var str = '/var/www/site/Brand new document.docx'; document.write( str.replace(/\s/g, '') ); 업데이트 : 이 질문을 바탕으로 다음을 수행합니다. str = str.replace(/\s+/g, ''); 더 나은 솔루션입니다. 동일한 결과를 생성하지만 더 빠르게 수행합니다. 정규..

JavaScript 창 크기 조정 이벤트를 연결하는 방법

질문 : JavaScript 창 크기 조정 이벤트 브라우저 창 크기 조정 이벤트에 연결하려면 어떻게해야합니까? 크기 조정 이벤트를 수신하는 jQuery 방법이 있지만이 하나의 요구 사항에 대해서만 프로젝트에 가져 오지 않는 것이 좋습니다. 답변 가장 좋은 방법은 크기 조정 이벤트에 연결하는 것입니다. window.addEventListener('resize', function(event) { ... }, true); jQuery는 표준 resize DOM 이벤트를 래핑합니다. window.onresize = function(event) { ... }; jQuery 는 크기 조정 이벤트가 모든 브라우저에서 일관되게 실행되도록 일부 작업을 수행 할 수 있지만 브라우저가 다른지 확실하지 않지만 Firefox,..

JavaScript 대신 TypeScript를 사용해야 하는 이유

질문 : TypeScript 란 무엇이며 JavaScript 대신 왜 사용합니까? TypeScript 언어가 무엇인지 설명해 주시겠습니까? 자바 스크립트 나 사용 가능한 라이브러리가 할 수없는 것이 무엇을 할 수 있습니까? 답변 나는 TypeScript가 여전히 뜨거운 언론 일 때이 답변을 썼습니다. 5 년 후, 이것은 괜찮은 개요이지만 아래 Lodewijk의 답변 을 더 자세히 살펴보십시오. 1000피트 View TypeScript 는 주로 선택적 정적 유형, 클래스 및 인터페이스를 제공하는 JavaScript의 상위 집합입니다. 가장 큰 이점 중 하나는 코드를 입력 할 때 일반적인 오류를 발견 할 수있는 풍부한 환경을 IDE에서 제공 할 수 있다는 것입니다. 내가 의미하는 바를 이해하려면 해당 언어에..

jQuery를 사용하여 JavaScript 개체에서 select 항목에 옵션을 추가하는 가장 좋은 방법

질문 : jQuery를 사용하여 JavaScript 개체에서 선택 항목에 옵션을 추가하는 가장 좋은 방법은 무엇입니까? jQuery를 사용하여 JavaScript 객체에서 옵션을 추가하는 가장 좋은 방법은 무엇입니까? 나는 플러그인이 필요하지 않은 것을 찾고 있지만 거기에있는 플러그인에도 관심이있을 것입니다. 이것이 내가 한 일입니다. selectValues = { "1": "test 1", "2": "test 2" }; for (key in selectValues) { if (typeof (selectValues[key] == 'string') { $('#mySelect').append('' + selectValues[key] + ''); } } 깔끔하고 간단한 솔루션 : 이것은 matdumsa의 정리..

JavaScript에서 호출자 함수를 찾는 방법

질문 : JavaScript에서 호출자 함수를 어떻게 찾습니까? function main() { Hello(); } function Hello() { // How do you find out the caller function is 'main'? } 호출 스택을 찾는 방법이 있습니까? 답변 이 솔루션은 더 이상 사용되지 않으며 MDN 설명서에 따라 더 이상 사용해서는 안 됩니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/caller function Hello() { alert("caller is " + Hello.caller); } 이 기능은 Function.caller 에서 비표준입니..

JavaScript에서 문자열이 숫자인지 확인하는 방법

질문 : (내장) JavaScript에서 문자열이 유효한 숫자인지 확인하는 방법 IsNumeric() 함수와 동일한 개념적 공간에 뭔가가 있기를 바랍니다. 답변 2020 년 10 월 2 일 : 많은 베어 본 접근 방식에는 여기에있는 많은 답변이 고려하지 못하는 미묘한 버그 (예 : 공백, 암시 적 부분 구문 분석, 기수, 배열 강제 변환 등)가 있습니다. 다음 구현은 사용자에게 적합 할 수 있지만 소수점 " . "이외의 숫자 구분 기호는 제공하지 않습니다. function isNumeric(str) { if (typeof str != "string") return false // we only process strings! return !isNaN(str) && // use type coercion to..

JavaScript를 사용하여 이미지를 Base64 문자열로 변환하는 방법

질문 : JavaScript를 사용하여 이미지를 Base64 문자열로 변환하려면 어떻게해야합니까? 내 이미지를 서버로 보낼 수 있도록 이미지를 Base64 문자열로 변환해야합니다. 이것에 대한 JavaScript 파일이 있습니까? 그렇지 않으면 어떻게 변환 할 수 있습니까? 답변 를 사용할 수 있습니다. 캔버스를 만들고 이미지를로드 한 다음 toDataURL() 을 사용하여 Base64 표현을 가져옵니다 (실제로는 data: URL이지만 Base64로 인코딩 된 이미지가 포함되어 있음). 출처 : https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript

자바스크립트 변수가 존재하는지 확인하는 방법

질문 : 변수가 존재하는지 확인 (정의 / 초기화 됨) 변수가 초기화되었는지 확인하는 방법이 더 낫거나 정확합니까? (변수가 무엇이든 담을 수 있다고 가정하면 (문자열, 정수, 객체, 함수 등)) if (elem) { // or !elem 또는 if (typeof(elem) !== 'undefined') { 또는 if (elem != null) { 답변 typeof 연산자를 원합니다. 구체적으로 특별히: if (typeof variable !== 'undefined') { // the variable is defined } 출처 : https://stackoverflow.com/questions/5113374/javascript-check-if-variable-exists-is-defined-initia..

JavaScript를 사용하여 텍스트 input 필드의 값을 확인하는 방법

질문 : JavaScript를 사용하여 텍스트 입력 필드의 값을 어떻게 얻습니까? JavaScript로 검색 중입니다. 나는 양식을 사용하지만 내 페이지에서 다른 것을 엉망으로 만듭니다. 이 입력 텍스트 필드가 있습니다. 그리고 이것은 내 JavaScript 코드입니다. 텍스트 필드의 값을 JavaScript로 가져 오려면 어떻게합니까? 답변 입력 텍스트 상자 값을 직접 가져 오는 다양한 방법이 있습니다 (입력 요소를 양식 요소 내부에 래핑하지 않고). 방법 1 : document.getElementById('textbox_id').value 를 사용하여 원하는 상자의 값을 가져옵니다. 예를 들어, document.getElementById("searchTxt").value; 참고 : 방법 2,3,4 및..

JavaScript를 사용하여 페이지를 다시 로드하는 방법

질문 : JavaScript를 사용하여 페이지를 다시로드하는 방법 JavaScript를 사용하여 페이지를 다시로드하려면 어떻게해야합니까? 모든 브라우저에서 작동하는 방법이 필요합니다. 답변 자바 스크립트 1.2 window.location.reload(false); // If we needed to pull the document from // the web-server again (such as where the document contents // change dynamically) we would pass the argument as 'true'. 자바 스크립트 1.1 window.location.replace(window.location.pathname + window.location.search..

CSS :: before 또는 :: after 를 자바스크립트로 제어하는 방법

질문 : 자바 스크립트 (또는 jQuery)를 사용하여 :: before 및 :: after와 같은 CSS 의사 요소 선택 및 조작 ::before 및 ::after (및 하나의 세미콜론이있는 이전 버전)과 같은 CSS 의사 요소를 선택 / 조작하는 방법이 있습니까? 예를 들어 내 스타일 시트에는 다음 규칙이 있습니다. .span::after{ content:'foo' } 바닐라 JS 또는 jQuery를 사용하여 'foo'를 'bar'로 어떻게 변경할 수 있습니까? 답변 데이터 속성이있는 의사 요소에 콘텐츠를 전달한 다음 jQuery를 사용하여이를 조작 할 수도 있습니다. HTML에서 : foo jQuery에서 : $('span').hover(function(){ $(this).attr('data-con..

form을 다른 페이지로 제출하는 방법

질문 : 양식 제출과 같은 JavaScript 게시 요청 브라우저를 다른 페이지로 지정하려고합니다. GET 요청을 원하면 다음과 같이 말할 수 있습니다. document.location.href = 'http://example.com/q=a'; 그러나 액세스하려는 리소스는 POST 요청을 사용하지 않으면 제대로 응답하지 않습니다. 이것이 동적으로 생성되지 않은 경우 HTML을 사용할 수 있습니다. 그런 다음 DOM에서 양식을 제출합니다. 하지만 정말로 저는 제가 말할 수있는 JavaScript 코드를 원합니다. post_to_url('http://example.com/', {'q':'a'}); 최고의 크로스 브라우저 구현은 무엇입니까? 편집하다 명확하지 않아서 죄송합니다. 양식을 제출하는 것처럼 브라우저..

JavaScript 객체가 비었는지 테스트 하는 방법

질문 : 빈 JavaScript 객체를 어떻게 테스트합니까? AJAX 요청 후 때때로 내 애플리케이션이 다음과 같이 빈 객체를 반환 할 수 있습니다. var a = {}; 그게 사실인지 어떻게 확인할 수 있습니까? 답변 ECMA 5+ : // because Object.keys(new Date()).length === 0; // we have to do some additional check obj // ? null and undefined check && Object.keys(obj).length === 0 && obj.constructor === Object 그러나 이로 인해 불필요한 배열이 생성됩니다 ( keys 의 반환 값). ECMA 이전 5 : function isEmpty(obj) { for..

728x90
반응형