안녕하세요. 오늘은 자바스크립트로 요소의 위치를 구하는 방법에 대해 포스팅 합니다.

요소의 위치를 구할 때, 생각해야할 개념이 있습니다. 이 개념은 자바스크립트 뿐만 아니라, 모든 화면 영역에서 공통으로 쓰이는 개념이라 생각하시면 됩니다.

해당 개념은 크게 절대위치와 상대위치 2가지로 설명 됩니다.

좌표를 처리하는 것은 생각보다 까다로우며, 단순히 API 하나로 처리되지 않습니다. 따라서 좌표를 잘 처리하기 위한 개념을 설명하고, 그 개념을 토대로 좌표를 구하는 방법에 대해 설명 할 예정입니다.

또한 Y값 기준으로 내용을 전개하며, 해당 개념을 그대로 X값을 구하시면 됩니다.

절대위치 와 상대위치란?

절대위치는 시작점으로 부터 떨어진 크기 값입니다. 중요한건 시작점이 어디인지 아는것이 매우 중요합니다. 따라서, 자바스크립트의 절대위치의 시작점은 어디서 부터 인지 후에 설명 할 예정입니다.

상대위치는 어떤 기준으로 부터 떨어진 크기 값입니다. 어떤 기준은 시작점도 될 수 있으며, 시작점이 아닌 다른 곳을 기준으로 삼을 수도 있습니다. 마찬가지로 자바스크립트는 어떤 기준을 어떻게 세우는지를 후에 설명 할 예정입니다.

자바스크립트의 절대위치 와 상대위치의 기준

해당 그림의 회색 네모 부분은 컨텐츠 길이를 의미합니다. 너무 길이서 브라우저에서 스크롤을 하면서 봐야 합니다. 크롬 브라우저의 하얀 네모부분은 Viewport 라고 합니다. 우리가 자주 쓰는 window 객체의 화면 API의 기준이 되는 부분입니다. 또한 그림에서 Hello World!! , Hello JavaScript!! 문자 요소가 존재하며, 크롬 브라우저는 스크롤 되어,컨텐츠의 Hello World!! 요소를 지나 현재 Hello JavaScript!!! 요소를 보여주고 있는 상태입니다. 해당요소의 절대위치 와 상대위치를 구하는 방법을 통해 설명할까 합니다.

해당 그림은 아래 설명에서 전반적으로 계속 사용될 예정입니다.

창을 2개 켜서 해당 그림이랑 같이 읽는걸 강력하게 추천합니다.




자바스크립트의 절대위치의 시작점은 그림의 컨텐츠의 시작점을 의미 합니다.

따라서, Hello World!!의 요소와 Hello JavaScript!!의 요소의 절대좌표는 컨텐츠 시작점으로 떨어진 거리를 의미 합니다. 즉 그림의 1번 길이라 볼 수 있습니다.

자바스크립트의 상대위치의 어떤 기준은 누굴 선택하느냐 문제입니다. 여러가지가 있지만, 해당 예시는 그림의 브라우저가 보여주는 스크롤된 컨텐츠 시작 부분 즉, Viewport 의 시작지점을 기준으로 삼는다고 가정하면 그림의 2번 길이라 볼 수 있습니다.

자바스크립트로 상대위치 구하기

상대위치 구하는 방법부터 기술하는 이유는 절대위치를 구하기 위해서는 상대위치를 이용해서 구해야 하기 때문입니다. 또한 절대위치는 콘텐츠의 시작 기준이므로, 음수 값은 잘 나오지 않는 반면 상대위치는 기준이 천차만별이므로, 음수 값이 빈번하게 나올 수 있습니다.

앞서 언급한대로 상대위치는 어떤 기준이 매우 중요합니다. 준비한 예시는 2가지의 기준으로 설명합니다.

Viewport의 시작지점 기준

해당 자바스크립트 API는 getBoundingClientRect 이며 예시는 아래와 같습니다.

const target = document.getElementById('target'); // 요소의 id 값이 target이라 가정
const clientRect = target.getBoundingClientRect(); // DomRect 구하기 (각종 좌표값이 들어있는 객체)
const relativeTop = clientRect.top; // Viewport의 시작지점을 기준으로한 상대좌표 Y 값.

예시 그림의 2번 길이를 기준으로 만약 Hello World!! 요소라면 음수 값이 나오며 Hello JavaScript!! 요소라면 양수 값이 나올 것 입니다.

프로그래밍에서 화면 좌표값은 화면 왼쪽 끝을 기준으로 (0,0)

X값은 오른쪽 방향이 양의 값, 왼쪽 방향이 음의 값이며

Y값은 아래방향이 양의 값, 위 방향의 음의 값입니다.

부모 요소의 시작지점 기준

조금 복잡합니다. 그 이유는 부모가 포지셔닝 정책이 무엇이냐가 중요합니다. 만약 부모가 position: relative 정책이라면, 부모 요소안의 자식 요소의 상대위치는 offsetTop API를 사용하면 됩니다. 하지만, 부모의 포지셔닝이 relative가 아니라면, 해당 API는 부모 요소기준이 아닌 상위 요소의 포지셔닝을 계속 탐색하여 relative가 있는 부모를 기준으로 좌표값을 계산합니다. 만약 자식 요소의 상위 요소들이 전부 relative 포지셔닝이 아니라면, 결국 offsetTop API는 컨텐츠의 시작지점 즉, 절대위치의 값을 리턴하게 됩니다.

정리하자면 offset API 시리즈는 부모의 포지셔닝 정책에 따라 절대좌표 or 상대좌표가 나올 수 있으므로, 조심해서 써야 합니다.

offset API 시리즈는 offsetTop, offsetLeft, offsetWidth, offsetHeight 등이 있습니다.

그래서 부모 요소를 기준으로한 상대 위치는 부모 요소의 절대 위치를 구한 후, 자식 요소의 절대위치를 구해 두 값의 연산을 통해, 구하는 것이 가장 안전한 방법이라 할 수 있습니다.

그 방법은 아래의 자바스크립트로 절대좌표 구하기 섹션을 먼저 진행 한 후, 마지막 섹션의 예시로 설명 할 예정입니다.

자바스크립트로 절대좌표 구하기

대부분 offset API로 절대좌표를 구합니다. 하지만, 위에서 설명했드시 해당 요소의 상위 요소중 하나라도 포지셔닝이 relative면 offset API는 절대좌표가 아닌 relative한 부모 요소의 상대좌표값이 구해집니다.

따라서, 안전하게 절대좌표를 구하는 방법을 소개할까 합니다.

어떤 아이디어로?

위에서 소개한 Viewport 의 시작 지점을 통한 상대좌표를 이용할 예정입니다. 만약 Hello World!!의 절대좌표를 구한다고 한다면, 1번 길이를 구해야 합니다. 1번 길이는 아래와 같이 구할 수 있습니다.

1번 길이 = 3번길이 - 2번길이

즉, 스크롤된 컨텐츠의 길이와 Hello World!!의 Viewport 상대좌표를 연산하여 구하는 것입니다.

이해를 하셨다면 아래의 코드 예시를 참고해주세요.

const target = document.getElementById('target'); // 요소의 id 값이 target이라 가정
​
const clientRect = target.getBoundingClientRect(); // DomRect 구하기 (각종 좌표값이 들어있는 객체)
const relativeTop = clientRect.top; // Viewport의 시작지점을 기준으로한 상대좌표 Y 값.
​
const scrolledTopLength = window.pageYOffset; // 스크롤된 길이
//const scrolledTopLength = pageYOffset; // window 객체 없이 pageYOffset 메서드를 써도 가능하다.
const absoluteTop = scrolledTopLength + relativeTop; // 절대좌표

자바스크립트로 안전하게 절대좌표 와 상대좌표를 구하는 예시

상황마다 값이 다르게 나오는 코드 보다는 추가적인 계산을 좀더 하더라도 안전하게 값을 구할 수 있는 코드를 원할때가 있습니다. 위의 설명을 토대로, 상황에 상관없이 안전하게 값을 구할 수 있는 예시로 정리해봤습니다.

1. 요소의 절대좌표 구하기. 
const absoluteTop = window.pageYOffset + element.getBoundingClientRect().top;
2. Viewport의 시작지점을 기준으로한 상대좌표
const relativeTop = element.getBoundingClientRect().top;
3. 부모요소의 시작지점을 기준으로한 상대좌표
// 1번에서 안내한 절대좌표 구하는 방법을 함수로 구현
function getAbsoluteTop(element) {
    return window.pageYOffset + element.getBoundingClientRect().top;
}
​
const parentElement = element.parentElement;
const parentAbsoluteTop = getAbsoluteTop(parentElement);
const absoulteTop = getAbsoluteTop(element);
​
const relativeTop = absoluteTop - parentAbsoluteTop;

예시 말고도, 구하고 싶은 좌표값이 있다면 앞서 설명한 개념을 토대로 전부 구할 수 있다고 생각합니다.

생각보다 설명하기가 너무 어려웠으며... 그림 자료도 힘들게 만들었습니다. 저의 능력부족...

도움이 되셨다면, 공감 버튼과 광고 한번씩 만 눌러주시면 감사하겠습니다.

오늘 준비한 포스팅은 여기까지 입니다.

긴 글 읽어주셔서 정말 감사합니다.



저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript/TypeScript] ES6의 Map, Set 순회하기.  (0) 2018.10.08
[JavaScript/TypeScript] 숫자 여부 판단  (1) 2018.08.03
TypeScript에서 JQuery 라이브러리 사용하기.  (0) 2018.01.08
제이쿼리로 만드는 이미지 슬라이더(Image-Slider) (1)  (1) 2016.01.20
제이쿼리 브라우져 알아내기.  (0) 2016.01.02

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee



자바스크립트 E6(ES2015)가 나오면서, 편리한 자료구조인 ES2015-Collections( Map, Set )가 등장했습니다.


자바스크립트의 Map 과 Set의 API가 타 언어에 비해 조금 다르더라도, 


타 언어와 많이 다르지 않기 때문에 사용하는것이 어렵진 않습니다.


다만, 순회하는 방법이 조금 독특하기 때문에 이번 포스팅을 하게 되었습니다.



forEach 메서드로 순회하기


Map, Set에서의 forEach( [Map or Set].prototype.forEach )는 Array의 forEach( Array.prototype.forEach )와 비슷하지만 조금 다릅니다.


Array의 forEach가 받는 콜백함수의 인수는 순서대로 값, 인덱스, 배열 순으로 들어옵니다.


하지만 Map, Set에서의 forEach가 받는 콜백함수의 인수는 순서대로 값, 키, 오브젝트(Map or Set) 로 들어옵니다.


Set의 콜백함수는 key 대신에 value2가 들어옵니다. value2는 value와 똑같습니다. 

아래의 예시와 "개별 값으로 순회 하기" 설명을 확인해주세요.


[ Ex) JavaScript / TypeScript ]


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// JavaScript
const map = new Map();
const set = new Set();
 
// TypeScript
const map = new Map<string, string>();
const set = new Set<string>();
 
map.set('name', 'Mommoo');
map.set('age' , 'secret');
 
set.add('Mommoo');
set.add('secret');
 
map.forEach((value, key, mapObject) => console.log(key +' , ' +value));
// name , Mommoo
// age , secret
 
set.forEach((value1, value2, setObject) => console.log(value1 +' , '+ value2));
// Mommoo , Mommoo
// secret , secret
cs



for.. of 문법으로 순회하기


forEach 방법은 순회 중간에 continue, break, return 과 같은 루프 기능을 못쓰지만, 


ES6(ES2015)에서 새로나온 for.. of 문법을 사용하면, 가능합니다.


Map의 for.. of로 호출되는 값은 키와 벨류가 들어가 있는 배열 입니다.


Set의 for.. of로 호출되는 값은 벨류입니다.


[ Ex) JavaScript ] 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const map = new Map();
const set = new Set();
 
map.set('name', 'Mommoo');
map.set('age' , 'secret');
 
set.add('Mommoo');
set.add('secret');
 
for ( let item of map ) {
  console.log(item[0] +' , '+ item[1]);
}
// name , Mommoo
// age , secret
 
for ( let item of set ) {
  console.log(item);
}
// Mommoo
// secret
cs


TypeScript는 조금 까다롭습니다. 이유는 Iterable 속성 때문인데요. type iterable 속성때문에 for.. of가 컴파일이 되질 않습니다.


컴파일이 되지 않는 이유를 알고 싶으신 분은 다음 링크 2개를 참고해주세요.

http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-3.html#new---downleveliteration

https://stackoverflow.com/questions/37699320/iterating-over-typescript-map


위의 JavaScript와 같이 사용하고 싶다면 컴파일러(tsconfig) 속성인 --downlevelIteration 을 켜주셔야 합니다.


아래의 예시는 속성을 키지 않고, 대안으로 ES6(ES2015) Array API인 Array.from API를 사용하여 구현한 예제 입니다.


Array.from : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from


[ Ex) TypeScript ] 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const map = new Map<string, string>();
const set = new Set<string>();
 
map.set('name', 'Mommoo');
map.set('age' , 'secret');
 
set.add('Mommoo');
set.add('secret');
 
for ( let item of Array.from(map) ) {
  console.log(item[0] +' , '+ item[1]);
}
// name , Mommoo
// age , secret
 
for ( let item of Array.from(set) ) {
  console.log(item);
}
// Mommoo
// secret
cs



Iterator로 순회하기


ES2015-Collection인 Map과 Set는 순회가능한 Iterator입니다. ( IterableIterator )


2번째 방법인 For..of는 내부적으로 Iterator 속성을 이용하여 순회하게 됩니다.


이번에는 직접 Iterator 속성을 이용하여 순회하는 방법입니다. 


for.. of 와 마찬가지로 continue, break, return 과 같은 루프 기능을 사용 할 수 있습니다.


[ Ex) JavaScript / TypeScript ]


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
// JavaScript
const map = new Map();
const set = new Set();
 
// TypeScript
const map = new Map<string, string>();
const set = new Set<string>();
 
map.set('name', 'Mommoo');
map.set('age' , 'secret');
 
set.add('Mommoo');
set.add('secret');
 
const mapIterator = map.entries();
 
while ( !mapIterator.next().done ) {
  const [key, value] = mapIterator.next().value;
  console.log(key +' , ' +value);  
}
// name , Mommoo
// age , secret
 
const setIterator = set.entires();
 
while ( !setIterator.next().done ) {
  const [value1, value2] = setIterator.next().value;
  console.log(value1 +' , ' +value2);  
} 
// Mommoo , Mommoo
// secret , secret
cs



개별 값으로 순회 하기


지금까지 본것 처럼, ES2015-Collection은 IterableIterator로써, 두개의 값을 가집니다. 


Map은 각각 Key와 Value로써, 가치가 매겨지는 반면, Set역시 두개의 값을 가지지만, 두개의 값은 서로 같습니다. 


Set이 필요없는 값을 가지고 있는 이유는 상위 개념인 ES2015-Collection의 다형성 관점으로 구현했기 때문입니다.


위의 예제와 같이 entries 메서드를 호출하면 두개의 값을 가진 IterableIterator인 반면,


두개의 값중 개별 값을 가진 IterableIterator를 만들 수 있습니다. 


첫번째 값은 keys 메서드로 호출하고, 두번째 값은 values 메서드를 호출하여 IterableIterator 객체를 만든 후,


2번째 방법 ( for.. of ) 또는 3번째 방법 ( iterator )으로 순회하시면 됩니다.



[ Ex) JavaScript / TypeScript ]


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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// JavaScript
const map = new Map();
const set = new Set();
 
// TypeScript
const map = new Map<string, string>();
const set = new Set<string>();
 
map.set('name', 'Mommoo');
map.set('age' , 'secret');
 
set.add('Mommoo');
set.add('secret');
 
// 첫번째 값 ( 키 )
const mapSingleIterator = map.keys();
// 두번째 값 ( 벨류 )
const mapSingleIterator = map.values();
 
 
// 첫번째 값 ( 벨류 )
const setSingleIterator = set.keys();
// 두번째 값 ( 벨류 )
const setSingleIterator = set.values();
 
/** for of 방법 typescript는 Array.from 메서드로 변환 해야함. 2번째 방법 예시 참고 */
 
for ( let single of mapSingleIterator ) {
    console.log(single);
}
// name
// age
// ---- or -----
// Mommoo
// secret
 
for ( let single of setSingleIterator ) {
  console.log(single);
}
// Mommoo
// secret
 
 
/** iterator 방법 */
 
while ( !mapSingleIterator.next().done ) {
  const single = mapSingleIterator.next().value;
  console.log(single);  
}
// name or Mommoo
// age or secret
 
while ( !setSingleIterator.next().done ) {
  const single = setSingleIterator.next().value;
  console.log(single);  
}
// Mommoo
// secret
cs




준비한 내용은 여기까지 입니다.


읽어주셔서 감사합니다.



저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] 요소의 절대좌표 상대좌표 구하기.  (9) 2019.01.16
[JavaScript/TypeScript] 숫자 여부 판단  (1) 2018.08.03
TypeScript에서 JQuery 라이브러리 사용하기.  (0) 2018.01.08
제이쿼리로 만드는 이미지 슬라이더(Image-Slider) (1)  (1) 2016.01.20
제이쿼리 브라우져 알아내기.  (0) 2016.01.02

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee


보통 JavaScript에서 숫자 여부를 판단할때 많이 쓰이는 방법은 아래와 같습니다.


1
2
3
4
5
6
7
8
9
isNaN(100)     // false;
isNaN('100px') // true;
 
function isNumeric(data) {
  return !isNaN(data);
}
 
isNumeric(100)   // true;
isNumeric('str') // false;


NaN은 숫자가 될수 없는 문자열을 숫자로 만들때 발생하는데요. ex) ( Number( '100px' ) );


isNaN 함수는 NaN 값인지 아닌지의 여부를 알려주는 함수 입니다.


이로인해 isNaN 함수로 숫자를 판별 할 수 있습니다.


하지만, Type 엄격한 TypeScript에서의 isNaN 함수는 인자로 number 타입만을 받습니다.


string 데이터를 넣지 못하니.. 자바스크립트 처럼 isNaN 함수로만, 숫자 여부를 판단할 수 없습니다.


어떻게 하면 될까요? 정답은 Number 함수를 사용하면 됩니다.


Number 함수에 인자로 string을 넣었을시, 무조건 number 타입으로 리턴이 됩니다.


변환이 가능한 string값은 숫자 값이 올바르게 파싱되지만,


변환이 불가능한 string 값은 NaN이라는 number 타입으로 리턴이 됩니다.


이 개념을 가지고 아래와 같이 메서드로 작성할 수 있습니다..!



1
2
3
4
5
6
7
8
9
Number(100)     // 100;
Number('100px') // NaN;
 
public isNumeric(data : string) : boolean {
  return !isNaN(Number(string));
}
 
isNumeric('100')   // true;
isNumeric('100px') // false;
cs


저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] 요소의 절대좌표 상대좌표 구하기.  (9) 2019.01.16
[JavaScript/TypeScript] ES6의 Map, Set 순회하기.  (0) 2018.10.08
TypeScript에서 JQuery 라이브러리 사용하기.  (0) 2018.01.08
제이쿼리로 만드는 이미지 슬라이더(Image-Slider) (1)  (1) 2016.01.20
제이쿼리 브라우져 알아내기.  (0) 2016.01.02

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee


TypeScript에서 JQuery를 쓰기 위해서 필요한 환경셋팅에 대해 기술하려고 합니다.


먼저 저의 환경입니다.


개발툴 : IntelliJ IDEA

설치한 추가 환경 : node.js


만약 TypeScript를 까셨다면, 컴파일러를 위해 node.js는 설치를 하셨을겁니다.


이러한 환경에서, JQuery를 쓰기 위해서 어떻게 환경 설정을 하는지를 포스팅 합니다.


참고로 npm 기준입니다.


npm 터미널에 


npm install jquery --save;

를 입력합니다. 해당 명령어는 진행하는 프로젝트에 의존 설정을 해줍니다.


이 명령어만 진행했을시, 타입스크립트 파일 상단에


import $ from 'jquery';


이와 같이 import를 진행 할 수 있습니다. 


하지만, 다른 타입스크립트 파일은 import를 진행한 타입스크립트 파일을 참조를 못하는 현상이 있는데요. ( 해당 부분은 제가 이해도가 낮아서, 저의 개발환경에서 발생한 이슈대로 작성했습니다. )


이것을 해결 하려면, 아래의 명령어를 추가로 입력해야 합니다.


npm install @types/jquery --save-dev;


위의 명령어가 실행되면,  타입 스크립트 파일이 JQuery가 임포트된 타입 스크립트 파일을 참조할 수 있습니다.




타입스크립트에 JQuery 라이브러리를 사용하는 방법을 포스팅 했는데요.


중간에 설명했드시 제가 npm에 대한 개념이 많이 없는지라, 틀린 설명이 있을 수 도 있습니다.


감안해서 봐주시면 감사하겠습니다. 

저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript/TypeScript] ES6의 Map, Set 순회하기.  (0) 2018.10.08
[JavaScript/TypeScript] 숫자 여부 판단  (1) 2018.08.03
제이쿼리로 만드는 이미지 슬라이더(Image-Slider) (1)  (1) 2016.01.20
제이쿼리 브라우져 알아내기.  (0) 2016.01.02
JQuery 인덱스를 이용한 요소 찾기!  (0) 2015.11.24

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee

제이쿼리로 이미지 슬라이더를 만들어보자. 완성 결과물은 아래 동영상과 같다.




디자인은 신경쓰지 않았다, 원형 이미지가 왼쪽,오른쪽 버튼을 누를 시 이동하며 커지는 형식의 슬라이더이다. 


간단한 네비게이션도 제공하게끔 만들었다.(이미지 아래의 원형 index와 해당 이미지의 title)


이미지 슬라이더를 만들기 앞서, css와 html부터 살펴보자.


body 태그는 아래의 내용을 작성한다.


위의 태그까지 빠짐 없이 적었다면, 헤더(빨간색), 내용이 들어갈 컨테이너(파란색),

푸터(노란색), 푸터안에있는 네비게이션 공간(초록) 이렇게 4개로 공간이 분할된 걸 볼 수 있다.


태그를 동적으로 사용하기 위해 <div> 태그로 분할을 하였으며, 앞으로도 


동적 태그는 div태그만을 쓸 예정이다. css를 설명하자면, body 태그안에 있는 div 태그들의 class이름


에 맞춰 스타일을 정의 한 것이다. class이름을 쓸때는 css에 .(클래스이름) id이름을 쓸때는 #(id이름) 이렇게


접근하면 되겠다. 다음 포스팅에서 계속 이어 나가겠다.




저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript/TypeScript] 숫자 여부 판단  (1) 2018.08.03
TypeScript에서 JQuery 라이브러리 사용하기.  (0) 2018.01.08
제이쿼리 브라우져 알아내기.  (0) 2016.01.02
JQuery 인덱스를 이용한 요소 찾기!  (0) 2015.11.24
javascript & jquery 클릭이벤트 설정!!  (0) 2015.11.20

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee




  크로스 브라우징을 신경써서 웹페이지를 만들때, 


클라이언트의 브라우저가 어떤 것 인지 알아 내는 것은 무척 중요한 일이다.


제이쿼리 에서는 아래 메서드로 알아낸다.


$.browser.mise     :    익스플로러인 경우, true를 반환

$.browser.mozilla  :    파이어폭스인 경우, true를 반환

$.browser.safari    :    사파리, 크롬 인 경우, true를 반환

$.browser.opera    :    오페라인 경우, true를 반환


하지만, 이상하게 IE11(익스플로러) 버전에서는 위의 메서드가 실행이 되질 않는다..


스택오버플로우의 검색을 통해 IE의 반환값을 얻는 방법을 찾았다.


즉, $.browser.mise 가 null로 리턴 될때는, 아래의 코드로 반환하도록 코딩해야 겠다.


var ie = !!navigator.userAgent.match(/Trident.*rv\:11\./);




저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript/TypeScript] 숫자 여부 판단  (1) 2018.08.03
TypeScript에서 JQuery 라이브러리 사용하기.  (0) 2018.01.08
제이쿼리로 만드는 이미지 슬라이더(Image-Slider) (1)  (1) 2016.01.20
JQuery 인덱스를 이용한 요소 찾기!  (0) 2015.11.24
javascript & jquery 클릭이벤트 설정!!  (0) 2015.11.20

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee


오늘 포스팅 할 내용은 인덱스를 이용한 요소 찾기다. 


포스팅 하기 앞서 이러한 요소 찾기가 왜 필요한지 알아보자.


css로 정의하면 하나의 class명으로도 여러 태그들을 자신이 설정한 스타일로 맞출 수 있는 장점이 있다.


하지만 태그들을 각각 따로 어떠한 처리를 하고 싶다고 가정할 때,


어떻게 해야 할지 여간 난감한게 아니다. 하나의 방법으로는 id를 각각 써줘서 가져오는 방법도 있겠지만,


귀찮기도 하고 좋은 방법이 아니다.


그럴땐 .eq(index)란 요소찾기 메서드를 쓰면 된다.


아래 예시를 보자.



1


2


3


4

1,2,3,4 각각 같은 class인 태그다. 이러한 태그들을 다루고 싶을땐,


이와 같이 인덱스를 이용해 가져 올 수 있다.


위에서 언급한 id로 일일이 가져오는 방법 보다는 


후자와 같은 방법이 객체를 배열로 다 룰수 있어 활용성이 더 좋다.





저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript/TypeScript] 숫자 여부 판단  (1) 2018.08.03
TypeScript에서 JQuery 라이브러리 사용하기.  (0) 2018.01.08
제이쿼리로 만드는 이미지 슬라이더(Image-Slider) (1)  (1) 2016.01.20
제이쿼리 브라우져 알아내기.  (0) 2016.01.02
javascript & jquery 클릭이벤트 설정!!  (0) 2015.11.20

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee



- JavaScript




위의 코드를 <head> 내부안에 작성하면 되겠다.


실행되는 해당 플랫폼은 <body>안에 아래와 같이 작성한다.


<button id="btn1" onclick="button_click();">Button!!</button>




- JQuery


위의 코드를 역시 <head> 내부안에 작성하면 된다.


실행되는 해당 플랫폼은 <body>안에 아래와 같이 작성한다.


<button id="btn1">Button!!</button>

예시를 버튼으로 했지만, 어떠한 태그든 클릭이벤트를 넣을 수 있다.


제이쿼리의 #은 javascript의 getElementById를 의미하므로 id값을 가져온다.




저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript/TypeScript] 숫자 여부 판단  (1) 2018.08.03
TypeScript에서 JQuery 라이브러리 사용하기.  (0) 2018.01.08
제이쿼리로 만드는 이미지 슬라이더(Image-Slider) (1)  (1) 2016.01.20
제이쿼리 브라우져 알아내기.  (0) 2016.01.02
JQuery 인덱스를 이용한 요소 찾기!  (0) 2015.11.24

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee

+ Recent posts

티스토리툴바