레이블이 JavaScript인 게시물을 표시합니다. 모든 게시물 표시
레이블이 JavaScript인 게시물을 표시합니다. 모든 게시물 표시

2016/05/20

[Bootstrap] 버튼 로딩 효과 / button loading


<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading');
    // business logic...
    $btn.button('reset');
  })
</script>






참고 :
http://getbootstrap.com/javascript/#buttons

2015/09/03

[Javascript] string byte length









 // 최대 바이트 제한
function fnMaxByte(e, max) {
    var $target = $(e.target);  
    var byteCount = getByteLength($target.val());  
    if (byteCount > max) {
        var rtnStr = $target.val();      
        var rtnByte = getByteLength(rtnStr);
        var leng = rtnStr.length;
        while (rtnByte > max) {
            rtnStr = rtnStr.substr(0, leng--);
            rtnByte = getByteLength(rtnStr);
        }
        $target.val(rtnStr);
    } else {
        $($target.closest('div.row')).find('.limitTextNum span').text(byteCount);    }
}


// 바이트 카운트
function getByteLength(s,b,i,c){
    for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);
    return b;
}








2015/07/06

[Javascript] milliseconds to time string




function fnMsToTime(duration) {
    var milliseconds = parseInt((duration%1000)/100)
        , seconds = parseInt((duration/1000)%60)
        , minutes = parseInt((duration/(1000*60))%60)
        , hours = parseInt((duration/(1000*60*60))%24)
        , days = parseInt(duration/(1000*60*60*24));
    hours = (hours < 10) ? "0" + hours : hours;    minutes = (minutes < 10) ? "0" + minutes : minutes;    seconds = (seconds < 10) ? "0" + seconds : seconds;
    return days + "일 " + hours + "시간 " + minutes + "분 " + seconds + "초 " + milliseconds + ' 남음';}






2014/11/26

[JavaScript] 팝업창 열기, 닫기 (popup window open and close)

  
function fnPopup() {
    var popupOption = 'directories=no, toolbar=no, location=no, menubar=no, status=no, scrollbars=no, resizable=no, left=400, top=200, width=440, height=550';
    window.open(URL, name, popupOption);
}


function fnClose() {
    window.opener.location.href = URL;
    window.close();
}



참고 :
http://www.w3schools.com/jsref/met_win_open.asp

2014/11/19

[RegExp] Non-breaking space (char code 160) replace

- Non-breaking space
- ASCII character 160
- char code 160
- &#160
- \u00A0
- %A0
- &nbsp; 

볼때는 일반적인 공백으로 보이지만 따로 처리해줘야 할 경우가 생겼다.
 

RegExp = /\u00A0/  or  /&#160;/

value = value.replace(/\u00A0/g, ' ');
or
value = value.replace(/&#160;/g, ' ');
 
 
출처 :
http://stackoverflow.com/questions/3794919/replace-all-spaces-in-a-string-with
http://www.adamkoch.com/2009/07/25/white-space-and-character-160/

2014/11/17

[RegExp] 8자리 이상 16자리 이하 영문, 숫자, 특수문자 조합

암호규칙 정규식

var pwReg = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,16}$/;

if (pwReg.test(pw)) {
    return true;
} else {
    return false;

}


2014/11/05

[JavaScript] 영문, 숫자, 특수문자, 자릿수 제한 (정규식 이용)

var check = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,16}$/;

if (!check.test(pw)) {   
    // fail
} else {
    // success

}

2014/11/03

[JavaScript] 로그인 아이디 저장(세션)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>로그인</title>
<link rel="stylesheet" type="text/css" href="/conf/style.css">
<S-ript Language="JavaS-ript">// 로그인 입력 확인
function checkLogin(){
var frm = document.loginForm;
 if(frm.id.value == "") {
  alert("아이디를 입력하세요.");
  frm.id.focus();
  return false;
 }
 if(frm.pass.value == "") {
  alert("비밀번호를 입력하세요.");
  frm.pass.focus();
  return false;
 }
 // 로그인 정보 저장 체크 확인하여 진행
 if(frm.saveid.checked) saveLogin(frm.id.value);
 else  saveLogin("");
 frm.action = "/member.do?method=login";
 frm.submit();
}
// 로그인 정보 저장
function confirmSave(checkbox){
  var isRemember;
  // 로그인 정보 저장한다고 선택할 경우
  if(checkbox.checked)  {
    isRemember = confirm("이 PC에 로그인 정보를 저장하시겠습니까? \n\nPC방등의 공공장소에서는 개인정보가 유출될 수 있으니 주의해주십시오.");
    if(!isRemember)
      checkbox.checked = false;
  }
}
// 쿠키값 가져오기
function getCookie(key){
  var cook = document.cookie + ";";
  var idx =  cook.indexOf(key, 0);
  var val = "";
  if(idx != -1)  {
    cook = cook.substring(idx, cook.length);
    begin = cook.indexOf("=", 0) + 1;
    end = cook.indexOf(";", begin);
    val = unescape( cook.substring(begin, end) );
  }
  return val;
}
// 쿠키값 설정
function setCookie(name, value, expiredays){
  var today = new Date();
  today.setDate( today.getDate() + expiredays );
  document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";";
}
// 쿠키에서 로그인 정보 가져오기
function getLogin(){
 var frm = document.loginForm;
 // userid 쿠키에서 id 값을 가져온다.
 var id = getCookie("userid");
 // 가져온 쿠키값이 있으면
 if(id != "") {
  frm.id.value = id;
  frm.saveid.checked = true;
 }
}
// 쿠키에 로그인 정보 저장
function saveLogin(id){
 if(id != "") {
  // userid 쿠키에 id 값을 7일간 저장
  setCookie("userid", id, 7);
 }else{
  // userid 쿠키 삭제
  setCookie("userid", id, -1);
 }
}
</Script>
<body onLoad="getLogin()">
<img src="/item/images/11300514_user_153922.jpg" alt="" width="900px" height="120px"
      onclick="location.href='/main.do'" style="cursor:hand; margin-bottom:10px; display:block;"/>
<div class="left">
<jsp:include page="/conf/left_column.jsp"></jsp:include>
</div>
<div class="main">
<form name="loginForm" method="post" action="">
아이디 : <input name="id">
 <input name="saveid" id="saveid"        type="checkbox" onClick="confirmSave(this)">
 <label for="saveid">저장</label>
<br> 비밀번호 : <input name="pass" type="password"> <br> <br>
<input type=submit value="로그인" onclick="checkLogin();">
</form>
<c:if test="${ result ne null }">
<c:if test="${result==0}">비밀번호가 틀립니다.</c:if>
<c:if test="${result==-1}">아이디가 없습니다.</c:if>
</c:if>
</div>
</body>
</html>
 
 
출처 :
http://seonju.egloos.com/viewer/85761

2014/07/17

[JavaScript] KakaoTalk App share url (카톡 url 공유)



<!doctype HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>KakaoLink Demo(Web Button) - Kakao Javascript SDK</title> <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script> </head> <body> <h3>카카오톡 링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.</h3> <a id="kakao-link-btn" href="javascript:;"> <img src="http://dn.api1.kage.kakao.co.kr/14/dn/btqa9B90G1b/GESkkYjKCwJdYOkLvIBKZ0/o.jpg" /> </a> <script> // 사용할 앱의 Javascript 키를 설정해 주세요. Kakao.init('YOUR APP KEY'); // 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다. Kakao.Link.createTalkLinkButton({ container: '#kakao-link-btn', label: '카카오링크 샘플에 오신 것을 환영합니다.', image: { src: 'http://dn.api1.kage.kakao.co.kr/14/dn/btqaWmFftyx/tBbQPH764Maw2R6IBhXd6K/o.jpg', width: '300', height: '200' }, webButton: { text: '카카오 디벨로퍼스', url: 'https://dev.kakao.com/docs/js' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다. } }); </script> </body> </html>



출처 :
https://developers.kakao.com/docs/js

[JavaScript] Facebook, Twitter share url


*Twitter
- http://twitter.com/share


*Facebook
- http://facebook.com/sharer.php

*Facebook with parameter
- var facebook_url = 'http://www.facebook.com/sharer.php?'+
  'u='+encodeURIComponent('http://google.com/?q=bla')+
  '&amp;t='+encodeURIComponent('Some Page Title');



출처 :
http://stackoverflow.com/questions/7584197/sharer-link-with-parameter-in-url

[JavaScript] LINE App share url (LINE url 공유)

*Format 1
- http://line.me/R/msg/<CONTENT TYPE>/?<CONTENT KEY>

*Format 2
- line://msg/<CONTENT TYPE>/<CONTENT KEY>



출처 :
http://media.line.me/en/

2014/07/10

[JavaScript] Detect Mobile Browsers



if(navigator.userAgent.match(/(android)|(iphone)|(ipod)|(ipad)/i)) {

}

window.mobilecheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check; }



출처 :
http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser
http://detectmobilebrowsers.com/

2014/07/09

[JavaScript] in_array vs. $.inArray vs. indexOf()







http://jsperf.com/in-array-vs-inarray-vs-indexof/5

[jQuery plugin] TouchSwipe (jquery.touchSwipe.js)

클릭으로도 동작해서 테스트시에도 용이함

$(function() {      
      //Enable swiping...
      $("#test").swipe( {
        //Generic swipe handler for all directions
        swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
          $(this).text("You swiped " + direction );  
        },
        //Default is 75px, set to 0 for demo so any distance triggers swipe
         threshold:0
      });
    });



http://labs.rampinteractive.co.uk/touchSwipe/demos/

2014/07/08

[jQuery] .find() vs .children()

The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.



http://api.jquery.com/find/

[jQuery] jQuery mobile - swipe event

jQuery( .selector ).on( "swipe", function( event ) { ... } )
jQuery( .selector ).on( "swipeleft", function( event ) { ... } )
jQuery( .selector ).on( "swiperight", function( event ) { ... } )



http://api.jquerymobile.com/swipe/

2014/06/30

Java와 JavaScript의 삼항연산자 다른점 (Ternary Operator in Java, JavaScript)

*JavaScript
var a = 3;
var b = 2;
var max;

max = a > b ?  a : b; - 가능
a > b ? max = a : max = b; - 가능



*Java
int a = 1;
int b = 2;
int max;

max = a > b ?  a : b;         - 가능
a > b ? max = a : max = b;    - 문법 오류 (x)



Checking Types in JavaScript

* typeof operator

TypeResult
Undefined"undefined"
Null"object"
Boolean"boolean"
Number"number"
String"string"
Host object (provided by the JS environment)Implementation-dependent
Function object (implements [[Call]] in ECMA-262 terms)"function"
Any other object"object"
typeof 3 // "number"
typeof "abc" // "string"
typeof {} // "object"
typeof true // "boolean"
typeof undefined // "undefined"
typeof function(){} // "function"
typeof [] // "object"
typeof null // "object"

=================================================

* instanceof operator

function Animal(){}
var a = new Animal()
a instanceof Animal // true
a.constructor === Animal // true

function Cat(){}
Cat.prototype = new Animal
Cat.prototype.constructor = Cat
var felix = new Cat
felix instanceof Cat // true
felix instanceof Animal // true
felix.constructor === Cat // true
felix.constructor === Animal // false

felix = null
felix instanceof Animal // true
felix.constructor === Animal // throws TypeError

-------------------------------------------------
[1, 2, 3] instanceof Array // true
/abc/ instanceof RegExp // true
({}) instanceof Object // true
(function(){}) instanceof Function // true

null instanceof Boolean // false
undefined instanceof Array // false

3 instanceof Number // false
true instanceof Boolean // false
'abc' instanceof String // false
(3).constructor === Number // true
true.constructor === Boolean // true
'abc'.constructor === String // true



출처 :
http://tobyho.com/2011/01/28/checking-types-in-javascript/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof