CODE/JS
[JavaScript] 숫자 올림, 내림, 반올림, 버림
Date.

codepen : https://codepen.io/ksoyy/pen/abYNpNd


let num = 123.456789;

console.log(Math.ceil(num)); // 올림 : 124
console.log(Math.floor(num)); // 내림 : 123
console.log(Math.round(num)); // 반올림 : 123
console.log(parseInt(num)); // 버림 : 123

 

결과 확인

See the Pen 숫자 올림, 내림, 반올림, 버림 by kim so yeon (@ksoyy) on CodePen.

 

 

 

참고

올림 | Math.ceil()

내림 | Math.floor()

반올림 | Math.round()

버림 | parseInt()

[JavaScript] Number.prototype.toPrecision() - 자리수의 길이를 제한
Date.

toPrecision()
자리수의 길이를 제한합니다. 

문법 
number.toPrecision([precision])

주의사항
1에서 100 사이가 아닌 경우 RangeError가 발생합니다.
구현은 더 큰 값과 더 작은 값을 지원할 수 있습니다. ECMA-262는 최대 21 자리의 정밀도 만을 요구합니다.
console.log(numObj.toFixed(-1));
console.log(numObj.toFixed(101));

 

let numObj = 5.123456;

console.log(numObj.toPrecision()); // logs '5.123456'
console.log(numObj.toPrecision(5)); // logs '5.1235'
console.log(numObj.toPrecision(2)); // logs '5.1'
console.log(numObj.toPrecision(1)); // logs '5'

numObj = 0.000123;

console.log(numObj.toPrecision()); // logs '0.000123'
console.log(numObj.toPrecision(5)); // logs '0.00012300'
console.log(numObj.toPrecision(2)); // logs '0.00012'
console.log(numObj.toPrecision(1)); // logs '0.0001'

// 일부 상황에서는 지수 표기법이 반환 될 수 있습니다
console.log((1234.5).toPrecision(2)); // logs '1.2e+3'


참고 
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision
https://opentutorials.org/course/50/134

[JavaScript] Number.prototype.toFixed() - 소수점 처리 방법
Date.

toFixed()
소수점의 자리수의 길이를 제한합니다. 

문법 
numObj.toFixed([digits])
numObj.toFixed([소수 부분의 자릿수])

매개변수
소수점 뒤에 나타날 자릿수. 0 이상 20 이하의 값을 사용할 수 있으며, 구현체에 따라 더 넓은 범위의 값을 지원할 수도 있습니다. 값을 지정하지 않으면 0을 사용합니다.

주의사항
값이 0과 100사이의 값이라면 Uncaught RangeError: toFixed() digits argument must be between 0 and 100라는 오류가 발생됩니다.
console.log(numObj.toFixed(-1));
console.log(numObj.toFixed(101));

 

let numObj = 12345.6789;

numObj.toFixed(); // Returns '12346': 반올림하며, 소수 부분을 남기지 않습니다.
numObj.toFixed(1); // Returns '12345.7': 반올림합니다.
numObj.toFixed(6); // Returns '12345.678900': 빈 공간을 0으로 채웁니다.
(1.23e20).toFixed(2); // Returns '123000000000000000000.00'
(1.23e-10).toFixed(2); // Returns '0.00'
(2.34).toFixed(1); // Returns '2.3'
(2.35).toFixed(1); // Returns '2.4'. 이 경우에는 올림을 합니다.
-(2.34).toFixed(1); // Returns -2.3 (연산자의 적용이 우선이기 때문에, 음수의 경우 문자열로 반환하지 않습니다...)
(-2.34).toFixed(1); // Returns '-2.3' (...괄호를 사용할 경우 문자열을 반환합니다.)

 

 

참고

[Datepicker] 옵션정리
Date.

공식홈페이지 : https://jqueryui.com/datepicker/

 

옵션 설명
showOn focus (기본) focus 될때 달력이 열립니다.
button 버튼 클릭시에만 달력이 열리게 됩니다.
both focus, 버튼 두개다 사용하는 옵션입니다.
사용예제
$('.date_inp').datepicker({ showOn: 'both', });
buttonImage 버튼 이미지를 선택합니다.
buttonImageOnly false (기본) 버튼 기본 style 제거 입니다.
true 버튼 기본 style 제거 입니다.
buttonText '들어갈 문자를 입력해주세요.' showOn: button, both 옵션과 함께 사용해야합니다.
버튼에 이미지 대신 나올 텍스트 입력란 입니다.
사용예제
$('.date_inp').datepicker({ showOn: 'both', buttonText: '텍스트입력해주세요', });
changeYear false (기본) 년, 월을 select 박스를 표시합니다.
changeMonth true
yearRange c-10:c+10
yearRange:"-10:+10" // 2012~2032
yearRange:"2012:2032" // 2012~2032
둘다 사용 가능합니다.
연도를 선택할수 있는 select 박스가 생성됩니다.
dateFormat "yy-mm-dd" //2022-07-06
"yy,mm,dd" //2022,07,06
날짜 형식 옵션입니다.
dayNames ["월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"] 요일 툴팁입니다.
dayNamesMin ["월", "화", "수", "목", "금", "토", "일"] 표시되는 요일입니다.
monthNamesShort ["1월", "2월", "3월", "4월", "5월", "6월","7월", "8월", "9월", "10월", "11월", "12월"] 표시되는 월입니다.
showOtherMonths false(기본) 이전달, 다음달의 날짜 표시여부 입니다.
true
selectOtherMonths false(기본) 월 1일 이전, 월 말일 이후 빈칸에 이전달, 다음달 날짜를 출력할수 있는 옵션입니다.
showOtherMonths: ture 옵셥이 활성화 되어야 사용 가능합니다.
true
nextText "툴팁에 표시될 내용을 입력해주세요" 화살표의 툴팁 내용이 들어갈 공간입니다.
prevText
beforeShow beforeShow: function (Element input, Object inst) { }, datepicker 실행되기 전에 일을 컨트롤할수 있습니다.
사용예제
$('.date_inp').datepicker({ beforeShow: function (Element input, Object inst) { //소스를 입력해주세요 }, });
beforeShowDay beforeShowDay: function (Date date) {}, 날짜를 보여주기 전에 호출되는 이벤트입니다.
날짜표시에 대한 컨트롤이 가능합니다.
사용예제
$('.date_inp').datepicker({ beforeShowDay: function (Date date) { //소스를 입력해주세요 }, });
firstDay 0
일 - 0          월 - 1          화 - 2
수 - 3          목 - 4          금 - 5          토 - 6
시작 요일 순서를 바꾸는 옵션입니다.
기본으로 일,월,화,수,목,토로 설정되어있습니다.
minDate -10
"+3D"
최소 날짜를 설정할수 있는 옵션입니다.
maxDate 최대 날짜를 설정할수 있는 옵션입니다.
+,- 로 단위설정이 가능합니다
절대날짜로 Y(년), M(월), D(일)을 뒤에 붙여서 사용 가능합니다.
numberOfMonths [ 2, 3 ] //[행,열] 여러개의 달력을 표시할때 사용하는 옵셥입니다.
showWeek false(기본) true 일 경우 열이 추가되어 해당 연도의 주를 표시합니다.
true
stepMonths 3 달력에서 이전달, 다음달 선택시 이동할 개월수 입니다.
3 일경우 이전, 다음달로 3달로 이동됩니다.
onSelect onSelect:function (String date, Text Object inst){} 날짜가 선택될때 실행됩니다.
사용예제
$('.date_inp').datepicker({ onSelect:function (){ //코드를 입력해주세요 } });

 

일하면서 자주 사용하는 옵션들을 정리해봤습니다 :)

제가 정리한 옵션외에도 다른 옵션들이 있으니 공홈에서 확인해보세요 😉

[JavaScript] 클릭했을 때 뒤로 가는 버튼 (History.back())
Date.

업무에 필요해서 찾아보고 적용했던 부분인데 까먹기전에 메모용으로 남겨둡니당..!

 

https://developer.mozilla.org/ko/docs/Web/API/History/back

 

[JavaScript] scrollBottom, (일정 높이에서 멈추는) 하단에 따라다니는 버튼/텍스트
Date.

말을 뭐라고 해야할지 모르겠당.. scrollTop을 이용해서 scrollBottom 을 구해서 일정 높이에서 멈추는 버튼/텍스트를 사용하는 소스이다

 

작업할때 예시는 추후에 추가해야지

 

https://codepen.io/ksoyy/pen/OJpWPMQ 

 

scrollBottom, 하단에 따라다니는 버튼/텍스트

...

codepen.io

 

 

참고 : https://www.it-swarm-korea.com/ko/javascript/jquery-window-scrolltop-%EC%9D%B4%EC%A7%80%EB%A7%8C-window-scrollbottom-%EC%9D%80-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4/970288197/ 

 

javascript — jquery : $ (window) .scrollTop ()이지만 $ (window) .scrollBottom ()은 없습니다.

앞으로, scrollBottom을 jQuery 플러그인으로 만들었습니다. scrollTop과 같은 방식으로 사용할 수 있습니다 (즉, 숫자를 설정할 수 있으며 페이지 아래쪽에서 해당 양을 스크롤하여 아래쪽에서 픽셀 수

www.it-swarm-korea.com

 

[JavaScript] Number 함수 이해하기
Date.

공식문서 : 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number

 

 

👇 간단하게 이해하기

$(function(){
	var num = '10';
	document.write('num + 10 = ', num + 10,'</br>');
	document.write('num + 10 = ', Number(num) + 10,'</br>');
});

 

결과화면 : 

num + 10 = 1010
num + 10 = 20

 

num을 10으로 선언하고 num + 10의 결과는 문자 나열로 1010 이 나오지만,

Number() 함수를 사용해 Number(num)을 사용하면 10+10으로 20이라는 결과가 나온다!

[JavaScript] 이미지 클릭시 모달창에 띄우기
Date.

이걸 뭐라고 설명해야 할지 모르겠다...

이미지 클릭할때 모달창에 띄우기....

이거말구 더 설명할 방법이 있나..☞☜.. ㅠㅠㅠ

소스는 아래 주소에 있습니당:) !

 

 

codepen.io/ksoyy/pen/mdRejKq

 

클릭시 이미지 모달창에 띄우기

...

codepen.io

 

더보기

버튼 색상 #fff, #000, #f00 다해봐도 이상해서..

코드 넣을때 눈에 보인 색상 넣었당...

보기엔 이상해도 잘 작동하니까..!

 

이미지는 구글에서 상업 및 기타 라이선스로 검색후 사용했는데 문제있다면 댓글 부탁드려요!

[JavaScript] script 태그의 defer 속성
Date.

developer.mozilla.org/ko/docs/Web/HTML/Element/script

 

 

 

defer속성은 페이지 로드가 끝난후에 외부 스크립트를 실행하게 해준다.

속성값이 없을땐 false 값, 속성값이 있을땐 true 값을 가지게 된다.

<script src="/js/name.js" defer></script> 형식으로만 사용가능하다.