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

'JavaScript & jQuery'에 해당되는 글 69건

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

</script>

</head>

<body>

<thead>

<tr>

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

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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의 내용을 확인 할 수 있다.

저작자표시

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

[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영 (0)	2020.03.02
[jQuery] JCROP을 이용한 이미지 자르기 - Sample (5)	2020.02.11
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31
[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크 (0)	2018.11.17

[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

[jQuery] 팝업 창 외에 다른 항목 클릭 막기[jQuery] 팝업 창 외에 다른 항목 클릭 막기

Posted at 2019. 6. 4. 19:30 | Posted in JavaScript & jQuery/jQuery

참고 : 당신은 모를 수도 있는 CSS의 7가지 단위

이전글 : [jQuery] 움직이는 팝업 레이어 만들기

■ 팝업 창 외에 다른 항목 선택 불가 필름 만들기

# 소스 코드

<html>

<head>

<title>:: 제이쿼리 UI Draggable ::</title>

#popWindow {

position:absolute;

display:none;

background-color:#000000;

left:10%;

top:10%;

}

#closeBtn {

position:absolute;

width:24px;

z-index:1;

margin-left:-16px;

margin-top:-8px;

}

#popBottom {

height:28px;

text-align:left;

font-weight:bold;

color:#FFFFFF;

padding-left:10px;

padding-right:10px;

}

/* vw(넓이)와 vh(높이)를 100으로 주면 자동으로 브라우저 전체 넓이, 높이를 지정할 수 있다. */

#protectionFilm {

display:none;

position:absolute;

background-color:rgba(0, 0, 0, 0.2);

top:0px;

left:0px;

width:100vw;

height:100vh;

}

</style>

function popWindowOpen() {

// css의 vmax 속성으로 세로 길이를 전부 채울 수 있지만.

// 실제 개발중에는 레이어의 여백 설정 문제로 어느정도 칸이 남는경우가 존재한다.

// 만약 작업중 레이어 전체가 체워지지 않는경우

// document.body.offsetWidth와 document.body.offsetHeight 를 사용하여

// 전체크기의 값을 구하자

// jQuery("#protectionFilm").css("width", document.body.offsetWidth);

// jQuery("#protectionFilm").css("height", document.body.offsetHeight);

jQuery("#protectionFilm").css("display", "block");

jQuery("#popWindow").css("display", "block");

// draggable 기능에 containment 조건으로 팝업창이 움직일 수 있는 영역에 제한을 건다.

jQuery("#popWindow").draggable({ containment : jQuery("#protectionFilm") });

}

function popWindowClose() {

jQuery("#protectionFilm").css("display", "none");

jQuery("#popWindow").css("display", "none");

}

</script>

</head>

<body>

</a>

</div>

</a>

<label>

오늘 하루 이 창을 열지 않습니다.

</label>

</div>

</body>

</html>

# 출력 결과

저작자표시

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

[jQuery] JCROP을 이용한 이미지 자르기 - Sample (5)	2020.02.11
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0)	2019.06.18
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31
[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크 (0)	2018.11.17
[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션 (0)	2018.11.02

[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

Prev Next

1 ··· 4 5 6 7 8 9 10 ··· 18

'JavaScript & jQuery'에 해당되는 글 69건

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

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

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

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

[jQuery] 팝업 창 외에 다른 항목 클릭 막기[jQuery] 팝업 창 외에 다른 항목 클릭 막기

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

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

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

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바