아는것이힘이다

「 자바스크립트 : 버전 정보 비교하는 함수 예제 」 안녕하세요. 오늘은 자바스크립트로 버전을 비교하는 함수에 대해 알려드리려고 합니다. 이 함수는 두 버전 정보를 비교하여 첫 번째 버전이 큰지, 두 번째 버전이 큰지, 또는 두 버전이 같은지를 판단하여 결과를 반환합니다. 아래 예시는 이 함수를 이용하여 버전을 비교하는 간단한 예제입니다. function compareVersions(ver1, ver2) { const arr1 = ver1.split('.').map(Number); const arr2 = ver2.split('.').map(Number); for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) { const num1 = arr1[i] ..

Javascript 2024. 1. 31. 19:12

자바스크립트의 location 객체에서 가장 많이 사용되는 속성으로는 href가 대표적입니다. href는 현재 접속중인 웹페이지의 정보를 가지고 있기도 하면서, url를 이동하고자 할 때에도 이 href 속성을 변경해 주기도 합니다. ​ 웹사이트에서 어떤 버튼을 클릭하거나 특정 이벤트 발생 시 url 이동이 필요할 때 사용할 수 있습니다. location.href 값을 로그에 출력해 보겠습니다. 위와 같이 현재 페이지의 전체 url이 출력되었습니다. 따라서 location.href는 현재 웹페이지의 정보를 가지고 있다는 것이 확인되었습니다. 위 구문이 가장 많이 사용되는 예제입니다. 현재 페이지를 다른 페이지로 이동하고자 할 때 사용합니다. ​ 실제 사용 예제는 다음과 같습니다. 위와 같이 웹사이트 전체..

Javascript 2022. 11. 28. 13:52

「 자바스크립트 : windows.print를 활용 특정 영역만 인쇄 」 웹페이지에서 견적서 작성하는 작업을 하는 중에 화면에 보이는 견적서의 인쇄기능을 지원하기 위해 window.print() 를 활용할 수 있다. 화면에 보이는 내용을 그대로 프린트하고자 할 때에는 기본적으로 window.print()를 사용한다. 기본 : window.print() 인쇄하기 그런데 위와 같이 단순히 window.print()를 호출하면 화면에 보이는 모든 요소가 모두 인쇄되므로 아래쪽에 있는 [인쇄하기] 버튼까지도 인쇄가 되는 문제가 있다. - 특정 영역만 인쇄하기 버튼을 제외한 딱 문서부분만 인쇄하는 방법은 아래와 같다. 인쇄하기 인쇄할 영역을 div로 묶어준다. 위 예제에서는 가 되겠다. ​ 그리고 인쇄하기 버튼은..

Javascript 2022. 11. 24. 10:44

「 Javascript : NumberFormat 」 웹페이지에 자바스크립트를 활용하여 숫자를 출력할 때 천단위 이상의 숫자의 경우 길이가 너무 길면 가독성이 떨어지는 문제가 있다. ​ 이때 천단위마다 콤마(,)를 삽입해 주면 훨씬 읽기가 쉬워진다. ​ 자바스크립트로 숫자 데이터에 콤마를 삽입해 주는 몇가지 예제를 소개한다. - Intl.NumberFormat //100000 -> 100,000 console.log(new Intl.NumberFormat('en-US').format(100000)); console.log(new Intl.NumberFormat('ko-KR').format(200000)); console.log(new Intl.NumberFormat('ja-JP').format(30000..

Javascript 2022. 11. 21. 11:06

숫자로 된 정보를 읽을 때, 특히 단위가 큰 숫자를 읽을 때 우리는 세자리마다 콤마가 찍혀있지 않으면 가독성이 떨어지지요. 아래 예시를 보실까요. 콤마가 없는 숫자 정보 41325515원 콤마가 있는 숫자 정보 41,325,515원 숫자에 콤마가 없는 경우 우리는 오른쪽 일의 자리부터 일십백천만... 단위를 먼저 세기 마련입니다. 읽기가 어렵다는 뜻이죠. ​ 마찬가지로, 웹사이트에서 어떤 정보를 입력하는 input 태그에 제품의 가격이나 기타 숫자 정보를 입력할 때 세자리마다 콤마가 없으면 좀 난감합니다. 위 그림은 어떤 제품의 정보를 입력하는 입력폼입니다. 제품가격에 숫자를 입력해야 하는데 단위가 큰 경우 입력할 때에도 백만단위인지 천만단위인지 한 눈에 알아보기 어렵습니다. 하지만 위와 같이 숫자를 입..

Javascript 2022. 11. 15. 15:16

「 자바스크립트 : 중복 클릭 이벤트 막기 」 특정 submit버튼이나 이미지, 링크 등을 클릭 발생으로 인한 어떤 이벤트 처리를 할 수 있는데 경우에 따라서는 이것을 중복(더블)클릭했을 때 문제가 되는 경우도 있습니다. 클릭으로 인한 함수가 한 번만 실행되어야 하는데 중복클릭으로 인하여 두 번 이상 실행되면 오동작을 일으킬 수 있습니다. ​ 이와 같이 원치 않는 동작을 막기 위한 더블클릭을 막는 방법은 아래와 같이 여러가지가 있습니다. ​ [중복클릭을 무력화하는 4가지 방법] ​ 1) 자바스크립트로 disabled 처리하는 방법 2) 제이쿼리로 disabled 처리하는 방법 3) confirm() 메세지를 이용한 방법 4) 클릭체크 변수를 활용한 방법 ​ 이번 포스팅에서는 마지막 4번째 방법인 클릭체크..

Javascript 2022. 11. 10. 16:39

안녕하세요! ​ 이번 포스팅은 스윗 얼럿 플러그인의 사용법을 알아볼게요. ​ 자바스크립트로 경고창(얼럿창)을 띄우는 가장 간단한 방법은 alert(); 메소드일텐데요. ​ alert()의 경우 브라우저마다 위치나 모양이 다르게 표시되기 때문에 일관성이 떨어진다는 문제가 있지요. ​ 그런 문제를 해결하기 위해 보기에도 좋고 예쁜 스윗얼럿을 이용할 수 있는데요. ​ sweet alert 적용방법이 매우 간단하니까 한 번 적용해 보세요! 먼저 이해를 돕기 위해.. 아래와 같이 입력폼과 버튼이 있구요. 아이디를 입력하지 않고 확인을 누르면 alert 이 발생하죠. 기본적인 alert()를 이용하면 이렇게 되죠. 이걸 sweet alert를 이용하여 얼럿을 띄우면 아래처럼 출력됩니다. 훨~씬 이쁘죠? 얼럿이 나올..

Javascript 2022. 8. 22. 15:42

부트스트랩은 반응형이며모바일 우선인 웹프로젝트 개발을 위한가장 인기있는HTML, CSS, JS 프레임워크입니다   아래 링크로 이동하면 더 많은 템플릿이 소개되어 있습니다. ▼ ▼ ▼ ▼ ▼ ▼    HTML 부트스트랩(Bootstrap) 템플릿 사이트 16선HTML 부트스트랩(Bootstrap) 템플릿 사이트 16선   부트스트랩(Bootstrap)은 트위터 개발자들이 처음 개발한 오픈 소스 프론트엔드 프레임워크로, 웹사이트와 웹 애플리케이션 개발을 보다 쉽고 빠르lemonvita.tistory.com    부트스트랩은 최근 가장 널리 애용되고 있는 Front-end framework 가 아닐까 합니다.기기의 환경에 구속되지 않도록 설계되어 있기 때문에 반응형 웹사이트는 기본으로 구현이 가능합니다.각종..

Javascript 2022. 8. 19. 16:35