자바스크립트10 Javascript 로더(Loader) 만들기 자바스크립터와 CSS로 간단하게 로더를 만드는 코드입니다.jquery 라이브러리를 함께 사용합니다. CSS.loadingPopup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); z-index: 1000; justify-content: center; align-items: center;}.spinner { position: absolute; top: 50%; left: 50%; border: 8px solid #f3f3f3; /* Light grey */ border-top: 8px .. 2024. 7. 4. 자바스크립트 크롬에서 엣지로 링크 열기 특별한 경우 크롬에서 엣지 브라우저로 링크를 열어야 하는 경우가 있습니다. 예를 들면 회사에 엣지 기반으로 개발된 시스템은 크롬에서 정상 작동을 하지 않을 경우에 크롬 기반으로 개발하는 시스템에서 엣지 기반의 타 시스템을 엣지로 열어야 할 때입니다. 참고 : 반대로 엣지에서 크롬으로 여는 것은 안되네요. ㅠㅠ 자바스크립트 코드는 간단합니다. URL에 앞에 "microsoft-edge:"를 붙여주기만 하면 됩니다. 자바스크립트 예 window.location = "microsoft-edge:" + "https://www.naver.com"; HTML 예 엣지로 네이버 열기 2023. 11. 8. 자바스크립트 ==와 ===의 차이점 최근 개발하면서 프로그램에 버그가 발생하였습니다. 버그는 자바스크립트로 아래와 같이 처리 했는데, if문이 참이 되어 발생한 것이었습니다. 그래서 === 비교 연산자를 사용하여 버그를 수정하였습니다. var a = 0; var b = ""; if(a == b){ // true ... } ==와 === 비교 연산자의 차이점을 알아야 할 것 같습니다. == 연산자는 값만 비교하고, === 연산자는 값과 타입을 함께 비교하게 됩니다. 즉 1 == "1" 는 true이고, 1 === "1"은 false가 된다는 것입니다. 간단하 예제로 확인해보겠습니다. 숫자와 문자 비교 console.log(1 == "1");// true console.log(1 ==="1");// false 숫자와 참거짓 비교 console.. 2023. 10. 25. 자바스크립트 "YYYY-MM-DD" 형식의 문자 날짜 체크 자바스크립트로 날짜 정확한 날짜를 체크하는 것이 약간 애매합니다. Date.parse를 사용하면 좋은데, 단점이 2월 30일(2023-02-30)을 아규먼트로 넣어도 오류(NaN)가 발생하지 않는 현상이 발생합니다. 그리고 new Date("2023-02-30")로 넣어도 오류가 발생하지 않아 try catch를 할 수 없습니다. 날짜 문자(YYYY-MM-DD)를 체크 로직 순서는 아래과 같이 작성합니다. (1) YYYY-MM-DD 형식 체크 (2) Date.parse를 이용하여 정확한 날짜 체크 (3) new Date(...).toISOString() 함수로 날짜 문자와 Date형으로 형변환한 값이 동일한지 체크 1. YYYY-MM-DD 형식 체크 날짜 문자의 길이는 10이고, "-"로 문자를 분리한 .. 2023. 8. 29. HTML의 특정 Input에 붙여넣기 못하게 처리하는 방법 HTML의 특정 Input에 붙여넣기를 할 수 없도록 처리가 필요한 경우가 있습니다. 이럴경우 paste 이벤트를 등록하여 처리 할 수 있습니다. 아래의 소스를 참고하세요. 이름 설명 2022. 9. 22. Javascript 숫자 반올림 및 천자리 ","표시 함수 숫자를 특정 소숫점 자리에서 반올림하거나 천자리를 ","를 넣는 작업을 많이 합니다. 자바스크립트로 숫자 반올림 및 천자리 ","표시하는 함수를 만들어서 사용하게 되었습니다. 아래의 함수를 참고하세요. function roundNumberToString(value, roundCnt){ try{ var round = 1; for(var i = 0 ; i < roundCnt ; i++){ round *= 10; } var numValue = parseFloat(value); if(isNaN(numValue)){ throw "Not Number"; } // roundCnt 만큼 반올림 및 수숫점 자리 고정 var returnValue = (Math.round(numValue*round)/round).toFix.. 2022. 9. 19. Javascript JSONObject 배열 정렬하기 JSONObject로 구성된 배열(Array)를 정렬하는 방법입니다. [소스] var arr = [ { "name":"홍길도", "age":50 }, { "name":"이순신", "age":42 }, { "name":"김유신", "age":28 } ]; // 숫자 정렬 arr.sort(function(a,b) { return a.age - b.age; }); console.log(arr); //문저 arr.sort(function(a,b) { if(a.name > b.name) return 1; else if(a.name < b.name) return -1; else return 0; }); console.log(arr); [결과] 2021. 10. 18. Javascript 숫자에 천단위로 콤마(,) 넣기 쉽게 숫자에 천단위에 콤마를 넣는 방법입니다. Intl.NumberFormat() 사용 var number = 1234567890.123456; // 브라우저의 Local에 따라 표시 console.log(new Intl.NumberFormat().format(number)); // 한국 Local로 표시 console.log(new Intl.NumberFormat('ko-KR').format(number)); // 독일 Local로 표시 // 독일의 경우 천단위에 "."을 소숫점을 ","로 표시함. console.log(new Intl.NumberFormat('de-DE').format(number)); // 천단위 와 소숫점 자리(5자리) 표시 // "0"을 5자리까지 채우지는 않음 console.l.. 2021. 8. 3. [Javascript] 크롬 브라우저에서 클립보드에 문자 복사하기 크롬 브라우저에서 문자를 클립보드에 복사하는 코드입니다. 아래의 함수에 문자열을 넣으면 클립보드에 문자가 복사됩니다. function copyStringToClipboard (string) { function handler (event){ event.clipboardData.setData('text/plain', string); event.preventDefault(); document.removeEventListener('copy', handler, true); } document.addEventListener('copy', handler, true); document.execCommand('copy'); } 전체소스 2021. 7. 21. Javascript - getElementsByTagName, getElementsById, getElementsByClassName으로 HTML Element 찾기 자바스크립트로 HTML Element를 찾는 방법입니다. 3가지 방법으로 찾을 수 있는데 보통 ID로 찾는 document.getElementById를 가장 많이 사용합니다. 1. 태그명(Tag Name)으로 HTML Elements 찾기 - 아래의 Javascript로 HTML Elements를 찾을 수 있습니다. - 주의 할 점은 아래의 함수는 HTML Elements 배열로 리턴합니다. // Tag Name 태그 찾기 var a = document.getElementsByTagName("tagName"); 예제) 2. ID로 HTML Element 찾기 - 아래의 Javascript로 HTML Element를 찾을 수 있습니다. - 아래의 함수는 HTML Element를 리턴합니다. - 주의 할 점.. 2017. 3. 24. 이전 1 다음
