수많은 의존관계에 있는 JS 파일을 웹에 배포하는 것이 그리 쉬운일이 아닐겁니다.


이때 사용하는 것이 WebPack Module Bundler 입니다.


설치는 


npm install -g webpack


사용은 


webpack "WoojjaCustomer.js" "Bundle.js" --output-library='WoojjaLibrary'



webpack 에게 시작 JS 파일을 알려주면 참조관계에 맞추어 Bundle JS 파일을 생성해주며, WoojjaLibrary 라는 이름의 component 를 생성해줍니다.



HTML 에서의 사용은 


<script src="Bundle.js"></script>

<script>

var x = new WoojjaLibrary.Customer();

x.Add();

</script>


접근하는데도 편리하겠죠? 


행복한 고수되셔요~ ^^


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\














저작자 표시 비영리 변경 금지
신고

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] WebPack  (0) 2017.10.09
[JavaScript] SystemJS  (0) 2017.10.08
[JavaScript] Interval, Timeout  (0) 2017.02.11
[JavaScript] Markup Insertion  (0) 2017.02.10
[JavaScript] Pop Up 차단 확인  (0) 2017.01.26
[JavaScript] Browser 탐지 스크립트  (0) 2017.01.26
Posted by woojja
TAG webpack


JavaScript 사용시 JavaScript 파일의 참조와는 상관없이 SystemJS 에게 시작 JS 파일을 알려주면 알아서 참조되는 JavaScript 파일을 Loading 해줍니다.


설치는 

npm install systemjs



사용법은 


<script src="system.js"></script>

<script>

SystemJS.import('./Customer.js')

.then(function(module){

var cust = new module.Customer();

cust.Add();

}).catch(function (err)

{ console.error(err); });;

</script>


SystemJS.import 에서 시작 JS 파일을 알려주고 있습니다.


행복한 고수되셔요. ^^


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













저작자 표시 비영리 변경 금지
신고

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] WebPack  (0) 2017.10.09
[JavaScript] SystemJS  (0) 2017.10.08
[JavaScript] Interval, Timeout  (0) 2017.02.11
[JavaScript] Markup Insertion  (0) 2017.02.10
[JavaScript] Pop Up 차단 확인  (0) 2017.01.26
[JavaScript] Browser 탐지 스크립트  (0) 2017.01.26
Posted by woojja
TAG SystemJS

 

Timeouts execute some code after a specified amount of time.

Intervals execute code repeatedly, waiting a specific amount of time in between each execution.

 

 

Timeout

 

Timeout 은 window 의 setTimeout() Method 로 설정한다.

첫번째 매개변수는 Code를 나타내는 문자열도 가능하고 Method 도 가능하다.

 

 

//avoid!
setTimeout(“alert(‘Hello world!’) “, 1000);


//preferred
setTimeout(function() {
    alert(“Hello world!”);
}, 1000);

 

 

첫번째 구문은 성능을 저하시키므로 피할 것.

 

 

setTimeout()을 호출하면 해당 타임아웃의 숫자형 ID 를 반환한다.

 

타임아웃 ID 는 코드의 고유식별자이며 타임아웃을 취소할때 사용한다.

 

//set the timeout
var timeoutId = setTimeout(function() {
    alert(“Hello world!”);
}, 1000);


//nevermind - cancel it
clearTimeout(timeoutId);

 

정해진 시간이 되기전에 clearTimeout()을 호출하기만 하면 타임아웃은 완전히 취소된다.

코드가 실행된 후에는 호출해도 아무 효과가 없다.

 

 

 

 

 

Interval

 

 

setInterval() 역시 IntervalID를 반환하며 후에 clearInterval()을 사용하여 Interval 을 취소할 때 사용한다.

 

Interval()은 취소하지 않으면 페이지가 떠 있는동안 계속 실행되므로 Interval 의 취소는 Timeout 의 취소보다 중요하다.

 

다음은 일반적인 사용예

 

 

var num = 0;
var max = 10;
var intervalId = null;


function incrementNumber() {
    num++;
    //if the max has been reached, cancel all pending executions
    if (num == max) {
        clearInterval(intervalId);
        alert(”Done”);
    }
}


intervalId = setInterval(incrementNumber, 500);

 

 

 

 

일반적으로 Interval()은 쓰지않는 편이 낫다.

 

var num = 0;
var max = 10;


function incrementNumber() {
    num++;
    //if the max has not been reached, set another timeout
    if (num < max) {
        setTimeout(incrementNumber, 500);
    } else {
        alert(“Done”);
    }
}


setTimeout(incrementNumber, 500);

 

 

이런 식으로 Timeout을 사용할 때는 다른 타임아웃이 필요할 때만 설정되므로 취소를 위해 timeoutID 를 추적할 필요가 없다. 사실 이 패턴은 Interval 없이 Interval 을 설정하는 모범사례.

Interval 사이의 시간을 정확히 보장하기 어렵고 이따금 일부 Interval을 건너뛰기도 하므로 실무에서는 Interval 을 잘 쓰지 않는다. 위 예제 처럼 Timeout 을 설정하면 그런 일은 발생하지 않는다.

 

 

-- 도서 "JavaScript for Web Developers" 를 정리

 

행복한 고수되십시요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













저작자 표시 비영리 변경 금지
신고

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] WebPack  (0) 2017.10.09
[JavaScript] SystemJS  (0) 2017.10.08
[JavaScript] Interval, Timeout  (0) 2017.02.11
[JavaScript] Markup Insertion  (0) 2017.02.10
[JavaScript] Pop Up 차단 확인  (0) 2017.01.26
[JavaScript] Browser 탐지 스크립트  (0) 2017.01.26
Posted by woojja

 

innerHTML Property

 

innerHTML 이 정확히 어떤 Text 를 반환할지는 Browser 에 따라 다르다.

IE 와 Opera 는 모든 태그를 대문자로 반환하며 Safari 와 Chrome, FireFox 는 공배과 들여쓰기를 포함해 HTML 을 문서 그대로 반환한다.

innerHTML 의 반화값이 모든 Browser 에서 정확히 같지는 않다.

 

innerHTML 을 쓰기모드로 사용하면 주어진 문자열을  DOM SubTree 로 파싱해 이미 존재하는 자식 노드를 모두 교체한다.

 

HTML 태그가 없는 단순한 텍스트는 평범한 텍스트가 된다.

 

innerHTML 의 제한

 

innerHTML 로 삽입된 <script> 요소는 대부분의 Browser 에서 실행되지 않는다.

IE 8 및 그 이전 버전은 이를 허용하지만 삽입하는 <script> 요소에 defer 속성이 있어야 하며 Microsoft 에서 'scoped element' 라고 부르는 요소 뒤에 있어야 한다.

<script> 요소는 'NoScope elements'인데 이는 <style>요소나 주석처럼 페이지에 나타나지 않는 요소를 말한다.

IE 에서는 innerHTML 로 삽입하는 문자열 처음 부분에서 스코프없는 요소를 모두 제거하므로 다음 코드는 작동하지 않는다.

 

div.innerHTML = “<script defer>alert(‘hi’);<\/script>”; //won’t work

 

 

위 구문에서 innerHTML 문자열은 NoScope element 로 시작하므로 전체 문자열이 사라진다.

이 스크립트가 적절히 동작하게 하려면 닫는 태그 없는 <input> 같은 요소나 텍스트 노드같은 scope element 뒤에 써야한다.

 

다음 구문은 동작한다.

 

div.innerHTML = “_<script defer>alert(‘hi’);<\/script>”;
div.innerHTML = “<div>&nbsp;</div><script defer>alert(‘hi’);<\/script>”;
div.innerHTML = “<input type=\”hidden\”><script defer>alert(‘hi’);<\/script>”;

 

 

 

모든 요소가 innerHTML 을 지원하지는 않는다.

특히나 다음의 element 는 innerHTML 을 지원하지 않는다.

<col><colgroup>, <frameset>, <head>, <html>, <style>, <table>, <tbody>, <thead>, <tfoot>, <tr>

 

IE8 및 이하버전은 <table> element 에서도 innerHTML 을 지원하지 않는다.

 

innerHTML 을 사용할 때는 항상 조심해야하며 가능하다면 삽입할 텍스트를 직접 점검해야한다.

 

 

innerHTML, outerHTML, insertAdjacentHTML 를 사용할 때는 제거할 요소의 이벤트 핸들러나 자바스크립트 객체 프로퍼티를 모두 제거해야한다.

innerHTML, outerHTML 에 값을 할당할때마다 HTML 파서가 사용되므로 innerHTML, outerHTML 사용을 가능한 줄이는 편이 더 낫다.

 

 

 

for (var i=0, len=values.length; i < len; i++){
    ul.innerHTML += ”<li>” + values[i] + ”</li>”; //avoid!!
}

 

 

==>

 

var itemsHtml = “”;
for (var i=0, len=values.length; i < len; i++){
    itemsHtml += ”<li>” + values[i] + ”</li>”;
}
ul.innerHTML = itemsHtml; 

 

 

 

 

 

-- 도서 "JavaScript for Web Developers" 를 정리

 

행복한 고수되십시요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













저작자 표시 비영리 변경 금지
신고

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] SystemJS  (0) 2017.10.08
[JavaScript] Interval, Timeout  (0) 2017.02.11
[JavaScript] Markup Insertion  (0) 2017.02.10
[JavaScript] Pop Up 차단 확인  (0) 2017.01.26
[JavaScript] Browser 탐지 스크립트  (0) 2017.01.26
[JavaScript] Location 객체  (0) 2017.01.25
Posted by woojja

 

Pop Up이 차단되어 있는지 확인하는 구문.

 

 

try {
    var woojja = window.open(“http://www.jumptovb.net”, “_blank”);
    if (woojja == null){
        blocked = true;
    }
} catch (ex){
    blocked = true;
}
if (blocked){
    alert(“The popup was blocked!”);
}

 

이 코드는 window.open() 메서드에 대한 호출이 차단되었다면 차단 방법과 무관하게 차단되었음을 정확히 알아낸다. 팝업이 차된되었는지와 무관하게 Browser 메세지는 정상적으로 표시된다.

 

 

-- 도서 "JavaScript for Web Developers" 를 정리

 

행복한 고수되십시요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













저작자 표시 비영리 변경 금지
신고

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] Interval, Timeout  (0) 2017.02.11
[JavaScript] Markup Insertion  (0) 2017.02.10
[JavaScript] Pop Up 차단 확인  (0) 2017.01.26
[JavaScript] Browser 탐지 스크립트  (0) 2017.01.26
[JavaScript] Location 객체  (0) 2017.01.25
[JavaScript] Query String 확장  (0) 2017.01.23
Posted by woojja

 

Browser 를 탐지하는 스크립트.

 


var client = function(){

    // rendering engines
    var engine = {           
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,

        //complete version
        ver: null 
    };
   
    // browsers
    var browser = {
       
        //browsers
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,

        //specific version
        ver: null
    };

   
    //platform/device/OS
    var system = {
        win: false,
        mac: false,
        x11: false,
       
        //mobile devices
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        nokiaN: false,
        winMobile: false,
       
        //game systems
        wii: false,
        ps: false
    };   

 

    // detect rendering engines/browsers
    var ua = navigator.userAgent;   
    if (window.opera){
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    } else if (/AppleWebKit\/(\S+)/.test(ua)){
        engine.ver = RegExp["$1"];
        engine.webkit = parseFloat(engine.ver);
       
        //figure out if it's Chrome or Safari
        if (/Chrome\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.chrome = parseFloat(browser.ver);
        } else if (/Version\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.safari = parseFloat(browser.ver);
        } else {
            //approximate version
            var safariVersion = 1;
            if (engine.webkit < 100){
                safariVersion = 1;
            } else if (engine.webkit < 312){
                safariVersion = 1.2;
            } else if (engine.webkit < 412){
                safariVersion = 1.3;
            } else {
                safariVersion = 2;
            }  
           
            browser.safari = browser.ver = safariVersion;       
        }
    } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);
    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){   
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);
       
        //determine if it's Firefox
        if (/Firefox\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(browser.ver);
        }
    } else if (/MSIE ([^;]+)/.test(ua)){   
        engine.ver = browser.ver = RegExp["$1"];
        engine.ie = browser.ie = parseFloat(engine.ver);
    }
   
    //detect browsers
    browser.ie = engine.ie;
    browser.opera = engine.opera;
   

    //detect platform
    var p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

    //detect windows operating systems
    if (system.win){
        if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
            if (RegExp["$1"] == "NT"){
                switch(RegExp["$2"]){
                    case "5.0":
                        system.win = "2000";
                        break;
                    case "5.1":
                        system.win = "XP";
                        break;
                    case "6.0":
                        system.win = "Vista";
                        break;
                    case "6.1":
                        system.win = "7";
                        break;
                    default:
                        system.win = "NT";
                        break;               
                }                           
            } else if (RegExp["$1"] == "9x"){
                system.win = "ME";
            } else {
                system.win = RegExp["$1"];
            }
        }
    }
   
    //mobile devices
    system.iphone = ua.indexOf("iPhone") > -1;
    system.ipod = ua.indexOf("iPod") > -1;
    system.ipad = ua.indexOf("iPad") > -1;
    system.nokiaN = ua.indexOf("NokiaN") > -1;
   
    //windows mobile
    if (system.win == "CE"){
        system.winMobile = system.win;
    } else if (system.win == "Ph"){
        if(/Windows Phone OS (\d+.\d+)/.test(ua)){;
            system.win = "Phone";
            system.winMobile = parseFloat(RegExp["$1"]);
        }
    }
        
    //determine iOS version
    if (system.mac && ua.indexOf("Mobile") > -1){
        if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
            system.ios = parseFloat(RegExp.$1.replace("_", "."));
        } else {
            system.ios = 2;  //can't really detect - so guess
        }
    }
   
    //determine Android version
    if (/Android (\d+\.\d+)/.test(ua)){
        system.android = parseFloat(RegExp.$1);
    }
   
    //gaming systems
    system.wii = ua.indexOf("Wii") > -1;
    system.ps = /playstation/i.test(ua);
   
    //return it
    return {
        engine:     engine,
        browser:    browser,
        system:     system       
    };

}();

 

 

-- 도서 "JavaScript for Web Developers" 를 정리

 

행복한 고수되십시요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













저작자 표시 비영리 변경 금지
신고

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] Markup Insertion  (0) 2017.02.10
[JavaScript] Pop Up 차단 확인  (0) 2017.01.26
[JavaScript] Browser 탐지 스크립트  (0) 2017.01.26
[JavaScript] Location 객체  (0) 2017.01.25
[JavaScript] Query String 확장  (0) 2017.01.23
[JavaScript] Tab-Based Navigation Scripts  (0) 2013.07.02
Posted by woojja

 

이번엔 location 객체에 대한 정리

 

location.assign("http://www.jumptovb.net"); //즉시 http://www.jumptovb.net 페이지로 이동

 

위 구문은 다음 구문과 같다.

 

window.location = "http://www.jumptovb.net";

location.href = "http://www.jumptovb.net";

 

 

location 객체의 hash, search, hostname, pathname, port

 

만약 현재위치가 http://www.jumptovb.net/woojja/ 라고 가정했을 때

 

location.hash = "#section1";    // http://www.jumptovb.net/woojja/#section1

location.search = "?q=javascript";    // http://www.jumptovb.net/woojja/?q=javascript

location.hostname = "www.tistory.com";    // http://www.tistory.com/woojja/

location.pathname = "myWoojja";    // http://www.tistory.com/myWoojja/

 

location 객체의 프로퍼티를 바꿀 때마다 새 URL 로 페이지를 다시 읽지만 hash Property 를 바꿀 때는 예외임.

 

 

replace() 메소드를 사용하면 History stack 에 기록을 남기지 않아 "뒤로가기" 를 통해 이전 페이지로 돌아가지 못한다.

 

setTimeout(function() {

location.replace(http://www.tistory.com);

}, 1000);

 

 

reload() : 현재 페이지를 다시 불러오는 메소드

매개변수 없이 호출하면 페이지를 가능한한 가장 효과적인 방법으로 다시 읽음.

location.reload();    // 가능하면 캐쉬에서 읽음

location.reload(true);    // 항상 서버에서 읽음

 

 

 

-- 도서 "JavaScript for Web Developers" 를 정리

 

행복한 고수되십시요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

 













저작자 표시 비영리 변경 금지
신고
Posted by woojja


다음은 QueryString 을 Parsing 해서 각 매개변수를 Property 로 갖는 객체를 반환한다.



function getQueryStringArgs(){

 //물음표 뒤의 QueryString 을 가져온다.
 var qs = (location.search.length > 0 ? location.search.substring(1) : ""),

 //데이터를 저장할 객체
 args = {},
 items = qs.length ? qs.split("&") : {},
 item = null,
 name = null,
 value = null,


 //for 루프에서 사용할 변수
 i = 0,
 len = items.length;

 

 // 각 매개변수를 args 객체에 할당

 for(I = 0; I < len; i++){
  item = items[i].split("=");
  name = decodeURLComponent(item[0]);
  value = decodeURLComponent(item[1]);

  if(name.length){
   args[name] = value;
  }
 }

 return args;
}




행복한 고수되셔요~


woojja))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\













저작자 표시 비영리 변경 금지
신고
Posted by woojja

 

유용한 페이지를 발견했습니다.

 

50+ Nice Clean CSS Tab-Based Navigation Scripts

 

 

행복한 고수되셔요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













저작자 표시 비영리 변경 금지
신고
Posted by woojja

 

 

날짜 검증하는 스크립트입니다.

 

function CheckDate(Year, Month, Day) {
    try {

            var OK = false;

            var LeapYear = (((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0));   
                    
            if (Month == 1) {  
                OK = LeapYear ? Day <= 29 : Day <= 28;
            } 
            else {
                if ((Month == 3) || (Month == 5) || (Month == 8) || (Month == 10)) {
                    OK = Day <= 30;
                }
                else {
                    OK = Day <= 31;
                }
            }             
            //alert(OK?'Yes':'No');
            return OK;        
    }
    catch (e) {
        return false;
    }
}

 

Year, Month, Day 확인은 하지 않습니다. ^^;

 

행복한 고수되셔요...

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













저작자 표시 비영리 변경 금지
신고
Posted by woojja
이전버튼 1 2 이전버튼

티스토리 툴바