개발이야기/자바스크립트58

• 

  [자바스크립트] ECharts 사용법, 예제, 차트 그리기 Chart.js, Apexcharts를 이어서 ECharts를 소개드립니다. ECharts는 다양한 차트를 제공하고, 커스텀이 용이하도록 구현되어 있습니다. 다양한 예제를 확인하시고 필요하신 그래프를 사용하시면 됩니다. Line Chart Area Chart Bar Chart Vertical Bar Chart Pie Chart Donut Chart Radar Chart Polar Area Chart Candle Stick Chart Bubble Chart 개발이야기/자바스크립트 2023. 5. 9.

• [자바스크립트] 남은시간 타이머, 카운트다운 만들기 인증번호 입력 등.. 화면에서 남은 시간을 표시해줘야 할 경우가 있습니다. 아래 소스코드는 페이지에 진입 시 window.onload 이벤트가 발생하고 countdown 함수를 실행합니다. countdown 함수는 화면에 표시될 elementId 인자와 seconds 초를 받습니다. endTime 변수는 현재 시간에 seconds를 더한 값을 저장하며, 이 값은 카운트다운 종료 시간을 의미합니다. updateTimer 함수는 setInterval 함수를 사용하여 남은 시간을 업데이트하고, 이를 element.innerHTML로 표시합니다. 남은 시간이 없으면 "done"을 출력하고, 그렇지 않으면 setTimeout 함수를 사용하여 1초 후에 다시 updateTimer 함수를 호출합니다. 바로 확인 가능.. 개발이야기/자바스크립트 2023. 4. 4.

• [자바스크립트] PHP 배열 변수 스크립트에서 사용하기 자바스크립트에서 PHP 변수를 받는 방법은 여러 가지가 있습니다. Ajax를 사용하여 비동기적으로 데이터를 가져와서 페이지를 새로고침하지 않고 사용 할 수 있으며, PHP 변수를 직접 스크립트에 출력 할 수도 있습니다. 아래 코드는 PHP 변수를 직접 스크립트에서 출력하고 사용하는 소스 코드 입니다. PHP에서 배열을 생성하고 값을 넣은 다음 스크립트에서 값을 확인하고 있습니다. json_encode() 함수를 사용하여 PHP 배열을 JSON 형식으로 인코딩하고, JavaScript 코드에서 JSON을 파싱하여 JavaScript 배열로 변환합니다. 간단한 소스 코드 이니 확인하시고 응용해서 사용 하시면 됩니다. 개발이야기/자바스크립트 2023. 3. 30.

• 

  [자바스크립트] 유튜브 영상 넣기 (iframe, YouTube Player API) 웹 페이지에서 YouTube 플레이어를 동적으로 로드하고, 비디오를 재생할 수 있게 해주는 소스 코드입니다. tag 변수에 document.createElement('script')를 사용하여 새로운 스크립트 요소를 생성하고 유튜브 플레이어 API 주소를 할당합니다. getElementsByTagName('script')[0]를 사용하여 문서 내 첫 번째 스크립트 태그 요소를 선택하고, parentNode.insertBefore(tag, firstScriptTag)를 사용하여 새로 생성된 스크립트 요소를 이전 스크립트 요소 앞에 삽입합니다. 이렇게 하면 페이지 로드 시 새로 생성된 스크립트 요소가 DOM에 삽입되고, 해당 요소가 src 속성의 주소로부터 비디오 플레이어 API를 로드하게 됩니다. 이를 통.. 개발이야기/자바스크립트 2023. 3. 29.

• 

  [자바스크립트] 입력한 문자열 Byte 체크 하고 계산하기 (onkeyup) 입력한 문자열에 대해서 Byte를 계산하고 화면에 노출시키는 소스 코드입니다. 문자메시지를 보낼 때 유용하게 사용하실 수 있습니다. textarea에 onkeyup 함수를 통해서 실시간으로 text에 대해서 Byte를 확인 가능 합니다. charCodeAt() 메서드를 통해서 입력값에 대한 문자의 유니코드 코드 포인트를 반환합니다. 한글에 대해서는 totalByte를 +2 시켜 주면서 계산하고 있습니다. 추가로 전송 버튼을 클릭했을 때는 2000 Byte가 넘었는지 체크하고 있습니다. 간단한 함수 확인하시고 응용 가능 하십니다. 0/ 2000 Byte 전송 개발이야기/자바스크립트 2023. 3. 17.

• 

  [자바스크립트] textarea 높이 자동조절 (onkeyup, onkeydown) onkeyup, onkeydown 이벤트를 사용하여 textarea의 높이가 동적으로 조절되는 코드입니다. html 이벤트(onkeyup, onkeydown)를 통해서 textarea의 입력을 감지하고, autoResize 함수를 호출해서 textarea의 높이를 조절합니다. 자바스크립트 function autoResize(textarea) { textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'; } autoResize() 함수는 textarea 요소를 매개변수로 받아서, 해당 textarea의 높이를 동적으로 조절합니다. 함수 안에서, textarea의 style.height 속성을 auto로 설정하여 .. 개발이야기/자바스크립트 2023. 3. 8.

• [자바스크립트] 문자열 자릿수만큼 0, 공백 채우기 (fillZero, fillSpace) 전문 통신을 하기 위해 고정된 길이의 문자열을 전송하기 위해 사용하는 함수입니다. fillZero는 문자열의 앞에 0을 붙이는 함수입니다. 주로 가격을 나타낼 때 통신 규격에 맞게 0을 붙이곤 합니다. 그리고 fillSpace는 문자열의 뒤에 공백을 주어 문자열의 고정 길이를 맞춰 줍니다. 전문통신은 API 통신에 비해 형식이 자유롭지 못하고, 예전 개발환경에서 주로 사용하였지만 아직도 많이 사용하는 방법입니다. 간단한 예제이니 확인하시고 사용하시면 됩니다. 개발이야기/자바스크립트 2023. 1. 9.

• 

  [자바스크립트] selectbox(셀렉트박스) 년도, 월 만들기 (년도 역순) Date 객체를 통해서 selectbox에 연도와 월을 2가지 형태로 표시하였습니다. 첫 번째 selectbox는 2022년부터 2027년까지 표시하였고, 월의 길이를 체크해 1자리 이면 앞에 0을 붙였습니다. 두 번째 selectbox는 2022년부터 시작하여 거꾸로 2017년까지 나타 냈으며, 현재 년도와 월에 selected 옵션을 추가하였습니다. 간단한 스크립트 소스이니 응용해서 사용하시면 됩니다. 첫번째 selectbox 두번째 selectbox 개발이야기/자바스크립트 2022. 11. 17.

• 

  [자바스크립트] 더보기 (more) 버튼으로 리스트 노출하기 더보기 (more) 버튼으로 일정 개수의 이미지를 노출하는 소스 코드입니다. HTML 로딩이 끝난 후 window.load가 실행되면서 id='js-load'의 담긴 리스트의 출력 개수를 확인하고 노출시킵니다. 저는 리스트를 최초에 3개만 노출시키고 더보기 버튼을 클릭했을 때 3개씩 추가로 노출시키고 있습니다. load 함수가 실행되면서 li 엘리먼트 개수를 확인하고 리스트가 다 보이면 더보기 버튼을 숨기고 있습니다. 샘플 소스코드이니 입맛에 맞게 사용하시면 됩니다. 더보기 소스화면 개발이야기/자바스크립트 2022. 11. 3.

• [자바스크립트] 실시간 시계 만들기 (타이머) 자바스크립트로 구현한 실시간 시계(타이머)입니다. 스크립트로 현재 날짜와 시간을 가져와서 date/ month / 분 / 초 에는 10보다 작으면 앞에 0을 붙여주는 형태입니다. setTimeout() 함수를 통해서 0.5초마다 함수를 실행하고 있습니다. 간단한 소스 이므로 쉽게 구현 가능하십니다. ↓↓↓↓↓ 소스 예제 화면입니다. HTML 삽입 미리보기할 수 없는 소스 개발이야기/자바스크립트 2022. 10. 21.

• 

  [자바스크립트] 오늘 하루 열지 않기 / 닫기 (레이어 팝업) map 태그를 사용해서 이미지맵을 만들어 각각의 버튼에 함수를 호출하도록 하였습니다. 자바스크립트에서 쿠키의 이름, value, 기간을 체크해 레이어 팝업을 visible / hidden 할지 체크합니다. 닫기 버튼을 클릭했을 경우는 레이어 팝업을 숨김 처리하고, 하루 동안 열지 않기를 체크하면 쿠키를 저장해서 다음 페이지에 진입 시 하루 동안 레이어 팝업을 노출하지 않게 됩니다. 레이어 팝업 영역을 확인하시고 소스를 응용해서 사용하시면 됩니다. 이미지 맵 좌표 구하는 글은 아래에 링크로 남겨 놓겠습니다. https://jh-tr.tistory.com/47 개발이야기/자바스크립트 2022. 10. 21.

• 

  [자바스크립트] Apexcharts 사용법, 예제, 차트 그리기 Chart.js 이어서 색감이 아름다운(?) Apexcharts를 소개드립니다. 다양한 색감을 보여드리기 위해 10개의 차트를 준비했습니다. div에 각각의 차트 영역을 지정 합니다. 각각의 차트 영역의 HTML을 읽고 이벤트를 발생시킵니다. 소스코드를 살펴보시고 사용하실 차트를 고르시면 됩니다. Line Chart Area Chart Column Chart Bar Chart Pie Chart Donut Chart Radar Chart Polar Area Chart Radial Bar Chart Bubble Chart ↓↓↓↓↓ 다양한 예제는 공식 사이트에서 확인 하실 수 있습니다. JavaScript Chart Examples & Samples Demo – ApexCharts.js Get a glimp.. 개발이야기/자바스크립트 2022. 10. 20.