반응형

var script = document.createElement('script');

script.src = '주소';

script.charset = 'utf-8';

document.getElementsByTagName('head')[0].appendChild(script);

반응형
,
반응형

charset=utf-8로 해놓은 곳에서 한글이 깨진다면, 다음의 방법들을 써보면 된다. 


1. 관련된 파일들의 문서 인코딩을 전부 utf-8로 해놓는다.

에디트 플러스나, 드림위버 같은 툴이나, IE나 화폭 같은 브라우저를 이용해서 해당 문서의 인코딩이 무엇으로 되어 있는지 확인 할 수 있다. utf-8로 안되 있는 경우 모두 utf-8로 하기 바란다.


2. meta 태그를 확인해본다.

해당 소스에 meta태그 charset을 지정해주는 문장이 없다면, 아래와 같은 meta태그를 head 부분에 추가 시키기 바란다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


3. 불러오는 .js파일의 문서 인코딩을 변경할수 없는 경우
신용카드 결재나, 본인 확인 서비스 같은 타 업체에서 지원해주는 서비스일 경우 해당 .js 파일 인코딩은 euc-kr로 되어 있는데 자신의 소스 인코딩은 utf-8로 되어 있는 경우가 있다.
이럴경우 해당 업체에 문의 하면 되기도 하지만, 
<script language=JavaScript src="해당서비스js파일.js" charset='euc-kr'></script>
와 같이, 선언해주는 곳에 charset을 지정해주면 이 문제가 해결 된다.




출처 : http://blackfrost.blog.me/40155073342

반응형
,
반응형

팝업창 닫을 때 기존에는


window.close();


이것을 썼는데


익스플로러 같은경우 닫을건지 말건지 확인창이 뜬다


이러한 확인창을 안뜨게 할 경우


window.open("about:blank", "_self").close();


이것을 써주면 됨

반응형
,
반응형

자바스크립트 기본 함수인

 

window.close();

 

but...어쩐 일인지 이 창을 닫겠습니까, y,n 메세지가 뜬다.

 

이유인즉.. IE 7.0 의... 보안 정책..

 

해결책은

 

window.open('about:blank', '_self').close();

 

로 해결.

 

 

※ 정리

 

window.close();      //IE 6.0 이하 Ver.

 

window.open('about:blank', '_self').close();     //IE 7.0 이상 Ver.

 

---------------------------------------

 

※ 익스플로러 버전 비교 자동 스크립트.

 

//익스플로러 버전 비교 후 자동 창 닫기.
   if(/MSIE/.test(navigator.userAgent)){
    //IE 7.0 이상
    if(navigator.appVersion.indexOf("MSIE 7.0")>=0){
    window.open('about:blank', '_self').close();
    }
    //IE 7.0 이하
    else{
    window.opener = self;
    self.close();
    }
    }


출처: http://windydh.egloos.com/viewer/10544473

반응형
,
반응형

가끔 사용하다 보면 해당 텍스트가 한글이 포함되어 있는지 확인이 필요한 경우가 있다.


그럴 때 체크하는 소스



var str = '냐하하';

var han = /[ㄱ-힣]/g;

var chk_han = str.match(han);

if(chk_han){

alert('한글이 포함됨.');

}

반응형
,
반응형

try {

        var xml2js = require('xml2js');

        var request = require('request');

        

        var url = 'URL주소'; 

        var parser = new xml2js.Parser();

        request(url, function(error, response, body) {

          parser.parseString(body, function(err,result){

            

            console.log(result);

            });

        });

      } catch (ex) {console.log(ex)}

반응형
,
반응형

Mysql Pool

이번에 사용 하는 클라우드 서버는 
Mysql 설정 파일을 바꿔도 윗단에서 커넥션을 빠르게 끊어버리는 바람에 문제가 되었습니다. 

맨 처음에는 setInterval와 end 함수의 콜백을 이용해 특정 시간이 될 때마다 
커넥션을 모두 끊고 다시 연결을 만들도록 했었는데요. 
그래도 어느 순간이 되면 커넥션 에러가 발생 했습니다. 

다음 시도는 Mysql-simple-pool모듈을 사용 하는 것이었습니다. 
저번에 Mysql-simple-pool에 관해 포스팅을 한 적이 있었죠. 
그런데 사용시 전에는 없었던 문제가 생겼습니다. 그것은 쿼리를 처음 할 땐 에러가 난다는 것이었죠. 
쿼리를 몇 번 하고 나서야 에러가 안나고 잘 처리 되었습니다. 

여러가지 해결 방법을 찾아보다가 Mysql모듈도 Pool을 지원한다는 사실을 알게 되었습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var mysql = require('mysql');
 
var mysqlConfig = {
  host:       "아이피",
  port:       "포트",
  user:       "아이디",
  password:   "암호",
  database:   "데이터베이스"
  };
 
var pool= mysql.createPool(mysqlConfig);
 
    pool.getConnection(function(err,connection){
        connection.query("쿼리",function(err,rows){
        //rows를 처리할 내용
        //release를 해주어 커넥션이 pool로 되돌아 갈 수 있도록 해줍니다.
        connection.release();
        //이제 이 커넥션은 pool로 돌아가 다른 주체가 사용 할 수 있도록 준비합니다.
        });
    });
 
//추가사항 : 이렇게 해줘도 끊기는 현상이 발생 할 때가 있었습니다.
//이건 최후의 방법인데 특정 시간마다 연결했다 끊는겁니다.
//저는 결국 이 방법으로 해결했습니다.
 
function keepAlive(){
   pool.getConnection(function(err, connection){
     if(err) { return; }
     connection.ping();
     connection.release();
   });
 
    //redis client를 사용중이라면, 아마 Redis연결도 빠르게 끊길겁니다.
    //client.ping();  // 라고 해주면 Redis연결도 유지합니다.
 }
 setInterval(keepAlive, 60*1000);



출처: http://blog.mygentle.com/2013/11/nodejs-mysql.html

반응형
,
반응형

자바스크립트의 6가지 자료형 : 숫자, 문자열, 불리언, 함수, 객체, 정의되지 않은 자료형
이번 장에서는 객체를 다룹니다.

객체 개요

배열과의 비교

1
2
3
4
5
6
7
8
9
10
11
12
var array = ['사과', '바나나', '망고', '딸기'];
// 배열: 인덱스로 접근 (ex: array[0], array[1], ...)
var product = {
name: '7D 건조 망고',
kind: '당절임',
ingredient: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
origin: '필리핀'
};
// 객체: 키로 접근
// (ex1: product['name'], product['kind'], ...)
// (ex2: product.name, product.kind, ...)

 

객체의 속성과 메소드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var person = {
// 속성
name: '홍길동',
gender: '남자',
// 메소드
eat: function(food) {
alert(this.name + '이 ' + food + '을/를 먹습니다.');
},
getGender: function() {
alert(this.name + '은 ' + this.gender + '입니다.');
}
};
person.eat('밥');
person.getGender();

배열 내부에 있는 값 하나하나를 요소라고 부르듯이 객체 내부에 있는 값 하나하나를 속성(property)이라고 부릅니다. 그리고 속성중에서 함수 자료형인 속성을 특별히 메소드(method)라고 부릅니다.

소스코드를 보면 this라는 키워드가 나오는데 this는 자기 자신의 객체를 의미하는 키워드입니다. 즉, this.name은 '홍길동'을 나타냅니다. 그리고 보통 많은 프로그래밍 언어들은 this라는 키워드를 생략해서 사용할 수 있는 경우가 많은데 자바스크립트는 this 키워드를 생략할 수 없습니다.

 

객체와 반복문

1
2
3
4
5
6
7
8
9
10
11
12
var product = {
name: '7D 건조 망고',
kind: '당절임',
ingredient: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
origin: '필리핀'
};
var output='';
for(var key in product) {
output += key + ': ' + product[key] + '\n';
}
alert(output);

객체에서 반복문을 사용하려면 일반적인 반복문은 사용할 수 없고 for in 반복문을 사용해야 합니다.

 

키워드(in, with)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var product = {
name: '7D 건조 망고',
kind: '당절임',
ingredient: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
origin: '필리핀',
getName: function() {
return this.name;
}
};
alert('name' in product); // true
alert('shop' in product); // false
alert('getName' in product); // true

in 키워드는 특정 속성 또는 메소드가 그 객체에 있는지 판별합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var product = {
name: '7D 건조 망고',
kind: '당절임',
ingredient: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
origin: '필리핀',
getName: function() {
return this.name;
}
};
with(product) {
alert(name);
alert(kind);
alert(ingredient);
alert(origin);
alert(getName());
}

with 키워드는 product.name 처럼 써야할 것을 name만 사용할 수 있게 도와줍니다.

만약 객체의 속성 이름과 외부 변수의 이름이 같으면 충돌이 발생합니다. 이 경우 객체의 속성이 우선적으로 선택됩니다. 만약 외부의 변수를 사용하고 싶다면 window.변수이름 으로 사용하면 됩니다. window는 자바스크립트 최상위 객체입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var product = {
name: '7D 건조 망고',
kind: '당절임',
ingredient: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
origin: '필리핀',
getName: function() {
return this.name;
}
};
var name = '외부변수 이름'; // name 이름 충돌
with(product) {
alert(name); // 7D 건조 망고
alert(window.name); // 외부변수 이름
}

 

동적 속성 추가와 제거

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 비어있는 상태의 객체 생성
var student = {};
// 동적으로 속성 추가
student.name = '김민우';
student.grade = 3;
student.major = '컴퓨터 공학';
// 동적으로 메소드 추가
student.toString = function() {
var output='';
for(var key in student) {
if(key != 'toString')
output += key + '\t' + student[key] + '\n';
}
return output;
};
// 출력 확인
alert(student.toString());
// 동적으로 속성 제거
delete(student.grade);
// 출력 확인(toString()을 굳이 사용하지 않아도 출력됩니다.)
alert(student);

주석에 보이는 것처럼 속성이나 메소드를 선언, 정의하면 동적으로 속성이 추가되고 delete 키워드를 사용하면 속성이 제거됩니다.

코드의 마지막 부분에서 toString()을 사용하지 않아도 출력이 되었습니다. 객체를 특별한 과정 없이 바로 출력하게 되면 toString()메소드가 자동으로 호출됩니다. 즉 어떤 객체를 문자열로 바꾸는 작업을 하고 싶다면 toString()메소드를 적극 활용하는 것이 좋습니다.

 

객체의 생성

객체를 리턴하는 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function makeStudent(name, korean, math, english, science) {
var willReturn = {
name: name,
korean: korean,
math: math,
english: english,
science: science,
getSum: function() {
return this.korean + this.math + this.english + this.science;
},
getAverage: function() {
return this.getSum() / 4;
},
toString: function() {
return this.name + '\t' + this.getSum() + '\t' + this.getAverage();
}
};
return willReturn;
}
var student = makeStudent('김민우', 96, 98, 92, 97);
alert(student);

함수 makeStudent는 인자로 전달받은 값을 이용하여 객체를 만들어 리턴합니다. 이렇게 하면 같은 형식의 객체를 손쉽게 만들 수 있습니다. 하지만 이 방법은 실제로 거의 사용하지 않습니다. 앞으로 살펴볼 생성자 함수와 프로토타입을 이용하여 객체를 만듭니다.

 

생성자 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Student(name, korean, math, english, science) {
this.name = name;
this.korean = korean;
this.math = math;
this.english = english;
this.science = science;
this.getSum = function() {
return this.korean + this.math + this.english + this.science;
};
this.getAverage = function() {
return this.getSum() / 4;
};
this.toString = function() {
return this.name + '\t' + this.getSum() + '\t' + this.getAverage();
};
}
var student = new Student('김민우', 96, 98, 92, 97);
alert(student);

new 키워드를 통해 생성자 함수를 호출하면 객체가 생성됩니다. 하지만 객체를 리턴하는 함수와 큰 차이가 없어 보입니다. 이제 프로토타입을 살펴봅시다.

보통 일반적인 함수이름은 소문자로 시작하는데에 반해 생성자 함수는 대문자로 시작합니다. 꼭 그래야 하는 것은 아니지만 개발자 사이 간의 규칙이라고 볼 수 있으므로 꼭 지켜주시는 것이 좋습니다.

 

프로토타입

만약 생성자 함수를 통해 여러 개의 객체를 만든다고 생각해 봅시다. 각 객체는 서로 다른 속성 값들을 가질 것이지만 메소드는 모두 같은 메소드를 갖습니다. 즉 객체를 생성할 때마다 같은 메소드를 반복적으로 생성하는, 메모리 측면에서 아주 비효율적인 작업을 하고 있었던 것입니다. 이를 해결하려면 프로토타입(Prototype)을 이용하면 됩니다. 프로토타입은 생성자 함수를 통해 생성된 객체들이 공통으로 가지는 공간입니다. 즉 메소드를 객체로부터 분리시켜 프로토타입이라는 별도의 메모리 공간에 저장해 놓는 것입니다. 그리고 모든 객체는 프로토타입에 존재하는 메소드를 공유하게 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function Student(name, korean, math, english, science) {
this.name = name;
this.korean = korean;
this.math = math;
this.english = english;
this.science = science;
}
Student.prototype.getSum = function() {
return this.korean + this.math + this.english + this.science;
};
Student.prototype.getAverage = function() {
return this.getSum() / 4;
};
Student.prototype.toString = function() {
return this.name + '\t' + this.getSum() + '\t' + this.getAverage();
};
var students = [];
students.push(new Student('김일등', 96, 98, 92, 97));
students.push(new Student('김이등', 86, 84, 81, 87));
for(var i in students) {
alert(students[i]);
}

위와 같이 동적으로 추가하는 방식을 이용하기 때문에 이미 존재하는 객체에 메소드를 추가로 제공할 수도 있습니다.

 

instanceof 키워드

1
2
3
4
function Student(name) { this.name = name; }
var student = new Student('김민우');
alert(student instanceof Student); // true
alert(student instanceof Number); // false

instanceof 키워드는 해당 객체가 어떤 생성자 함수를 통해 생성됐는지 확인할 때 사용합니다.

 

캡슐화

캡슐화란 잘못 사용될 수 있는 객체의 특정 부분을 사용자가 직접 사용할 수 없게 막는 기술입니다. 즉 만일의 상황을 대비해서 특정 속성이나 메소드를 사용자가 사용할 수 없게 숨겨 놓는 것입니다. 아래 예제는 사각형의 생성자 함수입니다. 길이에는 양수만 올 수 있다는 것에 유의해서 코드를 보세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function Rectangle(w, h) {
if(w <= 0 || h <= 0) {
throw '길이는 양수이어야 합니다.';
}
// 변수의 선언
// 지금까지 속성을 추가할 때 this.width = w;처럼 사용하였습니다.
var width = w;
var height = h;
// 메소드 게터(getter)와 세터(setter)의 선언
this.getWidth = function() {
return width;
};
this.getHeight = function() {
return height;
};
this.setWidth = function(val) {
if(val <= 0) {
throw '길이는 양수이어야 합니다.';
// 일단은 throw는 웹페이지 오류를 발생시키는 키워드라고 생각합시다.
}
else {
width = value;
}
};
this.setHeight = function(val) {
if(val <= 0) {
throw '길이는 양수이어야 합니다.';
}
else {
height = value;
}
};
}
// 기타 메소드 선언
Rectangle.prototype.getArea = function() {
return this.getWidth() * this.getHeight();
};

지금까지 변수의 속성을 추가할 때 this키워드를 이용하여 추가한 것과 달리 이번에는 변수를 선언하고 메소드를 통해 변수에 접근하였습니다. 그리고 길이(width, height)에는 양수만 올 수 있으므로 양수가 아닌 값이 들어오면 값을 저장하지 못하도록 예외처리를 해 주었습니다. 이렇게 캡슐화를 하게 되면 의도하지 않은 값이 들어오는 것을 미리 방지할 수 있게 됩니다. 그리고 getWidth, getHeight와 같이 값을 가져오는 메소드를 게터(getter)라고 부르고 setWidth, setHeight와 같이 값을 설정하는 메소드를 세터(setter)라고 부릅니다.

 

상속

상속은 기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 쉽게 만드는 것입니다. 즉 기존 객체의 특성을 모두 물려 받습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function Rectangle(w, h) {
if(w <= 0 || h <= 0) {
throw '길이는 양수이어야 합니다.';
}
var width = w;
var height = h;
this.getWidth = function() {
return width;
};
this.getHeight = function() {
return height;
};
this.setWidth = function(val) {
if(val <= 0) {
throw '길이는 양수이어야 합니다.';
}
else {
width = value;
}
};
this.setHeight = function(val) {
if(val <= 0) {
throw '길이는 양수이어야 합니다.';
}
else {
height = value;
}
};
}
Rectangle.prototype.getArea = function() {
return this.getWidth() * this.getHeight();
};
// Square는 Rectangle을 상속받습니다.
function Square(length) {
this.base = Rectangle;
this.base(length, length);
}
// prototype도 상속받을 수 있도록 별도 작업이 필요합니다.
Square.prototype = Rectangle.prototype;

자식(Square)의 생성자 함수의 base라는 속성(꼭 이름이 base이지 않아도 됩니다.)에 부모(Rectangle)의 생성자 함수를 넣고 실행한 것과 프로토타입을 넣어준 것 두 가지 작업을 하면 상속이 됩니다. 상속이 되었는지 확인을 하려면 아래의 코드를 실행해 보면 됩니다.

1
2
var square = new Square(5); // Square의 인스턴스 생성
alert(square instanceof Rectangle); // 상속 확인(true 출력)

즉 Square의 인스턴스인 square가 생성자 함수 Rectangle로부터 만들어졌다고 인정이 되는 겁니다.

그런데 자바스크립트는 사실 다른 프로그래밍 언어와 달리 상속을 하는 방법이 딱히 정해져 있지 않습니다. 따라서 매우 다양한 상속 방법이 존재하는데 한 가지만 더 살펴보겠습니다.

1
2
3
4
5
function Square(length) {
Rectangle.call(this, length, length);
}
Square.prototype = new Rectangle();
Square.prototype.constructor = Square;

call 메서드는 다른 객체의 메서드를 자신의 메서드처럼 사용할 수 있게 하는 메서드입니다.


출처: http://opentutorials.org/module/570/5102

반응형
,
반응형

이번엔 http모듈에서 get 파라미터와 post 의 데이터 값을 구하는 예제 입니다. 



1. Get 파라미터 구하기 

server.js 소스

1
2
3
4
5
6
7
8
9
10
11
<span style="font-size: 10pt;">var http = require("http");
var url = require("url");
 
http.createServer(function(req, res) {
    var query = url.parse(req.url, true).query;
    console.log(query);
 
}).listen(8080, function(){
    console.log("server running");
});
</span>

브라우져로 url에 파라미터를 주면 ? 이후부터 json방식으로 콘솔에 찍힙니다.  

브라우져 접속 예) http://127.0.0.1:8080?titleId=597447&weekday=sat


콘솔창에 다음과 같이 나옵니다. 



2. post 값 구하기 

    post는 form 이 필요하기 때문에 html 파일이 필요합니다. 


server.js 소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span style="font-size: 10pt;">var http = require("http");
var fs = require("fs");
 
http.createServer(function(req, res) {
     if(req.method == 'POST'){
        req.on('data', function (data) {
            console.log(data.toString());
        });
     }
     fs.readFile(__dirname + '/'+ req.url +'.html', function (err, data) {
            res.writeHead(200, { 'Content-Type': 'text/html'});
            res.end(data);
        });
}).listen(8080, function(){
    console.log("server running");
});
</span>


post.html 파일 소스

<html>

    <head>

        

    </head>

    <body>

        <form method="post">

            <input type="text" name="id"/>

            <input type="password" name="password"/>

        

            <input type="submit"/>

        </form>

    </body>

</html>


해당 파일을 실행후 브라우저에 http://127.0.0.1:8080/post  로 접속 후 form 에 데이터를 넣은후 제출 버튼을 눌러주면 서버의 콘솔에 해당 값이 찍힙니다. 



출처: http://uiandwe.tistory.com/953


반응형
,
반응형

iframe에 삽입되는 내용에 따라 iframe의 사이즈가 자동으로 변경되는 소스.



두가지의 조건
1. 같은 서버내의 페이지를 iframe으로 삽입하는 경우.
2. 타 사이트의 페이지를 iframe으로 삽입하는 경우.

[같은 서버내의 페이지를 삽입하는 경우]


1. 부모페이지에서 해결하는 방법



<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function resizeIframe(fr) { 
                fr.setExpression('height',aaa.document.body.scrollHeight); 
                fr.setExpression('width',aaa.document.body.scrollWidth); 

//--> 
</SCRIPT> 
<iframe frameborder="0" id="aaa"  scrolling="no" src="xxx.htm" width=650 onload="resizeIframe(this)"></iframe>



2. iframe으로 삽입되는 페이지에서 해결하는 방법



아이프레임으로 삽입되는 페이지의 최하단에 아래내용 삽입
<script>
         document.body.scrollIntoView(true);
         parent.document.all.aaa.height = document.body.scrollHeight; 
</script> 

부모페이지의 아이프레임 id를 aaa로 맞춤.
<IFRAME id=aaa src="xxx.htm" frameBorder=0 width=0 scrolling=no height=0></IFRAME>



[다른 서버(사이트)의 페이지를 삽입하는 경우]


  1. 물론 다른사이트의 페이지 내용을 수정할수(관리권한이) 있어야 한다.

<부모페이지>
<iframe src="http://www.aaa.com/aaa.htm" frameborder="0" id="aaa" scrolling="no"></iframe>

<타서버 불려올 페이지(http://www.aaa.com/aaa.htm)>
<head>태그사이에 아래의 스크립트 삽입

<script language='JavaScript' type='text/javascript'>
<!--
 function init(){
  var doc = document.getElementById("infodoc");
  doc.style.top=0;
  doc.style.left=0;
  if(doc.offsetHeight == 0){
  } else {
    pageheight = doc.offsetHeight;
    pagewidth = doc.offsetWidth;
    parent.frames["aaa"].resizeTo(pagewidth,pageheight);
  }
 }
//-->
</script>

body의 onLoad태그로 위 스크립트를 불러옴
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init();">

본문내용을 지정한 id로 감싼다.(infodoc)
<div id='infodoc'>
.
.
.
내용
.
.
.
</div>
</body>


출처: http://horangi.tistory.com/4


반응형
,