아는것이힘이다

「 자바스크립트 : 버전 정보 비교하는 함수 예제 」 안녕하세요. 오늘은 자바스크립트로 버전을 비교하는 함수에 대해 알려드리려고 합니다. 이 함수는 두 버전 정보를 비교하여 첫 번째 버전이 큰지, 두 번째 버전이 큰지, 또는 두 버전이 같은지를 판단하여 결과를 반환합니다. 아래 예시는 이 함수를 이용하여 버전을 비교하는 간단한 예제입니다. 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

아이프레임 iframe 내의 컨텐츠의 길이에 따라 동적으로 높이 height를 조절하는 방법입니다. 아이프레임 iframe을 사용하지 않을래야 않을 수가 없는 현실! 웹개발자들이라면 많은 분들이 공감하시지요. ​ 아이프레임 iframe의 높이를 고정값으로 주거나 100%로 줄 수도 있지만 contents 내용의 양과 길이에 따라 세로 스크롤 없이 모두 보여주어야 할 때가 있지요. 이럴 땐 이렇게. ​ 소스코드 tip. ​ contentPage.html의 내용이 일반적인 텍스트 위주의 내용이면 상관없겠지만 혹시 로딩이 오래 걸리는 컨텐츠인 경우, 예를 들어 그래프나 챠트를 로딩하는 경우에는 약간의 딜레이가 발생할 수 있기 때문에 setTimeout으로 아이프레임의 높이를 지연설정하도록 해 주는 것이 좋아요.

Javascript 2022. 2. 1. 18:25

컴퓨터 프로그램은 언제 어떻게 발생할지 모르는 예외 상황에 대처하기 위한 대비가 잘 되어 있어야 합니다. 프로그램이 예상과는 다른 결과를 마주치게 될 때, 또는 에러상황에 직면해 있을 때 등의 상황에 대처하기 위한 코딩이 되어 있어야 좋은 프로그램이라고 할 수 있습니다. 일반적인 클라이언트 프로그램이나 데이터베이스 뿐 아니라 웹프로그래밍에 있어서도 동일합니다. 웹 프로그래밍의 자바스크립트를 작성함에 있어서도 이러한 예외처리가 잘 되어 있지 않으면 에러가 발생했을 때 웹페이지가 움직이지 않거나 반응이 없게 되는데 이럴 때를 대비하여 자바스크립트에는 try ~ catch 구문을 지원합니다. 이번 포스팅은 좋은 웹 개발자가 되기 위한 javascript의 기초적인 문법으로 try ~ catch 를 알아보겠습니..

SQL 2022. 1. 29. 10:47