본문 바로가기
반응형

소프트웨어 개발/javascript23

javascript - 자바스크립트 페이지 맨 위로 이동 스크롤 window.scroll javascript - 자바스크립트 페이지 맨 위로 이동 스크롤 window.scroll 테스트를 하기위해서 p태그를 삽입하였습니다. 실제 사용시 제거하시고 사용하시길 바랍니다. 테스트 스크롤 이동 2023. 2. 7.
javascript - 자바스크립트 마우스 오른쪽 클릭 방지/막기 contextmenu javascript - 자바스크립트 마우스 오른쪽 클릭 방지/막기 2023. 2. 7.
javascript - 자바스크립트 배열을 오브젝트(javascript object) 행태로 변환 자바스크립트 배열을 오브젝트(javascript object) 행태로 변환 const arr = [ ['이름', '세종대왕'], ['나이', '40'], ['주소', '서울특별시 종로구'] ]; const obj = Object.fromEntries(arr); console.log(obj); 2023. 2. 6.
javascript - 자바스크립트 input text 값 숫자 형태로 가져오기 valueAsNumber 개발자 도구> 콘솔창에서 확인 시 숫자 형태로 가지고 오시는 것을 확인이 가능합니다. 2023. 2. 6.
javascript - 텍스트 박스(input text box) 복사/잘라내기/붙여 넣기 방지 - 오른쪽 마우스 시도 텍스트 붙여넣기 방지 - ctrl + v 붙여넣기 방지 - 잘라내기 방지 - ctrl + c 방지 2023. 2. 6.
javascript - 자바스크립트 url검색 파리미터 값 가져오기 URLSearchParams const urlParams = new URLSearchParams(new URL("https://testsample.net/?test_param=testcode&mode=write").search); console.log(urlParams.get('test_param')); // testcode console.log(urlParams.has('mode')); console.log(urlParams.has('test_param_3')); //false 파라미터 존재 여부 확인 console.log(urlParams.toString()); //test_param=testcode&mode=write urlParams.append('add', 'addtest'); //test_param=testcode&mod.. 2023. 2. 4.
[javascript] 자바스크립트 텍스트(text) 음성출력 SpeechSynthesisUtterance - text to speech 1. volume - 소리크기 0이 낮음 1이 높음 - 범위 (0 ~ 1) 2. rate - 범위 0.1 ~ 10 - 기본값 1이며 1은 정상적인 말하기 속도에 해당합니다. 3.text 발화에서 말할 수 있는 텍스트의 최대 길이 32,767자 입니다. 4. pitch 범위는 0(가장 낮음)과 2(가장 높음) 사이이며 1은 현재 플랫폼 또는 음성의 기본 피치입니다. 5. lang BCP 47 언어 태그 사용 2023. 2. 4.
[javascript] 자바스크립트 json 문법검사 자바스크립트 json 문법검사 const isJsonVailid = str => { try { JSON.parse(str); return true; } catch (e) { return false; } }; console.log(isJsonVailid('{"name":"홍길동","age":29,"addr":"서울시 종로구"}')); // true console.log(isJsonVailid('{"name":"이순신",age:"30"}')); // false 2023. 2. 2.
[javascript] 자바스크립트-배열값 평균 구하기 정수형 데이터의 평균값을 구합니다. const avgRst = (arr, fn) => arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) / arr.length; console.log(avgRst([{ n: 2 }, { n: 2 }, { n: 9 }, { n: 3 } , { n: 3 }], o => o.n)); // 3.8 2023. 2. 2.
[javascript] 두 날짜 사이 차이(일수) 구하기 두 날짜 사이 차이(일수) 구하기 아래 코드를 보시면 두 날짜를 계산하여 차이를 구합니다. 23일과 27일 사이의 기간 4를 리턴합니다. const getDayDiffDay = (startDate, finalDate) => (finalDate - startDate) / (1000 * 3600 * 24); console.log(getDayDiffDay(new Date('2023-01-23'), new Date('2023-01-27'))); // 4 https://lifefun.tistory.com/30 javascript 자바스크립트 하루 전/후 날짜 구하기 다음달 이전달 구하기 내년 작년 날짜 구하기 1. 하루 전/후 구하기 let d = new Date(); let sel_day = -1; //일자를 .. 2023. 2. 2.
[javascript] 자바스크립트 숫자형태의 값을 배열로 변경 숫자형태의 값을 배열로 변경합니다. const numToArr = n => [...`${n}`].map(i => parseInt(i)); console.log('666333',numToArr(666333)); // [6,6,6,3,3,3] 2023. 2. 2.
[javascript] 자바스크립트 함수 호출 지연시키기 자바스크립트 함수 호출 지연시키기 const deCall = (fn, ...args) => setTimeout(fn, 1000, ...args); deCall(testfn,'나중에호출'); alert("먼저 호출"); function testfn(msg) { alert(msg); } 2023. 2. 2.
javascript - 개발자도구 ( devtools ) 실행 여부 감지 개발자 도구 실행 여부만 감지합니다. 실무에 적용을 하시려면 많은 고민과 응용이 필요한 소스입니다. 소스코드를 다운로드하실 수 있게 하단에 파일을 첨부하였습니다. 개발자도구 상태여부 : 2023. 1. 25.
부트스트랩 모달 bootstrap modal ESC키로 사라지지 않게 설정하기 자바스크립트 Jquery로 사용하실 경우 $('#MyModalWin').modal({backdrop: 'static', keyboard: false}, 'show'); HTML로 호출을 하실 경우 2022. 12. 1.
javascript - 바이트(byte) 길이 구하기 //바이트구하기 String.prototype.getBytes = function() { const contents = this; let str_character; let int_char_count = 0; let int_contents_length = contents.length; for (k = 0; k 4) int_char_count += 2; else int_char_count++; } return int_char_count; } let str = 'hi'; alert(str.getBytes()); 2022. 8. 20.
javascript - html escape / unescape 처리 구현 html 태그를 escape 처리를 합니다. 사용 예) function escapeHtml( text ) { var map = { '&': '&', '': '>', '"': '"', "'": ''' }; return text.replace(/[&"']/g, function(m) { return map[m]; }); } escape 처리된 html 태그를 unescape 처리를 합니다. 사용 예) function unescapeHtml( text ) { var doc = new DOMParser().parseFromString(text, "text/html"); return doc.documentElement.textContent; } 2022. 8. 20.
javascript 전화번호, 휴대전화 하이픈 추가 //전화번호,휴대전화 하이픈 추가String.prototype.phoneNoRep = function(){ const str = this; return str.replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-");}let phone_str = '0101111111';alert(phone_str.phoneNoRep());/*010-111-1111*/ 2022. 8. 20.
javascript 라이브러리 로다쉬 - 배열,객체, 문자열 관련 유용한 라이브러리 Lodash 라이브러리 소개 로다쉬는 함수형 프로그래밍 기반 철학으로 담고 있는 자바스크립트 라이브러리입니다. 로다쉬는 배열, 객체, 문자열 관련 코딩을 쉽고 깔끔하게 만드는 유틸리니 기능이 내장되어 있습니다. CDN 설치 로다쉬 CDN 리스트 경로 https://www.jsdelivr.com/package/npm/lodash 패키지설치 npm install --save lodash _.findIndex(array, [predicate=_.identity], [fromIndex=0]) 배열에서 인덱스 리턴에 사용 var users = [ { 'user': 'barney', 'active': false }, { 'user': 'fred', 'active': false }, { 'user': 'pebbles.. 2022. 1. 30.
자바스크립트 javascrript를 사용하여 페이지 내부 검색 (ctr + f 같은 검색) PC에서는 ctr+f로 검색하면 페이지 내부 검색이 가능하지만 모바일은 pc와 다르게 ui가 직관적이지 않아서 약간 불편함은 있을 듯합니다. ( 주관적이어서 사람마다 다를 수 있음) 아래 소스로 응용해서 구현하면 모바일에서도 ctr+f 같은 페이지 내부 검색 구현이 가능하겠습니다. 모바일로 구현을 한다고 하면 특정 버튼을 만들어서 구현하여 부트스트랩 모달 창을 응용해서 구현하면 좋을 듯합니다. Apples, Bananas, and Oranges. 2022. 1. 23.
javascript 자바스크립트 하루 전/후 날짜 구하기 다음달 이전달 구하기 내년 작년 날짜 구하기 1. 하루 전/후 구하기 let d = new Date(); let sel_day = -1; //일자를 조절하시면 됩니다. -1이면 하루전/ +1이면 내일 d.setDate(d.getDate() + sel_day ); let year = d.getFullYear(); let month = ('0' + (d.getMonth() + 1 )).slice(-2); let day = ('0' + d.getDate()).slice(-2); dt = year+"-"+month+"-"+day; document.write(dt); 2. 다음달 / 이전달 구하기 let d = new Date(); let sel_month = -1; // 월을 조절하시면 됩니다. -1이면 전달을 +1이면 다음달을.. d.setMonth(d.. 2022. 1. 20.
반응형