투명한 DIV가 필요한경우            background-color: rgba(255,255,255,0.4);

RGBA다.. RGB가 아니고.. 알파값을 주는 방법이다.

투명하게 설정하는 방법이 여러가지가 있는데 이경우는 해당 레이어만 반투명이 적용 되는 케이스이다. 

레이어가 자식으로 가지고 있는 객체는 투명해지지 않는다.

가변적인 브라우저의 크기의 경우 특정 DIV를 정중앙에 위치시킬 때 관련 블로그에 내용이 상당히 많이 나와 있긴하다.

예를 들면 iniline-block로 해서 문자로 인식하게 해서 text-align Center를 준다던가...(이러면 안에 모든 텍스트가 중앙정렬된다 ㅠㅠ)

이것 저것 고민하다가 아래와 같은 css 코드로 해결하였다.

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가 사용됩니다.

Jquery 혹은 javascript만으로 사용할 수 있는 괜찮은 스크롤바 관련 플러그인이 있다.

perfect-scrollbar

https://noraesae.github.io/perfect-scrollbar/

위 그림처럼 얇은 스크롤바를 생성할 수있 있다.

사용법도 상당히 간단하다. 위에 링크된 주소에 소스 및 예제가 비교적 잘 나와 있다. 

사용방법은 다음과 같다

해더부분의 소스 Import

html 코드 예시

적용될 html object CSS

Script 사용 예시 - 이 예시는 Jquery 버전이며 javascript 버전은 github에 API를 참조

div 안의 내용이 동적으로 사이즈가 변경될 경우 update 기능을 이용하여 갱신 시 자동으로 스크롤바 기능이 on/off 된다. 

스크롤바의 생성 제거를 반복해서 사용해도 되지만 실제 사용 시 스크롤바 생성시 약간의 스크립트 실행시간이 존재하는것 같아 update를 사용하는것을 권장한다.

마지막으로 작업에 사용했던 실제 사용 버전 파일

perfect-scrollbar-0.6.12.zip

특수문자 + 영문 + 숫자조합 패스워드 설정하기

// 비밀번호 특수문자 체크
var regExpSpcial:RegExp = /[^\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi
var regExpAlpha:RegExp = /[^a-zA-Z]/gi
var regExpNumber:RegExp = /[^0-9]/gi
if(regExpSpcial.test(pwd)){
    if(pwd.replace(regExpSpcial,"").length<1){
        alert("비밀번호는 특수문자가 최소 1자리가 필요합니다!");
        return ;
    }
}
if(regExpAlpha.test(pwd)){
    if(pwd.replace(regExpAlpha,"").length<1){
        alert("비밀번호는 영문자가 최소 1자리가 필요합니다!");
        return ;
    }
}
if(regExpNumber.test(pwd)){
    if(pwd.replace(regExpNumber,"").length<3){
        alert("비밀번호는 숫자가 최소 3자리가 필요합니다!");
        return ;                          
    }
}