[JavaScript] 실시간 타이머(시계) 만들기[JavaScript] 실시간 타이머(시계) 만들기

Posted at 2019. 12. 5. 19:25 | Posted in JavaScript & jQuery/JavaScript




■ 실시간 타이머(시계) 만들기




# 소스코드

<html>

<head>

<title>:: JavaScript 전광판 효과 ::</title>

<script type="text/javascript">

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


        // 시간을 딜레이 없이 나타내기위한 선 실행

        realTimer();


        // 이후 0.5초에 한번씩 시간을 갱신한다.

        setInterval(realTimer, 500);

    });


    // 시간을 출력

    function realTimer() {

const nowDate = new Date();

const year = nowDate.getFullYear();

const monthnowDate.getMonth() + 1;

const datenowDate.getDate();

const hournowDate.getHours();

const minnowDate.getMinutes();

const secnowDate.getSeconds();

document.getElementById("nowTimes").innerHTML = 

                  year + "-" + addzero(month) + "-" + addzero(date) + "&nbsp;" + hour + ":" + addzero(min) + ":" + addzero(sec);

}


        // 1자리수의 숫자인 경우 앞에 0을 붙여준다.

function addzero(num) {

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

  return num;

}

</script>

</head>

<body>

    <h1>■ 현재시간 : <span id="nowTimes"></span></h1>

</body>

</html>




# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 전광판 효과 구현하기[JavaScript] 전광판 효과 구현하기

Posted at 2019. 12. 5. 13:51 | Posted in JavaScript & jQuery/JavaScript




출처① : http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

출처② : https://balancing425.tistory.com/7

CSS : http://www.dynamicdrive.com/dynamicindex2/crawler/crawler.js





■ 전광판 효과 구현(Marquee 대체)




한때 HTML이 막 유행하던 초창기에 <marquee> 태그가 들어간 싸이트는


뭔가 굉장히 화려한 사이트라고 느껴지던 때가 있었다.


지금은 완전히 묻혔지만.



프로젝트 진행중 marquee와 비슷하지만,


무한 루프처럼 끊이없이 화면에 텍스트 내용이 비춰야 하는

(<marquee> 태그사용시 해당영역에서 모든 내용이 다 사라지고 나서 출력된다.)


상황이 있었기에 필요한 코드를 찾았고 정리해 본다.





# 소스코드

<html>

<head>

<title>:: JavaScript 전광판 효과 ::</title>

<style type="text/css">

    span { margin-right:50px; }

</style>

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

<script type="text/javascript">

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

        marqueeInit({

              uniqueid : "mycrawler"

            , style : {

                 "padding" : "2px"

                , "width" : "600px"

                , "height" : "30px"

            }

            , inc : 5                              // 속도

            , mouse : "cursor driven"       // 마우스 사용여부

            , moveatleast : 2                  // 이동속도

            , neutral : 150

            , savedirection : true             // false를 선언하면 마우스 커서가 위치하는 순간 역방향으로 움직인다.

            , random : false                   // 나오는 순서(기본값 : true)

        });

    });

</script>

</head>

<body>

<h1>■ 전광판 효과</h1>

<div class="marquee" id="mycrawler">

    <span>I'm defying gravity And you can't pull me down!</span>

    <span>이제는 나 중력을 벗어나 날아올라 날개를 펼칠거야</span>

    <span>They'll never bring us down!</span>

    <span>아무도 우릴 막지 못할 거야</span>

    <span>Everyone deserves the chance to fly</span>

    <span>그 누구라도 날아오를 자격이 있잖아!</span>

</div>

</select>

</body>

</html>




# 출력결과








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] AJAX 호출[JavaScript] AJAX 호출

Posted at 2019. 11. 17. 22:35 | Posted in JavaScript & jQuery/JavaScript




참고① : 하루 10분씩 핵심만 골라 마스터하는 Ajax 핸드북

참고② : Ajax 시작하기 



전통적인 방식의 사이트들을 이용할 때에는 텍스트와 그림, 데이터 입력 폼(Form) 등이 하나의 페이지 단위로 처리되었다.


각각의 페이지들도 다른 페이지로 이동하기 전에는 페이지 전체가 하나의 독립된 페이지로 처리되었다.



예를 들면, 폼의 데이터 입력 필드에 값을 기록하고 또 수정하는 등의 작업을 하더라도 우리가 전송 버튼을 누르기 전에는


어떠한 내용도 서버에 보내지 않는다.



입력된 폼을 전송하거나 링크를 통해서 다른 곳으로 이동할 때,


사용자는 반드시 새로운 페이지가 서버로부터 전송되어 화면에 업데이트될 때까지 기다려야 한다.







■ AJAX를 이용하여 XML 데이터 출력하기




# 소스코드 - XML 데이터 생성

 tell_time_xml.php

<?php

header("Content-Type:text/xml");

echo "<?xml version='1.0'?>";

echo "<clock>";

echo "<timeNow>";

echo date("Y-m-d H:i:s");

echo "</timeNow>";

echo "</clock>";

?>




# 소스코드 - AJAX 호출 영역

 ajax_application.html

<html>

<head>

<meta charset="UTF-8">

<title>:: Ajax Demonstration ::</title>

<style type="text/css">

body { text-align:center; }

#showTime {

display:inline-block;

width:250px;

background-color:#FFFFFF;

border:2px solid #000000;

padding:10px;

font:24px normal verdana, helvetic, arial, sans-serif;

}

</style>

<script language="JavaScript" type="text/javascript">

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

// HTML 실행이 완료되었을 경우 getServerTime( ) 함수를 실행한다.

getServerTime();

});

function getXMLHTTPRequest() {

let request = false;

// 브라우저(FireFox, Chrome)에 맞는 생성자를 이용해서 객체의 인스턴스를 생성

try {

request = new XMLHttpRequest();

}

// 객체가 존재하지 않는경우 MS방식의 브라우저 이므로 ActiveX객체를 검사하고 생성하는 작업을 수행한다.

catch(err01) {

try {

request = new ActiveXObject("Msxml2.XMLHTTP"); // some versions IE

}

catch(err02) {

try {

request = new ActiveXObject("Microsoft.XMLHTTP"); // some versions IE

}

catch(err03) {

request = false;

}

}

}

return request;

}

// XMLHTTPRequest 객체를 생성하여 http라는 전역 변수에 담아 필요할때 바로 사용한다.

let http = getXMLHTTPRequest();

function getServerTime() {

// xml 형태의 시간정를 가지고 있는 URL 정보

let xmlUrl = "tell_time_xml.php";

// XMLHTTPRequest 객체가 서버와 통신하기 위한 준비과정을 진행한다.

http.open("GET", xmlUrl, true);


                // onreadystatechange 메소드는 useHttpResponse( ) 함수를 호출한다.

                // 해당 함수를 수행하는 것이 아니라 단순하게 어떤 함수가 불릴 것인지만 지정한다.

                // 단순하게 그 함수를 지정하는 것이므로 그 함수로 어떠한 변수도 전달하지 않는다. ( 괄호사용× )

                // 또한 단순하게 함수를 연결하면 되기 때문에 함수 본체를 기입해도 된다.

http.onreadystatechangeuseHttpResponse;

// .open( ); 메소드를 이용해서 XMLHTTPRequest를 준비된 내용을 가지고,

// 서버에 실제 요청을 보내기위해 .send( ); 메소드를 사용한다. 

http.send(null);

}

function useHttpResponse() {

// readyState값이 4인경우 완료됨을 의미한다.

if(http.readyState == 4) {

// HTTP 응답이 "OK"인 경우

if(http.status == 200) {

var timeValue = http.responseXML.getElementsByTagName("timeNow")[0];

document.getElementById("showTime").innerHTML = timeValue.childNodes[0].nodeValue;

}

else {

// 서버가 리턴한 http 상태를 설명한다.

alert("An error has occurred : " + http.statusText);

}

}

// 완료되지 않은경우 버퍼링 이미지를 노출한다.

else {

document.getElementById("showTime").innerHTML = "<img src='http://gph.is/1XRTmuh' style='width:100%;'>";

}

}

</script>

</head>

<body style="background-color:#CCCCCC">

<h1>Ajax Domonstration</h1>

<h2>Getting the server time without page refresh</h2>

<form>

<input type="button" value="Get Server Time" onClick="getServerTime();"/>

</form>

<div id="showTime"></div>

</body>

</html>



# 출력결과









■ AJAX를 이용한 JSON 데이터 전송






작성중





Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

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

Posted at 2019. 6. 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. 6. 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에서만 되는거 아닌가요?
    • 비트박
      2019.11.01 14:24 [Edit/Del]
      예 맞습니다. https에서만 동작을 하는데.
      cafe24 호스팅 같은 경우에는 임의로 https들 붙여서 실행해도 되더군요

      그리고 참고로 아이폰-크롬에서는 동작 하지 않습니다.
  6. pasta
    안녕하세요 혹시 qr코드말고 바코드를 읽을수 있는방법은없을까요?

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

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

Posted at 2019. 5. 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 | 비밀글로 남기기

[JavaScript] 정규 표현식을 사용한 데이터 변환[JavaScript] 정규 표현식을 사용한 데이터 변환

Posted at 2019. 4. 16. 15:36 | Posted in JavaScript & jQuery/JavaScript






■ 정규 표현식이란?




정규 표현식(regular expression)이란, 문자열의 패턴을 표현하는 표기 방법으로 문자열의 검색과 치환에 유용하다.


문자열의 패턴을 메타 문자(미리 약속된 특별기호)를 조합하여 표현함으로써 문자를 검색하거나 치환할 수 있다.


대부분의 프로그래밍 언어에서 정규 표현식을 지원하며, 자바스크립트에도 표준 기능으로 탑재되어 있다.




정규 표현식은 씹으면 씹을수로 맛이나는 오징어처럼 쓰면 쓸수록 그 유용함을 깨닫게 된다.


또한, 문자열을 효과적으로 다루기 위해 반드시 터득해야 되는 기술 중 하나이다. 


그러면 정규 표현식의 기본 문법과 자바스크립트에서의 사용법을 알아보자.











■ 자바스크립트에서의 정규 표현식 사용법





자바스크립트에서는 소스 코드 중에 '/패턴/'으로 정규표현식 객체를 생성할 수 있다. 이를 정규 표현식 리터럴이라고 한다.


 var re = /value=\d+/



혹은 RegExp 객체를 생성하여 사용할 수도 있다.



 var re = new RegExp("value=\d+"); 



정규 표현식 리터럴을 사용하면 스크립트가 로드되는 시점에서 정규 표현식이 컴파일되므로 성능에 유리하다.


한편 RegExp 객체를 사용하면 문자열 변수로 정규 표현식 패턴을 지정할 수 있어 동적으로 정규 표현식을 다룰 수 있게 된다.








#01. 정규 표현식 메소드



자바스크립트에는 정규 표현식과 관련하여 다음과 같은 메소드가 준비되어 있다.



 ▼ JavaScript의 정규 표현식 메서드 일람

메서

설  명

 .exec( )

 · 문자열 중에서 일치하는 부분을 검색하여 결과를 배열로 반환한다.

 · 검색에 실패한 경우 null을 반환한다.

 .test( )

 · 문자열 중에서 일치하는 부분이 있는지를 테스트한다.

 · true / false 중 하나를 반환한다.

 · RegExp의 메서드

 .match( )

 · 문자열 중에서 일치하는 것을 검색하여 결과를 배열로 반환한다.

 · 일치하는 패턴이 없는경우 null을 반환한다.

 · String의 메서드

 .search( )

 · 문자열 중에서 일치하는 것이 있는지를 테스트한다.

 · 일치하는 패턴이 없는경우 -1을 반환한다.

 · String의 메서드

 .replace( )

 · 문자열 중에서 일치하는 것을 찾아서 다른 문자열로 치환한다.

 .split( )

 · 문자열을 정규 표현식으로 분할하여 부분 문자열의 배열을 반환한다.



기능이 비슷해 보이는 메서드들이 있는데 다음과 같이 용도에 따라 나눠 생각하면 된다.


어떤 문자열 안에 정규 표현식 패턴이 있는지 확인만 하고 싶을 때는 test( ) 또는 search( )를 사용한다.


더 자세한 정보를 알고 싶을 때에는 exec( ) 혹은 match( )를 사용한다.






#02. RegExp.exec( ) 메서드




RegExp.exec( ) 메서드는 정규 표현식에 해당하는 문자열을 검색하여 패턴이 존재하면


문자열의 배열을 반환함과 동시에 RegExp 객체의 속성을 업데이트하고, 일치하는 패턴이 없으면 null을 반환한다.




결과로 반환되는 배열에는 정규 표현식에 일치하는 문자열이 첫 번째 요소에 담겨 있고,


이어서 정규 표현식 중 괄호로 묶인 부분에 해당하는 부분 문자열이 차례로 담겨 있다.


또한, 이 배열에는 속성으로 정규식에 해당하는 문자열의 인덱스 정보와 입력받은 문자열 값을 포함하고 있다.


<html>

<head>

<title>:: RegExp.exec() 메서드 ::</title>

<script type="text/javascript">

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

// 정규 표현으로 수치 + 영소문자 패턴

var re = /([0-9]+)([a-z]+)/g; // 정규 표현식 객체를 리터럴로 만들어서 변수 str에 대입

// [ ]괄호가 2번 사용되었는데 각각 부분 패턴을 의미한다.

// 대상 문자열

var str = "111jpy,8usd,xxx"; // 정규 표현식으로 확인하고 싶은 문자열을 변수 str에 대입

// 1회 실행

console.log(re.exec(str));

// 2회 실행

console.log(re.exec(str));

// 3회 실행

console.log(re.exec(str));

});

</script>

</head>

</html> 



수행결과는 아래와 같다.







정규 표현식에 g플래그를 지정하면 문자열 안에 일치하는 모든 패턴을 포함하게 된다.


예제에서는 exec( )를 여러 번 호출하며 일치하는 패턴을 차례로 출력하고 있다.


그런데 exec( ) 메서드는 test( )나 search( )에 비해 실행 속도가 느리므로 패턴의 존재 여부만을 확인하고 싶은 경우에는


사용을 권장하지 않는다.






#03. RegExp.test( ) 메서드



RegExp.test( ) 메서드는 인자로 주어진 문자열에 정규 표현식에 해당하는 문자열 패턴이 있는지 여부를 조사한다.


결과로 true나 false의 boolean 값을 반환한다.


<html>

<head>

<title>:: RegExp.exec() 메서드 ::</title>

<script type="text/javascript">

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

// 우편번호 nnn-nnn 패턴

var re = /^\d{3}-\d{3}$/;

// 정규표현식으로 패턴이 일치하는지 확인

console.log("123-123 : ", re.test("123-123"));

console.log("12-123 : ", re.test("12-123"));         // 숫자의 자릿수가 부족해 false

console.log("440-001 : ", re.test("440-001"));

console.log("aaa-bbb : ", re.test("aaa-bbb")); // 숫자가 아닌 알파벳으로 구성되어 있기때문에 false

});

</script>

</head>

</html> 



수행결과는 아래와 같다.









#04. String.match( ) 메서드



String 객체에 관련된 match( ) 메서드는 인자로 전달받은 정규 표현식 패턴을 조사한다.


정규표현식에 g 플래그를 포함하지 않은 경우는 RegExp.exec( ) 메서드와 같은 결과를 반환하지만.


g 플래그를 포함한 경우에는 일치하는 부분을 모두 포함한 배열을 반환한다.


일치하는 패턴이 없으면 null을 반환한다.


g 플래그 여부에 따른 결과의 차이를 유념해서 보도록 한다.



<html>

<head>

<title>:: String.match() 메서드 ::</title>

<script type="text/javascript">

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

// 대상 문자열

var str = "v=20, n=40, c=30";

// 숫자 패턴 검색

console.log("숫자 패턴 검색 : ", str.match(/[0-9]+/));

// 모든 숫자 패턴을 검색

console.log("모든 숫자 패턴 검색 : ", str.match(/[0-9]+/g));

// 변수 = 숫자의 조합을 검색

console.log("변수 = 숫자의 조합을 검색 : ", str.match(/\w+=\d+/g));

});

</script>

</head>

</html> 




수행결과는 아래와 같다.










#05. String.search( ) 메서드



대상 문자열에 정규 표현식에 해당하는 패턴이 있는지 확인할때 사용한다.


정규 표현식에 해당하는 패턴이 발견되면 발견된 인덱스를 돌려주고, 없으면 -1을 반환한다.


<html>

<head>

<title>:: String.search() 메서드 ::</title>

<script type="text/javascript">

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


// 대상 문자열

var str = "zip:999-999, mail:a@example.com";


// 우편번호 검색

console.log("우편번호 검색 : ", str.search(/\d{3}-\d{3}/));

// 이메일 검색

console.log("이메일 검색 : ", str.search(/\w+\@\w+\.\w+/));

// URL 검색

console.log("URL 검색 : ", str.search(/https?:\/\//));

});

</script>

</head>

</html> 




수행결과는 아래와 같다.









#06. String.replace( ) 메서드



정규 표현식으로 치환을 수행하는 replace( ) 메서드는 두 가지 형태의 사용법이 있다.



① 정규 표현식을 이용한 치환


 str.replace( 정규 표현식, 치환될 문자열 )



실제 코드를 통해 사용법을 파악하자.


<meta charset="utf-8">

<html>

<head>

<title>:: String.replace() 메서드 ::</title>

<script type="text/javascript">

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


// 대상 문자열

var str = "Today 10per OFF";

// 숫자를 30으로 치환

console.log("숫자를 30으로 치환 : ", str.replace(/\d+/, "30"));

// 숫자와 이어지는 영문 소문자까지 치환

console.log("숫자와 이어지는 영문 소문자까지 치환 : ", str.replace(/\d+[a-z]+/, "500won"));

// 알파벳을 전부 지우고 숫자만을 남긴다.

console.log("알파벳을 전부 지우고 숫자만을 남김 : ", str.replace(/[a-zA-Z]+/g, ""));

});

</script>

</head>

</html> 






치환될 문자열 내에 특수한 치환 패턴을 포함할 수 있다.



 ▼ 치환될 문자열에 사용되는 특수 기호

패턴

설   명

 $$

 · 문자 '$'를 삽입한다.

 $&

 · 매치된 부분 문자열을 삽입한다.

 $`

 · 매치된 부분 문자열 직전의 문자열을 삽입한다.

 $'

 · 매치된 부분 문자열 직후의 문자열을 삽입한다.

 $1$2$3…

 · 괄호로 묶인 부분 문자열을 삽입한다.



<html>

<head>

<title>:: String.replace() 메서드 ::</title>

<script type="text/javascript">

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


// 대상 문자열

var str = "Today 10per OFF";

// 숫자를 30으로 치환

console.log("숫자를 30으로 치환 : ", str.replace(/\d+/, "30"));

// 숫자와 이어지는 영문 소문자까지 치환

console.log("숫자와 이어지는 영문 소문자까지 치환 : ", str.replace(/\d+[a-z]+/, "500won"));

// 알파벳을 전부 지우고 숫자만을 남긴다.

console.log("알파벳을 전부 지우고 숫자만을 남김 : ", str.replace(/[a-zA-Z]+/g, ""));

});

</script>

</head>

</html>  






② 콜백함수를 사용하여 치환



콜백 함수를 사용하는 replace( ) 메서드의 사용법을 알아보자.



 str.replace( 정규표현식, 치환 함수 ) 



문자열 str안의 정규 표현식에 일치하는 문자열에 대해 치환 함수가 수행된다.


그러면 수행된 치환 함수의 반환 값으로 치환된다.


직접 프로그램으로 확인해 보자.


다음은 영어 단어의 소문자를 대문자로 치환하는 예이다.



<html>

<head>

<title>:: String.replace() 메서드 ::</title>

<script type="text/javascript">

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


// 대상 문자열

var str = "piano GUITAR";

// 대소문자를 소문자로 치환

var txtstr.replace(/[a-z]+/g, function(v) {

return v.toUpperCase();

});

document.getElementById("instrument").innerHTML = txt;

});

</script>

</head>

<body>

<h1 id="instrument"></h1>

</body>

</html>



위 프로그램을 실행하면 "PLANO GUITAR"라고 표시된다.






콜백 함수를 사용하면 단순한 치환이 아닌 복잡한 치환까지도 자유롭게 프로그래밍 할 수 있다.


아래 코드는 텍스트 중에서 숫자를 찾아서 세금에 해당하는 값에 8%를 더한 값으로 치환하는 프록램이다.




<html>

<head>

<title>:: String.replace() 메서드 ::</title>

<script type="text/javascript">

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


// 대상 문자열

var str = "price : 100 won";

// 금액에 해당하는 문자열을 찾아서, 세금 8%를 더하여 치환

var txt = str.replace(/\d+/, function(v) {

v = parseInt(v);

return Math.ceil(1.08 * v);

});

document.getElementById("price").innerHTML = txt;

});

</script>

</head>

<body>

<h1 id="price"></h1>

</body>

</html>  




프로그램을 실행하면 "price : 108 won"으로 표시된다.











Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기

Posted at 2019. 2. 24. 15:16 | Posted in JavaScript & jQuery/JavaScript




참고 : https://cloudless.tistory.com/53




■ 문자열을 배열로 바꾸는 예제





# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT EXPLODE ::</title>

<style type="text/css">

.raceQueen {

text-align : center;

margin-bottom : 5px;

}

</style>

<script type="text/javascript">

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

// 콤마( , )로 구분되는 문자열을 나열한다.

var modelText = "최슬기, 한가은, 송주아, 유다연, 한지은, 김하율, 박소유, 서진아, 최별하, 서한빛";

// 콤마( , )로 구분되는 문자열을 배열로 만든다.

var arrModelmodelTextsplit(",");

for(var num in arrModel) {

// trim( ) 함수를 사용하여 공백을 제거한다.

var raceQueenarrModel[num].trim();

document.getElementsByClassName("raceQueen")[num].value = raceQueen;

}

});

</script>

</head>

<body>

    <h3>Race Queen ~~!!</h3>

    <input type="text" class="raceQueen" value=""/><br/>

    <input type="text" class="raceQueen" value=""/><br/>

    <input type="text" class="raceQueen" value=""/><br/>

    <input type="text" class="raceQueen" value=""/><br/>

    <input type="text" class="raceQueen" value=""/><br/>

    <input type="text" class="raceQueen" value=""/><br/>

    <input type="text" class="raceQueen" value=""/><br/>

    <input type="text" class="raceQueen" value=""/><br/>

    <input type="text" class="raceQueen" value=""/><br/>

    <input type="text" class="raceQueen" value=""/>

</body>

</html> 




# 출력 결과






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 배열의 값을 콤마(,)로 분리하기[JavaScript] 배열의 값을 콤마(,)로 분리하기

Posted at 2019. 2. 24. 15:15 | Posted in JavaScript & jQuery/JavaScript




참고 : https://cloudless.tistory.com/53




■ 배열을 문자열로 합쳐서 출력하는 예제




# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT IMPLODE ::</title>

<script type="text/javascript">

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

 

  // 1차원 배열을 선언한다.

var arrModel = new Array("XPS", "MacBook", "Spectre", "ThinkPad", "PenS", "Gram");

// 생성한 1차원 배열을 콤마( , )로 구분하는 문자열로 합친다.

var combineTextarrModel.join(", ");

document.getElementById("noteBook").value = combineText;

  });

</script>

</head>

<body>

    <h3>제조사별 대표적인 노트북 모델들은?</h3>

    <input type="text" id="noteBook" value="" style="text-align:center;width:300px;"/>

</body>

</html>




# 출력 결과






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기

Posted at 2019. 1. 31. 18:16 | Posted in JavaScript & jQuery/jQuery




참고 : http://2nusa.blogspot.com/2016/10/jquery-mouse-wheel.html





■ 한화면 단위로 끊어서 마우스 휠 이동시키기





해당코드는 jQuery 한화면 단위 Mouse Wheel 이동 포스팅을 가져와서 만든 내용이다.


위포스팅의 코드를 그대로 사용할 수 없는 상황이 되었기에 필요 부분을 수정하여 포스팅한다.

(파이어 폭스 브라우저에서 에러 발생 및 콘솔창 발생 에러 예외처리)




# 소스코드

<html>

<head>

<title>MouseWheel</title>

<style type="text/css">

    html,body{ margin:0;padding:0;width:100%;height:100%;}

    .box{ width:100%;height:100%;position:relative;color:#FFFFFF;font-size:24pt;}

</style>

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

<script type="text/javascript">

    jQuery(document).on("ready", function() {
        jQuery(".box").each(function () {
            
            // 개별적으로 Wheel 이벤트 적용
            jQuery(this).on("mousewheel DOMMouseScroll", function(event) {

                var delta = 0;
                var moveTop = null;
                var boxMax = jQuery(".box").length - 1;

                var winEvent = "";

                  
                if(!winEvent) {
                    winEvent = window.event;
                }

                if(winEvent.wheelDelta) {

                    delta = winEvent.wheelDelta / 120;
                    if(window.opera) {
                        delta = -delta;
                    }
                }

               
                else if(winEvent.detail) {
                    delta = -winEvent.detail / 3;
                }
                
                // 마우스휠을 위에서 아래로 이동
                if(delta < 0) {

                    // 마지막 BOX 보다 순서값이 작은 경우에 실행
                    if(jQuery(this).index() < boxMax) {
                        
                        console.log("▼");
                        if(jQuery(this).next() != undefined) {
                            moveTop = jQuery(this).next().offset().top;
                        }
                    }

                    // 마지막 BOX보다 더 아래로 내려가려고 하는경우 알림창 출력
                    else {
                        alert("마지막 페이지 입니다.");
                        return false;
                    }
                }

                // 마우스휠을 아래에서 위로 이동
                else {

                    // 첫번째 BOX 보다 순서값이 큰 경우에 실행
                    if(jQuery(this).index() > 0) {

                        console.log("▲");
                        if(jQuery(this).prev() != undefined) {
                            moveTop = jQuery(this).prev().offset().top;
                        }
                    }

                    // 첫번째 BOX 더 위로 올라가려고 하는 경우 알림창 출력
                    else {
                        alert("첫번째 페이지 입니다.");
                        return false;
                    }
                }

                // 화면 이동 0.8초(800)
                jQuery("html,body").stop().animate({
                    scrollTop : moveTop + "px"
                }
                , {
                    duration: 800, complete : function () { }
                });
            });
        });
    });
</script>
</head>
<body>
    <div class="box" style="background-color:#FF0000;">1</div>
    <div class="box" style="background-color:#FF4500;">2</div>
    <div class="box" style="background-color:#FFFF00;">3</div>
    <div class="box" style="background-color:#008000;">4</div>
    <div class="box" style="background-color:#0000FF;">5</div>
    <div class="box" style="background-color:#4B0082;">6</div>
    <div class="box" style="background-color:#EE82EE;">7</div>
</body>
</html>




# 출력결과



마우스 휠로 스크롤을 하며 상, 하 스크롤을 진행하다보면.


위 이미지와 같이 자동으로 다음 화면으로 이어지는 것을 확인할 수 있다.










  1. 퍼블리셔
    이소스 그대로 붙여서 html 만든뒤에 돌려봤는데 첫번째 페이지에서 하단으로 마우스 휠시 계속 첫번째 페이지입니다라고 알럿뜨면서 안내려가지네요
    • 2019.07.19 13:23 신고 [Edit/Del]
      다시 테스트 해보니
      해당코드는 파이어 폭스에서만 정상 작동 하더군요.
      크롬이나 익스에서 테스트 하신것 같은데.
      확인후 다시 코드 올리겠습니다.

      전혀 파악하지 못한 사항인데
      알려주셔서 감사합니다.
    • 2019.07.19 18:40 신고 [Edit/Del]
      안녕하세요~
      크롬과 익스에서도 문제없이 돌아가도록
      코드를 조금변경해 두었습니다.
      감사합니다.

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기