Technique/Javascript
-
DOM 과 이벤트 처리Technique/Javascript 2016. 12. 30. 10:00
DOM브라우저 객체를 이용하는 것만으로도 브라우저 그 자체나 문서를 꽤 섬세한 부분까지 조작할 수 있지만, 실은 큰 문제가 있다.브라우저 객체는 어디까지나 브라우저 벤더가 독자적으로 구현한 객체로, 그렇다 할 만한 표준 규격이 존재하지 않는다.최근에는 꽤 호환성을 도모할 수 있게 되었지만, 브라우저 객체는 크로스 브라우저를 의식한 코드를 기술해야 한다는 것은 꽤나 번거러운 일이다.그래서 등장한 것이 DOM( Document Object Model )이다.HTML이나 XML과 같은 마크업 언어로 쓰여진 문서에 액세스 하기위한 표준적인 구조로 크로스 브라우저 환경에서도 호환성 높은 코드를 기술할 수 있다. DOM은 문서를 문서 트리로서 취급한다. 이름 그대로 문서에 포함되는 요소나 속성 텍스트를 각각 객체로..
-
Scope ( 스코프 )Technique/Javascript 2016. 12. 20. 10:55
Scope 프로그래밍 언어에서의 스코프의 기원을 찾기 위해선 우선 변수의 기원 부터 알아야한다.초창기 프로그래밍 언어에서의 변수라함은 어떠한 값을 가지고 있는 메모리의 주소를 나타내는 것 이었다.메모리의 주소라함은 0xFExx.... 등과 같이 사람에겐 매우 불친절한 표기법으로 이를 조금더 인간친화적으로 나타내기위해 도입된 개념이 바로 변수라는 개념이다. 변수는 메모리의 주소값을 프로그래밍을 하는 사람이 특정 이름으로 지정하여 저장해두는 값으로 프로그래밍 중 어디에서나 이 이름을 호출함으로서 특정 메모리에 저장되어 있는 값을 참조할 수 있게 되었다.그리고 같은 프로그래밍 내의 변수 이름의 중복된 사용을 방지하기 위해 프로그램 전체에서 사용하는 변수 값들을 모아두는 변수 리스트 같은 것을 작성하여 변수명의..
-
객체, PrototypeTechnique/Javascript 2016. 11. 20. 22:16
객체 javascript에서의 객체란 연상배열의 일환이라고 볼 수있다.객체는 성질 ( Property ) 와 기능 ( Method )로 이루어져 있다.성질은 : 데이터를 담는 그릇기능은 : 데이터를 조작하기 위한 기능이라 할 수 있다. -기본적으로 제공하고 있는 내장 객체 ( Built-in Object ) 와 사용자 정의 객체 ( Custom Object ) 가존재한다.내장형 객체의 경우 특별한 선언이나 정의를 하지 않고 바로 이용할 수 있는 점이 장점이다. -Prototype 자바스크립트에서의 프로토타입은 매우 중요한 개념중 하나이다.프로토타입은 내가 누구의 자손인가를 명시하는 것이다. 자바스크립트의 모든 객체는 자신을 생성한 객체 원형에 대한 숨겨진 연결을 갖는다. 이때 자기 자신을 생성하기 위해 ..
-
jQuery keyPress Event에 대하여Technique/Javascript 2016. 9. 9. 16:37
jQuery에는 키보드 관련 액션을 몇가지 제공하고 있다 - keyDown ( 키를 눌럿을 경우 반응, 1회성 ) - KeyUp ( 눌린 키가 되돌아 왔을 경우 반응, 1회성 ) - keyPress ( 키를 눌럿을 경우 반응, 지속성) 보통 자주 사용하는, 떠올리는 방법은 위 3가지정도 될 것 이라 생각한다. (뭐 본인은.. )어떤걸 사용해야 할지는 상황에 따라 판단하기 나름이지만,주의해야할 사항이 있다. 웹 프로그래밍을 하면 가장 자주 떠오르는 문제중하나가 바로 크로스브라우징 이다. 크로스 브라우징이란 브라우저별 대응이란 의미이며 이건 우리가 인터넷을 즐김에 있어 사용하는 브라우저들의 종류가 다양하기 때문에각각 브라우저에서 의도한 동작이 제대로 반응하는지를 체크하는 대응이라 볼 수 있다. HTML 이라..
-
클로져 기초Technique/Javascript 2016. 6. 20. 18:31
javascript에서 함수는 전부 클로져 입니다. 그럼 애초에 클로져는 무엇일까요 클로져( Clouser ) 클로져는 간단히 정의 하자면 [ 자신을 포함한 스코프에 있는 변수를 참조가능한 함수 ] 라고 말할 수 있습니다. 말로는 느낌이 확 오지 않을수 있지만, 코드를 하나씩 읽어 내려 간다면 입문으로서 클로져는 간단히 이해 가능합니다. 스코프( Scope ) 우선 javascript는 함수별로 스코프가 만들어 집니다. 스코프라는 것은 변수를 참조가능한 범위 입니다. 그 범위외에는 변수는 참조가 불가능합니다. 123456function func() { var value = 1; console.log(value);}func(); // 1console.log(value); // undefinedcs 클로져의..
-
[ jQuery ] select box actionsTechnique/Javascript 2016. 4. 6. 11:17
맨날 이거 뭐엿지 저거 뭐엿지 하면서 검색하다가 그냥 다모아 봤다... 1. jQuery로 선택된 값 읽기 $("#selectBox option:selected").val();$("select[name=name]").val(); 2. jQuery로 선택된 내용 읽기 $("#selectBox option:selected").text(); 3. 선택된 위치 var index = $("#test option").index($("#test option:selected")); 4. Add options to the end of a select $("#selectBox").append("Apples");$("#selectBox").append("After Apples"); 5. Add options to the s..
-
룬(luhn) 알고리즘 구현Technique/Javascript 2016. 2. 17. 19:25
대단한건 아니지만 오늘 룬 알고리즘을 구현 할 일이 생겼다.난 무식쟁이라 룬 알고리즘이란걸 오늘 알았다는건 안비밀...ㅎㅎ무튼 신용카드 번호를 검증할때 사용하는 알고리즘이다. 위키를 보면 금방 이해할걸 여기저기 구글링하다보니 머리만 아파졌고,결국 위키보고 이해했다..... 쉽게 말하자면 1. 신용카드 번호를 뒤에서 부터 세어( 즉 오른쪽에서 부터 세라는 말이다. ) 더하면서 진행 2. 2의 배수의 자리에 있는 수는 x2 를 한다.3. 2번 과정에서 x2 한 숫자가 10보다 크다면 10의 자리수와 1의자리 수를 더한수를 더한다.4. 위 과정이 끝낫다면 전체 숫자가 10의 배수라면 true 아니면 false 그림을 보자 위 카드번호는 테스트용 카드번호로 검색하면 나오는 비자카드 번호이다.오른쪽 부터 읽어 나..
-
[ 펌 ] jQuery 성능 최적화Technique/Javascript 2016. 1. 27. 11:58
원문 : htp://twittexperts.com/link/91711320501출처 : http://amoogi.azurewebsites.net/2951 jQuery에 관해 쓰는것은 오랜만이것 같다. 많은 다른 최적화 기사들을 쓰곤했지만, jQuery에 관해서는 그렇지 않았다. 하지만 애플리케이션이나 디자인쪽에서 아주 많이 사용되고 있기 때문에, 몇가지 jQuery관련 팁을 이야기 할 것이다. 이 기사는 최적화 팁을 공유시키고, 미래 애플리케이션에 활용할 수 있게 도움을 줄 것이다. 이 기사의 8가지 jQuery 최적화 팁과 트릭들은 jQuery 코딩에 도움을 줄 것이다. 1. 프로파일링(Profiling) 최적화에서 가장 중요한 것은 프로파일링이다. 우리는 firebug(firefox 디버깅툴)를 이용..