카테고리 보관물: JavaScript

여러 개의 문자열 치환하기

여러 개의 문자열을 치환하는 코드입니다.

1
2
3
4
5
6
7
var replaceMap = {"&amp;":"&", "&lt;":"<", "&gt;":">", "&quot;":"\"", "&#39;":"'"};
var repRegExp = new RegExp(Object.keys(replaceMap).join("|"), "gi");
function replaceFunc(str){
	return replaceMap[str];
}
 
str = str.replace(repRegExp, replaceFunc);

크롬에서 cjs로 AngularJS 디버깅하기

AngularJS는 변수나 함수들이 외부로 노출되지 않아 디버깅 하기 어려운 점이 있죠.
그래서 이것저것 시험해 보다 찾아낸 크롬 브라우저의 확장 프로그램 Custom JavaScript for websites을 사용하면 매우 편합니다.

Custom JavaScript for websites (크롬 웹스토어)

사용법은 간단합니다. 적용할 사이트로 이동해서 cjs를 실행하면 다음과 같은 화면이 나오는데, 여기에 원하는 코드를 입력하고 저장해 주세요. 그러면 해당 사이트의 페이지를 열 때마다 입력한 스크립트가 자동으로 실행됩니다.

cjs

여기에 콘솔에서 AngularJS의 스코프, 서비스 등 접근하기 글에서 사용한 코드를 입력하면, 브라우저의 콘솔에서 $scope.myProperty 라던가 $scope.myFunction() 같이 스코프나 서비스 객체에 접근이 가능합니다.

코드 복사해서 사용할 수 있도록 추가해 놓아요.

1
2
3
4
5
6
7
8
9
10
11
12
13
function angularScope(){
    try{
        $scope = angular.element(document.body).scope();
        injector = angular.element(document.body).injector();
        $window = injector.get("$window");
        $timeout = injector.get("$timeout");
        $http = injector.get("$http");
        $location = injector.get("$location");
        myService = injector.get("myService");
    }catch(e){}
}
 
setTimeout(angularScope, 1000);

콘솔에서 AngularJS의 스코프, 서비스 등 접근하기

다음 코드를 사용하면 콘솔에서 스코프나 서비스를 직접 제어할 수 있습니다.

var scope = angular.element(document.body).scope();
var injector = angular.element(document.body).injector();
var myService = injector.get("MyService");

간단 배너 만들기, Simple Banner

태그만 입력하면 자동으로 배너가 만들어지도록 Simple Banner을 만들었습니다.
일단 필요한 CSS 와 자바스크립트 파일을 로드합니다.

1
2
3
<link rel="stylesheet" href="simpleBanner.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="simpleBanner.js"></script>

그리고 필요한 곳에 다음의 형식으로 태그만 입력하면 나머지는 Simple Banner가 알아서 처리합니다.

5
6
7
8
9
10
<div class="simple_banner_wrap">
	<ul>
		<li>......</li>
		<li>......</li>
	</ul>
</div>

Demo: http://hangunsworld.com/blogSamples/simpleBanner/

다음의 속성값을 통해서 배너의 동작을 설정할 수도 있죠.
data-type: 배너 동작 방식

  • alpha: 알파 트윈
  • hslide: 가로방향 슬라이드
  • vslide: 세로방향 슬라이드

data-nav-type: 네비게이션 타입

  • bullt: 블릿
  • numeral: 숫자
  • prev_next: 이전/다음

data-interval: 타이머 시간(밀리세컨드)

update: 2016/03/02
소스 요청이 간간이 있어 다운로드 링크 추가합니다.
Simple Banner 소스 다운로드

jQuery의 ajax()를 확장한 AjaxDelegate

jQuery.ajax()의 기능을 확장한 AjaxDelegate를 만들었습니다. 이전에 작업한 프로젝트에서 만들어 사용하던 코드를 조금 손봐서, 공개해 봅니다.
아래와 같이 사용할 수 있습니다.

var params = {};
params.param1 = Math.round(Math.random() * 10000);
params.param2 = "some text";
var delegator = new AjaxDelegate("dataText.php", params, ajaxDelegateSuccess, ajaxDelegateError);
delegator.load();

좀 더 자세한 사용법은 아래 링크를 참고하세요.

데모: AjaxDelegate Demo
다운로드: ajaxDelegate.js