ES6이다 뭐다... 모든브라우저에서 작성한 코드가 동작을 안하는 경우 난감한 상황이 발생 할 수 있다.

그중에 하나가 javascript 작성시 중복제거 코드를 작성했는데 IE에서 동작하지 않는 경우를 볼 수 있다.

findindex나 화살표함수(ES6) 문법을 사용하는 코드의 경우 문제가 될 수 있다.

아직까지 IE가 사라지지 않았으므로.. jQuery를 이용한 중복제거 함수를 작성해 보았다.

지난 시간에 이어서 자식/형제요소 및 조합 선택자를 알아보도록 하겠습니다.

• 자식요소 선택자 ( > )

selector로 하나의 요소를 지정한 후 > 선택자를 사용하여 자식요소를 지정할 수 있습니다.  1개의 자식요소가 선택되어 집니다. 

$("#myObject > div");

• 자식요소 선택자(복수)

selector로 하나의 요소를 지정한 후 띄워쓰기 후 해당 선택요소를 지정합니다.

$("#myObject div");

$("#myObject div").eq(0); // div tag 요소 중 첫번째 자식요소

• 형제요소 선택자

지정된 myObject 요소의 형제요소를 선택할때 사용 할 수 있습니다. 

$('#myObject + div'); // #myObject 바로 다음 div를 선택합니다.


$('#myObject ~ div'); // #myObject 형제 div를 모두 선택합니다.
$('#myObject ~ div').eq(1);

• 조합 선택자

지난 시간 및 위에 소개된 선택자를 복합적으로 사용하여 요소를 지정할 수 있습니다. 

아래의 구성요소중 span #2를 찾을 경우 

<div id="myObject">
	<div> 1번 div </div>
    <div> 2번 div </div>
    <div> 
    	<span> span #1 </span>
        <span> span #2 </span>
    </div>
</div>

다음과 같이 구성하여 요소를 선택 할 수 있습니다. 

$("#myObject div span").eq(1)

jQuery에 대해서 업무 중 교육을 할 일이 생겨 정리합니다.

• jQuery를 왜 사용하는 것인가?

   jQuery는 Selector가 없다면 사용을 안 할 수도 있다 라는 생각이 될 정도로 편리한 Selector를 제공합니다. 

   CSS 선택자를 그대로 사용할 수 있어 코드 선택이 매우 간단합니다. 물론 document.querySelector   

   와 document.querySelectorAll이 있기도 하지만 모르는 사람이 더 많을뿐더러 이미 jQuery가 자리 잡은 상황이기

   때문에 jQuery가 개발하는 사람들에게는 더 친숙합니다. 

jQuery Selector를 사용함에 있어 몇 가지만 알아도 사용하는 데에는 큰 무리가 없습니다. 

• Id로 해당 Object 찾기(#)

단순히 #뒤에 아이디를 입력하여 해당 오브젝트를 선택할 수 있습니다.

//javascript
document.getElementById('objId');

//jQuery
$('#objId');

• class로 Object 찾기(.)|

단순히. 뒤에 해당 css class 명을 입력하여 해당 오브젝트를 선택할 수 있습니다. 이때 동일한 class가 여러 개인 경우

. eq(숫자)를 이용하여 해당 인덱스에 해당하는 오브젝트를 선택할 수 있습니다.

//javascript
document.getElementsByClassName('your_class_name');

//jQuery
$('.your_class_name');

// 4번째 오브젝트 선택 (0부터 시작)
$('.your_class_name').eq(3);

• tag로 Object 찾기

$() 안에 해당 tag를 입력하여 사용할 수 있습니다. 또한 여러 개의 동일한 tag가 존재하는 경우 eq()를 이용하여 해당 인덱스에 해당하는 오브젝트를 선택할 수 있습니다. 

//javascript
document.getElementsByTagName('table');

//jQuery
$("table");

//첫번째 table
$("table").eq(0);

• 속성으로 Object 찾기( [ ] )

해당 기능은 javascript는 제공하지 않으므로 별도의 함수를 만들어서 사용해야 합니다. 

[ ] 안에 속성명 또는 속성에 해당하는 값의 형태로 작성하여 사용할 수 있습니다. 

//jQuery
$('[type]'); // type 라는 속성을 가진 Object

$('[type="button"]'); // type이 button인 Object

$('[type="button"]').eq(1);

replace() 함수

• 자바스크립트에서 특정문자 또는 특수문자를 제거할때 replace() 함수를 사용하는 경우 , #가 여러번 있는 문자열(주민번호,전화번호)을 단순히 replace('#','')로 하면, 처음 #기호만 삭제되고 나머지는 삭제되지 않습니다.

var testStr = "#1#2#3";
testStr.replace("#","");

//결과값 : 1#2#3

replace()함수와 정규식을 활용하여 Java의 replaceAll() 함수와 동일한 기능을 하도록 만들어 보겠습니다. 

var testStr = "#1#2#3";
testStr.replace(/\#/g,"");

//결과값 : 123

해당 코드를 이용하여 replaceAll() 함수를 생성하여 사용하도록 합니다.

추가내용

• 자주쓰는 정규식
  • 특정문자 제거(#제거)   : str.replace(/\#/g,'');
  • 앞의 공백 제거           : str.replace(/^\s+/,'');
  • 뒤 공백 제거              : str.replace(/\s+$/,'');
  • 앞 공백 제거              : str.replace(/^\s+|\s+$/g,'');
  • 문자열 내의 공백 제거 : str.replace(/\s/g,'');
  • 줄바꿈 제거               : str.replace(/\n/g,'');
  • 엔터 제거                  : str.replace(/\r/g,'');
  • 0 제거                      : str.replace(/[^(1-9)]/gi,"");

jQuery UI 를 이용하여 일반적으로 팝업창을 사용을 많이 합니다. 

다이알로그 창을 이용해서 많이들 하시죠 

그런데... 다이알로그 창에서 기타 플러그인을 이용한 Confirm이나 alert를 사용할 경우 

Uncaught RangeError: Maximum call stack size exceeded.

오류를 만날때가 있습니다. 

이 문제는 추가로 발생된 alert이나 confirm 창이 기존에 열려있는 다이알로그과 충돌이 발생하여 무한루프가 발생하여 생기는 오류 입니다. 

(정확히는 jQuery Dialog와 bootbox 의 alert/confirm 이 서로 focus를 가져오려고 싸우다가 무한루프에 빠지는 현상입니다.)

현재시점(2017.08.04)에는 아직 완벽한 해결책을 찾지 못하였으나... 

오류가 없이 사용할 수 있는 방법을 공유해드릴려고 합니다. 

해당문제는 추가로 발생한 alert이나 confirm에서 해당 영역을 벗어난 부분을 클릭 할 경우 차동 창 닫기 기능이 동작하면서 발생하는 기능입니다. 

위의 그림과 같이 진행되었을경우 마지막 이미지의 닫히는 행위가 수행 될때 Uncaught RangeError: Maximum call stack size exceeded. 가 발생하게 됩니다.

본론으로 들어가서 해결하는(?) 방법.. 그러니까 닫히는 기능을 사용안하게 하여 오류를 피해가는 방법을 소개해드립니다.

1. bootstrap[.js 혹은 bootstrap.min.js 을 Open

2. c.prototype.enforceFocus 항목을 찾은뒤 해당 함수를 주석처리 합니다.

3. enforceFocus 를 사용하는 항목을 주석처리하기 위해 d.enforceFocus()를 찾아 주석처리 합니다.

4. 정상동작하는지 확인합니다.

<참고 프로그램 소스 : 아래 붉은색 부분 참조>

Button 클릭시 자동으로 서브밋 현상이 일어나는 경우 해결방법(Can I make a <button> not submit a form?)

<form>

        <button class="btn bg-color-teal txt-color-white">버튼1</button>

</form>

위와같은 코딩의 경우 100% 버튼 클릭시 서브밋 현상이 발생하게 되어있다.

해결방법은 type 속성을 추가해준다.

<form>

        <button type="button" class="btn bg-color-teal txt-color-white">버튼1</button>

</form>

※ 먼저 그리드가 밀리는 현상은 블로그 주인과 항상 동일한 사유가 아닐 수 있습니다. 

블로그 주인과 동일한 수정으로 수정이 되지 않는다고 욕하시면 안됩니다. ㅠㅠ

jqGrid 를 이용하여 프로젝트를 진행하다보면 아래 그림과 같이 그리드가 엇갈리는(밀리는) 현상이 발생하는 경우가...

해당 현상은 jqGrid의 초창기부터 내려오는 버그로서... 버전업이 되어도 고쳐지지 않는 현상이라 할 수 있습니다.

원인은 아래 그림에서 붉은색 부분의 가로 사이즈가 일치하지 않아 발생하는 현상으로 크롬에서는 정상 동작하나 IE에서 해당 현상이 발생하였습니다. 

다음의 코드를 이용하여 해당현상을 수정하였습니다. 

데이터를 조회하기 전에는 데이터가 없기 때문에 조회 할 경우 해당 사이즈를 일치 하여 주는 스크립트를 삽입하여

정상동작 하도록 수정할 수 있습니다. 

- 끝 -

수 (Numbers)

설계 명세서에 의하면 JavaScript에서 수는 "이중정밀도 64비트 형식 IEEE 754 값"으로 정의됩니다. 이것은 몇가지 흥미로운 결과를 가져옵니다. JavaScript에는 정수와 같은 것이 존재하지 않으므로, C 나 Java 에서 수학 계산을 한 경험이 있다면 산술할 때 약간 조심할 필요가 있습니다. 다음과 같은 경우를 주의해야 합니다:

덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 산술 연산자가 지원됩니다. 또한 앞에서 언급하는 것을 깜박 잊은 고급 수학 함수와 상수를 다루기 위한 수학(Math)으로 불리워지는 내장 객체가 있습니다:

내장 parseInt() 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이는 다음과 같이 옵션으로 주어지는 두번째 매개변수를 밑으로 하여 수행할 수 있습니다:

만약 이진수를 정수로 변환하고 싶다면, 밑을 바꾸기만하면 됩니다:

문자열이 수가 아닌 경우 NaN ("Not a Number" (수가 아님)을 줄인 약자)로 불리워지는 특별한 값을 돌려줍니다:

NaN는 어떤 수학 연산의 입력값으로써 주어지면 그 결과는 역시 NaN가 되기 때문입니다:

NaN을 처리하기 위해서 내장 isNaN() 함수를 사용해서 NaN 인지 여부를 검사할 수 있습니다:

JavaScript는 또 특별한 값 Infinity와 -Infinity를 가지고 있습니다: Infinity를 수(number)에서 설명하는 이유는 이 Infinity는 typeof 함수를 이용해 데이터타입을 확인하였을때 number로 분류되기 때문입니다. NaN과 마찬가지로 수학 연산값이 주어지는경우 그 결과는 Infinity가 됩니다. 

다음시간에는 문자열(String)에 대해서 이야기 해보겠습니다...

[JavaScript] 개요

개요

어떤 언어에서라도 기초가 되는 부분인 타입을 살펴보는 것부터 시작해봅시다. JavaScript 프로그램은 값을 다루고 해당 값은 모두 타입을 가지고 있습니다. JavaScript의 타입은 다음과 같습니다:

• 수 (Number)

• 문자열 (String)

• 부울 (Boolean)

• 함수 (Function)

• 객체 (Object)

추가로 기호(Symbol)이라는 것이 있지만 솔직히 그건 잘 모르겠습니다. ㅋㅋㅋ

그리고 약간 특별한 타입인 정의되지 않음(Undefined) 과 널(Null) 이 있습니다. 또한 객체의 특별한 종류인 배열(Array) 객체. 그리고 자유롭게 사용할 수 있는 날짜(Date) 객체 와 정규식(RegExp) 객체가 있습니다. 그리고 기술적으로 정확히 말해 함수(Function)는 단지 객체의 특별한 타입으로 취급됩니다. 따라서 타입 구조도를 정리해보면 다음과 같습니다

• 수 (Number)
• 문자열 (String)
• 부울 (Boolean)
• 기호 (Symbol)
• 객체 (Object)
• 함수 (Function)
• 배열 (Array)
• 날짜 (Date)
• 정규식 (RegExp)
• 널 (Null)
• 정의되지 않음 (Undefined)

[Javascript] 입문편

소개

Javascript는 태어날때 사실 JavaScript라는 이름을 가지지 않았습니다.

여러 브라우저에서 공통적으로 사용되는 JavaScript는 최초 1995년 Netscape의 엔지니어(Brendan Eich)에 의해 만들어졌습니다. 그리고 그 이름은 모카 또는 LiveScript로 불리워 지기로 되어있었습니다. 하지만 Sun Microsystem의 Java 언어의 성공에 편승해보려고 두 언어 사이의 공통점이 거의 없음에도 불구하고, 마케팅의 사유로 JavaScript라는 이름을 가지게 되었습니다. 그래서 이 사건은 처음 개발을 입문하는 사람이나 IT 지식이 없는 사람들에게 혼란의 근원이 되어버립니다.

대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품에서도 발견할 수 있고, node.js 와 같은 서버 측 환경에서도 찾을 수 있습니다. 하지만 JavaScript가 사용되는 분야는 계속 더 넓혀지고 있습니다. NoSQL 데이터베이스, Apache CouchDB, 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 GNOME 과 같은 데스크톱 환경에서도 JavaScript가 사용됩니다.