본문 바로가기

IT_Developers/Javascript79

JavaScript - 현재 시간이 오전, 오후인지 알아내기 안녕하세요. 고코더 입니다. 코딩을 하다 보면은 현재 시간이 오전인지? 오후인지? 알아내서 로직을 만들어 가는 경우가 있습니다. 그럴 경우 아주 간단하게 현재가 오전인지 오후인지 알아낼 수 있는 방법을 알아보겠습니다. ● 1. 우선 Date() 함수를 확장시켜 사용해보겠습니다. 해당 코드를 입력합니다. Date() 함수에 ampm이라는 기능을 확장하여 현재의 시간을 바라보고 am, pm 값을 반환합니다. Date.prototype.amPm = function() { let h = this.getHours() < 12 ? "am" : "pm"; return h; } ● 2. 사용하는 방법은 아래와 같습니다. Date를 새로운 객체를 만들어 amPm 기능을 호출하면 현재 시간에 오전, 오후 여부를 쉽게 알아.. 2021. 10. 31.
JavaScript - 자바스크립트 날짜 표시 "yyymmdd"를 "yyyy-mm-dd" 로 나타내기 / "19000101" -> "1900-01-01" 안녕하세요. 고코더 입니다. 실무를 하다 보면은 날짜 데이터를 커스텀해서 사용하는 경우가 많습니다. 그중에서도 가장 자주 만나는 형식은 "yyymmdd"를 "yyyy-mm-dd"로 변경하는 패턴입니다. ex) "20210101" -> "2021-01-01" 방법은 다양하지만 저는 쉽게 가는 방법부터 배워 보겠습니다. ● 1. substr를 사용하는 방법입니다. 문자열을 4자리 2자리 2자리를 잘라서 합쳐서 사용하는 가장 쉽고 좋은 방법입니다. let Today = "20210101" Today.substr(0, 4) + '-' + Today.substr(4, 2) + '-' + Today.substr(6, 2); ● 2. 다음은 정규식을 사용하는 방법입니다. let Today = "20210101" To.. 2021. 10. 31.
JavaScript - 자바스크립트로 특정 날짜 요일 알아내기 안녕하세요. 고코더 입니다. ● 1. 자바스크립트에서 특정 날짜에 요일을 알아내는 방법을 알아보겠습니다. 소스는 간단합니다. 우선 아래 코드를 확인해보세요. let week = new Array('일', '월', '화', '수', '목', '금', '토'); let today; let todayLabel; today = new Date("2021-01-01").getDay(); todayLabel = week[today]; ● 2. 결과는 당연히 잘나옵니다. 과거, 미래까지 원하는 날짜를 입력하면 요일이 출력됩니다. 그리고 week에 담긴 "일" 부터 "토"까지의 데이터를 바꾸면 해당 요일을 나타내는 텍스트를 바꿀수 있습니다. "일" 이라면 Sun 으로 바꿔서 사용이 가능합니다. 2021. 10. 31.
jQuery - 제이쿼리 최신 CDN 주소 / 구글, MS, cloudflare, jQuery 공홈 안녕하세요. 고코더 입니다. jQuery를 사용할 때 보통은 서버에 다운로드하여 링크를 따서 사용합니다. 하지만 테스트할 때나 상황에 따라서 CDN 주소를 사용하여 jQuery를 사용하기도 합니다. ● 1. jQuery 사이트에서 공식으로 사용하는 최신 제이쿼리 소스는 아래에 주소를 사용하면 됩니다. 버전업과 상관없이 최신 소스를 사용 가능합니다. 공식 사이트이기에 가장 신뢰가 가는 CDN 주소입니다. ● 2. 다음은 구글 제이쿼리 CDN 주소 입니다. 구글이라 안심하고 사용할 수 있습니다. 공식 jquery CDN 주소보다는 이 주소를 사용하는 경우가 좀 더 많은 거 같습니다. ● 3. cloudflare에서 제공하는 jQuery CDN입니다. ● 4. 마지막으로는 MS CDN 입니다. 2021. 10. 30.
jQuery - select 박스, 옵션 값 이외에 다른 값도 사용하기 안녕하세요. 고코더 입니다. 셀렉트 박스를 사용하다보면 옵션 value 값 이외에도 다른 데이터가 필요할 경우가 있습니다. 그럴 경우에는 data 함수를 사용하면 원하는 데이터를 얻을 수 있습니다. 예를 한번 들어보겠습니다. ● 1. 과일을 선택하는 셀렉트 박스를 만들었습니다. 그리고 value는 과일명 그리고 가격을 "data-price" 라는 속성에 값을 입력하였습니다. 빨간 과일 노란 과일 ● 2. 옵션 값 이외에 price 속성 값을 data() 함수를 사용해 가격을 가져왔습니다. 하나의 옵션 값에 두 가지 이상의 데이터를 가져오고 싶을때 사용 가능한 방법입니다. $("#fruit").on("change", function () { var value = $(this).val();//과일명 var .. 2021. 10. 30.
jQuery - 달력 플러그인 datepicker 비활성화 하기 / 사용하지 않게 처리 안녕하세요. 고코더 입니다. 달력 플러그인중에 최고의 기능을 자랑하는 녀석이 있다면 바로 "datepicker"입니다. 그런데 해당 달력 기능을 개발하던 중 특정한 상황에서 달력을 사용하지 못하게 해야 할 경우가 생겼습니다. 바로 데이트픽커를 사용하지 않게 해야할 경우입니다. 생각보다 간단하지만 헤매서 그 방법을 공유합니다. ● 1. 방법은 매우 간단합니다. 아래처럼 코딩을 하면 사용이 불가합니다. ("#달력").datepicker( "option", "disabled", true ); ● 2. 이렇게 달력이 비활성화되고 사용할 수 없게 됩니다. 정확히 말하면 클릭해도 반응이 없게 만들어집니다. ● 3. 반대로 다시 달력을 활성화시키고 싶다면 속성 값을 false로만 하면 됩니다. ("#달력").date.. 2021. 10. 30.
jQuery - 라디오박스 (radio box) readOnly 설정하기, 클릭되지 않게 하기 안녕하세요. 고코더 입니다. 라디오박스는 기본적으로 readOnly를 제공하지 않습니다. 그렇기 때문에 "disabled"를 처리할 수 밖에 없습니다. 하지만 명백히 이 두개는 상당히 다릅니다. 읽기 전용과 비활성화라는 다른 기능을 제공합니다. 그래서 오늘은 라디오 박스를 readOnly 처럼 사용할 수 있도록 jQuery를 통해 만드는 방법을 알아봅니다. ● 1. 해당 코드를 작성합니다. 선택자에서는 읽기전용으로 만들고 싶은 라디오 박스를 선택하고, 해당 코드를 실행합니다. 원리는 매우 간단합니다. 클릭시에 아무런 반응도 하지 않도록 이벤트를 주었습니다. $('input[name=radioBox]').click(function (event){ event.preventDefault(); event.sto.. 2021. 10. 30.
jQuery - parent() 부모요소를 선택하기 제이쿼리를 사용해, 부모요소 찾기 안녕하세요. 고코더 입니다. ● 1. jQuery에서 해당 요소위에 바로 위에 존재하는 부모 요소를 선택하는 방법을 알아보겠습니다. 실무에서 자주 사용하는 3가지 정도의 방법이 있지만 오늘은 하나의 부모 요소를 반환하는 parent() 를 사용해보겠습니다. ● 2. 해당 p태그의 상단에는 div 태그가 있습니다. 이를 한번 선택해보도록 하겠습니다. 부모를 찾아라 ● 3. 방법은 간단합니다. 자식요소에서 부모 요소를 찾는 방법은 .parent();를 사용합니다. $('p').parent(); ● 4. 조금 더 응용 해보겠습니다. 해당 처럼 사용하면 div 라는 태그가 선택되어, div 가 출력 됩니다. var tag = $('p').parent().prop('tagName.. 2021. 6. 29.
JavaScript - 배열 숫자 데이터 정렬하기 / sort(); 자바스크립트 배열 숫자 정렬 방법 안녕하세요. 고코더 입니다. 오늘은 자바스크립트에서 배열에 담긴 데이터를 정렬할 수 있는 함수를 한번 알아보려고 합니다. 내장 함수로 있는 바로 sort()가 그 주인공입니다. 오늘은 그중에서도 문자와 숫자를 정렬하는 방법을 알아보겠습니다. ● 1. 먼저 정렬할 배열을 선언합니다. data라는 변수에 정렬되지 않은 데이터를 입력하였습니다. var data = [1, 11, 12, 2, 3, 4]; ● 2. 이제 sort()를 기본으로 사용해 정렬해보겠습니다. 결과 값을 보시면 알겠지만 숫자도 문자 순서대로 정렬되어 뒤죽 반죽이 되었습니다. 1 다음 11이 오는 특징을 확인할 수 있습니다. data.sort(); // 결과값 [1, 11, 12, 2, 3, 4] ● 3. .. 2021. 4. 1.