728x90

목동코딩학원: 카카오 맵 사용하는 방법

​

카카오 지도에 DB에서 가져온 주소로 위치를 마커할 필요가 있을때 사용하면 된다

<script type="text/javascript">
var daum_wrap,
    mapContainer,
    mapOption = {
        center: new kakao.maps.LatLng(37.521139, 126.873561), // 기본위치 중심좌표
        level: 5 // 지도의 확대 레벨
    },
    map,
    geocoder = new kakao.maps.services.Geocoder(),
    marker,
    mobileScroll = 0;

$(document).ready(function () {
    var geocoder = new kakao.maps.services.Geocoder();
    var funeralName = "주소";
    geocoder.addressSearch(funeralName, function(result, status) {
        if (status === kakao.maps.services.Status.OK) {
            daum_wrap = document.getElementById('address_funeral')
            mapOption.center = new kakao.maps.LatLng(result[0].y, result[0].x)
            mapContainer = document.getElementById('map')
            map = new kakao.maps.Map(mapContainer, mapOption)
            marker = new kakao.maps.Marker({
                    position: new kakao.maps.LatLng(result[0].y, result[0].x),
                    map: map
            });
        }

    });

});
</script>
728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, html, 추가버튼으로 동적인 <div></div> 만들때 id를 다르게 부여하는 방법  (0) 2023.04.19
목동코딩학원, 자바스크립트로 전화번호 입력시 자동으로 "-" 추가하는 방법  (0) 2023.04.18
목동코딩학원, html, Clipboard로 복사하는 방법  (0) 2023.04.18
목동코딩학원, javascript , 동적으로 테이블 열 합치는 방법  (0) 2023.04.11
목동코딩학원, document.createElement('form')으로 새창여는 방법  (0) 2023.04.11
728x90

ID가 중복되는 문제는 일반적으로 개발 중에 발생하는 일입니다. 이 문제를 해결하는 방법 중 하나는 생성된 각 요소에 고유한 ID를 할당하는 것입니다. 이를 위해 JavaScript에서는 UUID (Universally Unique Identifier)를 생성하는 함수를 제공합니다.

예를 들어, 새로운 <DIV> 요소를 생성할 때마다 UUID를 생성하여 해당 <DIV> 요소의 ID로 할당할 수 있습니다. 다음은 JavaScript에서 UUID를 생성하는 방법입니다.

function generateUUID() {
  var d = new Date().getTime();
  if (typeof performance !== 'undefined' && typeof performance.now === 'function'){
      d += performance.now();
  }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}

이제 각 <DIV> 요소를 생성할 때마다 위의 함수를 사용하여 고유한 ID를 생성하고 할당할 수 있습니다.

var newDiv = document.createElement("div");
newDiv.id = generateUUID();
​

목동코딩학원 : 온라인코딩교육, 유니티게임개발교육, 로블록스게임개발교육, 한국서비스산업진흥원, 플랫폼프로젝트수업,인공지능프로젝트

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, 카카오 지도에 주소로 위치표시하는 방법  (0) 2023.04.28
목동코딩학원, 자바스크립트로 전화번호 입력시 자동으로 "-" 추가하는 방법  (0) 2023.04.18
목동코딩학원, html, Clipboard로 복사하는 방법  (0) 2023.04.18
목동코딩학원, javascript , 동적으로 테이블 열 합치는 방법  (0) 2023.04.11
목동코딩학원, document.createElement('form')으로 새창여는 방법  (0) 2023.04.11
728x90

전화번호 입력시 "-"를 추가하는 방법은 다양하게 있지만, 가장 간단한 방법은 문자열을 자르고 다시 합치는 것입니다. 아래는 예시 코드입니다.

function formatPhoneNumber(number) {
  // 문자열에서 숫자만 추출합니다.
  const cleaned = ('' + number).replace(/\D/g, '');

  // 숫자를 하이픈으로 구분합니다.
  const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    return match[1] + '-' + match[2] + '-' + match[3];
  }
  
  // 형식에 맞지 않는 경우 원본 값을 그대로 반환합니다.
  return number;
}

// 사용 예시
const phoneNumber = '1234567890';
const formattedPhoneNumber = formatPhoneNumber(phoneNumber);
console.log(formattedPhoneNumber); // 출력 결과: "123-456-7890"

위 코드에서 formatPhoneNumber 함수는 전화번호를 입력받아 하이픈을 추가한 형식으로 반환합니다. cleaned 변수는 문자열에서 숫자만 추출한 결과를 담고, match 변수는 추출한 숫자를 하이픈으로 구분한 결과를 담습니다. 만약 전화번호가 형식에 맞지 않는 경우에는 원본 값을 그대로 반환합니다

​

​

아래는 onkeydown 이벤트를 이용하여 입력시 마다 표시하는 방법입니다

 <input type="text" id="phoneNumber" onkeydown="formatPhoneNumber(event);">
 <script>
// 자바스크립트 코드
function formatPhoneNumber(event) {
    var pno = document.getElementById("phoneNumber");
    var pnoValue = pno.value;
    var pnoLen = pnoValue.length;
    console.log(event + " : " + event.keyCode);

    if(event.keyCode != 8){
        if(pnoLen == 3){
            pno.value =  pnoValue + "-";
        }
        if(pnoLen == 8){
            pno.value =  pnoValue + "-";
        }
        if(pnoLen > 12){
            pno.value =  pnoValue.substring(0,12) ;
        }
    }
}
</script>

위 코드에서 input 요소에 onchange 이벤트를 추가하고, formatPhoneNumber 함수를 호출하도록 설정했습니다. formatPhoneNumber 함수는 입력된 전화번호를 가져와 문자열에서 숫자만 추출한 후, 하이픈을 추가한 형식으로 다시 input 요소에 설정합니다.

위 방법은 사용자가 입력을 마치고 포커스가 이동한 후에만 하이픈을 추가하게 됩니다. 만약 입력 중에도 실시간으로 하이픈을 추가하고 싶다면 oninput 이벤트를 사용할 수 있습니다.

목동코딩학원 : 온라인코딩교육, 유니티게임개발교육, 로블록스게임개발교육, 한국서비스산업진흥원, 플랫폼프로젝트수업,인공지능프로젝트

 
 
 
 
728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, 카카오 지도에 주소로 위치표시하는 방법  (0) 2023.04.28
목동코딩학원, html, 추가버튼으로 동적인 <div></div> 만들때 id를 다르게 부여하는 방법  (0) 2023.04.19
목동코딩학원, html, Clipboard로 복사하는 방법  (0) 2023.04.18
목동코딩학원, javascript , 동적으로 테이블 열 합치는 방법  (0) 2023.04.11
목동코딩학원, document.createElement('form')으로 새창여는 방법  (0) 2023.04.11
728x90

 

목동코딩 : AI-Academy.kr

 

프로젝트를 진행하다 보면 항상 변수가 발생한다.

왜냐하면 Client의 요구사항이 항상 이상적인 것을 향하기 때문이다.

이번 프로젝트에서 계좌번호를 복사하여 사용하는 기능이 필요했다. 아래와 같은 방법을 사용하면 잘 작동했다.

문제는 modal 폼을 사용할때 이다.

인터넷을 검색해 보니

" clipboard.js 와 bootstrap Modal을 사용하면 정상 작동 하지 않는 이슈가 있다."

 

문제 원인은.

"modal에서 모달창의 focus 상태를 유지하기 위해 강제 포커스를 시키는 함수로 인해 클립보드에 복사하려는 지점의 위치를 잃게되는 이슈"이다.

 

이것을 해결하는데 이틀을 허비했다.

항상 이럴때 마다 느끼는 것은 전진을 못하고, 제자리 걸음을 한 기분이다. 물론 맨손 체조를 해도 효과가 있으니 단순한 제자리 걸음은 아니었기를 바란다

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>

    <title>Clipboard Copy</title>
</head>
<body>
  
 <input type="button" id="test" value="내용 복사하기" data-clipboard-text="copy sentence"/>
  
 <script>
     $(function () {
         var clipboard = new ClipboardJS('#test');
  
         clipboard.on('success', function () {
             alert("복사되었습니다.");
         });
     });
 </script>
</body>
</html>

애가 작성한 코드는 <span> 태그를 사용했다

그래서 아래와 같은 방법으로 해결했다

<span ><textarea id="id" style="height:30px;border: none;resize: none;"><?=$list_bank_number3[$i]?></textarea></span>

 

이제 잘 작동한다

목동코딩학원 : 온라인코딩교육, 유니티게임개발교육, 로블록스게임개발교육, 한국서비스산업진흥원, 플랫폼프로젝트수업,인공지능프로젝트

 

 

목동코딩학원 : 온라인코딩교육, 유니티게임개발교육, 로블록스게임개발교육, 한국서비스산업진흥원, 플랫폼프로젝트수업,인공지능프로젝트

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, html, 추가버튼으로 동적인 <div></div> 만들때 id를 다르게 부여하는 방법  (0) 2023.04.19
목동코딩학원, 자바스크립트로 전화번호 입력시 자동으로 "-" 추가하는 방법  (0) 2023.04.18
목동코딩학원, javascript , 동적으로 테이블 열 합치는 방법  (0) 2023.04.11
목동코딩학원, document.createElement('form')으로 새창여는 방법  (0) 2023.04.11
목동코딩학원, ajax로 Data를 가져와서 테이블에 표시하는 방법  (0) 2023.04.02
728x90

데이타베이스에서 자료를 가져와서 table로 표현하는 작업에서 동적으로 rowspan을 해야할 필요가 생겨서 검색후

아래처럼 사용했다

<!-- 동적으로 합치기 -->    
<tr>        
  <td class="table_id">차감        </td>                
  <td>        </td>    
</tr>

<script>        
$(".table_id").each(function () {             
  var rows = $(".table_id:contains('" + $(this).text() + "')");             
  console.log(rows);            
  if (rows.length > 1) { 
      //동일한 rows값이 1개 이상이면 열을 합침             
      rows.eq(0).attr("rowspan", rows.length);             
      rows.not(":eq(0)").remove();             
  }        
  }); 
</script>

목동코딩학원 : 온라인코딩교육, 유니티게임개발교육, 로블록스게임개발교육, 한국서비스산업진흥원, 플랫폼프로젝트수업,인공지능프로젝트

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, 자바스크립트로 전화번호 입력시 자동으로 "-" 추가하는 방법  (0) 2023.04.18
목동코딩학원, html, Clipboard로 복사하는 방법  (0) 2023.04.18
목동코딩학원, document.createElement('form')으로 새창여는 방법  (0) 2023.04.11
목동코딩학원, ajax로 Data를 가져와서 테이블에 표시하는 방법  (0) 2023.04.02
목동코딩학원, javascript void(0)에 대한 설명  (0) 2023.03.31
728x90

document.createElement('form')을 사용하여 새로운 form 엘리먼트를 만들고, window.open()을 사용하여 새 창을 열 수 있습니다.

다음은 예시 코드입니다.

// 새로운 form 엘리먼트 생성
const form = document.createElement('form');
form.action = 'submit.php';
form.method = 'POST';

// 폼에 추가할 입력 필드 생성
const nameInput = document.createElement('input');
nameInput.type = 'text';
nameInput.name = 'name';
nameInput.value = 'John';
form.appendChild(nameInput);

const emailInput = document.createElement('input');
emailInput.type = 'email';
emailInput.name = 'email';
emailInput.value = 'john@example.com';
form.appendChild(emailInput);

// 새 창 열기
form.setAttribute("target", "_blank");
document.body.appendChild(form);


// 폼 전송
form.submit();

위의 코드에서, form 엘리먼트를 생성하고 action과 method 속성을 설정합니다. 그리고 input 필드를 생성하고 form에 추가합니다. window.open() 메서드를 사용하여 새 창을 엽니다. 새 창에는 form 엘리먼트를 추가합니다. 마지막으로, form.submit() 메서드를 사용하여 폼을 전송합니다.

 

이렇게 하면 새 창이 현재 창 대신 새로운 창에서 열립니다.

목동코딩학원 : 온라인코딩교육, 유니티게임개발교육, 로블록스게임개발교육, 한국서비스산업진흥원, 플랫폼프로젝트수업,인공지능프로젝트

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, html, Clipboard로 복사하는 방법  (0) 2023.04.18
목동코딩학원, javascript , 동적으로 테이블 열 합치는 방법  (0) 2023.04.11
목동코딩학원, ajax로 Data를 가져와서 테이블에 표시하는 방법  (0) 2023.04.02
목동코딩학원, javascript void(0)에 대한 설명  (0) 2023.03.31
목동코딩학원,html, ajax로 비동기 실행시 return값 여러개 받는 방법  (0) 2023.02.17
728x90

몇시간을 허비한줄 모른다.

맨위의 script 2줄을 첨부 안해서 안되는줄 모르고 많이 헤맸다 ㅎㅎ

아래처럼 하면 Database 내용이 멋지게 표시된다

 

<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
<script src="/asset/bootstrap-table-ko-KR.js"></script>

<div class="modal-body">
                <table id="tableFuneralList"
                        data-toggle="table"
                        data-pagination="true"
                        pageSize: 5,
                        data-search="true"
                        data-single-select="true"
                        data-ajax="ajaxRequest"
                        data-click-to-select="true"
                        class="display tableFuneralList" style="width:100%">
                    <thead>
                        <tr>
                            <th data-field="state" data-checkbox="true"></th>
                            <th data-field="번호1">번호1</th>
                            <th data-field="번호2">번호2</th>
                            <th data-field="번호3">번호3</th>
                        </tr>
                    </thead>
                </table>
            </div>
            
 <script>
        function ajaxRequest(params) {
            $.ajax({
                type: "POST",
                url: "ajax_loader.php",
                data: "user-id=1",
                dataType: "json",
                success: function (data) {
                    params.success({
                         "rows": data,
                         "total": data.length
                    })
                },
                error: function (er) {
                    params.error(er);
                }
            });
            }
</script>
<?php
$data = array();

$sql = "";
$sql = $sql." select * from tb ";
$sql = $sql." order by  field_name  asc";
// echo $sql;

$result = mysqli_query($conn,$sql) or die("문장에러!");
$num_rows = mysqli_num_rows($result);
if($num_rows > 0)
{
    while ($row=mysqli_fetch_array($result))
    {
        array_push($data, array("번호"=> $row['no1'], 
        "번호2"=> $row['no2'],
        "번호3"=> $row['no3']));
             }
}
echo json_encode($data);
?>

목동코딩학원 : 온라인코딩교육, 유니티게임개발교육, 로블록스게임개발교육, 한국서비스산업진흥원, 플랫폼프로젝트수업

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, javascript , 동적으로 테이블 열 합치는 방법  (0) 2023.04.11
목동코딩학원, document.createElement('form')으로 새창여는 방법  (0) 2023.04.11
목동코딩학원, javascript void(0)에 대한 설명  (0) 2023.03.31
목동코딩학원,html, ajax로 비동기 실행시 return값 여러개 받는 방법  (0) 2023.02.17
목동코딩학원, PHP 문자열 길이 구하는 방법  (0) 2023.02.17
728x90

javascript:void(0)는 JavaScript에서 사용되는 특별한 URL입니다. 이 URL은 주로 클릭 시 JavaScript를 실행하기 위해 사용됩니다. 이는 웹 페이지에서 JavaScript를 사용하여 클릭 이벤트를 처리하고, 동적으로 콘텐츠를 변경하거나 페이지를 다시 로드하지 않고 사용자 경험을 개선하기 위해 유용합니다.

void(0)는 자바스크립트에서 반환값이 없음을 나타내는 예약어입니다. 즉, javascript:void(0)를 사용하면 브라우저는 현재 페이지를 새로고침하지 않고 JavaScript 코드를 실행할 수 있습니다.

예를 들어, 다음과 같은 HTML 코드가 있다고 가정해 봅시다.

<a href="javascript:void(0)" onclick="alert('Hello, world!')">클릭하세요</a>

위 코드는 "클릭하세요" 링크를 클릭하면 JavaScript 코드 alert('Hello, world!')가 실행되어 경고창이 표시됩니다. 이때, javascript:void(0)가 사용되었기 때문에 링크를 클릭했을 때 현재 페이지가 새로고침되지 않고, JavaScript 코드가 실행됩니다.

목동코딩학원 : 온라인코딩교육, 유니티게임개발교육, 로블록스게임개발교육, 한국서비스산업진흥원, 플랫폼프로젝트수업

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, document.createElement('form')으로 새창여는 방법  (0) 2023.04.11
목동코딩학원, ajax로 Data를 가져와서 테이블에 표시하는 방법  (0) 2023.04.02
목동코딩학원,html, ajax로 비동기 실행시 return값 여러개 받는 방법  (0) 2023.02.17
목동코딩학원, PHP 문자열 길이 구하는 방법  (0) 2023.02.17
목동코딩학원 : Html, Jquery 이벤트 처리하는 방법  (0) 2023.02.17

+ Recent posts

티스토리툴바