[JavaScript] 시간 자동 완성(HH:MM) 텍스트 박스

JavaScript 2018. 1. 11. 09:53


시간 자동 완성(HH:MM) 텍스트 박스



 -. 텍스트 박스에 시간 기능을 입력하는데 시간을 HH:MM 으로 정리해서 자동으로 들어가고 보여지게 하기위하여 제작했다.

 -. HTML5의 <input type="time">과의 병행은 안되었다.



# 소스 코드

 time_colon.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>자바스크립트::시간 자동 완성(HH:MM)</title>
<script type="text/javascript">
    function inputTimeColon(time) {

        // 먼저 기존에 들어가 있을 수 있는 콜론(:)기호를 제거한다.
        var replaceTime = time.value.replace(/\:/g, "");

        // 글자수가 4 ~ 5개 사이일때만 동작하게 고정한다.
        if(replaceTime.length >= 4 && replaceTime.length < 5) {

            // 시간을 추출
            var hours = replaceTime.substring(0, 2);

            // 분을 추출
            var minute = replaceTime.substring(2, 4);

            // 시간은 24:00를 넘길 수 없게 세팅
            if(hours + minute > 2400) {
                alert("시간은 24시를 넘길 수 없습니다.");
                time.value = "24:00";
                return false;
            }

            // 분은 60분을 넘길 수 없게 세팅
            if(minute > 60) {
                alert("분은 60분을 넘길 수 없습니다.");
                time.value = hours + ":00";
                return false;
            }

            // 콜론을 넣어 시간을 완성하고 반환한다.
            time.value = hours + ":" + minute;
        }
    }
</script>
<body>
    <b>시간&nbsp;:&nbsp;</b>
    <input type="time" value="00:00" onKeyup="inputTimeColon(this);" maxlength="5" style="text-align:center;width:40px;"/>
</body>



# 출력 결과




위와같이 숫자를 4자리수(HHMM)만 자동으로 입력하면 완성되고, 완성된 HH:MM형식으로 입력해도 자동으로 계산할 수 있게 되어있다.





[JavaScript] 함수 실행시 특정 value 값 전달하기

JavaScript 2017. 2. 28. 10:34



함수 실행시 특정 value 값 전달하기


 자바스크립트의 onClick 이벤트를 사용하여 특정 함수를 호출하는경우 해당 태그의 value 값을 넘겨주어야 하는경우 아래와 같이 사용한다.


 exercises.php (http://localhost/exercises.php?name=wicked&email=yinglong200)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>연습문제</title>
    <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/JavaScript">
   
        function self_introduction($name, $email) {
            jQuery('#name_text').val($name);
            jQuery('#email_text').val($email);
        }
    </script>
</head>
<body>
    <input type = "hidden" id = "nic_name" value = "<?= $_GET['name'] ?>" />
    <input type = "hidden" id = "nic_email" value = "<?= $_GET['email'] ?>" />

    <input type = "text" id = "name_text" value = ""/>
    <input type = "text" id = "email_text" value = ""/>

    <input type = "button" onClick = "self_introduction(nic_name.value, nic_email.value)" value = "Click" />
</body>
</html>

 출력결과(Click 전)

 출력결과(Click 후)


태그의 id 혹은 name값에 .value를 붙여넣으면 해당 value 값을 전달할 수 있다.








[JavaScript] 동적 태그에서 스크립트 호출하기.

JavaScript 2016. 5. 26. 11:48


동적 생성 태그를 사용하다 onClcik등의 이벤트를 주어야 하는 경우가 발생하였다.

이 경우 문자열로 구분을 제대로 주지 않으면.

<a> 태그가 깨지는 상황이 발생하여 스크립트를 실행하지 못하는경우가 종종 생기게 되는데.


 태그가 깨지는 경우

※ 이런식으로 태그가 깨져서 출력되었다. <a zgmf-x10a);'="" y',="" onclick="alertOpen(" href="javascript:;">0</a>


\기호를 잘 입력해 줌으로서 해결할 수 있다.


아래 코드를 예러 들자면.


 dynamic_tag.php

<html>
<head>
<title>건담 파일럿 리스트</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

var array = new Array();
array[0] = { "title" : "프리덤", "pliot" : "키라 야마토", "code" : "ZGMF-X10A" }
array[1] = { "title" : "저스티스", "pliot" : "아스란 자라", "code" : "ZGMF-X09A" }
array[2] = { "title" : "데스티니", "pliot" : "신 아스카", "code" : "ZGMF-X42S" }
array[3] = { "title" : "엑시아", "pliot" : "세츠나 F 세이에이", "code" : "GN-001" }
array[4] = { "title" : "아리오스", "pliot" : "알렐루야 합티즘", "code" : "GN-007" }
array[5] = { "title" : "듀나메스", "pliot" : "록온 스트라토스", "code" : "GN-002" }
array[6] = { "title" : "스트라이크 느와르", "pliot" : "스웬 칼 바얀", "code" : "GAT-X105E" }
array[7] = { "title" : "세이버", "pliot" : "아스란 자라", "code" : "ZGMF-X23S" }
array[8] = { "title" : "윙 제로 EW", "pliot" : "히이로 유이", "code" : "XXXG-00W0" }
array[9] = { "title" : "데스사이즈 EW", "pliot" : "듀오 맥스웰", "code" : "XXXG-01D2 " }


function dynamicData() {
   
    var tableList = "";

    for(var i = 0; i < array.length; i++) {
       
        // tableList += "<tr><td width=\"50px\">" + i + "</td><td width=\"500px\"><a href=\"javascript:;\" onClick=\"alertOpen('Y', '" + array[i]['code'] + "');\">" + array[i]['title'] + "</a></td><td width=\"200px\">" + array[i]['pliot'] + "</td></tr>";

        tableList += "<tr>";
        tableList += "<td width=\"50px\">" + i + "</td>";
        tableList += "<td width=\"500px\"><a href=\"javascript:;\" onClick=\"alertOpen('Y', '" + array[i]['code'] + "');\">";
        tableList += array[i]['title'] + "</a></td>";
        tableList += "<td width=\"200px\">" + array[i]['pliot'] + "</td>";
        tableList += "</tr>";
    }

    jQuery("#dynamicTable").html(tableList);
}

function alertOpen(on, code) {
   
    if(on == "Y") {

        alert(code);
    }
}
</script>
</head>
<body>
<table border="1">
    <tr>
        <th width="50px">번호</th>
        <th width="500px">제목</th>
        <th width="200px">파일럿</th>
    </tr>
</table>
<table border="1" id="dynamicTable"></table>
<br/>
<input type="button" onClick="dynamicData();" value="데이터 불러오기"/>
</body>
</html>

 출력결과

 출력결과 List On



위 코드와 같이 ""(따옴표)가 사용되는 곧 앞에 \기호를 입력함으로선 브라우저상에선 따옴표를 인식시켜서 해결해야 한다.


 동적태그에서 스크립트 호출

tableList += "<td width=\"500px\"><a href=\"javascript:;\" onClick=\"alertOpen('Y', '" + array[i]['code'] + "');\">" + i + "</a></td>";





[JavaScript] 다음 달(월) 구하기(일 수가 같아야 하는경우)

JavaScript 2015. 11. 3. 18:45


단순히 해당 월로부터 몇 개월(30일)뒤가 아니라. UI 적으로 25일인 경우 다음달의 25일을 딱 나타내야 하는 경우가 생겼었다.

가, 다.



 datepicker.html

<!doctype html>
<html lang="ko">
<head>
<title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript">
        jQuery(function() {
            jQuery("#valid_date").datepicker({
                dateFormat: 'yy-mm-dd'
            });
        });
        function severalMonthsAfterward(month) {

            var selectDay = new Date(jQuery("#valid_date").val());
            var lastDay = new Date(selectDay.getFullYear(), selectDay.getMonth() + 1, 0).getDate();

            var calcDay = new Date(selectDay.getFullYear(), (selectDay.getMonth() + 1) + month, 0);
            var yyyy = calcDay.getFullYear();
            var mm = calcDay.getMonth() + 1;
            var dd = selectDay.getDate();

            if(lastDay == selectDay.getDate()) {
                dd = new Date(selectDay.getFullYear(), (selectDay.getMonth() + 1) + month, 0).getDate();
            }

            if(mm < 10) { mm = "0" + mm; }
            if(dd < 10) { dd = "0" + dd; }

            jQuery("#valid_date").val(yyyy + "-" + mm + "-" + dd);
        }
    </script>
</head>
<body>
<table>
    <tr>
        <th>날짜</th>
        <td>
            <input type="text" id="valid_date" value="" readonly style="cursor:pointer;color:red;" />
            <input type="button" onClick="severalMonthsAfterward(1)" value="1개월"">
            <input type="button" onClick="severalMonthsAfterward(2)" value="2개월"">
            <input type="button" onClick="severalMonthsAfterward(3)" value="3개월"">
        </td>
    </tr>
</table>
 </body>
</html>

 면01 :

 면02 :


[JavaScript] ReferenceError: '' is not defined 해결방법

JavaScript 2015. 7. 12. 20:36

[JavaScript] ReferenceError: '' is not defined 해결방법



01. ReferenceError: ''is not defined 에러 발생 상황

 quize.php(ReferenceError: '' is not defined 에러발생)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>레이블을 이용한 라디오 선택영역 확장</title>
    <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/javascript">
        function onQuizeSubmit(answer) {

            if(jQuery("input[name=" + answer + "]:checked").length == 0) {

                alert("퀴즈의 정답을 선택해주시기 바랍니다.");
                return false;

            } else if(jQuery("input[name=" + answer + "]:checked").val() == 'N') {

                alert("다시 한 번 잘 생각해 보세요!!");
                return false;

            } else if(jQuery("input[name=" + answer + "]:checked").val() == 'Y') {

                alert("정답은 \"스윙화\" 입니다.");
            }
        }
    </script>
</head>
<body>
    <h2>다음중 사악미소의 신발중 가장 값이 비싼 신발은?</h2>
    <div>
        <ul>
            <li>&nbsp;&nbsp;<label><input name="quize" value="N" type="radio">&nbsp;운동화</label></li>
            <li>&nbsp;&nbsp;<label><input name="quize" value="N" type="radio">&nbsp;전투화</label></li>
            <li>&nbsp;&nbsp;<label><input name="quize" value="Y" type="radio">&nbsp;스윙화</label></li>
            <li>&nbsp;&nbsp;<label><input name="quize" value="N" type="radio">&nbsp;슬리퍼</label></li>
            <li>&nbsp;&nbsp;<label><input name="quize" value="N" type="radio">&nbsp;구두</label></li>
        </ul>
    </div>
    <input type="button" onClick="javascript:onQuizeSubmit(quize)" value="정답확인"/>
</body>
</html>



ReferenceError: '' is not defined


자바스크립트 실행중 위와같은 에러가 발생하였다.


script 태그가 제대로 실행되지 않았기 때문에 발생한 문제였는데.


필자는 스크립트 실행에 있어서 변수를 제대로 닫아주지 않았기 때문에 위와같은 에러를 만났다.



01. ReferenceError: ''is not defined 에러 해결

 quize.php(ReferenceError: '' is not defined 에러해결)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>레이블을 이용한 라디오 선택영역 확장</title>
    <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/javascript">
        function onQuizeSubmit(answer) {

            if(jQuery("input[name=" + answer + "]:checked").length == 0) {

                alert("퀴즈의 정답을 선택해주시기 바랍니다.");
                return false;

            } else if(jQuery("input[name=" + answer + "]:checked").val() == 'N') {

                alert("다시 한 번 잘 생각해 보세요!!");
                return false;

            } else if(jQuery("input[name=" + answer + "]:checked").val() == 'Y') {

                alert("정답은 \"스윙화\" 입니다.");
            }
        }
    </script>
</head>
<body>
    <h2>다음중 사악미소의 신발중 가장 값이 비싼 신발은?</h2>
    <div>
        <ul>
            <li>&nbsp;&nbsp;<label><input name="quize" value="N" type="radio">&nbsp;운동화</label></li>
            <li>&nbsp;&nbsp;<label><input name="quize" value="N" type="radio">&nbsp;전투화</label></li>
            <li>&nbsp;&nbsp;<label><input name="quize" value="Y" type="radio">&nbsp;스윙화</label></li>
            <li>&nbsp;&nbsp;<label><input name="quize" value="N" type="radio">&nbsp;슬리퍼</label></li>
            <li>&nbsp;&nbsp;<label><input name="quize" value="N" type="radio">&nbsp;구두</label></li>
        </ul>
    </div>
    <input type="button" onClick="javascript:onQuizeSubmit('quize')" value="정답확인"/>
</body>
</html>


 변수를 확실하게 '변수'로 감싸주는 에러는 해결 될 수 있었다.






추가적으로


평소 필자는 파이어폭스의 파이어 버그(개발자 도구)를 주로 사용하는데.


위 문제는 크롬의 Developer Tools(개발자 도구)를 사용하여 손쉽게 해결 할 수 있었다.



  Fire Fox - Fire Bug


  Chorme - Developer Tools


 파이어버그는 ReferenceError: '' is not defined 변수명이 잘못되었다고만 말해주었는데 잘모르고 파일명도 동일하게 해서순간 뭘 잘못했는지 해맸는데.


 크롬을 보니까 라인까지 설명이 나와서 해결 했다.