[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작

Posted at 2019.06.18 14:47 | Posted in JavaScript & jQuery/jQuery


※ 참고


해당 예제는 jQuery Mobile의 HTML TABLE을 반응형으로 바꿔 모바일 화면에 맞게 출력할 수 도 있게 해주는 예제이다.

그렇기에 해당 예제는 jQuery.mobile.css 파일이 반드시 필요하기에. 사전에 제작중인 사이트에서 사용할 경우 CSS의 충돌은 염두해 두어야 할것이다.






■ 모바일 화면 크기에 맞는 테이블 레이아웃 변경





실제 사이트를 제작하고 운영하는 단계에서


요즘 반드시 고려하게 되는것이,


디바이스 화면에 맞추어 화면을 변화시키는 것이고,


그중 가장 귀찮게 하는것이 바로 HTML TABLE일 것이다.


컴퓨터와 모바일 디바이스에서의 보여주어야 하는 정보를 어떻게 처리해야 할지 상당히 귀찮고.


피곤한데, 이 고민을 jQuery Mobile을 사용하면 어느정도 덜어 낼 수 있다.




# HTML 소스 코드

 table_reaction.html

<html>

<head>

<title>:: 빅데이터 분석결과 ::</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/>

<link rel="stylesheet" href="./custom_table.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

</script>

</head>

<body>

<div data-role="content">

<h2>걸그룹 개인 브랜드 2019년 6월 빅데이터 분석결과</h2>

<table data-role="table" class="ui-responsive">

<thead>

<tr>

<th>순위</th><th>그룹명</th><th>이름</th><th>참여지수</th>

<th>미디어지수</th><th>소통지수</th><th>커뮤니티지수</th><th>총합</th>

</tr>

</thead>

<tbody>

<tr>

<td>2</td><td>레드벨벳</td><td>아이린</td><td>186,886</td>

<td>700,986</td><td>655,633</td><td>295,489</td><td>1,838,995</td>

</tr>

<tr>

<td>3</td><td>블랙핑크</td><td>지수</td><td>296,098</td>

<td>336,852</td><td>699,946</td><td>488,412</td><td>1,821,308</td>

</tr>

<tr>

<td>8</td><td>트와이스</td><td>나연</td><td>184,853</td>

<td>289,526</td><td>530,781</td><td>222,033</td><td>1,248,732</td>

</tr>

<tr>

<td>29</td><td>러블리즈</td><td>정예인</td><td>95,033</td>

<td>400,325</td><td>99,946</td><td>318,187</td><td>913,491</td>

</tr>

<tr>

<td>32</td><td>EXID</td><td>하니</td><td>290,677</td>

<td>169,911</td><td>303,396</td><td>135,080</td><td>899,063</td>

</tr>

<tr>

<td>36</td><td>트와이스</td><td>사나</td><td>179,119</td>

<td>182,508</td><td>255,687</td><td>242,732</td><td>860,046</td>

</tr>

<tr>

<td>41</td><td>레드벨벳</td><td>웬디</td><td>115,885</td>

<td>151,444</td><td>317,304</td><td>218,490</td><td>803,124</td>

</tr>

<tr>

<td>52</td><td>오마이걸</td><td>유아</td><td>283,587</td>

<td>184,294</td><td>137,143</td><td>141,610</td><td>746,634</td>

</tr>

<tr>

<td>53</td><td>모모랜드</td><td>연우</td><td>462,914</td>

<td>180,397</td><td>274,933</td><td>125,720</td><td>717,525</td>

</tr>

<tr>

<td>90</td><td>트와이스</td><td>미나</td><td>107,567</td>

<td>101,775</td><td>108,571</td><td>165,970</td><td>483,883</td>

</tr>

<tr>

<td>96</td><td>우주소녀</td><td>성소</td><td>252,931</td>

<td>57,348</td><td>93,477</td><td>50,066</td><td>453,722</td>

</tr>

<tr>

<td>98</td><td>다이아</td><td>정채연</td><td>211,648</td>

<td>108,572</td><td>81,186</td><td>46,940</td><td>448,345</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>




TABLE에 data-role="table" 속성을 추가하면


thead의 제목 필드값이 tbody의 td 값들 앞에 붙여지게 되지만.


그것은 jQuery.mobile.css 에서 노출을 막아주고 있기에


화면 사이즈의 변화에 따라서만 노출되게 된다.




# CSS 디자인

 custom_table.css

/* 화면 사이즈 조절 */

@media screen and (min-width:36em) {

/* 화면의 사이즈가 560px 이상일 경우 table의 텍스트를 가운데 정렬 한다.*/

.ui-responsive th, .ui-responsive td {

text-align:center;

}

}


/* 테이블 디자인 */

table {

width:100%;

text-align:center;

border-collapse:collapse;

}


th {

background:linear-gradient(#333333 0%, #444444 100%);

color:#FFFFFF;

font-weight:bold;

height:60px;

font-size:20px;

}

td {

height:40px;

}


/* 홀수행 백그루안드 색상 */

tr:nth-child(even) td {

background:#EEEEEE;

}


/* 짝수행 백그루안드 색상 */

tr:nth-child(odd) td {

background:#FDFDFD;

}




코드의 준비가 끝났다면


브라우저를 통해 해당 HTML 코드를 불러와 보자.




# 출력결과01 - 풀 사이즈






처음 풀 사이즈로 본 화면은 평소 컴퓨터를 할때 자주 접하게 되는


HTML TABLE과 다른 부분을 찾아볼 수 없다.


그럼 이제 해당 화면이의 가로 넓이 사이즈를 줄여 나가 보자.






# 출력결과 - 모바일 사이즈





그럼 위와같이 모바일 화면에 맞게 새로 정의된 TABLE의 내용을 확인 할 수 있다.








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] QR CODE 스캐너 제작 - jsQR 사용[JavaScript] QR CODE 스캐너 제작 - jsQR 사용

Posted at 2019.06.13 14:28 | Posted in JavaScript & jQuery/JavaScript




GitHub : https://github.com/cozmo/jsQR





■ 자바스크립트로 QR코드 스캔하고 데이터 읽기





인터넷에 많이 돌아다니는 자료들로 손쉽게 QR코드를 제작할 수 있지만.


보통 이렇게 생산한 QR코드를 읽어어오는 리더기를 제작하는것과 관련된 것은


잘 정리된 포스트를 발견하기 힘들었다.



그렇게 여러가지 방법을 찾다가.


jsQR이란 모듈을을 발견하였고,


이번에 jsQR을 이용하여


제작한 QR코드를 스캔하려하는 예제를 정리해 본다.








#01. jsQR 다운받기



먼저 https://github.com/cozmo/jsQR 페이지에 접속하여 jsQR-master.zip 파일을 을 다운받도록 하자.






다운받은 jsQR-master.zip 파일의 압축을 해제하면


안에 docs 라는 디렉토리가 존재할 것이다.






docs 디렉토리 내에는


index.html 파일과 jsQR.js 파일이 존재하는데


실질적으로 여기서 사용하게 될 파일은 이 jsQR.js 하나이다.








#02. 소스 코드 작성



그냥 index.html을 바로 사용해도 되지만.


아래 코드는 필자가 현재 사용하려고 하는 프로젝트의 성격에 맞게 index.html변경한 코드이다.



<html>

<head>

<meta charset="utf-8">

<title>:: jsQR 테스트 ::</title>

// 다운받은 jsQR.js 를 사용한다.

<script type="text/javascript" src="./jsQR.js"></script>

<style type="text/css">

main {

width:100%;

height:100%;

text-align:center;

}

main > div {

float:left;

width:1%;

height:98%;

}

main > div:first-child {

width:49%;

}

main > div:last-child {

background-color:#D3D3D3;

width:49%;

}


div#output {

background-color:#BDBEBD;

padding-left:10px;

padding-right:10px;

padding-top:10px;

padding-bottom:10px;

}

div#frame {

border:2px solid #005666;

background-color:#FFFFFF;

margin-left:10px;

margin-right:10px;

padding-left:8px;

padding-right:8px;

padding-top:8px;

padding-bottom:8px;

}

div#outputLayer {

text-align:left;

}

canvas {

width:100%;

}

</style>

</head>

<body>

<main>

<div id="test">

<h1>QR 코드 리더</h1>

<div id="output">

<div id="outputMessage">

QR코드를 카메라에 노출시켜 주세요

</div>

    <div id="outputLayer" hidden>

    <span id="outputData"></span>

    </div>

</div>

</div>

<div>&nbsp;</div>

<div>

<h1>스캔</h1>

<div id="frame">

<div id="loadingMessage">

🎥 비디오 스트림에 액세스 할 수 없습니다<br/>웹캠이 활성화되어 있는지 확인하십시오

</div>

<canvas id="canvas"></canvas>

</div>

</div>

</main>

</body>

</html>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

var video = document.createElement("video");

var canvasElementdocument.getElementById("canvas");

var canvas = canvasElement.getContext("2d");

var loadingMessagedocument.getElementById("loadingMessage");

var outputContainerdocument.getElementById("output");

var outputMessagedocument.getElementById("outputMessage");

var outputDatadocument.getElementById("outputData");

function drawLine(begin, end, color) {

canvas.beginPath();

canvas.moveTo(begin.x, begin.y);

canvas.lineTo(end.x, end.y);

canvas.lineWidth = 4;

canvas.strokeStyle = color;

canvas.stroke();

                }

    

        // 카메라 사용시

navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {

              video.srcObject = stream;

              video.setAttribute("playsinline", true);      // iOS 사용시 전체 화면을 사용하지 않음을 전달

          video.play();

              requestAnimationFrame(tick);

});


function tick() {

loadingMessage.innerText = "⌛ 스캔 기능을 활성화 중입니다."

if(video.readyState === video.HAVE_ENOUGH_DATA) {

              loadingMessage.hidden = true;

              canvasElement.hidden = false;

              outputContainer.hidden = false;

       

              // 읽어들이는 비디오 화면의 크기

              canvasElement.heightvideo.videoHeight;

                canvasElement.widthvideo.videoWidth;

       

              canvas.drawImage(video, 0, 0, canvasElement.widthcanvasElement.height);

              var imageDatacanvas.getImageData(0, 0, canvasElement.widthcanvasElement.height);


              var code = jsQR(imageData.dataimageData.widthimageData.height, {


                                    inversionAttempts : "dontInvert",

              });

       

                              // QR코드 인식에 성공한 경우

                              if(code) {

            

                                     // 인식한 QR코드의 영역을 감싸는 사용자에게 보여지는 테두리 생성

                                    drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF0000");

                                    drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF0000");

                                    drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF0000");

                                    drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF0000");


                                    outputMessage.hidden = true;

                                    outputData.parentElement.hidden = false;

         

                                    // QR코드 메시지 출력

                                    outputData.innerHTMLcode.data;

         

                                    // return을 써서 함수를 빠져나가면 QR코드 프로그램이 종료된다.

                                    // return;

                              }

       

                              // QR코드 인식에 실패한 경우 

                              else {


                                    outputMessage.hidden = false;

                                    outputData.parentElement.hidden = true;

                              }

                      }

     

            requestAnimationFrame(tick);

}

});

</script>










#03. QR코드 인식 테스트




먼저 작성한 코드를 브라우저를 통해 실행시켜보자.


해당 기능을 사용할려면 반드시 카메라를 사용할 수 있는 디바이스에서 테스트 해야 한다.






그럼 위와같이 화면이 나타날텐데


먼 브라우저카메라 사용을 허용해 주면


사용이 가능해 질 것이다.






필자가 사용하는 FireFox 브라우저에서는


상단에 카메라를 사용중이라는 버튼이 나타나고,


캔버스(canvas) 영역에 카메라에 비치는 화면이 출력된다.


그럼 인식시킬 QR코드를 화면에 비춰보자.






미리 준비하 QR코드를 화면에 비추어 보았다.


위와 같이 QR코드에 저장된 내용을 읽어들이는 것을 확인 할 수 있다.









  1. 스마일맨
    포스트 글 잘 봤습니다
    한가지 궁금한건 해당 포스트는 pc버전인지요?
    모바일 웹 버전에서도 가능한건지 문의 드립니다
  2. 스마일
    소중한 답변 감사합니다
    블로그 보고 따라 해봤는데 핸드폰 카메라는 안 켜져서 여쭈어 봤습니다 ^^
  3. 갓제로
    저는 navigator.mediaDevices.getUserMedia가 없다고 뜨네요ㅜㅜ
  4. 이용삼
    아이폰에서도 컴퓨터 크롬에서도 삼성핸드폰에서도 비디오 스트림에 엑세스 할수 없다고 하는데요?
  5. 이용삼
    혹시 이것도 https에서만 되는거 아닌가요?
  6. pasta
    안녕하세요 혹시 qr코드말고 바코드를 읽을수 있는방법은없을까요?

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능

Posted at 2019.05.23 19:44 | Posted in JavaScript & jQuery/JavaScript




해당 포스팅은 제작중인 사이트 에 추가하기 위해 제작한 샘플 들이다.


페이지 접속시 시간값을 선택하는 셀렉트 박스의 경우,


바로 다음 시간대를 선택해 주는 기능과, 지나간 시간의 선택을 방지하는 기능이다.


두개의 기능을 따로따로 분리한 다음에 마지막 내용에서 합친것이니


그냥 완성된 하나가 필요한 사람의 경우 맨아래 코드를 참고하면 된다.








■ 페이지 시작시 셀렉트 박스 시간 자동선택




홈페이지에서 당일 예약을 받는 경우,


예약 가능한 다음 타임을 자동으로 선택되게끔 해야한 경우가 있어 샘플로 만들어본 코드이다.


페이지 접속과 동시에 시간을 선택하는 옵션을 가진 셀렉트 박스의 리스트 중에서


선택 가능한 다음 시간을 자동으로 선택하는 기능을 수행한다.



<html>

<head>

<title>:: JavaScript 시간 자동 선택 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

const toDay = new Date();

const toYear = toDay.getFullYear().toString();

// getMonth()의 경우 0 ~ 11의 값을 출력하기에 기본적으로 항상 +1을 해서 한달을 더하지만

// 해당 예제에서는 그대로의 값을 필요로 하기에 +1을 하지 않는다.

// const toMonth = (toDay.getMonth() + 1).toString();

              const toMonth = toDay.getMonth().toString();

     

              const toDate = toDay.getDate().toString();

     

               /* 

                * 현재 시간(Hour)과 분(Minute)은 사용하지 않는다.

                * const toHour = toDay.getHours().toString();

                * const toMinute = toDay.getMinutes().toString();

                */

     

const toSecond = toDay.getSeconds().toString();

     

              lastTimeConstraint(toYear, toMonth, toDate, toSecond, function(lastDay) {


if(lastDay.getTime() > toDay.getTime()) { 

// 선택 가능한 선택 옵션(시간)의 갯수를 구한다.

              const timeCnt = document.getElementById("choiceTime").options.length;

              // const timeCnt = document.getElementById("choiceTime").childElementCount;

     

              const optTime = document.getElementById("choiceTime").children;

     

for(var num = 1; num <= timeCnt; num++) {

// 현재 옵션의값 value값을 추출한다.

var choTime = optTime[num].value;

var choHour = choTime.substring(0, 2);

var choMinute = choTime.substring(2, 4);

// 현재 년, 월, 일, 초의 값과 옵션의 시간, 분의 값을 날짜값으로 변경한다.

var optDay = new Date(toYear, toMonth, toDate, choHour, choMinute, toSecond);

if(optDay.getTime() > toDay.getTime()) {

document.getElementById("choiceTime").options[num].selected = true;

break;

}

}

}

else {

alert("금일 예약가능한 시간이 모두 지났습니다.\n내일 다시 예약하여 주시기 바랍니다.");

document.getElementById("choiceTime").options[0].selected = true;

return;

}

});

});

// 마지막 예약 가능 시간을 체크

function lastTimeConstraint(toYear, toMonth, toDate, toSecond, callBack) {

const lastTime = document.getElementById("choiceTime").lastElementChild.value;

const lastHour = lastTime.substring(0, 2);

const lastMinute = lastTime.substring(2, 4);

const lastDay = new Date(toYear, toMonth, toDate, lastHour, lastMinute, toSecond);

callBack(lastDay);

}

</script>

</head>

<body>

<h1>■ Part#1 시간 자동 선택</h1>

<option value="">- 선택 -</option>

<option value="0900">09:00</option>

<option value="1000">10:00</option>

<option value="1100">11:00</option>

<option value="1200">12:00</option>

<option value="1300">13:00</option>

<option value="1400">14:00</option>

<option value="1500">15:00</option>

<option value="1600">16:00</option>

<option value="1700">17:00</option>

<option value="1800">18:00</option>

</select>

</body>

</html>









■ 셀렉트 박스 선택시 선택 가능 시간 확인



<html>

<head>

<title>:: RegExp.exec() 선택 ::</title>

<script type="text/javascript">

function timeConstraint(optTime) {

const toDay = new Date();

const toYear = toDay.getFullYear().toString();

// getMonth()의 경우 0 ~ 11의 값을 출력하기에 기본적으로 항상 +1을 해서 한달을 더하지만

// 해당 예제에서는 그대로의 값을 필요로 하기에 +1을 하지 않는다.

// const toMonth = (toDay.getMonth() + 1).toString();

      const toMonth = toDay.getMonth().toString();

     

      const toDate = toDay.getDate().toString();

     

      /* 

      * 현재 시간(Hour)과 분(Minute)은 사용하지 않는다.

      * const toHour = toDay.getHours().toString();

      * const toMinute = toDay.getMinutes().toString();

      */

     

const toSecond = toDay.getSeconds().toString();

lastTimeConstraint(toYear, toMonth, toDate, toSecond, function(lastDay) {


if(lastDay.getTime() > toDay.getTime()) { 

const choHour = optTime.substring(0, 2);

const choMinute = optTime.substring(2, 4);

const optDay = new Date(toYear, toMonth, toDate, choHour, choMinute, toSecond);

if(optDay.getTime() < toDay.getTime()) {

alert("선택하신 시간은 경과하여\n예약을 진행 할 수 없습니다.");

document.getElementById("choiceTime").options[0].selected = true;

return;

} else {

alert("선택하신 시간으로\n예약이 진행됩니다.");

return;

}

}

else {

alert("금일 예약가능한 시간이 모두 지났습니다.\n내일 다시 예약하여 주시기 바랍니다.");

document.getElementById("choiceTime").options[0].selected = true;

return;

}

});

}


// 마지막 예약 가능 시간을 체크

function lastTimeConstraint(toYear, toMonth, toDate, toSecond, callBack) {

const lastTime = document.getElementById("choiceTime").lastElementChild.value;

const lastHour = lastTime.substring(0, 2);

const lastMinute = lastTime.substring(2, 4);

const lastDay = new Date(toYear, toMonth, toDate, lastHour, lastMinute, toSecond);

callBack(lastDay);

}

</script>

</head>

<body>

<h1>■ Part#2 시간 자동 선택</h1>

<select id="choiceTime" onChange="timeConstraint(this.value);">

<option value="" selected>- 선택 -</option>

<option value="0900">09:00</option>

<option value="1000">10:00</option>

<option value="1100">11:00</option>

<option value="1200">12:00</option>

<option value="1300">13:00</option>

<option value="1400">14:00</option>

<option value="1500">15:00</option>

<option value="1600">16:00</option>

<option value="1700">17:00</option>

<option value="1800">18:00</option>

</select>

</body>

</html>  










■ 시간 자동 선택 및 직접 선택시 선택가능 유무 확인





지금까지 페이지 접속시 자동 실행과


직접 선택시 해당 시간의 선택 가능 유무를 확인하는 코드를 구현해 보았다.


하지만 아마도 이렇게 선택해야 하는 경우.


위 두 코드를 따로 쓰는 경우는 별로 없을 것이다.


그래서 이제 위 두 코드를 합친 코드이고.


사실 이 포스팅을 작성하게 된 계기도 아래와 같은 기능을 구현하기 위함이었다.



# 소스 코드

<html>

<head>

<title>:: JavaScript 시간 자동 선택 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

// 자동 시간 선택 함수 실행

autoSelectTime();

});

// 자동 시간 선택 함수

function autoSelectTime() {

// 선택 가능한 선택 옵션(시간)의 갯수를 구한다.

const timeCnt = document.getElementById("choiceTime").options.length;

// const timeCnt = document.getElementById("choiceTime").childElementCount;

     

const optTime = document.getElementById("choiceTime").children;

for(var num = 1; num <= timeCntnum++) {

var presence = timeConstraint(optTime[num].value, "auto");


if(presence == "success") {

document.getElementById("choiceTime").options[num].selected = true;

break;

} else if(presence == "unknown") {

break;

}

}

}

// 자동 시간 선택 함수

// optTime : 선택된 option의 value값

// motion :  자동 실행의 호출(auto)인지, 직접 선택한 경우의 호출(passive)인지의 구분

function timeConstraint(optTime, motion) {

const toDay = new Date(); // 현재 날짜

const toYeartoDay.getFullYear().toString(); // 현재 년도

// getMonth()의 경우 0 ~ 11의 값을 출력하기에 기본적으로 항상 +1을 해서 한달을 더하지만

// 해당 예제에서는 그대로의 값을 필요로 하기에 +1을 하지 않는다.

// const toMonth = (toDay.getMonth() + 1).toString();

              const toMonthtoDay.getMonth().toString(); // 현재 월(자바스크립트의 특성상 지난 달)

     

              const toDatetoDay.getDate().toString(); // 현재 일

     

              /* 

               * 현재 시간(Hour)과 분(Minute)은 사용하지 않는다.

               * const toHour = toDay.getHours().toString();

               * const toMinute = toDay.getMinutes().toString();

               */

     

const toSecondtoDay.getSeconds().toString(); // 현재 초

const choHouroptTime.substring(0, 2); // 옵션의 시간

const choMinuteoptTime.substring(2, 4); // 옵션의 분

// 셀렉트 박스의 옵션 값을 시간값으로 포맷한다.

const optDay = new Date(toYeartoMonthtoDatechoHourchoMinutetoSecond);


// 리턴할 값을 담을 변수 지정

let presence = "";


// 계속되는 반복 작업을 막기위해, 먼저 금일 마지막 시간이 이미 지났는지 여부를 확인한다.

lastOptionTime(toYeartoMonthtoDatetoSecond, function(lastDay) {

// 마지막 예약 시간이 지나지 않은경우

if(lastDay.getTime() > toDay.getTime()) { 

const choHouroptTime.substring(0, 2);

const choMinuteoptTime.substring(2, 4);

// 선택한 옵션의 시간값을 날자 값으로 포맷한다.

const optDay = new Date(toYeartoMonthtoDatechoHourchoMinutetoSecond);

// 현재시간이 옵션의 시간보다 큰경우

if(optDay.getTime() < toDay.getTime()) {

if(motion == "passive") {

alert("선택하신 시간은 경과하여\n예약을 진행 할 수 없습니다.");

// 사용자가 직접 시간을 선택하였으나 이미 시간이 경과한경우 예약 가능한 시간을 찾기위해

// autoSelectTime() 함수를 실행한다.

autoSelectTime();

}

presence = "failure";

}

// 사용가능 한 시간

else {


if(motion == "passive") {

alert("선택하신 시간으로\n예약이 진행됩니다.");

}

presence = "success";

}

}

// 마지막 시간이 지난 경우

else {

document.getElementById("choiceTime").options[0].selected = true;

alert("금일 예약가능한 시간이 모두 지났습니다.\n내일 날자로 예약하여 주시기 바랍니다.");

presence = "unknown";

}

});

return presence;

}


// 마지막 예약 가능 시간을 체크하는 함수

function lastOptionTime(toYeartoMonthtoDatetoSecond, callBack) {

// 마지막 option 엘리먼트의 value값을 가져온다.

const lastTime = document.getElementById("choiceTime").lastElementChild.value;

const lastHourlastTime.substring(0, 2);

const lastMinutelastTime.substring(2, 4);

// 마지막 option의 value값(시간)을 날자값으로 포맷한다.

const lastDay = new Date(toYeartoMonthtoDatelastHourlastMinutetoSecond);

callBack(lastDay);

}

</script>

</head>

<body>

<h1>■ 시간 자동 선택 Part3</h1>

<select id="choiceTime" onChange="timeConstraint(this.value, 'passive');">

<option value="" selected>- 선택 -</option>

<option value="0900">09:00</option>

<option value="1000">10:00</option>

<option value="1100">11:00</option>

<option value="1200">12:00</option>

<option value="1300">13:00</option>

<option value="1400">14:00</option>

<option value="1500">15:00</option>

<option value="1600">16:00</option>

<option value="1700">17:00</option>

<option value="1800">18:00</option>

</select>

</body>

</html>  





# 출력 결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScrpt] 파일업로드시 확장자 검사하기[JavaScrpt] 파일업로드시 확장자 검사하기

Posted at 2019.01.23 11:48 | Posted in JavaScript & jQuery/JavaScript





참고 : https://code.i-harness.com/ko-kr/q/409d5d






■ 이미지 파일 업로드시 확장자 검사하기




# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT 특정 문자열 검색 ::</title>

<script type="text/javascript">

function confirmFileExtension(file) {

console.log(file);

// 정규식을 사용히여 jpg, jpeg, png, gif, bmp등 이미지파일의 확장자를 가진것을 추려낸다.

var reg = /(.*?)\.(jpg|jpeg|png|gif|bmp)$/;

  if(file.match(reg)) {

alert("해당 파일은 이미지 파일입니다.");

} else {

alert("해당 파일은 이미지 파일이 아닙니다.");

}

}

</script>

</head>

<body>

    <h3>이미지 파일 검색</h3>

    <input type="file" id="imgFile"/>

    <br/>

    <input type="button" onClick="confirmFileExtension(imgFile.value);" value="업로드"/>

</body>

</html>





# 출력 결과








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 시간이 AM 혹은 PM인지 확인하기[JavaScript] 시간이 AM 혹은 PM인지 확인하기

Posted at 2019.01.22 16:00 | Posted in JavaScript & jQuery/JavaScript




참고 : https://electronic-moongchi.tistory.com/83

참고 : https://code.i-harness.com/ko-kr/q/87a0ab




■ 현재 시간이 오전인지 오후인지를 나타내는 함수




# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT 날짜 출력 ::</title>

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", function() {


    // 브라우저의 현재 날짜를 받아온다.

    var toMeridiemnew Date();

    document.getElementById("toMeridiem").value = toMeridiem.ampm();

  });


  // 현재 날짜값을 오전 or 오후 문자로 변환해주는 함수

  Date.prototype.ampm = function() {

      var hours = this.getHours() < 12 ? "오전" : "오후";

      // var hours = this.getHours() < 12 ? "AM" : "PM";

      return hours;

  }

</script>

</head>

<body>

    <h3>지금은 오전 or 오후 인가?</h3>

    <input type="text" id="toMeridiem" style="text-align:center;"/>

</body>

</html>





# 출력 결과






관련포스팅 : [JavaScript] 날짜 자동 포맷 함수





Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 날짜 자동 포맷 함수[JavaScript] 날짜 자동 포맷 함수

Posted at 2019.01.11 18:22 | Posted in JavaScript & jQuery/JavaScript




웹 프론트 개발중에서는 항상 날짜를 특정한 형태의 포맷으로


화면에 나타내야 하는 경우가 잦다.


그때만다 Date() 함수등을 사용하여 정리하기는 너무 번거로운일이다.


아래 포스팅은 사용자 표현식 함수로 미리 날짜 포맷을 자동으로 맞춰주는 기능이다.





■ YYYY-MM-DD 형식으로 날짜 포맷하기





해당 코드는 기본 날짜값을 년 - 월 - 일 형식으로 바꿔준다.




# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 날짜 출력 ::</title>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 브라우저의 현재 날짜를 받아온다.

    var toDay = new Date();
    document.getElementById("toYmd").value = toDay.yyyymmdd();
  });

  // 현재 날짜값을 yyyy-mm-dd 형식으로 변환해주는 함수
  Date.prototype.yyyymmdd = function() {
      var yyyy = this.getFullYear().toString();
      var mm = (this.getMonth() + 1).toString();
      var dd = this.getDate().toString();
      return  yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]);
  }
</script>
</head>
<body>
    <h3>금일 날짜는(YYYY-MM-DD)?</h3>
    <input type="text" id="toYmd" style="text-align:center;"/>
</body>
</html>




# 출력 결과












■ HH:MM:SS 형식으로 시간 포맷하기





#01. 00시 ~ 24시 단위로 나타내기




해당 코드는 기본 날짜값을 시 : 분 : 초 형식으로 바꿔준다.




# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 시간 출력 ::</title>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 브라우저의 현재 시간을 받아온다.
    var toTime = new Date();
    document.getElementById("toHms").value = toTime.hhmmss();
  });

  // 현재 시간값을 hh:mm:ss 형식으로 변환해주는 함수
  Date.prototype.hhmmss = function() {
      var hh = this.getHours().toString();
      var mm = this.getMinutes().toString();
      var ss = this.getSeconds().toString();
      return (hh[1] ? hh : "0" + hh[0]) + ":" + (mm[1] ? mm : "0" + mm[0]) + ":" + (ss[1] ? ss : "0" + ss[0]);
  }
</script>
</head>
<body>
    <h3>현재 시간은(HH:MM:SS)?</h3>
    <input type="text" id="toHms" style="text-align:center;"/>
</body>
</html>




# 출력 결과





#02. AM, PM 12시간 단위로 나타내기




위에서 24시간 개념으로 시간을 출력하는것을 만들어 보았다면


이제 오전, 오후로 구분할 수 있는 12시간 개념으로 숫자를 표현해 보고자 한다.




# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 시간 출력 ::</title>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 브라우저의 현재 시간을 받아온다.
    var toTime = new Date();
    document.getElementById("toHms").value = toTime.hhmmss();
  });

  // 현재 시간값을 hh:mm:ss 형식으로 변환해주는 함수
  Date.prototype.hhmmss = function() {
      var hh = (hourthis.getHours().toString() % 12) ? hour : 12;

      hh = hh.toString();
      var mm = this.getMinutes().toString();
      var ss = this.getSeconds().toString();
      return (hh[1] ? hh : "0" + hh[0]) + ":" + (mm[1] ? mm : "0" + mm[0]) + ":" + (ss[1] ? ss : "0" + ss[0]);
  }
</script>
</head>
<body>
    <h3>현재 시간은(HH:MM:SS)?</h3>
    <input type="text" id="toHms" style="text-align:center;"/>
</body>
</html>




# 출력 결과





오전 or 오후, AM or PM을 표기하기 위한 함수는 따로 포스팅을 해두었다.


필요하다면 아래 링크를 참고하면 된다.





관련포스팅 : [JavaScript] 시간이 AM 혹은 PM인지 확인하는 함수













문자형 YYYY-MM-DD HH:MM:SS 형식, DATE 형변환






위에서 YYYY-MM-DD, HH:MM:SS 형식으로 날짜값을 변환하여 출력할 수 있게 만들어 보았다.


그렇지만 개발이란게 꼭 이대로 끝나지 않고.


위와 같이 만든 형태를 다시 날짜형으로 변환 시켜주어야 하는 경우가 꼭 발생한다.


아래 코드를 이용하여 YYYY-MM-DD HH:MM:SS 혁식으로 된 날짜 값을 다시


자바스크립트의 날짜형으로 변환 시켜 보자.



# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT 날짜 변환 ::</title>

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", function() {


    // 강제로 YYYY-MM-DD HH:MM:SS 형식으로 날자값을 변수에 담는다.

    var txtDate = "2019-01-14 11:24:32";

    document.getElementById("convertTime").value = dateConvert(txtDate);

  });


  // 문자 YYYY-MM-DD HH:MM:SS값 날짜형으로 형변환

  var dateConvert = function(date) {

      var yeardate.substring(0, 4);

      var monthdate.substring(5, 7);

      var daydate.substring(8, 10);

      var hourdate.substring(11, 13);

      var minutedate.substring(14, 16);

      var seconddate.substring(17, 19);

      return new Date(yearmonthdayhourminutesecond);

  }

</script>

</head>

<body>

    <h3>현재 시간은?</h3>

    <input type="text" id="convertTime" style="text-align:center;width:350px;"/>

</body>

</html>




# 출력 결과








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 더블 클릭 이벤트 방지[JavaScript] 더블 클릭 이벤트 방지

Posted at 2018.12.29 17:32 | Posted in JavaScript & jQuery/JavaScript




참고 : http://cofs.tistory.com/270




해당 코드는 제목대로 사용자의 더블 클릭 이벤트가 발생하였을 경우 예외처리가 가능하다.


그렇지만 윈도우 바탕화면의 실행 아이콘을 더블 클릭하는것과 같이.


빠르게 더블 클릭하는것을 예외 처리하는 코드가 아니라는것을 우선 밝혀두는 바이다.


그저 그런 이벤트를 막기위한 한가지 꼼수라고 생각하고 포스팅을 보길 바란다.







■ 짝수 클릭의 경우 예외 처리하기




특정 이벤트 실행시 더블 클릭을 방지하기 위해서 제작되었다.


위 코드의 원본은 http://cofs.tistory.com/270 포스팅을


현재 필자가 진행한 프로젝트에 맞게 수정한 내용이다.




해당 코드를 사용시 주의할 점이 존재하기에 우선 그 부분을 먼저 설명하고자 한다.


# 주의사항


      진짜 더블 클릭을 예외처리하는 코드가 아니다,

         실제로는 짝수번째의 클릭시 이벤트를 막는다.


      해당 기능은 한 페이지에서 하나의 이벤트만이 수행 가능하다.

         복수의 이벤트에서 사용하려면 추가적인 로직을 구현하는 작업이 필요하다.






# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 더블 클릭 방지 ::</title>
<script type="text/javascript">

  // 시작과 동시에 선언될 익명 선언식 함수를 사용한다.
  // 익명 선언식 함수를 사용한 이유는
  // doubleFlag 변수를 전역으로 사용하는것을 피하기 위해서다.
  (function() {

    // doubleFlag는 처음에 false로 초기화 한다.
    var doubleFlag = false;

    // 더블 클릭 함수 생성
    this.doubleCheck = function doubleCheck() {
      if(doubleFlag == true) {
        return doubleFlag;
      } else {
        doubleFlag = true;
        return false;
      }
    }

    // 더블 클릭된 이벤트가 발생이후 다시 버튼을 초기화 하기 위해 사용된다.
    this.clickInitial = function clickInitial() {
      doubleFlag = false;
    }
  })();

  // 클릭 이벤트
  function clickSubmit() {

    // 더블 클릭한 경우
    if(doubleCheck() == true) {

      alert("2번클릭");


      // 다시 정상적으로 클릭이벤트가 발생 할 수 있도록 초기화 요청
      clickInitial();
      return;
    }

    // 한번만 클릭한 경우
    else {
      alert("1번클릭");
    }
  }


</script>
</head>
<body>

    <h3>더블 클릭 이벤트 예외 처리하기</h3>

    <input type="button" onClick="clickSubmit();" value="검사"/>
</body>
</html>



# 출력 결과






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 자바스크립트에서의 Test Suite[JavaScript] 자바스크립트에서의 Test Suite

Posted at 2018.12.25 17:15 | Posted in JavaScript & jQuery/JavaScript




■ 테스트 스위트란?



테스트 스위트의 주된 목적은 개별 테스트를 묶어 하나의  자원으로 제공함으로써

여러 테스트를 한 번에 실행할 수 있게 그리고 반복해서 간단히 실행할 수 있게 하는 것이다.




#01. 검증 조건


단위 테스트 프레임워크의 핵심은 검증 메서드로, 이 메서드의 이름은 일반적으로 assert( ) 이다.

해당 메서드는 항상 검증의 전제가  되는 표현 하나와 검증의 목적을 설명하는 인자를 받는다.

해당 표현 값이 ""이거나 "참 이 될 수 있는 값"이면 검증 조건을 통과하게 된다.

그렇지 않으면, 실패로 간주된다.

연관된 문구는 보통 성공 / 실패 표시와 함께 출력된다.

다음 코드에서 이 개념의 간단한 구현을 볼 수 있다.



# 소스 코드

 test_suite.php

<html>
  <head>
    <title>:: 테스트 스위트 ::</title>
    <script type="text/javascript">

      // assert() 메서드 정의
      function assert(value, desc) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild(document.createTextNode(desc));
        document.getElementById("results").appendChild(li);
      } // END function assert(value, desc)

      // 검증 조건을 이용해서 테스트 실행
      window.onload = function() {


        assert(true, "테스트 스위트 러닝");
        assert(false, "테스트 실패");
      } // END window.onload = function()
    </script>
    <style type="text/css">
      /* 결과를 출력할때 구분할 스타일 정의 */
      #results li.pass { color:#008000; }
      #results li.fail { color:#FF0000; }
    </style>
  </head>
  <body>
    <!-- 테스트 결과 수집 -->
    <ul id="results"></ul>
  </body>
</html>




# 출력 결과






#02. 테스트 그룹



간단한 검증 조건만으로도 유용하지만, 테스트 내용에 따라서 테스트를 그룹으로 묶을 때, 이는 정말로 유용해지기 시작한다.


단위 테스트에서, 하나의 테스트 그룹은 API나 애플리케이션에서 주로 어떤 한 메서드와 연관된 검증 조건들의 집합을 나타낸다.


또한 행위 주도 개발(behavior-driven development)을 한다면, 테스트 그룹은 태스크에 대한 검증 조건의 집합이 될 것이다.


어쨌거나 두 경우 모두, 테스트 그룹을 구현하는 방식은 거의 동일하다.



다음 테스트 스위트 예제는 테스트 그룹을 제공하고, 테스트 그룹 내에 포함된 각 검증 조건에 대한 결과는 results에 저장된다.


게다가 어떤 검증 조건이 하나라도 실패하면, 전체 테스크 그룹은 실패로 표시된다. 다음 코드의 결과는 꽤 간단하지만,


몇 단계의 동적 제어(테스트 그룹 내에 실패한 테스트가 있을경우, 테스트 그룹을 확장 / 축소하거나 필터링 하는것)는


실제로 매우 유용할 것이다.




# 소스 코드

 group_test_suite.php

<html>
  <head>
    <title>:: 테스트 그룹 구현 ::</title>
    <script type="text/javascript">

      // 익명 즉시 실행 함수 정의
      (function() {
        var results = "";
        this.assert = function assert(value, desc) {
          var li = document.createElement("li");
          li.className = value ? "pass" : "fail";
          li.appendChild(document.createTextNode(desc));
          results.appendChild(li);

          if(!value) {
            li.parentNode.parentNode.className = "fail";
          }

          return li;
        };

        this.test = function test(name, fn) {
          results = document.getElementById("results");
          results = assert(true, name).appendChild(document.createElement("ul"));
          fn();
        };
      })(); // (function())

      // 검증 조건을 이용해서 테스트 실행
      window.onload = function() {
        test("A test.", function() {
          assert(true, "첫번째 증명 성공");
          assert(true, "두번째 증명 성공");
          assert(true, "세번째 증명 성공");
        });

        test("B test.", function() {
          assert(true, "첫번쨰 테스트 성공");
          assert(false, "두번쨰 테스트 실패");
          assert(true, "세번쨰 테스트 성공");
        });

        test("C test.", function() {
          assert(null, "fail");
          assert(5, "pass");
        });
      } // END window.onload = function()
    </script>
    <style type="text/css">

      /* 결과를 출력할때 구분할 스타일 정의 */
      #results li.pass { color:#008000; }
      #results li.fail { color:#FF0000; }
    </style>
  </head>
  <body>
    <!-- 테스트 결과 수집 -->
    <ul id="results"></ul>
  </body>
</html>




# 출력 결과



위코드는 먼저 테스트한 test_suite.php 페이지의 assert( ) 함수의 로깅 구현과 크게 다르지 않다.


가장 큰 차이는 현재 테스트 그룹을 참조하는(검증 조건을 적절히 로깅하기 위한 수단인) results 변수를 포함하고 있느냐이다.


비동기 테스트 동작을 다루는 방식 역시 테스트 프레임워크의 중요한 측명가운데 하나다.







#03. 비동기 테스트



많은 개발자들이 자바스크립트 테스트 스위트 개발 중에 만나는 힘들고 복잡한 작업은 비동기 테스트다.


Ajax 요청이나 애니메이션처럼, 비동기 테스트는 예측할 수 없는 시간이 지난 후에야 결과를 받게 될 것이다.


비동기 테스트의 이러한 이슈를 다루는 작업은 오버엔지니어링이 되기 쉽상이고, 필요 이상으로 일을 복잡하게 만들기도 한다.


비동기 테스트를 다루려면 다음 단계를 따라야 한다.



    ① 동일한 비동기 연산에서 사용해야 한는 검증 조건은 같은 테스트 그룹으로 묶어야 한다.


    ② 각 테스트 그룹은 하나의 큐에 존재해야 하고, 이전 테스트 그룹이 모두 종료한 뒤에 실행되어야 한다.




이렇게, 각 테스트 그룹은 비 동기적으로 실행될 수 있다.




# 소스 코드

 asynchronous_test_suite.php

<html>
  <head>
    <title>:: 비동기 테스트 스위트 ::</title>
    <script type="text/javascript">

      // 익명 즉시 실행 함수 정의
      (function() {

        var queue = [];
        var paused = false, results;

        this.test = function(name, fn) {

          queue.push(function() {
            results = document.getElementById("results");
            results = assert(true, name).appendChild(document.createElement("ul"));
            fn();
          });

          runTest();
        };

        this.pause = function() {

          paused = true;
        }

        this.resume = function() {

          paused = false;
          setTimeout(runTest, 1);
        }

        function runTest() {

          if(!paused && queue.length) {
            queue.shift()();
            if(!paused) {
              resume();
            }
          }
        }

        this.assert = function assert(value, desc) {

          var li = document.createElement("li");
          li.className = value ? "pass" : "fail";
          li.appendChild(document.createTextNode(desc));
          results.appendChild(li);

          if(!value) {
            li.parentNode.parentNode.className = "fail";
          }

          return li;
        };
      })(); // END (function())

      // 검증 조건을 이용해서 테스트 실행
      window.onload = function() {

        test("비동기 테스트 #01.", function() {
          pause();
          setTimeout(function() {
            assert(true, "첫번째 테스트 성공");
            resume();
          }, 1000);
        });

        test("비동기 테스트 #02.", function() {
          pause();
          setTimeout(function() {
            assert(false, "두번째 테스트 실패");
            resume();
          }, 1000);

          test("비동기 테스트 #03.", function() {
            pause();
            setTimeout(function() {
              assert(true, "세번째 테스트 성공");
              resume();
            }, 1000);
          });
        });
      } // END window.onload = function()
    </script>
    <style type="text/css">

      /* 결과를 출력할때 구분할 스타일 정의 */
      #results li.pass { color:#008000; }
      #results li.fail { color:#FF0000; }
    </style>
  </head>
  <body>
    <!-- 테스트 결과 수집 -->
    <ul id="results"></ul>
  </body>
</html>





# 출력 결과




asynchronous_test_suite.php 페이지에는 외부에서 사용 가능한 test( ), pause( ), resume( ) 함수가 세 개가 있다.


이 세 함수는 다음 특성을 따른다.




    ① test( fn )


        -. 다수의 검증 조건을 가지고 있는 함수를 인자로 받고, 이 함수를 테스트 실행을 위한 큐에 저장한다.

        -. 함수가 가지고 있는 검증 조건은 동기나 비동기로 실행될 것이다.



    ② pause( )


        -. test( ) 함수 안에서 실행된다.

        -. 현재 테스트 그룹의 실행이 완료될 때까지, 테스트 스위트에 실행 중인 전체  테스트를 정지하라고 알려준다.



    ③ resume( )


        -. test( ) 함수를 재개하고, 이전 코드가 오래 실행되어 전체 코드가 멈추는 것을 방지하기 위해서

          잠시 동안의 딜레이를 준 다음 테스트를 실행한다.





내부적인 구현 함수는 runTest( ) 이며 테스트가 큐에 저장되거나 빠질 때 호출된다.


테스트 스위트가 현재 정지되지 않았는지를 체크하고, 큐 안에 테스트가 있다면, 테스트를 큐에서 빼서 실행을 시도한다.


게다가 테스트 그룹의 실행이 종료된 후에, runTest( )는 테스트 스위트가 현재 정지되어 있는지를 검사하고,


그렇지 않다면(테스트 그룹 안에 비동기 테스트만 실행된고 있다면),


runTest( )는 다음 테스트 그룹을 실행하기 시작한다.





Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크

Posted at 2018.11.17 13:14 | Posted in JavaScript & jQuery/jQuery



■ 모바일 웹 키보드 ON / OFF 여부 체크하기




#01. 안드로이드(Android)에서 키보드 이벤트 체크


# 소스코드

<html>
<head>
<title>:: MOBILE 키보드 체크 ::</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/git/jquery.mobile-git.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/git/jquery.mobile-git.min.js"></script>
<script type="text/javascript">
  jQuery(window).load(function() {
     
      // 처음 시작시 화면의 사이즈 값을 가진다.
      var originalSize = jQuery(window).width() + jQuery(window).height();
     
      // 창의 사이즈 변화가 일어났을 경우 실행된다.
      jQuery(window).resize(function() {
         
        // 처음 사이즈와 현재 사이즈가 변경된 경우
        // 키보드가 올라온 경우
        if(jQuery(window).width() + jQuery(window).height() != originalSize) {
           
          alert("가상 키보드가 오픈 되었습니다."); 
        }
       
        // 처음 사이즈와 현재 사이즈가 동일한 경우
        // 키보드가 다시 내려간 경우
        else {
           
          alert("가상 키보드의 사용지 종료되었습니다.");
        }
      });
    });
</script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>:: MOBILE 키보드 체크 ::</h1>
    </div>
     <div data-role="content">
        <div data-role="fieldcontain">
            <label for="textinput">ID</label>
            <input type="text" name="id_input" id="id_input"/>
        </div>
        <div data-role="fieldcontain">
            <label for="textinput">Password</label>
            <input type="text" name="password_input" id="password_input"/>
        </div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <input type="submit" value="로그인"/>
            </div>
            <div class="ui-block-b">
                <input type="reset" value="로그아웃"/>
            </div>
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




# 출력결과

  키보드 오픈

  키보드 종료










#02. 아이폰(iOS)에서 키보드 이벤트 체크



준비중



Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 저장소 사용하기[JavaScript] 저장소 사용하기

Posted at 2018.09.07 15:51 | Posted in JavaScript & jQuery/JavaScript





localStorage를 사용한 저장소 기능 사용하기



-. 기존의 자바스크립트는 쿠키를 사용하는 방법 이외에도 수많은 방법을 사용해 데이터를 저장하고자 노력했다.

-. 이전에는 플래시 저장소를 사용하거나 각각의 브라우저에 존재하는 특수한 저장소를 사용했다.

-. 데이터를 오래 지속하는 것은 애플리케이션을 만들 때 꼭 필요한 기능이므로 HTML5부터는 저장소 기능을 기본으로 제공한다.

-. 저장소는 웹 브라우저를 삭제하지 않는이상 데이터를 영구적으로 저장한다.



:: 저장소 기능을 지원하는 브라우저 ::

 인터넷 익스플러(Internet Explorer)

 8 이상

 파이어 폭스(Fire Fox)

 3.5 이상

 사파리(Safari)

 4.0 이상

 크롬(Chrome)

 4.0 이상

 오페라(Opera)

 10.5 이상



# 소스코드

<html>
<head>
<title>:: JavaScript 로컬 저장소 ::</title>
<script language="javascript">

    document.addEventListener("DOMContentLoaded", function() {

        if(window.localStorage) {

            // 해당 예제를 실행하기전 이전 clear( ) 메서드를를 사용하여 작성했던 저장소의 내용을 전부 삭제한다.
            localStorage.clear();
        }
        else {
            alert("로컬 저장소를 사용할 수 없는 브라우저입니다.");
        }
    });

    function printLocalStorage() {

        var output = "";

        // div 태그에 로컬 저장소의 내용을 출력한다.
        for(var key in window.localStorage) {
            output += "<p>";


            // getItem( ) 메서드를 이용하여 key 값의 value 값을 찾는다.
            output += key + " : " + localStorage.getItem(key);
            output += "</p>";
        }

        document.getElementById("output").innerHTML = output;
    }

    function saveLocalStorage() {

        // 변수를 선언한다.
        var key = document.getElementById("key").value;
        var value = document.getElementById("value").value;

        // setItem( ) 메서드를 이용하여 value값을 로컬 저장소에 저장한다.
        localStorage.setItem(key, value);

        // 데이터를 출력한다.
        printLocalStorage();
    }
</script>
</head>
<body>
    <input type="text" id="key" value=""/>
    <input type="text" id="value" value=""/>
    <input type="button" value="저장" onClick="saveLocalStorage();"/>
    <div id="output">
        <!-- 저장된 내용을 출력할 DIV 엘리먼트 -->
    </div>
</body>
</html>




# 출력결과





localStorage 객체의 메서드


메서드 이름

설명

 setItem(key, value)

 · 로컬 저장소에 데이터를 생성한다.

 getItem(key)

 · 로컬 저장소의 데이터를 읽어온다.

 removeItem(key)

 · 로컬 저장소의 지정한 key 값의 데이터를 삭제한다.

 clear()

 · 로컬 저장소의 데이터를 전부 삭제한다.

 key(number)

 · 로컬 저장소의 특정 순서의 데이터를 읽어온다.







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기