[javascript]유튜브 주소(url)에서 id 값을 추출해 iframe 으로 변환하기

youtube id 추출하기 적용 해제적용 버튼 클릭후 미리 동영상 플레이를 해보시고 꼭 외부에서 플레이가 가능한 상태인지 확인하세요.우선 유튜브 주소를 입력받을 타입이 text 인 input을 하나 만들고 적용버튼과 해제버튼도 만들어 주었다.   적용버튼을 누르면 유튜브 주소를 가져와 정규식으로 고유 id값을 추출한다.추출한 id값은 iframe 요소로 만든후 저장할 input 값에 넣어준다.그리고 사용자가 유튜브 주소값을 수정하지 못하도록 input 창은 readonly 속성을 true 상태로 바꿔준다.마지막으로 적용 버튼은 가려주고 해제버튼은 나타나게 한다.해제 버튼을 누르면 input 창의 readonly 속성을 false 상태로 바꾼 후 미리 보기 했던 div는 empt..

• format_list_bulleted developer life/javascript
• · 2024. 11. 8.
• textsms

[javascript/Jquery]상단 이동 스크롤 버튼 만들기(Top 버튼)

웹사이트의 페이지가 길어질경우 사용자는 마우스 스크롤을 여러 번 해야만 페이지 상단으로 올라갈 수 있다.그래서 굉장히 번거러울수 있는데 스크롤 이동 버튼을 페이지 하단에 만들어 놓으면 사용자는 클릭 한 번으로  페이지 상단으로 이동가능하게 된다.javascript를 이용한 top 버튼 예제Top 이동 버튼Top Jquery를 이용한  top 버튼 예제 let topBtn = $('#topBtn')$(window).scroll(function(){ if ($(this).scrollTop() > 100){ topBtn.show(); } else{ topBtn.hide(); }})function topMove() { $('html, body').animate..

• format_list_bulleted developer life/javascript
• · 2024. 11. 7.
• textsms

SheetJS를 이용한 html table을 엑셀 xlsx로 다운로드 하는 방법

jsp에서 html table을 excel 파일로 변환하는 것은 매우 간단하다.상단에 헤더값 Content-Type을 application/vnd.ms.[원하는 엑셀확장자]으로 선언하고 Content-Disposition값에 다운로드할 파일의 이름(filename=)을 적어주면 해결된다. 하지만 엑셀 형식 중 .xlsx파일의 경우에는 파일이 깨졌다는 메시지와 함께 다운로드가 제대로 되지 않는다.일반적인 MIME 유형.aacAAC audioaudio/aac.abwAbiWord documentapplication/x-abiword.apngAnimated Portable Network Graphics (APNG) imageimage/apng.arcArchive document (multiple files em..

• format_list_bulleted developer life/javascript
• · 2024. 7. 17.
• textsms

[javascript] 웹사이트 무료 구글 번역 api 사용법

Google의 사이트 번역 기능을 이용하면 손쉽게 내 사이트를 다국어 사이트로 변신시킬 수 있다.기존에는 API 키를 발급해 사용이 가능 하였으나 현재는 더 이상 제공 되지 않는다.그래서 우리는 다른 방법을 통해 사이트 번역기능을 이용 해야만 한다. 구글 기본 UI를 이용해 번역 기능 사용하기  위 태그를 ()   구글 번역기능이 필요한 페이지에 넣으면 언어 선택이 가능한 샐랙트 박스가 생성이 된다.사용자가 바꾸고 싶은 언어를 선택하면 내 사이트는 구글 번역 기능을 통해 바뀐 언어의 사이트로 탈바꿈되게 된다. 내가 원하는 언어만 표시하기구글 번역에서 사용 가능한 언어는 100여가지가 넘는다.그렇기에 내가 원하는 언어를 찾기가 힘들수 있는데 구글에서는 그런 사용자들을 위해 옵션값을 제공한다. functio..

• format_list_bulleted developer life/javascript
• · 2024. 4. 19.
• textsms

jQuery 최신 CDN 주소 모음/ 공식홈페이지, 구글, MS, cloudflare

CDN이란? cdn이란 콘텐츠 전송 네트워크의 약자로 데이터 사용량이 많은 페이지 웹페이지의 로드 속도를 높이기 위해 연결된 서버 네트워크이다. 사용자가 웹 사이트를 방문하면 데이터를 주고 받기 위해 인터넷 통신이 이루어지는데 특히 동영상이나 큰 이미지와 같은 대용량 파일의 경우 로드하는데 시간이 오래 걸리게 된다. 이때 cdn을 이용하면 사용자와 가까운 cdn 서버를 연결해주어 대기시간을 줄이거나 통신 지연을 줄여준다. jQuery CDN 종류 jquery에서는 uncompressed, minified, slim, slim minified 총 4가지의 패키지를 제공한다. uncompressed : 원본 파일(확장자 .js) minified : 원본을 압축한 파일 (확장자 : .min.js) slim :..

• format_list_bulleted developer life/javascript
• · 2023. 10. 6.
• textsms

[jquery] 예쁜 레이어 팝업 예제 (쿠키를 이용한 오늘 하루 열지 않기 구현)

홈페이지 운영을 하다 보면 팝업을 쓸 일이 참 많다. 공지사항이나 특별한 메세지를 전달할 때에는 메인에 뜨는 팝업만큼 효과적인 게 없기 때문이다. window.open()을 이용해 작은 팝업을 띄울수도 있지만 팝업차단을 하면 막히기에 보편적으론 레이어팝업이 선호되는 편이다. 레이어 팝업 디자인 팝업창 예제 첫번째 팝업입니다. 홈페이지 바로가기(클릭) 공지사항보기 오늘 하루 열지 않기 레이어 팝업 디자인을 살펴보자. 여러개의 팝업을 쓰기 위해 id값은 div[id ^= 'layerPop'] 으로 처리한다. 이는 여러개의 팝업을 사용하기 위한 방법인데 layePop1, layePop2, layePop3, layePop4 이라는 id의 div도 style이 적용되게 한다. 팝업창은 가장 위에 보여야 하니 z-..

• format_list_bulleted developer life/javascript
• · 2023. 10. 6.
• textsms

[javascript] 자바스크립트 setTimeout()과 setInterval() 함수 사용법

자바스크립트에서 시간을 이용한 코드를 짜다 보면 빠질 수 없는 것이 setTimeout()과 setInterval()이다. setTimeout() 함수는 일정시간을 기다린후 행동을 실행할 때 쓰이게 되고 setInterval() 함수는 함수를 일정시간의 텀으로 반복할때 이용된다. setTimeout() var timerId = ""; function timeout() { timerId = setTimeout(function() { $("a[href='#search']").trigger( "click" ); }, 1000 * 2); clearTimeout(timerId); } timeout(); setTimeout()을 이용하면 내가 지정한 시간이 지난후에 행동을 실행 한다. 시간설정 단위는 1000이 1..

• format_list_bulleted developer life/javascript
• · 2023. 6. 20.
• textsms

[javascript]글 문자열 비교 라이브러리 diff_match_patch.js

게시판에 쓴 글을 기존내용과 비교해서 보여달라는 지령이 떨어졌다. 글 내용은 이미 로그 테이블에 저장이 되어 있었는데 어떤 식으로 보여줄지 고민이 되었다. 구글 검색을 열심히 하다보니 diff_match_patch라는 라이브러리를 발견했다. diff_match_patch diff match patch는 두 개의 파일이나 두 개의 문자열의 차이점을 보여주는 라이브러리이다. https://github.com/google/diff-match-patch GitHub - google/diff-match-patch: Diff Match Patch is a high-performance library in multiple languages that manipulates plain te Diff Match Patch ..

• format_list_bulleted developer life/javascript
• · 2023. 6. 15.
• textsms

[javascript]샐렉트 박스(select)와 체크박스(checkbox) 값 제어 클릭 이벤트 동기화

체크박스와 샐렉트박스를 함께 컨트롤해야 할 과제가 생겼다. 무조건 체크박스는 한 가지만 선택이 되야만 하고 체크박스를 클릭하면 셀렉트박스도 같은 값이 선택이 돼야 한다. 반대로 셀렉트박스를 선택할 경우에도 해당되는 체크박스의 값이 체크가 돼야만 한다. HTML 타입A 타입B 타입C 선택하세요. 타입A 타입B 타입C 간단하게 name이 chkArcType인 체크박스 3개와 name이 articleType인 셀렉트박스 1개를 만들어줬다. javascript $("select[name='articleType']").change(function() { console.log('select[name=articleType].change'); var type = $(this).val(); console.log('typ..

• format_list_bulleted developer life/javascript
• · 2023. 2. 5.
• textsms