자바스크립트를 사용하여 현재 자신 엘리먼트 요소가 동일 선상의 형제 요소들 사이에서 몇 번째 인덱스 값을 가지는지 확인하는 방법을 알아봅니다.# 몇 번째 요소인지 index 얻기이 방법은 제이쿼리의 index() 메소드와 동일한 결과를 가져오며 자바스크립트만을 사용하여 값을 얻어보려고 합니다. 아래의 함수 getIndex()를 봐주세요. 함수의 인자로 확인 할 엘리먼트를 넣으면 결과로 인데스를 숫자로 반환합니다.@ getIndex.js// Get a index number from siblings function getIndex(ele) { var _i = 0; while((ele = ele.previousSibling) != null ) { _i++; } return _i; }어떻게해서 현재 순서 값을 얻는지는 아래와 같은 프로세스를 가지게됩니다.1. 0의 값을 가지는 변수 _i를 선언2 . while 루프를 사용하여 현재 요소의 이 전 요소를 찾음3. 이 전 요소
2019-02-20 01:42:57웹페이지에서 테이블 또는 리스트 형태의 그리드를 UI로 구현하는 경우가 많습니다. 예를들어 어떤 어드민 사이트에서 회원 리스트를 보여주는 경우 이름, 나이 등의 정보를 리스트해 보여줄 수 있죠.# 만약 해당 row가 몇 번째 해당하는지 알려면?리스트에서 홍길동이란 이름을 가진 사람을 찾아야합니다. 해당하는 엘리먼트가 몇 번째인지 알려면 어떻게할까요? 엘리먼트가 부모로부터 몇번째 요소인지 확잊해야겠지만 table 태그를 사용하는 경우라면 rowIndex를 사용할 수 있습니다.! rowIndex 사용하여 해당 row index값 얻기table 요소의 tr 태그... 즉 row에 해당하는 엘리먼트에 적용할 수 있으며 rowIndex는 해당하는 Index값을 반환하게됩니다. 이때 위에서부터 0부터 1, 2, 3 ... 순서로 반환합니다. 그럼 아래에서 더 자세히 예제로 알아봅니다.회원 리스트를 예로 들어봅니다. 만약 아래와 같이 회원들의 이름이 존재하는 table 태그가 있습니다. 여기서
2018-06-20 19:39:16NoSQL 역시 다른 Database, RDBMS처럼 인덱스 설정이 필요합니다. 그렇지 않으면 Slow Query 등 검색, 소팅 단계에서 성능에 큰 차이가 발생할 수 있습니다. 아래는 MongoDB에 인덱스를 설정하는 방법과 조회, 추가 및 관련 예제를 자세히 알아봅니다.# 인덱스 조회, 확인하기, 인덱스를 조회하기 위해서 getIndexes()를 사용합니다.> db.collection.getIndexes()아래와 같이 나타납니다.[ { 'v': 1, 'key': { '_id': 1 }, 'name': '_id', 'ns': 'collection' }]# 인덱스 추가하기, createIndex()원하는 필드명을 사용하여 인덱스를 설정, 추가할 수 있습니다. 인덱스를 설정, 추가하는 방법은 아래와 같이 문법을 적용합니다.db.collection.createIndex(keys, options)키에는 필드명과 함께 오름 또는 내림차순에 따라서
2018-02-28 09:41:33자바스크립트의 배열이 특정값을 가지고 있는지 확인하는 방법. indexOf, find, includes 메소드들에 대하여 알아봅시다. 이 메서드들은 모두 배열에서 특정 문자열을 검색할 수 있는 찾기 기능을 가지고 있습니다.indexOf() // 찾은 위치를 index로 반환includes() // 불리언으로 여부를 판단하여 반환find() // 첫번째 배열값만 반환위 두개의 메소드 indexOf() 그리고 includes()는 해당값을 인자로 넘겨 그 결과를 반환하는 간단한 방법이니다. 그럼 아래 예제를 참고하세요.find() 메소드는 반드시 callback을 매개변수로 사용하여야합니다.Ex)testArray.find(callback);
2017-04-27 17:35:58인덱스 테이블에 대하여 알아보겠습니다. 인덱스 테이블(Indexes Table)이란 무엇일까요? 인덱스 테이블은 데이터베이스를 검색하기 위해 사용할 수 있는 특별한 테이블로써 데이터베이스 검색의 속도를 빠르게(?) 도와주는 역할을 합니다. 즉 데이터베이스를 사용하는데 있어 성능에 대한 문제 또는 개선을 위해 가장 먼저 확인하는 부분이 바로 인덱스 테이블입니다.인텍스 테이블은 테이블의 검색 속도를 빠르게 할 수 있는 별도의 테이블입니다. 이는 저절로 생성되지 않으며 관리자 또는 사용자에 의해 별도로 생성하거나 삭제할 수 있습니다. 이런 인덱스 테이블은 매우 간단한 방법을 통해 생성할 수 있으며 이에 대한 방법은 아래에 다뤄보도록 하겠습니다.인덱스 테이블은 간단하게 예를들어 책의 목차를 만드는 과정과 동일합니다. 만약 책에 목차가 있다면 원하는 결과를 더 쉽게 찾을 수 있을 것입니다. 이처럼 유용한 인덱스(Index)를 간단하게 설명하겠습니다.# 인덱스(Index) 테이블이란 무엇인가-
2016-07-08 11:12:11만약 자신의 웹사이트에 유투브 영상의 코드를 추가하여 보여주려고한다면? 이 경우 해당하는 동영상 코드를 iframe 태그를 사용하여 넣을 것이다. 그런데 이 태그를 넣었을때 정상적으로 동작한다면 Okay!이지만 정상 동작하지 않는 문제가 나타날 경우가 있다. 나타나는 증상은 아래와 같이 발견할 수 있다.! Youtube 영상 추가시 발생하는 이슈iframe 태그와 다른 태그가 겹치는 부분에 있어 z-index의 css 속성이 적상적으로 적용이 되었음에도 iframe태그가 우선되어 무조건 상위에 표시되어 나타나는 문제이와 같은 현상은 익스플로러(Internet Explorer, IE)에서 발견되며 다른 브라우저는 이런 현상이 나타나지 않을 수 있다. 이 경우 해결하기 위해서는 어떻게 해야할까?! 유투브 영상에서 z-index 문제가 나타나는 경우 해결방법일단 이 현상은 왜 나타날까? 그 이유는 유투브(youtube) 동영상 콘텐츠를 페이지에 넣을때 iframe내의 영상 콘텐츠가 무조건
2015-12-17 11:13:00제이쿼리를 사용하여 특정 태그요소가 현재 몇번째 해당하는 요소인지 알아내는 방법으로 index() 메소드를 사용할 수 있습니다. index()를 사용하면 처음을 기준으로 몇번째 해당하는지 알려주게 됩니다. 간단한 문법은 아래와 같습니다.$('선택요소').index();# 몇번째 요소인지 왜 필요할까요? 언제 사용할 수 있을까요?가장 많이 사용하는 이유 중 하나로 해당요소를 제어하기 위해서입니다. 보통 클래스명 또는 아이디 값을 사용하여 제어하지만 제어할 요소가 많거나 위치가 변하는 경우 위치를 알아내어 제이쿼리 요소로 제어하는 방법이 많이 사용됩니다. 이때 선택자 메소드인 eq()를 함께 사용할 수 있습니다.간단한 예제로 좌측 컬럼에 100개의 스위치는 우측 컬럼 100개의 글을 순시는 기능을 제공한다고합시다. 이 경우 좌측과 우측 요소들은 서로 대응하기 때문에 좌측 위치를 통해 우측 요소를 제어할 수 있겠죠. 아래 예제를 봐주세요.# 제이쿼리 index() 예제보기아래 예제를 봐주
2015-12-09 17:53:16자바스크립트에서 원하는 문자열을 찾거나 배열의 값을 찾는 강단한 방법으로 indexOf() 함수가 사용됩니다. 아래에서 더 자세하게 알아봅니다.# 자바스크립트 indexOf() 알아보기내장함수 indexOf() 함수는 문자열에서 원하는 문자열을 검색하여 찾거나 아니면 배열에서 원하는 특정 배열값의 존재여부 등을 확인할 수 있습니다. 배열의 경우 위치값을 index로 반환하는 함수입니다.그럼 indexOf()는 어떻게 사용할까요? 사용 방법은 매우 간단하며 아래와 같이 함수의 매개변수로 원하는 값, 찾을 문자열을 넘겨줍니다. 아래의 방법을 보세요."문자열".indexOf("찾을 문자")특징이라면 문자타입(String) 뿐만 아니라 배열(Array)에서도 사용가능하다는 점입니다. 매우 유용하죠. 또한 만약 그 값이 존재하는 경우 해당 위치를 알려준다는 점입니다. 그럼 아래 예제를 참고하세요.! indexOf() 예제소스 코드보기 아래는 간단한 indexOf() 예제입니다. 문자열 중에서
2015-06-22 15:31:03select 태그에서 선택된 값이 있는 경우 몇번째 해당하는지 값을 알려면 어떻게 알 수 있을까요? 아래 방법은 선택된 값을 얻는 자바스크립트 방법입니다.# selectedIndex를 사용한 select 태그의 선택값 알아내기select 태그에서 선택된 값의 위치 또는 순서 index를 알려면 selectedIndex 속성을 사용합니다. 이 속성은 선택된 태그의 index 넘버를 반환해줍니다. 간단한 사용 방법은 아래와 같이 사용합니다!selectElement.selectedIndex; 참고로 선택된 <option> 태그에 적용된 값을 알려면 element.value 프로퍼티를 사용하여 그 값을 알 수 있죠. 하지만 index 값인 순서를 알아야한다면 selectedIndex를 사용합니다. 간단하게 선택된 값의 해당위치를(순서값) 불러옵니다. 그럼 아래 예제를 참고하세요.# select 태그의 selectedIndex 예제보기아래 select 태그가 값을 가지는 경우 이 값의 ind
2014-01-12 10:04:30
