'JavaScript &amp; jQuery/JavaScript' 카테고리의 글 목록 (6 Page)

'JavaScript & jQuery/JavaScript'에 해당되는 글 45건

[JavaScript] AJAX 통신 정리[JavaScript] AJAX 통신 정리

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

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

참고② : Ajax 시작하기

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

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

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

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

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

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

■ AJAX에 대하여

사용자 경험을 위해서 기존의 페이지 방식의 디자인에서 몇 가지 기능을 추가해야 한다.

그것은 사용자의 행동에 따라 변화된 내용으로 응답이 이루어져야 하고,

화면이 지워지고 페이지가 다시 로드되는 등의 방해 없이 업데이트가 이루어져야 한다.

이를 위해서, Ajax는 웹 페이지와 서버 간에 별도의 처리 단계를 둔다.

이 층(Layer)을 Ajax 엔진이나, Ajax 프레임워크라고 하는데,

사용자의 요청을 가로채서, 서버와의 통신을 뒤에서 비동기적(Asynchronously)으로 조용하고 묵묵히 처리한다.

이는 서버 요청과 응답이 더 이상 사용자의 특정한 요청에 의해서 동시에 일어나는 것이 아니라,

사용자나 어플리케이션에 알맞은 시간에 어느 때나 일어날 수 있다는 말이다.

브라우저는 마지막 요청에 대한 응답을 무작정 멈춰서 기다리지 않고,

사용자가 스크롤하거나, 마우스로 클릭하거나 글을 입력하는 등의 일을 하도록 한다.

새로 변경된 정보를 받아서 페이지의 일부를 수정하는 일도 AJAX를 거쳐 이루어진다.

물론 이 일을 하는 중에도 페이지는 여전히 사용 가능하다.

■ AJAX의 동작 원리

새로운 AJAX 어플리케이션을 개발한다거나 기존 웹 어플리케이션에 AJAX를 추가한다고 가정해보면

먼저 어떤 페이지 이벤트와 사용자 입력을 비동기 HTTP 요청을 통해 처리할 것인지를 결정할 필요가 있다.

예를 들어, 어떤 그림의 onMouseOver 이벤트가 발생했을 때,

서버로 그 그림에 대한 자세한 정보를 요청할 수도 있다.

예를 들어, 어떤 그림의 onMouseOver 이벤트가 발생했을 경우,

서버로 그 그림에 대한 자세한 정보를 요청할 수도 있다.

또는 버튼의 onClick 이벤트가 발생했을 때, 폼의 어떤 필드를 확장할 것인지에 대한 정보를 서버에 요청할 수도 있다.

앞으로 작성할 AJAX 어플리케이션에서는 이러한 이벤트 핸들러들이 비동기 HTTP 요청을 생성하고

XMLHTTPRequest를 통해서 보내는 일을 하도록 해야 한다.

요청(Request)을 보냈다면, 그 요청의 진행 상태를 감시하기 위한 루틴을 작성해야 하고,

서버로부터 요청이 성공적으로 처리되었다는 것을 확인해야 한다.

마지막으로 서버로부터 처리된 응답을 받으면, 그 응답을 받아서 정보를 처리하는 루틴을 작성하고,

어플리케이션에 반영하는 일을 해야 한다.

예를 들면, 새로받은 데이터를 웹 페이지의 본문 내용을 업데이트하는 데 사용하거나,

팝업창을 나타내거나, 폼의 필드를 추가하는 등의 일이 그것이다.

■ XMLHTTPRequest 객체

하이퍼링크를 클릭하거나 폼의 전송 버튼을 누를 때, 브라우저는 서버에게 HTTP 요청(Request)을 보낸다.

그러면 서버는 새로운 페이지나 수정된 페이지를 사용자에게 다시 보낸다.

그러나 비동기적으로 동작하는 웹 어플리케이션에서는 서버에게 화면을 새롭게 갱신하지 않는 성질의 요청을 보낼 필요가 있다.

이를 위해서 XMLHTTPRequest 객체를 이용해야 한다.

이 자바스크립트 객체는 서버에 연결하고 HTTP 요청을 새로운 페이지 로드 없이 보낼 수 있게 한다.

Tip.

보안을 위해 XMLHTTPRequest 객체는 일반적으로 페이지와 같은 도메인에 있는 URL로만 명령을 내릴 수 있고,

외부 서버로의 직접 호출은 할 수 없다.

XMLHTTPRequest 객체는 실질적으로 현재 사용되는 모든 웹 브라우저에서 지원된다.

인터넷 익스플로러 5.0이상 버전과 모질라 파이어폭스, 구글 크롬, 오페라, 사파리등이 모두 지원한다.

또안 MS 윈도우즈는 물론이고, UNIX / Linux, Mac OS X 등의 플랫폼에서 위에서 나열한 브라우저들을 이용해서 사용할 수 있다.

XMLHTTPRequest 객체의 목적은 자바스크립트가 HTTP 요청을 생성하고 서버로 전송하는 것이다.

전통적인 웹 어플리케이션은 이러한 요청을 동기적으로 수행했다.

이는 사용자가 클릭하거나 폼을 전송하면, 그에 따라서 새로운 페이지가 브라우저로 전송되는 방식이다.

XMLHTTPRequest 객체를 이용하면 이러한 서버 호출을 배후에서 비동기적으로 수행할 수 있다.

이는 웹 페이지 전체가 새롭게 로드되는 등의 방해없이 계속 사용할 수 있을을 의미한다.

이러한 기능은 모든 Ajax 어플리케이션에서 기초가 되는 개념이고,

XMLHTTPRequest가 Ajax 프로그래밍의 핵심인 이유이다.

#01. XMLHTTPRequest 객체의 속성

속성(Properties)	내 용
onreadystatechange	· 객체의 readyState 속성이 변경될 때 어떤 이벤트 처릴르 호출할지를 결정한다.
readyState	· 요청(Request)에 대한 상태를 나타내는 정수값 0 = 초기화되지 않음 1 = 로드 중( Loading ) 2 = 로드 됨( Loaded ) 3 = 상호작용( Interactive ) 4 = 완료됨( Completed )
responseText	· 서버로부터 리턴된 데이터(문자형식)
responseXML	· 서버로부터 리턴된 문서 객체 형식의 XML 데이터
status	· 서버가 리턴한 HTTP 상태 코드
statusText	· 서버가 리턴한 HTTP 상태 설명

#02. XMLHTTPRequest 메소드

메소드(Methods)	설 명
abort( )	· 현재 요청을 취소함
getAllResponseHeaders( )	· 모든 헤더 정보를 문자열로 얻어냄
getResponseHeader( × )	· 헤더 ×의 내용을 문자열로 얻어냄
open( "method", "URL", "A" )	· HTTP 명령(GET, POST 등)과 그 대상 URL을 통해서 HTTP 요청을 비동기적으로 처리할지를 나타냄 ( A에 true(기본값)를 넣으면 비동기적으로 동작하고, false는 동기적으로 동작한다. )
send( CONTENT )	· 요청을 보냄 POST의 내장 데이터도 필요할 경우 보낼 수 있음
setRequestHeader( "x", "y" )	· 요청을 보낼 때 추가적인 파라미터를 지정하기 위한 메소드. · x=y 쌍으로 된 파라미터를 헤더에 추가하는 기능을 한다.

① open( ) 메소드

open( ) 메소드를 이용해서 XMLHTTPRequest 객체가 서버와 통신하기 위한 준비과정을 진행한다.

최소한 2개의 인자는 필수적으로 넘겨야 한다.

-. 첫째. 어떤 HTTP 명령을 사용할 것인지 여부인데, GET 또는 POST를 많이 사용할 것이다.

-. 둘째. 요청을 보낼 대상 URL이다.

GET 쵸엉을 보낸다면, URL에 파라미터에 대한 내용이 인ㅌ코딩되어 URL에 포함된 상태여야 한다.

보안상의 이유로 XMLHTTPRequest 객체는 같은 도메인 내에서만 통신할 수 있다.

외부의 도메인에 접근하고자 할 때는 권한이 없다는 에러 메시지인 "permission denied"를 받게 된다.

-. 셋째. open( ) 요청에 세번째 인자는 Bool-ean 값으로, 보내는 요청이 비동기적으로 이루어질 것인지를 나타낸다.

false로 설정하면, 서버로 보내는 요청은 동기적으로 처리도리 것이기 때문에 응아답이 올 때까지 화면은 응답하지 않는 잠김 상태가 된다.

기본값인 true를 넣거나 인자를 생략하면, 요청은 비동기적으로 처리된다.

② send( ) 메소드

open( ) 메소드를 이용해서 XMLHTTPRequest를 준비한 후에, 실제 요청을 보내기 위해서 send( ) 메소드를 사용한다.

send( ) 함수는 한 개의 인자를 받는다.

보낼 요청이 GET 형식이라면, 요청 정보가 URL 안에 인코딩된 값이 포함되므로, 인자는 null 인자를 넣어서 호출하면 된다.

GET방식

objectname.send( null );

그러나 POST 형식의 경우는 요청 내용을 인코딩한 후 이 메소드의 인자로 넘겨야 한다.

POST방식

objectname.setRequestHeader("Content-Type", "application/x-www-from-urlencoded");

objectname.send(var1=value1&var2=value2);

이 경우는 setRequestHeader 메소드를 호출해서 요청 내용이 어떤 종류의 데이터를 가지고 있는지를

HTTP 요청 헤더에 기록하게 된다.

■ 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>

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

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>

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 객체가 서버와 통신하기 위한 준비과정을 진행한다.

// true : 비동기, false : 동기

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

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

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

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

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

http.onreadystatechange = useHttpResponse;

// .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 상태를 설명한다.

// statusText 의 기본값은 'OK' 이다.

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

}

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

else {

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

}

</script>

</head>

<h1>Ajax Domonstration</h1>

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

<form>

</form>

</body>

</html>

# 출력결과

■ AJAX를 이용한 JSON 데이터 전송 및 출력

위와같이 자바스크립트를 통한 Ajax 통신방법을 알아 보았다.

그렇지만 현업에서는 jQuery의 Ajax를 실제로 더 많이 사용하게 되고.

필자또한 jQuery의 Ajax기능을 안쓰고 비동기 이벤트를 구현한다는것은 거의 상상하기도 힘들었다.

jQuery를 안쓰는 추세라곤 하지만, 필자의 생각은 역시 완전히 jQuery가 사라지기에는

적어도 필자의 개발을 하는 가운데서는 아마도 이루어지 지지 않을것이라고 생각한다.

그런데도 위와같이 자바스크립트를 통한 Ajax 통신 방법을 따로 정리하는 이유는

jQuery가 앞도하던 시장에서 Vue.js React.js Angular.js 등이 각광받고 있지만.

결국 JavaScript로 구현 가능하다면,

기초와 기본에 충실하게 사용할 수 있어 프론트개발자의 길에 흠들림의 여파를 줄이고 싶었기 때문이기도 하다.

# 소스코드 - JSON 데이터 전송 받고 JSON 형태로 내보내기

tell_time_json.php

<?php

$RetVal = array("ret"=>"fail", "error"=>"", "error_msg"=>"", "message"=>"");

$backUrl = $_SERVER['HTTP_REFERER'];

// php://input은 내용의 유형에 관계없이 요청 HTTP 헤더 뒤에 모든 원시 데이터를 반환한다.

$data = json_decode(file_get_contents("php://input"), true);

switch($data['mode']) {

case "timeIs" :

$timestamp = mktime(

$data['hour'] // 시간

, $data['minute'] // 분

, $data['second'] // 초

, $data['month'] // 월

, $data['day'] // 일

, $data['year'] // 년도

);

$RetVal['data']['date'] = date('Y-m-d H:i:s', $timestamp);

$RetVal['ret'] = "success";

print json_encode($RetVal);

return;

break;

default :

$RetVal['message'] = "데이터 조회 실패";

print json_encode($RetVal);

return;

break;

}

header("location:".$backUrl);

# 소스코드 - AJAX 호출(JSON 데이터 전송 및 파싱)

ajax_application_post.html

<html>

<head>

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

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>

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

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

getServerTime('timeIs');

});

function getXMLHTTPRequest() {

let request = false;

try { request = new XMLHttpRequest(); }

catch(err01) {

try { request = new ActiveXObject("Msxml2.XMLHTTP"); }

catch(err02) {

try { request = new ActiveXObject("Microsoft.XMLHTTP"); }

catch(err03) { request = false; }

}

return request;

}

const ajax = getXMLHTTPRequest();

function getServerTime(mode) {

// 서버로 전송할 데이터 생성

const toTime = new Date();

const arrData = {

"mode" : mode // 실행조건

, "year" : toTime.getFullYear().toString() // 년

, "minute" : (toTime.getMonth() + 1).toString() // 월

, "day" : toTime.getDate().toString() // 일

, "hour" : toTime.getHours().toString() // 시

, "minute" : toTime.getMinutes().toString() // 분

, "second" : toTime.getSeconds().toString() // 초

};

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

ajax.open("POST", "/tell_time_json.php", true);

// send() 함수를이용해 POST 형식의 데이터를 넘기는 경우는

// setRequestHeader() 함수를 이용해 인코딩한 후 이 메소드의 인자로 넘겨야 한다.

ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8;");

// json 타입으로 변경하여 데이터를 전송한다.

ajax.send( JSON.stringify(arrData) );

ajax.onreadystatechange = function() {

if(ajax.readyState == 4) {

if(ajax.status == 200) {

// responseText 속성은 서버가 리턴한 정보를 텍스트 형식으로 가져온다.

const json = JSON.parse(ajax.responseText);

if(json.ret == "success") {

document.getElementById("showTime").innerHTML = json.data.date;

} else {

console.log(json.message);

}

else {

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

}

} else {

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

}

};

}

</script>

</head>

<h1>Ajax Domonstration</h1>

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

<form>

</form>

</body>

</html>

# 출력결과

위의 GET 전송방식의 예제와 같은 결과 화면이 나오는 것을 확인 할 수 있다.

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 실시간 타이머(시계) 만들기 (2)	2019.12.05
[JavaScript] 전광판 효과 구현하기 (0)	2019.12.05
[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기 (43)	2019.06.13
[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능 (0)	2019.05.23
[JavaScript] 정규 표현식을 사용한 데이터 변환 (0)	2019.04.16

[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기

Posted at 2019. 6. 13. 14:28 | Posted in JavaScript & jQuery/JavaScript

※ jsQR의 실제 웹 서비스 사용은 HTTPS접근이 가능한 브라우저를 통해 카메라를 조작할 수 있는 환경에서만 사용이 가능합니다.

해당 포스팅은 로컬 서버에서 테스트하여 진행 하였으며, 실서버는 보안인증된 HTTPS 접근 가능한 환경에서만 사용이 가능합니다.

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

■ 웹브라우저용 QR CODE 스캐너 제작 - jsQR 사용

인터넷에 많이 돌아다니는 자료들로 손쉽게 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>

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

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>

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

</div>

</div>

<div>

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

</div>

</div>

</main>

</body>

</html>

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

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

var canvasElement = document.getElementById("canvas");

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

var loadingMessage = document.getElementById("loadingMessage");

var outputContainer = document.getElementById("output");

var outputMessage = document.getElementById("outputMessage");

var outputData = document.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.height = video.videoHeight;

canvasElement.width = video.videoWidth;

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

var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);

var code = jsQR(imageData.data, imageData.width, imageData.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.innerHTML = code.data;

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

// return;

}

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

else {

outputMessage.hidden = false;

outputData.parentElement.hidden = true;

}

requestAnimationFrame(tick);

}

});

</script>

#03. QR코드 인식 테스트

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

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

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

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

사용이 가능해 질 것이다.

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

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

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

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

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

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

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 전광판 효과 구현하기 (0)	2019.12.05
[JavaScript] AJAX 통신 정리 (0)	2019.11.17
[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능 (0)	2019.05.23
[JavaScript] 정규 표현식을 사용한 데이터 변환 (0)	2019.04.16
[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기 (0)	2019.02.24

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

Posted at 2019. 5. 23. 19:44 | Posted in JavaScript & jQuery/JavaScript

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

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

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

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

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

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

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

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

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

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

<html>

<head>

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

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>

</select>

</body>

</html>

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

<html>

<head>

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

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>

</select>

</body>

</html>

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

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

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

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

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

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

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

# 소스 코드

<html>

<head>

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

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 <= timeCnt; num++) {

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 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(); // 현재 초

const choHour = optTime.substring(0, 2); // 옵션의 시간

const choMinute = optTime.substring(2, 4); // 옵션의 분

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

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

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

let presence = "";

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

lastOptionTime(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()) {

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(toYear, toMonth, toDate, toSecond, callBack) {

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

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

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

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

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

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

callBack(lastDay);

}

</script>

</head>

<body>

</select>

</body>

</html>

# 출력 결과

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] AJAX 통신 정리 (0)	2019.11.17
[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기 (43)	2019.06.13
[JavaScript] 정규 표현식을 사용한 데이터 변환 (0)	2019.04.16
[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기 (0)	2019.02.24
[JavaScript] 배열의 값을 콤마(,)로 분리하기 (0)	2019.02.24

[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>

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>

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>

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>

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( 정규 표현식, 치환될 문자열 )

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

<html>

<head>

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

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>

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>

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

// 대상 문자열

var str = "piano GUITAR";

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

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

return v.toUpperCase();

});

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

});

</script>

</head>

<body>

</body>

</html>

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

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

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

<html>

<head>

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

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>

</body>

</html>

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

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기 (43)	2019.06.13
[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능 (0)	2019.05.23
[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기 (0)	2019.02.24
[JavaScript] 배열의 값을 콤마(,)로 분리하기 (0)	2019.02.24
[JavaScript] GMT, 그리니치 표준시 구하기 (2)	2019.01.25

Prev Next

1 ··· 3 4 5 6 7 8 9 ··· 12

'JavaScript & jQuery/JavaScript'에 해당되는 글 45건

[JavaScript] AJAX 통신 정리[JavaScript] AJAX 통신 정리

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

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

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

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

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바