Skip to main content

109 posts tagged with "javascript"

View All Tags

· 2 min read
Gracefullight

classic asp 는 기본 json 모듈이 없기 때문에 여기에서 모듈을 다운로드 해야한다.

소스

<!--#include virtual = "/JSON_2.0.4.asp"-->
<%
'request TO JSON
Dim req:Set req = jsObject()

FOR EACH i IN Request.QueryString
    IF Request.QueryString(i).count > 1 THEN
        i = Replace(i,"&", "")
        Set req(i) = jsArray()
        FOR EACH j IN Request.QueryString(i)
            req(i)(null) = j
        NEXT
    ELSE
        req(i) = Request.QueryString(i)
    END IF
NEXT

FOR EACH x IN Request.Form
    IF Request.Form(x).count > 1 THEN
        Set req(x) = jsArray()
        FOR EACH y IN Request.Form(x)
            req(x)(null) = y
        NEXT
    ELSE
        req(x) = Request.Form(y)
    END IF
NEXT
'session TO JSON
Dim sess:Set sess = jsObject()
FOR EACH k IN Session.Contents
    sess(k) = Session.Contents(k)
NEXT
%>
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
    var request = JSON.parse('<%=req.flush%>');
    var session = JSON.parse('<%=sess.flush%>');
    Object.freeze(request);
    Object.freeze(session);
</script>

설명

1 줄에서 JSON 모듈을 include 시켜주고 6~27 줄에서 Get 방식과 Post 방식의 Request 를 모두 파싱한다. 30~33 줄에서 Session 을 파싱한다. 40 줄에서 request 와 session 을 javascript 변수로 받고, 클라이언트가 변조하지 못하게 Object.freeze 로 얼려버린다.

· 4 min read
Gracefullight

javascript 에서 linter 의 역활은 중요하다. Sublime Text 나 VSCode 에서 jshint linter 를 설치하고, 기본 설정을 수정해보자.

설치

Sublime​

모듈 설치​

Sublime Linter 패키지가 선행되어야한다.

Package Control을 열어 Sublimt-Linter jshint를 설치한다. 간단히 jshint 로 검색해도 된다.

jshint 설치​

# 전역으로 jshint를 설치한다.
$ npm install -g jshint

설정 경로 변경​

Preferences > Package Settings > SublimeLinter > Settings - user 메뉴로 들어가, "users.linters.jshint.args"에 경로를 수정한다.

{
  "linters": {
    "jshint": {
      "@disable": false,
      "args": [
        // 여기에 경로를 적어준다.
        "--config=C:\\Users\\사용자\\npm\\node_modules\\jshint\\jshint_config.json"
      ],
      "excludes": []
    }
  }
}

VSCode​

내장되어있다. 파일 > 기본설정 > 설정에서 아래 속성을 만져주면 된다.

{
  "jshint.options": {}
}

설정 파일

소스​

{
  "esnext": true,
  "asi": false,
  "boss": false,
  "curly": true,
  "eqeqeq": true,
  "eqnull": false,
  "evil": false,
  "expr": true,
  "forin": true,
  "funcscope": false,
  "jquery": true,
  "latedef": true,
  "lastsemic": false,
  "loopfunc": false,
  "maxerr": 10,
  "nocomma": true,
  "nonbsp": true,
  "node": true,
  "nonew": false,
  "plusplus": false,
  "regexdash": false,
  "shadow": false,
  "strict": false,
  "supernew": false,
  "trailing": false,
  "undef": false,
  "unused": false,
  "white": false,
  "withstmt": false,
  "worker": true
}

설명​

  • esnext : es6 의 구문을 사용할 수 있음
  • asi : 세미콜론이 없을 수 있음
  • boss : 비교문(lt, gt..)이 올 자리에 할당문(a = 1)이 올 수 있음
  • curly : 중괄호 생략할 수 없음
  • eqeqeq : ==를 사용할 수 없음 (===를 사용)
  • eqnull : null 비교를 사용할 수 있음
  • evil : eval 을 사용할 수 있음
  • expr : 할당이나 함수호출이 아닌 표현식 사용할 수 있음 (예제 참조)
  • forin : forin 반복문 사용시 if 으로 필터링을 해줘야함
  • funcscope : 조건문 내의 선언된 변수를 조건문 바깥에서 참조 가능
function test() {
  if (true) {
    var x = 0;
  }

  x += 1; // Default: 'x' used out of scope.
  // No warning when funcscope:true
}
  • jquery : jQuery 의 전역변수를 미리 정의
  • latedef : 호출보다 늦게 정의된 변수를 금지 (호이스팅 방지)
  • lastsemic : 한 줄짜리 블록 코드에서 마지막 세미콜론이 없을 경우만 오류
  • loopfunc : 반복문 안에서 함수 정의 가능
  • maxerr : 총 보여줄 오류의 갯수
  • nocomma : comma 연산자 사용 금지
  • nonbsp : non-breaking whitespace 금지
  • node : 노드 환경 사용 가능
  • nonew : new 생성자 사용 불가
  • plusplus : 단항 증감연산자 사용 불가
  • regexdash : 정규식에서 대괄호 안에 escape 처리 되지 않은 대쉬(-) 가능
  • shadow : 변수 재선언 가능 (inner 또는 false, outer, true 로 설정)
  • strict : "use-strict" 선언이 없을시 오류
  • supernew : 잘못 작성한 생성자의 오류 표시 안함
  • trailing : 라인 끝의 불필요한 공백이 있으면 오류
  • undef : 선언되지 않은 변수 사용시 오류
  • unused : 선언이 되었으나 사용되지 않는 변수에 대해 오류
  • white : jshint 가 더글락스 크락포드의 코딩 스타일 가이드에 따라 코드를 검사
  • withstmt : with 구문 사용 가능
  • worker : Web Worker 사용 가능

· One min read
Gracefullight

공식 문서에 따르면 image tag 의 사용법은 이렇다.

![image from hexo]([class names] /path/to/image [width] [height] [title text
[alt text]])

대괄호로 둘러 쌓인 부분은 생략이 가능하다.

문제점

Input​

test.png 에 test_title, test_alt 속성을 추가하고 싶은 경우 아래처럼 사용하면 되어야한다.

![image from hexo](/test.png test_title test_alt)

Output​

하지만 결과는 참담하다.

<img src="/test.png" title="test_title test_alt" />

해결

Input​

속성을 quotes 와 double quotes 로 두번 감싸줘야한다.

![image from hexo](/test.png "'test_title'" "'test_alt'")

Output​

<img src="/test.png" title="test_title" alt="test_alt" />

여담

공식 문서에 설명이 업데이트되면 좋겠다. 이미지에 캡션다는 법을 찾다가 결국 내 블로그에는 안 달기로 마음먹었다.

· One min read
Gracefullight

Google Analytics, Facebook Pixel, Naver Analytics 등의 분석 스크립트 및 Google Adsence 를 차단하는 AdBlock 을 감지해보자

소스

/**
@author https://www.christianheilmann.com/2015/12/25/detecting-adblock-without-an-extra-http-overhead/
*/
(function (adBlockEnabled) {
  "use strict";
  var testAd = document.createElement("div");
  testAd.innerHTML = "&nbsp;";
  testAd.className = "adsbox";
  document.body.appendChild(testAd);

  setTimeout(function () {
    if (testAd.offsetHeight === 0) {
      adBlockEnabled = true;
    }
    testAd.remove();

    if (adBlockEnabled) {
      alert(
        "This Blog is made possible by displaying online advertisements\nPlease consider by disabling your ad blocker"
      );
    }
  }, 100);
})((window.adBlockEnabled = window.adBlockEnabled || false));

출처의 소스를 즉시실행함수로 변경하고, 문구를 추가했다.

설명

AdBlock 에 의해 차단되는 영역인 .adsbox div 의 생성유무를 확인해 AdBlock 의 adBlockEnabled 변수의 값을 정한다.

uBlock 도 잘 찾아낸다.

· 2 min read
Gracefullight

Toggle Event 사용시 AAA 로 명명된 클래스를 BBB 로 바꾸고 싶을 때가 있다.

$("#id").removeClass("AAA").addClass("BBB");

보통 이런 방식으로 사용하는데, alterClass 함수를 곁들이면 더 나이스하게 바꿀 수 있다.

소스

/**
@author https://gist.github.com/peteboere/1517285
*/
$.fn.alterClass = function (removals, additions) {
  var self = this;

  if (removals.indexOf("*") === -1) {
    // Use native jQuery methods if there is no wildcard matching
    self.removeClass(removals);
    return !additions ? self : self.addClass(additions);
  }

  var patt = new RegExp(
    "\\s" +
      removals.replace(/\*/g, "[A-Za-z0-9-_]+").split(" ").join("\\s|\\s") +
      "\\s",
    "g"
  );

  self.each(function (i, it) {
    var cn = " " + it.className + " ";
    while (patt.test(cn)) {
      cn = cn.replace(patt, " ");
    }
    it.className = $.trim(cn);
  });

  return !additions ? self : self.addClass(additions);
};

예제

// AAA to BBB
$("#id").alterClass("AAA", "BBB");
// AAA-12, BBB-13 to AAABBB
$("#id").alterClass("AAA-* BBB-*", "AAABBB");

asterisk(*)를 이용해 여러 개의 클래스를 한꺼번에 원하는 클래스로 변경할 수 있다.

여담

jQuery UI 를 사용 중이라면, .switchClass를 사용하면 된다.

· 2 min read
Gracefullight

비동기 submit 을 진행시에 form 값을 확인해보고 json object 로 받아 한 번에 request 를 날리고 싶을 때 유용하다.

소스

/*
@author https://github.com/macek/jquery-serialize-object
*/
$.fn.serializeObject = function () {
  "use strict";
  var result = {};
  var extend = function (i, element) {
    var node = result[element.name];
    if ("undefined" !== typeof node && node !== null) {
      if ($.isArray(node)) {
        node.push(element.value);
      } else {
        result[element.name] = [node, element.value];
      }
    } else {
      result[element.name] = element.value;
    }
  };

  $.each(this.serializeArray(), extend);
  return result;
};

예제

var formData = $("#form").serializeObject();

여담

checkbox 같은 경우 여러 개 선택시 하나의 key 에 배열로 반환된다.

<form>
  <input type="checkbox" name="arr" value="1" checked />
  <input type="checkbox" name="arr" value="2" checked />
</form>

<script>
  var formData = $("form").serializeObject();
  // => formData = { arr : [1,2] };
</script>

사실 이 기능이 제일 매력적이다.

현재 serializeObject library는 더 높은 버전이 있다. 최신 버전에선 form 의 name 속성에 object 를 직접 관리할 수 있다. 최신 버전을 써도 괜찮고, 가볍게 추가해서 쓰고 싶으면 위 버전을 이용하자.

· One min read
Gracefullight

로그인 폼을 만들 때 tab 과 enter 를 이용해 로그인 할 수 있게 해줘야한다.

소스

$("#id").keypress(function (e) {
  if (e.which === 13) {
    // do something
  }
});

여담

로그인 폼을 매번 만들지 않기 때문에, e.which 는 매번 헷갈린다..

· One min read
Gracefullight

부모창을 제어하는 구문은 아래처럼 사용한다.

document.parent.getElementById('id')...
window.opener.document.getElementById('id')...

jQuery

jQuery를 사용하고 있다면 생각보다 쉽게 요소 선택을 할 수 있다.

var $id = $("#id", opener.document); // parent.document도 가능
$id.val("value");

2열처럼 바로 값 변경도 가능하다.

· One min read
Gracefullight

Javascript 의 form 의 reset() 메소드는 hidden field 와 check, radio button 에 대해 초기화를 시켜주지 않는다.

따라서 form 의 모든 field 를 초기화 시키려면 아래의 메소드가 필요하다.

소스

$.fn.clearForm = function () {
  return this.each(function () {
    var type = this.type,
      tag = this.tagName.toLowerCase();
    if (tag === "form") {
      return $(":input", this).clearForm();
    }
    if (
      type === "text" ||
      type === "password" ||
      type === "hidden" ||
      tag === "textarea"
    ) {
      this.value = "";
    } else if (type === "checkbox" || type === "radio") {
      this.checked = false;
    } else if (tag === "select") {
      this.selectedIndex = -1;
    }
  });
};

예제

$("#form").clearForm();

설명

여기의 clearForm 메소드를 hidden 도 초기화할 수 있게 커스터마이징 했다.

· 3 min read
Gracefullight

jQuery3이 기존 버전에서 어떻게 달라졌는지 알아보자.

load(), unload(), error() 삭제

이 함수들은 이제 ajax 기능으로만 사용할 수 있다. 다음처럼 url 을 로드하는 데에만 사용할 수 있다.

// 사용 가능
$(div).load(url);

기존에 사용하던 엘레먼트 로드 시 callback 함수를 받는 구문은 더이상 사용할 수 없지만 on('load') 로 충돌을 피할 수 있다.

// 사용 불가능
$(img).load(function () {
  console.log("이미지 로드 완료");
});

// 사용 가능
$(img).on("load", function () {
  console.log("이미지 로드 완료");
});

document on Ready 삭제

document 로드시에 호출되는 함수들을 정의하기 위한 위의 형태는 더 이상 사용할 수 없다. $(document).ready(function(){ }); 으로 변경해도 되나

=> $(function(){ }); 로 사용하자, 권장하는 방법이다.

deferred의 Promise 스펙

Promise/A+ 스펙을 지키지 않은 2버전까지는 오류가 있었다고 하는데, then, when 등의 메소드를 사용 중엔 별다른 문제가 없어서 체감상 크게 느껴지지 않았다.

=> then().then().then().then().catch() 와 같은 구문이 가능하다.

bind(), unbind(), delegate() undelegate() 삭제

위 구문 사용시 console.warning이 떴기에 바꿔왔더라면 큰 문제는 없다.

=> on(), off() 로 대체하면 된다.

andSelf() 삭제

이 메소드가 삭제되어 sementic UI 사용시 오류가 발생한다.

=> addBack() 으로 대체하면 된다.

param() 이 %20 을 + 기호로 바꾸지 않음

$.ajax로 return 받을 때 가끔씩 빈칸이 더하기로 반환되는 문제가 드디어 해결되었다.

event.props, event.fixHooks 삭제

jquery.onoff 라이브러리 사용시 오류가 난다.

=> fixHooks는 fix로 대체 가능하고, props는 빈 배열로 초기화시키면 된다.

data attribute 정의시 kebab-case를 사용가능

이 부분은 jQuery 문서의 예제를 참조했다.

var $div = $("<div />");
$div.data("clickCount", 2);
$div.data("clickCount"); // 2
$div.data("click-count", 3);
$div.data("clickCount"); // 3
$div.data("click-count"); // 3

var allData = $div.data();
allData.clickCount; // 3
allData["click-count"]; // undefined
allData["click-count"] = 14;
$div.data("click-count"); // 3, NOT 14 as it would be in jQuery 2.x
allData.clickCount; // 3
allData["click-count"]; // 14

하지만 헷갈리니 camelCase 로.

기타 변경점은 링크 참조