'프로그램/js'에 해당되는 글 5건

출처 - http://b.mytears.org/2009/03/1848)



HTTP(Hyper text transfer protocol)로 페이지를 요청하기 위해서는 다음과 같은 방법을 사용합니다.

METHOD URI VERSION

많은 옵션이 붙을 수 있지만 이정도가 페이지를 요청하기 위한 기본 쿼리라고 생각하시면 됩니다. METHOD는 ‘GET’, ‘POST’, ‘HEAD’, ‘OPTION’ 정도가 될 수 있겠고, URI는 PATH + QUERY STRING이라고 생각하시면 되겠습니다.

자 그럼 이걸 응용해 봅시다.

GET /index.php HTTP/1.1

위 코드는 /index.php 페이지를 HTTP/1.1 프로토콜을 사용해서 호출하겠다는 얘기입니다. 여기에 값을 넘겨주려면 QUERY STRING을 사용하면 됩니다.

아래와 같이 var1이란 변수에 1234, var2란 변수에 2345란 값을 담아서 페이지를 호출해봅시다.

GET /index.php?var1=1234&var2=2345 HTTP/1.1

간단하죠. 단 URI의 길이에는 제약이 있기 때문에 이런 방식을 사용할 경우 긴 데이터를 넘겨줄 순 없습니다.

긴 데이터를 넘겨줄 때는 POST를 사용하게 되는데요. POST를 사용해서 값을 넘겨줄 때는 아래와 같은 코드를 사용하게 됩니다.

POST /index.php HTTP/1.1 Content-type: application/x-www-form-urlencoded Content-length: 19 var1=1234&var2=2345

Content-length는 넘겨줄 값의 길이를 의미합니다. 간단하죠. 뭐하튼 값을 넘겨주는 데는 GET과 POST 방식을 사용할 수 있고, GET 방식에서는 값을 URI에 붙여서 보내준다는 얘기를 하고 싶었습니다.

그런데 브라우져마다 GET 방식으로 값을 넘겨줄 때 사용하는 인코딩이 동일하지가 않네요. 예전에 ‘웹 서비스와 UTF-8‘이란 글에 적어놨듯이 RFC2718에서는 URI를 UTF-8로 인코딩할 것을 권고하고 있습니다.

그렇다면

  1. euc-kr로 인코딩된 페이지에서 다른 페이지로 값을 GET 방식을 사용해서 넘겨준다면 어떤 인코딩을 사용해야할까요?
  2. utf-8로 인코딩된 페이지에서 다른 페이지로 값을 GET 방식을 사용해서 넘겨준다면 어떤 인코딩을 사용해야할까요?
  3. 만약 url에 직접 query string을 붙여서 페이지를 요청할 경우에는 어떤 인코딩을 사용해야할까요?

URL을 정의하고 있는 RFC2396에서는 URI를 PATH+QUERY 로 정의하고 있고, 이를 확장한 RFC2718에서 URI를 UTF-8로 인코딩하자고 했으니 위의 모든 경우에서 URI는 utf-8로 인코딩되어야 맞습니다. (단 1번의 경우에는 %인코딩을 사용해서 값을 Escape시켜줘야겠죠.)

하지만 재앙의 근원 Internet explorer에서는 3번과 같은 상황일 때 query string을 로컬 인코딩으로 인코딩해버립니다. [1] ajax를 사용할 때 생기는 문제에 비교하면 이 정도는 애교입니다.

  1. utf-8 페이지에서 ajax + get으로 값을 전송합니다. 어떤 인코딩으로 값이 전송될까요?
  2. euc-kr 페이지에서 ajax + get으로 값을 전송합니다. 어떤 인코딩으로 값이 전송될까요?
  3. utf-8 페이지에서 ajax + post로 값을 전송합니다. 어떤 인코딩으로 값이 전송될까요?
  4. euc-kr 페이지에서 ajax + post로 값을 전송합니다. 어떤 인코딩으로 값이 전송될까요?

3, 4번의 경우 Internet explorer를 쓰건 safari, firefox등을 쓰건 모두 utf-8로 값이 전송됩니다. (이유는 묻지 마세요. 안찾아봤습니다.) 2번의 경우는 모든 경우에 euc-kr로 값이 전송되구요.

하지만 1번의 경우 분명 utf-8로 값이 전송되어야 할 것 같지만 Internet explorer는 euc-kr로 값을 전송합니다. 상식적으로도 이해가 가질 않지만 그렇게 동작하고 있습니다.

덕분에 utf-8로 값이 넘어왔다고 가정한 프로그램은 오동작을 하게 될 수 밖에 없습니다. 전 정말 Internet explorer를 이해할 수가 없습니다.

상식이 통하는 세상에 살고 싶습니다. Internet explorer 노력하세요.

'프로그램 > js' 카테고리의 다른 글

ajax와 인코딩문제  (0) 2015.03.27
javascript object 개념.  (0) 2015.03.27
jquery map  (0) 2015.03.27
slice()를 이용한 array copy  (0) 2015.03.27
jquery autocomplete  (0) 2015.02.22
블로그 이미지

종환 Revolutionist-JongHwan

github.com/alciakng 항상 겸손하자.

댓글을 달아 주세요

우선 .. 자바스크립트에 array 가 있을까 ?

정답은 없다 이다..

alert(typeof([])); 

를 실행하면 object를 출력한다.


아래는 자바스크립트의 간단한 기초(modern web 책을 참고하여 직접작성)



1.

객체 생성 방법.



//object 객체로 만들고 싶을때 

1)var foo = {};

2)var foo = new Object();



//사용자 정의 객체를 만들고 싶을때


1) 생성자함수(클래스)를 쓴다


ex)   function Student(name, korean, math, english, science){

this.이름 = name;

this.국어 = korean;

this.수학 = math;

this.영어 = english;

this.과학 = science;


//메서드

this.getSum = function(){

return this.국어+this.수학+this.영어+this.과학;

};

this.getAverage = function(){

return this.getSum()/4;

};

}


var student = new Student('윤하린',96,98,92,98).;


위와 같이 선언하여 사용한다.  그런데 이사용자 객체역시 object  객체의 상속을 받는 객체이다.

그런데 이와같이 클래스를 선언하게 되면 찍어낼때 마다 함수를 중복해서 찍어낸다.

그래서 자바스크립트는 프로토타입 공간을 만들었다. 프로토타입은 생성자 함수로 생성된 객체가 공통으로 가지는 공간이다. 

 function Student(name, korean, math, english, science){

this.이름 = name;

this.국어 = korean;

this.수학 = math;

this.영어 = english;

this.과학 = science;

}

이렇게 선언한뒤 prototype 객체를 이용하여 메소드를 추가한다.  ex) Student.prototype.func = function(){};

자바스크립트의 모든 함수는 prototype객체를 가진다. 


2.

그렇다면 javascript에서 기본 자료형과 객체의 차이점은 무엇일까?


자바스크립트에서 기본 자료형과 객체는 거의 차이점이 없다.

기본 자료형도 분명 존재하지만 var number = 23;

와 같이 선언하고 number. 와 같이 입력하면 기본자료형으로도 객체의 속성과 메서드를 사용할 수 있게 되며,

이 속성과 메서드를 사용하게 되는 순간 자동으로 객체로 변환된다. 


3.  

Object 객체란 무엇일까?


자바스크립트 최상위 객체이다 . 

위에서 설명한 생성방법으로 생성한다.

자바스크립트의 모든 기본 내장 객체는 Object 긱체를 기본으로 만들어진다.


4.

Array 객체란 ? 


여러가지 자료를 쉽게 관리할 수 있게 도와주는 객체이다 .


생성방법은 

var array1 = [52,44,22,...];

var array2 = new Array();


이렇게 생성한다.


ECMAScript5 Array 객체는 보다 특별한 함수를 가지는데 대표적인 함수로는..


forEach()가 있다. for in 반복문 보다 더 확장적으로 사용가능한 반복문이다. 

ex) array.forEach(function(element,index,array){

}); 


그런데 자바스크립트에는 연관배열이라는 것도 있다.

var array = new Array();


array["one"] = 2;

이런식으로 오름차순 숫자  인덱스가 아닌 문자를 인덱스로 사용하는 배열이다.


5. json 객체

   자바스크립트 객체의 형태를 가지는 문자열이다.


  JSON.stringfy()  --> 자바스크립트 객체를 JSON 문자열로 변환한다.

  JSON.parse() --> JSON문자열을 자바스크립트 객체로 변환한다. 


'프로그램 > js' 카테고리의 다른 글

ajax와 인코딩문제  (0) 2015.03.27
javascript object 개념.  (0) 2015.03.27
jquery map  (0) 2015.03.27
slice()를 이용한 array copy  (0) 2015.03.27
jquery autocomplete  (0) 2015.02.22
블로그 이미지

종환 Revolutionist-JongHwan

github.com/alciakng 항상 겸손하자.

댓글을 달아 주세요

jquery map

프로그램/js 2015.03.27 17:01

기본 array를 새로운 array로 mapping 하는 함수.


공식홈에서는 이렇게 가이드를 하고 있다.

  • jQuery.map( array, callback )

    • array
      Type: Array
      The Array to translate.
    • callback
      Type: FunctionObject elementOfArray, Integer indexInArray ) => Object
      The function to process each item against. The first argument to the function is the array item, the second argument is the index in array The function can return any value. A returned array will be flattened into the resulting array. Within the function, this refers to the global (window) object.
  • version added: 1.6jQuery.map( object, callback )

    • object
      Type: Object
      The Object to translate.
    • callback
      Type: FunctionObject propertyOfObject, String key ) => Object
      The function to process each item against. The first argument to the function is the value; the second argument is the key of the object property. The function can return any value to add to the array. A returned array will be flattened into the resulting array. Within the function, this refers to the global (window) object.

이를 설명하면 객체나 배열을 callback function의 첫 번째 인자로 주고  index or key의 두번째 인자를 활용하여  새로운 배열을 만들어 낼 수 있다. 


예를 들어 ..


var arr = [ "a", "b", "c", "d", "e" ];

arr = jQuery.map( arr, function( n, i ) {
return ( n.toUpperCase() + i );
});

이렇게 연산을 하면 리턴 배열은 

A0, B1, C2, D3, E4

이러한 결과 값을 가지게 되는 것이다.

'프로그램 > js' 카테고리의 다른 글

ajax와 인코딩문제  (0) 2015.03.27
javascript object 개념.  (0) 2015.03.27
jquery map  (0) 2015.03.27
slice()를 이용한 array copy  (0) 2015.03.27
jquery autocomplete  (0) 2015.02.22
블로그 이미지

종환 Revolutionist-JongHwan

github.com/alciakng 항상 겸손하자.

댓글을 달아 주세요

slice 메소드는 

보통은 array.slice(start index, end index)를 이용하여 원하는 array만 얻고자할 때 쓰이는 메소드인데

array.slice(0)으로 하면 0번 인덱스 부터 끝까지 복사하게 되어 배열 전체를 복사하는 결과를 가져 올 수 있다.

$.map과 성격이 유사하고 혼용해서 쓰면 되겠다.

'프로그램 > js' 카테고리의 다른 글

ajax와 인코딩문제  (0) 2015.03.27
javascript object 개념.  (0) 2015.03.27
jquery map  (0) 2015.03.27
slice()를 이용한 array copy  (0) 2015.03.27
jquery autocomplete  (0) 2015.02.22
블로그 이미지

종환 Revolutionist-JongHwan

github.com/alciakng 항상 겸손하자.

댓글을 달아 주세요

autocomplete  - 텍스트 입력창에 글자를 입력하면 recommend text 를 serve 해주는 것.


중요한 부분이 source 부분인데 recommend text 배열이라고 할 수 있다. 공식홈에서는 이렇게 가이드를 하고 있다


source Type: Array or String or FunctionObject request, Function response( Object data ) )

Default: none; must be specified
Defines the data to use, must be specified.

Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the sourceoption - look for one that matches your use case, and check out the code.

label 이라는 key가 text로 취급된다. source 옵션은 3가지가 있다. 

Multiple types supported:

  • Array: An array can be used for local data. There are two supported formats:
    • An array of strings: [ "Choice1", "Choice2" ]
    • An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
    The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

우선 array는 string의 모임으로 구성 될 수도 있고 label key와 value 키를 가진 객체의 모임으로 구성될 수도 있다.
라벨 속성은 recommend 되는 텍스트이고 value는 눌렀을때 input에 입력되는 값이다. 만약 이렇게 key를 주지 않고 그냥 단어의 나열로 구성하면 두 속성을 모두 사용 하게 된다. 

  • String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.
  • Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:
    • request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
    • response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

    When filtering data locally, you can make use of the built-in $.ui.autocomplete.escapeRegex function. It'll take a single string argument and escape all regex characters, making the result safe to pass to new RegExp().


ajax를 이용하여 source를 구성할 때 function을 많이 쓴다.

request object를 이용해 http post로 input text를 서버에 전송한다. 이때 서버에서 input text는 term property로 구분된다.

예를 들어 node.js에서는 req.body.term 으로 받을 수 있다.

response object는 user에게 suggest할 data object이다. 이 data object는 request object에서 post로 보낸 provied term에 의해 filter된다. 


그럼 ajax를 이용한 예제를 보겠다 .


$('#country_name').autocomplete({
		      	source: function( request, response ) {
		      		$.ajax({
		      			url : 'ajax.php',
		      			dataType: "json",
						data: {
						   name_startsWith: request.term,
						   type: 'country'
						},
						 success: function( data ) {
							 response( $.map( data, function( item ) {
								return {
									label: item,
									value: item
								}
							}));
						}
		      		});
		      	},
		      	autoFocus: true,
		      	minLength: 0      	
		      });

위와 같이 보낼 때 data에는 key값을 사용자가 직접 정해서 server로 보내고 있다.

이때 그냥 request를 보내게 되면 term키를 이용하여 서버에서 input text를 받아볼 수 있다.

success 할 경우 data object를 server에서 받아 $.map을 이용하여 label과 value를 직접 mapping 해주고 있다.


서버단 코드를 보겠다.


<?php
require_once 'config.php';

if($_GET['type'] == 'country'){
	$result = mysql_query("SELECT name FROM country where name LIKE '".strtoupper($_GET['name_startsWith'])."%'");	
	$data = array();
	while ($row = mysql_fetch_array($result)) {
		array_push($data, $row['name']);	
	}	
	echo json_encode($data);
}

?>

db 에서 LiKE를 이용하여 input keyword가 들어간 name을 추출하여 array로 만든뒤에 json으로 클라이언트에 보내고 있다..


필자는 서버단 코드를 database에 직접 접근 하지 않고 초기에 db를 한번만 접근하여 받아온 데이터를 redis store에 저장한 뒤 이에 접근 하는 방식으로 구현해보려고 하고있다. 

'프로그램 > js' 카테고리의 다른 글

ajax와 인코딩문제  (0) 2015.03.27
javascript object 개념.  (0) 2015.03.27
jquery map  (0) 2015.03.27
slice()를 이용한 array copy  (0) 2015.03.27
jquery autocomplete  (0) 2015.02.22
블로그 이미지

종환 Revolutionist-JongHwan

github.com/alciakng 항상 겸손하자.

댓글을 달아 주세요